/* The AI Brain: the same calm, dark wall as the generations-ai-brain mockup. Ava's living portrait at the centre, a
   glass card per department around her, PPA along the base. Single dark look by choice (it often sits on a TV). */
:root {
  color-scheme: dark;
  --bg: #030406;
  --ink: #f5f5f7;
  --ink2: rgba(235, 235, 245, .64);
  --ink3: rgba(235, 235, 245, .38);
  --glass: rgba(255, 255, 255, .05);
  --edge: rgba(255, 255, 255, .1);
  --core: #64d2ff;
  --ok: #32d74b;
  --warn: #ffb340;
  --bad: #ff453a;
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --u: clamp(13px, .5vw + .5vh, 20px); /* scales up for a big TV */
  --r: calc(var(--u) * 1.4);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--u);
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em; overflow: hidden; }
button, textarea { font: inherit; color: inherit; }
img { display: block; }

/* ---------- living background ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(100px); }
.aurora i:nth-child(1) { background: #1557ff; opacity: .2; left: -18vmax; top: -30vmax; animation: drift1 52s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: #8a2cff; opacity: .14; right: -24vmax; top: 6vmax; animation: drift2 64s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: #00b3a4; opacity: .1; left: 18vmax; bottom: -40vmax; animation: drift3 58s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(20vmax, 14vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, 18vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(12vmax, -14vmax) scale(1.2); } }
#net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.stage { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.2) max(calc(var(--u) * 1.8), env(safe-area-inset-right)) calc(var(--u) * 1.4) max(calc(var(--u) * 1.8), env(safe-area-inset-left)); }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: calc(var(--u) * 1.6); flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em .45em .6em; border-radius: 999px; font-size: .85em; font-weight: 500;
  color: var(--ink2); text-decoration: none; background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); transition: color .2s, background .2s; }
.back:hover, .back:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .12); outline: none; }
.brand { display: flex; align-items: baseline; gap: .4em; font-size: 1.5em; letter-spacing: -.03em; }
.brand b { font-weight: 600; }
.brand span { font-weight: 300; color: var(--ink2); }
.hint { margin: 0 0 0 auto; font-size: .82em; color: var(--ink3); }

/* ---------- the wall ---------- */
.main { display: grid; min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "mia core jack" "sam core theo" "kai kai kai";
  gap: calc(var(--u) * 1.1) calc(var(--u) * 1.8); }
.core { grid-area: core; } #d-mia { grid-area: mia; } #d-jack { grid-area: jack; } #d-sam { grid-area: sam; } #d-theo { grid-area: theo; } #d-kai { grid-area: kai; }

/* Ava */
.core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--u); }
.face { position: relative; width: min(30vh, 22vw, 300px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.face img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .6), 0 0 0 5px rgba(100, 210, 255, .65), 0 0 80px -10px rgba(100, 210, 255, .55); }
.face .ring { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(100, 210, 255, .28), rgba(100, 210, 255, .08) 65%, transparent);
  animation: breathe 5s ease-in-out infinite; }
.face:hover img, .face:focus-visible img { box-shadow: 0 0 0 3px rgba(0, 0, 0, .6), 0 0 0 5px var(--core), 0 0 110px -6px rgba(100, 210, 255, .8); }
.face:focus-visible { outline: none; }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1.04); opacity: 1; } }
.core h1 { margin: calc(var(--u) * 1.1) 0 0; font-size: 2.6em; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.core .role { margin: .35em 0 0; font-size: .82em; font-weight: 500; color: var(--core); letter-spacing: .02em; }
.core .sub { margin: .8em 0 0; max-width: 24em; font-size: .9em; line-height: 1.45; color: var(--ink2); }
.talk { margin-top: calc(var(--u) * 1.1); padding: .65em 1.4em; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .92em;
  border: 1px solid rgba(100, 210, 255, .45); background: rgba(100, 210, 255, .12); transition: background .2s; }
.talk:hover, .talk:focus-visible { background: rgba(100, 210, 255, .22); outline: none; }
.off { margin: .8em 0 0; font-size: .78em; color: var(--warn); }

/* department cards */
.dept { --c: var(--core); position: relative; min-height: 0; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
  border: 1px solid var(--edge); border-radius: var(--r);
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .7);
  transition: border-color .4s, box-shadow .4s, transform .4s; }
