/* Command Desk — Nova frontend.
   Visual direction locked to the gold reference. Home carries no copy. */

:root{
  --gold:#C9A227;
  --gold-soft:#D9BE6A;
  --gold-wash:#F3E7C4;
  --ink:#1A1A1A;
  --ink-2:#5A5A5A;
  --ink-3:#8C8C8C;
  --line:#E6E6E6;
  --surface:#FAFAFA;
  --panel:#FFFFFF;
  --raise:#FFFFFF;
  --sel:#FBF6E8;

  --panel-w:274px;
  --slide:274px;
  --bar-h:60px;
  --composer-h:62px;
  --r-lg:26px;
  --r-md:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-mode="dark"]{
  --ink:#F2F2F2;
  --ink-2:#B4B4B4;
  --ink-3:#8A8A8A;
  --line:#2A2A2A;
  --surface:#141414;
  --panel:#191919;
  --raise:#202020;
  --sel:#251F10;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font:400 15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── Slide track ───────────────────────────────────────────────
   The panel and the surface sit side by side. Opening translates
   the whole track, so the entire page moves across. */
.track{
  position:fixed; inset:0;
  display:flex;
  width:calc(100% + var(--panel-w));
  transform:translateX(calc(var(--panel-w) * -1));
  transition:transform .42s var(--ease);
  will-change:transform;
}
.track.is-open{transform:translateX(0)}
.track.is-dragging{transition:none}

/* ── Panel ─────────────────────────────────────────────────── */
.panel{
  flex:0 0 var(--panel-w);
  width:var(--panel-w);
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:14px 0 12px;
  overflow:hidden;
}
.panel-close{
  align-self:flex-start;
  margin:0 0 6px 16px;
  width:30px;height:30px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:8px;
  color:var(--ink);cursor:pointer;
}
.panel-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.panel-close:hover{background:var(--sel)}

.nav{flex:1;overflow-y:auto;padding:0 12px;scrollbar-width:thin}
.nav-group{margin:0 0 4px}
.nav-group + .nav-group{margin-top:11px}
.nav-title{
  margin:0 0 4px 10px;
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);
}
.nav-item{
  width:100%;
  display:flex;align-items:center;gap:11px;
  padding:6px 10px;margin-bottom:0;
  background:none;border:0;border-radius:8px;
  font:inherit;font-size:13px;color:var(--ink);
  text-align:left;cursor:pointer;
  position:relative;
}
.nav-item svg{
  width:16px;height:16px;flex:0 0 16px;
  fill:none;stroke:currentColor;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--ink-2);
}
.nav-item:hover{background:var(--sel)}
.nav-item.is-current{background:var(--sel);font-weight:500}
.nav-item.is-current::before{
  content:"";position:absolute;left:0;top:5px;bottom:5px;
  width:2.5px;border-radius:2px;background:var(--gold);
}
.nav-item:focus-visible,.panel-close:focus-visible,.handle:focus-visible,
.send:focus-visible,.more:focus-visible,.clip:focus-visible,
.mode:focus-visible,.orb:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}

