/* =====================================================
   KissBook TV — Chat Panel (v6.1 — Premium Design)
   ===================================================== */

/* ── Body wrapper ── */
#kbt-body { display:flex; flex:1; overflow:hidden; min-height:0; }
#kbt-body #kbt-browse { flex:1; min-width:0; }

/* ── Chat Panel ── */
#kbt-chat-panel {
    width:0; overflow:hidden; transition:width .3s ease;
    background:var(--kbt-bg); border-left:1px solid rgba(255,255,255,.06);
    display:flex; flex-direction:column; flex-shrink:0;
}
#kbt-chat-panel.kbt-chat-open { width:320px; }

/* ── Chat Header ── */
.kbt-chat-header {
    min-height:52px; display:flex; align-items:center; padding:0 14px; gap:8px;
    background:rgba(255,255,255,.03); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--kbt-glass-border);
    flex-shrink:0;
}
.kbt-chat-tabs { display:flex; gap:6px; flex:1; align-items:center; }
.kbt-chat-tab {
    background:none; border:none; color:rgba(255,255,255,.4); font-size:22px;
    font-weight:600; padding:8px 16px; border-radius:6px; cursor:pointer; transition:.2s;
}
.kbt-chat-tab.active { color:#fff; background:rgba(255,255,255,.08); }
.kbt-chat-tab:hover { color:rgba(255,255,255,.7); }
.kbt-chat-tab .kbt-badge {
    background:var(--kbt-accent); color:#fff; font-size:11px; padding:1px 6px;
    border-radius:10px; margin-left:3px; vertical-align:middle;
}
.kbt-chat-close {
    background:none; border:none; color:rgba(255,255,255,.3); font-size:18px;
    cursor:pointer; padding:4px; transition:color .15s;
}

/* Animation de clignotement pour les notifications */
@keyframes kbt-blink-accent {
    0%, 100% {
        background-color: var(--kbt-accent, #ff3333) !important;
        color: #fff !important;
        box-shadow: 0 0 8px var(--kbt-accent, #ff3333);
    }
    50% {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        box-shadow: none;
    }
}
.kbt-chat-blink {
    animation: kbt-blink-accent 1s infinite !important;
}
.kbt-chat-close:hover { color:#ff5555; }

/* ── Chat Room Header ── */
.kbt-room-header {
    padding:8px 14px; background:rgba(255,255,255,.02);
    border-bottom:1px solid rgba(255,255,255,.04);
    font-size:11px; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:6px;
}
.kbt-room-dot { width:6px; height:6px; border-radius:50%; background:#4ade80; flex-shrink:0; }

/* ── Messages Area ── */
.kbt-chat-messages {
    flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px;
    scroll-behavior:smooth;
}
.kbt-chat-messages::-webkit-scrollbar { width:4px; }
.kbt-chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.06); border-radius:2px; }

.kbt-chat-msg {
    display:flex; gap:8px; animation:kbt-msgIn .2s ease;
}
@keyframes kbt-msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.kbt-msg-avatar {
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,.08); object-fit:cover;
}
.kbt-msg-avatar-placeholder {
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; color:#fff; font-weight:700;
}
.kbt-msg-body { flex:1; min-width:0; }
.kbt-msg-header { display:flex; align-items:baseline; gap:6px; margin-bottom:2px; }
.kbt-msg-pseudo {
    font-size:12px; font-weight:700; color:rgba(255,255,255,.8);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px;
}
.kbt-msg-pseudo.kbt-is-member { color:var(--kbt-gold); }
.kbt-msg-member-badge {
    font-size:8px; background:var(--kbt-gold); color:#000; padding:1px 4px;
    border-radius:4px; font-weight:800; vertical-align:middle;
}
.kbt-msg-time { font-size:9px; color:rgba(255,255,255,.2); }
.kbt-msg-text {
    font-size:13px; color:rgba(255,255,255,.7); line-height:1.4;
    word-wrap:break-word; overflow-wrap:break-word;
}

/* Sticker message */
.kbt-msg-sticker {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:12px; font-size:13px; font-weight:700;
    color:#fff; min-width:80px; justify-content:center;
}
.kbt-msg-sticker-emoji { font-size:24px; }

/* System message */
.kbt-chat-system {
    text-align:center; font-size:10px; color:rgba(255,255,255,.25);
    padding:6px 0; font-style:italic;
}

/* ── Input Area ── */
.kbt-chat-input-area {
    padding:10px; border-top:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.02); flex-shrink:0;
}
.kbt-chat-input-row {
    display:flex; gap:6px; align-items:flex-end;
}
.kbt-chat-input {
    flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    border-radius:8px; padding:8px 12px; color:#fff; font-size:13px;
    font-family:var(--kbt-font); resize:none; outline:none; min-height:36px; max-height:80px;
    transition:border .2s;
}
.kbt-chat-input:focus { border-color:var(--kbt-accent); box-shadow:0 0 0 2px var(--kbt-accent-h); }
.kbt-chat-input::placeholder { color:rgba(255,255,255,.2); }
.kbt-chat-toolbar {
    display:flex; gap:2px; margin-top:6px;
}
.kbt-chat-tool-btn {
    background:none; border:none; color:rgba(255,255,255,.35); font-size:16px;
    cursor:pointer; padding:4px 6px; border-radius:6px; transition:.15s;
}
.kbt-chat-tool-btn:hover { color:#fff; background:rgba(255,255,255,.06); }
.kbt-chat-send-btn {
    background:var(--kbt-accent); border:none; color:#fff; font-size:14px;
    padding:8px 12px; border-radius:8px; cursor:pointer; transition:opacity .2s;
    font-weight:700;
}
.kbt-chat-send-btn:hover { opacity:.85; }
.kbt-chat-send-btn:disabled { opacity:.3; cursor:not-allowed; }

/* ── Guest Banner ── */
.kbt-chat-guest-banner {
    padding:10px 14px; background:rgba(229,9,20,.08); border:1px solid rgba(229,9,20,.15);
    border-radius:8px; margin:10px; font-size:11px; color:rgba(255,255,255,.6); text-align:center;
}
.kbt-chat-guest-banner a { color:var(--kbt-gold); font-weight:700; }

/* ── Pseudo Input (guest) ── */
.kbt-chat-pseudo-wrap {
    padding:10px 14px; display:flex; gap:6px; align-items:center;
}
.kbt-chat-pseudo-input {
    flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    border-radius:6px; padding:6px 10px; color:#fff; font-size:12px; outline:none;
}

/* ── Emoji Picker ── */
.kbt-emoji-picker {
    display:none; position:absolute; bottom:100%; left:0; right:0;
    background:var(--kbt-bg2); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; margin-bottom:6px; max-height:260px; overflow:hidden;
    box-shadow:0 -8px 30px rgba(0,0,0,.5); z-index:10;
}
.kbt-emoji-picker.open { display:block; }
.kbt-emoji-cats {
    display:flex; border-bottom:1px solid rgba(255,255,255,.06); padding:4px 6px; gap:2px;
}
.kbt-emoji-cat-btn {
    background:none; border:none; font-size:14px; padding:4px 6px; cursor:pointer;
    border-radius:4px; transition:background .15s; opacity:.5;
}
.kbt-emoji-cat-btn:hover, .kbt-emoji-cat-btn.active { opacity:1; background:rgba(255,255,255,.06); }
.kbt-emoji-grid {
    display:grid; grid-template-columns:repeat(8,1fr); padding:8px; gap:2px;
    max-height:200px; overflow-y:auto;
}
.kbt-emoji-grid::-webkit-scrollbar { width:3px; }
.kbt-emoji-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); }
.kbt-emoji-btn {
    background:none; border:none; font-size:20px; padding:4px; cursor:pointer;
    border-radius:6px; transition:background .1s, transform .1s;
}
.kbt-emoji-btn:hover { background:rgba(255,255,255,.08); transform:scale(1.2); }

