/* Theme tokens */
:root {
    color-scheme:light;
    --canvas:#fff;
    --sidebar:#f5f6f5;
    --raised:#f7f8f7;
    --text:#17211d;
    --muted:#53645a;
    --border:#d6dfd8;
    --accent:#176b4b;
    --on-accent:#fff;
    --error:#a32632;
    --tint:#eaf2ed;
    --shadow:0 4px 24px #17211d08;
    --focus-tint:#176b4b15;
}
@media(prefers-color-scheme:dark) {
    :root:not([data-theme=light]) {
        color-scheme:dark;
        --canvas:#161c19;
        --sidebar:#101612;
        --raised:#202923;
        --text:#eef4ef;
        --muted:#aabbb0;
        --border:#3c4c41;
        --accent:#91d7ad;
        --on-accent:#10291b;
        --error:#ffadb4;
        --tint:#24392c;
        --shadow:0 4px 24px #0002;
        --focus-tint:#91d7ad18;
    }
}
:root[data-theme=dark] {
    color-scheme:dark;
    --canvas:#161c19;
    --sidebar:#101612;
    --raised:#202923;
    --text:#eef4ef;
    --muted:#aabbb0;
    --border:#3c4c41;
    --accent:#91d7ad;
    --on-accent:#10291b;
    --error:#ffadb4;
    --tint:#24392c;
    --shadow:0 4px 24px #0002;
    --focus-tint:#91d7ad18;
}

/* Base controls and accessibility */
* {
    box-sizing:border-box;
}
body {
    margin:0;
    font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--canvas);
    color:var(--text);
}
button,input,textarea,select {
    font:inherit;
    color:inherit;
}
button,a,select {
    -webkit-tap-highlight-color:transparent;
}
button,a,input,textarea,select {
    touch-action:manipulation;
}
button {
    cursor:pointer;
}
button:disabled {
    cursor:default;
    opacity:.45;
}
a {
    color:inherit;
    text-decoration:none;
}
button {
    border:1px solid var(--border);
    border-radius:10px;
    background:transparent;
    min-height:44px;
    padding:8px 14px;
}
button:hover:not(:disabled) {
    background:var(--tint);
}
:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
}
[hidden] {
    display:none!important;
}
p,h1,h2 {
    margin:0;
}
textarea,input,select {
    background:var(--canvas);
}
.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;
}
.skip-link {
    position:fixed;
    top:-100px;
    left:16px;
    background:var(--canvas);
    padding:12px;
    z-index:10;
}
.skip-link:focus {
    top:8px;
}

/* Workspace and conversation navigation */
#chat-app {
    height:100dvh;
    display:grid;
    grid-template-columns:264px minmax(0,1fr);
    overflow:hidden;
}
#chat-sidebar {
    background:var(--sidebar);
    border-right:1px solid var(--border);
    min-height:0;
}
.sidebar-content {
    height:100%;
    display:flex;
    flex-direction:column;
    padding:24px 16px 16px;
    gap:16px;
    min-height:0;
}
.brand-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:32px;
}
.brand {
    font-size:18px;
    font-weight:650;
    display:flex;
    align-items:center;
    gap:10px;
    letter-spacing:-.5px;
}
.brand-mark,.assistant-symbol,.welcome-mark {
    display:inline-grid;
    place-content:center;
    color:var(--on-accent);
    background:var(--accent);
    border-radius:9px;
    font-weight:700;
    letter-spacing:-1px;
}
.brand-mark {
    width:30px;
    height:32px;
    font-size:21px;
}
.new-chat {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    min-height:46px;
    padding:8px 14px;
    font-weight:600;
    background:var(--canvas);
}
.new-chat:hover {
    border-color:var(--accent);
}
.new-chat span {
    font-size:22px;
    line-height:1;
}
.sidebar-heading {
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    padding:8px 12px 0;
}
.conversation-nav {
    flex:1;
    overflow-y:auto;
    min-height:0;
    margin:0 -4px;
    padding:0 4px;
}
.conversation-link {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    min-height:44px;
    margin-bottom:4px;
}
.conversation-link:hover {
    background:var(--tint);
}
.conversation-link.active {
    background:var(--tint);
    font-weight:600;
    box-shadow:inset 3px 0 var(--accent);
}
.conversation-marker {
    font-size:24px;
    line-height:1;
    color:var(--muted);
}
.active .conversation-marker {
    color:var(--accent);
}
.conversation-title {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sidebar-empty {
    font-size:14px;
    color:var(--muted);
    padding:12px;
}
.sidebar-footer {
    border-top:1px solid var(--border);
    padding:16px 8px 0;
}
.theme-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:13px;
    color:var(--muted);
}
.theme-select {
    min-height:44px;
    max-width:116px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:4px 8px;
    background:var(--sidebar);
    font-size:13px;
}
.account {
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-top:16px;
}
.quiet-button {
    border:0;
    color:var(--muted);
    padding:8px 12px;
}
.sign-out {
    padding-left:0;
    font-size:13px;
}
.local-label {
    font-size:11px;
    color:var(--muted);
    margin-top:4px;
}