.dept::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 55% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 65%); }
.dept:hover, .dept:focus-visible { outline: none; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 50px -16px color-mix(in srgb, var(--c) 70%, transparent); }
.dept.open { border-color: color-mix(in srgb, var(--c) 65%, transparent); }
.dhead { position: relative; display: flex; align-items: center; gap: .85em; }
.dhead img { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 0 3.5px color-mix(in srgb, var(--c) 80%, transparent); }
.dhead h2 { margin: 0; font-size: 1.4em; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.dhead h2 em { display: block; margin-bottom: .2em; font-style: normal; font-size: .52em; font-weight: 600; letter-spacing: .03em; color: var(--c); }
.dhead .go { margin-left: auto; flex: none; font-size: .75em; font-weight: 600; padding: .45em .9em; border-radius: 999px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.dblurb { position: relative; margin: 0; font-size: .86em; line-height: 1.4; color: var(--ink2); }
.duties { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; min-height: 0; overflow: hidden; }
.duties li { display: flex; gap: .6em; align-items: baseline; font-size: .8em; line-height: 1.35; color: var(--ink2); }
.duties li::before { content: ""; flex: none; width: .45em; height: .45em; border-radius: 50%; transform: translateY(-.1em);
  background: color-mix(in srgb, var(--c) 85%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.quick { position: relative; margin-top: auto; display: flex; flex-wrap: wrap; gap: .45em; }
.quick span { font-size: .74em; line-height: 1.3; padding: .5em .85em; border-radius: .9em; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); transition: background .2s; }
.quick span:hover, .quick span:focus-visible { background: color-mix(in srgb, var(--c) 20%, transparent); outline: none; }
#d-kai .quick { display: none; }
#d-kai { flex-direction: row; align-items: center; gap: calc(var(--u) * 1.6); }
#d-kai .dhead { flex: none; min-width: 16em; }
#d-kai .dhead .go { margin-left: 1em; }
#d-kai .dblurb { flex: 1; }
#d-kai .duties { flex: 1.4; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- the conversation ---------- */
.chat { --c: var(--core); position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  display: grid; grid-template-rows: auto 1fr auto; font-size: 15px;
  background: rgba(14, 16, 20, .9); border-left: 1px solid var(--edge);
  backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%);
  box-shadow: -40px 0 80px -30px rgba(0, 0, 0, .8);
  transform: translateX(105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.chat.on { transform: none; }
.scrim { position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .35); }
.chead { display: flex; align-items: center; gap: 12px; padding: max(16px, env(safe-area-inset-top)) 16px 14px 20px; border-bottom: 1px solid var(--edge); }
.chead img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 0 3.5px var(--c); }
.cwho { flex: 1; min-width: 0; }
.cwho h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.cwho small { font-size: 12.5px; font-weight: 500; color: var(--c); }
.icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; color: var(--ink2); background: rgba(255, 255, 255, .06); }
.icon:hover, .icon:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .13); outline: none; }
.cbody { overflow-y: auto; padding: 18px 20px 8px; overscroll-behavior: contain; }
.intro p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.cans { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); }
.cans div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; font-size: 13px; line-height: 1.4; }
.cans b { font-weight: 600; color: var(--c); }
.cans span { color: var(--ink2); }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.starters button { padding: 8px 12px; border-radius: 12px; cursor: pointer; font-size: 13.5px; line-height: 1.3; text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.starters button:hover, .starters button:focus-visible { background: color-mix(in srgb, var(--c) 18%, transparent); outline: none; }
.thread { display: grid; gap: 14px; padding-bottom: 12px; }
.msg { max-width: 92%; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.msg.you { justify-self: end; padding: 9px 14px; border-radius: 18px 18px 4px 18px; background: rgba(255, 255, 255, .1); white-space: pre-wrap; }
.msg.them { justify-self: start; }
.msg.them p { margin: 0 0 .65em; } .msg.them p:last-child { margin-bottom: 0; }
.msg.them ul, .msg.them ol { margin: 0 0 .65em; padding-left: 1.3em; } .msg.them li { margin: .2em 0; }
.msg.them h4 { margin: .8em 0 .3em; font-size: 15px; font-weight: 600; }
.msg.them strong { font-weight: 600; }
.msg.err { color: var(--bad); font-size: 14px; }
.status { font-size: 13px; color: var(--ink3); display: flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.card { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--edge); font-size: 13.5px; line-height: 1.45; }
.card .k { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink3); margin-bottom: 4px; }
.card .stats { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.card .stats b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.card .stats small { color: var(--ink3); font-size: 12px; }
.card .acts { display: flex; gap: 8px; margin-top: 10px; }
.card .acts button, .card a.btn { padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink);
  border: 1px solid var(--edge); background: rgba(255, 255, 255, .07); }
.card .acts button.yes { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 20%, transparent); }
.card .done { color: var(--ok); font-weight: 600; }
.cask { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--edge); }
.cask textarea { flex: 1; resize: none; max-height: 160px; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4;
  border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); outline: none; }
.cask textarea:focus { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.cask button { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer;
  color: #000; background: var(--c); transition: opacity .2s; }
.cask button:disabled { opacity: .35; cursor: default; }

/* ---------- smaller screens: one column, scrolling ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .stage { height: auto; min-height: 100%; }
  .hint { display: none; }
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "core" "mia" "jack" "sam" "theo" "kai"; }
  .face { width: min(52vw, 230px); }
  #d-kai { flex-direction: column; align-items: stretch; }
  #d-kai .dhead { min-width: 0; }
  #d-kai .dhead .go { margin-left: auto; }
  #d-kai .dblurb, #d-kai .duties { flex: none; }
  #d-kai .duties { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .face .ring, .status::before { animation: none; }
  .chat, .dept { transition: none; }
}
.pre { white-space: pre-wrap; }
.tbl { overflow-x: auto; margin: .5em 0; }
.tbl table { border-collapse: collapse; font-size: .9em; width: 100%; }
.tbl th, .tbl td { text-align: left; padding: .35em .6em; border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: top; }
.tbl th { font-weight: 600; color: var(--ink2, #c7c7cc); }