/* ChatWave — admin panel.
   Bootstrap 5 supplies the components; this file supplies the design system.
   Hand-built on purpose: no admin template (spec §5, decision 23). */

:root {
    /* Brand */
    --cw-primary: #2f6bff;
    --cw-primary-dark: #1d4fd8;
    --cw-primary-soft: #eef3ff;

    /* Sidebar */
    --cw-sidebar: #0d1526;
    --cw-sidebar-hover: #18233a;
    --cw-sidebar-text: #98a5bd;

    /* Surfaces */
    --cw-bg: #f6f7fa;
    --cw-surface: #ffffff;
    --cw-line: #e8eaf0;
    --cw-line-soft: #f1f3f7;

    /* Text */
    --cw-ink: #10182b;
    --cw-ink-soft: #4a5568;
    --cw-muted: #79839a;

    /* Status */
    --cw-green: #0f9d58;
    --cw-green-bg: #e6f6ed;
    --cw-amber: #b25e02;
    --cw-amber-bg: #fdf1e0;
    --cw-red: #d0342c;
    --cw-red-bg: #fdeceb;
    --cw-slate-bg: #eef0f4;

    /* Shape */
    --cw-radius: 14px;
    --cw-radius-sm: 10px;
    --cw-shadow: 0 1px 2px rgba(16, 24, 43, .04), 0 4px 16px rgba(16, 24, 43, .04);
    --cw-shadow-lg: 0 12px 40px rgba(16, 24, 43, .16);

    --cw-sidebar-w: 250px;
    --cw-sidebar-w-mini: 66px;
    --cw-topbar-h: 66px;

    /* The rail's opening feel, in one place. A pure ease-out covers most of the
       distance in the first third, which is what made this read as a snap; this
       curve starts gently and still settles softly. */
    --cw-rail-ease: .38s cubic-bezier(.4, .08, .25, 1);
}

/* Collapsed sidebar: icons only. Driven by one variable so every rule that
   already reads --cw-sidebar-w follows along. Desktop only — below 992px the
   sidebar is a drawer, and a 66px drawer is just a broken menu. */
@media (min-width: 992px) {
    html.cw-mini { --cw-sidebar-w: var(--cw-sidebar-w-mini); }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--cw-bg);
    color: var(--cw-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -.011em; }

/* ============================================================ shell layout */

.cw-shell { min-height: 100vh; }

.cw-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--cw-sidebar-w);
    background: var(--cw-sidebar);
    color: var(--cw-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.cw-main {
    margin-left: var(--cw-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--cw-rail-ease);
}

.cw-content { padding: 28px 30px 40px; flex: 1; }

/* Screens that are themselves the workspace (the inbox) get the room back. */
.cw-content.cw-content-tight { padding: 14px 16px 16px; }

@media (min-width: 992px) {
    /* Closing follows the pointer immediately; opening waits a beat so merely
       crossing the rail on the way somewhere else does not fling it open. */
    .cw-sidebar {
        transition: width var(--cw-rail-ease), box-shadow var(--cw-rail-ease);
        transition-delay: 0s;
    }

    html.cw-mini .cw-sidebar:hover,
    html.cw-mini .cw-sidebar:focus-within { transition-delay: .12s; }
}

@media (max-width: 991.98px) {
    .cw-sidebar {
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--cw-shadow-lg);
    }
    .cw-sidebar.is-open { transform: none; }
    .cw-main { margin-left: 0; }
    .cw-content { padding: 18px 16px 32px; }
    .cw-backdrop {
        position: fixed; inset: 0;
        background: rgba(13, 21, 38, .55);
        backdrop-filter: blur(2px);
        z-index: 1035;
    }
}

/* ================================================================ sidebar */

.cw-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 16px 18px;
    color: #fff;
    font-weight: 650;
    font-size: 1.02rem;
    text-decoration: none;
    letter-spacing: -.01em;
}

.cw-brand img { height: 26px; width: auto; }

.cw-brand-mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--cw-primary), #6b46ff);
    display: grid; place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cw-badge-role {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(47, 107, 255, .16);
    color: #8fb0ff;
    font-weight: 700;
    margin-left: auto;
}