/* Conversation header */
#chat-main {
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:64px minmax(0,1fr) auto;
}
.chat-header {
    display:flex;
    align-items:center;
    gap:16px;
    border-bottom:1px solid var(--border);
    padding:0 24px;
    min-width:0;
}
.chat-header h1 {
    flex:1;
    font-size:18px;
    font-weight:600;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.mock-badge {
    display:inline-block;
    vertical-align:middle;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.06em;
    font-weight:600;
    border:1px solid var(--border);
    border-radius:5px;
    padding:3px 6px;
    color:var(--muted);
    white-space:nowrap;
}
.header-actions {
    margin-left:auto;
    display:flex;
    gap:4px;
    flex-shrink:0;
}
.header-actions button {
    font-size:13px;
}
.header-badge {
    font-size:10px;
}
.chat-header>.header-badge:last-child {
    margin-left:auto;
}
#open-drawer {
    display:none;
}

/* Reading column and empty state */
#chat-thread {
    overflow-y:auto;
    overscroll-behavior:contain;
    min-height:0;
    scrollbar-gutter:stable;
}
.reading-column,.composer-column {
    max-width:808px;
    padding:0 24px;
    margin:0 auto;
}
.reading-column {
    padding-top:40px;
    padding-bottom:32px;
}
#welcome {
    max-width:620px;
    margin:clamp(24px,4vh,52px) auto 40px;
}
.welcome-mark {
    height:46px;
    width:44px;
    font-size:29px;
    margin-bottom:24px;
    border-radius:13px;
}
.eyebrow {
    font-size:13px;
    color:var(--accent);
    font-weight:600;
    margin-bottom:12px;
}
#welcome h2 {
    font-size:30px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.8px;
    max-width:440px;
}
.welcome-description {
    margin-top:16px;
    color:var(--muted);
    max-width:490px;
    font-size:15px;
    line-height:1.65;
}
.suggestions {
    margin-top:32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.suggestion {
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-size:13px;
    line-height:1.5;
    padding:16px;
    background:var(--raised);
}
.suggestion span {
    color:var(--accent);
    font-size:18px;
}

/* Message hierarchy */
.chat-turn {
    margin-bottom:40px;
    overflow-wrap:anywhere;
}
.origin-label {
    font-size:12px;
    color:var(--muted);
    text-align:right;
    margin-bottom:8px;
}
.user-message {
    display:table;
    max-width:85%;
    margin-left:auto;
    background:var(--tint);
    padding:12px 20px;
    border-radius:16px 16px 4px 16px;
    white-space:pre-wrap;
}
.assistant-message {
    margin-top:24px;
}
.assistant-label {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
}
.assistant-symbol {
    height:24px;
    width:24px;
    font-size:16px;
    border-radius:6px;
}
.assistant-label .mock-badge {
    font-size:9px;
}
.turn-state {
    font-size:12px;
    color:var(--muted);
    margin-bottom:12px;
}
.answer-text {
    white-space:pre-wrap;
    line-height:1.75;
}
.answer-text:empty {
    display:none;
}
.outcome-text {
    color:var(--muted);
    font-size:13px;
    white-space:pre-wrap;
    margin-top:12px;
}
.outcome-text:empty {
    display:none;
}
.turn-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
}
.turn-actions button {
    font-size:12px;
    border:0;
    color:var(--muted);
    padding:6px 10px;
    min-height:44px;
}
.turn-actions button[data-action=recover] {
    border:1px solid var(--border);
    color:var(--accent);
}
.save-notice {
    font-size:13px;
    border-left:3px solid var(--error);
    padding-left:12px;
    margin-top:16px;
}
.request-details {
    font-size:11px;
    color:var(--muted);
    margin-top:8px;
}
.request-details summary {
    cursor:pointer;
    min-height:32px;
    display:list-item;
    width:fit-content;
}
.request-details code {
    overflow-wrap:anywhere;
}

