@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* All layout styles handled by Tailwind CSS classes. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* All nav styles handled by Tailwind + app.css (a.nav-link.active). */
/* /Components/Pages/Chat/Chat.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Chat — dark navy style (always dark, independent of app theme)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Root layout (layout via inline styles; CSS handles colours/radius) ──── */
.ct-root[b-9zveusm7co] {
    border-radius:    18px;
    position:         relative; /* required so mobile absolute sidebar overlays correctly */
}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════════════════════ */
.ct-sidebar[b-9zveusm7co] {
    width:            272px;
    flex-shrink:      0;
    background:       var(--ct-sidebar);
    border-right:     1px solid var(--ct-border);
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
}

/* ── Sidebar header ───────────────────────────────────────────────────────── */
.ct-sidebar-header[b-9zveusm7co] {
    padding:          18px 16px 12px;
    flex-shrink:      0;
    border-bottom:    1px solid var(--ct-border);
}

.ct-sidebar-title[b-9zveusm7co] {
    font-size:        15px;
    font-weight:      700;
    color:            var(--ct-text1);
    letter-spacing:   -.01em;
}

.ct-sidebar-subtitle[b-9zveusm7co] {
    font-size:        11.5px;
    color:            var(--ct-text2);
    margin-top:       2px;
}

/* ── Search ───────────────────────────────────────────────────────────────── */
.ct-search-wrap[b-9zveusm7co] {
    padding:          10px 12px 8px;
    flex-shrink:      0;
}

.ct-search-inner[b-9zveusm7co] {
    position:         relative;
    display:          flex;
    align-items:      center;
}

.ct-search-icon[b-9zveusm7co] {
    position:         absolute;
    left:             10px;
    font-size:        16px !important;
    color:            var(--ct-text3);
    pointer-events:   none;
}

.ct-search-input[b-9zveusm7co] {
    width:            100%;
    background:       var(--ct-card);
    border:           1px solid var(--ct-border);
    border-radius:    10px;
    padding:          7px 10px 7px 34px;
    font-size:        13px;
    color:            var(--ct-text1);
    outline:          none;
    transition:       border-color .15s;
}

.ct-search-input[b-9zveusm7co]::placeholder { color: var(--ct-text3); }
.ct-search-input:focus[b-9zveusm7co] { border-color: var(--ct-accent); }

/* ── New Chat button ──────────────────────────────────────────────────────── */
.ct-sidebar-actions[b-9zveusm7co] {
    padding:          8px 12px 4px;
    flex-shrink:      0;
}

.ct-new-chat-btn[b-9zveusm7co] {
    width:            100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              6px;
    padding:          9px 14px;
    border-radius:    10px;
    border:           1.5px dashed var(--ct-border-md);
    background:       transparent;
    color:            var(--ct-accent);
    font-size:        13px;
    font-weight:      600;
    cursor:           pointer;
    transition:       background .15s, border-color .15s;
}

.ct-new-chat-btn:hover[b-9zveusm7co] {
    background:       var(--ct-active);
    border-color:     var(--ct-accent);
}

/* ── Section labels ───────────────────────────────────────────────────────── */
.ct-conv-section-header[b-9zveusm7co] {
    padding:          10px 14px 4px;
    font-size:        10px;
    font-weight:      700;
    letter-spacing:   .09em;
    text-transform:   uppercase;
    color:            var(--ct-text3);
    flex-shrink:      0;
}

.ct-conv-empty[b-9zveusm7co] {
    padding:          4px 14px 8px;
    font-size:        12px;
    color:            var(--ct-text3);
    font-style:       italic;
}

/* ── Conversation list ────────────────────────────────────────────────────── */
.ct-conv-list[b-9zveusm7co] {
    flex:             1;
    overflow-y:       auto;
    overflow-x:       hidden;
    padding-bottom:   8px;
}

.ct-conv-item[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          9px 12px;
    width:            100%;
    border:           none;
    background:       transparent;
    cursor:           pointer;
    text-align:       left;
    transition:       background .12s;
    position:         relative;
}

.ct-conv-item:hover[b-9zveusm7co] { background: var(--ct-hover); }

.ct-conv-active[b-9zveusm7co] {
    background:       var(--ct-active) !important;
    border-left:      2.5px solid var(--ct-accent);
    padding-left:     9.5px;
}

/* ── Avatar circles ───────────────────────────────────────────────────────── */
.ct-conv-avatar[b-9zveusm7co] {
    width:            38px;
    height:           38px;
    border-radius:    50%;
    background:       linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color:            #fff;
    font-size:        15px;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    position:         relative;
    text-transform:   uppercase;
}

