/* ---------------------------------------------------------------
   Chat - warm neutral palette, light and dark.

   Colour direction: paper and ink with a single clay accent. The old
   theme was neon gold/red glow on near-black, which reads as generated
   rather than designed. This one borrows from print: warm off-white,
   warm charcoal, and one earthy accent that carries every action.

   Nothing glows. Depth comes from real shadows and hairline borders.
   --------------------------------------------------------------- */

:root,
[data-theme="light"] {
    --bg:           #f6f3ee;   /* warm paper, never pure white */
    --bg-2:         #efe9e0;
    --surface:      #fffdfa;
    --surface-2:    #f1ece4;
    --surface-3:    #e7e0d5;
    --line:         #ded5c8;
    --line-soft:    #ebe4d9;

    --text:         #211d18;   /* warm near-black, not pure black */
    --text-2:       #4a4339;
    --muted:        #6b6154;   /* dark enough for 4.5:1 on the sidebar */

    --accent:       #b0543a;   /* clay */
    --accent-hi:    #9a4831;
    --accent-ink:   #fffaf7;
    --accent-wash:  #f6e7e0;

    --online:       #3f7d5d;
    --danger:       #a9384a;
    --danger-wash:  #f9e7e9;

    --shadow-1: 0 1px 2px rgba(33, 29, 24, .05), 0 1px 3px rgba(33, 29, 24, .04);
    --shadow-2: 0 2px 4px rgba(33, 29, 24, .04), 0 8px 24px rgba(33, 29, 24, .08);

    /* Frosted surfaces. Deliberately restrained: translucent enough to
       show movement underneath, opaque enough that text over it keeps
       full contrast. Heavy blur on everything is the thing that makes an
       interface look generated. */
    --glass-bg: rgba(255, 253, 250, .72);
    --glass-edge: rgba(255, 255, 255, .6);
    --glass-blur: 18px;
}

[data-theme="dark"] {
    --bg:           #14120f;   /* warm charcoal, not blue-black */
    --bg-2:         #191612;
    --surface:      #1c1916;
    --surface-2:    #24201c;
    --surface-3:    #2e2924;
    --line:         #37312a;
    --line-soft:    #2a2521;

    --text:         #f2ede5;
    --text-2:       #cdc4b7;
    --muted:        #968b7c;

    --accent:       #d9674a;   /* lifted so it holds up on dark */
    --accent-hi:    #e57a5e;
    --accent-ink:   #1a0e09;
    --accent-wash:  #2f201a;

    --online:       #5fae83;
    --danger:       #e0707d;
    --danger-wash:  #331f21;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .45);

    --glass-bg: rgba(28, 25, 22, .72);
    --glass-edge: rgba(255, 255, 255, .07);
    --glass-blur: 20px;
}

:root {
    --radius: 12px;
    --radius-lg: 18px;
    --control-h: 48px;
    --sidebar-w: 336px;

    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    --sans: Karla, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --display: Fraunces, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* one soft, believable wash - no neon blobs */
    background-image: linear-gradient(178deg, var(--bg-2) 0%, var(--bg) 42%);
    background-attachment: fixed;
}

body.centered {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px max(18px, var(--safe-l)) calc(24px + var(--safe-b));
}

body.scrollable { min-height: 100vh; }

/* ---------------------------------------------------------------
   Type
   --------------------------------------------------------------- */

.brand {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.75rem, 7vw, 2.35rem);
    font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 40;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text);
}

.brand em {
    font-style: normal;
    color: var(--accent);
}

.brand.small {
    font-size: 1.4rem;
    font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 20;
}

.muted { color: var(--muted); }

/* ---------------------------------------------------------------
   Shared controls
   --------------------------------------------------------------- */

.error {
    margin: 0;
    padding: 10px 13px;
    background: var(--danger-wash);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: 10px;
    color: var(--danger);
    font-size: 0.85rem;
}

.error[hidden] { display: none; }
.error.inline { margin: 0 16px 8px; }

.empty {
    margin: 0;
    padding: 18px 18px 14px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.empty[hidden] { display: none; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.primary {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 20px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: var(--accent-ink);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: background .18s, transform .12s, opacity .18s;
}

.primary:hover { background: var(--accent-hi); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .55; cursor: progress; }

.primary.as-link {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}

.ghost-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--muted);
}

