:root {
    color-scheme: light;
    --bg: #fbfbfa;
    --surface: #ffffff;
    --surface-subtle: #f4f4f1;
    --surface-hover: #ecece8;
    --sidebar: #f4f4f0;
    --text: #20201f;
    --muted: #6f6f6a;
    --faint: #9a9a94;
    --line: rgba(32, 32, 31, .11);
    --line-strong: rgba(32, 32, 31, .2);
    --accent: #147d64;
    --accent-hover: #0f6853;
    --accent-soft: #e4f4ee;
    --danger: #b42318;
    --danger-soft: #fef0ed;
    --shadow-sm: 0 1px 2px rgba(20, 20, 18, .05), 0 2px 8px rgba(20, 20, 18, .04);
    --shadow-lg: 0 24px 70px rgba(20, 20, 18, .18), 0 4px 18px rgba(20, 20, 18, .08);
    --sidebar-width: 280px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --content-width: 780px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #20211f;
    --surface: #292a27;
    --surface-subtle: #31322f;
    --surface-hover: #393a36;
    --sidebar: #171815;
    --text: #f2f2ed;
    --muted: #b4b4ac;
    --faint: #85857e;
    --line: rgba(255, 255, 250, .1);
    --line-strong: rgba(255, 255, 250, .2);
    --accent: #4fba99;
    --accent-hover: #63c7a9;
    --accent-soft: #173c31;
    --danger: #ff8a80;
    --danger-soft: #3f201f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, .48);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #20211f;
        --surface: #292a27;
        --surface-subtle: #31322f;
        --surface-hover: #393a36;
        --sidebar: #171815;
        --text: #f2f2ed;
        --muted: #b4b4ac;
        --faint: #85857e;
        --line: rgba(255, 255, 250, .1);
        --line-strong: rgba(255, 255, 250, .2);
        --accent: #4fba99;
        --accent-hover: #63c7a9;
        --accent-soft: #173c31;
        --danger: #ff8a80;
        --danger-soft: #3f201f;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
        --shadow-lg: 0 28px 80px rgba(0, 0, 0, .48);
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--surface);
    transform: translateY(-160%);
    transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

[hidden] { display: none !important; }

.auth-gate {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 18% 5%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 28rem),
        radial-gradient(circle at 88% 90%, color-mix(in srgb, #7c6ee6 10%, transparent), transparent 30rem),
        var(--bg);
}

.auth-card {
    width: min(420px, 100%);
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #1b9a78, #0e5f4c);
    color: white;
    font-weight: 760;
    font-size: 21px;
    box-shadow: 0 10px 24px rgba(15, 104, 83, .2);
}

.brand-mark-small { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; }
.eyebrow { margin: 24px 0 5px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.auth-card h1 { margin: 0; font-size: 30px; letter-spacing: 0; }
.auth-copy { margin: 9px 0 26px; color: var(--muted); }

.auth-form { display: grid; gap: 9px; }
.auth-form label, .settings-panel > label:not(.toggle-row) { color: var(--muted); font-size: 13px; font-weight: 650; }
.auth-form input, .settings-panel input:not([type="checkbox"]):not([type="color"]), .settings-panel textarea, .settings-panel select {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--surface);
    padding: 11px 12px;
    transition: border .15s, box-shadow .15s;
}
.auth-form input:focus, .settings-panel input:focus, .settings-panel textarea:focus, .settings-panel select:focus {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.auth-form label:not(:first-child) { margin-top: 8px; }
.form-error { min-height: 22px; margin: 2px 0; color: var(--danger); font-size: 13px; }

.primary-button, .secondary-button {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-weight: 680;
}
.primary-button { background: var(--accent); color: white; }
.primary-button:hover { background: var(--accent-hover); }
.secondary-button { background: var(--surface-subtle); border-color: var(--line); }
.secondary-button:hover { background: var(--surface-hover); }

.app-shell { height: 100%; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }

.sidebar {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
}

.sidebar-header { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 3px 6px 6px; }
.wordmark { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 720; text-decoration: none; letter-spacing: 0; }
.icon-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
}
.icon-button:hover { background: var(--surface-hover); color: var(--text); }

.new-chat-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    margin: 5px 0 10px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-weight: 650;
    text-align: left;
}
.new-chat-button:hover { border-color: var(--line-strong); background: var(--surface-subtle); }

.project-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px 34px; gap: 5px; margin: 0 0 6px; }
.project-picker-row select, .project-picker-row button { min-width: 0; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; }
.project-picker-row select { padding: 0 8px; text-overflow: ellipsis; }
.project-picker-row button { font-size: 18px; }
.project-picker-row select:hover, .project-picker-row button:hover { background: var(--surface-hover); color: var(--text); }
.project-picker-row button:disabled { opacity: .36; pointer-events: none; }

.sidebar-tools { display: grid; gap: 2px; margin: 2px 0 9px; }
.sidebar-tool-button {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    text-align: left;
    font-size: 13px;
}
.sidebar-tool-button:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-tool-button > span:nth-child(2) { flex: 1; }
.sidebar-tool-button kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--faint); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.sidebar-tool-button small { min-width: 16px; color: var(--faint); font-size: 11px; text-align: right; }