.ct-conv-avatar-group[b-9zveusm7co] {
    background:       linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.ct-online-dot[b-9zveusm7co] {
    position:         absolute;
    bottom:           1px;
    right:            1px;
    width:            10px;
    height:           10px;
    border-radius:    50%;
    background:       var(--ct-online);
    border:           2px solid var(--ct-sidebar);
}

.ct-online-dot-lg[b-9zveusm7co] {
    width:            11px;
    height:           11px;
    bottom:           2px;
    right:            2px;
}

/* ── Conv info ────────────────────────────────────────────────────────────── */
.ct-conv-info[b-9zveusm7co] {
    flex:             1;
    min-width:        0;
    display:          flex;
    flex-direction:   column;
    gap:              2px;
}

.ct-conv-name[b-9zveusm7co] {
    font-size:        13.5px;
    font-weight:      600;
    color:            var(--ct-text1);
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
}

.ct-conv-preview[b-9zveusm7co] {
    font-size:        12px;
    color:            var(--ct-text2);
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
}

.ct-conv-badge[b-9zveusm7co] {
    min-width:        18px;
    height:           18px;
    padding:          0 5px;
    border-radius:    9px;
    background:       #ef4444;
    color:            #fff;
    font-size:        10.5px;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

/* ── Unread conversation indicators ──────────────────────────────────────── */
.ct-conv-unread[b-9zveusm7co] {
    background:       rgba(99,102,241,0.06) !important;
}

.ct-conv-name-unread[b-9zveusm7co] {
    font-weight:      700;
    color:            var(--ct-text1);
}

.ct-conv-preview-unread[b-9zveusm7co] {
    color:            var(--ct-text1) !important;
    font-weight:      500;
}

.ct-conv-info-btn[b-9zveusm7co] {
    width:            24px;
    height:           24px;
    border-radius:    6px;
    border:           none;
    background:       transparent;
    color:            var(--ct-text3);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s, color .1s;
    flex-shrink:      0;
}

.ct-conv-info-btn:hover[b-9zveusm7co] {
    background:       var(--ct-hover);
    color:            var(--ct-text1);
}

/* ════════════════════════════════════════════════════════════════════════════
   MAIN AREA
════════════════════════════════════════════════════════════════════════════ */
.ct-main[b-9zveusm7co] {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    min-width:        0;
    background:       var(--ct-bg);
}

/* ── No conversation selected ─────────────────────────────────────────────── */
.ct-no-conv[b-9zveusm7co] {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              12px;
    color:            var(--ct-text3);
}

.ct-no-conv-icon[b-9zveusm7co] { opacity: .35; }
.ct-no-conv-icon svg[b-9zveusm7co] { color: var(--ct-text2); }

.ct-no-conv-title[b-9zveusm7co] {
    font-size:        15px;
    font-weight:      500;
    color:            var(--ct-text2);
}

.ct-no-conv-link[b-9zveusm7co] {
    font-size:        13px;
    color:            var(--ct-accent);
    background:       none;
    border:           none;
    cursor:           pointer;
    padding:          0;
    text-decoration:  underline;
    text-underline-offset: 2px;
}

.ct-show-convs-btn[b-9zveusm7co] {
    display:          none;
}

/* ── Chat header ──────────────────────────────────────────────────────────── */
.ct-chat-header[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          12px 16px;
    border-bottom:    1px solid var(--ct-border);
    flex-shrink:      0;
    background:       var(--ct-sidebar);
}

.ct-chat-header-avatar[b-9zveusm7co] {
    width:            38px;
    height:           38px;
    border-radius:    50%;
    background:       linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color:            #fff;
    font-size:        15px;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    position:         relative;
    text-transform:   uppercase;
}

.ct-chat-header-info[b-9zveusm7co] {
    flex:             1;
    min-width:        0;
    display:          flex;
    flex-direction:   column;
    gap:              1px;
}

.ct-chat-header-name[b-9zveusm7co] {
    font-size:        14.5px;
    font-weight:      700;
    color:            var(--ct-text1);
}

.ct-chat-header-sub[b-9zveusm7co] {
    font-size:        11.5px;
    color:            var(--ct-text2);
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
}

.ct-icon-btn[b-9zveusm7co] {
    width:            34px;
    height:           34px;
    border-radius:    9px;
    border:           none;
    background:       transparent;
    color:            var(--ct-text2);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .12s, color .12s;
    flex-shrink:      0;
}

.ct-icon-btn:hover[b-9zveusm7co] {
    background:       var(--ct-hover);
    color:            var(--ct-text1);
}

.ct-call-btn[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              5px;
    padding:          7px 14px;
    border-radius:    9px;
    border:           none;
    background:       var(--ct-accent);
    color:            #fff;
    font-size:        12.5px;
    font-weight:      600;
    cursor:           pointer;
    transition:       opacity .12s;
    flex-shrink:      0;
}

.ct-call-btn:hover[b-9zveusm7co] { opacity: .88; }
.ct-call-btn:disabled[b-9zveusm7co] { opacity: .4; cursor: not-allowed; }

.ct-back-btn[b-9zveusm7co] {
    display:          none;
}

/* ── Call error banner ────────────────────────────────────────────────────── */
.ct-call-error-banner[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              8px;
    padding:          9px 14px;
    background:       rgba(239,68,68,.12);
    border-bottom:    1px solid rgba(239,68,68,.2);
    font-size:        12.5px;
    color:            #fca5a5;
    flex-shrink:      0;
}

.ct-call-error-close[b-9zveusm7co] {
    background:       none;
    border:           none;
    color:            #fca5a5;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    padding:          2px;
    border-radius:    4px;
    flex-shrink:      0;
    opacity:          .8;
}

.ct-call-error-close:hover[b-9zveusm7co] { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   MESSAGES
════════════════════════════════════════════════════════════════════════════ */
.ct-messages[b-9zveusm7co] {
    flex:             1;
    overflow-y:       auto;
    padding:          20px 20px 8px;
    display:          flex;
    flex-direction:   column;
    gap:              4px;
}

.ct-loading[b-9zveusm7co],
.ct-empty[b-9zveusm7co] {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    color:            var(--ct-text3);
    font-size:        14px;
}

/* System events (call ended / missed call) */
.ct-system-event[b-9zveusm7co] {
    text-align:       center;
    font-size:        12px;
    color:            var(--ct-text3);
    padding:          6px 0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              5px;
}

.ct-system-event-time[b-9zveusm7co] {
    opacity:          .6;
    font-size:        11px;
    margin-left:      4px;
}

/* ── Message row ──────────────────────────────────────────────────────────── */
.ct-msg-row[b-9zveusm7co] {
    display:          flex;
    gap:              10px;
    max-width:        72%;
    margin-bottom:    6px;
}

.ct-msg-row-other[b-9zveusm7co] { align-self: flex-start; }

.ct-msg-row-me[b-9zveusm7co] {
    align-self:       flex-end;
    flex-direction:   row-reverse;
}

.ct-msg-avatar[b-9zveusm7co] {
    width:            34px;
    height:           34px;
    border-radius:    50%;
    background:       linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color:            #fff;
    font-size:        13px;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    align-self:       flex-end;
    text-transform:   uppercase;
}

.ct-msg-body[b-9zveusm7co] {
    display:          flex;
    flex-direction:   column;
    gap:              4px;
    min-width:        0;
}

.ct-msg-sender[b-9zveusm7co] {
    font-size:        11.5px;
    font-weight:      600;
    color:            var(--ct-accent);
    padding-left:     2px;
}

/* ── Bubble ───────────────────────────────────────────────────────────────── */
.ct-msg-wrapper[b-9zveusm7co] {
    display:          flex;
    align-items:      flex-end;
    gap:              6px;
    position:         relative;
}

.ct-msg-row-me .ct-msg-wrapper[b-9zveusm7co] {
    flex-direction:   row-reverse;
}

.ct-bubble[b-9zveusm7co] {
    padding:          10px 14px;
    border-radius:    16px;
    font-size:        14px;
    line-height:      1.5;
    word-break:       break-word;
    white-space:      pre-wrap;
}

.ct-bubble-other[b-9zveusm7co] {
    background:       var(--ct-card);
    border:           1px solid var(--ct-border);
    color:            var(--ct-text1);
    border-bottom-left-radius: 4px;
}

.ct-bubble-me[b-9zveusm7co] {
    background:       var(--ct-accent);
    color:            #fff;
    border-bottom-right-radius: 4px;
}

.ct-msg-time[b-9zveusm7co] {
    font-size:        10.5px;
    color:            var(--ct-text3);
    padding-left:     2px;
    align-self:       flex-end;
}

.ct-msg-row-me .ct-msg-time[b-9zveusm7co] {
    padding-left:     0;
    padding-right:    2px;
    text-align:       right;
}

/* ── Delete button ────────────────────────────────────────────────────────── */
.ct-delete-btn[b-9zveusm7co] {
    width:            26px;
    height:           26px;
    border-radius:    7px;
    border:           none;
    background:       rgba(239,68,68,.12);
    color:            #f87171;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    opacity:          0;
    transition:       opacity .12s, background .12s;
}

.ct-delete-btn span[b-9zveusm7co] { font-size: 14px !important; }

.ct-msg-wrapper:hover .ct-delete-btn[b-9zveusm7co] { opacity: 1; }
.ct-delete-btn:hover[b-9zveusm7co] { background: rgba(239,68,68,.22); }

/* ── Reactions ────────────────────────────────────────────────────────────── */
.ct-reaction-trigger[b-9zveusm7co] {
    width:            26px;
    height:           26px;
    border-radius:    7px;
    border:           none;
    background:       transparent;
    font-size:        14px;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    opacity:          0;
    transition:       opacity .12s, transform .12s, background .12s;
}

.ct-msg-wrapper:hover .ct-reaction-trigger[b-9zveusm7co],
.ct-reaction-trigger-open[b-9zveusm7co] { opacity: 1; }
.ct-reaction-trigger:hover[b-9zveusm7co] { background: var(--ct-hover); transform: scale(1.15); }

.ct-reaction-picker[b-9zveusm7co] {
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    12px;
    padding:          8px;
    display:          flex;
    gap:              4px;
    flex-wrap:        wrap;
    width:            220px;
    box-shadow:       0 8px 32px rgba(0,0,0,.5);
}

.ct-reaction-emoji-btn[b-9zveusm7co] {
    width:            32px;
    height:           32px;
    border:           none;
    background:       transparent;
    font-size:        17px;
    cursor:           pointer;
    border-radius:    8px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s, transform .1s;
}

.ct-reaction-emoji-btn:hover[b-9zveusm7co] {
    background:       var(--ct-hover);
    transform:        scale(1.25);
}

.ct-reaction-bar[b-9zveusm7co] {
    display:          flex;
    flex-wrap:        wrap;
    gap:              4px;
    margin-top:       2px;
}

.ct-reaction-chip[b-9zveusm7co] {
    display:          inline-flex;
    align-items:      center;
    gap:              3px;
    padding:          3px 8px;
    border-radius:    20px;
    border:           1px solid var(--ct-border-md);
    background:       var(--ct-card);
    font-size:        13px;
    cursor:           pointer;
    transition:       background .1s, border-color .1s;
}

.ct-reaction-chip:hover[b-9zveusm7co] { background: var(--ct-raised); }

.ct-reaction-chip-mine[b-9zveusm7co] {
    background:       var(--ct-active) !important;
    border-color:     var(--ct-accent) !important;
}

.ct-reaction-count[b-9zveusm7co] { font-size: 11px; color: var(--ct-text2); }

/* ── Typing indicator ─────────────────────────────────────────────────────── */
.ct-typing-bar[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              8px;
    padding:          6px 20px 2px;
    flex-shrink:      0;
}

.ct-typing-dots[b-9zveusm7co] {
    display:          flex;
    gap:              3px;
    align-items:      center;
}

.ct-typing-dot[b-9zveusm7co] {
    width:            6px;
    height:           6px;
    border-radius:    50%;
    background:       var(--ct-text3);
    animation:        ct-dot-bounce-b-9zveusm7co 1.2s ease-in-out infinite;
}

.ct-typing-dot:nth-child(2)[b-9zveusm7co] { animation-delay: .2s; }
.ct-typing-dot:nth-child(3)[b-9zveusm7co] { animation-delay: .4s; }

@keyframes ct-dot-bounce-b-9zveusm7co {
    0%, 80%, 100% { transform: scale(0.7); opacity: .5; }
    40%           { transform: scale(1.1); opacity: 1; }
}

.ct-typing-label[b-9zveusm7co] {
    font-size:        12px;
    color:            var(--ct-text3);
    font-style:       italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   INPUT BAR  (Discord-style)
════════════════════════════════════════════════════════════════════════════ */
.ct-input-row[b-9zveusm7co] {
    display:          flex;
    align-items:      flex-end;
    gap:              10px;
    padding:          10px 14px 14px;
    flex-shrink:      0;
    border-top:       1px solid var(--ct-border);
    background:       var(--ct-sidebar);
}

/* ── Main input box ────────────────────────────────────────────────────────── */
.ct-input-box[b-9zveusm7co] {
    flex:             1;
    background:       var(--ct-card);
    border:           1px solid var(--ct-border);
    border-radius:    16px;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
    transition:       border-color .15s;
}

.ct-input-box:focus-within[b-9zveusm7co] { border-color: rgba(99,102,241,.45); }

.ct-input[b-9zveusm7co] {
    width:            100%;
    background:       transparent;
    border:           none;
    outline:          none;
    padding:          11px 14px 6px;
    font-size:        14px;
    color:            var(--ct-text1);
    resize:           none;
}

.ct-input[b-9zveusm7co]::placeholder { color: var(--ct-text3); }

/* ── Inside-box toolbar (attach / emoji / mic) ─────────────────────────────── */
.ct-input-toolbar[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              2px;
    padding:          4px 8px 8px;
}

.ct-toolbar-btn[b-9zveusm7co] {
    width:            30px;
    height:           30px;
    border:           none;
    background:       transparent;
    color:            var(--ct-text2);
    cursor:           pointer;
    border-radius:    8px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       background .1s, color .1s;
}

.ct-toolbar-btn span[b-9zveusm7co] { font-size: 18px !important; }
.ct-toolbar-btn:hover[b-9zveusm7co] { background: var(--ct-hover); color: var(--ct-text1); }
.ct-toolbar-btn-active[b-9zveusm7co] { background: var(--ct-active) !important; color: var(--ct-accent) !important; }

/* ── Right-side action buttons ─────────────────────────────────────────────── */
.ct-input-actions[b-9zveusm7co] {
    display:          flex;
    flex-direction:   column;
    gap:              8px;
    flex-shrink:      0;
}

.ct-emoji-fab[b-9zveusm7co] {
    width:            44px;
    height:           44px;
    border-radius:    50%;
    border:           none;
    background:       var(--ct-raised);
    font-size:        20px;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       background .12s, transform .1s;
    line-height:      1;
}

.ct-emoji-fab:hover[b-9zveusm7co] { background: var(--ct-card); transform: scale(1.08); }
.ct-emoji-fab-active[b-9zveusm7co] { background: var(--ct-active) !important; }

.ct-send-fab[b-9zveusm7co] {
    width:            44px;
    height:           44px;
    border-radius:    50%;
    border:           none;
    background:       var(--ct-accent);
    color:            #fff;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       opacity .12s, transform .1s;
}

.ct-send-fab span[b-9zveusm7co] { font-size: 18px !important; transform: rotate(-45deg); display: inline-block; }
.ct-send-fab:hover:not(:disabled)[b-9zveusm7co] { opacity: .88; transform: scale(1.06); }
.ct-send-fab:disabled[b-9zveusm7co] { opacity: .3; cursor: not-allowed; }

/* ── Emoji panel & emoji buttons (shared, rendered as fixed portal) ─────────── */
.ct-emoji-panel[b-9zveusm7co] {
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    14px;
    padding:          10px;
    display:          grid;
    grid-template-columns: repeat(8, 1fr);
    gap:              4px;
    width:            260px;
    box-shadow:       0 8px 32px rgba(0,0,0,.55);
}

.ct-emoji-btn[b-9zveusm7co] {
    width:            28px;
    height:           28px;
    border:           none;
    background:       transparent;
    font-size:        16px;
    cursor:           pointer;
    border-radius:    7px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s, transform .1s;
}

.ct-emoji-btn:hover[b-9zveusm7co] { background: var(--ct-hover); transform: scale(1.22); }

/* ── Quick-send emoji panel (FAB button) ────────────────────────────────────── */
.ct-quick-emoji-panel[b-9zveusm7co] {
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    16px;
    padding:          10px 12px;
    display:          grid;
    grid-template-columns: repeat(5, 1fr);
    gap:              6px;
    box-shadow:       0 12px 40px rgba(0,0,0,.6);
}

.ct-quick-emoji-btn[b-9zveusm7co] {
    width:            38px;
    height:           38px;
    border:           none;
    background:       transparent;
    font-size:        22px;
    cursor:           pointer;
    border-radius:    10px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s, transform .12s;
    line-height:      1;
}

.ct-quick-emoji-btn:hover[b-9zveusm7co] {
    background:       var(--ct-hover);
    transform:        scale(1.28);
}

/* ════════════════════════════════════════════════════════════════════════════
   NEW CHAT MODAL
════════════════════════════════════════════════════════════════════════════ */
.ct-modal-overlay[b-9zveusm7co] {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,.65);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          200;
    backdrop-filter:  blur(4px);
}

.ct-modal[b-9zveusm7co] {
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    18px;
    width:            420px;
    max-width:        calc(100vw - 32px);
    max-height:       80vh;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
    box-shadow:       0 24px 80px rgba(0,0,0,.7);
}

.ct-modal-header[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          16px 18px;
    border-bottom:    1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-modal-title[b-9zveusm7co] {
    font-size:        15px;
    font-weight:      700;
    color:            var(--ct-text1);
}

.ct-modal-close[b-9zveusm7co] {
    width:            28px;
    height:           28px;
    border-radius:    8px;
    border:           none;
    background:       transparent;
    color:            var(--ct-text2);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s, color .1s;
}

.ct-modal-close:hover[b-9zveusm7co] { background: var(--ct-hover); color: var(--ct-text1); }

.ct-modal-tabs[b-9zveusm7co] {
    display:          flex;
    gap:              4px;
    padding:          10px 14px 6px;
    border-bottom:    1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-modal-search-wrap[b-9zveusm7co] {
    position:         relative;
    padding:          10px 12px 4px;
    flex-shrink:      0;
}

.ct-modal-search-icon[b-9zveusm7co] {
    position:         absolute;
    left:             22px;
    top:              50%;
    transform:        translateY(-50%);
    font-size:        16px !important;
    color:            var(--ct-text3);
    pointer-events:   none;
}

.ct-modal-search-input[b-9zveusm7co] {
    width:            100%;
    background:       var(--ct-card);
    border:           1px solid var(--ct-border);
    border-radius:    10px;
    padding:          8px 10px 8px 34px;
    font-size:        13px;
    color:            var(--ct-text1);
    outline:          none;
    transition:       border-color .15s;
}

.ct-modal-search-input[b-9zveusm7co]::placeholder { color: var(--ct-text3); }
.ct-modal-search-input:focus[b-9zveusm7co] { border-color: var(--ct-accent); }

.ct-modal-tab[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              5px;
    padding:          6px 14px;
    border-radius:    8px;
    border:           none;
    background:       transparent;
    color:            var(--ct-text2);
    font-size:        13px;
    font-weight:      500;
    cursor:           pointer;
    transition:       background .12s, color .12s;
}

.ct-modal-tab:hover[b-9zveusm7co] { color: var(--ct-text1); background: var(--ct-hover); }

.ct-modal-tab-active[b-9zveusm7co] {
    background:       var(--ct-active) !important;
    color:            var(--ct-accent) !important;
    font-weight:      600;
}

.ct-modal-body[b-9zveusm7co] {
    flex:             1;
    overflow-y:       auto;
    padding:          8px 10px;
}

.ct-modal-footer[b-9zveusm7co] {
    padding:          10px 14px 14px;
    border-top:       1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-user-select-row[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          9px 8px;
    border-radius:    10px;
    border:           none;
    background:       transparent;
    width:            100%;
    cursor:           pointer;
    text-align:       left;
    transition:       background .1s;
}

.ct-user-select-row:hover[b-9zveusm7co] { background: var(--ct-hover); }
.ct-user-select-active[b-9zveusm7co] { background: var(--ct-active) !important; }

.ct-form-label[b-9zveusm7co] {
    display:          block;
    font-size:        11px;
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   .07em;
    color:            var(--ct-text3);
    margin-bottom:    6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   GROUP INFO PANEL
════════════════════════════════════════════════════════════════════════════ */
.ct-gi-overlay[b-9zveusm7co] {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,.55);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          200;
    backdrop-filter:  blur(3px);
}

.ct-gi-panel[b-9zveusm7co] {
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    18px;
    width:            360px;
    max-width:        calc(100vw - 32px);
    max-height:       80vh;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
    box-shadow:       0 24px 80px rgba(0,0,0,.7);
}

.ct-gi-panel-header[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          14px 16px;
    border-bottom:    1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-gi-panel-title[b-9zveusm7co] {
    font-size:        15px;
    font-weight:      700;
    color:            var(--ct-text1);
}

.ct-gi-hero[b-9zveusm7co] {
    padding:          20px 16px 16px;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              8px;
    border-bottom:    1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-gi-avatar[b-9zveusm7co] {
    width:            64px;
    height:           64px;
    border-radius:    50%;
    background:       linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.ct-gi-name-row[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              6px;
}

.ct-gi-name[b-9zveusm7co] {
    font-size:        16px;
    font-weight:      700;
    color:            var(--ct-text1);
}

.ct-gi-edit-name-btn[b-9zveusm7co] {
    width:            24px;
    height:           24px;
    border-radius:    6px;
    border:           none;
    background:       transparent;
    color:            var(--ct-text2);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s, color .1s;
}

.ct-gi-edit-name-btn:hover[b-9zveusm7co] { background: var(--ct-hover); color: var(--ct-text1); }

.ct-gi-name-edit-row[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              6px;
}

.ct-gi-name-input[b-9zveusm7co] {
    background:       var(--ct-card);
    border:           1px solid var(--ct-accent);
    border-radius:    8px;
    padding:          5px 10px;
    font-size:        14px;
    color:            var(--ct-text1);
    outline:          none;
    width:            200px;
}

.ct-gi-name-save-btn[b-9zveusm7co],
.ct-gi-name-cancel-btn[b-9zveusm7co] {
    width:            28px;
    height:           28px;
    border-radius:    7px;
    border:           none;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .1s;
}

.ct-gi-name-save-btn[b-9zveusm7co]   { background: rgba(99,102,241,.2); color: var(--ct-accent); }
.ct-gi-name-cancel-btn[b-9zveusm7co] { background: var(--ct-hover); color: var(--ct-text2); }
.ct-gi-name-save-btn:hover[b-9zveusm7co]   { background: rgba(99,102,241,.35); }
.ct-gi-name-cancel-btn:hover[b-9zveusm7co] { background: var(--ct-border-md); color: var(--ct-text1); }

.ct-gi-count[b-9zveusm7co] {
    font-size:        12px;
    color:            var(--ct-text2);
}

.ct-gi-body[b-9zveusm7co] {
    flex:             1;
    overflow-y:       auto;
    padding:          12px;
}

.ct-gi-section-label[b-9zveusm7co] {
    font-size:        10px;
    font-weight:      700;
    letter-spacing:   .08em;
    text-transform:   uppercase;
    color:            var(--ct-text3);
    padding:          0 4px 8px;
}

.ct-gi-member-row[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              8px;
    padding:          7px 6px;
    border-radius:    10px;
    transition:       background .1s;
}

.ct-gi-member-row:hover[b-9zveusm7co] { background: var(--ct-hover); }

.ct-gi-member-name[b-9zveusm7co] {
    flex:             1;
    font-size:        13.5px;
    font-weight:      500;
    color:            var(--ct-text1);
}

.ct-gi-badges[b-9zveusm7co] { display: flex; gap: 4px; align-items: center; }

.ct-gi-badge[b-9zveusm7co] {
    font-size:        10.5px;
    font-weight:      600;
    padding:          2px 7px;
    border-radius:    20px;
}

.ct-gi-badge-org[b-9zveusm7co] {
    background:       rgba(234,179,8,.12);
    color:            #fbbf24;
    border:           1px solid rgba(234,179,8,.25);
}

.ct-gi-badge-you[b-9zveusm7co] {
    background:       var(--ct-active);
    color:            var(--ct-accent);
    border:           1px solid var(--ct-accent-glow);
}

.ct-gi-remove-member-btn[b-9zveusm7co] {
    width:            26px;
    height:           26px;
    border-radius:    7px;
    border:           none;
    background:       transparent;
    color:            var(--ct-danger);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    opacity:          0;
    transition:       opacity .1s, background .1s;
    flex-shrink:      0;
}

.ct-gi-member-row:hover .ct-gi-remove-member-btn[b-9zveusm7co] { opacity: 1; }
.ct-gi-remove-member-btn:hover[b-9zveusm7co] { background: rgba(239,68,68,.12); }

.ct-gi-footer[b-9zveusm7co] {
    padding:          10px 12px 14px;
    border-top:       1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-gi-delete-btn[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              6px;
    width:            100%;
    justify-content:  center;
    padding:          8px;
    border-radius:    10px;
    border:           1px solid rgba(239,68,68,.25);
    background:       rgba(239,68,68,.08);
    color:            #f87171;
    font-size:        13px;
    font-weight:      600;
    cursor:           pointer;
    transition:       background .1s, border-color .1s;
}

.ct-gi-delete-btn:hover[b-9zveusm7co] { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); }

.ct-gi-confirm[b-9zveusm7co] {
    display:          flex;
    flex-direction:   column;
    gap:              10px;
}

.ct-gi-confirm-text[b-9zveusm7co] {
    font-size:        13px;
    color:            #f87171;
    text-align:       center;
}

.ct-gi-confirm-btns[b-9zveusm7co] {
    display:          flex;
    gap:              8px;
    justify-content:  center;
}

.ct-gi-confirm-cancel[b-9zveusm7co],
.ct-gi-confirm-delete[b-9zveusm7co] {
    padding:          7px 20px;
    border-radius:    9px;
    font-size:        13px;
    font-weight:      600;
    cursor:           pointer;
    border:           none;
    transition:       opacity .1s, background .1s;
}

.ct-gi-confirm-cancel[b-9zveusm7co]  { background: var(--ct-hover); color: var(--ct-text1); }
.ct-gi-confirm-delete[b-9zveusm7co]  { background: var(--ct-danger); color: #fff; }
.ct-gi-confirm-cancel:hover[b-9zveusm7co] { background: var(--ct-border-md); }
.ct-gi-confirm-delete:hover[b-9zveusm7co] { opacity: .88; }

/* ════════════════════════════════════════════════════════════════════════════
   CALL OVERLAY
════════════════════════════════════════════════════════════════════════════ */
.ct-call-overlay[b-9zveusm7co] {
    position:         fixed;
    inset:            0;
    background:       #040712;
    z-index:          300;
    display:          flex;
    flex-direction:   column;
}

.ct-call-header[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          16px 20px;
    border-bottom:    1px solid var(--ct-border);
    flex-shrink:      0;
}

.ct-call-header-icon[b-9zveusm7co] { font-size: 22px !important; color: var(--ct-accent); }

.ct-call-header-title[b-9zveusm7co] {
    font-size:        16px;
    font-weight:      700;
    color:            var(--ct-text1);
}

.ct-call-header-sub[b-9zveusm7co] {
    font-size:        13px;
    color:            var(--ct-text2);
    margin-left:      auto;
}

.ct-video-grid[b-9zveusm7co] {
    flex:             1;
    display:          flex;
    gap:              12px;
    padding:          16px;
    overflow:         hidden;
}

.ct-video-tile-local[b-9zveusm7co] {
    width:            280px;
    flex-shrink:      0;
    background:       var(--ct-card);
    border-radius:    14px;
    overflow:         hidden;
    position:         relative;
    border:           1px solid var(--ct-border-md);
}

.ct-local-video[b-9zveusm7co] {
    width:            100%;
    height:           100%;
    object-fit:       cover;
}

.ct-video-label[b-9zveusm7co] {
    position:         absolute;
    bottom:           8px;
    left:             10px;
    font-size:        12px;
    font-weight:      600;
    color:            rgba(255,255,255,.85);
    background:       rgba(0,0,0,.4);
    padding:          2px 8px;
    border-radius:    20px;
}

.ct-cam-off-overlay[b-9zveusm7co] {
    position:         absolute;
    inset:            0;
    background:       var(--ct-card);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--ct-text3);
}

.ct-remote-container[b-9zveusm7co] {
    flex:             1;
    display:          flex;
    flex-wrap:        wrap;
    gap:              12px;
    overflow:         hidden;
}

.ct-call-controls[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              14px;
    padding:          14px 0 20px;
    flex-shrink:      0;
}

.ct-ctrl-btn[b-9zveusm7co] {
    width:            52px;
    height:           52px;
    border-radius:    50%;
    border:           none;
    background:       var(--ct-raised);
    color:            var(--ct-text1);
    font-size:        22px !important;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .12s;
    border:           1px solid var(--ct-border-md);
}

.ct-ctrl-btn:hover[b-9zveusm7co] { background: var(--ct-card); }
.ct-ctrl-active[b-9zveusm7co] { background: rgba(99,102,241,.25) !important; color: var(--ct-accent) !important; }
.ct-ctrl-end[b-9zveusm7co] { background: var(--ct-danger) !important; color: #fff !important; border-color: transparent !important; }
.ct-ctrl-end:hover[b-9zveusm7co] { opacity: .88; }

/* ════════════════════════════════════════════════════════════════════════════
   INCOMING CALL MODAL
════════════════════════════════════════════════════════════════════════════ */
.ct-incoming-overlay[b-9zveusm7co] {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,.75);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          400;
    backdrop-filter:  blur(6px);
}

.ct-incoming-modal[b-9zveusm7co] {
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    24px;
    width:            280px;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    padding:          28px 24px;
    gap:              10px;
    box-shadow:       0 32px 80px rgba(0,0,0,.8);
    text-align:       center;
}

.ct-incoming-ring-wrap[b-9zveusm7co] {
    position:         relative;
    width:            80px;
    height:           80px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.ct-incoming-ripple[b-9zveusm7co] {
    position:         absolute;
    inset:            0;
    border-radius:    50%;
    border:           2px solid var(--ct-accent);
    animation:        ct-ripple-b-9zveusm7co 2s ease-out infinite;
    opacity:          0;
}

.ct-ripple-delay[b-9zveusm7co] { animation-delay: 1s; }

@keyframes ct-ripple-b-9zveusm7co {
    0%   { transform: scale(0.8); opacity: .6; }
    100% { transform: scale(1.7); opacity: 0; }
}

.ct-incoming-avatar[b-9zveusm7co] {
    width:            80px;
    height:           80px;
    border-radius:    50%;
    background:       linear-gradient(135deg, #6366f1, #8b5cf6);
    color:            #fff;
    font-size:        30px;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    text-transform:   uppercase;
    position:         relative;
    z-index:          1;
}

.ct-incoming-caller[b-9zveusm7co] {
    font-size:        17px;
    font-weight:      700;
    color:            var(--ct-text1);
    margin:           0;
}

.ct-incoming-sub[b-9zveusm7co] {
    font-size:        13px;
    color:            var(--ct-text2);
    margin:           0;
}

.ct-incoming-timer[b-9zveusm7co] {
    position:         relative;
    width:            44px;
    height:           44px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.ct-timer-svg[b-9zveusm7co] {
    position:         absolute;
    inset:            0;
    transform:        rotate(-90deg);
    width:            100%;
    height:           100%;
}

.ct-timer-num[b-9zveusm7co] {
    font-size:        14px;
    font-weight:      700;
    color:            var(--ct-text1);
    position:         relative;
    z-index:          1;
}

.ct-incoming-actions[b-9zveusm7co] {
    display:          flex;
    gap:              32px;
    margin-top:       4px;
}

.ct-incoming-action-wrap[b-9zveusm7co] {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              6px;
}

.ct-incoming-btn[b-9zveusm7co] {
    width:            56px;
    height:           56px;
    border-radius:    50%;
    border:           none;
    font-size:        22px !important;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       transform .12s, opacity .12s;
}

.ct-incoming-btn:hover[b-9zveusm7co] { transform: scale(1.08); }
.ct-btn-decline[b-9zveusm7co] { background: var(--ct-danger); color: #fff; }
.ct-btn-accept[b-9zveusm7co]  { background: var(--ct-online); color: #fff; }

.ct-incoming-action-label[b-9zveusm7co] {
    font-size:        11.5px;
    color:            var(--ct-text2);
    font-weight:      500;
}

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATED DOTS (no-conv state)
════════════════════════════════════════════════════════════════════════════ */
.ct-dot-1[b-9zveusm7co] { animation: ct-dot-pulse-b-9zveusm7co 2s ease-in-out infinite; }
.ct-dot-2[b-9zveusm7co] { animation: ct-dot-pulse-b-9zveusm7co 2s ease-in-out .4s infinite; }
.ct-dot-3[b-9zveusm7co] { animation: ct-dot-pulse-b-9zveusm7co 2s ease-in-out .8s infinite; }

@keyframes ct-dot-pulse-b-9zveusm7co {
    0%, 100% { opacity: .3; }
    50%       { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MEDIA MESSAGES  (image / voice / file)
════════════════════════════════════════════════════════════════════════════ */

/* Strip padding/background from the bubble so media renders edge-to-edge */
.ct-bubble-media[b-9zveusm7co] {
    padding:          0 !important;
    background:       transparent !important;
    border:           none !important;
    box-shadow:       none !important;
}

/* ── Image ────────────────────────────────────────────────────────────────── */
.ct-msg-image[b-9zveusm7co] {
    display:          block;
    max-width:        240px;
    max-height:       260px;
    width:            auto;
    height:           auto;
    border-radius:    14px;
    object-fit:       cover;
    cursor:           pointer;
    transition:       opacity .15s;
}

.ct-msg-image:hover[b-9zveusm7co] { opacity: .9; }

/* ── Voice ────────────────────────────────────────────────────────────────── */
.ct-voice-msg[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              8px;
    padding:          8px 12px;
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    14px;
    min-width:        220px;
    max-width:        300px;
}

.ct-voice-icon[b-9zveusm7co] {
    font-size:        18px !important;
    color:            var(--ct-accent);
    flex-shrink:      0;
}

.ct-voice-audio[b-9zveusm7co] {
    flex:             1;
    height:           32px;
    min-width:        0;
    accent-color:     var(--ct-accent);
}

.ct-voice-duration[b-9zveusm7co] {
    font-size:        11px;
    color:            var(--ct-text2);
    flex-shrink:      0;
    white-space:      nowrap;
}

/* ── File ─────────────────────────────────────────────────────────────────── */
.ct-file-msg[b-9zveusm7co] {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          10px 14px;
    background:       var(--ct-raised);
    border:           1px solid var(--ct-border-md);
    border-radius:    14px;
    min-width:        200px;
    max-width:        280px;
}

.ct-file-icon[b-9zveusm7co] {
    font-size:        28px !important;
    color:            var(--ct-accent);
    flex-shrink:      0;
}

.ct-file-info[b-9zveusm7co] {
    display:          flex;
    flex-direction:   column;
    gap:              3px;
    min-width:        0;
}

.ct-file-name[b-9zveusm7co] {
    font-size:        13px;
    font-weight:      600;
    color:            var(--ct-text1);
    overflow:         hidden;
    text-overflow:    ellipsis;
    white-space:      nowrap;
    max-width:        180px;
}

.ct-file-dl[b-9zveusm7co] {
    font-size:        11.5px;
    color:            var(--ct-accent);
    text-decoration:  none;
}

.ct-file-dl:hover[b-9zveusm7co] { text-decoration: underline; }

/* ── Recording pulse on mic toolbar button ────────────────────────────────── */
.ct-toolbar-btn-recording[b-9zveusm7co] {
    background:       rgba(239,68,68,.15) !important;
    color:            #f87171 !important;
    animation:        ct-record-pulse-b-9zveusm7co 1.2s ease-in-out infinite;
}

@keyframes ct-record-pulse-b-9zveusm7co {
    0%,  100% { box-shadow: 0 0 0 0   rgba(239,68,68,.45); }
    50%        { box-shadow: 0 0 0 6px rgba(239,68,68,0);   }
}

/* Sidebar close button — hidden on desktop, shown on mobile */
.ct-sidebar-close-btn[b-9zveusm7co] { display: none; }

/* Sidebar backdrop — hidden by default, styled on mobile */
.ct-sidebar-backdrop[b-9zveusm7co] { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE  (< 640 px)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

    /* ── Root: override inline height/min-height with !important ── */
    .ct-root[b-9zveusm7co] {
        height:        calc(100dvh - 76px) !important;
        min-height:    0 !important;
        border-radius: 0 !important;
        border-left:   none !important;
        border-right:  none !important;
    }

    /* ── Page header (Communications h1) — hidden on mobile to reclaim space ── */
    .ct-page-header[b-9zveusm7co] { display: none !important; }

    /* ── Sidebar slides in as a full-screen overlay over the main panel ── */
    .ct-sidebar[b-9zveusm7co] {
        position:    absolute;
        inset:       0;
        z-index:     20;
        transform:   translateX(-100%);
        transition:  transform .22s ease;
        width:       100% !important;
    }
    .ct-sidebar-open .ct-sidebar[b-9zveusm7co] { transform: translateX(0); }

    /* ── Back / show-convs buttons ── */
    .ct-back-btn[b-9zveusm7co]       { display: flex !important; }
    .ct-show-convs-btn[b-9zveusm7co] { display: flex !important; }

    /* ── Sidebar close button ── */
    .ct-sidebar-close-btn[b-9zveusm7co] { display: flex !important; }

    /* ── Click-outside backdrop ── */
    .ct-sidebar-backdrop[b-9zveusm7co] {
        display:         block;
        position:        absolute;
        inset:           0;
        z-index:         19;
        background:      rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(2px);
    }

    /* ── Message bubbles wider on small screens ── */
    .ct-msg-row[b-9zveusm7co] { max-width: 88%; }

    /* ── Call button: icon-only on mobile ── */
    .ct-call-btn-text[b-9zveusm7co] { display: none; }
    .ct-call-btn[b-9zveusm7co]      { padding: 7px 9px; }

    /* ── Make delete + reaction buttons always visible on touch ── */
    .ct-delete-btn[b-9zveusm7co],
    .ct-reaction-trigger[b-9zveusm7co] { opacity: 1; }

    /* ── Input row: tighten spacing ── */
    .ct-input-row[b-9zveusm7co] { padding: 8px 10px 10px; gap: 8px; }

    /* ── Emoji/send FABs smaller ── */
    .ct-emoji-fab[b-9zveusm7co],
    .ct-send-fab[b-9zveusm7co] { width: 40px; height: 40px; }
}
/* /Components/Pages/Employees/IdCards.razor.rz.scp.css */
.id-emp-active[b-07g7a5na7g] {
    background: rgba(var(--b500-raw, 16,185,129), 0.12);
    border-left: 2px solid rgb(var(--b400));
}

/* ── ID Card shell ─────────────────────────────────────────────────── */
.id-card[b-07g7a5na7g] {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
    position: relative;
    background: var(--surface);
    border: 1px solid var(--sb);
}

.id-card-front[b-07g7a5na7g] {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    border-color: rgba(16,185,129,0.25);
}

.id-card-back[b-07g7a5na7g] {
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    border-color: rgba(16,185,129,0.2);
}

/* ── Header band ────────────────────────────────────────────────────── */
.id-card-header[b-07g7a5na7g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgb(var(--b700)), rgb(var(--b500)));
    flex-shrink: 0;
}

/* ── Photo ──────────────────────────────────────────────────────────── */
.id-photo[b-07g7a5na7g] {
    width: 72px;
    height: 86px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(16,185,129,0.4);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

/* ── Footer strip ───────────────────────────────────────────────────── */
.id-card-footer[b-07g7a5na7g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* ── Back labels ────────────────────────────────────────────────────── */
.id-label[b-07g7a5na7g] {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148,163,184,0.8);
    font-weight: 600;
}

.id-value[b-07g7a5na7g] {
    font-size: 10px;
    font-weight: 700;
    color: #e2e8f0;
    font-family: ui-monospace, monospace;
    margin-top: 1px;
}

/* ── Theme override: ID card text is always light, card bg is always dark ── */
/* pg-text / pg-text2 are theme-aware (dark in light mode, light in dark mode).  */
/* Inside .id-card they must always be white since the card background is always dark. */
.id-card .pg-text[b-07g7a5na7g]  { color: #ffffff; }
.id-card .pg-text2[b-07g7a5na7g] { color: rgba(255,255,255,0.60); }
.id-card .pg-text3[b-07g7a5na7g] { color: rgba(255,255,255,0.35); }

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
    *[b-07g7a5na7g] { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    body > *[b-07g7a5na7g] { display: none !important; }
    #id-print-area[b-07g7a5na7g] { display: flex !important; }

    #id-print-area[b-07g7a5na7g] {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: white;
        flex-direction: row;
        gap: 20px;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .id-card[b-07g7a5na7g] {
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ── Root ──────────────────────────────────────────────────────────────── */
.login-root[b-n9mnguc0k7] {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #080c1e;
}

/* ── Ambient glow ─────────────────────────────────────────────────────── */
.login-glow[b-n9mnguc0k7] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-glow-tr[b-n9mnguc0k7] {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(99,102,241,.16) 0%, transparent 65%);
    top: -200px; right: -100px;
}
.login-glow-bl[b-n9mnguc0k7] {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 65%);
    bottom: -150px; left: -100px;
}

/* ── Left panel ───────────────────────────────────────────────────────── */
.login-left[b-n9mnguc0k7] {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: linear-gradient(145deg, #0b1030 0%, #0f153d 55%, #131a4a 100%);
    overflow: hidden;
}
.login-left[b-n9mnguc0k7]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
}

/* ── Floating orbs ────────────────────────────────────────────────────── */
.login-orb[b-n9mnguc0k7] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-orb-1[b-n9mnguc0k7] {
    width: 380px; height: 380px;
    top: -60px; right: 60px;
    background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
    animation: login-float1-b-n9mnguc0k7 7s ease-in-out infinite;
}
.login-orb-2[b-n9mnguc0k7] {
    width: 440px; height: 440px;
    bottom: -60px; left: -60px;
    background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
    animation: login-float2-b-n9mnguc0k7 9s ease-in-out infinite;
}
.login-orb-3[b-n9mnguc0k7] {
    width: 260px; height: 260px;
    top: 50%; left: 50%;
    background: radial-gradient(circle, rgba(129,140,248,.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: login-float3-b-n9mnguc0k7 11s ease-in-out infinite;
}
@keyframes login-float1-b-n9mnguc0k7 {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(18px,-28px); }
}
@keyframes login-float2-b-n9mnguc0k7 {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(-14px,22px); }
}
@keyframes login-float3-b-n9mnguc0k7 {
    0%,100% { transform: translate(-50%,-50%); }
    33%      { transform: translate(calc(-50% + 10px), calc(-50% - 18px)); }
    66%      { transform: translate(calc(-50% - 8px), calc(-50% + 10px)); }
}

/* ── Brand content ────────────────────────────────────────────────────── */
.login-brand[b-n9mnguc0k7] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 340px;
}

/* Pulse rings */
.login-rings[b-n9mnguc0k7] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}
.login-ring[b-n9mnguc0k7] {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(99,102,241,.35);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: login-ring-pulse-b-n9mnguc0k7 2s ease-out infinite;
    opacity: 0;
}
.login-ring-1[b-n9mnguc0k7] { width: 128px; height: 128px; animation-delay: 0s; }
.login-ring-2[b-n9mnguc0k7] { width: 128px; height: 128px; animation-delay: 0.9s; border-color: rgba(99,102,241,.18); }
@keyframes login-ring-pulse-b-n9mnguc0k7 {
    0%   { transform: translate(-50%, -50%) scale(.95); opacity: .5; }
    100% { transform: translate(-50%, -50%) scale(1.5);  opacity: 0; }
}

/* Spinning dashed ring */
.login-spin-ring[b-n9mnguc0k7] {
    position: absolute;
    width: 176px; height: 176px;
    border-radius: 50%;
    border: 1px dashed rgba(129,140,248,.1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: login-spin-slow-b-n9mnguc0k7 20s linear infinite;
}
@keyframes login-spin-slow-b-n9mnguc0k7 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Logo icon */
.login-logo[b-n9mnguc0k7] {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border-radius: 22px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(99,102,241,.12), 0 8px 32px rgba(99,102,241,.4);
}

.login-brand-name[b-n9mnguc0k7] {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    margin-bottom: 10px;
}
.login-brand-desc[b-n9mnguc0k7] {
    font-size: 13px;
    color: rgba(165,180,252,.6);
    line-height: 1.6;
    margin-bottom: 36px;
}

/* Feature list */
.login-features[b-n9mnguc0k7] { display: flex; flex-direction: column; gap: 10px; }
.login-feat[b-n9mnguc0k7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.14);
    font-size: 13px;
    color: rgba(165,180,252,.75);
    font-weight: 500;
    text-align: left;
    transition: background .15s, border-color .15s;
}
.login-feat:hover[b-n9mnguc0k7] { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.24); }
.login-feat-icon[b-n9mnguc0k7] {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(99,102,241,.2);
    color: #a5b4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Right panel ──────────────────────────────────────────────────────── */
.login-right[b-n9mnguc0k7] {
    position: relative;
    z-index: 1;
    width: 440px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    background: #080c1e;
    border-left: 1px solid rgba(99,102,241,.09);
}
.login-form-wrap[b-n9mnguc0k7] { width: 100%; }

.login-title[b-n9mnguc0k7] {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.login-subtitle[b-n9mnguc0k7] {
    font-size: 13px;
    color: rgba(148,163,184,.6);
    margin-bottom: 28px;
}

/* Fields */
.login-field[b-n9mnguc0k7] { margin-bottom: 18px; }
.login-label[b-n9mnguc0k7] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(165,180,252,.7);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 8px;
}
.login-input-wrap[b-n9mnguc0k7] { position: relative; }
.login-input-icon[b-n9mnguc0k7] {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    font-size: 17px !important;
    color: #818cf8;
    pointer-events: none;
}
.login-input[b-n9mnguc0k7] {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.16);
    border-radius: 12px;
    font-size: 13.5px;
    color: #e2e8f0;
    outline: none;
    transition: border-color .2s, background .2s;
    box-sizing: border-box;
}
.login-input[b-n9mnguc0k7]::placeholder { color: rgba(165,180,252,.3); }
.login-input:focus[b-n9mnguc0k7] { background: rgba(99,102,241,.1); border-color: #818cf8; }
.login-input:disabled[b-n9mnguc0k7] { opacity: .5; cursor: not-allowed; }
.login-input-pwd[b-n9mnguc0k7] { padding-right: 42px; }
.login-pwd-toggle[b-n9mnguc0k7] {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; padding: 2px;
    cursor: pointer; color: #818cf8;
    display: flex; align-items: center;
    transition: color .15s;
}
.login-pwd-toggle:hover[b-n9mnguc0k7] { color: #a5b4fc; }

/* Error */
.login-error[b-n9mnguc0k7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 12px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.22);
    color: #fca5a5;
    font-size: 12.5px;
    margin-bottom: 18px;
}

/* Submit */
.login-btn[b-n9mnguc0k7] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 4px 24px rgba(99,102,241,.45);
    margin-top: 8px;
}
.login-btn:hover:not(:disabled)[b-n9mnguc0k7] {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 30px rgba(99,102,241,.55);
}
.login-btn:active:not(:disabled)[b-n9mnguc0k7] { opacity: .75; transform: translateY(0); }
.login-btn:disabled[b-n9mnguc0k7] { opacity: .4; cursor: not-allowed; }

.login-spin[b-n9mnguc0k7] {
    width: 16px; height: 16px;
    animation: login-spin-b-n9mnguc0k7 .7s linear infinite;
}
@keyframes login-spin-b-n9mnguc0k7 { to { transform: rotate(360deg); } }

/* Copyright */
.login-copy[b-n9mnguc0k7] {
    text-align: center;
    font-size: 11px;
    color: rgba(165,180,252,.4);
    margin-top: 28px;
}

/* ── FadeUp animations ────────────────────────────────────────────────── */
.au[b-n9mnguc0k7]  { animation: login-fadeup-b-n9mnguc0k7 .55s cubic-bezier(.22,1,.36,1) both; }
.au1[b-n9mnguc0k7] { animation: login-fadeup-b-n9mnguc0k7 .55s .08s cubic-bezier(.22,1,.36,1) both; }
.au2[b-n9mnguc0k7] { animation: login-fadeup-b-n9mnguc0k7 .55s .16s cubic-bezier(.22,1,.36,1) both; }
.au3[b-n9mnguc0k7] { animation: login-fadeup-b-n9mnguc0k7 .55s .24s cubic-bezier(.22,1,.36,1) both; }
.au4[b-n9mnguc0k7] { animation: login-fadeup-b-n9mnguc0k7 .55s .40s cubic-bezier(.22,1,.36,1) both; }
@keyframes login-fadeup-b-n9mnguc0k7 {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .login-left[b-n9mnguc0k7] { display: none; }
    .login-right[b-n9mnguc0k7] {
        width: 100%;
        border-left: none;
        padding: 40px 28px;
    }
}
/* /Components/Pages/TimeClock.razor.rz.scp.css */
/* Action buttons */
.tt-action-btn[b-1gmedqdo71] {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         10px 8px;
    border-radius:   14px;
    transition:      opacity 0.15s, transform 0.1s;
    cursor:          pointer;
}

.tt-action-btn:active:not(:disabled)[b-1gmedqdo71] {
    transform: scale(0.96);
}

.tt-btn-emerald[b-1gmedqdo71] {
    background: rgba(16,185,129,0.12);
    border:     1px solid rgba(16,185,129,0.25);
    color:      #10b981;
}

.tt-btn-emerald:hover[b-1gmedqdo71] {
    background: rgba(16,185,129,0.20);
    border-color: rgba(16,185,129,0.40);
}

.tt-btn-amber[b-1gmedqdo71] {
    background: rgba(245,158,11,0.10);
    border:     1px solid rgba(245,158,11,0.22);
    color:      #f59e0b;
}

.tt-btn-amber:hover[b-1gmedqdo71] {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.38);
}

.tt-btn-sky[b-1gmedqdo71] {
    background: rgba(14,165,233,0.10);
    border:     1px solid rgba(14,165,233,0.22);
    color:      #0ea5e9;
}

.tt-btn-sky:hover[b-1gmedqdo71] {
    background: rgba(14,165,233,0.18);
    border-color: rgba(14,165,233,0.38);
}

.tt-btn-rose[b-1gmedqdo71] {
    background: rgba(239,68,68,0.10);
    border:     1px solid rgba(239,68,68,0.22);
    color:      #ef4444;
}

.tt-btn-rose:hover[b-1gmedqdo71] {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.38);
}

.tt-btn-disabled[b-1gmedqdo71] {
    background: rgba(128,128,128,0.06);
    border:     1px solid rgba(128,128,128,0.12);
    color:      rgba(128,128,128,0.4);
    cursor:     not-allowed;
    opacity:    0.6;
}