/* Sophia's page. Structure: top bar / breadcrumb row / brain stage / one sheet (Chat, Details, Filters).
   Phone first: everything sits in one grid, so nothing can overlap. On a computer the sheet becomes a side panel.
   Builds on /assets/css/site.css (fonts) but keeps Sophia's own palette: violet, magenta and teal on near-black. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
body.brain-page { --warm: #e58cff; --warm-strong: #ff5fd2; --teal: #2de2c4; --bg: #05030b; --bg-2: #0e0819;
  --line: rgba(180, 124, 255, .24); --surface: rgba(12, 6, 24, .82); --surface-strong: rgba(180, 124, 255, .13); --muted: #b3a6cc; --text: #f1ecff;
  --focus: 0 0 0 3px #05030b, 0 0 0 5px #ff5fd2;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html, body.brain-page { height: 100%; }
body.brain-page { margin: 0; overflow: hidden; color: var(--text); overscroll-behavior: none;
  background: radial-gradient(900px 700px at 50% 45%, #1a0b2e 0%, #0b0616 45%, var(--bg) 75%); }
.brain-page button { font: inherit; color: inherit; }
.brain-page :focus-visible { outline: none; box-shadow: var(--focus); }

.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "crumbs" "stage" "sheet"; padding: 0 var(--sar) 0 var(--sal); box-sizing: border-box; }

/* 1. top bar */
.topbar { grid-area: top; position: relative; z-index: 5; display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding: calc(.5rem + var(--sat)) .75rem .5rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.back { flex: none; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ff5fd2); text-decoration: none; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; font-size: .9rem; white-space: nowrap; }
/* 10 Nov 2026 (Jamie, via parent): "Main site" in the header, like every other staff page; hidden while searching */
.exit-site { flex: none; color: #dfe7f0; text-decoration: none; font-size: .85rem; white-space: nowrap; padding: .35rem .6rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
.exit-site:hover, .exit-site:focus-visible { color: #fff; border-color: #ff5fd2; outline: none; }
.topbar.searching .exit-site { display: none; }
.title { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ffc861; box-shadow: 0 0 8px currentColor; color: #ffc861; }
.dot[data-state="online"] { background: #6dffa8; color: #6dffa8; }
.dot[data-state="preview"] { background: var(--warm); color: var(--warm); }
.dot[data-state="offline"] { background: #ff6b8a; color: #ff6b8a; }
.search { flex: none; display: flex; align-items: center; gap: .35rem; min-width: 0; }
.search input { display: none; width: 100%; min-width: 0; box-sizing: border-box; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.icon-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-strong); cursor: pointer; }
.topbar.searching .title { display: none; }
.topbar.searching .search { flex: 1; }
.topbar.searching .search input { display: block; }
.results { position: absolute; left: .75rem; right: .75rem; top: 100%; margin: .35rem 0 0; max-height: 50vh; overflow: auto; list-style: none; padding: .3rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.results button, .insp-actions button, .crumbs button.crumb { cursor: pointer; }
.results button { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: .5rem .6rem; border-radius: 8px; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results button:hover, .results button:focus-visible { background: var(--surface-strong); }
.results small { color: var(--muted); margin-left: .35rem; }

/* 2. breadcrumb row */
.crumbs { grid-area: crumbs; display: flex; align-items: center; gap: .4rem; min-width: 0; padding: .35rem .75rem; border-bottom: 1px solid rgba(180,124,255,.12); }
.crumbs ol { flex: 1; min-width: 0; display: flex; list-style: none; margin: 0; padding: 0; gap: .1rem; overflow-x: auto; scrollbar-width: none; }
.crumbs ol::-webkit-scrollbar { display: none; }
.crumbs li { display: flex; align-items: center; white-space: nowrap; font-size: .85rem; min-width: 0; }
.crumbs li + li::before { content: '›'; color: var(--muted); margin: 0 .15rem; }
.crumbs button.crumb { all: unset; cursor: pointer; padding: .2rem .4rem; border-radius: 999px; color: var(--muted); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs li:last-child button.crumb { color: var(--warm); }
.out { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-strong); cursor: pointer; }
.out:disabled { opacity: .3; cursor: default; }
.preview-tag { flex: none; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warm); border: 1px dashed rgba(229,140,255,.5); border-radius: 999px; padding: .1rem .5rem; }

/* 3. the brain */
.stage { grid-area: stage; position: relative; min-height: 0; overflow: hidden; }
.galaxy { position: absolute; inset: 0; }
.galaxy canvas { display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-size: 12px; line-height: 1.3; color: var(--text); text-shadow: 0 1px 4px #000, 0 0 10px #000; opacity: .9; will-change: transform; }
.lbl.focus { font-family: var(--font-display); font-size: 16px; color: #ffb3ec; max-width: 220px; }
.lbl.sel { max-width: none; color: #fff; z-index: 2; }
.lbl.dim { opacity: .2; }
.lbl.off { visibility: hidden; }

/* 4. the sheet */
.sheet { grid-area: sheet; position: relative; z-index: 6; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 0 .75rem calc(.6rem + var(--sab)); box-sizing: border-box; }
.sheet-head { display: flex; align-items: center; gap: .5rem; padding-top: .35rem; position: relative; }
.grip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 64px; height: 18px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; touch-action: none; }
.grip span { width: 40px; height: 4px; border-radius: 4px; background: rgba(241,236,255,.35); }
.tabs { display: flex; gap: .25rem; margin-top: .8rem; flex: 1; min-width: 0; }
.tabs button { border: 1px solid transparent; background: none; color: var(--muted); padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--text); background: var(--surface-strong); border-color: var(--line); }
.panes { min-height: 0; overflow: hidden; height: 0; transition: height .25s ease; }
.sheet[data-open="true"] .panes { height: min(38vh, 340px); }
.pane { height: 100%; overflow: auto; padding: .5rem .1rem; box-sizing: border-box; overscroll-behavior: contain; }
.pane-h { font-family: var(--font-body, inherit); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .4rem 0 .4rem; font-weight: 600; }
.small { font-size: .85rem; } .muted { color: var(--muted); }
.plain-link { color: var(--teal); }

.orb { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; margin-top: .8rem; }
.orb .core { width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0%, #ffb3ec 22%, #ff5fd2 45%, #7b3cf0 75%, #1b0a35 100%);
  box-shadow: 0 0 12px 3px rgba(255,95,210,.5); animation: breathe 5s ease-in-out infinite; }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(144,182,208,.4); animation: spin 18s linear infinite; }
.orb .ring.r2 { inset: 12%; border-style: solid; border-color: rgba(45,226,196,.45); animation-direction: reverse; animation-duration: 11s; }
.orb[data-state="listening"] .core { background: radial-gradient(circle at 38% 32%, #fff 0%, #b5fff1 28%, #2de2c4 60%, #073a3a 100%); animation: pulse 1s ease-in-out infinite; }
.orb[data-state="thinking"] .ring { animation-duration: 2.5s; }
.orb[data-state="speaking"] .core { animation: talk .45s ease-in-out infinite alternate; }
@keyframes breathe { 50% { transform: scale(1.05); } }
@keyframes pulse { 50% { transform: scale(1.12); } }
@keyframes talk { from { transform: scale(.96); } to { transform: scale(1.1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* chat */
.bubbles { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bubbles li { border-radius: 14px; padding: .5rem .8rem; font-size: .9rem; line-height: 1.45; max-width: 88%; background: rgba(12,6,24,.6); border: 1px solid var(--line); overflow-wrap: anywhere; }
.bubbles li.you { justify-self: end; background: var(--surface-strong); }
.bubbles li.sophia { justify-self: start; border-color: rgba(255,95,210,.35); }
.bubbles .who { display: block; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bubbles li.sophia .who { color: var(--warm); }
.bubbles .cite { all: unset; cursor: pointer; display: inline-block; margin-top: .25rem; font-size: .8rem; color: var(--teal); text-decoration: underline; }
.bubbles li.proposal { border-color: #ffc861; }
.bubbles li.proposal .prop-actions { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.bubbles li.proposal button { border-radius: 999px; padding: .35rem .9rem; border: 1px solid rgba(255,200,97,.6); background: transparent; cursor: pointer; }
.bubbles li.proposal button[data-d="approve"] { background: linear-gradient(90deg, #8b5cf6, #ff5fd2); border: 0; color: #fff; }
.chatbar { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .3rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,6,24,.7); min-width: 0; }
.chatbar input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: .45rem .3rem; outline: none; }
.mic { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(135deg, #8b5cf6, #ff5fd2); color: #fff; cursor: pointer; flex: none; }
.mic[aria-pressed="true"] { background: var(--teal); }
.send { flex: none; border: 1px solid var(--line); background: var(--surface-strong); border-radius: 999px; padding: .45rem .9rem; font-weight: 600; cursor: pointer; }

/* details */
#insp-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: .1rem 0 .3rem; overflow-wrap: anywhere; }
#insp-body .type { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
#insp-body p { font-size: .9rem; margin: .3rem 0; color: var(--muted); }
.insp-actions { display: flex; gap: .4rem; margin: .6rem 0 0; flex-wrap: wrap; }
.insp-actions button { border: 1px solid var(--line); background: var(--surface-strong); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; }

/* filters */
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .2rem .8rem; }
.legend-list label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; padding: .25rem 0; }
.legend-list input { accent-color: var(--warm); }
.legend-list .sw { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; background: currentColor; flex: none; }
.legend-list .ct { margin-left: auto; color: var(--muted); font-size: .75rem; }
.toggles { display: flex; gap: .4rem; flex-wrap: wrap; }
.toggles .tg { font-size: .8rem; color: var(--muted); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; border: 1px solid var(--line); background: none; }
.toggles .tg[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #8b5cf6, #ff5fd2); border-color: transparent; }
.nojs { position: fixed; inset: auto 0 50% 0; text-align: center; }

/* computer: the same structure, with the sheet as a side panel that is always open */
@media (min-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top top" "crumbs sheet" "stage sheet"; }
  .topbar { padding-left: 1rem; padding-right: 1rem; }
  .search input { display: block; width: 260px; }
  .search .icon-btn { display: none; }
  .results { left: auto; right: 1rem; width: 360px; }
  .sheet { border-radius: 0; border-top: 0; border-left: 1px solid var(--line); padding: .25rem 1rem 1rem; }
  .grip { display: none; }
  .tabs { margin-top: .4rem; }
  .orb { margin-top: .4rem; }
  .panes, .sheet[data-open] .panes { height: auto; flex: 1; }
  .lbl { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .orb .core, .orb .ring { animation: none !important; } .panes { transition: none; } }