/* Composer and scroll controls */
.composer-region {
    position:relative;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    background:var(--canvas);
}
#chat-status {
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
    white-space:pre-wrap;
}
#chat-status:empty {
    display:none;
}
#chat-status.error,.error {
    color:var(--error);
}
#chat-composer:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--focus-tint);
}
#chat-composer {
    background:var(--raised);
    border:1px solid var(--border);
    border-radius:20px;
    padding:16px;
    box-shadow:var(--shadow);
}
#chat-question {
    display:block;
    width:100%;
    min-height:28px;
    max-height:180px;
    resize:none;
    background:transparent;
    border:0;
    padding:0 4px;
    line-height:1.6;
    outline-offset:4px;
}
#chat-question::placeholder {
    color:var(--muted);
}
.composer-toolbar {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px;
}
.composer-hint {
    margin-right:auto;
    font-size:11px;
    color:var(--muted);
}
.primary-button {
    background:var(--accent);
    color:var(--on-accent);
    border-color:var(--accent);
    font-size:13px;
    font-weight:600;
}
.primary-button:hover:not(:disabled) {
    background:var(--accent);
    filter:brightness(.94);
}
#chat-send {
    min-width:76px;
}
#chat-stop {
    font-size:13px;
}
#composer-notice {
    font-size:11px;
    color:var(--muted);
    text-align:center;
    padding:10px 0 0;
}
#jump-latest {
    position:absolute;
    left:50%;
    top:-54px;
    transform:translateX(-50%);
    border-radius:24px;
    background:var(--canvas);
    box-shadow:var(--shadow);
    font-size:12px;
    white-space:nowrap;
}

/* Modal actions and mobile navigation */
dialog {
    color:var(--text);
    background:var(--canvas);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    max-width:calc(100vw - 32px);
}
dialog::backdrop {
    background:#08150f66;
}
.action-dialog {
    width:420px;
}
.action-dialog h2 {
    font-size:20px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:16px;
}
.action-dialog label {
    display:block;
    font-size:13px;
    margin-bottom:8px;
}
.action-dialog input {
    width:100%;
    min-height:44px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 12px;
}
.dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:24px;
}
.delete-chat-name {
    font-weight:600;
    margin-bottom:8px;
    overflow-wrap:anywhere;
}
.danger-button {
    background:var(--error);
    color:var(--canvas);
    border-color:var(--error);
}
.action-dialog .error {
    font-size:13px;
    margin-top:12px;
}
#conversation-drawer {
    margin:0;
    top:0;
    left:0;
    height:100dvh;
    width:min(320px,calc(100vw - 40px));
    max-height:100dvh;
    padding:0;
    border:0;
    border-right:1px solid var(--border);
    border-radius:0;
    background:var(--sidebar);
}

/* Narrow screens */
@media(max-width:799px) {
    #chat-app {
        grid-template-columns:minmax(0,1fr);
    }
    #chat-sidebar {
        display:none;
    }
    #open-drawer {
        display:inline-block;
        font-size:12px;
        padding:8px 4px;
        flex-shrink:0;
    }
    .chat-header {
        padding:0 16px;
        gap:12px;
    }
    .chat-header h1 {
        font-size:16px;
    }
    .header-badge {
        display:none;
    }
    .header-actions {
        gap:0;
    }
    .header-actions button {
        padding:8px;
        font-size:12px;
    }
    .reading-column,.composer-column {
        padding-left:16px;
        padding-right:16px;
    }
    .reading-column {
        padding-top:24px;
    }
    .composer-hint {
        display:none;
    }
    #welcome {
        margin-top:32px;
    }
    #welcome h2 {
        font-size:28px;
    }
    .suggestions {
        grid-template-columns:1fr;
        gap:8px;
        margin-top:24px;
    }
    .suggestion {
        padding:12px 16px;
    }
    .composer-region {
        padding-bottom:max(8px,env(safe-area-inset-bottom));
    }
    #composer-notice {
        font-size:10px;
        line-height:1.4;
        padding-top:8px;
    }
    .user-message {
        max-width:90%;
        padding:12px 16px;
    }
    #chat-composer {
        padding:12px;
    }
    .chat-turn {
        margin-bottom:32px;
    }
    .header-actions {
        margin-left:auto;
    }
    #chat-main {
        grid-template-rows:64px minmax(0,1fr) auto;
    }
}

