/* Neutral light / dark theme for the web app. theme.js sets html[data-theme]; every rule is scoped to it
   so it outranks the page's inline styles and the styles scripts inject at runtime. */
html[data-theme] {
    --cf-bg: #fafafa;
    --cf-panel: #ffffff;
    --cf-raised: #ffffff;
    --cf-line: #ececec;
    --cf-line-strong: #dedede;
    --cf-text: #0a0a0a;
    --cf-text-2: #404040;
    --cf-muted: #737373;
    --cf-faint: #a3a3a3;
    --cf-hover: #f4f4f5;
    --cf-active: #ededee;
    --cf-accent: #0a0a0a;
    --cf-accent-hover: #262626;
    --cf-on-accent: #ffffff;
    --cf-chip: #f4f4f5;
    --cf-bubble: #f4f4f5;
    --cf-code: #f6f6f7;
    --cf-green: #16a34a;
    --cf-red: #dc2626;
    --cf-amber: #b45309;
    --cf-focus: rgba(10, 10, 10, 0.18);
    --cf-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --cf-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --cf-overlay: rgba(0, 0, 0, 0.32);
    --cf-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --cf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-theme="dark"] {
    --cf-bg: #0a0a0a;
    --cf-panel: #111111;
    --cf-raised: #161616;
    --cf-line: #1f1f1f;
    --cf-line-strong: #2c2c2c;
    --cf-text: #ededed;
    --cf-text-2: #c9c9c9;
    --cf-muted: #8f8f8f;
    --cf-faint: #5e5e5e;
    --cf-hover: #181818;
    --cf-active: #202020;
    --cf-accent: #ededed;
    --cf-accent-hover: #ffffff;
    --cf-on-accent: #0a0a0a;
    --cf-chip: #1b1b1b;
    --cf-bubble: #1c1c1c;
    --cf-code: #171717;
    --cf-green: #22c55e;
    --cf-red: #f87171;
    --cf-amber: #fbbf24;
    --cf-focus: rgba(237, 237, 237, 0.22);
    --cf-shadow: none;
    --cf-shadow-pop: 0 10px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px #262626;
    --cf-overlay: rgba(0, 0, 0, 0.6);
}

/* ---------- Base ---------- */
html[data-theme] body {
    background: var(--cf-bg);
    color: var(--cf-text);
    font-family: var(--cf-font);
    -webkit-font-smoothing: antialiased;
}
html[data-theme] :focus-visible { outline-color: var(--cf-muted); }
html[data-theme] ::selection { background: var(--cf-focus); }

/* ---------- Desktop shell: full-bleed rail | list | content, separated by 1px lines ---------- */
@media (min-width: 769px) {
    html[data-theme] body .container { padding: 0; }
    /* The off-canvas phone drawer's shadow would peek in at the left edge. */
    html[data-theme] .mobile-nav-drawer { box-shadow: none; }
    html[data-theme] body .main-layout,
    html[data-theme] body .chat-layout { gap: 0; }
    html[data-theme] .main-layout > :not(.main-nav) { border-radius: 0; box-shadow: none; }
    html[data-theme] .main-layout > .users-view,
    html[data-theme] .main-layout > .settings-view,
    html[data-theme] .main-layout > .terminal-view,
    html[data-theme] .main-layout > #approvals-view,
    html[data-theme] .main-layout > #project-audit-view { background: var(--cf-panel); }

    /* Conversation list column */
    html[data-theme] .conversation-sidebar {
        flex: 0 0 300px;
        padding: 0;
        border-radius: 0;
        border-right: 1px solid var(--cf-line);
        background: var(--cf-panel);
        box-shadow: none;
    }
    /* The rail carries the type filters on desktop; 新建 sits beside the search box. */
    html[data-theme] .conversation-sidebar > .conversation-sidebar-head,
    html[data-theme] .conversation-sidebar > .conversation-type-filters { display: none; }
    html[data-theme] .conversation-sidebar > form {
        display: flex;
        align-items: center;
        height: 52px;
        flex-shrink: 0;
        padding: 0 12px;
        border-bottom: 1px solid var(--cf-line);
    }
    /* The search box is width:100% + flex-shrink:0 by default, which pushed 新建 out of the column. */
    html[data-theme] .conversation-sidebar .conversation-search { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
    html[data-theme] .conversation-sidebar > form { gap: 8px; }
    html[data-theme] .conversation-sidebar .conversation-new {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--cf-muted);
        cursor: pointer;
    }
    html[data-theme] .conversation-sidebar .conversation-new:hover { background: var(--cf-hover); color: var(--cf-text); }
    html[data-theme] .conversation-sidebar .conversation-new:focus-visible { outline: 2px solid var(--cf-focus); outline-offset: -2px; }
    html[data-theme] .conversation-item {
        margin: 0;
        padding: 11px 16px;
        border-radius: 0;
        border-bottom: 1px solid var(--cf-line);
    }
    html[data-theme] .conversation-item.active { box-shadow: inset 2px 0 0 var(--cf-accent); }

    /* Chat column */
    html[data-theme] .chat-container {
        padding: 0 0 18px;
        border-radius: 0;
        background: var(--cf-panel);
        box-shadow: none;
    }
    html[data-theme] .chat-header { min-height: 52px; padding: 0 12px; }
    html[data-theme] .chat-messages { padding: 24px max(28px, calc((100% - 960px) / 2)); }
    html[data-theme] .chat-input-area { width: calc(100% - 56px); }
    html[data-theme] .message.user { max-width: min(78%, 680px); }

    /* Other views get a flat page with a hairline header. */
    html[data-theme] .users-view,
    html[data-theme] .settings-view { padding: 0; }
    html[data-theme] .users-view > .view-header,
    html[data-theme] .settings-view > .view-header,
    html[data-theme] .terminal-view > .view-header {
        min-height: 52px;
        margin: 0;
        padding: 0 24px;
        border-bottom: 1px solid var(--cf-line);
        background: var(--cf-panel);
    }
    html[data-theme] .users-view > .users-content { margin: 0; padding: 20px 24px; }
    html[data-theme] .users-view > .users-toolbar { margin: 0; padding: 16px 24px 0; }
    html[data-theme] .users-view > .users-toolbar + .users-content { padding-top: 12px; }
    html[data-theme] .users-view > .users-pagination { padding: 10px 24px; border-top: 1px solid var(--cf-line); }
}