.conversation-list { flex: 1; overflow: auto; overscroll-behavior: contain; padding-right: 1px; scrollbar-width: thin; }
.retention-notice { display: grid; gap: 3px; margin: 8px 6px 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.retention-notice strong { color: var(--text); font-size: 11px; line-height: 1.35; }
.retention-notice small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.conversation-group-title { margin: 15px 9px 6px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.conversation-row { position: relative; display: flex; align-items: center; border-radius: 9px; }
.conversation-row.active { background: var(--surface-hover); }
.conversation-row:hover { background: color-mix(in srgb, var(--surface-hover) 72%, transparent); }
.conversation-link {
    flex: 1;
    min-width: 0;
    padding: 9px 35px 9px 10px;
    border: 0;
    background: transparent;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 13px;
}
.conversation-more {
    position: absolute;
    right: 3px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    opacity: 0;
}
.conversation-row:hover .conversation-more, .conversation-more:focus-visible, .conversation-row.active .conversation-more { opacity: 1; }
.conversation-more:hover { background: var(--surface); color: var(--text); }
.conversation-empty { padding: 22px 13px; color: var(--muted); font-size: 13px; text-align: center; }

.sidebar-footer { padding-top: 8px; border-top: 1px solid var(--line); }
.profile-button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 11px; background: transparent; text-align: left; }
.profile-button:hover { background: var(--surface-hover); }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 13px; font-weight: 750; }
.profile-copy { flex: 1; min-width: 0; display: grid; }
.profile-copy strong, .profile-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-copy strong { font-size: 13px; }
.profile-copy small { color: var(--muted); font-size: 11px; }

.conversation-main { position: relative; height: 100%; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.topbar { z-index: 20; height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); }
.topbar-spacer { flex: 1; }
.model-picker { position: relative; display: inline-flex; align-items: center; }
.model-picker select { min-width: 125px; max-width: min(360px, 48vw); height: 40px; appearance: none; padding: 0 34px 0 12px; border: 0; border-radius: 10px; background: transparent; font-weight: 720; font-size: 16px; text-overflow: ellipsis; }
.model-picker select:hover { background: var(--surface-hover); }
.model-chevron { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.topbar-share-button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-size: 12px; font-weight: 650; }
.topbar-share-button:hover { background: var(--surface-hover); }
.topbar-share-button:disabled { opacity: .48; cursor: not-allowed; }
.temporary-chat-button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; }
.temporary-chat-button:hover { background: var(--surface-hover); color: var(--text); }
.temporary-chat-button[aria-pressed="true"] { border-color: color-mix(in srgb, #7857d8 42%, var(--line)); background: color-mix(in srgb, #7857d8 12%, var(--surface)); color: color-mix(in srgb, #7857d8 78%, var(--text)); }
.temporary-chat-button:disabled { opacity: .48; }
.usage-badge { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; white-space: nowrap; }

.message-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}
.message-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
    animation: live-pulse 1.25s ease-in-out infinite;
}
.message-reasoning {
    margin-top: 10px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    padding-left: 10px;
    color: var(--faint);
    font-size: 12px;
}
.message-reasoning summary { cursor: pointer; color: var(--muted); }
.message-reasoning div { max-height: 140px; overflow: auto; margin-top: 6px; white-space: pre-wrap; }
@keyframes live-pulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.data-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.danger-action { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }

