:root {
    --bg: #f7f7f8;
    --panel: #ffffff;
    --text: #1f2328;
    --muted: #6b7280;
    --border: #e5e7eb;
    --accent: #2563eb;
    --accent-text: #ffffff;
    --bubble-user: #2563eb;
    --bubble-user-text: #ffffff;
    --bubble-assistant: #ffffff;
    --danger: #dc2626;
    --warn: #d97706;
    --ok: #16a34a;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1115;
        --panel: #171a21;
        --text: #e6e6e6;
        --muted: #9aa0a8;
        --border: #2a2e37;
        --accent: #3b82f6;
        --bubble-user: #3b82f6;
        --bubble-assistant: #1f232c;
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#app { display: flex; flex-direction: column; height: 100dvh; max-width: 720px; margin: 0 auto; }

/* --- Login --- */
.login-screen { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; width: 100%; max-width: 360px; }
.login-card h1 { font-size: 1.25rem; margin: 0 0 4px; }
.login-card p.sub { color: var(--muted); margin: 0 0 20px; font-size: 0.9rem; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 0.95rem;
}
button.primary {
    width: 100%; padding: 11px; border-radius: 10px; border: none; background: var(--accent);
    color: var(--accent-text); font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
button.primary:disabled { opacity: 0.6; }
button.secondary {
    padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: transparent;
    color: var(--text); font-size: 0.85rem; cursor: pointer;
}
.error-text { color: var(--danger); font-size: 0.85rem; margin-top: 8px; min-height: 1em; }

/* --- Top bar --- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
    border-bottom: 1px solid var(--border); background: var(--panel);
}
.topbar h1 { font-size: 1rem; margin: 0; }
.mode-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.03em; }
.mode-badge.test { background: #fef3c7; color: #92400e; }
.mode-badge.live { background: #dcfce7; color: #166534; }

/* --- Chat --- */
.chat-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; line-height: 1.4; word-wrap: break-word; }
.bubble.user { align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-text); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.bubble.assistant { align-self: flex-start; background: var(--bubble-assistant); border: 1px solid var(--border); border-bottom-left-radius: 4px; direction: rtl; }
.bubble.assistant > *:first-child { margin-top: 0; }
.bubble.assistant > *:last-child { margin-bottom: 0; }
.bubble.assistant p, .bubble.assistant ul, .bubble.assistant ol { margin: 0.5em 0; }
.bubble.assistant ul, .bubble.assistant ol { padding-left: 1.3em; }
.bubble.assistant code { background: rgba(127,127,127,0.18); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.85em; }
.bubble.assistant pre { background: rgba(127,127,127,0.14); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0.5em 0; }
.bubble.assistant pre code { background: none; padding: 0; }
.bubble.assistant table { border-collapse: collapse; font-size: 0.85em; margin: 0.5em 0; }
.bubble.assistant th, .bubble.assistant td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.bubble.assistant a { color: var(--accent); }
.status-line { align-self: flex-start; color: var(--muted); font-size: 0.82rem; font-style: italic; }

.tool-details { align-self: flex-start; max-width: 90%; }
.tool-details summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; padding: 4px 0; list-style: none; }
.tool-details summary::-webkit-details-marker { display: none; }
.tool-details summary code { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--text); }
.tool-details .tool-status { font-weight: 600; }
.tool-details .tool-body {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
    font-family: ui-monospace, monospace; font-size: 0.78rem; overflow-x: auto; margin-top: 4px;
    white-space: pre-wrap; word-break: break-word;
}

.approval-card {
    align-self: stretch; border: 1px solid var(--warn); border-radius: 14px; padding: 14px; background: var(--panel);
}
.approval-card .risk-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.approval-card .risk-badge.MEDIUM { background: #fef3c7; color: #92400e; }
.approval-card .risk-badge.HIGH { background: #fee2e2; color: #991b1b; }
.approval-card .risk-badge.CRITICAL { background: #fecaca; color: #7f1d1d; }
.approval-card dl { margin: 10px 0; font-size: 0.85rem; }
.approval-card dt { color: var(--muted); margin-top: 6px; }
.approval-card dd { margin: 2px 0 0; }
.approval-actions { display: flex; gap: 10px; margin-top: 12px; }
.approval-actions button { flex: 1; padding: 10px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; }
.approval-actions .approve { background: var(--ok); color: white; }
.approval-actions .reject { background: var(--danger); color: white; }
.approval-card.decided { opacity: 0.6; }

/* --- Composer --- */
.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--panel); align-items: flex-end; }
.composer textarea {
    flex: 1; resize: none; max-height: 120px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.icon-btn {
    width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--accent); color: white;
    font-size: 1.1rem; cursor: pointer; flex-shrink: 0;
}
.icon-btn.mic.recording { background: var(--danger); }

/* --- Bottom nav --- */
.bottom-nav { display: flex; border-top: 1px solid var(--border); background: var(--panel); }
.bottom-nav button {
    flex: 1; border: none; background: transparent; color: var(--muted); padding: 10px 0; font-size: 0.72rem; cursor: pointer;
}
.bottom-nav button.active { color: var(--accent); font-weight: 700; }

/* --- Settings / Audit pages --- */
.page { flex: 1; overflow-y: auto; padding: 16px; }
.page h2 { font-size: 1rem; margin: 0 0 12px; }
.settings-section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.settings-section h3 { font-size: 0.9rem; margin: 0 0 10px; }
.settings-section .save-msg { font-size: 0.8rem; color: var(--ok); margin-top: 6px; min-height: 1em; }
.row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.row label { flex: 1; font-size: 0.85rem; }

table.audit-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
table.audit-table th, table.audit-table td { border-bottom: 1px solid var(--border); padding: 6px 4px; text-align: left; white-space: nowrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters select, .filters input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.8rem; }

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