/* ============================================================================
   TheGodsAI - app.css  (full redesign)
   Built by Humans. Inspired by Gods.
   ========================================================================== */

:root {
    --obsidian:        #0A0A0C;
    --obsidian-raised: #131318;
    --obsidian-high:   #1B1B22;
    --obsidian-hover:  #22222B;
    --line:            #2A2A33;
    --line-soft:       #202027;

    --gold:        #D4AF37;
    --gold-bright: #F4D77B;
    --gold-deep:   #9C7A1F;
    --gold-ghost:  rgba(212, 175, 55, 0.10);
    --gold-glow:   rgba(212, 175, 55, 0.28);

    --bone:       #E8E4DA;
    --bone-dim:   #9A958A;
    --bone-faint: #6B675E;

    --ok:    #6BBF8A;
    --warn:  #E0A458;
    --error: #E0705F;
    --info:  #7FB2E0;

    --display: 'Syne', 'Trebuchet MS', sans-serif;
    --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --gap-xs: 0.4rem;
    --gap-sm: 0.75rem;
    --gap:    1.25rem;
    --gap-lg: 2rem;
    --gap-xl: 3rem;

    --radius:    8px;
    --radius-sm: 5px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shell: 62rem;
    --read:  46rem;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow:    0 6px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 18px 50px rgba(0,0,0,0.45);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-w: 17rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--obsidian);
    color: var(--bone);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-image: radial-gradient(ellipse 80% 45% at 50% -12%, rgba(212,175,55,0.055), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }
::selection { background: var(--gold-glow); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--obsidian-hover); background-clip: padding-box; }

main { max-width: var(--shell); margin: 0 auto; padding: var(--gap-lg) var(--gap); }
@media (max-width: 640px) { main { padding: var(--gap) var(--gap-sm); } }

h1, h2, h3, legend {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--bone);
    margin: 0 0 var(--gap-sm);
}
h1 { font-size: clamp(1.65rem, 4.5vw, 2.4rem); }
h2 { font-size: clamp(1.15rem, 3vw, 1.45rem); margin-top: var(--gap-lg); color: var(--gold-bright); }
h3 { font-size: 1.05rem; margin-top: var(--gap); }

p { margin: 0 0 var(--gap-sm); }
small, .current { font-size: 0.85rem; color: var(--bone-dim); }
em { color: var(--bone-dim); font-style: italic; }
strong { color: var(--bone); font-weight: 700; }

a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-deep); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

code, pre, .masked { font-family: var(--mono); font-size: 0.88em; }
p > code, li > code, td > code, .current code {
    background: var(--obsidian-high);
    border: 1px solid var(--line-soft);
    border-radius: 3px;
    padding: 0.1em 0.4em;
    color: var(--gold-bright);
}

/* --- Brand bar ---------------------------------------------------------- */
.brand-bar {
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent);
    backdrop-filter: blur(6px);
}
.brand-bar__inner {
    max-width: var(--shell); margin: 0 auto; padding: var(--gap-sm) var(--gap);
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; border-bottom: none; line-height: 0; }
.brand:hover { border-bottom: none; opacity: 0.85; }
.brand__logo { height: 2rem; width: auto; display: block; }
@media (max-width: 480px) { .brand__logo { height: 1.6rem; } }

.chevron-rule {
    height: 4px; border: 0; margin: 0;
    background-image: repeating-linear-gradient(
        90deg, var(--gold-deep) 0 10px, transparent 10px 16px, var(--gold) 16px 20px, transparent 20px 30px);
    opacity: 0.55;
}

nav {
    display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: center;
    max-width: var(--shell); margin: 0 auto var(--gap); padding: var(--gap-sm) var(--gap); font-size: 0.92rem;
}
.brand-bar nav { padding: 0; margin: 0; }
nav a { padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); border-bottom: none; color: var(--bone-dim); white-space: nowrap; }
nav a:hover { color: var(--gold-bright); background: var(--gold-ghost); border-bottom: none; }

/* --- Forms -------------------------------------------------------------- */
label { display: block; font-size: 0.9rem; color: var(--bone-dim); margin-bottom: 0.35rem; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=url], input[type=search], select, textarea {
    width: 100%; padding: 0.7rem 0.85rem; margin-bottom: var(--gap-sm);
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--bone); font-family: var(--body); font-size: 1rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-ghost); }
input::placeholder, textarea::placeholder { color: var(--bone-faint); }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239A958A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.2rem;
}

button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.7rem 1.3rem;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    color: #17130A; border: 1px solid var(--gold-deep); border-radius: var(--radius-sm);
    font-family: var(--body); font-size: 0.95rem; font-weight: 600; cursor: pointer; line-height: 1.2;
    transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
button:hover, .btn:hover { filter: brightness(1.08); box-shadow: 0 4px 18px var(--gold-glow); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: none; }

.btn--ghost { background: transparent; color: var(--bone); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--obsidian-high); color: var(--gold-bright); box-shadow: none; }
.btn--danger { background: linear-gradient(180deg, #C6534A, #8F352E); border-color: #7a2a24; color: #fff; }
.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

[role=alert], .alert {
    padding: 0.8rem 1rem; border-radius: var(--radius-sm); border: 1px solid; margin-bottom: var(--gap-sm); font-size: 0.92rem;
}
[role=alert], .alert--error { background: rgba(224,112,95,0.10); border-color: rgba(224,112,95,0.4); color: #F0A99D; }
.alert--ok { background: rgba(107,191,138,0.10); border-color: rgba(107,191,138,0.4); color: #A6DCB9; }
.alert--warn { background: rgba(224,164,88,0.10); border-color: rgba(224,164,88,0.4); color: #EBC58C; }

.card { background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; margin-bottom: var(--gap); font-size: 0.92rem; }
th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); }
th { color: var(--bone-dim); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ============================================================================
   APP SHELL
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar { display: flex; flex-direction: column; background: var(--obsidian-raised); border-right: 1px solid var(--line); min-height: 0; }
.sidebar__head { padding: var(--gap-sm); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--gap-sm); }
.sidebar__logo { display: block; line-height: 0; border-bottom: none; padding: 0.3rem 0.4rem; }
.sidebar__logo:hover { border-bottom: none; opacity: 0.85; }
.sidebar__logo img { height: 1.7rem; width: auto; }
.sidebar__new { width: 100%; justify-content: flex-start; background: var(--gold-ghost); color: var(--gold-bright); border: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep); text-decoration: none; }
.sidebar__new:hover { background: rgba(212,175,55,0.18); box-shadow: none; border-bottom: 1px solid var(--gold-deep); color: var(--gold-bright); }
.sidebar__list { list-style: none; margin: 0; padding: var(--gap-xs); flex: 1; overflow-y: auto; min-height: 0; }
.sidebar__item {
    display: flex; align-items: center; gap: 2px; margin-bottom: 2px;
    border-radius: var(--radius-sm); position: relative;
}
.sidebar__item.is-pinned { background: rgba(212,175,55,0.045); }
.sidebar__link {
    display: block; flex: 1; min-width: 0; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
    color: var(--bone-dim); border-bottom: none; font-size: 0.92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.sidebar__link:hover { background: var(--obsidian-high); color: var(--bone); border-bottom: none; }
.sidebar__link.is-active { background: var(--gold-ghost); color: var(--gold-bright); border-left: 2px solid var(--gold); }

.sidebar__item-actions {
    display: flex; align-items: center; gap: 1px; flex: 0 0 auto;
    opacity: 1; padding-right: 0.25rem;
}
.sidebar__action {
    display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bone-faint); font-size: 0.82rem; cursor: pointer; line-height: 1;
    filter: none; box-shadow: none;
}
.sidebar__action:hover { background: var(--obsidian-high); color: var(--bone); border-color: var(--line); filter: none; box-shadow: none; }
.sidebar__action.is-active { color: var(--gold); }
.sidebar__action--danger:hover { color: var(--error); border-color: rgba(224,112,95,0.4); }

/* Actions stay visible at all times (requested) - no hover-to-reveal. */
.sidebar__item-actions { opacity: 1; }

/* Section headers within the chat list (e.g. "Pinned" / "Recent"). */
.sidebar__section {
    padding: 0.6rem 0.7rem 0.25rem;
    font-family: var(--display);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bone-faint);
    display: flex; align-items: center; gap: 0.35rem;
}
.sidebar__section .ico { color: var(--gold); font-size: 0.72rem; }
.sidebar__section:not(:first-child) { margin-top: 0.35rem; border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }

/* Inline rename input shown inside a sidebar row */
.sidebar__rename-input {
    flex: 1; min-width: 0; margin: 0; padding: 0.5rem 0.6rem; font-size: 0.92rem;
    background: var(--obsidian-high); border: 1px solid var(--gold-deep); border-radius: var(--radius-sm);
}

.sidebar__foot { padding: var(--gap-sm); border-top: 1px solid var(--line); display: flex; gap: var(--gap-sm); flex-wrap: wrap; font-size: 0.88rem; }
.sidebar__foot a { color: var(--bone-dim); border-bottom: none; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); }
.sidebar__foot a:hover { color: var(--gold-bright); background: var(--gold-ghost); }