@media (max-width: 560px) {
    .data-action-grid { grid-template-columns: 1fr; }
}
.temporary-mode-notice { width: min(var(--content-width), calc(100% - 32px)); flex: 0 0 auto; align-self: center; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 2px auto 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, #7857d8 28%, var(--line)); border-radius: 13px; background: color-mix(in srgb, #7857d8 7%, var(--surface)); }
.temporary-mode-notice[hidden] { display: none; }
.temporary-mode-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, #7857d8 14%, var(--surface)); color: #7857d8; font-size: 17px; }
.temporary-mode-notice > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.temporary-mode-notice strong { font-size: 12px; }
.temporary-mode-notice small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.temporary-mode-notice button { min-height: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; }
.temporary-mode-notice button:hover { background: var(--surface-hover); color: var(--text); }
.archived-mode-notice { width: min(var(--content-width), calc(100% - 32px)); flex: 0 0 auto; align-self: center; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 2px auto 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, #b26a00 30%, var(--line)); border-radius: 13px; background: color-mix(in srgb, #b26a00 7%, var(--surface)); }
.archived-mode-notice[hidden] { display: none; }
.archived-mode-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, #b26a00 14%, var(--surface)); color: #a45f00; font-size: 15px; }
.archived-mode-notice > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.archived-mode-notice strong { font-size: 12px; }
.archived-mode-notice small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.archived-mode-notice button { min-height: 30px; padding: 0 10px; border: 1px solid color-mix(in srgb, #b26a00 28%, var(--line)); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 650; }
.archived-mode-notice button:hover { background: var(--surface-hover); }

.welcome-view { width: min(var(--content-width), calc(100% - 32px)); flex: 1; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 30px 0 150px; }
.welcome-orb { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(145deg, var(--accent), #6d61d8); color: white; font-weight: 800; font-size: 20px; box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 22%, transparent); }
.welcome-view h2 { margin: 0 0 28px; font-size: 34px; font-weight: 650; letter-spacing: 0; }
.suggestion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.suggestion-grid button { min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; text-align: left; font-size: 13px; font-weight: 650; }
.suggestion-grid button:hover { background: var(--surface-subtle); border-color: var(--line-strong); }
.suggestion-grid span { color: var(--muted); font-size: 12px; font-weight: 450; }

.message-timeline { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px max(20px, calc((100% - var(--content-width)) / 2)) 190px; scrollbar-width: thin; }
.message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; margin: 0 auto 28px; max-width: var(--content-width); animation: message-in .22s ease-out; }
.message.search-target { border-radius: 14px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.message.user { grid-template-columns: minmax(0, 1fr); }
.message-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, var(--accent), #126650); color: white; font-size: 12px; font-weight: 800; }
.message-body { min-width: 0; }
.message.user .message-body { justify-self: end; max-width: min(78%, 650px); padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--surface-subtle); }
.message-content { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content p { margin: 0 0 12px; }
.message-content h1, .message-content h2, .message-content h3, .message-content h4, .message-content h5, .message-content h6 { margin: 24px 0 10px; line-height: 1.25; letter-spacing: 0; }
.message-content h1 { font-size: 1.72em; }
.message-content h2 { font-size: 1.48em; }
.message-content h3 { font-size: 1.26em; }
.message-content h4 { font-size: 1.1em; }
.message-content h5, .message-content h6 { font-size: 1em; }
.message-content strong { font-weight: 720; }
.message-content ul, .message-content ol { margin: 9px 0 13px; padding-inline-start: 26px; }
.message-content li { padding-inline-start: 3px; }
.message-content li + li { margin-top: 5px; }
.message-content li > ul, .message-content li > ol { margin: 6px 0 4px; }
.message-content blockquote { margin: 13px 0; padding: 3px 0 3px 15px; border-inline-start: 3px solid color-mix(in srgb, var(--accent) 42%, var(--line)); color: var(--muted); }
.message-content blockquote > :last-child { margin-bottom: 0; }
.message-content hr { height: 1px; margin: 22px 0; border: 0; background: var(--line-strong); }
.message-content a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.message-content a:hover { color: var(--accent-hover); }
.message-content pre { position: relative; max-width: 100%; overflow: auto; margin: 13px 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #171817; color: #f2f2ed; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; overscroll-behavior-inline: contain; }
.message-content code:not(pre code) { padding: 2px 5px; border-radius: 5px; background: var(--surface-subtle); font: .9em ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.message-attachments { max-width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 9px; }
.message.user .message-attachments { justify-content: flex-end; }
.message-attachment-card { width: min(270px, 100%); min-width: 0; min-height: 58px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; overflow: hidden; padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); text-decoration: none; }
.message-attachment-card[href]:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.message-attachment-card.unavailable { opacity: .72; }
.message-attachment-preview, .message-attachment-icon { width: 48px; height: 48px; border-radius: 9px; background: var(--surface-subtle); }
.message-attachment-preview { display: block; object-fit: cover; }
.message-attachment-icon { display: grid; place-items: center; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.message-attachment-copy { min-width: 0; display: grid; gap: 3px; }
.message-attachment-copy strong, .message-attachment-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.message-attachment-copy strong { font-size: 12px; font-weight: 680; }
.message-attachment-copy small { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.markdown-table-scroll { max-width: 100%; margin: 14px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; overscroll-behavior-inline: contain; }
.message-content table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: .93em; }
.message-content th, .message-content td { max-width: min(440px, 58vw); padding: 9px 12px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.message-content th:last-child, .message-content td:last-child { border-inline-end: 0; }
.message-content tbody tr:last-child td { border-bottom: 0; }
.message-content th { background: var(--surface-subtle); font-weight: 700; }
.message-content .markdown-align-left { text-align: start; }
.message-content .markdown-align-center { text-align: center; }
.message-content .markdown-align-right { text-align: end; }
.message-actions { display: flex; gap: 2px; min-height: 30px; margin-top: 6px; opacity: 0; transition: opacity .15s; }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
.message-actions.has-versions { opacity: 1; }
.message.user .message-actions { justify-content: flex-end; }
.message-action { padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; }
.message-action:hover { background: var(--surface-hover); color: var(--text); }
.message-action:disabled { cursor: not-allowed; opacity: .45; }
.message-version { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 4px; color: var(--muted); font-size: 11px; }
.message-version button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; font-size: 16px; }
.message-version button:not(:disabled):hover { background: var(--surface-hover); color: var(--text); }
.message-version-output { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.typing-dot { display: inline-block; width: 7px; height: 7px; margin: 8px 3px 0 0; border-radius: 50%; background: var(--muted); animation: pulse 1s infinite alternate; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }

.composer-dock { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; padding: 20px 20px max(10px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 26%, var(--bg)); }
.composer, .attachment-tray, .composer-note { width: min(var(--content-width), 100%); margin-inline: auto; }
.composer { min-height: 58px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 42px; align-items: end; gap: 5px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--surface); box-shadow: 0 8px 30px rgba(20, 20, 18, .09); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 34px rgba(20, 20, 18, .1), 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); }
.conversation-main.temporary-mode .composer { border-color: color-mix(in srgb, #7857d8 34%, var(--line)); }
.conversation-main.temporary-mode .composer-note { color: color-mix(in srgb, #7857d8 62%, var(--muted)); }
.conversation-main.archived-mode .composer { border-style: dashed; background: var(--surface-subtle); box-shadow: none; opacity: .78; }
.conversation-main.archived-mode .composer-note { color: color-mix(in srgb, #b26a00 68%, var(--muted)); }
.composer textarea { width: 100%; min-height: 40px; max-height: 210px; resize: none; overflow-y: auto; padding: 9px 4px 7px; border: 0; outline: 0; background: transparent; line-height: 1.45; }
.composer-tool, .send-button, .stop-button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; }
.composer-tool { background: transparent; color: var(--muted); font-size: 24px; }
.composer-tool:hover { background: var(--surface-hover); color: var(--text); }
.send-button, .stop-button { background: var(--text); color: var(--bg); font-size: 20px; font-weight: 750; }
.stop-button { font-size: 12px; }
.composer-note { margin-top: 7px; color: var(--faint); font-size: 11px; text-align: center; }
.attachment-tray { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 8px; }
.attachment-chip { max-width: 210px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 12px; }
.attachment-chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-chip button { border: 0; background: transparent; color: var(--muted); }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(15, 16, 15, .46); backdrop-filter: blur(3px); }
.menu-dialog { min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.menu-dialog button { width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; }
.menu-dialog button:hover { background: var(--surface-hover); }
.menu-dialog .danger-action { color: var(--danger); }
.menu-separator { height: 1px; margin: 5px 6px; background: var(--line); }
.conversation-project-target { display: grid; gap: 4px; margin: 5px 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.conversation-project-target select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); color: var(--text); font-size: 12px; }

.conversation-name-dialog { width: min(420px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.conversation-name-dialog form { display: grid; gap: 10px; padding: 20px; }
.conversation-name-dialog h2 { margin: 0 0 4px; font-size: 18px; }
.conversation-name-dialog label { color: var(--muted); font-size: 12px; }
.conversation-name-dialog input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-subtle); color: var(--text); outline: 0; }
.conversation-name-dialog input:focus { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.conversation-name-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.conversation-name-actions button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--text); font-size: 13px; }
.conversation-name-actions button:hover { background: var(--surface-hover); }
.conversation-name-actions .primary-button { border-color: var(--accent); background: var(--accent); color: #fff; }
.conversation-name-actions .primary-button:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }

.edit-message-dialog { width: min(640px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); }
.edit-message-card { display: grid; gap: 12px; padding: 20px; }
.edit-message-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.edit-message-card h2 { margin: 0; font-size: 20px; }
.edit-message-card textarea { width: 100%; min-height: 150px; max-height: min(48vh, 420px); resize: vertical; }
.edit-message-hint { margin: -2px 0 0; color: var(--muted); font-size: 12px; }
.edit-message-card > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }

.workspace-dialog {
    width: min(780px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.workspace-dialog-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.workspace-dialog-shell > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.workspace-dialog-shell > header h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.workspace-dialog-shell > header .eyebrow { margin: 0 0 2px; }
.workspace-dialog-actions { display: flex; align-items: center; gap: 8px; }
.workspace-dialog-actions .secondary-button { white-space: nowrap; }
.workspace-search-form { display: grid; gap: 11px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.workspace-search-field { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface-subtle); color: var(--muted); }
.workspace-search-field:focus-within { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.workspace-search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.workspace-search-field kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--faint); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.filter-chips { min-width: 0; display: flex; gap: 7px; margin: 0; padding: 0; overflow-x: auto; border: 0; scrollbar-width: thin; }
.filter-chips label { flex: 0 0 auto; cursor: pointer; }
.filter-chips input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chips span { min-height: 32px; display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.filter-chips input:checked + span { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.filter-chips input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.workspace-dialog-meta { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 18px; color: var(--muted); font-size: 12px; }
.workspace-dialog-meta p { margin: 0; }
.workspace-dialog-meta [role="status"] { flex: 1; }
.workspace-results { flex: 1; min-height: 0; display: grid; align-content: start; gap: 5px; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 14px; scrollbar-width: thin; }
.workspace-results[aria-busy="true"] { opacity: .58; }
.workspace-result { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 13px; background: transparent; }
.workspace-result:hover, .workspace-result:focus-within { border-color: var(--line); background: var(--surface-subtle); }
.workspace-result-main { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px 11px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.workspace-result-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 750; }
.workspace-result-copy { min-width: 0; display: grid; gap: 2px; }
.workspace-result-copy strong, .workspace-result-copy span, .workspace-result-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-result-copy strong { font-size: 13px; }
.workspace-result-copy span { color: var(--muted); font-size: 12px; }
.workspace-result-copy small { color: var(--faint); font-size: 10px; }
.workspace-result-actions { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.workspace-result-actions button, .workspace-result-actions a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; text-decoration: none; white-space: nowrap; }
.workspace-result-actions button:hover, .workspace-result-actions a:hover { background: var(--surface-hover); color: var(--text); }
.workspace-result-actions button:disabled { opacity: .48; }
.workspace-result-actions .danger-action { color: var(--danger); }
.workspace-empty { flex: 1; min-height: 0; display: grid; place-content: center; justify-items: center; gap: 5px; padding: 34px; color: var(--muted); text-align: center; }
.workspace-empty > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 15px; background: var(--surface-subtle); color: var(--faint); font-size: 20px; }
.workspace-empty strong { color: var(--text); font-size: 14px; }
.workspace-empty small { max-width: 360px; }
.workspace-dialog-shell > footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
.share-dialog { width: min(880px, calc(100vw - 32px)); height: min(780px, calc(100vh - 32px)); }
.share-dialog-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); overflow: hidden; }
.share-preview { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); }
.share-preview > header { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.share-preview > header strong { font-size: 13px; }
.share-preview > header small { color: var(--muted); font-size: 11px; }
.share-preview-timeline { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 28px; scrollbar-width: thin; }
.share-preview-empty { min-height: 100%; display: grid; place-content: center; color: var(--muted); font-size: 13px; text-align: center; }
.share-preview-message { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; margin: 0 auto 22px; }
.share-preview-message.user { grid-template-columns: minmax(0, 1fr); }
.share-preview-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 750; }
.share-preview-message.user .share-preview-message-body { justify-self: end; max-width: 84%; padding: 9px 12px; border-radius: 16px 16px 4px 16px; background: var(--surface-subtle); }
.share-preview-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.share-preview-attachment { max-width: 100%; overflow: hidden; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.share-controls { min-width: 0; overflow-y: auto; padding: 22px; }
.share-controls > label:not(.toggle-row) { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.share-controls > input, .share-link-row input { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-subtle); color: var(--text); }
.share-controls > input:focus, .share-link-row input:focus { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); outline: 3px solid color-mix(in srgb, var(--accent) 10%, transparent); }
.share-privacy-warning { margin: 15px 0; padding: 11px; border: 1px solid color-mix(in srgb, #b26a00 24%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #b26a00 7%, var(--surface)); color: var(--muted); font-size: 11px; line-height: 1.5; }
.share-link-field { display: grid; gap: 6px; margin-top: 15px; color: var(--muted); font-size: 12px; font-weight: 650; }
.share-link-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.share-link-row .secondary-button { min-width: 64px; }
.share-dialog-footer { flex-wrap: wrap; }
.share-dialog-footer > #shareStatus { min-width: 120px; flex: 1; margin: 0; color: var(--muted); font-size: 12px; }
.share-destructive-actions { display: flex; gap: 6px; }
.share-destructive-actions .danger-action { color: var(--danger); }
.export-dialog { width: min(560px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); }
.export-dialog-card { display: grid; gap: 14px; padding: 20px; }
.export-dialog-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.export-dialog-card h2 { margin: 0; font-size: 20px; }
.export-dialog-card > p { margin: 0; color: var(--muted); font-size: 13px; }
.export-format-options { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.export-format-options legend { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.export-format-options label { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.export-format-options label:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: var(--accent-soft); }
.export-format-options input { accent-color: var(--accent); }
.export-format-options span { display: grid; gap: 2px; }
.export-format-options small { color: var(--muted); }
.export-dialog-card > footer { display: flex; justify-content: flex-end; gap: 8px; }
.library-filter-form { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 9px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.library-category-label select { width: 100%; height: 46px; padding: 0 34px 0 12px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface-subtle); }
.library-meta { border-bottom: 0; }
.library-results { padding-top: 0; }
.library-footer .secondary-button { min-width: 100px; }

.project-dialog { width: min(880px, calc(100vw - 32px)); }
.project-dialog-body { flex: 1; min-height: 0; display: grid; align-content: start; gap: 9px; overflow-y: auto; padding: 20px 24px 26px; }
.project-dialog-description { margin: -3px 0 8px; color: var(--muted); font-size: 13px; }
.project-dialog-body > input, .project-dialog-body > select, .project-dialog-body > textarea { width: 100%; }
.project-dialog-body > textarea { resize: vertical; min-height: 112px; }
.project-dialog-body > small { margin-top: -4px; color: var(--faint); }
.project-contents { display: grid; gap: 12px; margin-top: 13px; padding-top: 18px; border-top: 1px solid var(--line); }
.project-contents > header { display: flex; align-items: center; justify-content: space-between; }
.project-contents h3, .project-contents h4 { margin: 0; }
.project-contents h3 { font-size: 16px; }
.project-contents h4 { margin-bottom: 8px; font-size: 13px; }
.project-contents small { color: var(--muted); }
.project-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-content-grid > section { min-width: 0; }
.project-resource-list { display: grid; gap: 6px; }
.project-resource-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--faint); font-size: 12px; text-align: center; }
.project-resource-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.project-resource-row > button:first-child, .project-resource-row > a { min-width: 0; overflow: hidden; border: 0; background: transparent; color: var(--text); font-size: 12px; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.project-resource-row > button:last-child { min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--danger); font-size: 11px; }
.project-resource-row > button:last-child:hover { background: var(--surface-hover); }
.project-file-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 7px; }
.project-file-picker select { min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.project-footer-spacer { flex: 1; }
.project-dialog .danger-action { color: var(--danger); }

.settings-dialog { width: min(900px, calc(100vw - 32px)); height: min(690px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); }
.dialog-shell { height: 100%; display: flex; flex-direction: column; }
.dialog-shell > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.dialog-shell > header .eyebrow { margin: 0 0 2px; }
.dialog-shell h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.settings-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px 1fr; }
.settings-nav { padding: 14px; border-right: 1px solid var(--line); background: var(--surface-subtle); }
.settings-nav button { width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; text-align: left; font-size: 13px; }
.settings-nav button:hover, .settings-nav button.active { background: var(--surface-hover); font-weight: 650; }
.settings-content { overflow-y: auto; padding: 26px clamp(22px, 5vw, 54px); }
.settings-panel { display: none; max-width: 600px; }
.settings-panel.active { display: grid; gap: 11px; }
.settings-panel h3 { margin: 0; font-size: 21px; }
.settings-panel > p { margin: -4px 0 13px; color: var(--muted); }
.settings-panel textarea { resize: vertical; }
.settings-panel input[type="color"] { width: 52px; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.data-control-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.data-control-row > span { min-width: 0; display: grid; gap: 3px; }
.data-control-row strong { font-size: 14px; }
.data-control-row small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.data-control-row .secondary-button { flex: 0 0 auto; }
.retention-policy-row { align-items: flex-start; }
.retention-policy-row small { white-space: normal; line-height: 1.45; }
.data-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.data-action-grid .secondary-button { min-height: 38px; }
.local-backup-status { margin: 8px 1px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.shared-links-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 16px; scrollbar-width: thin; }
.shared-link-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.shared-link-copy { min-width: 0; display: grid; gap: 3px; }
.shared-link-copy strong, .shared-link-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-link-copy strong { font-size: 13px; }
.shared-link-copy small { color: var(--muted); font-size: 11px; }
.shared-link-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.shared-link-actions button, .shared-link-actions a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; text-decoration: none; }
.shared-link-actions button:hover, .shared-link-actions a:hover { background: var(--surface-hover); color: var(--text); }
.shared-link-actions .danger-action { color: var(--danger); }
.archive-manager { display: grid; gap: 10px; margin: 4px 0 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.archive-manager > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.archive-manager > header > span { min-width: 0; display: grid; gap: 2px; }
.archive-manager > header strong { font-size: 14px; }
.archive-manager > header small { color: var(--muted); font-size: 11px; }
.archive-manager > header .secondary-button { min-height: 32px; padding: 5px 10px; }
.archive-conversation-list { display: grid; gap: 7px; }
.archive-conversation-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.archive-conversation-copy { min-width: 0; display: grid; gap: 3px; }
.archive-conversation-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.archive-conversation-copy small { color: var(--muted); font-size: 11px; }
.archive-conversation-actions { display: flex; align-items: center; gap: 4px; }
.archive-conversation-actions button { min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; }
.archive-conversation-actions button:hover { background: var(--surface-hover); color: var(--text); }
.archive-conversation-actions button.danger-action { color: var(--danger); }
.archive-conversation-empty { display: grid; justify-items: center; gap: 3px; padding: 22px 12px; color: var(--muted); text-align: center; }
.archive-conversation-empty[hidden] { display: none; }
.archive-conversation-empty > span { font-size: 20px; }
.archive-conversation-empty strong { color: var(--text); font-size: 13px; }
.archive-conversation-empty small { font-size: 11px; }
.archive-manager > #archiveLoadMoreButton { justify-self: center; min-height: 32px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-row span { display: grid; }
.toggle-row small { color: var(--muted); }
.toggle-row input[type="checkbox"] { width: 38px; height: 22px; accent-color: var(--accent); }
.memory-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.memory-form button { padding: 8px 13px; border: 0; border-radius: 9px; background: var(--accent); color: white; }
.memory-list { display: grid; gap: 8px; margin-top: 6px; }
.memory-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); }
.memory-item p { flex: 1; margin: 0; font-size: 13px; white-space: pre-wrap; }
.memory-item button { border: 0; background: transparent; color: var(--danger); }
.dialog-shell > footer { min-height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 10px 22px; border-top: 1px solid var(--line); }
.dialog-shell > footer p { flex: 1; margin: 0; color: var(--muted); font-size: 13px; }

.toast-region { position: fixed; z-index: 1100; top: 72px; right: 18px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 380px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-lg); font-size: 13px; animation: toast-in .2s ease-out; }
.toast.error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); color: var(--danger); }

.mobile-only { display: none; }

@keyframes pulse { from { opacity: .28; transform: translateY(0); } to { opacity: 1; transform: translateY(-2px); } }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
    .mobile-only { display: grid; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(310px, 88vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; z-index: 55; inset: 0; background: rgba(0, 0, 0, .4); }
    .topbar { padding-inline: 8px; }
    .usage-badge { display: none; }
    .temporary-mode-notice { width: calc(100% - 20px); grid-template-columns: 30px minmax(0, 1fr); }
    .temporary-mode-notice button { grid-column: 2; justify-self: start; padding-inline: 0; }
    .archived-mode-notice { width: calc(100% - 20px); grid-template-columns: 30px minmax(0, 1fr); }
    .archived-mode-notice button { grid-column: 2; justify-self: start; }
    .welcome-view { padding-bottom: 170px; }
    .suggestion-grid { grid-template-columns: 1fr; }
    .suggestion-grid button:nth-child(n+3) { display: none; }
    .message-timeline { padding-inline: 14px; }
    .message.user .message-body { max-width: 88%; }
    .message-content h1 { font-size: 1.5em; }
    .message-content h2 { font-size: 1.34em; }
    .message-content ul, .message-content ol { padding-inline-start: 22px; }
    .message-content pre { padding: 12px; font-size: 12px; }
    .message-content th, .message-content td { max-width: 76vw; padding: 8px 10px; }
    .message-attachments { width: 100%; flex-direction: column; }
    .message-attachment-card { width: 100%; max-width: 100%; }
    .composer-dock { padding-inline: 10px; }
    .settings-dialog, .workspace-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
    .share-dialog-body { grid-template-columns: 1fr; overflow-y: auto; }
    .share-preview { min-height: 46dvh; border-right: 0; border-bottom: 1px solid var(--line); }
    .share-preview-timeline { min-height: 320px; }
    .share-controls { overflow: visible; padding: 18px 14px; }
    .share-dialog-footer { position: sticky; bottom: 0; padding-bottom: max(9px, env(safe-area-inset-bottom)); background: var(--surface); }
    .share-destructive-actions { width: 100%; order: 3; }
    .shared-link-item { grid-template-columns: 1fr; }
    .shared-link-actions { justify-content: flex-start; }
    .shared-link-actions button, .shared-link-actions a { min-height: 42px; }
    .menu-dialog button { min-height: 44px; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { display: flex; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .settings-nav button { width: auto; flex: 0 0 auto; white-space: nowrap; }
    .settings-content { padding: 22px 18px; }
    .retention-policy-row { display: grid; }
    .retention-policy-row .secondary-button { justify-self: start; }
    .data-action-grid { grid-template-columns: 1fr; }
    .workspace-dialog-shell > header { min-height: 64px; padding: 11px 12px; }
    .workspace-search-form, .library-filter-form { padding-inline: 12px; }
    .workspace-dialog-meta { padding-inline: 12px; }
    .workspace-results { padding-inline: 6px; }
    .workspace-result { grid-template-columns: minmax(0, 1fr); }
    .workspace-result-main { min-height: 58px; }
    .workspace-result-actions { justify-content: flex-end; padding: 0 8px 8px; }
    .workspace-result-actions button, .workspace-result-actions a { min-height: 40px; }
    .library-filter-form { grid-template-columns: minmax(0, 1fr) 125px; }
    .project-dialog-body { padding: 17px 14px 24px; }
    .project-content-grid { grid-template-columns: 1fr; }
    .archive-conversation-row { grid-template-columns: 1fr; }
    .archive-conversation-actions { justify-content: flex-start; }
    .workspace-dialog-shell > footer { padding-inline: 12px; }
}

@media (max-width: 440px) {
    .auth-gate { padding: 16px; }
    .auth-card { padding: 28px 22px; border-radius: 20px; }
    .welcome-view h2 { font-size: 28px; }
    .model-picker select { min-width: 110px; max-width: 50vw; }
    .topbar-share-button { width: 36px; justify-content: center; padding: 0; }
    .topbar-share-button span:last-child { display: none; }
    .sidebar-tool-button kbd { display: none; }
    .temporary-chat-button { width: 36px; justify-content: center; padding: 0; }
    .temporary-chat-button span:last-child { display: none; }
    .workspace-dialog-actions .secondary-button { padding-inline: 10px; }
    .library-filter-form { grid-template-columns: 1fr; }
    .library-category-label select { height: 42px; }
}

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

/* Reseller adapter: preserve the source interface while exposing Sub2API routing. */
.auth-card > .primary-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.gateway-picker-row { grid-template-columns: minmax(0, 1fr) 36px; }
.gateway-picker-row > button { display: grid; place-items: center; }
.sidebar-tool-button { text-decoration: none; }

.route-badge {
    max-width: 190px;
    overflow: hidden;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
    border-radius: 999px;
    color: var(--muted);
    background: var(--danger-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route-badge.is-connected {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    color: var(--accent);
    background: var(--accent-soft);
}

.conversation-row.is-busy::before {
    width: 6px;
    height: 6px;
    margin-left: 9px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
    animation: pulse 1s infinite alternate;
}
.composer-note.error { color: var(--danger); }
.message-content .markdown-table-scroll { max-width: 100%; overflow-x: auto; margin: 13px 0; border: 1px solid var(--line); border-radius: 12px; }
.message-content .markdown-table-scroll table { margin: 0; }
.message.user .message-content p { margin-bottom: 8px; }
.message.user .message-content p:last-child { margin-bottom: 0; }

#gatewayPanelContent { min-width: 0; }
.chat-account-shell {
    --wb-bg: var(--surface);
    --wb-surface: var(--surface);
    --wb-surface-strong: var(--surface-subtle);
    --wb-ink: var(--text);
    --wb-muted: var(--muted);
    --wb-faint: var(--faint);
    --wb-line: var(--line);
    --wb-line-strong: var(--line-strong);
    --wb-accent: var(--accent);
    --wb-accent-soft: var(--accent-soft);
    --wb-mint: var(--accent);
    --wb-mint-soft: var(--accent-soft);
    --wb-coral-soft: var(--danger-soft);
    --wb-warn: var(--danger);
    min-height: 0;
    color: var(--text);
    background: transparent;
    font-family: inherit;
}
.chat-account-shell .wb-account-panel {
    overflow: visible;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.chat-account-shell .wb-panel-head { min-height: 52px; padding: 13px 15px; }
.chat-account-shell .wb-panel-head h2 { font-size: 14px; }
.chat-account-shell .wb-account-body { padding: 15px; }
.chat-account-shell .wb-button-primary,
.chat-account-shell .wb-button-primary:hover:not(:disabled) {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
}
.chat-account-shell .wb-balance strong { font-size: 22px; }
.chat-account-shell .wb-balance-link { color: var(--accent); }
.chat-account-shell .wb-key-create { background: var(--surface-subtle); }
.chat-account-shell .wb-route-identity { background: var(--surface-subtle); }
.chat-account-shell .wb-account-stat { background: var(--surface-subtle); }
.chat-account-shell .wb-source-live { color: var(--accent) !important; }

@media (max-width: 760px) {
    .toast-region { top: 66px; right: 10px; left: 10px; }
    .toast { width: 100%; max-width: none; }
    .route-badge { max-width: 120px; }
    .dialog-shell > footer { flex-wrap: wrap; }
    .dialog-shell > footer p { flex-basis: 100%; }
}

@media (max-width: 440px) {
    .route-badge { display: none; }
}

/* v13: align the conversation rail with the shared workbench navigation. */
.app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    height: 100dvh;
    min-height: 100%;
}

.chat-sidebar {
    --chat-sidebar-bg: #f4f4f0;
    --chat-sidebar-surface: #f8faf8;
    --chat-sidebar-strong: #e7efec;
    --chat-sidebar-ink: #17231f;
    --chat-sidebar-muted: #65716e;
    --chat-sidebar-faint: #8b9692;
    --chat-sidebar-line: #d6dfda;
    --chat-sidebar-line-strong: #b8c7c0;
    --chat-sidebar-accent: #5f58c6;
    --chat-sidebar-accent-soft: #ecebff;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 14px 10px 10px;
    border-right-color: var(--chat-sidebar-line);
    color: var(--chat-sidebar-ink);
    background: var(--chat-sidebar-bg);
}

html[data-theme="dark"] .chat-sidebar {
    --chat-sidebar-bg: #171815;
    --chat-sidebar-surface: #20211f;
    --chat-sidebar-strong: #31322f;
    --chat-sidebar-ink: #f2f2ed;
    --chat-sidebar-muted: #b4b4ac;
    --chat-sidebar-faint: #85857e;
    --chat-sidebar-line: rgba(255, 255, 250, .1);
    --chat-sidebar-line-strong: rgba(255, 255, 250, .2);
    --chat-sidebar-accent: #4fba99;
    --chat-sidebar-accent-soft: #173c31;
}

.chat-sidebar .sidebar-header {
    height: auto;
    min-height: 38px;
    padding: 0 6px 10px;
}
.chat-sidebar .wordmark {
    gap: 9px;
    color: var(--chat-sidebar-ink);
    font-size: 13px;
    font-weight: 700;
}
.chat-sidebar .brand-mark-small {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 10px;
    color: var(--chat-sidebar-bg);
    background: var(--chat-sidebar-ink);
    box-shadow: none;
    font-size: 13px;
}
.chat-sidebar .new-chat-button {
    min-height: 42px;
    margin: 0;
    padding: 0 11px;
    border-color: var(--chat-sidebar-line-strong);
    border-radius: 10px;
    color: var(--chat-sidebar-ink);
    background: transparent;
    box-shadow: none;
}
.chat-sidebar .new-chat-button:hover {
    border-color: var(--chat-sidebar-ink);
    background: var(--chat-sidebar-surface);
}

.chat-route {
    display: grid;
    gap: 3px;
    margin: 19px 0 4px;
}
.chat-route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 26px;
    padding: 0 4px 0 9px;
}
.sidebar-section-label {
    margin: 0;
    color: var(--chat-sidebar-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
.chat-route-header button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--chat-sidebar-muted);
    background: transparent;
    font-size: 17px;
}
.chat-route-header button:hover {
    color: var(--chat-sidebar-ink);
    background: var(--chat-sidebar-strong);
}
.chat-route-select {
    min-width: 0;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 7px 0 11px;
    border-radius: 9px;
    color: var(--chat-sidebar-muted);
}
.chat-route-select:hover {
    background: var(--chat-sidebar-strong);
}
.chat-route-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-sidebar-accent);
}
.chat-route-select select {
    width: 100%;
    min-width: 0;
    height: 36px;
    overflow: hidden;
    padding: 0 4px;
    border: 0;
    color: var(--chat-sidebar-muted);
    background: transparent;
    font-size: 12px;
    text-overflow: ellipsis;
}
.chat-route-select select:focus { outline: 0; }
.chat-route-select:focus-within {
    outline: 2px solid var(--chat-sidebar-accent);
    outline-offset: 2px;
}
.chat-route-select select:disabled { opacity: .6; }

.chat-sidebar .workspace-section-label {
    margin: 19px 9px 7px;
}
.chat-sidebar .sidebar-tools {
    gap: 2px;
    margin: 0 0 4px;
}
.chat-sidebar .sidebar-tool-button {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--chat-sidebar-muted);
    background: transparent;
    font-size: 13px;
}
.chat-sidebar .sidebar-tool-button:hover,
.chat-sidebar .sidebar-tool-button.is-active {
    color: var(--chat-sidebar-ink);
    background: var(--chat-sidebar-strong);
}
.chat-sidebar .sidebar-tool-button.is-active { font-weight: 650; }
.chat-sidebar .sidebar-tool-button > span:first-child {
    width: 18px;
    color: var(--chat-sidebar-faint);
    text-align: center;
}
.chat-sidebar .sidebar-tool-button.is-active > span:first-child { color: var(--chat-sidebar-accent); }

.chat-sidebar .conversation-list {
    min-height: 0;
    padding-top: 5px;
}
.chat-sidebar .conversation-group-title {
    margin: 15px 9px 6px;
    color: var(--chat-sidebar-faint);
    font-size: 11px;
}
.chat-sidebar .conversation-row { border-radius: 9px; }
.chat-sidebar .conversation-row.active,
.chat-sidebar .conversation-row:hover {
    background: var(--chat-sidebar-strong);
}
.chat-sidebar .conversation-link {
    min-height: 36px;
    padding: 8px 35px 8px 10px;
    color: var(--chat-sidebar-ink);
    font-size: 13px;
}
.chat-sidebar .conversation-more { color: var(--chat-sidebar-muted); }
.chat-sidebar .conversation-more:hover { background: var(--chat-sidebar-surface); }
.chat-sidebar .conversation-empty {
    padding: 18px 9px;
    color: var(--chat-sidebar-muted);
    font-size: 12px;
    text-align: left;
}

.chat-sidebar .retention-notice {
    margin: 8px 2px 10px;
    padding: 10px 10px;
    border-color: var(--chat-sidebar-line);
    border-radius: 8px;
    background: var(--chat-sidebar-surface);
}
.chat-sidebar .retention-notice strong { font-size: 11px; }
.chat-sidebar .retention-notice small { font-size: 10px; }
.chat-sidebar .sidebar-footer {
    padding-top: 0;
    border-top: 0;
}
.chat-sidebar .sidebar-source {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 5px 4px;
    padding: 10px 5px 9px;
    border-top: 1px solid var(--chat-sidebar-line);
    color: var(--chat-sidebar-muted);
    font-size: 11px;
}
.chat-sidebar .source-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--chat-sidebar-accent);
}
.chat-sidebar .sidebar-source div { display: grid; min-width: 0; gap: 2px; }
.chat-sidebar .sidebar-source strong { color: var(--chat-sidebar-ink); font-size: 11px; }
.chat-sidebar .sidebar-source small { color: var(--chat-sidebar-faint); font-size: 10px; }
.chat-sidebar .sidebar-account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin: 0 5px 2px;
    padding: 0 9px;
    border-radius: 8px;
    color: var(--chat-sidebar-muted);
    font-size: 11px;
    text-decoration: none;
}
.chat-sidebar .sidebar-account-link:hover {
    color: var(--chat-sidebar-ink);
    background: var(--chat-sidebar-strong);
}
.chat-sidebar .profile-button {
    min-height: 42px;
    padding: 5px 8px;
    border-radius: 9px;
    color: var(--chat-sidebar-ink);
}
.chat-sidebar .profile-button:hover { background: var(--chat-sidebar-strong); }
.chat-sidebar .profile-button .avatar { width: 30px; height: 30px; }
.chat-sidebar .profile-copy strong { font-size: 12px; }
.chat-sidebar .profile-copy small { color: var(--chat-sidebar-muted); font-size: 10px; }

@media (max-width: 760px) {
    .app-shell { grid-template-columns: 1fr; }
    .chat-sidebar {
        width: min(284px, 86vw);
        padding: 14px 10px 10px;
        box-shadow: 12px 0 32px rgba(0, 0, 0, .18);
    }
    .chat-sidebar .sidebar-tool-button,
    .chat-sidebar .conversation-link,
    .chat-sidebar .sidebar-account-link { min-height: 42px; }
    .chat-sidebar .chat-route-select,
    .chat-sidebar .chat-route-select select { min-height: 42px; height: 42px; }
    .chat-sidebar .chat-route-header button { width: 42px; height: 42px; }
}

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