.cw-nav { padding: 6px 12px 18px; overflow-y: auto; flex: 1; }

.cw-nav-label {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #56617a;
    font-weight: 700;
    padding: 18px 12px 7px;
}

.cw-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--cw-radius-sm);
    color: var(--cw-sidebar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: .93rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.cw-nav a:hover { background: var(--cw-sidebar-hover); color: #fff; }

.cw-nav a.active {
    background: var(--cw-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(47, 107, 255, .32);
}

.cw-nav svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }

/* ------------------------------------------- collapsed (icons-only) sidebar */

/* Scrollbars are never drawn in the sidebar — a rail 66px wide loses a third
   of itself to one. It still scrolls, it just does so silently. */
.cw-nav {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

.cw-nav::-webkit-scrollbar { width: 0; height: 0; }

@media (min-width: 992px) {
    /* Collapsed is a *resting* state: the rail widens back to the full sidebar
       while the pointer is on it, so the labels are one hover away rather than
       one click. The main column keeps the narrow margin, so the expansion
       floats over the page instead of shoving it sideways. */
    html.cw-mini .cw-sidebar {
        width: var(--cw-sidebar-w-mini);
        overflow: hidden;
    }

    html.cw-mini .cw-sidebar:hover,
    html.cw-mini .cw-sidebar:focus-within {
        width: 250px;
        box-shadow: 8px 0 32px rgba(5, 10, 22, .38);
    }

    /* Everything below only applies while the rail is at rest — hovering it
       restores the full sidebar by simply not matching any of these.
       Nothing here moves an icon sideways: the rail's own padding already
       centres them at 66px, so widening only *uncovers* the labels rather than
       shunting the icons across the panel. That is what makes it read as
       smooth instead of as a jump followed by a slide. */

    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-brand span:not(.cw-brand-mark),
    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-nav a,
    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-rail-toggle,
    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-sidebar-foot .btn {
        /* The labels are bare text nodes, so they are collapsed rather than
           removed and still read correctly to a screen reader. */
        font-size: 0;
    }

    /* Faded rather than hidden: both keep their space, so nothing below them
       shifts when the rail opens. */
    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-badge-role,
    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-sidebar-foot .text-white-50 {
        opacity: 0;
    }

    .cw-badge-role,
    .cw-sidebar-foot .text-white-50 { transition: opacity var(--cw-rail-ease); }

    /* The group heading collapses into the hairline that separates the groups:
       the grouping stays readable and it costs 1px of height instead of 40. */
    .cw-nav-label {
        height: 40px;
        overflow: hidden;
        background: transparent;
        border-radius: 1px;
        transition: height var(--cw-rail-ease), margin var(--cw-rail-ease), background var(--cw-rail-ease);
    }

    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-nav-label {
        height: 1px;
        padding: 0;
        margin: 13px 12px;
        background: rgba(255, 255, 255, .09);
        font-size: 0;
    }

    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-nav-label:first-child {
        height: 0;
        margin: 0;
    }

    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-sidebar-foot .btn::before {
        content: "⏻";
        font-size: 1rem;
    }
}

/* The collapse control only makes sense where the sidebar is docked, so on
   phones and tablets — where it is a drawer — it is not rendered at all. */
.cw-rail-toggle { display: none; }

@media (min-width: 992px) {
    .cw-rail-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 12px 10px;
        padding: 11px 12px;
        border: 0;
        border-radius: var(--cw-radius-sm);
        background: rgba(255, 255, 255, .05);
        color: var(--cw-sidebar-text);
        font-size: .84rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        transition: background .12s, color .12s;
    }

    .cw-rail-toggle:hover { background: var(--cw-sidebar-hover); color: #fff; }
    .cw-rail-toggle svg { width: 18px; height: 18px; flex: 0 0 18px; }
    html.cw-mini .cw-rail-toggle svg { transform: rotate(180deg); }

    html.cw-mini .cw-sidebar:not(:hover):not(:focus-within) .cw-rail-toggle {
        justify-content: center;
        gap: 0;
        font-size: 0;
        margin: 0 10px 10px;
        padding: 11px 0;
    }
}

.cw-sidebar-foot {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.cw-sidebar-foot .btn { --bs-btn-font-size: .85rem; --bs-btn-padding-y: .42rem; }

/* ================================================================= topbar */

.cw-topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cw-line);
    min-height: var(--cw-topbar-h);
    padding: 12px 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.cw-topbar h1 {
    font-size: 1.22rem;
    font-weight: 650;
    margin: 0;
}

.cw-burger {
    border: 1px solid var(--cw-line);
    background: #fff;
    border-radius: var(--cw-radius-sm);
    width: 38px; height: 38px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    color: var(--cw-ink-soft);
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .cw-topbar { padding: 10px 16px; min-height: 58px; }
    .cw-topbar h1 { font-size: 1.05rem; }
}

/* ================================================================== cards */

.cw-card {
    background: var(--cw-surface);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-shadow);
}

.cw-card-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--cw-line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.cw-card-head h2 {
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.cw-card-body { padding: 22px; }

@media (max-width: 575.98px) {
    .cw-card-head, .cw-card-body { padding: 16px; }
}

/* ============================================================= stat tiles */

.cw-stat {
    background: var(--cw-surface);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-shadow);
    padding: 20px 22px;
    height: 100%;
}

.cw-stat .label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cw-muted);
    font-weight: 650;
}