/* ── Sticker Picker ── */
.kbt-sticker-picker {
    display:none; position:absolute; bottom:100%; left:0; right:0;
    background:var(--kbt-bg2); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; margin-bottom:6px; box-shadow:0 -8px 30px rgba(0,0,0,.5); z-index:10;
}
.kbt-sticker-picker.open { display:block; }
.kbt-sticker-grid {
    display:grid; grid-template-columns:repeat(4,1fr); padding:10px; gap:8px;
    max-height:250px; overflow-y:auto;
}
.kbt-sticker-item {
    cursor:pointer; border-radius:10px; overflow:hidden; transition:transform .15s;
    display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px;
    background:rgba(255,255,255,.03); border:1px solid transparent;
}
.kbt-sticker-item:hover { transform:scale(1.08); border-color:rgba(255,255,255,.1); }
.kbt-sticker-item .kbt-stk-emoji { font-size:32px; }
.kbt-sticker-item .kbt-stk-label { font-size:9px; color:rgba(255,255,255,.4); font-weight:700; }

/* ── Online Users Tab ── */
.kbt-online-list { flex:1; overflow-y:auto; padding:10px; }
.kbt-online-user {
    display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px;
    cursor:pointer; transition:background .15s;
}
.kbt-online-user:hover { background:rgba(255,255,255,.04); }
.kbt-online-avatar {
    width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.kbt-online-info { flex:1; min-width:0; }
.kbt-online-pseudo { font-size:13px; font-weight:600; color:rgba(255,255,255,.8); }
.kbt-online-pseudo.kbt-is-member { color:var(--kbt-gold); }
.kbt-online-watching {
    font-size:10px; color:rgba(255,255,255,.3); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}
.kbt-online-dot {
    width:8px; height:8px; border-radius:50%; background:#4ade80;
    box-shadow:0 0 4px #4ade80; flex-shrink:0;
}

/* ── Profile Card (DM) ── */
.kbt-dm-profile {
    padding:16px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.02);
}
.kbt-dm-profile img {
    width:56px; height:56px; border-radius:50%; margin-bottom:8px;
    border:2px solid var(--kbt-gold);
}
.kbt-dm-profile-name { font-size:14px; font-weight:700; color:#fff; }
.kbt-dm-profile-meta { font-size:11px; color:rgba(255,255,255,.3); margin-top:3px; }
.kbt-dm-back {
    background:rgba(255,255,255,.06); border:none; color:rgba(255,255,255,.5);
    padding:6px 12px; border-radius:6px; cursor:pointer; font-size:11px;
    margin-top:8px; transition:.15s;
}
.kbt-dm-back:hover { color:#fff; background:rgba(255,255,255,.1); }

/* ── Titlebar chat toggle ── */
#kbt-chat-toggle {
    background:none; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5);
    font-size:13px; padding:5px 12px; border-radius:6px; cursor:pointer; transition:.2s;
    display:flex; align-items:center; gap:5px;
}
#kbt-chat-toggle:hover { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
#kbt-chat-toggle .kbt-unread-dot {
    width:6px; height:6px; border-radius:50%; background:var(--kbt-accent);
    display:none; animation:kbt-p 1.4s ease-in-out infinite;
}

/* ══════ RESPONSIVE ══════ */
@media (max-width:900px) {
    #kbt-chat-panel.kbt-chat-open { width:280px; }
}
@media (max-width:700px) {
    #kbt-chat-panel.kbt-chat-open {
        position:absolute; right:0; top:52px; bottom:0; width:100%; z-index:50;
        border-left:none;
    }
}

/* ── Accessibility: focus-visible ── */
.kbt-chat-tab:focus-visible,
.kbt-chat-send-btn:focus-visible,
.kbt-emoji-btn:focus-visible,
.kbt-sticker-item:focus-visible,
.kbt-chat-close:focus-visible {
    outline: 2px solid var(--kbt-accent, #ff3333);
    outline-offset: 2px;
}