.ghost-btn[hidden] { display: none; }

/* notification opt-in / mute */
.bell.is-on {
    background: var(--accent-wash);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

.bell.is-muted {
    background: var(--surface);
    border-color: var(--line);
    color: var(--muted);
}

.me-actions {
    flex: none;
    display: flex;
    gap: 7px;
    margin: 0 12px 12px;
}

.me-actions .ghost-btn { flex: 1 1 auto; justify-content: center; }

.icon-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text-2);
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s, transform .12s;
}

.icon-btn.small { width: 42px; height: 42px; border-radius: 10px; }

.icon-btn svg {
    width: 19px; height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn svg.filled { fill: currentColor; stroke: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.95); }

.attach:hover, .attach.has-file {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-wash);
}

.send {
    background: var(--accent);
    border-color: transparent;
    color: var(--accent-ink);
    box-shadow: var(--shadow-1);
}

.send:hover { background: var(--accent-hi); color: var(--accent-ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Theme switch
   --------------------------------------------------------------- */

.theme-btn { position: relative; }

.theme-btn .ico { display: none; }
[data-theme-pref="system"] .theme-btn .ico-system,
[data-theme-pref="light"]  .theme-btn .ico-light,
[data-theme-pref="dark"]   .theme-btn .ico-dark { display: block; }

.theme-float {
    position: fixed;
    top: max(16px, var(--safe-t));
    right: max(16px, var(--safe-r));
    z-index: 20;
}

/* ---------------------------------------------------------------
   Login
   --------------------------------------------------------------- */

.card {
    width: 100%;
    max-width: 410px;
    padding: 34px 28px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    text-align: center;
}

.card .brand { margin-bottom: 6px; }

.card-sub {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 0.9rem;
}

.tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 22px;
    padding: 4px;
    background: var(--surface-2);
    border-radius: 11px;
}

.tab {
    flex: 1;
    min-height: 38px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s, color .16s, box-shadow .16s;
}

.tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-1);
}

.field {
    display: block;
    margin-bottom: 15px;
    text-align: left;
}

.field[hidden] { display: none; }