/* ---------- Left rail ---------- */
html[data-theme] .main-nav {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    padding: 14px 10px 12px;
    overflow-y: auto;
    scrollbar-width: none;
    border-right: 1px solid var(--cf-line);
    background: var(--cf-bg);
}
html[data-theme] .main-nav::-webkit-scrollbar { display: none; }
html[data-theme] .main-nav-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; }
html[data-theme] .main-nav-logo { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; }
html[data-theme] .main-nav-brand-name { color: var(--cf-text); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
html[data-theme] .main-nav-svg { width: 15px; height: 15px; flex-shrink: 0; }
html[data-theme] .main-nav button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
html[data-theme] .main-nav-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-theme] .main-nav button:focus-visible { outline: 2px solid var(--cf-focus); outline-offset: -2px; }
html[data-theme] .main-nav-section { padding: 0 10px 4px; color: var(--cf-faint); font-size: 11px; letter-spacing: .02em; }
html[data-theme] .main-nav-kinds { display: flex; flex-direction: column; gap: 1px; }
/* Frequent: conversation types, full size. */
html[data-theme] .main-nav .main-nav-kind {
    height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    color: var(--cf-muted);
    font-size: 13px;
    font-weight: 450;
}
html[data-theme] .main-nav .main-nav-kind:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme][data-main-view="chat"] .main-nav .main-nav-kind[aria-pressed="true"] {
    background: var(--cf-active);
    color: var(--cf-text);
    font-weight: 500;
}
/* Red dot on 项目 while any project waits for an answer, seen from every page. */
html[data-theme] .main-nav-kind-dot {
    width: 7px;
    height: 7px;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ef4444;
}
html[data-theme] .main-nav-kind-dot[hidden] { display: none; }
/* 审批 sits with the conversation types at the same size; its badge counts pending items. */
html[data-theme] .main-nav .main-nav-approvals {
    height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    color: var(--cf-muted);
    font-size: 13px;
    font-weight: 450;
}
html[data-theme] .main-nav .main-nav-approvals:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] .main-nav .main-nav-approvals.active { background: var(--cf-active); color: var(--cf-text); font-weight: 500; }
/* Pinned conversations, below the types. */
html[data-theme] .main-nav-pins { margin-top: 14px; }
html[data-theme] .main-nav-pins[hidden] { display: none; }
html[data-theme] .main-nav-pins-list { display: flex; flex-direction: column; gap: 1px; }
html[data-theme] .main-nav .main-nav-pin {
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    color: var(--cf-muted);
    font-size: 13px;
}
html[data-theme] .main-nav .main-nav-pin:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme][data-main-view="chat"] .main-nav .main-nav-pin[aria-current="true"] { background: var(--cf-active); color: var(--cf-text); }
html[data-theme] .main-nav-pin-dot {
    width: 6px;
    height: 6px;
    margin: 0 4.5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cf-faint);
}
html[data-theme] .main-nav-pin-dot.running { background: var(--cf-green); }
/* Bottom of the rail: the account entry; the rarer tools live in 设置. */
html[data-theme] .main-nav-utils {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--cf-line);
}
/* Pending-approval count: a red notification pill, so waiting 审批 stand out from the grey rail like the phone tab badge. */
html[data-theme] .main-nav-badge {
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(220, 38, 38, .35);
}
html[data-theme="dark"] .main-nav-badge { background: #e5484d; box-shadow: none; }
html[data-theme] .main-nav-badge[hidden] { display: none; }
/* Account entry at the very bottom, the rail's 设置 entry: avatar and username, opening 设置 at 账户与安全 (passkeys, password). */
html[data-theme] .main-nav .main-nav-account {
    height: 36px;
    margin-top: 6px;
    padding: 0 8px;
    border-radius: 7px;
    color: var(--cf-text-2);
    font-size: 13px;
}
html[data-theme] .main-nav .main-nav-account:hover { background: var(--cf-hover); color: var(--cf-text); }
/* It is the rail's only way into 设置, so it stays highlighted there (终端, 用户 and 操作日志 live inside 设置 too). */
html[data-theme][data-main-view="settings"] .main-nav .main-nav-account,
html[data-theme][data-main-view="terminal"] .main-nav .main-nav-account,
html[data-theme][data-main-view="users"] .main-nav .main-nav-account,
html[data-theme][data-main-view="audit"] .main-nav .main-nav-account { background: var(--cf-active); color: var(--cf-text); }
html[data-theme] .main-nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cf-accent, #0a0a0a);
    color: var(--cf-on-accent, #fff);
    font-size: 12px;
    font-weight: 600;
}
html[data-theme="light"] .theme-icon-sun,
html[data-theme="dark"] .theme-icon-moon { display: none; }

/* Narrow desktops: icon-only rail. */
@media (max-width: 1024px) and (min-width: 769px) {
    html[data-theme] .main-nav { flex-basis: 56px; padding: 12px 8px; align-items: stretch; }
    html[data-theme] .main-nav-brand { justify-content: center; padding: 4px 0 12px; }
    html[data-theme] .main-nav-brand-name,
    html[data-theme] .main-nav-label,
    html[data-theme] .main-nav-section { display: none; }
    html[data-theme] .main-nav button { justify-content: center; padding: 0; }
    html[data-theme] .main-nav .main-nav-approvals { position: relative; }
    /* Pinned to the icon's top-right corner, ringed in the rail colour so it reads as a separate dot over the icon. */
    html[data-theme] .main-nav-badge { position: absolute; top: 0; left: 50%; margin: 0 0 0 2px; box-shadow: 0 0 0 2px var(--cf-bg); }
    html[data-theme] .main-nav-kind-dot { position: absolute; margin: -14px -16px 0 0; }
    html[data-theme] .main-nav-pins { display: none; }
}
@media (max-width: 768px) {
    html[data-theme] .main-nav { display: none; }
}

/* ---------- Conversation list ---------- */
html[data-theme] .conversation-sidebar { background: var(--cf-panel); color: var(--cf-text); }
html[data-theme] .conversation-sidebar h3 { color: var(--cf-text); }
html[data-theme] .conversation-search {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--cf-line-strong);
    border-radius: 7px;
    background: var(--cf-panel);
    color: var(--cf-text);
    font-size: 13px;
}
html[data-theme] .conversation-search::placeholder { color: var(--cf-faint); }
html[data-theme] .conversation-search:focus { outline: none; border-color: var(--cf-muted); box-shadow: 0 0 0 3px var(--cf-focus); }
/* The list heading's log, search and + buttons share one muted line-icon look. */
html[data-theme] .system-log-entry,
html[data-theme] .conversation-new-icon,
html[data-theme] .conversation-search-toggle { color: var(--cf-muted); }
html[data-theme] .system-log-entry:hover,
html[data-theme] .conversation-new-icon:hover,
html[data-theme] .conversation-search-toggle:hover,
html[data-theme] .conversation-search-toggle[aria-expanded="true"] { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] .conversation-item:hover { background: var(--cf-hover); }
html[data-theme] .conversation-item.active { background: var(--cf-hover); }
html[data-theme] .conversation-title { color: var(--cf-text); font-size: 13.5px; font-weight: 500; }
html[data-theme] .conversation-time,
html[data-theme] .conversation-execution-host,
html[data-theme] .conversation-match { color: var(--cf-muted); font-size: 12px; }
html[data-theme] .conversation-type-badge,
html[data-theme] .conversation-type-badge.task,
html[data-theme] .conversation-type-badge.project,
html[data-theme] .conversation-type-badge.employee {
    padding: 0 5px;
    border: 1px solid var(--cf-line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--cf-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
}
html[data-theme] .conversation-type-badge.chat { padding: 0; border: 0; }
html[data-theme] .conversation-member-avatar { box-shadow: 0 0 0 1px var(--cf-panel); }
html[data-theme] .conversation-members:hover { background: var(--cf-hover); }
html[data-theme] .execution-host-online { color: var(--cf-green); }
html[data-theme] .execution-host-offline { color: var(--cf-red); }
html[data-theme] .conversation-menu-btn { color: var(--cf-muted); }
html[data-theme] .conversation-menu-btn:hover { background: var(--cf-active); color: var(--cf-text); }
html[data-theme] .conversation-loading,
html[data-theme] .conversation-list > div:not(.conversation-item) { color: var(--cf-faint); }
html[data-theme] .conversation-loading-spinner,
html[data-theme] .chat-history-spinner { border-color: var(--cf-line-strong); border-top-color: var(--cf-text); }
/* A row is the name with its status and menu on one line, and one quiet meta line under it. */
html[data-theme] .conversation-header { justify-content: flex-start; gap: 8px; }
html[data-theme] .conversation-header .conversation-title { margin-bottom: 0; }
html[data-theme] .conversation-header .conversation-type-badge { margin: 0; }
html[data-theme] .conversation-header .conversation-loading-spinner { width: 14px; height: 14px; margin: 0; }
html[data-theme] .conversation-time { margin-top: 3px; line-height: 1.4; }
@media (max-width: 768px) {
    html[data-theme] .conversation-list { padding: 4px 0 12px; }
    html[data-theme] .conversation-item { margin: 0 0 2px; padding: 12px 6px 12px 12px; border-radius: 10px; transition: background-color 0.15s; }
    html[data-theme] .conversation-item.active { background: var(--cf-active); box-shadow: none; }
    html[data-theme] .conversation-title { font-size: 15px; line-height: 22px; }
    html[data-theme] .conversation-time { font-size: 12.5px; }
    html[data-theme] .conversation-header .conversation-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0 -6px auto; padding: 0; }
}
html[data-theme] .conversation-list::-webkit-scrollbar-track { background: transparent; }
html[data-theme] .conversation-list::-webkit-scrollbar-thumb { background: var(--cf-line-strong); }

