/* Najs Brain portal — "Cortex console" design system. See docs/portal-design.md. */

:root {
  --paper:   #F5F6F4;  --surface: #FBFCFA;  --ink: #16201C;  --muted: #5E6B64;
  --hairline:#E2E6E1;  --signal:  #2F6F5B;  --signal-soft:#DCE8E2;  --clay:#A8553A;
  --radius: 4px;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0E1512; --surface:#182521; --ink:#E7ECE8; --muted:#8A9990;
    --hairline:#26332D; --signal:#4FB48F; --signal-soft:#1C2E28; --clay:#D08A5E;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

body { background: var(--paper); color: var(--ink); font-family: var(--font-body);
       margin:0; line-height:1.5; -webkit-font-smoothing:antialiased; }
.console { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.wordmark { font-family: var(--font-mono); font-weight:600; letter-spacing:.02em; }
h1,h2,.eyebrow { font-family: var(--font-display); }
h1 { font-size: 1.6rem; margin: .25rem 0 0; }
.eyebrow { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }

/* header */
.header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }

/* nav tabs */
.nav { display:flex; gap:.25rem; border-bottom:1px solid var(--hairline); }
.nav a { font-family:var(--font-mono); font-size:.85rem; padding:.5rem .75rem; color:var(--muted);
         text-decoration:none; border-bottom:2px solid transparent; }
.nav a.active, .nav a:hover { color:var(--ink); border-bottom-color:var(--signal); }
.header .nav { border-bottom: none; }
main .nav, .console > .nav { border-bottom:1px solid var(--hairline); margin-top:1rem; }

/* vitals bar (signature) */
.vitals { font-family:var(--font-mono); font-size:.8rem; color:var(--muted);
          display:flex; gap:.9rem; align-items:center; padding:.55rem .25rem; flex-wrap:wrap;
          border-bottom:1px solid var(--hairline); margin-bottom:1.5rem; }
.dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--signal); flex-shrink:0;
       box-shadow:0 0 0 0 var(--signal); }
.dot.live { animation: pulse 2.4s ease-out infinite; }
.dot.off  { background:var(--muted); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 55%,transparent);}
                   70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion: reduce){ .dot.live{ animation:none; } }
.logout-form { margin-left:auto; }

/* setting groups: structure = information, hairline rules not cards */
.group { padding:1.5rem 0; border-top:1px solid var(--hairline); }
.group:first-of-type{ border-top:none; }
label { display:block; font-size:.9rem; font-weight:500; margin-bottom:.4rem; }
label:not(:first-child) { margin-top: 1.1rem; }
.hint { color:var(--muted); font-size:.8rem; margin-top:.3rem; }
input, textarea, select { width:100%; box-sizing:border-box; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--radius); padding:.6rem .7rem;
  color:var(--ink); font:inherit; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal); }
textarea { resize: vertical; font-family: var(--font-body); }
.mono, code, .value { font-family:var(--font-mono); }
.key-state { margin: 0 0 .6rem; }
.status-text { color: var(--signal); }

/* one primary action per page uses the signal color; others are quiet */
.btn { font:inherit; border-radius:var(--radius); padding:.55rem .9rem; cursor:pointer;
       border:1px solid var(--hairline); background:var(--surface); color:var(--ink);
       display:inline-block; text-decoration:none; margin-top:1rem; }
.btn-primary { background:var(--signal); border-color:var(--signal); color:#fff; }
.btn:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.logout-btn { margin-top:0; padding:.3rem .6rem; font-size:.75rem; }

/* memory-stratum meter (Conversation) */
.stratum { height:.5rem; border-radius:999px; background:var(--signal-soft); overflow:hidden; }
.stratum > i { display:block; height:100%; background:var(--signal); }

/* conversation messages */
.messages { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.message { display:flex; gap:.6rem; align-items:baseline; padding:.5rem .6rem; background:var(--surface);
           border:1px solid var(--hairline); border-radius:var(--radius); }
.message .role { color:var(--muted); font-size:.75rem; flex-shrink:0; min-width:3.5rem; text-transform:uppercase; }
.message .text { white-space:pre-wrap; word-break:break-word; }

/* settings: test button row */
.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.status-error { color:var(--clay); }

/* chat */
.chat { display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
.chat-log { max-height:60vh; overflow-y:auto; padding:.25rem; }
.chat-msg { flex-direction:column; gap:.25rem; max-width:85%; }
.chat-msg .role { min-width:0; }
.from-user { align-self:flex-end; background:var(--signal-soft); border-color:transparent; }
.from-assistant { align-self:flex-start; }
.chat-input { display:flex; gap:.6rem; align-items:flex-end; }
.chat-input textarea { flex:1; margin:0; }
.chat-input .btn { margin-top:0; white-space:nowrap; }

/* login */
.login-console { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.25rem; }
.login-card { width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.login-status { border-bottom:none; margin:0 0 1.5rem; padding:0; }
.login-form { width:100%; display:flex; flex-direction:column; gap:.75rem; }
.login-form label { text-align:left; }