.panel-foot{padding:8px 16px 0}
.mode{
  width:100%;
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;
  background:var(--raise);border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:13px;font-weight:500;color:var(--ink);
  cursor:pointer;
}
.mode:hover{border-color:var(--gold-soft)}
.mode-ico{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.mode-caret{width:14px;height:14px;margin-left:auto;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Surface ───────────────────────────────────────────────── */
.surface{
  flex:1 1 auto;min-width:0;
  position:relative;
  background:var(--surface);
  display:flex;flex-direction:column;
}

.bar{
  flex:0 0 var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;
  font-size:14.5px;color:var(--ink);
  letter-spacing:.01em;
}
.bar-date{color:var(--ink)}

/* Handle — click or drag */
.handle{
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:30px;height:52px;
  display:grid;place-items:center;
  background:var(--raise);
  border:1px solid var(--line);border-left:0;
  border-radius:0 12px 12px 0;
  color:var(--ink-2);cursor:pointer;
  touch-action:pan-y;
  z-index:3;
}
.handle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.handle:hover{color:var(--gold)}

/* ── Views ─────────────────────────────────────────────────── */
.view{display:none;flex:1 1 auto;min-height:0}
.view.is-active{display:flex}
.view-home{flex-direction:column;min-height:0}
.view-page{flex-direction:column;overflow-y:auto}

/* Orb stage: takes the whole surface when there is nothing else,
   yields height to the thread once a real exchange exists. */
.stage{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:flex-basis .35s var(--ease);
}
.view-home.has-thread .stage{flex:0 0 auto;padding:6px 0 2px}

/* ── Orb ───────────────────────────────────────────────────── */
.orb{
  position:relative;
  width:min(46vh,330px);height:min(46vh,330px);
  background:none;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;
  border-radius:50%;
  transition:width .35s var(--ease),height .35s var(--ease);
}
/* Still present, still the status object — just smaller once you are
   in conversation, so it can keep reporting real activity. */
.view-home.has-thread .orb{width:104px;height:104px}
.orb img{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  user-select:none;-webkit-user-drag:none;
}
/* rotor : glyph size ratio is fixed by the source geometry (410 : 227) */
.orb-rotor{width:100%;height:100%}
.orb-glyph{width:55.4%;height:55.4%}

/* Only the rotor turns. The glyph never moves. */
.orb[data-state="working"] .orb-rotor{
  animation:rotor var(--rotor-period,5200ms) linear infinite;
}
@keyframes rotor{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Real failure state — motion stops, the fault is shown. */
.orb[data-state="fault"] .orb-rotor{animation:none;filter:grayscale(1) opacity(.45)}
.orb[data-state="fault"]::after{
  content:"";position:absolute;inset:auto auto 8% 50%;
  transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#C0392B;
}

.orb-count{
  position:absolute;top:6%;right:6%;
  min-width:21px;height:21px;padding:0 6px;
  display:grid;place-items:center;
  background:var(--gold);color:#fff;
  border-radius:11px;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
/* display:grid would otherwise defeat [hidden] and show an empty badge */
.orb-count[hidden],.notes[hidden],.attached[hidden],.scrim[hidden]{display:none}

.notes{
  position:absolute;left:50%;bottom:12%;
  transform:translateX(-50%);
  width:min(340px,86%);
  background:var(--raise);border:1px solid var(--line);
  border-radius:14px;padding:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.09);
}
.note{
  display:block;width:100%;text-align:left;
  padding:9px 10px;border:0;border-radius:9px;background:none;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
}
.note:hover{background:var(--sel)}
.note-empty{padding:9px 10px;font-size:13px;color:var(--ink-3)}

/* ── Thread ────────────────────────────────────────────────── */
.thread{
  width:min(720px,92%);margin:0 auto;
  padding:8px 0 16px;
  display:flex;flex-direction:column;gap:12px;
  flex:1 1 auto;min-height:0;overflow-y:auto;
  justify-content:flex-end;   /* messages settle just above the composer */
}
.thread:empty{display:none}
.msg{flex:0 0 auto}
.msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--sel);border:1px solid var(--gold-wash)}
.msg.them{align-self:flex-start;background:var(--raise);border:1px solid var(--line)}
.msg.fault{align-self:stretch;max-width:100%;background:#FDF2F1;border:1px solid #F0C8C2;color:#8A2A1E}
[data-mode="dark"] .msg.fault{background:#2A1614;border-color:#54241D;color:#E8A79C}
.msg-who{display:block;margin-bottom:3px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ── Pages ─────────────────────────────────────────────────── */
.page{width:min(720px,92%);margin:0 auto;padding:10px 0 20px}
.page h1{margin:2px 0 14px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.page-note{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--raise);font-size:13px;color:var(--ink-2);
}
.page-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.roster{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.roster li{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--raise);
  font-size:14px;
}
.roster li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.roster-slot{margin-left:auto;font-size:11.5px;color:var(--ink-3)}

/* ── Composer ──────────────────────────────────────────────── */
.composer{
  flex:0 0 auto;
  width:min(720px,90%);margin:0 auto;
  margin-bottom:max(20px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;
  height:var(--composer-h);padding:0 8px 0 16px;
  background:var(--raise);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.composer:focus-within{border-color:var(--gold-soft)}
.clip{display:grid;place-items:center;width:24px;height:24px;color:var(--gold);cursor:pointer;flex:0 0 24px}
.clip svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.input{
  flex:1;min-width:0;height:100%;
  background:none;border:0;outline:none;
  font:inherit;font-size:15px;color:var(--ink);
}
.input::placeholder{color:var(--ink-3)}
.chips{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.send,.more{
  display:grid;place-items:center;border:0;cursor:pointer;border-radius:50%;
}
.send{
  width:42px;height:42px;
  background:linear-gradient(150deg,var(--gold-soft),var(--gold));
  color:#fff;
  box-shadow:0 2px 7px rgba(201,162,39,.32);
}
.send svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.send[disabled]{opacity:.42;cursor:default;box-shadow:none}
.more{width:30px;height:30px;background:none;color:var(--ink-3)}
.more svg{width:17px;height:17px;fill:currentColor;stroke:none}

.attached{
  width:min(720px,90%);margin:0 auto 10px;
  font-size:12.5px;color:var(--ink-2);
}

/* Scoped to .surface, so it never overlaps the panel. Handle stays above it. */
.scrim{position:absolute;inset:0;background:transparent;z-index:2}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:600px){
  :root{--panel-w:255px;--bar-h:54px}
  .bar{padding:0 18px;font-size:13.5px}
  .orb{width:min(38vh,240px);height:min(38vh,240px)}
  .composer{width:94%;height:56px}
}

@media (prefers-reduced-motion:reduce){
  .track{transition:none}
  .orb[data-state="working"] .orb-rotor{animation-duration:0s;animation:none;opacity:.72}
}


/* ── Command Desk visual upgrade ───────────────────────────── */
:root{
  --gold:#C8A43A;
  --gold-bright:#E4C765;
  --gold-deep:#9B7A19;
  --gold-wash:#F6EED3;
  --surface:#F7F6F2;
  --panel:#FCFBF8;
  --raise:rgba(255,255,255,.88);
  --line:rgba(38,34,24,.10);
  --line-strong:rgba(38,34,24,.16);
  --ink:#181715;
  --ink-2:#625F57;
  --ink-3:#969188;
  --sel:rgba(200,164,58,.11);
  --shadow-soft:0 10px 30px rgba(38,34,24,.06);
  --shadow-card:0 18px 48px rgba(38,34,24,.08);
}

[data-mode="dark"]{
  --surface:#10100F;
  --panel:#151513;
  --raise:rgba(28,28,25,.92);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --ink:#F3F0E8;
  --ink-2:#B9B4A8;
  --ink-3:#777267;
  --sel:rgba(228,199,101,.11);
  --shadow-soft:0 12px 36px rgba(0,0,0,.25);
  --shadow-card:0 20px 55px rgba(0,0,0,.28);
}

body{background:var(--surface);}
.surface{
  background:
    radial-gradient(circle at 50% 42%, rgba(200,164,58,.075), transparent 29%),
    radial-gradient(circle at 50% 120%, rgba(200,164,58,.045), transparent 35%),
    var(--surface);
}
.surface::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(40,35,24,.075) .55px,transparent .55px);
  background-size:5px 5px;mix-blend-mode:multiply;
}
[data-mode="dark"] .surface::before{opacity:.16;mix-blend-mode:screen}
.bar{position:relative;z-index:1;padding:0 30px;color:var(--ink-2)}
.bar-time{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.015em}
.bar-date{font-size:13px;color:var(--ink-3)}

.panel{
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 88%,var(--surface)));
  box-shadow:18px 0 50px rgba(0,0,0,.06);
}
.panel-close{margin-top:4px}
.nav{padding:4px 14px}
.nav-group + .nav-group{margin-top:16px}
.nav-title{font-size:9px;letter-spacing:.16em;margin-left:11px;margin-bottom:6px}
.nav-item{min-height:36px;padding:7px 11px;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.nav-item:hover{transform:translateX(2px)}
.nav-item.is-current{border-color:rgba(200,164,58,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.nav-item.is-current svg{color:var(--gold)}
.panel-foot{padding:12px 16px 4px}
.mode{min-height:40px;border-radius:12px;box-shadow:var(--shadow-soft)}

.handle{width:34px;height:58px;border-color:var(--line);box-shadow:4px 0 20px rgba(0,0,0,.05);backdrop-filter:blur(8px)}
.handle:hover{transform:translateY(-50%) translateX(2px)}

.stage{position:relative;overflow:hidden}
.stage::before{
  content:"";position:absolute;width:min(48vw,440px);height:min(48vw,440px);border-radius:50%;
  border:1px solid rgba(200,164,58,.12);box-shadow:0 0 90px rgba(200,164,58,.08);
  pointer-events:none;
}
.orb{filter:drop-shadow(0 18px 36px rgba(155,122,25,.13));}
.orb::before{
  content:"";position:absolute;inset:7%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.orb:hover::before,.orb[data-state="working"]::before{opacity:1}
.orb[data-state="working"]{filter:drop-shadow(0 20px 45px rgba(200,164,58,.24))}
.orb[data-state="fault"]{filter:drop-shadow(0 15px 32px rgba(180,55,42,.15))}

.thread{width:min(820px,90%);padding:12px 0 18px;gap:14px}
.msg{box-shadow:0 4px 18px rgba(0,0,0,.035);border-radius:17px;padding:12px 15px;line-height:1.55}
.msg.me{background:linear-gradient(135deg,rgba(246,238,211,.9),rgba(255,255,255,.88));border-color:rgba(200,164,58,.2)}
[data-mode="dark"] .msg.me{background:rgba(200,164,58,.10)}
.msg.them{background:var(--raise);backdrop-filter:blur(10px)}
.msg-who{font-weight:600}

.page{width:min(900px,90%);padding:22px 0 30px}
.page h1{font-size:26px;letter-spacing:-.025em;margin:0 0 7px}
.page-subtitle{margin:0 0 22px;color:var(--ink-2);font-size:14px;max-width:620px}
.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.page-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--raise);box-shadow:var(--shadow-soft);backdrop-filter:blur(12px)}
.page-card h2{margin:0 0 7px;font-size:14px;font-weight:650}
.page-card p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.6}
.page-card .status{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
[data-mode="dark"] .page-card .status{color:var(--gold-bright)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(200,164,58,.10)}
.page-note{border-radius:13px;box-shadow:var(--shadow-soft)}
.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.roster li{min-height:54px;border-radius:14px;box-shadow:var(--shadow-soft);padding:13px 15px}
.roster li::before{width:7px;height:7px;box-shadow:0 0 0 4px rgba(200,164,58,.10)}

.composer{position:relative;z-index:4;width:min(820px,90%);height:66px;border-radius:22px;border-color:var(--line-strong);box-shadow:0 14px 40px rgba(38,34,24,.10);backdrop-filter:blur(16px);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
.composer:focus-within{border-color:rgba(200,164,58,.48);box-shadow:0 18px 48px rgba(38,34,24,.13),0 0 0 4px rgba(200,164,58,.07)}
.input{font-size:15px}
.send{width:44px;height:44px;transition:transform .16s ease,box-shadow .16s ease}
.send:not([disabled]):hover{transform:translateY(-1px) scale(1.025);box-shadow:0 5px 16px rgba(201,162,39,.36)}
.more{width:34px;height:34px}
.attached{width:min(820px,90%);padding:8px 14px;margin-bottom:4px}

@media (max-width:760px){
  .page-grid,.roster{grid-template-columns:1fr}
  .page{width:92%;padding-top:14px}
  .page h1{font-size:22px}
}
@media (max-width:600px){
  .surface{background:radial-gradient(circle at 50% 40%,rgba(200,164,58,.07),transparent 36%),var(--surface)}
  .bar{padding:0 18px}
  .stage::before{width:260px;height:260px}
  .composer{width:94%;height:58px;border-radius:19px}
}

/* ── Sign-in gate ─────────────────────────────────────────────────────────
   Added during integration: the supplied build had no gate, so the surface
   rendered for anyone and only the API calls behind it failed. It covers the
   viewport rather than sitting inside the track, because the track is hidden
   until somebody is signed in. */
.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6vh 1.25rem;
  background: var(--bg, #f6f6f4);
  z-index: 100;
}
.gate[hidden] { display: none; }

.gate-card {
  width: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: var(--card, #fff);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.gate-card h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.gate-intro { margin: 0 0 1rem; opacity: .7; font-size: .9rem; line-height: 1.5; }
.gate-card label { font-size: .82rem; opacity: .75; margin-top: .5rem; }
.gate-card input {
  padding: .7rem .8rem;
  border: 1px solid var(--line, #e2e2de);
  border-radius: 10px;
  background: var(--bg, #f6f6f4);
  font: inherit;
}
.gate-card input:focus-visible { outline: 2px solid var(--accent, #c9a227); outline-offset: 1px; }
.gate-submit {
  margin-top: 1.25rem;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #c9a227);
  color: #1a1a17;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.gate-error {
  margin-top: .75rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  background: rgba(190, 60, 60, .12);
  color: #b03a3a;
  font-size: .88rem;
}
.gate-error[hidden] { display: none; }

html[data-mode="dark"] .gate { background: var(--bg, #14150f); }
html[data-mode="dark"] .gate-card { background: var(--card, #1c1d16); }
html[data-mode="dark"] .gate-submit { color: #14150f; }

/* `.track` sets display:flex, which outranks the HTML `hidden` attribute's
   default display:none — so the surface stayed visible behind the gate and the
   browser suite caught it. Stated explicitly rather than relying on attribute
   precedence. */
.track[hidden] { display: none !important; }


/* Phone → laptop task surface. It uses the existing page-card language so the
   mobile path is a real Command Desk surface, not a second app. */
.laptop-mobile { display:grid; gap:1rem; max-width:48rem; margin:0 auto; }
.laptop-form label { display:block; margin:.8rem 0 .35rem; font-weight:600; }
.laptop-form select, .laptop-form textarea, .laptop-form input { width:100%; box-sizing:border-box; border:1px solid var(--line, #ccc); border-radius:12px; padding:.75rem; background:var(--surface, #fff); color:inherit; font:inherit; }
.laptop-form textarea { resize:vertical; }
.laptop-form .gate-submit { margin-top:1rem; width:100%; }
.laptop-status { min-height:8rem; }
@media (max-width: 700px) { .laptop-mobile { padding:0 .5rem; } .laptop-form, .laptop-status { padding:1rem; } }