/* Type filters (phones keep them above the list). */
html[data-theme] .conversation-type-filters .chat-quick-phrase { border-radius: 6px; }
@media (max-width: 768px) {
    html[data-theme] .conversation-type-filters .chat-quick-phrase { padding: 6px 2px; font-size: 14px; }
}
html[data-theme] [data-conversation-type].chat-quick-phrase[aria-pressed="true"] {
    border-color: var(--cf-accent);
    background: var(--cf-accent);
    color: var(--cf-on-accent);
}

/* Menus and popovers */
html[data-theme] .conversation-menu,
html[data-theme] .chat-session-menu-panel {
    border: 0;
    border-radius: 8px;
    background: var(--cf-raised);
    box-shadow: var(--cf-shadow-pop);
}
html[data-theme] .conversation-menu-item,
html[data-theme] .chat-session-menu-panel button {
    border-bottom: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--cf-text-2) !important;
    font-size: 13px;
}
html[data-theme] .conversation-menu { padding: 4px; }
html[data-theme] .conversation-menu-item:hover,
html[data-theme] .chat-session-menu-panel button:hover { background: var(--cf-hover); }
html[data-theme] .conversation-menu-item.delete,
html[data-theme] .chat-session-menu-panel #delete-current-chat-btn,
html[data-theme] .chat-session-menu-panel #clear-chat-btn { color: var(--cf-red) !important; }

