/* STRIKEINTEL UI — dark-first, modelled on the STRIKE AI shell.
   Fonts are SELF-HOSTED: linking fonts.googleapis.com would break both the
   offline guarantee and the CSP (font-src 'self'). No inline style= anywhere:
   style-src 'self' blocks inline style attributes. No emoji anywhere; all
   iconography is inline SVG. */

@font-face {
  font-family: 'Google Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/google-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/google-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/google-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/google-sans-code-400.woff2') format('woff2');
}

:root {
  --bg-app: #0b0913;
  --bg-surface: #14111f;
  --bg-elevated: #1b1729;
  --bg-hover: #221d33;
  --bg-rail: #0e0b18;
  --text-primary: #e9e6f2;
  --text-secondary: #c7c2d6;
  --text-tertiary: #8f89a3;
  --text-muted: #6b6584;
  --border-subtle: rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.11);
  --border-strong: rgba(255,255,255,.2);
  --accent: #7d6dff;
  --accent-hover: #8e80ff;
  --accent-subtle: rgba(125,109,255,.14);
  --focus-ring: rgba(125,109,255,.5);
  --shadow-md: 0 8px 30px rgba(0,0,0,.45);
  --sev-critical: #f0616d;
  --sev-high: #e59148;
  --sev-medium: #d9b74a;
  --sev-low: #6f9bf0;
  --sev-info: #8f89a3;
  --font-sans: 'Google Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Google Sans Code', ui-monospace, SFMono-Regular, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg-app: #ffffff;
  --bg-surface: #ffffff;
  --bg-elevated: #f5f6f9;
  --bg-hover: #eef0f5;
  --bg-rail: #f7f8fa;
  --text-primary: #12141a;
  --text-secondary: #3d4453;
  --text-tertiary: #6a7282;
  --text-muted: #98a0ae;
  --border-subtle: rgba(0,0,0,.06);
  --border-default: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.2);
  --accent: #5546d6;
  --accent-hover: #4436c4;
  --accent-subtle: rgba(85,70,214,.09);
  --focus-ring: rgba(85,70,214,.4);
  --shadow-md: 0 6px 22px rgba(15,22,36,.12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
code, pre, .mono { font-family: var(--font-mono); }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; }

.shell { display: flex; height: 100vh; overflow: hidden; }

/* ---------- Icon rail ---------- */
.rail {
  width: 62px; flex-shrink: 0; background: var(--bg-rail);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 18px; gap: 6px;
  /* Above the panel backdrop (z-index 90) so rail actions stay clickable while
     the saved-chats panel is open — otherwise the backdrop swallows the clicks. */
  position: relative; z-index: 100;
}
.rail-logo { display: block; margin-bottom: 14px; line-height: 0; }
.rail-logo img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.rail-btn {
  background: none; border: none; cursor: pointer; color: var(--text-tertiary);
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.rail-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.rail-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.rail-spacer { flex: 1; }

/* ---------- Saved-chats slide-over ---------- */
.panel-backdrop { display: none; }
.panel-backdrop.open {
  display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90;
}
.panel {
  position: fixed; left: 62px; top: 0; bottom: 0; width: 300px; z-index: 95;
  background: var(--bg-surface); border-right: 1px solid var(--border-default);
  transform: translateX(-110%); transition: transform .2s ease;
  display: flex; flex-direction: column; box-shadow: var(--shadow-md);
}
.panel.open { transform: translateX(0); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--border-subtle);
}
.panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.chat-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px;
  color: var(--text-secondary);
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item.active { background: var(--accent-subtle); color: var(--text-primary); }
.chat-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-item-del { opacity: 0; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; }
.chat-item:hover .chat-item-del { opacity: 1; }
.empty-note { padding: 10px; color: var(--text-muted); font-size: 12.5px; }
.panel-foot {
  padding: 12px 16px; border-top: 1px solid var(--border-subtle);
  font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
}
.text-btn {
  display: block; margin-top: 8px; background: none; border: none; padding: 0;
  color: var(--text-tertiary); font-size: 12px; cursor: pointer;
  font-family: inherit; text-decoration: underline;
}
.text-btn:hover { color: var(--text-primary); }

/* ---------- Main column ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-column {
  flex: 1; overflow-y: auto; padding: 28px 24px 8px;
  max-width: 860px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
}

/* Hero: big centered logo, as in the reference shell */
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center;
        flex: 1; min-height: 340px; text-align: center; gap: 18px; }
.hero-logo { width: 170px; height: 170px; border-radius: 50%; display: block; }
.hero p { color: var(--text-tertiary); margin: 0; font-size: 13.5px; max-width: 520px; }
.suggested { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.suggested button {
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); border-radius: 11px; padding: 9px 13px;
  font-size: 12.5px; cursor: pointer; max-width: 330px; text-align: left;
  font-family: inherit;
}
.suggested button:hover { border-color: var(--accent); color: var(--text-primary); }