.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat__head {
    display: flex; align-items: center; gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap); border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(212,175,55,0.04), transparent);
    flex-wrap: nowrap; min-height: 3.75rem;
}
.chat__title { font-size: 1.05rem; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.chat__title:hover { color: var(--gold-bright); }
.chat__meta { font-size: 0.78rem; color: var(--bone-dim); background: var(--obsidian-high); border: 1px solid var(--line); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.chat__head form { margin: 0; }
.chat__head select { margin: 0; width: auto; padding: 0.45rem 2rem 0.45rem 0.7rem; font-size: 0.85rem; }

.chat__stream { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }
.chat__inner { max-width: var(--read); margin: 0 auto; padding: var(--gap-lg) var(--gap) var(--gap); }

.icon-btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0;
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--bone-dim); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.icon-btn:hover { background: var(--obsidian-high); color: var(--gold-bright); box-shadow: none; filter: none; }
a.icon-btn { border-bottom: none; }
.sidebar__toggle { display: none; }

.theme-toggle {
    background: transparent; border: 1px solid var(--line); color: var(--bone-dim);
    width: 40px; height: 40px; min-height: 40px; padding: 0; display: grid; place-items: center;
    border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; cursor: pointer;
}
.theme-toggle:hover { background: var(--obsidian-high); color: var(--gold-bright); filter: none; box-shadow: none; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============================================================================
   MESSAGES
   ========================================================================== */
#message-history { display: flex; flex-direction: column; gap: var(--gap-lg); }
.message { display: flex; flex-direction: column; gap: 0.4rem; animation: msg-in .28s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.message > strong { font-family: var(--display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.message-user > strong { color: var(--bone-dim); }
.message-assistant > strong { color: var(--gold); }

.continue-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }
.continue-note { font-size: 0.82rem; color: var(--bone-dim); }
.continue-btn { background: var(--gold-ghost); color: var(--gold-bright); border: 1px solid var(--gold-deep); }
.continue-btn:hover { background: rgba(212,175,55,0.18); box-shadow: none; }
.message-content {
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.9rem 1.1rem; line-height: 1.65; overflow-wrap: break-word; word-break: break-word;
}
.message-user .message-content { background: var(--gold-ghost); border-color: var(--gold-deep); border-left: 3px solid var(--gold); }
.message-assistant .message-content { border-left: 3px solid var(--gold-deep); }
.message-content > *:first-child { margin-top: 0; }
.message-content > *:last-child { margin-bottom: 0; }
.message-content .md-heading { color: var(--gold-bright); margin: 0.9rem 0 0.4rem; font-size: 1.05rem; }
.message-content .md-list { margin: 0.3rem 0 0.6rem; padding-left: 1.4rem; }
.message-content .md-list li { margin-bottom: 0.25rem; }
.message-content .md-quote { border-left: 3px solid var(--gold-deep); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0.5rem 0; color: var(--bone-dim); }

/* Tables in a reply.
   The wrapper scrolls on its own so a wide table cannot stretch the message
   bubble past the screen and drag the whole conversation sideways with it -
   which is what happens on a phone if you let a table size the column. */
.message-content .md-table-wrap {
    margin: 0.7rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.message-content .md-table {
    border-collapse: collapse; width: 100%; font-size: 0.88rem;
    /* Cells size to their content and the wrapper scrolls, rather than words
       wrapping to one character per line in a narrow column. */
    min-width: max-content;
}
.message-content .md-table th,
.message-content .md-table td {
    padding: 0.5rem 0.75rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.message-content .md-table thead th {
    background: var(--obsidian-high); color: var(--gold);
    font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em;
    border-bottom: 1px solid var(--line);
}
/* Zebra striping, kept very faint: the point is to help the eye track across
   a row, not to draw attention to the table itself. */
.message-content .md-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
.message-content .md-table tbody tr:last-child td { border-bottom: 0; }
.message-content .md-rule { border: 0; border-top: 1px solid var(--line); margin: 0.9rem 0; }
.message-content .inline-code {
    background: var(--obsidian-high); border: 1px solid var(--line-soft); border-radius: 3px;
    padding: 0.1em 0.4em; color: var(--gold-bright); font-family: var(--mono); font-size: 0.86em;
}
.message-content strong { color: var(--bone); font-weight: 700; }
.message-content a { border-bottom: 1px solid var(--gold-deep); }

.message-actions {
    display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem;
}
.msg-action {
    background: transparent; border: 1px solid transparent; color: var(--bone-faint);
    width: 1.7rem; height: 1.7rem; padding: 0; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.82rem; filter: none;
}
.msg-action:hover { color: var(--gold-bright); border-color: var(--line); background: var(--obsidian-high); box-shadow: none; }
.msg-feedback-btn.is-active { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--gold-ghost); }

#streaming-message { display: flex; flex-direction: column; gap: 0.4rem; margin-top: var(--gap-lg); }
#streaming-message > strong { font-family: var(--display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); font-weight: 700; }
#streaming-content {
    background: var(--obsidian-raised); border: 1px solid var(--line); border-left: 3px solid var(--gold-deep);
    border-radius: var(--radius); padding: 0.9rem 1.1rem; line-height: 1.65; min-height: 1.5rem;
    white-space: pre-wrap; overflow-wrap: break-word;
}
#streaming-content::after { content: '▍'; color: var(--gold); animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.empty { text-align: center; padding: var(--gap-xl) var(--gap); max-width: 32rem; margin: 0 auto; }
.empty img { width: 72px; height: auto; opacity: 0.9; margin-bottom: var(--gap); filter: drop-shadow(0 4px 16px var(--gold-glow)); }
.empty h2 { color: var(--gold-bright); margin-top: 0; }
.empty p { color: var(--bone-dim); }

/* Welcoming hero shown in a chat with no messages yet. */
.empty--hero { animation: empty-rise .45s var(--ease) both; }
@keyframes empty-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.empty__badge {
    width: 4.5rem; height: 4.5rem; margin: 0 auto var(--gap); display: grid; place-items: center;
    border-radius: 22px;
    background: linear-gradient(155deg, var(--obsidian-high), var(--obsidian-raised));
    border: 1px solid var(--gold-deep);
    box-shadow: 0 8px 28px var(--gold-glow);
}
.empty__badge img { width: 2.4rem; height: 2.4rem; margin: 0; filter: none; }
.empty--hero h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.empty__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: var(--gap-lg); }
.suggestion-chip {
    background: var(--obsidian-high); border: 1px solid var(--line); color: var(--bone-dim);
    padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.85rem;
    cursor: pointer; filter: none; box-shadow: none;
}
.suggestion-chip:hover {
    border-color: var(--gold-deep); color: var(--gold-bright); background: var(--gold-ghost);
    filter: none; box-shadow: none;
}

/* ============================================================================
   CODE BLOCKS
   ========================================================================== */
.code-block-wrapper { margin: 0.9rem 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0d0d11; }
.code-block-toolbar { display: flex; align-items: center; gap: var(--gap-sm); padding: 0.35rem 0.75rem; background: var(--obsidian-high); border-top: 1px solid var(--line); }
.code-block-lang { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); margin-right: auto; }
.code-block-toolbar button { background: transparent; border: 1px solid var(--line); color: var(--bone-dim); width: 1.9rem; height: 1.9rem; padding: 0; font-size: 0.85rem; border-radius: var(--radius-sm); filter: none; display: inline-flex; align-items: center; justify-content: center; }
.code-block-toolbar button:hover { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--gold-ghost); box-shadow: none; }
.code-block-toolbar button .btn-ico { font-size: 1em; line-height: 1; }
.code-block-toolbar button:disabled { opacity: 0.6; cursor: default; pointer-events: none; }
.code-block-toolbar button.is-busy .btn-ico { display: inline-block; animation: btn-spin 0.8s linear infinite; }
@keyframes btn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.code-block-wrapper pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; }
.code-block-wrapper code { font-family: var(--mono); font-size: 0.85rem; line-height: 1.55; background: none; border: 0; padding: 0; color: var(--bone); }

/* Visually hidden but still available to screen readers / accessible
   names - used on the code-toolbar button labels now that only icons
   show. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   COMPOSER - mobile-correct
   ========================================================================== */
.chat__foot { border-top: 1px solid var(--line); padding: var(--gap-sm) var(--gap) var(--gap-sm); background: linear-gradient(0deg, var(--obsidian-raised), transparent); }
.chat__foot > .panel { max-width: var(--read); margin: 0 auto var(--gap-sm); }

.composer {
    display: flex; align-items: flex-end; gap: var(--gap-xs);
    max-width: var(--read); margin: 0 auto;
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 0.4rem 0.4rem 0.4rem 0.5rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.composer:focus-within { border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-ghost); }
.composer__tools { display: flex; gap: 2px; align-items: center; }
.composer__tools .icon-btn:hover { border-color: var(--line); }

/* ChatGPT/Claude-style unified attach menu (paperclip → popover) */
.attach-menu { position: relative; }
.attach-menu__panel {
    position: absolute; bottom: calc(100% + 0.5rem); left: 0; z-index: 40;
    width: min(19rem, 82vw);
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 0.4rem;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
}
.attach-menu.is-open .attach-menu__panel { opacity: 1; visibility: visible; transform: none; }
.attach-menu__item {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.6rem 0.7rem; border-radius: var(--radius); border: 1px solid transparent;
    background: transparent; color: var(--bone); text-align: left; cursor: pointer;
    text-decoration: none; filter: none; box-shadow: none;
}
.attach-menu__item:hover { background: var(--obsidian-high); border-color: var(--line); filter: none; box-shadow: none; }
.attach-menu__ico { flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--gold-ghost); color: var(--gold); font-size: 1rem; }
.attach-menu__label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--bone); }
.attach-menu__hint { display: block; font-size: 0.76rem; color: var(--bone-faint); }
/* Superseded by the COMPOSER block further down. The old ::before arrow
   was still drawing on top of the new SVG icon - two arrows in one button. */
.composer__hint { text-align: center; font-size: 0.78rem; color: var(--bone-faint); margin: 0.5rem 0 0; }

.panel { background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap-sm) var(--gap); margin-bottom: var(--gap-sm); }
.panel h3 { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--gold-bright); }
.panel--files fieldset { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; }
.panel--files legend { font-size: 0.82rem; color: var(--bone-dim); padding: 0 0.4rem; font-family: var(--mono); }
.panel label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--bone); margin-bottom: 0.3rem; cursor: pointer; }
.panel input[type=checkbox] { width: auto; margin: 0; accent-color: var(--gold); }

.doc-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--obsidian-high); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; margin: 0 0.4rem 0.4rem 0; font-size: 0.82rem; }
.doc-chip .doc-meta { color: var(--bone-faint); font-size: 0.76rem; }

/* ============================================================================
   DROPZONE - modern drag-and-drop file upload (mobile-friendly)
   ========================================================================== */
.dropzone {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.4rem; text-align: center;
    border: 1.5px dashed var(--line); border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    background: var(--obsidian-high);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--gold-deep); background: var(--gold-ghost); }
.dropzone.is-dragover { border-color: var(--gold); background: var(--gold-ghost); }
.dropzone input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; margin: 0; padding: 0;
}
.dropzone__icon {
    width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--gold-ghost); color: var(--gold);
    font-size: 1.3rem; margin-bottom: 0.2rem;
}
.dropzone__title { font-weight: 600; color: var(--bone); font-size: 0.95rem; }
.dropzone__hint { color: var(--bone-dim); font-size: 0.8rem; }
.dropzone__hint em { color: var(--gold); font-style: normal; }
.dropzone__meta { color: var(--bone-faint); font-size: 0.74rem; margin-top: 0.15rem; }

/* Selected-file preview shown after a file is picked, replacing the dropzone prompt */
.dropzone__file {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.7rem 0.9rem; text-align: left;
}
.dropzone__file-icon {
    flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
    border-radius: var(--radius-sm); background: var(--gold-ghost); color: var(--gold); font-size: 1rem;
}
.dropzone__file-info { flex: 1; min-width: 0; }
.dropzone__file-name { font-size: 0.88rem; font-weight: 500; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropzone__file-size { font-size: 0.76rem; color: var(--bone-faint); }
.dropzone__file-remove {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    background: transparent; border: 1px solid var(--line); color: var(--bone-dim); font-size: 0.9rem;
    filter: none; box-shadow: none;
}
.dropzone__file-remove:hover { border-color: var(--error); color: var(--error); filter: none; box-shadow: none; }

.dropzone__progress { width: 100%; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin-top: 0.5rem; }
.dropzone__progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .2s var(--ease); }
.dropzone__status { font-size: 0.8rem; color: var(--bone-dim); margin-top: 0.4rem; }
.dropzone__status.is-error { color: var(--error); }
.dropzone__status.is-ok { color: var(--ok); }

/* ============================================================================
   MODEL PICKER - reusable model-with-description cards
   ========================================================================== */
.model-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.model-picker__option {
    position: relative; display: block; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem 0.75rem 2.6rem;
    background: var(--obsidian-raised); transition: border-color .15s var(--ease), background .15s var(--ease);
}
.model-picker__option:hover { border-color: var(--gold-deep); }
.model-picker__option input[type=radio] {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--gold); cursor: pointer;
}
.model-picker__option:has(input:checked),
.model-picker__option.is-checked { border-color: var(--gold); background: var(--gold-ghost); }
.model-picker__name { font-weight: 600; color: var(--bone); font-size: 0.96rem; }
.model-picker__desc { display: block; color: var(--bone-dim); font-size: 0.82rem; margin-top: 0.15rem; line-height: 1.4; }

