/* ============ ANTELUCA · Ember Watch brand layer ============ */
*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` must win. It is only a UA rule, so any component rule that sets display
   (.jbar{display:flex}, .grid2{display:grid}…) silently outranks it and the element
   stays on screen - that is how the briefing's "Assembling…" line got stuck forever. */
[hidden]{display:none!important}
:root{
  /* The app is dark, so SAY so. Without this the UA paints native controls in its light theme -
     a white checkbox on a black card, light scrollbars, a light date picker. One line fixes the
     lot; do not go styling checkboxes by hand. The accent is the ember, so a ticked box is ours. */
  color-scheme:dark;
  accent-color:#E86F2D;
  --bg:#0F0C0A; --bg2:#151009; --card:#1A1512; --card2:#221B15;
  --ink:#F0E9E1; --ink2:#C4B8AA; --ink3:#8A7E70;
  --line:#2B221B; --line2:#3A2E22;
  --ember:#E86F2D; --ember-hi:#FFA95E; --ember-deep:#B5501A; --ember-wash:rgba(232,111,45,.12);
  --ok:#7FB069; --warn:#D9A441;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* no monospace anywhere - user rule. --mono kept as an alias so legacy rules resolve to sans. */
  --mono:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
body{background:var(--bg);color:var(--ink);font:15.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.mono{font-family:var(--mono)}
.kick{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}

.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);padding:12px 24px;
  border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;background:transparent;color:inherit;
  transition:transform .16s var(--ease),background .16s,border-color .16s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
.btn-ember{background:var(--ember);color:#1A0F06;box-shadow:0 8px 30px -10px rgba(232,111,45,.5)}
.btn-ember:hover{background:var(--ember-hi)}
.btn-ghost{border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink3)}
.btn-sm{padding:8px 16px;font-size:13px}

/* ================= THE ORB v2 (Jarvis) =================
   markup:
   <div class="orb idle">
     <i class="o-glow"></i><i class="o-pulse"></i><i class="o-iris"></i><i class="o-core"></i>
     <svg class="o-ticks" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" fill="none"
       stroke="currentColor" stroke-width="1.1" stroke-dasharray="1 4.1" stroke-linecap="round"/></svg>
     <i class="o-ring r1"></i><i class="o-ring r2"></i>
     <i class="o-orbit s1"><b></b></i><i class="o-orbit s2"><b></b></i>
   </div>
   states: .idle .listening .thinking .speaking                    */
.orb{position:relative;width:var(--orb,120px);height:var(--orb,120px);flex:none;
  filter:drop-shadow(0 0 calc(var(--orb,120px)*.16) rgba(232,111,45,.38))}
.orb i,.orb svg{position:absolute;border-radius:50%;pointer-events:none}
.o-glow{inset:-30%;background:radial-gradient(circle,rgba(232,111,45,.30) 0%,rgba(181,80,26,.10) 44%,transparent 68%);
  animation:o-breathe 5s var(--ease) infinite}
.o-iris{inset:21%;filter:blur(3px) saturate(1.25);opacity:.95;
  background:conic-gradient(from 0deg,#FFDFAE,#FF9E52,#E86F2D,#8A3D12,#C2591F,#FFC98F,#FFDFAE);
  animation:o-spin 8.5s linear infinite}
.o-core{inset:18%;
  background:radial-gradient(circle at 33% 29%,rgba(255,240,214,.96) 0%,rgba(255,183,110,.62) 20%,
    rgba(232,111,45,.18) 44%,rgba(70,28,8,.72) 74%,rgba(24,10,3,.95) 100%);
  box-shadow:0 0 calc(var(--orb,120px)*.10) rgba(255,201,143,.5) inset,
             0 0 0 1px rgba(255,169,94,.22) inset,
             0 0 calc(var(--orb,120px)*.26) rgba(232,111,45,.42);
  animation:o-breathe 5s var(--ease) infinite}
.o-ticks{inset:2.5%;color:rgba(255,169,94,.42);border-radius:0;animation:o-spin 44s linear infinite}
.o-ring{inset:0;
  -webkit-mask:radial-gradient(closest-side,transparent 66%,#000 70%,#000 75%,transparent 79%);
          mask:radial-gradient(closest-side,transparent 66%,#000 70%,#000 75%,transparent 79%)}
.o-ring.r1{background:conic-gradient(from 0deg,transparent 0 58%,rgba(255,201,143,.95) 76%,rgba(255,158,82,.25) 88%,transparent 94% 100%);
  animation:o-spin 6.5s linear infinite}
.o-ring.r2{inset:-12%;
  -webkit-mask:radial-gradient(closest-side,transparent 73%,#000 77%,#000 80.5%,transparent 84%);
          mask:radial-gradient(closest-side,transparent 73%,#000 77%,#000 80.5%,transparent 84%);
  background:conic-gradient(from 150deg,transparent 0 66%,rgba(232,111,45,.5) 82%,transparent 93% 100%);
  animation:o-spin 12s linear infinite reverse}
.o-orbit{inset:-4%;animation:o-spin 7.5s linear infinite}
.o-orbit b{position:absolute;left:50%;top:-1.5%;width:5%;height:5%;margin-left:-2.5%;border-radius:50%;
  background:#FFC98F;box-shadow:0 0 8px 2px rgba(255,169,94,.65)}
.o-orbit.s2{inset:-14%;animation:o-spin 13s linear infinite reverse}
.o-orbit.s2 b{width:3.6%;height:3.6%;margin-left:-1.8%;background:#E86F2D;box-shadow:0 0 6px 1px rgba(232,111,45,.5)}
.o-pulse{inset:4%;border:1px solid rgba(255,169,94,.5);opacity:0;transform:scale(.7)}

@keyframes o-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.93}}
@keyframes o-spin{to{transform:rotate(360deg)}}
@keyframes o-ripple{0%{opacity:.7;transform:scale(.66)}100%{opacity:0;transform:scale(1.45)}}
@keyframes o-flicker{0%,100%{transform:scale(1)}16%{transform:scale(1.06)}34%{transform:scale(1.01)}
  52%{transform:scale(1.085)}68%{transform:scale(1.025)}86%{transform:scale(1.055)}}

.orb.listening .o-core,.orb.listening .o-glow{animation-duration:2.6s}
.orb.listening .o-iris{animation-duration:5s}
.orb.listening .o-ring.r1{animation-duration:4s}
.orb.listening{filter:drop-shadow(0 0 calc(var(--orb,120px)*.22) rgba(232,111,45,.52))}

.orb.thinking .o-core{animation:o-breathe .95s var(--ease) infinite}
.orb.thinking .o-iris{animation-duration:1.7s;filter:blur(2px) saturate(1.5)}
.orb.thinking .o-ring.r1{animation-duration:1.4s}
.orb.thinking .o-ring.r2{animation-duration:2.2s}
.orb.thinking .o-ticks{animation-duration:7s}
.orb.thinking .o-orbit{animation-duration:2.4s}
.orb.thinking .o-orbit.s2{animation-duration:3.8s}
.orb.thinking .o-pulse{animation:o-ripple 1.25s var(--ease) infinite}
.orb.thinking{filter:drop-shadow(0 0 calc(var(--orb,120px)*.3) rgba(255,169,94,.62))}

.orb.speaking .o-core{animation:o-flicker 1.6s linear infinite}
.orb.speaking .o-iris{animation-duration:3.2s}
.orb.speaking .o-ring.r1{animation-duration:3s}
.orb.speaking .o-orbit{animation-duration:4.2s}
.orb.speaking .o-pulse{animation:o-ripple 2.4s var(--ease) infinite}

@media (prefers-reduced-motion:reduce){
  .orb i,.orb svg{animation:none!important}
  .orb .o-pulse,.orb .o-orbit{display:none}
  .btn,.btn:hover{transition:none;transform:none}
}

/* ---------------- chat primitives ---------------- */
.thread{display:flex;flex-direction:column;gap:18px}
.m-user{align-self:flex-end;max-width:78%;background:var(--card2);border:1px solid var(--line2);
  border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:14.5px}
.m-coach{align-self:flex-start;max-width:86%}
.m-coach .body{font-size:14.5px;line-height:1.7;color:var(--ink2)}
.m-coach .body b,.m-coach .body strong{color:var(--ink);font-weight:650}
.m-coach .body .hl{color:var(--ember-hi)}
.m-coach .meta{margin-top:8px;font:10.5px var(--mono);color:var(--ink3)}
.caret{display:inline-block;width:8px;height:15px;background:var(--ember);vertical-align:-2px;
  animation:caret-blink 1s steps(1) infinite;border-radius:1px}
@keyframes caret-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

.composer{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:18px;
  padding:8px 8px 8px 20px;display:flex;align-items:flex-end;gap:10px;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85);transition:border-color .2s}
.composer:focus-within{border-color:var(--ember-deep)}
.composer textarea{flex:1;background:transparent;border:0;outline:0;resize:none;color:var(--ink);
  font:15px/1.55 var(--sans);padding:10px 0;max-height:160px}
.composer textarea::placeholder{color:var(--ink3)}
.send{width:42px;height:42px;border-radius:12px;border:0;background:var(--ember);color:#1A0F06;
  cursor:pointer;display:grid;place-items:center;flex:none;transition:background .15s}
.send:hover{background:var(--ember-hi)}
.send:disabled{background:var(--line2);color:var(--ink3);cursor:default}
.send:focus-visible{outline:2px solid var(--ember-hi);outline-offset:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font:500 12.5px var(--sans);color:var(--ink2);background:transparent;border:1px solid var(--line2);
  border-radius:999px;padding:8px 15px;cursor:pointer;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--ember-deep);color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--ember-hi);outline-offset:2px}

/* shared card + input primitives (app views) */
.rc{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:18px}
.rc .uk{font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.in-text{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  font:13.5px/1.6 var(--sans);padding:10px 12px;outline:0}
.in-text:focus{border-color:var(--ember-deep)}
textarea.in-text{resize:vertical;min-height:58px}