.field span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.field input {
    width: 100%;
    height: var(--control-h);
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;                /* under 16px iOS Safari zooms on focus */
    outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

.field input::placeholder { color: var(--muted); }

.field input:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.card .error { margin-bottom: 14px; text-align: left; }

.hint {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.hint strong { color: var(--text-2); }

/* ---------------------------------------------------------------
   Shell
   --------------------------------------------------------------- */

.app {
    height: 100vh;
    height: 100dvh;                 /* tracks the collapsing mobile address bar */
    display: flex;
    overflow: hidden;
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
    background: var(--bg);
}

.sidebar, .chat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

@media (max-width: 759px) {
    .sidebar, .chat { flex: 0 0 100%; width: 100%; }
    .app[data-view="list"] .chat { display: none; }
    .app[data-view="chat"] .sidebar { display: none; }
}

@media (min-width: 760px) {
    .sidebar {
        flex: 0 0 var(--sidebar-w);
        border-right: 1px solid var(--line);
        background: var(--bg-2);
    }
    .chat { flex: 1 1 auto; }
    .back { display: none !important; }
}

/* ---------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------- */

.sidebar-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: max(14px, var(--safe-t)) 16px 12px;
}

.head-actions { display: flex; gap: 6px; }

.me {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.me-text { min-width: 0; }

.me-name {
    font-size: 0.88rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-mail {
    color: var(--muted);
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-chat {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}

.new-chat input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}

.new-chat input::placeholder { color: var(--muted); }

/* Direction-aware tuck. Transform and opacity only, so the whole thing
   runs on the compositor and never triggers layout. Height is animated
   too, otherwise the empty strip would keep occupying the space we are
   trying to give back. */
.new-chat {
    transform-origin: top center;
    overflow: hidden;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease,
                max-height .26s cubic-bezier(.4, 0, .2, 1),
                padding-bottom .26s cubic-bezier(.4, 0, .2, 1);
    max-height: 60px;
    will-change: transform;
}

.new-chat.is-tucked {
    transform: translateY(-8px) scaleY(.96);
    opacity: 0;
    max-height: 0;
    padding-bottom: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .new-chat { transition: none; }
}

.new-chat input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.list-label {
    flex: none;
    margin: 2px 0 4px;
    padding: 0 20px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.conversations {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    margin: 0;
    padding: 0 10px 14px;
}

.conversations li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .14s;
}

.conversations li:hover { background: var(--surface-2); }

.conversations li.is-active {
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

/* Deterministic per-person colour. Classes rather than inline styles,
   because the CSP forbids inline style attributes. */
.avatar {
    flex: none;
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--av-bg, var(--surface-3));
    color: var(--av-fg, var(--text));
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.av-0 { --av-bg: #cf7c52; --av-fg: #2a1408; }
.av-1 { --av-bg: #6f9b7a; --av-fg: #10200f; }
.av-2 { --av-bg: #7d8bbd; --av-fg: #0f1424; }
.av-3 { --av-bg: #c98aa0; --av-fg: #2a0f19; }
.av-4 { --av-bg: #b9a25f; --av-fg: #241d06; }
.av-5 { --av-bg: #8f8bb0; --av-fg: #171327; }
.av-6 { --av-bg: #6fa5a8; --av-fg: #0c2022; }
.av-7 { --av-bg: #c3826d; --av-fg: #2a1109; }

.avatar::after {
    content: "";
    position: absolute;
    right: -2px; bottom: -2px;
    width: 13px; height: 13px;
    border: 2.5px solid var(--bg-2);
    border-radius: 50%;
    background: var(--muted);
    transition: background .2s;
}

.conversations li.is-active .avatar::after,
.me .avatar::after { border-color: var(--surface); }

.avatar.is-online::after { background: var(--online); }

.conv-body { flex: 1 1 auto; min-width: 0; }

.conv-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.conv-name {
    font-size: 0.92rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-time {
    flex: none;
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.conv-preview {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Chat pane
   --------------------------------------------------------------- */

.chat-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: max(12px, var(--safe-t)) 18px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.back {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin-left: -8px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text-2);
    cursor: pointer;
}

.back:hover { background: var(--surface-2); }

.back svg {
    width: 21px; height: 21px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.peer { min-width: 0; }

.peer strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peer-status {
    font-size: 0.76rem;
    color: var(--muted);
}

.peer-status.is-online { color: var(--online); font-weight: 600; }

.pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 18px;
}

.load-more {
    display: block;
    margin: 0 auto 18px;
    padding: 7px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.load-more:hover { background: var(--surface-2); }
.load-more[hidden] { display: none; }

#messages {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#messages li {
    max-width: 78%;
    align-self: flex-start;
    margin-top: 9px;
    padding: 9px 13px 7px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 15px 15px 15px 5px;
    color: var(--text);
    font-size: 0.94rem;
    overflow-wrap: anywhere;          /* a long URL must not widen the page */
    box-shadow: var(--shadow-1);
    animation: rise .2s ease-out;
}

#messages li.mine {
    align-self: flex-end;
    background: var(--accent);
    border-color: transparent;
    border-radius: 15px 15px 5px 15px;
    color: var(--accent-ink);
}

/* consecutive messages from the same side tuck together */
#messages li.run { margin-top: 2px; border-radius: 15px 15px 15px 5px; }
#messages li.mine.run { border-radius: 15px 15px 5px 15px; }

#messages li.image-msg { padding: 5px; }

#messages img {
    display: block;
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 11px;
}

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

#messages li.system-msg {
    align-self: center !important;
    max-width: 90% !important;
    margin-top: 12px;
    background: var(--danger-wash) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent) !important;
    border-radius: 10px !important;
    color: var(--danger) !important;
    font-size: 0.82rem;
    text-align: center;
    box-shadow: none;
}

.day-divider {
    align-self: center !important;
    max-width: none !important;
    margin-top: 20px !important;
    padding: 3px 12px !important;
    background: var(--surface-2) !important;
    border: none !important;
    border-radius: 999px !important;
    color: var(--muted) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    box-shadow: none !important;
    animation: none !important;
}

.typing {
    flex: none;
    min-height: 1.3em;
    margin: 0;
    padding: 0 20px 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
}

.attachment {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 14px 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 11px;
    font-size: 0.8rem;
    color: var(--text-2);
}

.attachment[hidden] { display: none; }

.attachment img {
    flex: none;
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 8px;
}

.attachment span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment button {
    flex: none;
    width: 30px; height: 30px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.attachment button:hover { color: var(--danger); background: var(--danger-wash); }

.composer {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px calc(12px + var(--safe-b));
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.composer[hidden] { display: none; }

#input {
    flex: 1 1 auto;
    min-width: 0;                     /* without this the flex item will not shrink */
    height: var(--control-h);
    padding: 0 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}

#input::placeholder { color: var(--muted); }

#input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ---------------------------------------------------------------
   Admin
   --------------------------------------------------------------- */

.admin {
    max-width: 1040px;
    margin: 0 auto;
    padding: max(20px, var(--safe-t)) max(16px, var(--safe-l)) calc(40px + var(--safe-b)) max(16px, var(--safe-r));
}

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 22px 0 30px;
    padding: 0;
}

.stats li {
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.stats .n {
    display: block;
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    line-height: 1.05;
}

.stats .k {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
}

.section-title .muted { font-size: 0.74rem; font-family: var(--sans); font-weight: 400; }

/* wide table scrolls inside its own box, never the page */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.users {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    white-space: nowrap;
}

.users th, .users td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

.users th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.users tbody tr:last-child td { border-bottom: none; }
.users tbody tr:hover { background: var(--surface-2); }
.users .num { text-align: right; font-variant-numeric: tabular-nums; }

.who { display: flex; align-items: center; gap: 11px; }
.who .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 0.8rem; }
.who .avatar::after { border-color: var(--surface); }

.who-text { min-width: 0; }
.who-name { font-weight: 700; }
.who-mail { color: var(--muted); font-size: 0.76rem; }

.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pill.on { background: color-mix(in srgb, var(--online) 16%, transparent); color: var(--online); }
.pill.off { background: var(--surface-2); color: var(--muted); }
.pill.admin { background: var(--accent-wash); color: var(--accent); margin-left: 7px; }

/* ---------------------------------------------------------------
   Motion
   --------------------------------------------------------------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (min-width: 760px) {
    :root { --control-h: 50px; }
    #messages li { max-width: 64%; }
}

/* landscape phones are short - claw back vertical space */
@media (max-height: 450px) {
    :root { --control-h: 42px; }
    .sidebar-head, .chat-head { padding-top: 7px; padding-bottom: 7px; }
    .me { display: none; }
}

/* ===============================================================
   Glass surfaces
   ===============================================================
   The bars are lifted out of flow and the scrollers run the full
   height beneath them, so content genuinely passes under the frost
   rather than merely sitting next to a translucent panel.
   =============================================================== */

.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-color: var(--glass-edge);
}

/* A hairline of light along the lit edge is what sells it as a pane of
   glass rather than a flat translucent rectangle. */
.glass::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
    pointer-events: none;
}

.sidebar-top::after, .chat-head::after { bottom: 0; }
.dock::after { top: 0; }

/* Where the browser cannot blur, fall back to an opaque panel rather
   than leaving text sitting over raw content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--surface); }
}

/* Someone who has asked for less transparency gets none. */
@media (prefers-reduced-transparency: reduce) {
    .glass {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---- sidebar: the list runs under the frosted top block ---- */

.sidebar { position: relative; }

.sidebar-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    border-bottom: 1px solid var(--glass-edge);
}

.conversations {
    position: absolute;
    inset: 0;
    padding-top: var(--sidebar-top-h, 210px);
    transition: padding-top .26s cubic-bezier(.4, 0, .2, 1);
}

.empty.floating {
    position: absolute;
    top: var(--sidebar-top-h, 210px);
    left: 0; right: 0;
    z-index: 1;
}

/* ---- chat: messages run under both bars ---- */

.chat { position: relative; }

.chat-head {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    border-bottom: 1px solid var(--glass-edge);
}

.dock {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    border-top: 1px solid var(--glass-edge);
}

.dock .composer {
    background: none;
    border-top: none;
}

.pane {
    position: absolute;
    inset: 0;
    padding-top: calc(var(--head-h, 66px) + 12px);
    padding-bottom: calc(var(--dock-h, 88px) + 10px);
}

/* ===============================================================
   Micro-interactions
   =============================================================== */

/* Buttons lean a hair towards the pointer. --mx/--my are written by
   Motion.magnetic through CSSOM, which the CSP permits. */
.icon-btn, .ghost-btn, .primary {
    position: relative;
    overflow: hidden;
    transform: translate(var(--mx, 0), var(--my, 0));
    transition: background .16s, color .16s, border-color .16s,
                transform .22s cubic-bezier(.22, 1.2, .36, 1),
                box-shadow .2s;
}

.icon-btn:active, .ghost-btn:active {
    transform: translate(var(--mx, 0), var(--my, 0)) scale(.94);
}

.ripple {
    position: absolute;
    top: var(--ry, 50%);
    left: var(--rx, 50%);
    width: var(--rs, 40px);
    height: var(--rs, 40px);
    border-radius: 50%;
    background: currentColor;
    opacity: .28;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
}

.send .ripple { background: var(--accent-ink); }

/* ---- delivery ticks ---- */

.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    opacity: .62;
}

.ticks {
    position: relative;
    display: inline-flex;
    width: 15px;
    height: 11px;
}

.ticks svg {
    position: absolute;
    inset: 0;
    width: 15px; height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the second tick slides in when the message reaches the other device */
.ticks .tick-2 {
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1.2, .36, 1);
}

.ticks.is-delivered .tick-2,
.ticks.is-read .tick-2 { opacity: 1; transform: translateX(0); }

#messages li.mine .ticks.is-read { color: #0b3d2c; }
[data-theme="dark"] #messages li.mine .ticks.is-read { color: #0a2a1f; }
#messages li.mine .msg-meta.is-read { opacity: .95; }

/* ---- avatars and presence ---- */

.avatar { transition: transform .24s cubic-bezier(.22, 1.2, .36, 1); }

.conversations li:hover .avatar { transform: scale(1.06) rotate(-1.5deg); }

.avatar::after {
    transition: background .28s ease, transform .34s cubic-bezier(.22, 1.2, .36, 1);
}

.avatar.is-online::after {
    background: var(--online);
    transform: scale(1.1);
}

/* a soft pulse the moment someone comes online */
@keyframes presence-in {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 55%, transparent); }
    100% { box-shadow: 0 0 0 7px transparent; }
}

.avatar.just-online::after { animation: presence-in .7s ease-out; }

/* ---- typing dots ---- */

.typing-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 5px;
    vertical-align: middle;
}

.typing-dots i {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: typing-bounce 1.1s infinite ease-in-out;
}

.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-3px); opacity: 1; }
}

/* ===============================================================
   Loading skeletons
   =============================================================== */

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: 8px;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent);
    animation: sheen 1.25s infinite;
}