/* Compact trigger button for the in-chat model switcher */
.model-switch { position: relative; }
.model-switch__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--obsidian-high); border: 1px solid var(--line); color: var(--bone);
    padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.8rem;
    cursor: pointer; white-space: nowrap; filter: none; box-shadow: none;
}
.model-switch__btn:hover { border-color: var(--gold-deep); filter: none; box-shadow: none; }
.model-switch__btn .caret { font-size: 0.65rem; color: var(--bone-faint); }
.model-switch__panel {
    position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 30;
    width: min(20rem, 88vw);
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 0.75rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.model-switch.is-open .model-switch__panel { opacity: 1; visibility: visible; transform: none; }
.model-switch__panel .model-picker__option { padding: 0.65rem 0.85rem 0.65rem 2.4rem; }
.model-switch__panel .model-picker__option input[type=radio] { left: 0.85rem; }

@media (max-width: 640px) {
    .model-switch__panel { position: fixed; left: var(--gap-sm); right: var(--gap-sm); top: auto; bottom: var(--gap-sm); width: auto; }
}

/* ============================================================================
   AUTH + LOGIN HERO (particles)
   ========================================================================== */
.auth-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--gap-lg) var(--gap); overflow: hidden; }
#particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.auth-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 20% 15%, rgba(212,175,55,0.12), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(212,175,55,0.10), transparent 45%);
}
.auth-card {
    position: relative; z-index: 2; width: 100%; max-width: 25rem; margin: 0 auto;
    background: rgba(19,19,24,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--gap-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: card-rise .5s var(--ease) both;
}
@keyframes card-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.auth-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-deep) 20%, var(--gold-bright) 50%, var(--gold-deep) 80%, transparent);
}
.auth-card__logo { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-bottom: var(--gap); }
.auth-card__badge {
    width: 4rem; height: 4rem; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 20px;
    background: linear-gradient(155deg, var(--obsidian-high), var(--obsidian-raised));
    border: 1px solid var(--gold-deep);
    box-shadow: 0 0 0 1px rgba(212,175,55,0.08) inset, 0 8px 24px var(--gold-glow);
}
.auth-card__badge img { width: 2.15rem; height: 2.15rem; display: block; }
.auth-card__word {
    font-family: var(--display); font-weight: 800; letter-spacing: 0.01em;
    font-size: 1.3rem; line-height: 1;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-card h1 { text-align: center; font-size: 1.4rem; margin-bottom: 0.3rem; }
.auth-card__tagline { text-align: center; color: var(--bone-dim); font-size: 0.88rem; margin-bottom: var(--gap-lg); }
.auth-card form { margin: 0; }
.auth-card label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--bone-faint); margin-bottom: 0.3rem; }
.auth-card input { margin-bottom: 1rem; }
.auth-card button[type=submit] { width: 100%; padding: 0.85rem; font-size: 1rem; margin-top: 0.3rem; }
.auth-card__meta { text-align: center; font-size: 0.9rem; margin-top: var(--gap); color: var(--bone-dim); }
.auth-card__meta a { font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: var(--gap-sm); margin: var(--gap) 0; color: var(--bone-faint); font-size: 0.8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.auth-divider::after { background: linear-gradient(90deg, var(--line), transparent); }
.oauth-row { display: flex; flex-direction: column; gap: 0.5rem; }
.oauth-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.7rem;
    background: var(--obsidian-high); border: 1px solid var(--line); color: var(--bone);
    border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; border-bottom: none;
}
.oauth-btn:hover { background: var(--obsidian-hover); border-color: var(--gold-deep); color: var(--gold-bright); border-bottom: none; }
.auth-hero .theme-toggle { position: absolute; top: var(--gap); right: var(--gap); z-index: 3; background: rgba(19,19,24,0.6); backdrop-filter: blur(8px); }

.company-info { position: relative; z-index: 2; max-width: var(--read); margin: var(--gap-lg) auto 0; padding: 0 var(--gap) var(--gap-lg); text-align: center; }
.company-info h2 { color: var(--gold-bright); margin-top: var(--gap); }
.company-info__tagline { font-family: var(--display); color: var(--gold); }
.company-info__about { color: var(--bone-dim); max-width: 40rem; margin: 0 auto var(--gap); }
.company-info__contact { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; color: var(--bone-dim); font-size: 0.9rem; margin-bottom: var(--gap-sm); }
.company-info__links { font-size: 0.88rem; }

/* ============================================================================
   ADMIN - product-grade shell
   ========================================================================== */
.admin { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; min-height: 100dvh; }
.admin__side { background: var(--obsidian-raised); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--gap-sm); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.admin__brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.4rem var(--gap); margin-bottom: var(--gap-sm); line-height: 0; border-bottom: 1px solid var(--line); }
.admin__brand img { height: 1.6rem; width: auto; }
.admin__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
/* The per-link rules that used to live here were written for a FLAT list of
   eight links. The nav is grouped into collapsible sections now, and those
   rules still matched the nested links and fought the newer .adminnav__body
   ones for padding and colour. Removed rather than left to argue. */
.admin__side-foot { border-top: 1px solid var(--line); margin-top: var(--gap-sm); padding-top: var(--gap-sm); font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; }
.admin__side-foot a { color: var(--bone-dim); border-bottom: none; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); }
.admin__side-foot a:hover { color: var(--gold-bright); background: var(--gold-ghost); }

.admin__main { min-width: 0; padding: var(--gap-lg); max-width: 74rem; }
.admin__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap-lg); flex-wrap: wrap; }
.admin__topbar h1 { margin: 0; }
.admin__menu-btn { display: none; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--gap-sm); margin-bottom: var(--gap-lg); }
.stat { background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap); position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-deep); }
.stat__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone-dim); margin-bottom: 0.4rem; }
.stat__value { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--bone); line-height: 1; }
.stat__sub { font-size: 0.8rem; color: var(--bone-faint); margin-top: 0.3rem; }
.stat--gold .stat__value { color: var(--gold-bright); }