/* ---------- Chat ---------- */
html[data-theme] .chat-container { background: var(--cf-panel); }
html[data-theme] .chat-header { border-bottom: 1px solid var(--cf-line); background: var(--cf-panel); }
html[data-theme] .chat-container #chat-heading { color: var(--cf-text); font-size: 14px; font-weight: 600; }
html[data-theme] .chat-header .chat-header-button,
html[data-theme] .chat-header-left .chat-header-button,
html[data-theme] .chat-header #temporary-chat-btn,
html[data-theme] .chat-header .chat-session-menu summary { color: var(--cf-muted); }
html[data-theme] .chat-header .chat-header-button svg { width: 18px; height: 18px; }
html[data-theme] .chat-header-button:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] #conversation-kind-context { background: var(--cf-chip) !important; color: var(--cf-text-2); border-radius: 0 !important; border-bottom: 1px solid var(--cf-line); }
html[data-theme] .chat-messages { background: var(--cf-panel); border-radius: 0; }
html[data-theme] .chat-messages:empty::before { color: var(--cf-faint); }
html[data-theme] .chat-scroll-latest { border-color: var(--cf-line-strong); background: var(--cf-raised); color: var(--cf-text-2); box-shadow: var(--cf-shadow-pop); }
html[data-theme] .chat-scroll-latest:hover { background: var(--cf-hover); }

/* Assistant replies read like a document; user messages are a quiet bubble on the right. */
html[data-theme] .message { margin-bottom: 26px; }
html[data-theme] .message.assistant { padding: 0; border-radius: 0; background: transparent; }
html[data-theme] .message.user {
    width: fit-content;
    margin-left: auto;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--cf-bubble);
}
html[data-theme] .message-label { margin-bottom: 8px; color: var(--cf-text); font-size: 12px; font-weight: 500; }
html[data-theme] .message.user .message-label { color: var(--cf-muted); }
html[data-theme] .message-time { color: var(--cf-faint); }
html[data-theme] .message-content { color: var(--cf-text); font-size: 14px; line-height: 1.7; }
html[data-theme] #chat-messages.temporary-chat .message { border: 1px dashed var(--cf-line-strong); }
html[data-theme] #chat-messages.temporary-chat .message.assistant { padding: 12px; border-radius: 10px; }
html[data-theme] .chat-stream-status { color: var(--cf-muted) !important; }
html[data-theme] .chat-project-status { color: var(--cf-muted); }
html[data-theme] .chat-project-quote { border-left-color: var(--cf-line-strong); background: var(--cf-chip); }
html[data-theme] .chat-project-quote-label { color: var(--cf-muted); }
html[data-theme] .chat-project-supplement textarea { border-color: var(--cf-line-strong); background: var(--cf-panel); color: var(--cf-text); }

/* Markdown */
html[data-theme] .chat-markdown h1, html[data-theme] .chat-markdown h2, html[data-theme] .chat-markdown h3 { font-weight: 600; letter-spacing: -0.01em; }
html[data-theme] .chat-markdown h1 { font-size: 1.35em; }
html[data-theme] .chat-markdown h2 { font-size: 1.2em; }
html[data-theme] .chat-markdown h3, html[data-theme] .chat-markdown h4 { font-size: 1em; }
html[data-theme] .chat-markdown blockquote { border-left: 2px solid var(--cf-line-strong); color: var(--cf-muted); }
html[data-theme] .chat-markdown hr { border-top-color: var(--cf-line); }
html[data-theme] .chat-markdown :not(pre) > code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cf-chip);
    color: var(--cf-text);
    font: 0.86em var(--cf-mono);
}
html[data-theme] .chat-markdown a { color: var(--cf-text); text-decoration-color: var(--cf-faint); text-underline-offset: 2px; }
html[data-theme] .chat-markdown a:hover { text-decoration-color: var(--cf-text); }
html[data-theme] .chat-markdown table { border-color: var(--cf-line); }
html[data-theme] .chat-markdown th, html[data-theme] .chat-markdown td { border-color: var(--cf-line) !important; }
html[data-theme] .chat-markdown th { background: var(--cf-chip); font-weight: 500; }
html[data-theme] .message-content .chat-code-block { border: 1px solid var(--cf-line); border-radius: 8px; background: var(--cf-code); }
html[data-theme] .message-content .chat-code-block > :first-child { border-bottom-color: var(--cf-line) !important; background: transparent !important; color: var(--cf-muted) !important; }
html[data-theme] .message-content .chat-code-block button { color: var(--cf-muted) !important; }
html[data-theme] .message-content .chat-code-block pre,
html[data-theme] .message-content .chat-code-block code { background: transparent !important; color: var(--cf-text); font-family: var(--cf-mono); }
html[data-theme] .chat-file-download { border-color: var(--cf-line-strong); background: transparent; color: var(--cf-text-2); }
html[data-theme] .chat-file-download:hover:not(:disabled) { background: var(--cf-hover); }