@keyframes sheen { to { transform: translateX(100%); } }

.skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
}

.skel-avatar { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
.skel-line { height: 10px; }
.skel-line.short { width: 42%; }
.skel-line.long { width: 78%; }

@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
    .typing-dots i { animation: none; opacity: .7; }
}

/* ===============================================================
   Accessibility
   =============================================================== */

.skip-link {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    text-decoration: none;
    /* translate rather than top: this is the same transform-only rule the
       rest of the motion system follows, so it never triggers layout */
    transform: translateY(-120%);
    transition: transform .18s ease;
}

.skip-link:focus { transform: translateY(0); }

.conversations li:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--surface-2);
}

.pane:focus { outline: none; }

/* Windows high contrast: let the system palette win outright rather
   than fighting it. */
@media (forced-colors: active) {
    .glass {
        background: Canvas;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #messages li { border: 1px solid CanvasText; }
    .avatar::after { border-color: Canvas; }
    .ripple { display: none; }
}

.skel-bubble {
    width: var(--skw, 50%);
    height: 38px;
    align-self: flex-start;
    margin-top: 9px;
    border-radius: 15px 15px 15px 5px;
    border: none;
    box-shadow: none;
}

.skel-bubble.mine { align-self: flex-end; border-radius: 15px 15px 5px 15px; }