.admin-card { background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap); margin-bottom: var(--gap-lg); box-shadow: var(--shadow-sm); }
.admin-card > h2 { margin-top: 0; }
.admin-card table { margin-bottom: 0; }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; border: 1px solid; }
.badge--ok { color: var(--ok); border-color: rgba(107,191,138,0.4); background: rgba(107,191,138,0.1); }
.badge--warn { color: var(--warn); border-color: rgba(224,164,88,0.4); background: rgba(224,164,88,0.1); }
.badge--error { color: var(--error); border-color: rgba(224,112,95,0.4); background: rgba(224,112,95,0.1); }
.badge--muted { color: var(--bone-dim); border-color: var(--line); background: var(--obsidian-high); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.field-help { font-size: 0.82rem; color: var(--bone-faint); margin: -0.4rem 0 var(--gap-sm); }

.imp-banner { background: linear-gradient(90deg, rgba(224,164,88,0.18), rgba(224,164,88,0.06)); border-bottom: 1px solid rgba(224,164,88,0.4); color: #EBC58C; padding: 0.6rem var(--gap); text-align: center; font-size: 0.9rem; }
.imp-banner a { color: #fff; font-weight: 600; }

.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s var(--ease); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 820px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(84vw, var(--sidebar-w)); transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); }
    .app.is-open .sidebar { transform: none; }
    .app.is-open .scrim { opacity: 1; visibility: visible; }
    .sidebar__toggle { display: inline-grid; }
    .admin { grid-template-columns: 1fr; }
    .admin__side { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(80vw, 16rem); height: 100dvh; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); }
    body.admin-open .admin__side { transform: none; }
    body.admin-open .scrim { opacity: 1; visibility: visible; }
    .admin__menu-btn { display: inline-grid; }
    .admin__main { padding: var(--gap); }
}
@media (max-width: 640px) {
    .chat__head { padding: var(--gap-xs) var(--gap-sm); gap: var(--gap-xs); }
    .chat__head select { display: none; }
    .chat__meta { display: none; }
    .model-switch__btn { padding: 0.35rem 0.55rem; font-size: 0.76rem; }
    .chat__inner { padding: var(--gap) var(--gap-sm); }
    .chat__foot { padding: var(--gap-xs) var(--gap-sm) calc(env(safe-area-inset-bottom, 0px) + var(--gap-xs)); }
    .composer { border-radius: var(--radius); }
    .composer textarea { font-size: 16px; }
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
    /* A large backdrop-filter blur recomposited every frame over a moving
       canvas is heavy on weaker phone GPUs - trade a little glass effect
       for a lot of headroom here. */
    .auth-card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(15,15,19,0.88); }
    [data-theme="light"] .auth-card { background: rgba(255,255,255,0.92); }
    .auth-hero .theme-toggle { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================================
   LIGHT THEME
   ========================================================================== */
[data-theme="light"] {
    --obsidian: #FBFAF7; --obsidian-raised: #FFFFFF; --obsidian-high: #F1EEE7; --obsidian-hover: #E9E5DB;
    --line: #E0DBCE; --line-soft: #ECE8DE;
    --gold: #97781E; --gold-bright: #7A6015; --gold-deep: #B99A38;
    --gold-ghost: rgba(151,120,30,0.10); --gold-glow: rgba(151,120,30,0.22);
    --bone: #1A1A1F; --bone-dim: #5A564E; --bone-faint: #8A857A;
    --shadow-sm: 0 1px 2px rgba(90,80,50,0.08); --shadow: 0 6px 24px rgba(90,80,50,0.10); --shadow-lg: 0 18px 50px rgba(90,80,50,0.15);
}
[data-theme="light"] body { background-image: radial-gradient(ellipse 80% 45% at 50% -12%, rgba(151,120,30,0.08), transparent 70%); }
[data-theme="light"] button, [data-theme="light"] .btn { background: linear-gradient(180deg, #C9A227, #A07E1C); border-color: #8A6D1B; color: #FFFDF6; }
[data-theme="light"] .btn--ghost { background: transparent; color: var(--bone); }
[data-theme="light"] .btn--ghost:hover { background: var(--obsidian-high); }
[data-theme="light"] .btn--danger { background: linear-gradient(180deg, #C6534A, #9F3931); color: #fff; }
[data-theme="light"] .sidebar__new { background: var(--gold-ghost); color: var(--gold-bright); }
[data-theme="light"] .code-block-wrapper { background: #F7F4EC; }
[data-theme="light"] .code-block-wrapper code { color: #2A2A2F; }
[data-theme="light"] .code-block-toolbar { background: #EDE8DC; }
[data-theme="light"] .oauth-btn { color: var(--bone); }
[data-theme="light"] .auth-card { background: rgba(255,255,255,0.82); }
[data-theme="light"] .auth-hero .theme-toggle { background: rgba(255,255,255,0.7); }
[data-theme="light"] .brand__logo, [data-theme="light"] .sidebar__logo img,
[data-theme="light"] .admin__brand img { filter: brightness(0.35) saturate(1.4); }
[data-theme="light"] .empty img { filter: brightness(0.5) saturate(1.3); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --obsidian: #FBFAF7; --obsidian-raised: #FFFFFF; --obsidian-high: #F1EEE7; --obsidian-hover: #E9E5DB;
        --line: #E0DBCE; --line-soft: #ECE8DE;
        --gold: #97781E; --gold-bright: #7A6015; --gold-deep: #B99A38;
        --gold-ghost: rgba(151,120,30,0.10); --gold-glow: rgba(151,120,30,0.22);
        --bone: #1A1A1F; --bone-dim: #5A564E; --bone-faint: #8A857A;
    }
    :root:not([data-theme]) body { background-image: radial-gradient(ellipse 80% 45% at 50% -12%, rgba(151,120,30,0.08), transparent 70%); }
    :root:not([data-theme]) .brand__logo, :root:not([data-theme]) .sidebar__logo img { filter: brightness(0.35) saturate(1.4); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================================
   SWITCH ROW - labelled checkbox rows for admin toggles
   ========================================================================== */
.switch-row {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.switch-row:last-of-type { border-bottom: none; }
.switch-row input[type=checkbox] { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.switch-row__title { display: block; font-weight: 600; color: var(--bone); }
.switch-row__hint { display: block; font-size: 0.82rem; color: var(--bone-dim); margin-top: 0.15rem; line-height: 1.4; }

/* ============================================================================
   PROFILE PAGE
   ========================================================================== */
.profile-hero {
    display: flex; align-items: center; gap: var(--gap);
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--gap); margin-bottom: var(--gap-lg);
    position: relative; overflow: hidden;
}
.profile-hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), transparent);
}
.profile-hero__avatar {
    flex: 0 0 auto; width: 4.25rem; height: 4.25rem; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 1.5rem;
    color: var(--obsidian);
    background: linear-gradient(140deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
    box-shadow: 0 6px 20px var(--gold-glow);
    letter-spacing: 0.02em;
}
.profile-hero__meta { min-width: 0; }
.profile-hero__meta h2 { margin: 0 0 0.15rem; font-size: 1.2rem; }
.profile-hero__meta p { margin: 0 0 0.5rem; color: var(--bone-dim); font-size: 0.9rem; word-break: break-word; }
.profile-hero__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.profile-section-title {
    font-family: var(--display); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--bone-faint);
    margin: var(--gap-lg) 0 var(--gap-sm); padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line-soft);
}

.stat-card {
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); padding: var(--gap-sm) var(--gap);
    display: flex; flex-direction: column; gap: 0.1rem;
}
.stat-card__value { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--gold-bright); }
.stat-card__label { font-size: 0.78rem; color: var(--bone-faint); text-transform: uppercase; letter-spacing: 0.05em; }

.form-hint { font-size: 0.8rem; color: var(--bone-faint); margin: 0.15rem 0 0.75rem; line-height: 1.45; }

.card--danger { border-color: rgba(224,112,95,0.35); }
.danger-summary {
    cursor: pointer; color: var(--error); font-size: 0.9rem; font-weight: 600;
    padding: 0.35rem 0; list-style: none;
}
.danger-summary::-webkit-details-marker { display: none; }
.danger-summary::before { content: '\25B8 '; }
details[open] .danger-summary::before { content: '\25BE '; }
.btn--danger {
    background: rgba(224,112,95,0.12); border: 1px solid rgba(224,112,95,0.5); color: var(--error);
}
.btn--danger:hover { background: rgba(224,112,95,0.2); box-shadow: none; }

@media (max-width: 560px) {
    .profile-hero { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================================
   SIDEBAR - search, folders, popover menu
   Everything here reads from the design tokens, so the light theme and the
   prefers-color-scheme fallback are inherited rather than re-declared.
   ========================================================================== */

/* The scroll container moved out to a wrapper so search results and the
   browse view can swap places inside one scrolling area. */
.sidebar__scroll { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar__scroll .sidebar__list { flex: 0 0 auto; overflow: visible; }

/* ---- Search box -------------------------------------------------------- */
.sidebar__search { position: relative; display: flex; align-items: center; }
.sidebar__search input[type=search] {
    margin-bottom: 0;
    padding: 0.5rem 2rem 0.5rem 2rem;
    font-size: 0.88rem;
    background: var(--obsidian);
    border-radius: var(--radius-pill);
}
.sidebar__search input[type=search]::-webkit-search-cancel-button { display: none; }
.sidebar__search-ico {
    position: absolute; left: 0.65rem; font-size: 0.78rem;
    color: var(--bone-faint); pointer-events: none; line-height: 1;
}
.sidebar__search-clear {
    position: absolute; right: 0.35rem;
    display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0;
    background: transparent; border: none; border-radius: var(--radius-pill);
    color: var(--bone-faint); font-size: 0.7rem; cursor: pointer;
    filter: none; box-shadow: none;
}
.sidebar__search-clear:hover { background: var(--obsidian-high); color: var(--bone); filter: none; box-shadow: none; }
/* The display rule above outranks the browser's own [hidden]{display:none},
   so the hidden state has to be restated at the same specificity - without
   this the clear button sits in an empty search box. */
.sidebar__search-clear[hidden] { display: none; }

/* ---- Search results ---------------------------------------------------- */
.sidebar__status {
    margin: 0; padding: 0.7rem 0.8rem 0.35rem;
    font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
    font-family: var(--display); color: var(--bone-faint);
}
.sidebar__item--result { align-items: stretch; }
.sidebar__link--result {
    display: flex; flex-direction: column; gap: 0.15rem;
    white-space: normal; padding: 0.55rem 0.7rem;
}
.sidebar__result-title {
    display: block; font-size: 0.9rem; color: var(--bone-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__link--result:hover .sidebar__result-title { color: var(--bone); }
.sidebar__result-snippet {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 0.78rem; line-height: 1.45; color: var(--bone-faint);
}
.sidebar__result-role { color: var(--gold-deep); font-weight: 600; }
.sidebar__list mark {
    background: var(--gold-ghost); color: var(--gold-bright);
    padding: 0 0.1em; border-radius: 2px;
}

/* ---- Folders ----------------------------------------------------------- */
.sidebar__section-add {
    margin-left: auto; padding: 0; width: 1.3rem; height: 1.3rem;
    display: inline-grid; place-items: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bone-faint); font-size: 0.8rem; line-height: 1; cursor: pointer;
    filter: none; box-shadow: none;
}
.sidebar__section-add:hover {
    background: var(--gold-ghost); color: var(--gold-bright);
    border-color: var(--gold-deep); filter: none; box-shadow: none;
}

.sidebar__folder {
    display: flex; align-items: center; gap: 2px; margin-bottom: 2px;
    border-radius: var(--radius-sm); position: relative;
}
.sidebar__folder-head {
    display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0;
    padding: 0.5rem 0.6rem; margin: 0;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bone-dim); font-family: var(--body); font-size: 0.88rem; font-weight: 500;
    text-align: left; cursor: pointer; line-height: 1.2;
    filter: none; box-shadow: none;
}
.sidebar__folder-head:hover {
    background: var(--obsidian-high); color: var(--bone);
    filter: none; box-shadow: none; border-color: transparent;
}
.sidebar__caret {
    flex: 0 0 auto; font-size: 0.6rem; color: var(--bone-faint);
    transition: transform .15s var(--ease);
}
.sidebar__folder.is-collapsed .sidebar__caret { transform: rotate(-90deg); }
.sidebar__dot {
    flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
.sidebar__folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__folder-count {
    flex: 0 0 auto; min-width: 1.4rem; padding: 0.05rem 0.35rem;
    background: var(--obsidian-high); border-radius: var(--radius-pill);
    font-size: 0.7rem; color: var(--bone-faint); text-align: center;
}

.sidebar__folder-body { display: block; padding-left: 0.65rem; }
.sidebar__folder-body[hidden] { display: none; }
.sidebar__list--nested {
    margin: 0; padding: 0 0 0 0.35rem; list-style: none;
    border-left: 1px solid var(--line-soft);
}
.sidebar__empty {
    padding: 0.45rem 0.7rem; font-size: 0.78rem; color: var(--bone-faint); font-style: italic;
}

/* ---- Drag and drop ----------------------------------------------------- */
.sidebar__item.is-dragging, .sidebar__folder.is-dragging { opacity: 0.45; }
.sidebar__folder.is-droptarget, .sidebar__section.is-droptarget {
    background: var(--gold-ghost);
    box-shadow: inset 0 0 0 1px var(--gold-deep);
    border-radius: var(--radius-sm);
}
[data-conv-item] { cursor: grab; }
[data-conv-item].is-dragging { cursor: grabbing; }

/* ---- Shared popover menu ----------------------------------------------- */
.popmenu {
    position: fixed; z-index: 120; min-width: 12rem; max-width: 16rem;
    padding: 0.3rem; background: var(--obsidian-raised);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 70vh; overflow-y: auto;
}
.popmenu[hidden] { display: none; }
.popmenu__heading {
    padding: 0.4rem 0.55rem 0.3rem;
    font-family: var(--display); font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--bone-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.popmenu__item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.55rem; margin: 0;
    background: transparent; border: none; border-radius: var(--radius-sm);
    color: var(--bone-dim); font-family: var(--body); font-size: 0.86rem; font-weight: 500;
    text-align: left; cursor: pointer; line-height: 1.3;
    filter: none; box-shadow: none;
}
.popmenu__item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popmenu__item:hover { background: var(--obsidian-high); color: var(--bone); filter: none; box-shadow: none; }
.popmenu__item.is-active { color: var(--gold-bright); background: var(--gold-ghost); }
.popmenu__item--danger { color: var(--error); }
.popmenu__item--danger:hover { background: rgba(224,112,95,0.10); color: var(--error); }
.popmenu__swatches {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    padding: 0.35rem 0.55rem 0.5rem;
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
    margin: 0.25rem 0;
}
.popmenu__swatch {
    width: 1.15rem; height: 1.15rem; padding: 0; margin: 0;
    border: 1px solid rgba(0,0,0,0.25); border-radius: 50%;
    cursor: pointer; filter: none; box-shadow: none;
}
.popmenu__swatch:hover { transform: scale(1.15); filter: none; box-shadow: 0 0 0 2px var(--gold-ghost); }

/* On a touch screen the row actions are the only way to file a chat, so
   they get a bigger tap target and drag is effectively retired. */
@media (max-width: 900px) {
    .sidebar__action { width: 2rem; height: 2rem; }
    .popmenu { min-width: 14rem; }
    .popmenu__item { padding: 0.65rem 0.6rem; }
}

/* ============================================================================
   CHAT INTERFACE - code blocks, live streaming, retry, scroll affordance
   Appended block: overrides the earlier code-block rules by cascade order.
   ========================================================================== */

/* ---- Code blocks: header on top, numbers, wrap, collapse ---------------- */
.code-block-wrapper {
    margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: var(--code-bg, #0d0d11); position: relative;
}
.code-block-head {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    background: var(--obsidian-high); border-bottom: 1px solid var(--line);
}
.code-block-lang {
    font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--gold); flex: 0 0 auto;
}
/* The file path the model labelled the block with. It gets the flexible
   space and truncates from the left, because when a path is too long the
   filename at the end is the part worth keeping. */
.code-block-file {
    font-family: var(--mono); font-size: 0.76rem; color: var(--bone-dim);
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; direction: rtl; text-align: left;
}
.code-block-count {
    font-size: 0.7rem; color: var(--bone-faint); flex: 0 0 auto; white-space: nowrap;
    margin-left: auto;
}
.code-block-file + .code-block-count { margin-left: 0; }
.code-block-writing {
    font-size: 0.7rem; color: var(--gold); flex: 0 0 auto; font-style: italic;
    margin-left: 0.4rem;
}
.code-block-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.code-block-actions button {
    background: transparent; border: 1px solid transparent; color: var(--bone-faint);
    width: 1.75rem; height: 1.75rem; padding: 0; font-size: 0.8rem;
    border-radius: var(--radius-sm); filter: none; box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.code-block-actions button:hover {
    color: var(--gold-bright); border-color: var(--gold-deep);
    background: var(--gold-ghost); box-shadow: none; filter: none;
}
.code-block-actions button.is-active { color: var(--gold-bright); background: var(--gold-ghost); border-color: var(--gold-deep); }
.code-block-actions button:disabled { opacity: 0.6; cursor: default; pointer-events: none; }
.code-block-actions button.is-busy .btn-ico { display: inline-block; animation: btn-spin 0.8s linear infinite; }
.code-block-actions .btn-ico { font-size: 1em; line-height: 1; }

/* Numbers live in their own column so a copy/paste of the code doesn't
   pick them up. */
.code-block-body { display: flex; align-items: stretch; overflow: hidden; }
.code-line-numbers {
    flex: 0 0 auto; padding: 0.9rem 0.6rem 0.9rem 0.85rem; margin: 0;
    font-family: var(--mono); font-size: 0.82rem; line-height: 1.55;
    color: var(--bone-faint); opacity: 0.5; text-align: right;
    white-space: pre; user-select: none; -webkit-user-select: none;
    border-right: 1px solid var(--line-soft); background: rgba(0,0,0,0.12);
}
.code-block-wrapper pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.code-block-wrapper code {
    font-family: var(--mono); font-size: 0.82rem; line-height: 1.55;
    background: none; border: 0; padding: 0; color: var(--bone);
}
.code-block-wrapper.is-wrapped pre { overflow-x: visible; }
.code-block-wrapper.is-wrapped code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Long blocks start folded so one 400-line file doesn't bury the reply. */
.code-block-wrapper.is-collapsed .code-block-body {
    max-height: 22rem;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.code-block-expand {
    display: block; width: 100%; margin: 0; padding: 0.5rem;
    background: var(--obsidian-high); border: 0; border-top: 1px solid var(--line);
    color: var(--gold); font-family: var(--display); font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer;
    filter: none; box-shadow: none; border-radius: 0;
}
.code-block-expand:hover { background: var(--gold-ghost); color: var(--gold-bright); filter: none; box-shadow: none; }

/* ---- Streaming reply ---------------------------------------------------- */
/* The streaming node now holds rendered markdown, not raw text, so the
   pre-wrap that used to be needed here would double every blank line. */
#streaming-content {
    background: var(--obsidian-raised); border: 1px solid var(--line); border-left: 3px solid var(--gold-deep);
    border-radius: var(--radius); padding: 0.9rem 1.1rem; line-height: 1.65; min-height: 1.5rem;
    white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
#streaming-content::after { content: none; }
.stream-caret {
    display: inline-block; width: 0.5em; height: 1em; vertical-align: text-bottom;
    background: var(--gold); margin-left: 1px; animation: blink 1s steps(2) infinite;
}
/* Markdown inside the streaming node gets the same treatment as a finished
   message, so nothing visibly changes when the reply completes. */
#streaming-content > *:first-child { margin-top: 0; }
#streaming-content > *:last-child { margin-bottom: 0; }
#streaming-content .md-heading { color: var(--gold-bright); margin: 0.9rem 0 0.4rem; font-size: 1.05rem; }
#streaming-content .md-list { margin: 0.3rem 0 0.6rem; padding-left: 1.4rem; }
#streaming-content .md-list li { margin-bottom: 0.25rem; }
#streaming-content .md-quote { border-left: 3px solid var(--gold-deep); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0.5rem 0; color: var(--bone-dim); }
#streaming-content .md-rule { border: 0; border-top: 1px solid var(--line); margin: 0.9rem 0; }
#streaming-content .inline-code {
    background: var(--obsidian-high); border: 1px solid var(--line-soft); border-radius: 3px;
    padding: 0.1em 0.4em; color: var(--gold-bright); font-family: var(--mono); font-size: 0.86em;
}
#streaming-content strong { color: var(--bone); font-weight: 700; }

/* ---- Failed message + retry -------------------------------------------- */
.message.is-failed .message-content {
    border-color: var(--error); border-left-color: var(--error);
    background: rgba(224,112,95,0.07);
}
.retry-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; flex-wrap: wrap; }
.retry-note { font-size: 0.8rem; color: var(--error); }
.retry-btn {
    background: transparent; border: 1px solid var(--gold-deep); color: var(--gold-bright);
    padding: 0.25rem 0.8rem; font-size: 0.8rem; filter: none; box-shadow: none;
}
.retry-btn:hover { background: var(--gold-ghost); filter: none; box-shadow: none; }

/* ---- Jump to latest ----------------------------------------------------- */
.chat { position: relative; }
.jump-latest {
    position: absolute; bottom: 0; left: 50%; z-index: 30;
    transform: translate(-50%, 0.5rem);
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.85rem; margin: 0;
    background: var(--obsidian-raised); border: 1px solid var(--gold-deep);
    border-radius: var(--radius-pill); color: var(--gold-bright);
    font-size: 0.78rem; cursor: pointer; box-shadow: var(--shadow-lg); filter: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.jump-latest.is-visible {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -0.5rem);
}
.jump-latest:hover { background: var(--gold-ghost); filter: none; box-shadow: var(--shadow-lg); }

/* ---- Light theme -------------------------------------------------------- */
[data-theme="light"] .code-block-wrapper { background: #F7F4EC; }
[data-theme="light"] .code-line-numbers { background: rgba(0,0,0,0.04); }

@media (max-width: 900px) {
    .code-block-actions button { width: 2rem; height: 2rem; }
    .code-block-file { display: none; }
    .code-line-numbers { padding-left: 0.5rem; padding-right: 0.45rem; font-size: 0.76rem; }
    .code-block-wrapper code { font-size: 0.78rem; }
}

/* ============================================================================
   SHARE - public read-only page, and the share modal in chat
   ========================================================================== */

/* ---- Share modal -------------------------------------------------------- */
.share-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.share-modal[hidden] { display: none; }
.share-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.share-modal__panel {
    position: relative; width: 100%; max-width: 30rem;
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.4rem;
}
.share-modal__panel h2 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--gold-bright); }
.share-modal__note { font-size: 0.84rem; color: var(--bone-faint); line-height: 1.5; margin: 0 0 1rem; }
.share-modal__loading { color: var(--bone-faint); font-style: italic; }
.share-modal__error { color: var(--error); }
.share-modal__ok { color: var(--gold-bright); font-size: 0.85rem; }
.share-modal__linkrow { display: flex; gap: 0.4rem; align-items: stretch; margin: 0.6rem 0; }
.share-modal__link {
    flex: 1; min-width: 0; margin: 0; font-family: var(--mono); font-size: 0.8rem;
    background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem; color: var(--bone);
}
.share-modal__views { font-size: 0.78rem; color: var(--bone-faint); margin: 0.2rem 0 0; }
.share-modal__sub { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.share-modal__actions { display: flex; justify-content: flex-end; margin-top: 1.2rem; }
.btn--ghost {
    background: transparent; border: 1px solid var(--line); color: var(--bone-dim);
    filter: none; box-shadow: none;
}
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-bright); background: var(--gold-ghost); filter: none; box-shadow: none; }
.btn--danger { background: transparent; border: 1px solid var(--error); color: var(--error); filter: none; box-shadow: none; }
.btn--danger:hover { background: rgba(224,112,95,0.12); filter: none; box-shadow: none; }
.btn--sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; }

/* ---- Public share page -------------------------------------------------- */
/* Its own layout: this page has no sidebar and no app grid, because a
   visitor has no account and nothing to navigate to. */
.share-page { display: block; min-height: 100vh; background: var(--obsidian); }
.share-head {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line);
    background: var(--obsidian-raised);
}
.share-head__brand img { height: 1.6rem; display: block; }
.share-head__badge {
    font-family: var(--display); font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--bone-faint);
    border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.2rem 0.6rem;
}
.share-head__cta { margin-left: auto; }
.share-main { max-width: 46rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.share-title { margin: 0 0 0.3rem; font-size: 1.5rem; }
.share-meta { color: var(--bone-faint); font-size: 0.82rem; margin: 0 0 2rem; }
.share-thread .message { margin-bottom: 1.4rem; }
.share-foot {
    margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
    text-align: center;
}
.share-foot p { color: var(--bone-faint); margin-bottom: 0.7rem; }
.share-empty { text-align: center; padding: 4rem 1rem; }
.share-empty h1 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.share-empty p { color: var(--bone-faint); margin-bottom: 1rem; }

/* ---- My files list ------------------------------------------------------ */
.file-list { list-style: none; padding: 0; margin: 1rem 0; }
.file-list li {
    padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.file-list__meta { color: var(--bone-faint); font-size: 0.8rem; flex: 1; }
/* An upload the cleanup job has removed. The row stays so the name is
   still visible; the strike-through says the contents are not. */
.file-list li.is-expired { opacity: 0.65; }
.file-list li.is-expired strong { text-decoration: line-through; }

@media (max-width: 700px) {
    .share-modal__linkrow { flex-direction: column; }
    .share-head { flex-wrap: wrap; gap: 0.6rem; }
}

/* ============================================================================
   COMPOSER + ATTACH - friendlier upload affordances
   ========================================================================== */

/* Drop anywhere on the conversation. The overlay is the only signal that
   dropping is possible at all, so it has to be unmissable. */
.chat-drop-overlay {
    position: absolute; inset: 0; z-index: 60;
    display: grid; place-items: center; padding: 1.5rem;
    background: rgba(10,10,14,0.82); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .12s var(--ease), visibility .12s;
    pointer-events: none;
}
.chat-drop-overlay.is-active { opacity: 1; visibility: visible; }
.chat-drop-overlay__inner {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    border: 2px dashed var(--gold-deep); border-radius: var(--radius-lg);
    padding: 2.5rem 3rem; color: var(--gold-bright);
    font-family: var(--display); font-size: 1rem; text-align: center;
    background: var(--gold-ghost);
}
.chat-drop-overlay__ico { font-size: 2rem; }

/* Attach panels needed a way out. */
.panel { position: relative; }
.panel__close {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 1.9rem; height: 1.9rem; padding: 0;
    display: inline-grid; place-items: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bone-faint); font-size: 0.8rem; cursor: pointer;
    filter: none; box-shadow: none;
}
.panel__close:hover {
    background: var(--obsidian-high); color: var(--bone);
    border-color: var(--line); filter: none; box-shadow: none;
}

/* The paperclip is the entry point to every attachment, so it should look
   like a control rather than dissolve into the composer edge. */

.composer__hint { font-size: 0.74rem; color: var(--bone-faint); text-align: center; margin: 0.4rem 0 0; }

@media (max-width: 700px) {
    /* Enter-to-send is a keyboard idea; on a phone the hint is noise and
       the composer needs the height back. */
    .composer__hint { display: none; }
    .chat-drop-overlay__inner { padding: 1.6rem 1.4rem; font-size: 0.9rem; }
    .composer__send { width: 44px; height: 44px; }
}

/* ============================================================================
   PWA - install / update banner
   ========================================================================== */
.app-banner {
    position: fixed; left: 50%; bottom: 1rem; z-index: 300;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.7rem;
    width: min(30rem, calc(100vw - 1.5rem));
    padding: 0.7rem 0.8rem;
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: app-banner-in .22s var(--ease);
}
@keyframes app-banner-in {
    from { opacity: 0; transform: translate(-50%, 0.6rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.app-banner--update { border-color: var(--gold-deep); }
.app-banner__icon { width: 2rem; height: 2rem; border-radius: var(--radius-sm); flex: 0 0 auto; }
.app-banner__text { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--bone-dim); line-height: 1.4; }
.app-banner__text strong { color: var(--bone); }
.app-banner .btn { flex: 0 0 auto; }
.app-banner__dismiss {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; padding: 0; margin: 0;
    display: inline-grid; place-items: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bone-faint); font-size: 0.75rem; cursor: pointer;
    filter: none; box-shadow: none;
}
.app-banner__dismiss:hover {
    background: var(--obsidian-high); color: var(--bone);
    border-color: var(--line); filter: none; box-shadow: none;
}

/* An installed app on iOS draws under the status bar and home indicator,
   so the safe-area insets have to be respected or the composer sits
   underneath the bar and the header under the notch. */
@media (display-mode: standalone) {
    .app { padding-top: env(safe-area-inset-top); }
    .chat__foot { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
    .sidebar__foot { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
    .app-banner { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
    .app-banner { width: calc(100vw - 1rem); bottom: 0.5rem; gap: 0.5rem; padding: 0.6rem; }
    .app-banner__text { font-size: 0.8rem; }
}

/* ============================================================================
   ADMIN - accordion nav, explain blocks, cards, tables, stats, meters
   ========================================================================== */

/* ---- Accordion sidebar --------------------------------------------------- */
/* Accordion navigation. The previous rules were replaced rather than added
   to: two generations of nav CSS in one file is how the last set ended up
   fighting over padding and colour. */
/* Every section is open by default now, so the boxing that made ONE open
   section stand out just made five of them heavy: five borders, five
   backgrounds and five lots of padding pushed the nav past 1000px, which put
   Pricing and Configuration below the fold on a phone. The grouping is now
   carried by the header and the rail down the links, which is enough. */
.adminnav__section {
    border: 0; border-radius: var(--radius);
    margin-bottom: 0;
}
.adminnav__section.is-open { background: transparent; }

.adminnav__head {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.4rem 0.5rem; margin: 0;
    background: transparent; border: 0; border-radius: var(--radius);
    color: var(--bone-dim); text-align: left; cursor: pointer;
    filter: none; box-shadow: none;
}
.adminnav__head:hover { color: var(--bone); background: var(--obsidian-high); filter: none; box-shadow: none; }
.adminnav__head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.adminnav__badge {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm);
    display: grid; place-items: center;
    background: var(--obsidian-high); border: 1px solid var(--line);
    color: var(--bone-dim); transition: all .15s var(--ease);
}
.adminnav__ico { display: block; }
.adminnav__section.is-open .adminnav__badge,
.adminnav__section.has-active .adminnav__badge {
    background: var(--gold-ghost); border-color: var(--gold-deep); color: var(--gold);
}

.adminnav__text { flex: 1 1 auto; min-width: 0; }
.adminnav__label {
    display: block; font-size: 0.86rem; font-weight: 600; color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The description is what makes a COLLAPSED section still useful: the label
   alone says "Configuration", which could be anything. */
.adminnav__desc {
    display: block; font-size: 0.7rem; line-height: 1.35; color: var(--bone-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adminnav__section.has-active .adminnav__label { color: var(--gold-bright); }

/* Was 0.6, which read as decoration next to a bold label. These headers are
   the only way to collapse a section, so the control has to look like one. */
.adminnav__caret { flex: 0 0 auto; opacity: 0.85; transition: transform .18s var(--ease); }

/* The description says what is inside a section. Once the section is open you
   can read the actual links instead, so it stops earning its ~16px. Hiding it
   while open is what buys the room for every section to be open at once. */
.adminnav__section.is-open .adminnav__desc { display: none; }
.adminnav__section:not(.is-open) .adminnav__caret { transform: rotate(-90deg); }

.adminnav__body { display: none; padding: 0 0.35rem 0.3rem 0.5rem; }
.adminnav__section.is-open .adminnav__body { display: block; }

/* A rail down the left of the open group, so the child links read as
   belonging to the section above them rather than floating loose. */
.adminnav__body { position: relative; }
.adminnav__body::before {
    content: ''; position: absolute; left: 1.25rem; top: 0.1rem; bottom: 0.45rem;
    width: 1px; background: var(--line);
}
.adminnav__body a {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.3rem 0.6rem 0.3rem 1.6rem;
    border-radius: var(--radius-sm); border-bottom: none;
    color: var(--bone-dim); font-size: 0.84rem; position: relative;
    min-width: 0;
}
.adminnav__body a:hover { background: var(--obsidian-high); color: var(--bone); border-bottom: none; }
.adminnav__item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adminnav__dot {
    position: absolute; left: 1.05rem; width: 0.42rem; height: 0.42rem;
    border-radius: 50%; background: var(--line);
    box-shadow: 0 0 0 3px var(--obsidian-raised);
    transition: background .15s var(--ease);
}
.adminnav__body a:hover .adminnav__dot { background: var(--bone-faint); }
.adminnav__body a.is-active {
    background: var(--gold-ghost); color: var(--gold-bright); font-weight: 600;
}
.adminnav__body a.is-active .adminnav__dot { background: var(--gold); }

/* ---- Explain block ------------------------------------------------------- */
/* The teaching panel at the top of admin screens. Distinct from an alert:
   an alert reports a condition, this explains how something works. */
.explain {
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-left: 3px solid var(--gold-deep); border-radius: var(--radius);
    padding: 1rem 1.2rem; margin: 0 0 1.6rem;
}
.explain__title { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--gold-bright); }
.explain p { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.6; color: var(--bone-dim); }
.explain p:last-child { margin-bottom: 0; }
.explain__list { margin: 0 0 0.6rem; padding-left: 1.3rem; font-size: 0.88rem; line-height: 1.65; color: var(--bone-dim); }
.explain__list li { margin-bottom: 0.35rem; }
.explain__example {
    background: var(--obsidian-high); border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem; font-size: 0.85rem !important;
}

/* ---- Cards --------------------------------------------------------------- */
.card {
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 0 0 1.6rem;
}
.card__title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.35rem; font-size: 1.05rem; }
.card__title .ico { color: var(--gold); font-size: 0.9rem; }
.card__blurb { margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--bone-faint); line-height: 1.55; }
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* ---- Forms with help text ------------------------------------------------ */
.stack-form { display: block; }
.field { margin-bottom: 1.5rem; }
.field:last-of-type { margin-bottom: 1rem; }
.field > label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--bone); }
.field input[type=text], .field input[type=number], .field select, .field textarea { margin-bottom: 0; width: 100%; }
.field__help {
    margin: 0.45rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--bone-faint);
}
.field__help strong { color: var(--bone-dim); }
.field__suggest { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--gold-deep); }
.field__key { margin: 0.3rem 0 0; font-size: 0.72rem; color: var(--bone-faint); }
.field__key code, .field__suggest code {
    background: var(--obsidian-high); padding: 0.1em 0.35em; border-radius: 3px; font-family: var(--mono);
}
/* Settings that can take the platform down get a visible edge. */
.field--danger {
    border-left: 3px solid var(--error); padding-left: 0.9rem;
    background: rgba(224,112,95,0.04); border-radius: var(--radius-sm);
    padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.check { display: flex; align-items: flex-start; gap: 0.55rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.check input[type=checkbox] { margin: 0.15rem 0 0; width: auto; flex: 0 0 auto; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.check-grid .check { font-weight: 500; }
.input-row { display: flex; align-items: stretch; gap: 0.4rem; }
.input-row input { flex: 1; min-width: 0; }
.input-prefix, .input-suffix {
    display: inline-flex; align-items: center; padding: 0 0.7rem;
    background: var(--obsidian-high); border: 1px solid var(--line);
    border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--bone-faint); white-space: nowrap;
}
.form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.2rem; flex-wrap: wrap; }
.inline-form { display: inline-block; margin: 0; }

/* ---- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-bottom: 1.6rem; }
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th {
    text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line);
    font-family: var(--display); font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--bone-faint); white-space: nowrap;
}
.table td { padding: 0.75rem 0.7rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table--compact td, .table--compact th { padding: 0.45rem 0.5rem; font-size: 0.82rem; }
.table__total td { border-top: 1px solid var(--line); background: var(--obsidian-high); }
.row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.muted-sm { font-size: 0.78rem; color: var(--bone-faint); line-height: 1.45; }
.mono { font-family: var(--mono); }

/* ---- Pills --------------------------------------------------------------- */
.pill {
    display: inline-block; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill);
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--obsidian-high); color: var(--bone-faint); border: 1px solid var(--line);
    vertical-align: middle;
}
.pill--gold { background: var(--gold-ghost); color: var(--gold-bright); border-color: var(--gold-deep); }
.pill--ok   { background: rgba(107,191,138,0.12); color: #6BBF8A; border-color: rgba(107,191,138,0.4); }
.pill--warn { background: rgba(224,164,88,0.12); color: #E0A458; border-color: rgba(224,164,88,0.4); }

/* ---- Stats --------------------------------------------------------------- */
.stat__note { margin-top: 0.25rem; font-size: 0.72rem; color: var(--bone-faint); line-height: 1.35; }

/* ---- Attention list ------------------------------------------------------ */
.attention { list-style: none; margin: 0; padding: 0; }
.attention__item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; border-radius: var(--radius-sm);
    font-size: 0.88rem; border: 1px solid var(--line);
}
.attention__item:last-child { margin-bottom: 0; }
.attention__item--error { border-color: var(--error); background: rgba(224,112,95,0.07); }
.attention__item--warn  { border-color: rgba(224,164,88,0.5); background: rgba(224,164,88,0.06); }

/* ---- Meter + bar chart --------------------------------------------------- */
.meter { height: 0.4rem; background: var(--obsidian-high); border-radius: var(--radius-pill); overflow: hidden; min-width: 5rem; }
.meter__fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

.bars {
    display: flex; align-items: flex-end; gap: 0.3rem; height: 10rem;
    padding: 0.8rem; margin-bottom: 1.6rem;
    background: var(--obsidian-raised); border: 1px solid var(--line); border-radius: var(--radius);
    overflow-x: auto;
}
.bars__col { flex: 1; min-width: 1.6rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars__bar { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 2px 2px 0 0; min-height: 2px; }
.bars__label { margin-top: 0.35rem; font-size: 0.62rem; color: var(--bone-faint); text-align: center; white-space: nowrap; }

/* ---- Range tabs ---------------------------------------------------------- */
.range-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.range-tab {
    padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
    font-size: 0.82rem; color: var(--bone-dim); text-decoration: none;
}
.range-tab:hover { border-color: var(--gold-deep); color: var(--gold-bright); }
.range-tab.is-active { background: var(--gold-ghost); border-color: var(--gold-deep); color: var(--gold-bright); }

/* ============================================================================
   USER - plan and allowance on the profile page
   ========================================================================== */
.plan-card {
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
}
.plan-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.plan-card__name { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--gold-bright); }
.plan-card__desc { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--bone-faint); }
.plan-card__price { font-size: 1.05rem; font-weight: 700; color: var(--bone); white-space: nowrap; }
.plan-card__period { font-size: 0.75rem; font-weight: 400; color: var(--bone-faint); }
.plan-card__note { margin: 0.8rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--bone-faint); }

.allowance__bar { height: 0.6rem; background: var(--obsidian-high); border-radius: var(--radius-pill); overflow: hidden; }
.allowance__fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .3s var(--ease); }
.allowance__fill.is-warn { background: linear-gradient(90deg, #C98A3A, #E0A458); }
.allowance__fill.is-full { background: linear-gradient(90deg, #B4543F, var(--error)); }
.allowance__figures { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.45rem; font-size: 0.8rem; color: var(--bone-faint); }

/* ---- Light theme --------------------------------------------------------- */
[data-theme="light"] .explain__example,
[data-theme="light"] .table__total td { background: rgba(0,0,0,0.04); }

@media (max-width: 900px) {
    .col-2 { grid-template-columns: 1fr; }
    .card { padding: 1rem; }
    .field--danger { padding-left: 0.7rem; }
    .plan-card__head { flex-direction: column; }
}

/* ---- "Thinking…" state for reasoning models ------------------------------
   Shown while the model is working but has not written anything yet. Without
   it the reply area is genuinely empty for tens of seconds, which reads as a
   frozen app rather than a model taking its time. */
.stream-thinking {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.6rem; padding: 0.55rem 0.9rem;
    background: var(--obsidian-high); border: 1px solid var(--line-soft);
    border-radius: var(--radius-pill);
    font-size: 0.84rem; color: var(--bone-faint); width: fit-content;
}
.stream-thinking__dots { display: inline-flex; gap: 0.22rem; }
.stream-thinking__dots i {
    width: 0.32rem; height: 0.32rem; border-radius: 50%;
    background: var(--gold); display: inline-block;
    animation: thinking-pulse 1.2s ease-in-out infinite;
}
.stream-thinking__dots i:nth-child(2) { animation-delay: .18s; }
.stream-thinking__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes thinking-pulse {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .stream-thinking__dots i { animation: none; opacity: 0.7; }
}

/* ============================================================================
   COMPOSER - text box above, controls on a bar beneath
   The model picker now lives with the message being written, not in the page
   header, and opens UPWARD since it sits at the bottom of the screen.
   ========================================================================== */
.composer {
    display: block;                      /* was a flex row; now stacked */
    padding: 0.65rem 0.75rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background: var(--obsidian-raised);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.composer:focus-within {
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 3px var(--gold-ghost);
}
.composer textarea {
    width: 100%; margin: 0 0 0.4rem;
    padding: 0.35rem 0.45rem;
    background: transparent; border: 0; border-radius: 0;
    resize: none; min-height: 2.2rem; max-height: 40vh;
    font-size: 0.98rem; line-height: 1.5; color: var(--bone);
}
.composer textarea:focus { outline: none; box-shadow: none; border: 0; }
.composer textarea::placeholder { color: var(--bone-faint); }

.composer__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.composer__bar-left, .composer__bar-right { display: flex; align-items: center; gap: 0.4rem; }

/* The "+" - a plus reads as "add something", where a paperclip reads as
   "attach a document" and undersells images. */
.composer__plus {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; padding: 0; margin: 0;
    background: transparent; border: 1px solid var(--line);
    border-radius: 50%; color: var(--bone-dim); cursor: pointer;
    filter: none; box-shadow: none; transition: all .15s var(--ease);
}
.composer__plus:hover {
    background: var(--obsidian-high); color: var(--gold-bright);
    border-color: var(--gold-deep); filter: none; box-shadow: none;
}
.attach-menu.is-open .composer__plus {
    background: var(--gold-ghost); color: var(--gold-bright); border-color: var(--gold-deep);
    transform: rotate(45deg);        /* the + becomes a × while open */
}

/* ---- Model pill ---------------------------------------------------------- */
.model-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.32rem 0.6rem 0.32rem 0.75rem; margin: 0;
    background: var(--obsidian-high); border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--bone-dim); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; filter: none; box-shadow: none; white-space: nowrap;
    max-width: 12rem;
}
.model-pill:hover { color: var(--bone); border-color: var(--gold-deep); background: var(--gold-ghost); filter: none; box-shadow: none; }
.model-pill--static { cursor: default; opacity: 0.75; }
.model-pill__name { overflow: hidden; text-overflow: ellipsis; }
.model-pill__caret { flex: 0 0 auto; opacity: 0.7; transition: transform .15s var(--ease); }
.model-switch.is-open .model-pill { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--gold-ghost); }
.model-switch.is-open .model-pill__caret { transform: rotate(180deg); }

/* ---- Model menu, opening upward ------------------------------------------ */
.model-switch { position: relative; }
.model-switch__panel {
    position: absolute; right: 0; bottom: calc(100% + 0.5rem); left: auto; top: auto;
    z-index: 140; min-width: 17rem; max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.35rem;
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: none; max-height: 60vh; overflow-y: auto;
}
.model-switch.is-open .model-switch__panel { display: block; }
.model-picker { display: block; margin: 0; }
.model-picker__option {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.55rem 0.6rem; border-radius: var(--radius-sm);
    cursor: pointer; margin: 0;
}
.model-picker__option:hover { background: var(--obsidian-high); }
/* The radio is the real control for keyboard and screen readers; it is moved
   out of sight rather than display:none so it stays focusable. */
.model-picker__option input[type=radio] {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.model-picker__option input[type=radio]:focus-visible + .model-picker__text { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.model-picker__text { flex: 1; min-width: 0; display: block; }
.model-picker__name { display: block; font-size: 0.9rem; font-weight: 600; color: var(--bone); }
.model-picker__desc { display: block; margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.4; color: var(--bone-faint); }
.model-picker__tick { flex: 0 0 auto; margin-top: 0.15rem; color: var(--gold); opacity: 0; }
.model-picker__option.is-checked .model-picker__tick { opacity: 1; }
.model-picker__option.is-checked .model-picker__name { color: var(--gold-bright); }

/* Attach menu also opens upward now that it sits at the bottom. */
.attach-menu { position: relative; }
.attach-menu__panel {
    position: absolute; left: 0; right: auto; bottom: calc(100% + 0.5rem); top: auto;
    z-index: 140; min-width: 15rem;
}

/* ---- Send ---------------------------------------------------------------- */
.composer__send {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; padding: 0; margin: 0;
    border: 0; border-radius: 50%;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    color: var(--obsidian); cursor: pointer; filter: none; box-shadow: none;
    transition: filter .15s var(--ease);
}
.composer__send:hover { filter: brightness(1.08); box-shadow: none; }
.composer__send.is-stop { background: var(--error); color: #fff; }
.composer__send.is-stop svg { display: none; }
.composer__send.is-stop::after {
    content: ''; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: currentColor;
}
.composer__send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 700px) {
    .composer { border-radius: 1.25rem; padding: 0.55rem 0.6rem 0.5rem; }
    .model-pill { max-width: 8.5rem; font-size: 0.78rem; }
    .composer__plus, .composer__send { width: 2.2rem; height: 2.2rem; }
    .model-switch__panel { min-width: 0; width: calc(100vw - 2rem); right: -0.3rem; }
}

/* ============================================================================
   COMPOSER + MODEL MENU - mobile corrections
   From a real phone screenshot: the menu ran off the left edge of the screen
   and covered the conversation, the pill truncated to "TheGods 3.2 F…", and
   the action icons were full-colour Android emoji.
   ========================================================================== */

/* The menu is anchored to the pill, which sits at the right edge. On a narrow
   screen a wide panel anchored right therefore overflows to the LEFT, off
   screen. Anchoring it to the composer instead of the pill keeps it on screen
   at any width. */
/* Anchored to the COMPOSER, not the pill and not the footer.
   - Anchored to the pill (what shipped), a wide panel at the right edge
     overflows LEFT off a narrow screen - exactly what his screenshot showed.
   - Anchored to the footer it would span the whole page on desktop, where the
     composer is centred at 46rem.
   The composer is the correct anchor at every width. */
.composer { position: relative; }
.model-switch { position: static; }
.model-switch__panel {
    position: absolute;
    left: 0.25rem; right: 0.25rem;
    bottom: calc(100% + 0.6rem);
    width: auto; min-width: 0; max-width: none;
    padding: 0.4rem;
    max-height: min(60vh, 26rem);
    overscroll-behavior: contain;      /* scrolling the menu must not scroll the chat */
}
.model-switch__heading {
    padding: 0.5rem 0.6rem 0.4rem;
    font-family: var(--display); font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--bone-faint);
}

/* Options are buttons now, not labels wrapping radios - see chat.php for why
   (nested forms). */
.model-option {
    display: flex; align-items: flex-start; gap: 0.65rem; width: 100%;
    padding: 0.7rem 0.65rem; margin: 0;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-align: left; cursor: pointer; filter: none; box-shadow: none;
    color: var(--bone);
}
.model-option:hover { background: var(--obsidian-high); filter: none; box-shadow: none; border-color: transparent; }
.model-option__text { flex: 1; min-width: 0; }
.model-option__name { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--bone); }
.model-option__desc {
    display: block; margin-top: 0.15rem; font-size: 0.79rem; line-height: 1.45;
    color: var(--bone-faint); white-space: normal;
}
.model-option__tick { flex: 0 0 auto; margin-top: 0.15rem; color: var(--gold); opacity: 0; }
.model-option.is-checked { background: var(--gold-ghost); border-color: var(--gold-deep); }
.model-option.is-checked .model-option__name { color: var(--gold-bright); }
.model-option.is-checked .model-option__tick { opacity: 1; }
.model-option.is-busy { opacity: 0.55; pointer-events: none; }

/* Message action icons - line icons that inherit colour, instead of emoji
   that ignore the theme entirely. */
.msg-action { width: 1.9rem; height: 1.9rem; }
.msg-action .btn-ico { display: inline-flex; align-items: center; justify-content: center; }
.msg-action svg { display: block; }
.message-actions { gap: 0.15rem; margin-top: 0.5rem; opacity: 0.75; transition: opacity .15s var(--ease); }
.message:hover .message-actions, .message-actions:focus-within { opacity: 1; }

@media (max-width: 700px) {
    /* Touch targets stay comfortable, but the pill gets real room rather than
       truncating the model name to nothing. */
    .composer__bar { gap: 0.4rem; }
    .model-pill { max-width: none; flex: 1 1 auto; min-width: 0; justify-content: space-between; font-size: 0.8rem; }
    /* Do NOT let this group grow: a grown group left-aligns its contents,
       which parks the send button in the middle of the bar with dead space
       to its right. margin-left:auto pins it to the edge instead. */
    .composer__bar-right { flex: 0 1 auto; min-width: 0; margin-left: auto; }
    .composer__plus, .composer__send { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; }
    .model-switch__panel { left: 0.15rem; right: 0.15rem; }
    /* Actions are always visible on touch - there is no hover to reveal them. */
    .message-actions { opacity: 1; }
    .msg-action { width: 2.1rem; height: 2.1rem; }
}

/* ---- Composer bar spacing: belt and braces -------------------------------
   Spacing here uses margins as well as flex `gap`. `gap` on a flex container
   is well supported in current browsers, but it is the single point of
   failure for this row - where it is not honoured, the send button lands on
   top of the model pill with no other separation. Margins cost nothing and
   make the layout hold up regardless. */
.composer__bar-left > * + *,
.composer__bar-right > * + * { margin-left: 0.45rem; }
.composer__bar-left { margin-right: 0.45rem; }

/* The pill takes the space that is left, but never so much that it crowds the
   send button, and never so little that the name disappears. */
.model-pill { flex: 0 1 auto; }
@media (max-width: 700px) {
    .model-pill { max-width: calc(100vw - 9.5rem); }
}

/* Same at every width, not just mobile. */
.composer__bar-right { margin-left: auto; justify-content: flex-end; }

/* ---- Switch confirmation toast -------------------------------------------
   A model switch reloads the page. Without a word of confirmation the user
   sees the same screen again and cannot tell whether the tap registered. */
.toast {
    position: fixed; left: 50%; bottom: 6.5rem; z-index: 200;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem; max-width: calc(100vw - 2rem);
    background: var(--obsidian-raised); border: 1px solid var(--gold-deep);
    border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
    color: var(--bone); font-size: 0.85rem; white-space: nowrap;
    animation: toast-in .22s var(--ease);
}
.toast svg { color: var(--gold); flex: 0 0 auto; }
.toast strong { color: var(--gold-bright); }
.toast.is-leaving { opacity: 0; transform: translate(-50%, 0.5rem); transition: opacity .3s var(--ease), transform .3s var(--ease); }
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 0.6rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 700px) { .toast { bottom: 7.5rem; font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ============================================================================
   USER PANEL REFINEMENT (2026-08-14)

   Covers: the Esomthathi credit line, the sidebar account block, the message
   author row, the attachment strip inside the composer, and the dashboard.

   Rule followed throughout: every element that can hold user-supplied text
   (a chat title, a file name, a model name, an email address) is given an
   explicit min-width:0 and an overflow rule. Flex and grid children default
   to min-width:auto, which refuses to shrink below their content and is the
   single most common cause of two things sitting on top of each other.
   ========================================================================== */

/* ---- Esomthathi credit line ---------------------------------------------- */
.byline {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; flex-wrap: wrap;
    margin: var(--gap) 0 0;
    font-size: 0.8rem; line-height: 1.4; color: var(--bone-faint);
}
.byline__mark {
    height: 1.15rem; width: auto; display: block; flex: 0 0 auto;
    opacity: 0.9; transition: opacity .15s var(--ease);
}
.byline:hover .byline__mark { opacity: 1; }
.byline__text { letter-spacing: 0.02em; }
.byline__by { color: var(--bone-faint); opacity: 0.75; }
.byline--compact { margin: 0; font-size: 0.72rem; gap: 0.4rem; justify-content: flex-start; }
.byline--compact .byline__mark { height: 0.95rem; }

/* On the auth pages the line closes the page, so it gets a hairline above it
   rather than floating loose under the legal links. */
.company-info .byline {
    margin-top: var(--gap);
    padding-top: var(--gap-sm);
    border-top: 1px solid var(--line-soft);
}

/* ---- Sidebar account block ----------------------------------------------- */
/* Three bare text links read like a footer note. An account row with the
   person's own name on it reads like their account. */
.sidebar__foot {
    padding: var(--gap-sm);
    border-top: 1px solid var(--line);
    display: block;                        /* was flex-wrap, which mixed the
                                              account row into the links */
    font-size: 0.88rem;
}
.sidebar__account {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.15rem 0.6rem;
    min-width: 0;
}
.sidebar__avatar {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--gold), var(--gold-deep));
    color: var(--obsidian); font-family: var(--display); font-weight: 700;
    font-size: 0.9rem; line-height: 1; text-transform: uppercase;
    user-select: none;
}
.sidebar__account-text { flex: 1 1 auto; min-width: 0; }
.sidebar__account-name {
    display: block; font-size: 0.86rem; font-weight: 600; color: var(--bone);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__account-plan {
    display: block; font-size: 0.72rem; color: var(--bone-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__links { display: flex; gap: 0.3rem; }
.sidebar__links a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.45rem 0.25rem;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bone-dim); font-size: 0.7rem; text-align: center;
}
.sidebar__links a:hover {
    color: var(--gold-bright); background: var(--gold-ghost);
    border-color: var(--gold-deep); border-bottom-color: var(--gold-deep);
}
.sidebar__links svg { flex: 0 0 auto; }
.sidebar__links span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__byline { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--line-soft); }

/* ---- Message author row --------------------------------------------------- */
.message__author { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.message__avatar {
    flex: 0 0 auto; width: 1.65rem; height: 1.65rem; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    font-family: var(--display); font-size: 0.72rem; font-weight: 700;
    line-height: 1; text-transform: uppercase; user-select: none;
}
.message__avatar img { width: 1.05rem; height: 1.05rem; display: block; }
.message__avatar--ai { background: var(--gold-ghost); border: 1px solid var(--gold-deep); }
.message__avatar--me { background: var(--obsidian-high); border: 1px solid var(--line); color: var(--bone-dim); }
.message__who {
    font-family: var(--display); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.message-assistant .message__who { color: var(--gold); }
.message-user .message__who { color: var(--bone-dim); }

/* ---- Attachment strip inside the composer --------------------------------- */
/* An attached file used to live in a panel below the message box, which put
   it visually closer to the next thing than to the message it belonged to.
   It now sits inside the composer, above the text, where it reads as part of
   the message being written. */
.composer__attachments {
    display: none; flex-wrap: wrap; gap: 0.4rem;
    margin: 0 0 0.5rem; padding: 0 0.1rem;
}
.composer__attachments.is-active { display: flex; }

.attach-chip {
    display: flex; align-items: center; gap: 0.55rem;
    max-width: 100%; min-width: 0;
    padding: 0.35rem 0.5rem 0.35rem 0.35rem;
    background: var(--obsidian-high); border: 1px solid var(--line);
    border-radius: var(--radius); animation: chip-in .18s var(--ease);
}
.attach-chip__thumb {
    flex: 0 0 auto; width: 2.35rem; height: 2.35rem; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--obsidian); display: grid; place-items: center;
    color: var(--gold); border: 1px solid var(--line-soft);
}
.attach-chip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-chip__text { flex: 1 1 auto; min-width: 0; }
.attach-chip__name {
    display: block; font-size: 0.82rem; font-weight: 500; color: var(--bone);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 12rem;
}
.attach-chip__meta { display: block; font-size: 0.72rem; color: var(--bone-faint); }
.attach-chip__meta.is-error { color: var(--error); }
.attach-chip__meta.is-ok { color: var(--ok); }
.attach-chip__remove {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; padding: 0; margin: 0;
    display: grid; place-items: center; border-radius: 50%;
    background: transparent; border: 1px solid transparent; color: var(--bone-faint);
    cursor: pointer; filter: none; box-shadow: none;
}
.attach-chip__remove:hover { color: var(--error); border-color: rgba(224,112,95,0.4); background: transparent; filter: none; box-shadow: none; }
.attach-chip.is-busy { opacity: 0.75; }
.attach-chip__bar { display: block; height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin-top: 0.25rem; }
.attach-chip__bar i { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .25s var(--ease); }
@keyframes chip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Documents already attached to the chat, rendered server side. Same chip
   language as the strip above so the two do not look like separate features. */
.attach-strip {
    max-width: var(--read); margin: 0 auto var(--gap-sm);
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.attach-strip__label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--bone-faint); font-family: var(--display); margin-right: 0.15rem;
}
.attach-strip form { display: contents; margin: 0; }
.doc-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; max-width: 100%;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem; margin: 0;
    background: var(--obsidian-high); border: 1px solid var(--line);
    border-radius: var(--radius-pill); cursor: pointer; font-size: 0.8rem;
    color: var(--bone-dim); transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.doc-toggle:hover { border-color: var(--gold-deep); color: var(--bone); }
.doc-toggle input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.doc-toggle__ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--bone-faint); }
.doc-toggle__name { min-width: 0; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-toggle__meta { flex: 0 0 auto; font-size: 0.72rem; color: var(--bone-faint); }
.doc-toggle:has(input:checked) {
    background: var(--gold-ghost); border-color: var(--gold-deep); color: var(--bone);
}
.doc-toggle:has(input:checked) .doc-toggle__ico { color: var(--gold); }
.doc-toggle input[type=checkbox]:focus-visible + .doc-toggle__ico { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* A document the cleanup job has removed. Kept visible on purpose: a chip that
   simply vanishes reads as the assistant forgetting things. Dashed border and
   no pointer say "this is a record, not a control" without needing a label. */
.doc-toggle--expired {
    cursor: default; border-style: dashed; opacity: 0.72;
    background: transparent; color: var(--bone-faint);
}
.doc-toggle--expired:hover { border-color: var(--line); color: var(--bone-faint); }
.doc-toggle--expired .doc-toggle__name { text-decoration: line-through; }

/* The "files are removed after N hours" line under the upload box. */
.attach-note {
    margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.45;
    color: var(--bone-faint);
}

/* ---- Attach menu icons ---------------------------------------------------- */
.attach-menu__ico { color: var(--gold); background: var(--gold-ghost); }
.attach-menu__ico svg { display: block; }
.attach-menu__item > span:last-child { min-width: 0; flex: 1 1 auto; }
.attach-menu__label, .attach-menu__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Composer footnote ---------------------------------------------------- */
.composer__note {
    max-width: var(--read); margin: 0.5rem auto 0;
    text-align: center; font-size: 0.75rem; line-height: 1.4;
    color: var(--bone-faint);
}

/* ---- Dashboard ------------------------------------------------------------ */
.panel-head { margin-bottom: var(--gap); }
.panel-head h1 {
    font-size: clamp(1.35rem, 3.4vw, 1.8rem); margin: 0 0 0.2rem;
    color: var(--bone);
}
.panel-head p { color: var(--bone-dim); margin: 0; font-size: 0.92rem; }

.stat-row {
    display: grid; gap: 0.6rem; margin-bottom: var(--gap-lg);
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
/* Scoped to .stat-row deliberately. The ADMIN panel has its own, larger
   .stat card (see the admin block earlier in this file). These rules sit
   later in the stylesheet, so unscoped they would win everywhere and quietly
   shrink every admin statistic tile as well. */
.stat-row .stat {
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0.75rem 0.9rem; min-width: 0;
}
.stat-row .stat::before { display: none; }
.stat-row .stat__value {
    display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 700;
    color: var(--gold-bright); line-height: 1.2; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-row .stat__label {
    display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--bone-faint); margin: 0.15rem 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.start-card {
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--gap); margin-bottom: var(--gap-lg);
}
.start-card h2 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--gold-bright); }
.start-card form { margin: 0; }
.start-card label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-faint); }