/* Small pill buttons: quick phrases, message actions, type filters. */
html[data-theme] .chat-quick-phrase {
    padding: 3px 10px;
    border: 1px solid var(--cf-line);
    border-radius: 6px;
    background: transparent;
    color: var(--cf-muted);
    font-size: 12px;
}
html[data-theme] .chat-quick-phrase:hover { border-color: var(--cf-line-strong); background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] #chat-document-status,
html[data-theme] #chat-voice-status { color: var(--cf-muted) !important; }

/* Composer: one bordered box with a dark send button. */
html[data-theme] .chat-input {
    border: 1px solid var(--cf-line-strong);
    border-radius: 12px;
    background: var(--cf-panel);
    color: var(--cf-text);
    font-size: 14px;
    box-shadow: var(--cf-shadow);
}
html[data-theme] .chat-input::placeholder { color: var(--cf-faint); }
html[data-theme] .chat-input:focus { border-color: var(--cf-muted); box-shadow: 0 0 0 3px var(--cf-focus); }
html[data-theme] .chat-btn,
html[data-theme] #send-btn {
    border-radius: 8px;
    background: var(--cf-accent);
    color: var(--cf-on-accent);
    box-shadow: none;
}
html[data-theme] .chat-btn:hover:not(:disabled) { background: var(--cf-accent-hover); transform: none; }
html[data-theme] .chat-btn:disabled { background: var(--cf-active); color: var(--cf-faint); }
html[data-theme] #chat-voice-button { background: transparent; color: var(--cf-muted); }
html[data-theme] #chat-voice-button:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] #chat-voice-button[aria-pressed="true"] { background: var(--cf-red); color: #fff; }
html[data-theme] .chat-image-pick { color: var(--cf-muted); }
html[data-theme] .chat-image-pick:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] .image-preview-container { background: transparent; }

