/* Kimi-inspired restrained business UI layer. Kept separate so it can be rolled back safely. */
:root {
  --design-bg: #f5f7fa;
  --design-surface: #ffffff;
  --design-ink: #1f2937;
  --design-muted: #6b7280;
  --design-line: #e5e7eb;
  --design-primary: #1a56db;
  --design-primary-hover: #1e429f;
  --design-primary-soft: #e8efff;
  --design-success: #047857;
  --design-success-soft: #ecfdf5;
  --design-warning: #b45309;
  --design-warning-soft: #fffbeb;
  --design-danger: #b91c1c;
  --design-danger-soft: #fff1f2;
}

body { background: var(--design-bg); color: var(--design-ink); }
.app-shell { background: var(--design-bg); box-shadow: none; }
.sidebar { background: var(--design-surface); border-right-color: var(--design-line); }
.brand-mark { background: var(--design-primary); box-shadow: none; }
.primary-nav p { color: #9ca3af; }
.nav-link { position: relative; border-radius: 6px; color: #4b5563; }
.nav-link:hover { background: #f3f4f6; color: var(--design-ink); }
.nav-link.is-active { background: var(--design-primary-soft); color: var(--design-primary); box-shadow: none; }
.nav-link.is-active::before { content: ""; position: absolute; left: 0; width: 3px; height: 24px; border-radius: 2px; background: var(--design-primary); }
.nav-link.is-active b { background: var(--design-surface); color: var(--design-primary); }
.workspace { background: var(--design-bg); }
.topbar { background: var(--design-surface); border-bottom-color: var(--design-line); }
.page-root { color: var(--design-ink); }
.page-head h1 { color: var(--design-ink); font-size: 22px; }
.page-head p { color: var(--design-muted); }
.primary-button { border-color: var(--design-primary); background: var(--design-primary); box-shadow: none; }
.primary-button:hover { background: var(--design-primary-hover); border-color: var(--design-primary-hover); }
.secondary-button, .back-button { border-color: #d1d5db; color: #4b5563; background: var(--design-surface); }
.secondary-button:hover, .back-button:hover { border-color: #9ca3af; background: #f9fafb; }

/* The entrance cards are compact surfaces, with color reserved for icon states. */
.quick-grid { gap: 16px; }
.quick-card { min-height: 104px; height: auto; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--design-line); background: var(--design-surface); box-shadow: 0 1px 2px rgba(31,41,55,.04); text-decoration: none; }
.quick-card h2 { font-size: 16px; }
.quick-card p { margin-top: 5px; color: var(--design-muted); }
.quick-card .quick-icon { position: static; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 7px; background: #f3f4f6; color: #4b5563; box-shadow: none; }
.quick-card:hover .quick-icon { background: var(--design-primary-soft); color: var(--design-primary); }

/* Scannable tables: stable rows, quiet borders, visible row focus. */
.panel, .submission-list, .task-list, .settings-panel, .detail-paper, .source-card, .form-panel { border: 1px solid var(--design-line); box-shadow: 0 1px 2px rgba(31,41,55,.04); }
.table-header, .table th { background: #f9fafb; color: #4b5563; }
.table td, .submission-row, .task-row, .member-row { border-color: #f3f4f6; }
.doc-row:hover, .search-result:hover, .submission-row:hover, .task-row:hover, .member-row:hover { background: #f9fafb; }
.doc-row:focus-visible, .search-result:focus-visible, .submission-row:focus-within, .task-row:focus-within { outline: 2px solid var(--design-primary); outline-offset: -2px; }
.status.live, .status.published, .chip.green { color: var(--design-success); background: var(--design-success-soft); }
.status.review, .chip.orange { color: var(--design-warning); background: var(--design-warning-soft); }
.status.risk, .chip.red { color: var(--design-danger); background: var(--design-danger-soft); }

/* Forms: one focus language across submit, settings and dialogs. */
.field input:focus, .field select:focus, .field textarea:focus, .search:focus, .member-form-field input:focus, .member-form-field select:focus, .settings-panel textarea:focus, .settings-panel select:focus {
  border-color: var(--design-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
  outline: none;
}
.field input, .field select, .field textarea, .search { border-color: #d1d5db; }
.field label, .member-form-field label { color: #374151; }
.upload-box { border-color: #c7d2e3; background: #f9fafb; }
.upload-box:hover, .upload-box:focus-within { border-color: var(--design-primary); background: #f5f9ff; }

/* Empty states communicate what the next useful action is without illustrations. */
.empty-state { padding: 46px 24px; color: var(--design-muted); }
.empty-state h2 { color: #374151; font-size: 16px; }
.empty-state p { margin: 7px auto 0; max-width: 520px; line-height: 1.7; }
.empty-state::before { content: "□"; display: block; width: 42px; height: 42px; margin: 0 auto 12px; border: 1px solid #cbd5e1; border-radius: 6px; color: #94a3b8; font-size: 25px; line-height: 39px; }

/* AI evidence stays close to the answer and keeps its action visible. */
.ai-evidence, .ai-conversation { border-color: var(--design-line); box-shadow: 0 1px 2px rgba(31,41,55,.04); }
.citation-toggle, .evidence-button { border-color: #cbd5e1; color: var(--design-primary); background: var(--design-surface); }
.citation-toggle:hover, .evidence-button:hover { border-color: var(--design-primary); background: var(--design-primary-soft); }
.citation-card, .context-evidence { border-left-color: #94a3b8; background: #f9fafb; }
.answer-bubble p { color: #111827; }

/* Operations page uses the same tabs and neutral panel hierarchy. */
.operations-page, .shell { color: var(--design-ink); }
.operations-page .tabs, .shell .tabs { border-bottom-color: var(--design-line); }
.operations-page .tab, .shell .tab { color: var(--design-muted); border-bottom-color: transparent; }
.operations-page .tab:hover, .shell .tab:hover { color: var(--design-ink); }
.operations-page .tab.active, .shell .tab.active { color: var(--design-primary); border-bottom-color: var(--design-primary); }
.operations-page .panel, .shell .panel { border-color: var(--design-line); box-shadow: 0 1px 2px rgba(31,41,55,.04); }
.operations-page .table th, .shell .table th { background: #f9fafb; color: #4b5563; }
.operations-page .table tr:hover td, .shell .table tr:hover td { background: #f9fafb; }

@media (max-width: 900px) {
  .quick-card { min-height: 96px; }
  .empty-state::before { margin-top: 4px; }
}
/* Submit form: keep the existing form sequence, add clear work-group hierarchy. */
.submit-layout { gap: 20px; }
.submit-form .form-section { padding: 20px; margin-bottom: 16px; border: 1px solid var(--design-line); border-radius: 8px; background: var(--design-surface); }
.submit-form .form-section:last-of-type { margin-bottom: 0; }
.submit-form .form-section > h2, .submit-form .section-row h2 { margin-bottom: 16px; color: var(--design-ink); font-size: 16px; }
.submit-steps { gap: 12px; margin-bottom: 20px; color: #9ca3af; font-size: 12px; }
.submit-steps span { gap: 8px; }
.submit-steps .is-current { color: var(--design-primary); font-weight: 700; }
.submit-steps i { background: var(--design-line); }
.submit-type-grid { gap: 12px; }
.submit-type { min-height: 84px; border-color: var(--design-line); border-radius: 7px; background: var(--design-surface); }
.submit-type:hover { border-color: #a9c4f4; background: #f9fbff; }
.submit-type.is-selected { border-color: var(--design-primary); background: #f5f9ff; box-shadow: 0 0 0 1px var(--design-primary) inset; }
.submit-type b { color: #374151; font-size: 13px; }
.submit-type.is-selected b { color: var(--design-primary); }
.submit-type span { color: var(--design-muted); font-size: 11px; }
.submit-aside section { border-color: var(--design-line); box-shadow: 0 1px 2px rgba(31,41,55,.04); }
.submit-aside h3 { color: var(--design-ink); }
.aside-rule { border-top-color: #f3f4f6; }
.submit-footer { padding: 18px 0 0; }

/* Settings: tabs use the same underline language as operations. */
.settings-tabs { gap: 22px; margin-bottom: 18px; padding-bottom: 0; border-bottom-color: var(--design-line); }
.settings-tabs button { position: relative; height: 42px; padding: 0; border-radius: 0; color: var(--design-muted); }
.settings-tabs button:hover { color: var(--design-ink); background: transparent; }
.settings-tabs button.is-active { color: var(--design-primary); background: transparent; }
.settings-tabs button.is-active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--design-primary); }
.settings-aside { border: 1px solid #bae6fd; background: #f0f9ff; color: #075985; }
.settings-aside h3 { color: #075985; }
.settings-panel .panel-head { background: var(--design-surface); }
.member-row { min-height: 58px; }
.member-row:hover { background: #f9fafb; }
.member-row .avatar { border-radius: 7px; background: var(--design-primary-soft); color: var(--design-primary); }
.dictionary-section, .runtime-row { border-top-color: #f3f4f6; }

/* AI: readable answer surface, anchored active history, low-interference delete control. */
.ai-workspace { grid-template-columns: minmax(0,1fr) 304px; gap: 20px; }
.ai-conversation, .ai-evidence { border-color: var(--design-line); box-shadow: 0 1px 2px rgba(31,41,55,.04); }
.ai-context { border-bottom-color: var(--design-line); }
.ai-context h2, .ai-evidence h3 { color: var(--design-ink); }
.ai-context p, .evidence-subtitle { color: var(--design-muted); }
.ai-scope { border-radius: 4px; background: var(--design-primary-soft); color: var(--design-primary); }
.answer-bubble { border-color: var(--design-line); box-shadow: none; }
.chat-message.user .message-bubble { color: #fff; border-color: var(--design-primary); background: var(--design-primary); }
.chat-message.user .message-avatar { background: #dce9ff; color: #1d4ed8; }
.ai-composer { padding-top: 16px; border-top-color: var(--design-line); }
.ai-composer textarea { min-height: 52px; border-color: #d1d5db; background: #fff; }
.ai-composer textarea:focus { border-color: var(--design-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }
.ai-composer button { background: var(--design-primary); }
.ai-composer button:hover { background: var(--design-primary-hover); }
.ai-history-row { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:3px; border-left:3px solid transparent; border-radius:6px; }
.ai-history-row:hover, .ai-history-row.is-active { border-left-color:var(--design-primary); background:#f5f9ff; }
.ai-history-item { border:0; border-radius:4px; }
.ai-history-item:hover, .ai-history-item.is-active { border-color:transparent; background:transparent; }
.ai-history-row.is-active .ai-history-item b { color:var(--design-primary); }
.ai-history-delete { width:26px; height:26px; padding:0; border:0; border-radius:5px; background:transparent; color:#9ca3af; font-size:18px; line-height:1; opacity:0; cursor:pointer; }
.ai-history-row:hover .ai-history-delete, .ai-history-row.is-active .ai-history-delete, .ai-history-row:focus-within .ai-history-delete { opacity:1; }
.ai-history-delete:hover { color:var(--design-danger); background:var(--design-danger-soft); }
.ai-current-evidence { border-top-color:var(--design-line); }
.ai-evidence .evidence-card { border-top-color:#f3f4f6; }
.citation-card { border-left-color:#94a3b8; background:#f9fafb; }

/* Login: professional dark blue panel, restrained grid texture and clearer form surface. */
.login-page, body.is-unauthenticated { background:#f5f7fa; }
.login-shell { border-color:var(--design-line); box-shadow:0 20px 54px rgba(15,23,42,.12); }
.login-intro { background:#0f2747; }
.login-intro::before { background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 88px),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 88px); }
.login-mark { color:#0f2747; }
.login-intro-copy h1 { font-size:32px; line-height:1.34; }
.login-intro-copy p { color:#bfd0e7; }
.login-panel h1 { color:var(--design-ink); font-size:25px; }
.login-panel > p { color:var(--design-muted); }
.login-panel label { color:#374151; }
.login-panel input { border-color:#d1d5db; background:#fff; }
.login-panel input:focus { border-color:var(--design-primary); box-shadow:0 0 0 3px rgba(26,86,219,.12); }

/* Operations only: emphasize data state without turning it into a dashboard. */
.sync-panel { border-color:var(--design-line); border-radius:8px; box-shadow:0 1px 2px rgba(31,41,55,.04); }
.sync-summary strong { color:var(--design-ink); }
.sync-summary span, .sync-run { color:var(--design-muted); }
.sync-pill { border-radius:4px; color:var(--design-success); background:var(--design-success-soft); }
.sync-pill.warn { color:var(--design-warning); background:var(--design-warning-soft); }
.sync-pill.fail { color:var(--design-danger); background:var(--design-danger-soft); }
.cards { gap:16px; }
.card { border-color:var(--design-line); box-shadow:0 1px 2px rgba(31,41,55,.04); }
.card span, .card small { color:var(--design-muted); }
.card strong { color:var(--design-ink); font-size:30px; }
.card:last-child strong { color:var(--design-warning); }
.shell .hint { border-color:#fde68a; background:var(--design-warning-soft); color:#92400e; }

@media (hover:none), (max-width:900px) { .ai-history-delete { opacity:1; } }
@media (max-width:900px) { .ai-workspace { grid-template-columns:1fr; } .ai-evidence { display:flex; } .submit-form .form-section { padding:16px; } }
/* Final operations and AI workflow polish: business states, not transport details. */
.shell .hint { display:flex; align-items:center; gap:9px; margin:14px 0; padding:10px 12px; }
.shell .hint b { color:#92400e; white-space:nowrap; }
.sync-panel { margin:0 0 13px; padding:0; background:#f8fafc; border-left:3px solid #93c5fd; }
.sync-summary { padding:13px 15px; }
.sync-run { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 15px; border-top:1px solid var(--design-line); font-size:11px; }
.sync-run > span:first-child { display:grid; gap:3px; }
.sync-run small { color:var(--design-muted); }
.sync-run-empty { padding:14px 15px; background:#fff; }
.dashboard-empty { display:grid; place-items:center; min-height:280px; padding:42px 24px; text-align:center; background:#fbfdff; }
.dashboard-empty h2 { margin:0; color:var(--design-ink); font-size:17px; }
.dashboard-empty p { max-width:470px; margin:9px 0 0; color:var(--design-muted); line-height:1.75; }
.dashboard-empty small { margin-top:10px; color:#7c8ba1; }
.card:last-child { border-color:#f5d19d; background:#fffdfa; }
.card:last-child strong { position:relative; }
.card:last-child strong:not(:empty)::after { content:""; display:inline-block; width:6px; height:6px; margin:0 0 14px 7px; border-radius:50%; background:#d97706; }
.tabs { margin-top:4px; }

.ai-composer { display:grid; grid-template-columns:1fr; gap:8px; padding:16px 0 0; }
.ai-composer-label { color:#374151; font-size:12px; font-weight:700; }
.ai-composer textarea { width:100%; min-height:88px; max-height:190px; padding:11px 12px; }
.ai-composer-meta { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap:10px; }
.ai-composer-attachment { min-width:0; align-self:end; }
.ai-composer-settings { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.ai-composer-settings .ai-model-picker { min-width:126px; }
.ai-composer-settings select { width:100%; min-width:126px; height:30px; }
.ai-composer button#sendAI { width:38px; height:30px; align-self:end; border-radius:6px; }
.ai-composer-trust { margin:0; color:#6b7280; font-size:10px; line-height:1.55; }
.ai-screenshot-selected { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:min(310px,100%); height:30px; max-width:none; gap:7px; padding:0 9px; }
.ai-screenshot-selected span { color:#047857; font-size:10px; font-weight:700; white-space:nowrap; }
.ai-screenshot-selected b { overflow:hidden; color:#3e5f91; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.ai-screenshot-button { height:30px; }
.ai-screenshot-policy select { min-width:172px; }
.integration-group { padding:17px 19px 0; }
.integration-group:last-child { padding-bottom:8px; }
.integration-group h3 { margin:0 0 5px; color:var(--design-ink); font-size:13px; }
.integration-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid #f3f4f6; }
.integration-row > span:first-child { display:grid; gap:4px; }
.integration-row b { color:#374151; font-size:12px; }
.integration-row small { color:var(--design-muted); font-size:11px; line-height:1.55; }
.integration-state { display:grid; justify-items:end; gap:5px; text-align:right; }
.integration-state .chip { margin-right:0; }
@media (max-width:900px) { .ai-composer-meta { grid-template-columns:1fr auto; } .ai-composer-settings { grid-column:1/-1; } .sync-run, .integration-row { align-items:flex-start; flex-direction:column; gap:7px; } .integration-state { justify-items:start; text-align:left; } }

/* Screenshot attachments are scoped to the current AI question. */
.ai-screenshot-tray { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.ai-screenshot-tray small { color:#64748b; font-size:10px; line-height:1.35; }
.ai-screenshot-thumb { position:relative; flex:0 0 48px; width:48px; height:48px; margin:0; overflow:hidden; border:1px solid #cbd9ec; border-radius:6px; background:#f6f9ff; }
.ai-screenshot-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.ai-screenshot-thumb button { position:absolute; top:2px; right:2px; display:grid; width:16px; height:16px; padding:0; border:1px solid rgba(255,255,255,.9); border-radius:50%; place-items:center; background:rgba(22,35,55,.78); color:#fff; cursor:pointer; font-size:13px; line-height:1; }
.ai-screenshot-thumb button:hover { background:#b42318; }
.ai-screenshot-tray .ai-screenshot-button { flex:0 0 auto; height:30px; }
@media (max-width:900px) { .ai-screenshot-tray { grid-column:1/-1; } }