.cw-stat .value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 8px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.cw-stat .hint { font-size: .82rem; color: var(--cw-muted); margin-top: 2px; }

@media (max-width: 575.98px) {
    .cw-stat { padding: 15px 16px; }
    .cw-stat .value { font-size: 1.6rem; }
}

/* ================================================================= tables */

.cw-table { width: 100%; margin: 0; }

.cw-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cw-muted);
    font-weight: 650;
    border-bottom: 1px solid var(--cw-line);
    padding: 12px 22px;
    white-space: nowrap;
    background: #fbfcfd;
}

.cw-table td {
    padding: 15px 22px;
    border-bottom: 1px solid var(--cw-line-soft);
    vertical-align: middle;
}

.cw-table tbody tr:last-child td { border-bottom: 0; }
.cw-table tbody tr:hover { background: #fbfcfd; }
.cw-table-wrap { overflow-x: auto; }

/* ================================================================= pieces */

.cw-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 650;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: capitalize;
    letter-spacing: .01em;
}

.cw-pill.pending   { background: var(--cw-amber-bg); color: var(--cw-amber); }
.cw-pill.active    { background: var(--cw-green-bg); color: var(--cw-green); }
.cw-pill.inactive  { background: var(--cw-slate-bg); color: var(--cw-ink-soft); }
.cw-pill.suspended { background: var(--cw-red-bg);   color: var(--cw-red); }
.cw-pill.missed    { background: var(--cw-red-bg);   color: var(--cw-red); }
.cw-pill.open      { background: var(--cw-primary-soft); color: var(--cw-primary-dark); }
.cw-pill.closed    { background: var(--cw-slate-bg); color: var(--cw-ink-soft); }

.cw-empty {
    padding: 52px 20px;
    text-align: center;
    color: var(--cw-muted);
    font-size: .92rem;
}

.cw-code {
    background: #0d1526;
    color: #dbe3f4;
    border-radius: var(--cw-radius-sm);
    padding: 18px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: .8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.btn {
    --bs-btn-border-radius: var(--cw-radius-sm);
    --bs-btn-font-weight: 550;
}

.btn-primary {
    --bs-btn-bg: var(--cw-primary);
    --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary-dark);
    --bs-btn-hover-border-color: var(--cw-primary-dark);
    --bs-btn-box-shadow: 0 2px 8px rgba(47, 107, 255, .28);
}

.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; color: var(--cw-ink-soft); }

.form-control, .form-select {
    border-radius: var(--cw-radius-sm);
    border-color: var(--cw-line);
    padding: .55rem .8rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cw-primary);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .14);
}

.alert { border-radius: var(--cw-radius-sm); border: 0; }

/* ==================================================== impersonation ribbon */

