:root {
  --keyboard-offset: 0px;
}


/* ===============================
   Shoutbox
=================================*/

#shoutbox-toggle {
    position: fixed; bottom: 20px; right: 20px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--dark2);
    font-size: 24px; display:flex; justify-content:center; align-items:center;
    cursor: pointer; z-index: 10002;  gap: 6px;
}
#shoutbox-badge {
    position: absolute; top: -6px; right: -6px;
    background: #ff2222; color: #fff;
    font-size: 12px; font-weight:bold; padding:2px 6px; border-radius:50%;
}

#shoutbox-toggle img {
    display: block;
}


/* Container zonder afgeronde hoeken */
#shoutbox-container {
    position: fixed; bottom: 100px; right: 20px;
    width: 320px; height: 500px; max-height:80vh;
    background: var(--dark2);
    border:1px solid var(--border); border-radius:0;
    display: none; flex-direction: column; z-index:10001;
    font-family: "Lucida Console", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
}
#shoutbox-header {
    display:flex; justify-content:space-between; align-items:center;
    background: var(--header-bg); color: var(--cyan);
    padding: 8px 12px; font-weight:bold; font-size:14px;
    border-bottom:1px solid var(--border);
}

/* Shoutbox body met scroll */
#shoutbox-body {
    display: flex;
    flex-direction: column;
    min-height: 300px;           /* altijd scrollbaar */
    flex-grow: 1;                /* groeit met container */
    padding: 10px;
    overflow-y: auto;
    background: var(--bg);
    -webkit-overflow-scrolling: touch;  /* smooth scroll op iOS */
    overscroll-behavior: contain;       /* voorkomt dat hele pagina mee scrolt */
    touch-action: pan-y;                /* alleen verticaal scrollen binnen shoutbox */
}

/* Berichten */
.messages .shout {
    padding: 10px 12px; margin-bottom: 12px;
    background: var(--box-bg); border-radius:6px; border:1px solid var(--border);
    font-size:13px;
    word-break: normal;
    overflow-wrap: break-word; /* moderne manier */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Form onderaan, alles meescrollen */
#shoutbox-body form { 
    margin-top: 10px;
}
#shoutbox-body form input, #shoutbox-body form textarea {
     color: var(--light); background: var(--box-bg); border:1px solid var(--border);
    border-radius:6px; padding:6px 8px; font-size:13px;
     width: 100%; /* neemt de volledige breedte van de container */
    box-sizing: border-box;
}

.light-theme #shoutbox-body form button {
    background: #e8efff;
    color: #004488;
    border: 1px solid #aac0e7;
}

#shoutbox-body form button {
display: block; 
    margin-top: 10px;
    padding: 10px 20px;
    border: 1px solid #2255aa;
    border-radius: 5px;
    background: #001166;
    color: #66ccff;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}



.light-theme  #shoutbox-body form button:hover,
.light-theme .box input[type="submit"]:hover {
  background: #d6e4ff;
  color: #002255;
}


#shoutbox-body form button:hover {     background: #0033cc;
    color: #00ffff; }


.shoutbox-error {
    background: #ff2222;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
}


@media (max-width: 900px) {

  #shoutbox-container {
    transform: translateY(calc(-1 * var(--keyboard-offset)));
    transition: transform 0.2s ease;
  }

  /* header blijft vast */
  #shoutbox-header {
    flex-shrink: 0;
  }

  /* body wordt scrollbaar */
  #shoutbox-body {
    flex: 1 1 auto;
    overflow-y: auto;
  }

  /* form blijft altijd zichtbaar */
  #shoutbox-body form {
    position: sticky;
    bottom: 0;
    background: var(--dark);
    padding-bottom: env(safe-area-inset-bottom); /* iOS fix */
  }

  textarea {
    min-height: 80px;
    max-height: 160px;
  }
}