.conv-row {
    display: flex; align-items: center; gap: 0.75rem; min-width: 0;
    background: var(--obsidian-raised); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0.6rem 0.75rem;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.conv-row:hover { border-color: var(--gold-deep); background: var(--obsidian-high); }
.conv-row__link {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.7rem;
    border-bottom: none; color: var(--bone); padding: 0.15rem 0;
}
.conv-row__link:hover { border-bottom: none; color: var(--gold-bright); }
.conv-row__dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold-deep); }
.conv-row__text { min-width: 0; flex: 1 1 auto; }
.conv-row__title { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row__when { display: block; font-size: 0.74rem; color: var(--bone-faint); }
.conv-row__pin { flex: 0 0 auto; color: var(--gold); font-size: 0.8rem; }
.conv-row form { margin: 0; flex: 0 0 auto; }
.conv-row__del {
    width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center;
    background: transparent; border: 1px solid transparent; color: var(--bone-faint);
    border-radius: var(--radius-sm); filter: none; box-shadow: none;
}
.conv-row__del:hover { color: var(--error); border-color: rgba(224,112,95,0.4); background: transparent; filter: none; box-shadow: none; }
.conv-list { display: flex; flex-direction: column; gap: 0.5rem; }
.conv-list__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.conv-list__head h2 { margin: 0; font-size: 1rem; color: var(--bone); }
.conv-list__count { font-size: 0.78rem; color: var(--bone-faint); flex: 0 0 auto; }

@media (max-width: 700px) {
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attach-chip__name { max-width: 9rem; }
    .doc-toggle__name { max-width: 8rem; }
    .byline { font-size: 0.74rem; }
}

/* ============================================================================
   ADMIN PANEL STRUCTURE (2026-08-14)

   Three things were wrong structurally, all of them visible rather than
   theoretical:

   1. The main column was capped at 74rem but left-aligned, so on a wide
      monitor the panel sat against the left edge with a third of the screen
      empty beside it.
   2. Page titles carried no context. Every screen said only its own name, so
      you could not tell which section you were in without reading the nav.
   3. Tables, cards and forms each had their own spacing, because they were
      added at different times. Same panel, several different designs.
   ========================================================================== */

.admin__main { width: 100%; margin-inline: auto; }

/* ---- Brand + topbar ------------------------------------------------------- */
.admin__brand { align-items: center; gap: 0.55rem; }
.admin__brand-tag {
    font-family: var(--display); font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gold); background: var(--gold-ghost);
    border: 1px solid var(--gold-deep); border-radius: var(--radius-pill);
    padding: 0.1rem 0.45rem; line-height: 1.5; flex: 0 0 auto;
}

