/* ─── Aanvullende CSS — alleen voor onderdelen ZONDER 1-op-1 legacy-visueel-equivalent
   (operator-toolbar, webcam/dossier-modals, de eigen chat-grid-layoutmechaniek die de rol van de
   legacy's <table width=995>-indeling overneemt). De echte site-CSS (chattijd.css/kinkytijd.css/
   chats.css, 1-op-1 gekopieerd uit assets/css/) levert body-achtergrond, .ct-content, .chatwindow,
   .cvwindow, .activechat, de man/vrouw/stel/tg-kleuren, fontsize-klassen enz. - dit bestand mag die
   NOOIT overschrijven, dus alleen hieronder toevoegen wat écht ontbreekt. ───────────────────────── */

/* === Config-knop === */
#configbutton {
    position: fixed;
    top: 8px;
    right: 10px;
    z-index: 1000;
    cursor: pointer;
    color: #aaa;
    font-size: 20px;
    transition: color 0.2s;
}
#configbutton:hover { color: #fff; }

/* === Operatorlaag (#opsmenu) ===
   Tegenhanger van mngment\dsp_knoppen.cfm's <nav class="cbp-spmenu cbp-spmenu-horizontal
   cbp-spmenu-top" id="opsmenu"> + Layout\jPushMenu.css: een laag die met het tandwiel in de
   menubalk van bovenaf inschuift en over de pagina heen ligt (de legacy duwt alleen bij de
   linker/rechter-varianten de body opzij, bij "top" niet). Afwijking op de legacy: translateY
   i.p.v. de vaste top:-150px/top:0, zodat de laag ook bij een afwijkende hoogte (tweede rij met
   standaard-operatorberichten) volledig uit beeld blijft tot ze geopend wordt. */
.cbp-spmenu.cbp-spmenu-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.cbp-spmenu.cbp-spmenu-top.cbp-spmenu-open { transform: translateY(0); }
.opsmenu-sluiten {
    background: #3a3048;
    color: #ccc;
    cursor: pointer;
    text-align: right;
    font-size: 12px;
    padding: 2px 8px;
}
.opsmenu-sluiten:hover { color: #fff; }
.opsmenu-sluiten .close { color: #ccc; opacity: 1; font-size: 18px; line-height: 1; margin-left: 6px; }

/* === Operator toolbar === */
/* Gewone document-flow i.p.v. position:fixed - dat dateerde van vóór de echte navbar er stond
   (Layout\dsp_chatmenu.cfm) bovenaan de pagina kwam; fixed;top:0 legde deze balk toen letterlijk
   over die navbar heen. Sinds de balk in #opsmenu hierboven zit, verzorgt die laag de plaatsing. */
.operatortools-bar {
    background: #3a3048;
    border-bottom: 1px solid #555;
    padding: 4px 8px;
}

/* === Panel headers === */
.panel-header {
    font-size: 11px;
    color: #bbb;
    padding: 2px 4px 4px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 4px;
}

/* .chatwindow/.cvwindow (afmetingen/kleur) komen volledig uit de echte chattijd.css/kinkytijd.css -
   niet hier herdefiniëren, dat zou de echte 150x250/247x375-afmetingen overschrijven. */

/* === Chatter-items (lijst) === */
.chatter-item {
    padding: 2px 4px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 2px;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chatter-item:hover { background: rgba(255,255,255,0.1); }
.chatter-item.eigen-chatter { font-weight: bold; }

/* Gender-kleuren (.man/.vrouw/.stel/.tg/.onz/.elf) komen uit de echte chattijd.css/kinkytijd.css -
   die klassen staan al los (naast .chatter-item) op elk item, dus geen eigen .chatter-item.xxx-regels
   hier - dat zouden zwaardere selectors zijn die de echte kleuren altijd zouden winnen. */

.chatter-totaal { color: #888; font-size: 10px; padding: 2px 4px; }

/* Foto-lijst modus */
.chatter-foto-item {
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
}
.chatter-foto-item img { display: block; }

/* === Net-binnen === */
.net-binnen-item {
    border-left: 3px solid #5a4f8a;
    padding-left: 6px;
    margin-bottom: 2px;
}

/* === Webcam-banner === */
.webcam-banner {
    border: 1px ridge rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 6px;
    font-size: 13px;
}
.webcam-banner:hover { background: rgba(255,255,255,0.08); }

/* === Chat-berichten (speech bubbles) === */
.speech-bubble {
    display: inline-block;
    max-width: 85%;
    padding: 6px 10px;
    border-radius: 8px;
    margin: 2px 0;
    word-break: break-word;
    font-size: 13px;
}
.speech-left {
    float: left;
    clear: both;
    background: rgba(90,79,138,0.5);
    color: #eee;
    border-bottom-left-radius: 2px;
}
.speech-right {
    float: right;
    clear: both;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-bottom-right-radius: 2px;
}
.bg-highlight {
    background: rgba(90,79,138,0.7) !important;
}
.color-highlight { color: #a08ae0; }
.color-black { color: #fff; }

/* FontSize klassen */
.fontsize10 { font-size: 10px; }
.fontsize11 { font-size: 11px; }
.fontsize12 { font-size: 12px; }
.fontsize13 { font-size: 13px; }
.fontsize14 { font-size: 14px; }
.fontsize15 { font-size: 15px; }
.fontsize16 { font-size: 16px; }

/* === Bericht-invoer === */
#chatlinkscontainer {
    padding: 4px;
}
/* .tekstveld/.bericht (kleur/hoogte) komen uit de echte CSS - het textarea-element gebruikt nu
   letterlijk class="tekstveld bericht" (twee losse klassen, conform dsp_chatlinks.cfm), dus geen
   eigen .tekstveld.bericht-override hier nodig of gewenst. */

/* === Chatter-info panel (scroll-chat) === */
.cvcontainer {
    display: flex;
    flex-direction: row;
}
.cvdiv { display: inline-block; vertical-align: top; }

/* .activechat (afmetingen/kleur) komt uit de echte CSS, niet hier herdefiniëren. */

/* === Modals === */
.modal-content {
    background: #2a2840;
    color: #ddd;
    border: 1px solid #555;
}
.modal-header {
    border-bottom: 1px solid #444;
    background: #1e1c30;
}
.modal-header .close { color: #aaa; }

/* === Kinkytijd overrides (alleen voor de eigen, legacy-loze onderdelen hierboven - man/vrouw/stel/
   tg/elf/onz-kleuren per site komen uit kinkytijd.css zelf) === */
body.kt .speech-left    { background: rgba(120,0,0,0.5); }
body.kt .bg-highlight   { background: rgba(120,0,0,0.7) !important; }
body.kt .color-highlight { color: #ff6060; }