/* Motion preferences */
@media(prefers-reduced-motion:no-preference) {
    button,a {
        transition:background-color .12s,border-color .12s;
    }
}
/* Shared line icons, compact actions and suggestion cards */
.icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}
.icon svg { width: 100%; height: 100%; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.conversation-marker { display: inline-flex; font-size: inherit; opacity: .8; }
.conversation-marker .icon { width: 16px; height: 16px; }
.conversation-link { gap: 10px; }
.new-chat .icon { font-size: inherit; line-height: 1; }
.sidebar-heading { font-size: 11px; letter-spacing: .08em; }
.account { font-weight: 550; }
.sign-out { min-height: 44px; }
.suggestion-copy { display: flex; flex-direction: column; gap: 4px; }
.suggestion .suggestion-copy { color: var(--text); font-size: 13px; }
.suggestion-copy strong { font-weight: 600; }
.suggestion-copy > span { color: var(--muted); font-size: 12px; }
.suggestion > .icon { color: var(--accent); width: 16px; height: 16px; align-self: flex-start; margin-top: 3px; }
.suggestion:hover:not(:disabled) { border-color: var(--accent); }
.turn-state { display: flex; align-items: center; gap: 7px; }
.chat-turn[data-state=running] .turn-state::before,
.chat-turn[data-state=queued] .turn-state::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--accent);
    border-radius: 50%;
}
.chat-turn[data-state=save-failed] .turn-state { color: var(--error); font-weight: 600; }
.turn-actions { margin-left: -10px; }
.turn-actions button:hover:not(:disabled) { color: var(--text); }
.request-details summary { min-height: 44px; padding-top: 8px; }
#chat-question:focus-visible { outline: none; }
#chat-composer:has(#chat-question:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sign in shares the workspace palette and controls */
.login-body { background: var(--sidebar); }
.login-layout {
    min-height: 100dvh;
    width: min(100%, 456px);
    padding: clamp(36px, 10vh, 96px) 24px 32px;
    margin: 0 auto;
}
.login-brand { width: fit-content; margin: 0 auto 36px; }
.login-panel {
    padding: 36px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--canvas);
    box-shadow: var(--shadow);
}
.login-panel h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.7px; font-weight: 600; }
.login-panel .eyebrow { margin-bottom: 12px; font-size: 12px; }
.login-intro { margin-top: 12px; color: var(--muted); font-size: 14px; }
.login-form { margin-top: 28px; }
.login-form label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 600; }
.login-form input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 15px;
}
.login-form input::placeholder { color: var(--muted); opacity: .8; }
.login-form button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 28px; }
.login-error { border-left: 3px solid var(--error); padding-left: 12px; margin-top: 20px; font-size: 13px; }
.login-note { margin: 24px auto 0; text-align: center; color: var(--muted); font-size: 12px; max-width: 300px; }

/* Keep a useful title and visible actions on small phones */
@media (max-width: 479px) {
    .chat-header { gap: 8px; padding: 0 12px; }
    .chat-header h1 { font-size: 15px; }
    .chat-header .action-label { display: none; }
    #open-drawer { display: inline-flex; width: 44px; padding: 8px; }
    .header-actions .icon-button { width: 44px; padding: 8px; }
    #welcome { margin-top: 20px; margin-bottom: 24px; }
    .welcome-mark { width: 40px; height: 42px; margin-bottom: 20px; }
    #welcome h2 { font-size: 27px; }
    .welcome-description { font-size: 14px; margin-top: 12px; }
    .suggestions { margin-top: 20px; }
    .suggestion { padding: 12px 14px; }
    .login-layout { padding: 40px 20px 28px; }
    .login-brand { margin-bottom: 28px; }
    .login-panel { padding: 28px 24px; border-radius: 16px; }
}