.admin__topbar {
    position: sticky; top: 0; z-index: 30;
    margin: calc(var(--gap-lg) * -1) calc(var(--gap-lg) * -1) var(--gap);
    padding: var(--gap-sm) var(--gap-lg);
    background: var(--obsidian); border-bottom: 1px solid var(--line);
    align-items: center;
}
.admin__topbar-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.admin__heading { min-width: 0; }
.admin__crumb {
    margin: 0; font-size: 0.68rem; font-family: var(--display);
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--bone-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin__topbar h1 {
    margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin__intro {
    color: var(--bone-dim); font-size: 0.9rem; max-width: 52rem;
    margin: 0 0 var(--gap-lg);
}

/* ---- Sidebar foot: reuses the account block from the user panel ----------- */
.admin__side-foot { display: block; margin-top: auto; }
.admin__side-foot .sidebar__account { padding: 0.4rem 0.15rem 0.6rem; }
.admin__side-foot .sidebar__links a { font-size: 0.68rem; }

/* ---- Tables --------------------------------------------------------------- */
/* .table-wrap is what stops a wide table forcing the whole page sideways on a
   phone. It only works if the wrapper is allowed to be narrower than its
   content, which needs min-width:0 on the flex and grid ancestors. */
.admin__main, .admin-card { min-width: 0; }
.table-wrap {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--obsidian-raised); overscroll-behavior-x: contain;
}
.admin-card .table-wrap { border: 0; border-radius: 0; background: transparent; margin-bottom: 0; }
.table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--obsidian-high);
    white-space: nowrap;
}
.table td { vertical-align: middle; }
.table td, .table th { padding: 0.6rem 0.8rem; }
.table tbody tr { transition: background .12s var(--ease); }
.table tbody tr:hover { background: var(--gold-ghost); }
/* A long email or chat title must be allowed to cut off rather than stretch
   the column past the edge of the screen. */