.cw-impersonating {
    background: linear-gradient(90deg, #b25e02, #d4820f);
    color: #fff;
    padding: 10px 30px;
    font-size: .86rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.cw-impersonating + .cw-topbar { top: 44px; }

@media (max-width: 991.98px) { .cw-impersonating { padding: 10px 16px; } }

/* ================================================================ charts */

.cw-chart { position: relative; height: 300px; }

@media (max-width: 767.98px) { .cw-chart { height: 230px; } }

.cw-danger-card { border-color: #f3c9c6; }
.cw-danger-card .cw-card-head { border-bottom-color: #f8dedc; background: #fdf7f7; }

/* ============================================== handover countdown + toast */

.cw-conv.is-waiting { background: #fff8ec; box-shadow: inset 3px 0 0 var(--cw-amber); }
.cw-conv.is-waiting:hover { background: #fdf3e0; }

.cw-waiting {
    font-size: .72rem;
    font-weight: 650;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--cw-amber-bg);
    color: var(--cw-amber);
    white-space: nowrap;
}

.cw-waiting b { font-variant-numeric: tabular-nums; }

.cw-waiting.is-urgent {
    background: var(--cw-red-bg);
    color: var(--cw-red);
    animation: cw-pulse 1.1s ease-in-out infinite;
}

.cw-waiting.is-late { background: var(--cw-red); color: #fff; animation: none; }

@keyframes cw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .cw-waiting.is-urgent { animation: none; }
}

.cw-toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: min(360px, calc(100vw - 36px));
}

.cw-toast {
    background: var(--cw-ink);
    color: #fff;
    padding: 13px 16px;
    border-radius: var(--cw-radius-sm);
    font-size: .87rem;
    line-height: 1.45;
    box-shadow: var(--cw-shadow-lg);
    transition: opacity .4s;
}

/* ================================================= AI training questions */

.cw-question {
    padding: 14px 22px;
    border-top: 1px solid var(--cw-line-soft);
}

.cw-question .form-label {
    font-weight: 600;
    color: var(--cw-ink);
    font-size: .9rem;
}

.cw-question textarea { font-size: .89rem; }

@media (max-width: 575.98px) { .cw-question { padding: 12px 16px; } }

/* ========================================================== bot rule rows */

.cw-rule {
    padding: 16px 22px;
    border-bottom: 1px solid var(--cw-line-soft);
}

.cw-rule:last-child { border-bottom: 0; }
.cw-rule.is-off { opacity: .58; }

.cw-rule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cw-rule-reply {
    margin: 9px 0 0;
    padding-left: 13px;
    border-left: 3px solid var(--cw-line);
    color: var(--cw-ink-soft);
    font-size: .89rem;
}

@media (max-width: 575.98px) { .cw-rule { padding: 14px 16px; } }

/* ======================================================== widget preview */

.cw-preview-card { position: sticky; top: calc(var(--cw-topbar-h) + 20px); }

.cw-preview {
    --pv-color: #2f6bff;
    position: relative;
    background: repeating-linear-gradient(45deg, #eef0f4, #eef0f4 10px, #e9ebf0 10px, #e9ebf0 20px);
    border-radius: var(--cw-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.cw-preview[data-position^="t"] { flex-direction: column-reverse; }
.cw-preview[data-position$="l"] { align-items: flex-start; }

.cw-preview-panel {
    width: 100%;
    max-width: 310px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--cw-shadow-lg);
    font-size: .84rem;
}

.cw-preview-head {
    background: var(--pv-color);
    color: #fff;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-preview-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid; place-items: center;
    font-size: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}

.cw-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cw-preview-status { font-size: .72rem; opacity: .85; }

.cw-preview-body {
    padding: 15px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 150px;
}

.cw-preview-msg {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 14px;
    line-height: 1.45;
}

.cw-preview-msg.them {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--cw-line);
    border-bottom-left-radius: 4px;
}

.cw-preview-msg.me {
    align-self: flex-end;
    background: var(--pv-color);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.cw-preview-composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-top: 1px solid var(--cw-line);
    color: var(--cw-muted);
    font-size: .8rem;
}

.cw-preview-composer b { color: var(--pv-color); }

.cw-preview-brand {
    text-align: center;
    font-size: .68rem;
    color: #9aa3b5;
    padding: 7px;
    border-top: 1px solid var(--cw-line-soft);
}

.cw-preview-launcher {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--pv-color);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.35rem;
    box-shadow: 0 6px 20px rgba(16, 24, 43, .26);
    overflow: hidden;
}

.cw-preview-launcher img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

@media (max-width: 1199.98px) {
    .cw-preview-card { position: static; }
}

/* ============================================================= live inbox */

/* The thread is the point of this screen, so the two side panes are given a
   fixed, modest width and everything left over goes to the conversation. */
.cw-inbox {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr) 272px;
    gap: 12px;
    height: calc(100vh - var(--cw-topbar-h) - 30px);
    min-height: 460px;
}

/* Hiding the visitor pane hands its width to the thread as well. Desktop only —
   below 1280px the pane is already an overlay with its own rules. */
@media (min-width: 1280px) {
    .cw-inbox.is-info-hidden { grid-template-columns: 288px minmax(0, 1fr); }
    .cw-inbox.is-info-hidden .cw-inbox-info { display: none; }
}

.cw-inbox-list,
.cw-inbox-thread,
.cw-inbox-info {
    background: var(--cw-surface);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* --- conversation list --- */

/* One row, always — a wrapped second line ate height the list needed. */
.cw-inbox-filters {
    display: flex;
    gap: 2px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--cw-line-soft);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.cw-inbox-filters::-webkit-scrollbar { display: none; }

.cw-filter {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 6px 9px;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cw-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.cw-filter:hover { background: var(--cw-line-soft); color: var(--cw-ink); }
.cw-filter.active { background: var(--cw-primary); color: #fff; }
.cw-filter-count { opacity: .7; font-weight: 500; margin-left: 2px; }

.cw-conv-list { overflow-y: auto; flex: 1; }

.cw-conv {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--cw-line-soft);
    background: var(--cw-surface);
    padding: 14px 18px;
    cursor: pointer;
    transition: background .12s;
}

.cw-conv:hover { background: #fafbfd; }

.cw-conv.active {
    background: var(--cw-primary-soft);
    box-shadow: inset 3px 0 0 var(--cw-primary);
}

.cw-conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cw-conv-name { font-weight: 620; font-size: .92rem; }
.cw-conv-time { font-size: .73rem; color: var(--cw-muted); flex-shrink: 0; }

.cw-conv-last {
    font-size: .84rem;
    color: var(--cw-muted);
    margin: 4px 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-conv-foot { display: flex; align-items: center; gap: 7px; }

.cw-tag {
    font-size: .61rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--cw-amber-bg);
    color: var(--cw-amber);
    border-radius: 20px;
    padding: 2px 7px;
    margin-left: 7px;
    font-weight: 700;
    vertical-align: middle;
}

.cw-unread {
    margin-left: auto;
    background: var(--cw-red);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    padding: 0 6px;
}

/* --- thread --- */

.cw-thread-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--cw-line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.cw-back {
    display: none;
    border: 1px solid var(--cw-line);
    background: #fff;
    border-radius: 8px;
    width: 34px; height: 34px;
    place-items: center;
    font-size: 1rem;
    color: var(--cw-ink-soft);
    flex-shrink: 0;
    margin-right: 10px;
}

.cw-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--cw-green);
    display: inline-block;
    box-shadow: 0 0 0 3px var(--cw-green-bg);
}

.cw-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background:
        linear-gradient(var(--cw-bg), var(--cw-bg));
}

.cw-msg {
    max-width: 72%;
    padding: 10px 14px 8px;
    border-radius: 16px;
    line-height: 1.5;
    font-size: .9rem;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.cw-msg-time {
    display: block;
    font-size: .67rem;
    opacity: .6;
    margin-top: 4px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cw-msg-tag {
    display: inline-block;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    background: #e6e9fb;
    color: #3a2fa8;
    border-radius: 20px;
    padding: 2px 7px;
    margin-right: 7px;
}

.cw-msg.cw-me {
    align-self: flex-end;
    background: var(--cw-primary);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.cw-msg.cw-me.is-sending { opacity: .55; }

.cw-msg.cw-visitor,
.cw-msg.cw-bot {
    align-self: flex-start;
    background: var(--cw-surface);
    border: 1px solid var(--cw-line);
    border-bottom-left-radius: 5px;
}

.cw-thread-typing {
    padding: 0 20px 10px;
    font-size: .8rem;
    color: var(--cw-muted);
    background: var(--cw-bg);
    font-style: italic;
}

.cw-thread-composer {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--cw-line-soft);
    align-items: flex-end;
    flex-shrink: 0;
}

.cw-thread-composer textarea {
    resize: none;
    overflow-y: auto;
    max-height: 140px;
    line-height: 1.5;
}

/* --- attachments: one photo or one voice note per message --- */

.cw-compose-btn {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
    display: grid; place-items: center;
    transition: background .12s, color .12s, border-color .12s;
}

.cw-compose-btn:hover { background: var(--cw-primary-soft); color: var(--cw-primary); border-color: var(--cw-primary-soft); }
.cw-compose-btn svg { width: 18px; height: 18px; }

.cw-compose-btn.is-recording {
    background: var(--cw-red);
    border-color: var(--cw-red);
    color: #fff;
    animation: cw-rec-pulse 1.1s ease-in-out infinite;
}

@keyframes cw-rec-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }

.cw-attach-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 500;
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    border-top: 1px solid var(--cw-line-soft);
}

/* display:flex outranks the browser's [hidden] rule, so say it again. */
.cw-attach-bar[hidden] { display: none; }

.cw-attach-bar span { flex: 1; min-width: 0; }
.cw-attach-bar.is-error { background: var(--cw-red-bg); color: var(--cw-red); }

.cw-attach-cancel {
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 2px;
}

/* Media sits flush in its bubble; the padding belongs to the caption instead. */
.cw-msg.has-media { padding: 5px; max-width: 62%; }

.cw-msg-media { display: block; }

.cw-msg-media img {
    display: block;
    width: 240px;
    max-width: 100%;
    border-radius: 11px;
    cursor: zoom-in;
}

.cw-msg-audio {
    display: block;
    width: 258px;
    max-width: 100%;
    height: 40px;
}

.cw-msg-caption { padding: 6px 9px 2px; }
.cw-msg.has-media .cw-msg-time { padding: 0 9px 3px; }

/* --- visitor info --- */

.cw-info-list {
    padding: 18px 20px;
    margin: 0;
    overflow-y: auto;
    font-size: .87rem;
}

.cw-info-list dt {
    color: var(--cw-muted);
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 16px;
}

.cw-info-list dt:first-child { margin-top: 0; }
.cw-info-list dd { margin: 3px 0 0; font-weight: 500; word-break: break-word; }

/* --- connection pill --- */

.cw-conn {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 5px 11px;
    border-radius: 20px;
    background: var(--cw-slate-bg);
    color: var(--cw-ink-soft);
    white-space: nowrap;
}

.cw-conn.is-on   { background: var(--cw-green-bg); color: var(--cw-green); }
.cw-conn.is-warn { background: var(--cw-amber-bg); color: var(--cw-amber); }
.cw-conn.is-off  { background: var(--cw-red-bg);   color: var(--cw-red); }

/* --- inbox responsive --- */

@media (max-width: 1279.98px) {
    .cw-inbox { grid-template-columns: 290px minmax(0, 1fr); }
    .cw-inbox-info { display: none; }
    .cw-inbox-info.is-open {
        display: flex;
        position: fixed;
        inset: auto 14px 14px 14px;
        max-height: 62vh;
        z-index: 1050;
        box-shadow: var(--cw-shadow-lg);
    }
}

/* Phone: one pane at a time, like a real messaging app. */
@media (max-width: 767.98px) {
    .cw-inbox {
        grid-template-columns: 1fr;
        height: calc(100vh - 58px - 30px);
    }

    .cw-inbox-thread { display: none; }

    .cw-inbox.is-thread-open .cw-inbox-list { display: none; }
    .cw-inbox.is-thread-open .cw-inbox-thread { display: flex; }

    .cw-back { display: grid; }
    .cw-msg { max-width: 84%; }
    .cw-thread-body { padding: 16px 14px; }
    .cw-conv { padding: 15px 16px; }
}