/* ============================================================
   public/css/orb.css — the AI Orb (public/js/orb.js) + its UI kit
   (public/js/orb-kit.js): orb button, radial menu, tooltips, thinking words,
   typewriter caret, push-to-talk mini window.

   Colours come from the host page's tokens (dashboard: --panel / --text / --muted /
   --line / --accent; data-mode light|dark) through --orbk-* with fallbacks, so the
   same file themes itself in the dashboard and in the Orb Lab.
   ============================================================ */
/* Declared on the components (not :root) so they resolve against the nearest
   theme tokens — the dashboard's <html data-mode>, or a themed wrapper. */
.lt-orb, .lt-orb-host, .orbk-radial, .orbk-mini, .orbk-think{
  --orbk-surface: var(--panel, #0a1626);
  --orbk-surface-2: var(--raised, #0e2236);
  --orbk-text: var(--text, #EAF2F9);
  --orbk-muted: var(--muted, #7A9BB5);
  --orbk-line: var(--line, rgba(255,255,255,.08));
  --orbk-gold: #F5A623;
  --orbk-gold-text: #F5C75D;           /* gold that reads on the surface */
  --orbk-accent2: #8B5CF6;             /* re-tinted from the orb's palette */
  --orbk-shadow: 0 18px 48px rgba(0,0,0,.45);
  --orbk-display: var(--display, 'Sora', system-ui, sans-serif);
  --orbk-font: var(--bodyf, 'Inter', system-ui, sans-serif);
}
[data-mode="light"] :is(.lt-orb, .lt-orb-host, .orbk-radial, .orbk-mini, .orbk-think),
.orbk-light :is(.lt-orb, .lt-orb-host, .orbk-radial, .orbk-mini, .orbk-think){
  --orbk-gold-text: #B06F0A;
  --orbk-shadow: 0 16px 40px rgba(13,27,42,.16);
}

/* ---------------- the orb button ---------------- */
.lt-orb{position:relative; display:inline-block; width:var(--orb-size, 64px); height:var(--orb-size, 64px); padding:0; margin:0;
  border:0; border-radius:50%; background:transparent; cursor:pointer; outline:none;
  touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent}
.lt-orb .lt-orb-canvas, .lt-orb-host .lt-orb-canvas{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none}
.lt-orb-host{position:relative}
.lt-orb:focus-visible::after{content:""; position:absolute; inset:-5px; border-radius:50%; box-shadow:0 0 0 2px var(--orbk-gold), 0 0 0 5px rgba(245,166,35,.25)}
/* reduced motion: a static orb that only breathes its opacity */
.lt-orb-reduced .lt-orb-canvas{animation:ltOrbBreathe 4s ease-in-out infinite}
@keyframes ltOrbBreathe{0%,100%{opacity:1} 50%{opacity:.82}}

/* ---------------- radial menu ---------------- */
.orbk-radial{position:fixed; left:0; top:0; width:0; height:0; z-index:900}
.orbk-radial[hidden]{display:none}
.orbk-arc{position:absolute; overflow:visible; pointer-events:none; opacity:0; transition:opacity .25s ease}
.orbk-arc path{fill:none; stroke:var(--orbk-gold); stroke-width:1.2; stroke-opacity:.35; stroke-dasharray:2 5; stroke-linecap:round}
.orbk-radial.show .orbk-arc{opacity:1; transition-delay:.12s}
.orbk-rbtn{position:absolute; left:0; top:0; width:44px; height:44px; margin:0; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:var(--orbk-gold-text);
  background:var(--orbk-surface); border:1px solid var(--orbk-line); box-shadow:var(--orbk-shadow); cursor:pointer;
  transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, border-color .18s ease, background .18s ease;
  transition-delay:calc((3 - var(--i, 0)) * 30ms); -webkit-tap-highlight-color:transparent}
.orbk-radial.show .orbk-rbtn{transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity:1; pointer-events:auto;
  transition-delay:calc(var(--i, 0) * 40ms)}
.orbk-rbtn:hover, .orbk-rbtn:focus-visible{border-color:var(--orbk-gold); background:var(--orbk-surface-2); outline:none}
.orbk-rbtn:focus-visible{box-shadow:0 0 0 2px var(--orbk-gold), var(--orbk-shadow)}
.orbk-rbtn.is-empty{border-style:dashed; color:var(--orbk-muted)}
.orbk-rbtn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.orbk-rbtn i, .orbk-rbtn svg{pointer-events:none}
/* Tooltips: placed by orb-kit (tooltipPlacement) on the side facing away from the orb, never
   over another button; inline left/top + data-side. Shown after a short delay so sliding
   between buttons doesn't flicker; hidden at once. */
.orbk-tip{position:absolute; left:0; top:0; z-index:3; white-space:nowrap; pointer-events:none; text-align:left;
  padding:5px 9px; border-radius:8px; font:600 12px/1.25 var(--orbk-font); color:var(--orbk-text); background:var(--orbk-surface-2);
  border:1px solid var(--orbk-line); box-shadow:var(--orbk-shadow); opacity:0; transform:translate(var(--tdx, 0px), var(--tdy, 4px));
  transition:opacity .12s ease, transform .12s ease}
.orbk-tip[data-side="left"]{--tdx:4px; --tdy:0px}
.orbk-tip[data-side="right"]{--tdx:-4px; --tdy:0px}
.orbk-tip[data-side="top"]{--tdx:0px; --tdy:4px}
.orbk-tip[data-side="bottom"]{--tdx:0px; --tdy:-4px}
.orbk-rbtn:hover, .orbk-rbtn:focus-visible{z-index:2}
.orbk-rbtn:hover .orbk-tip, .orbk-rbtn:focus-visible .orbk-tip{opacity:1; transform:none; transition-delay:.12s}
.orbk-tip small{display:block; margin-top:2px; font-weight:500; font-size:11px; color:var(--orbk-muted)}

/* ---------------- thinking words ---------------- */
.orbk-think{position:relative; display:block; height:1.5em; font:600 13.5px/1.5 var(--orbk-font); letter-spacing:.01em; overflow:visible}
.orbk-think[hidden]{display:none}
.orbk-think-w{position:absolute; left:0; top:0; white-space:nowrap; opacity:0; filter:blur(6px); transform:translateY(4px);
  background:linear-gradient(90deg, var(--orbk-gold-text) 0%, var(--orbk-accent2) 45%, var(--orbk-gold-text) 90%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .35s ease, filter .35s ease, transform .35s ease; animation:orbkShimmer 1.6s linear infinite}
.orbk-think-w.in{opacity:1; filter:blur(0); transform:none}
.orbk-think-w.out{opacity:0; filter:blur(4px); transform:translateY(-4px)}
.orbk-think.is-center .orbk-think-w{left:50%; transform:translate(-50%,4px)}
.orbk-think.is-center .orbk-think-w.in{transform:translate(-50%,0)}
.orbk-think.is-center .orbk-think-w.out{transform:translate(-50%,-4px)}
@keyframes orbkShimmer{0%{background-position:100% 0} 100%{background-position:-100% 0}}

/* ---------------- typewriter caret ---------------- */
.orbk-caret{display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em; border-radius:1px;
  background:var(--orbk-gold); animation:orbkBlink 1s steps(2, start) infinite}
@keyframes orbkBlink{to{visibility:hidden}}

/* ---------------- push-to-talk mini window ---------------- */
.orbk-mini{position:fixed; z-index:901; width:340px; min-height:0; max-height:min(60vh, 420px); display:flex; flex-direction:column;
  border-radius:18px; border:1px solid var(--orbk-line); background:var(--orbk-surface); color:var(--orbk-text);
  box-shadow:var(--orbk-shadow); font:400 14px/1.5 var(--orbk-font); overflow:hidden;
  opacity:0; transform:scale(.92); filter:blur(8px); transform-origin:85% 100%;
  transition:opacity .22s ease, transform .26s cubic-bezier(.34,1.4,.64,1), filter .22s ease}
.orbk-mini[hidden]{display:none}
.orbk-mini.show{opacity:1; transform:none; filter:none}
.orbk-mini.is-sheet{left:8px !important; right:8px; width:auto; top:auto !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 13px + var(--orb-size, 56px) + 12px); transform-origin:50% 100%}
.orbk-mini-head{display:flex; align-items:center; gap:9px; padding:12px 12px 8px 16px}
.orbk-mini-dot{width:8px; height:8px; border-radius:50%; background:var(--orbk-gold); box-shadow:0 0 0 4px rgba(245,166,35,.18)}
.orbk-mini[data-state="listening"] .orbk-mini-dot{animation:orbkPulse 1.1s ease-in-out infinite}
@keyframes orbkPulse{50%{box-shadow:0 0 0 7px rgba(245,166,35,.05)}}
.orbk-mini-title{flex:1; font:700 13px/1.2 var(--orbk-display); letter-spacing:.01em; color:var(--orbk-text)}
.orbk-mini-x{width:30px; height:30px; border-radius:9px; border:1px solid var(--orbk-line); background:transparent; color:var(--orbk-muted);
  cursor:pointer; font-size:13px}
.orbk-mini-x:hover, .orbk-mini-x:focus-visible{color:var(--orbk-text); border-color:var(--orbk-gold); outline:none}
.orbk-mini-body{flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:2px 16px 14px; display:flex; flex-direction:column; gap:12px}
/* one exchange: you · thinking · reply · error · note. Older ones dim a little; newest at the bottom. */
.orbk-mini-turn{display:flex; flex-direction:column; gap:8px}
.orbk-mini-turn + .orbk-mini-turn{padding-top:12px; border-top:1px solid var(--orbk-line)}
.orbk-mini-turn:not(:last-child){opacity:.72}
.orbk-mini-link{margin:0; padding:0; border:0; background:none; font:inherit; font-weight:700; color:var(--orbk-gold-text); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.orbk-mini-link:focus-visible{outline:2px solid var(--orbk-gold); outline-offset:2px; border-radius:3px}
.orbk-mini-you{margin:0; align-self:flex-end; max-width:88%; padding:8px 12px; border-radius:14px 14px 4px 14px;
  background:var(--orbk-surface-2); border:1px solid var(--orbk-line); color:var(--orbk-text)}
.orbk-mini-ai{margin:0; color:var(--orbk-text)}
.orbk-mini-ai > * + *{margin-top:6px}
.orbk-mini-ai p{margin:0}
.orbk-mini-ai ul, .orbk-mini-ai ol{margin:0; padding-left:18px}
.orbk-mini-ai strong{font-weight:700}
.orbk-mini-note{margin:0; font-size:12.5px; color:var(--orbk-gold-text); font-weight:600}
.orbk-mini-err{margin:0; color:#FF6B5E; font-weight:600}
.orbk-mini-you[hidden], .orbk-mini-ai[hidden], .orbk-mini-err[hidden], .orbk-mini-note[hidden]{display:none}

@media (prefers-reduced-motion: reduce){
  .orbk-rbtn, .orbk-arc, .orbk-mini, .orbk-think-w, .orbk-tip{transition:none !important}
  .orbk-think-w{animation:none; filter:none !important}
  .orbk-caret{animation:none}
  /* the host page may zero every animation for reduced motion — the orb keeps its gentle breathe */
  .lt-orb-reduced .lt-orb-canvas{animation-duration:4s !important; animation-iteration-count:infinite !important}
}