.table td.is-tight { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Status pills ---------------------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--line); color: var(--bone-dim); background: var(--obsidian-high);
}
.pill--ok    { color: var(--ok);    border-color: rgba(107,191,138,0.4); background: rgba(107,191,138,0.10); }
.pill--warn  { color: var(--warn);  border-color: rgba(224,164,88,0.4);  background: rgba(224,164,88,0.10); }
.pill--error { color: var(--error); border-color: rgba(224,112,95,0.4);  background: rgba(224,112,95,0.10); }
.pill--gold  { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--gold-ghost); }

/* ---- Cards ---------------------------------------------------------------- */
.admin-card { min-width: 0; }
.admin-card > h2 {
    font-size: 1rem; color: var(--gold-bright);
    padding-bottom: 0.6rem; margin-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--line-soft);
}
.admin-card__note { color: var(--bone-dim); font-size: 0.85rem; margin: -0.3rem 0 var(--gap-sm); }

@media (max-width: 900px) {
    .admin__topbar {
        margin: calc(var(--gap) * -1) calc(var(--gap) * -1) var(--gap);
        padding: var(--gap-sm) var(--gap);
    }
    .table td, .table th { padding: 0.5rem 0.6rem; }
    .table td.is-tight { max-width: 10rem; }
}

/* ---- Retry on your own message ------------------------------------------- */
.msg-retry-btn.is-busy .btn-ico { display: inline-block; animation: btn-spin 0.8s linear infinite; }
.msg-retry-btn:disabled { opacity: 0.55; cursor: default; }

/* The send button now reflects whether there is anything to send. Without a
   visible difference it looks live on an empty composer, and clicking it
   appears to do nothing at all. */
.composer__send:disabled { opacity: 0.4; cursor: not-allowed; }