/* ---------- Messages ---------- */
.msg { display: flex; flex-direction: column; gap: 8px; }
.msg-role { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.msg.user .bubble { background: var(--accent-subtle); border-radius: 14px 14px 5px 14px; }
.msg.assistant .bubble { background: var(--bg-elevated); border-radius: 14px 14px 14px 5px; }
.bubble { padding: 13px 15px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.bubble.streaming::after {
  content: ''; display: inline-block; width: 7px; height: 15px; margin-left: 2px;
  background: var(--accent); vertical-align: text-bottom; animation: caret 1s steps(2) infinite;
}
@keyframes caret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

.capability-body { padding: 13px 15px; background: var(--bg-elevated); border-radius: 14px 14px 14px 5px; font-size: 14px; }
.capability-body h4 { margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); font-weight: 500; }
.capability-body h4:first-child { margin-top: 0; }
.capability-body ul { margin: 0; padding-left: 18px; color: var(--text-secondary); }
.capability-body li { margin-bottom: 3px; }
.capability-body .cap-note { color: var(--text-muted); font-size: 12.5px; margin-top: 12px; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cap-chips button {
  border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.cap-chips button:hover { border-color: var(--accent); color: var(--text-primary); }

.entity-tags, .citations { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag .t-type { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.citation-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  font-size: 11.5px; max-width: 340px; text-decoration: none; color: var(--text-secondary);
}
.citation-pill:hover { border-color: var(--accent); }
.citation-pill .c-id { color: var(--accent); font-family: var(--font-mono); }
.citation-pill .c-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Source provenance badges: STRIKE research is visually distinct from
   SecurityScorecard docs and from third-party news. */
.c-badge { flex-shrink: 0; display: block; }
.c-badge-strike { width: 26px; height: 18px; }
:root[data-theme="light"] .c-badge-strike { filter: invert(1) brightness(.35); }
.citation-pill.is-strike { border-color: rgba(125,109,255,.4); background: var(--accent-subtle); }
.citation-pill.is-strike:hover { border-color: var(--accent); }
.citation-pill .c-genlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

.confidence-row { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.confidence-badge { padding: 2px 9px; border-radius: 999px; font-weight: 500; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.confidence-badge.high { background: rgba(111,155,240,.15); color: var(--sev-low); }
.confidence-badge.moderate { background: rgba(217,183,74,.15); color: var(--sev-medium); }
.confidence-badge.low { background: rgba(229,145,72,.15); color: var(--sev-high); }
.confidence-badge.insufficient_local_evidence { background: rgba(143,137,163,.15); color: var(--sev-info); }
.freshness-pill { padding: 2px 8px; border-radius: 999px; background: var(--bg-elevated); font-size: 10.5px; }

.msg-actions { display: flex; gap: 6px; }
.msg-actions button {
  background: none; border: 1px solid var(--border-subtle); color: var(--text-muted);
  border-radius: 7px; padding: 4px 7px; cursor: pointer; display: grid; place-items: center;
}
.msg-actions button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.msg-actions button.active { color: var(--accent); border-color: var(--accent); }
.msg-actions svg { width: 15px; height: 15px; }

.thinking { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 13px; }
.spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border-default);
  border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Composer ---------- */
.composer-wrap { padding: 10px 24px 22px; }
.composer {
  max-width: 860px; margin: 0 auto; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: 18px;
  padding: 14px 16px 10px; box-shadow: var(--shadow-md);
}
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
  width: 100%; border: none; outline: none; resize: none; background: none;
  color: var(--text-primary); font-size: 15px; font-family: inherit;
  max-height: 190px; padding: 0; line-height: 1.5;
}
.composer textarea::placeholder { color: var(--text-muted); }
.composer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.composer-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); }
.composer-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.send-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 50%;
  width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center;
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:disabled { opacity: .45; cursor: not-allowed; }
.send-btn svg { stroke-width: 2; }
.composer-notice { max-width: 860px; margin: 9px auto 0; font-size: 11px; color: var(--text-muted); text-align: center; }

.error-box {
  background: rgba(240,97,109,.09); color: var(--sev-critical); border: 1px solid rgba(240,97,109,.28);
  padding: 11px 13px; border-radius: 11px; font-size: 13px;
}

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 120; }
.modal { background: var(--bg-surface); border-radius: 14px; padding: 22px; width: 380px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border-default); }
.modal h3 { margin: 0 0 14px; font-size: 14.5px; font-weight: 500; }
.modal input {
  width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border-default);
  background: var(--bg-app); color: var(--text-primary); font-size: 13.5px; margin-bottom: 14px;
  font-family: inherit;
}
.modal input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions button {
  padding: 8px 13px; border-radius: 9px; border: 1px solid var(--border-default);
  background: none; color: var(--text-primary); cursor: pointer; font-size: 13px; font-family: inherit;
}
.modal-actions button.primary { background: var(--accent); color: #fff; border: none; }

@media (max-width: 768px) {
  .rail { width: 52px; }
  .panel { left: 52px; width: calc(100vw - 52px); }
  .chat-column { padding: 18px 14px 6px; }
  .composer-wrap { padding: 8px 12px 16px; }
  .hero-logo { width: 118px; height: 118px; }
  .hero { min-height: 240px; }
}