/* ---------- Pages: users, settings, terminal, approvals, audit ---------- */
html[data-theme] .users-view,
html[data-theme] .settings-view,
html[data-theme] .terminal-view { background: var(--cf-panel); color: var(--cf-text); }
html[data-theme] .view-header h2 { color: var(--cf-text); font-size: 15px; font-weight: 600; }
html[data-theme] .settings-card,
html[data-theme] .users-table-container {
    border: 1px solid var(--cf-line);
    border-radius: 10px;
    background: var(--cf-panel);
    box-shadow: none;
}
html[data-theme] .settings-card-title { color: var(--cf-text); font-size: 14px; }
html[data-theme] .settings-form .form-group label,
html[data-theme] .form-group label { color: var(--cf-text-2); }
html[data-theme] .users-table th { background: var(--cf-bg); color: var(--cf-muted); font-weight: 500; }
html[data-theme] .users-table td { border-color: var(--cf-line); color: var(--cf-text-2); }
html[data-theme] .users-table tr:hover td { background: var(--cf-hover); }
html[data-theme] .users-table thead { border-bottom: 1px solid var(--cf-line); background: var(--cf-bg); }
html[data-theme] .users-table th { padding: 10px 14px; text-transform: none; letter-spacing: 0; font-size: 12px; }
html[data-theme] .users-table td { padding: 12px 14px; font-size: 13px; }
html[data-theme] .users-table tbody tr { border-bottom-color: var(--cf-line); }
html[data-theme] .users-table tbody tr:hover { background: var(--cf-hover); }
html[data-theme] .user-role-badge,
html[data-theme] .user-role-badge.super-admin,
html[data-theme] .user-role-badge.user {
    padding: 0 6px;
    border: 1px solid var(--cf-line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--cf-text-2);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-transform: none;
    white-space: nowrap;
}
html[data-theme] .user-passkey-status.enabled { color: var(--cf-green); }
html[data-theme] .user-passkey-status.disabled { color: var(--cf-faint); }
html[data-theme] .user-actions { flex-wrap: wrap; gap: 2px; }
html[data-theme] .user-action-btn,
html[data-theme] .user-action-btn.edit,
html[data-theme] .user-action-btn.delete {
    padding: 3px 8px;
    border-radius: 5px;
    background: transparent;
    color: var(--cf-text-2);
    font-size: 12.5px;
    white-space: nowrap;
}
html[data-theme] .user-action-btn:hover,
html[data-theme] .user-action-btn.edit:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] .user-action-btn.delete { color: var(--cf-red); }
html[data-theme] .user-action-btn.delete:hover { background: var(--cf-hover); }
html[data-theme] .view-header-actions { gap: 8px; }
html[data-theme] .view-header :is(.primary-btn, .secondary-btn, .score-run-btn) { height: 30px; padding: 0 12px; font-size: 13px; }
html[data-theme] .score-run-btn { border: 1px solid var(--cf-line-strong); border-radius: 7px; background: var(--cf-panel); color: var(--cf-text-2); font-weight: 500; }
html[data-theme] .score-run-btn:hover:not(:disabled) { background: var(--cf-hover); border-color: var(--cf-faint); box-shadow: none; transform: none; }
html[data-theme] .score-run-icon { width: 15px; height: 15px; }
html[data-theme] .usage-ranges button { background: var(--cf-chip); color: var(--cf-text-2); }
html[data-theme] .usage-ranges button.active { background: var(--cf-accent); color: var(--cf-on-accent); }
html[data-theme] .usage-card { background: var(--cf-chip); }
html[data-theme] .usage-card.score { border-color: var(--cf-line); }
html[data-theme] :is(.usage-card-title, .usage-totals strong, .usage-message-preview, .usage-section-title) { color: var(--cf-text); }
html[data-theme] :is(.usage-text, .usage-day > span:last-child) { color: var(--cf-text-2); }
html[data-theme] :is(.usage-card-title span, .usage-subtitle, .usage-note, .usage-totals span, .usage-day, .usage-message-meta span:last-child) { color: var(--cf-muted); }
html[data-theme] :is(.usage-message-meta, .usage-images-note) { color: var(--cf-faint); }
html[data-theme] .usage-day-track { background: var(--cf-line); }
html[data-theme] .usage-day-track span { background: var(--cf-accent); }
html[data-theme] .usage-message { border-bottom-color: var(--cf-line); }
html[data-theme] .usage-message:hover { background: var(--cf-hover); }
html[data-theme] .user-card { border: 1px solid var(--cf-line); background: var(--cf-panel); box-shadow: none; }
html[data-theme] .user-card-name { color: var(--cf-text); }
html[data-theme] .user-card-avatar { background: var(--cf-chip); }
html[data-theme] .user-card-role { background: var(--cf-chip); color: var(--cf-muted); }
html[data-theme] .user-card-role.admin { background: #e0f2fe; color: #0369a1; }
html[data-theme="dark"] .user-card-role.admin { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
html[data-theme] .user-card-meta { color: var(--cf-faint); }
/* Per-user action sheet follows the theme so its options stay readable in dark mode. */
html[data-theme] .user-ownership-link { color: var(--cf-text); }
html[data-theme] .user-ownership-link:hover { background: var(--cf-hover); }
html[data-theme] .terminal-sidebar { border-right-color: var(--cf-line); background: var(--cf-bg); }

/* Approvals */
html[data-theme] #approvals-view { background: var(--cf-panel); }
html[data-theme] .approvals-panel .view-header h2,
html[data-theme] .approval-title { color: var(--cf-text); }
html[data-theme] .approval-tabs { background: var(--cf-chip); }
html[data-theme] .approval-tabs button { color: var(--cf-muted); }
html[data-theme] .approval-tabs button[aria-selected="true"] { background: var(--cf-raised); color: var(--cf-text); box-shadow: var(--cf-shadow); }
html[data-theme] .approval-card { border: 1px solid var(--cf-line); background: var(--cf-panel); }
html[data-theme] .approval-card:hover { border-color: var(--cf-line-strong); }
html[data-theme] .approval-kind { background: var(--cf-chip); color: var(--cf-text-2); }
html[data-theme="dark"] .approval-status-pending { background: rgba(251,191,36,.12); color: var(--cf-amber); }
html[data-theme="dark"] .approval-status-approved { background: rgba(34,197,94,.12); color: var(--cf-green); }
html[data-theme="dark"] .approval-status-rejected { background: rgba(248,113,113,.12); color: var(--cf-red); }
html[data-theme="dark"] .approval-status-cancelled { background: var(--cf-chip); color: var(--cf-muted); }
html[data-theme] .approval-ai-reason { color: var(--cf-muted); }
html[data-theme="dark"] .approval-ai-reviewing { background: rgba(96,165,250,.12); color: #93c5fd; }
html[data-theme="dark"] .approval-ai-passed, html[data-theme="dark"] .approval-risk-low { background: rgba(34,197,94,.12); color: var(--cf-green); border-color: rgba(34,197,94,.3); }
html[data-theme="dark"] .approval-ai-rejected, html[data-theme="dark"] .approval-risk-high { background: rgba(248,113,113,.12); color: var(--cf-red); border-color: rgba(248,113,113,.3); }
html[data-theme="dark"] .approval-risk-medium { background: rgba(251,191,36,.12); color: var(--cf-amber); border-color: rgba(251,191,36,.3); }
html[data-theme="dark"] .approval-ai-failed { background: var(--cf-chip); color: var(--cf-muted); }
html[data-theme="dark"] .approval-ai-review-passed { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.06); }
html[data-theme="dark"] .approval-ai-review-rejected { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
html[data-theme] .approval-ai-card { border-color: var(--cf-line); background: var(--cf-raised); }
html[data-theme] .approval-ai-label { color: var(--cf-text-2); }
html[data-theme="dark"] .approval-ai-none { background: var(--cf-chip); color: var(--cf-muted); }
html[data-theme="dark"] .approval-ai-card-passed { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.06); }
html[data-theme="dark"] .approval-ai-card-rejected { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
html[data-theme="dark"] .approval-ai-card-reviewing { border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.06); }
html[data-theme] .approval-meta { color: var(--cf-muted); }
html[data-theme] .approval-preview { background: var(--cf-code); color: var(--cf-text-2); }
html[data-theme] .approval-time { color: var(--cf-faint); }

/* ---------- Buttons, inputs, dialogs (shared everywhere) ---------- */
html[data-theme] .primary-btn {
    border-radius: 7px;
    background: var(--cf-accent);
    color: var(--cf-on-accent);
    font-weight: 500;
}
html[data-theme] .primary-btn:hover:not(:disabled) { background: var(--cf-accent-hover); box-shadow: none; transform: none; }
html[data-theme] .secondary-btn {
    border: 1px solid var(--cf-line-strong);
    border-radius: 7px;
    background: var(--cf-panel);
    color: var(--cf-text-2);
    font-weight: 500;
}
html[data-theme] .secondary-btn:hover { border-color: var(--cf-faint); background: var(--cf-hover); }
html[data-theme] .form-group input,
html[data-theme] .settings-form input,
html[data-theme] .settings-form select,
html[data-theme] .settings-form textarea,
html[data-theme] .form-control,
html[data-theme] .modal-body input:not([type=checkbox]):not([type=radio]),
html[data-theme] .modal-body select,
html[data-theme] .modal-body textarea,
html[data-theme] .quick-phrase-editor input,
html[data-theme] .quick-phrase-editor textarea {
    border: 1px solid var(--cf-line-strong);
    border-radius: 7px;
    background: var(--cf-panel);
    color: var(--cf-text);
}
html[data-theme] .form-group input:focus,
html[data-theme] .settings-form input:focus,
html[data-theme] .settings-form select:focus,
html[data-theme] .settings-form textarea:focus,
html[data-theme] .modal-body input:focus,
html[data-theme] .modal-body textarea:focus { outline: none; border-color: var(--cf-muted); box-shadow: 0 0 0 3px var(--cf-focus); }
html[data-theme] .modal { background: var(--cf-overlay); }
html[data-theme] .modal-content,
html[data-theme] .custom-confirm-dialog {
    border-radius: 12px;
    background: var(--cf-raised);
    color: var(--cf-text);
    box-shadow: var(--cf-shadow-pop);
}
html[data-theme] .modal-header { border-bottom-color: var(--cf-line); }
html[data-theme] .modal-header h2,
html[data-theme] .modal-header h3,
html[data-theme] .custom-confirm-title { color: var(--cf-text); }
html[data-theme] .custom-confirm-message { color: var(--cf-text-2); }
html[data-theme] .modal-footer { border-top-color: var(--cf-line); }
html[data-theme] .modal-close { background: transparent; color: var(--cf-muted); }
html[data-theme] .modal-close:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] .custom-confirm-btn.confirm { background: var(--cf-accent); color: var(--cf-on-accent); }
html[data-theme] .custom-confirm-btn.cancel { border: 1px solid var(--cf-line-strong); background: var(--cf-panel); color: var(--cf-text-2); }
html[data-theme] .toast { border-left-width: 3px; background: var(--cf-raised); color: var(--cf-text); box-shadow: var(--cf-shadow-pop); }
html[data-theme] .toast-message { color: var(--cf-text); }
html[data-theme] .project-completion button { border-color: var(--cf-line-strong); color: var(--cf-text-2); }
html[data-theme] .project-completion button:hover { background: var(--cf-hover); color: var(--cf-text); }
html[data-theme] .quick-phrase-editor { border-color: var(--cf-line); }

/* ---------- Dark mode: legacy hard-coded colors ---------- */
html[data-theme="dark"] body { color-scheme: dark; }
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-content p,
html[data-theme="dark"] .settings-content,
html[data-theme="dark"] .users-content,
html[data-theme="dark"] .conversation-config-form label { color: var(--cf-text-2); }
html[data-theme="dark"] .conversation-config-form input:not([type=checkbox]),
html[data-theme="dark"] .conversation-config-form select,
html[data-theme="dark"] .conversation-config-form textarea {
    border-color: var(--cf-line-strong);
    background: var(--cf-panel);
    color: var(--cf-text);
}
html[data-theme="dark"] .conversation-config-form small { color: var(--cf-muted); }
html[data-theme] .conversation-config-form [data-permission-link] { color: var(--cf-muted); }
html[data-theme] .conversation-config-form [data-permission-link]:hover { color: var(--cf-text); }
html[data-theme="dark"] .conversation-config-form button[data-close],
html[data-theme="dark"] .conversation-config-form button[data-reload] { background: var(--cf-chip); color: var(--cf-text-2); }
html[data-theme="dark"] dialog { background: var(--cf-raised) !important; color: var(--cf-text) !important; }
html[data-theme="dark"] dialog button { border-color: var(--cf-line-strong) !important; background: var(--cf-chip) !important; color: var(--cf-text-2) !important; }
html[data-theme="dark"] #employee-log-dialog .log-day,
html[data-theme="dark"] #employee-log-dialog .log-preview { color: var(--cf-text-2); }
html[data-theme="dark"] #employee-log-dialog article { border-color: var(--cf-line-strong); }
html[data-theme="dark"] #employee-log-dialog article::before { box-shadow: 0 0 0 3px var(--cf-raised); }
html[data-theme="dark"] #employee-log-dialog .log-badge { background: var(--cf-chip); }
html[data-theme="dark"] table { border-color: var(--cf-line); }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--cf-line) !important; }
html[data-theme="dark"] .users-table-container th { background: var(--cf-bg) !important; color: var(--cf-muted) !important; }
html[data-theme="dark"] .users-table-container td { color: var(--cf-text-2) !important; }
html[data-theme="dark"] .settings-card :is(p, small, span, li) { color: var(--cf-muted); }
html[data-theme="dark"] .settings-card :is(h3, h4, strong, b, label) { color: var(--cf-text-2); }
html[data-theme] #git-settings .git-step { background: var(--cf-panel); border-color: var(--cf-line-strong); }
html[data-theme] #git-settings :is(h3, .git-howto, .git-host-field) { color: var(--cf-text-2); }
html[data-theme] #git-settings .git-step[aria-current="step"] { border-color: var(--cf-muted); box-shadow: 0 0 0 1px var(--cf-muted); }
html[data-theme] #git-settings :is(.git-overview, .git-public, .git-host-row, .git-step-number) { background: var(--cf-chip); color: var(--cf-text-2); }
html[data-theme] #git-settings :is(.git-hint, .git-description, .git-key-preview, summary, #git-status) { color: var(--cf-muted); }
html[data-theme] #git-settings :is(.git-advanced, .git-settings-footer, .git-host-section, .git-host-row) { border-color: var(--cf-line-strong); }
html[data-theme] #git-settings .form-control { background: var(--cf-panel); color: var(--cf-text); border-color: var(--cf-line-strong); }
html[data-theme] #git-settings .form-control:focus { border-color: var(--cf-muted); box-shadow: 0 0 0 3px var(--cf-focus); }
html[data-theme] #git-settings .git-step[data-complete="true"] .git-step-number { background: var(--cf-chip); color: var(--cf-green); }
html[data-theme="dark"] #git-settings :is(.git-done, .git-state[data-state="ready"]) { background: #14291c; color: #86efac; }
html[data-theme="dark"] #git-settings .git-done span { color: inherit; }
html[data-theme="dark"] #git-settings .git-state[data-state="pending"] { background: #302510; color: #fcd34d; }
html[data-theme] #git-settings #git-remove { color: var(--cf-red); }
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { border-color: var(--cf-line-strong); background-color: var(--cf-panel); color: var(--cf-text); }
html[data-theme="dark"] button:not([class]):not(dialog button) { color: inherit; }
/* Inline styles written in the template and by scripts. */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #f9fafb"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f3f4f6"],
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#edf1ff"],
html[data-theme="dark"] [style*="background: #edf1ff"],
html[data-theme="dark"] [style*="background: #e2e8f0"] { background: var(--cf-chip) !important; }
html[data-theme="dark"] [style*="color: #333"], html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #374151"], html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #1f2937"], html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color:#334155"], html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#111827"], html[data-theme="dark"] [style*="color: #111827"] { color: var(--cf-text-2) !important; }
html[data-theme="dark"] [style*="color: #666"], html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #6b7280"], html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color:#64748b"], html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color: #999"], html[data-theme="dark"] [style*="color:#999"] { color: var(--cf-muted) !important; }
html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"] { border-color: var(--cf-line) !important; }
/* Phone web shell */
@media (max-width: 768px) {
    html[data-theme] body .chat-input-area { border-top-color: var(--cf-line); background: var(--cf-panel); }
    html[data-theme] body #chat-input { border: 0; border-radius: 20px; background: var(--cf-chip); color: var(--cf-text); box-shadow: none; }
    html[data-theme] body #chat-input:focus { box-shadow: 0 0 0 2px var(--cf-focus); }
    html[data-theme] body .chat-input-wrapper #send-btn { border-radius: 50%; }
    html[data-theme] body .mobile-breadcrumb-back,
    html[data-theme] body .mobile-breadcrumb-actions button { color: var(--cf-text); }
    html[data-theme] body .mobile-tab-bar button { color: var(--cf-faint); }
    html[data-theme] body .mobile-tab-bar button[aria-current="page"] { color: var(--cf-text); }
    html[data-theme] .mobile-settings-avatar { background: var(--cf-accent); color: var(--cf-on-accent); }
    html[data-theme="dark"] body,
    html[data-theme="dark"] body .terminal-view,
    html[data-theme="dark"] body .terminal-sidebar,
    html[data-theme="dark"] body #settings-view { background: var(--cf-bg); }
    html[data-theme="dark"] body .mobile-breadcrumb { border-bottom-color: var(--cf-line); background: var(--cf-panel); }
    html[data-theme="dark"] body .mobile-breadcrumb-current,
    html[data-theme="dark"] .mobile-settings-name { color: var(--cf-text); }
    html[data-theme="dark"] .mobile-settings-tools button,
    html[data-theme="dark"] .mobile-settings-logout { background: var(--cf-panel); color: var(--cf-text-2); }
    html[data-theme="dark"] .mobile-settings-logout { color: var(--cf-red); }
    html[data-theme="dark"] .mobile-tab-bar { border-top-color: var(--cf-line); background: var(--cf-panel); }
}