/* ===========================================================
   COOPEN · Widget Styles
   Each widget is a custom element. Styles are addressed by tag.
   Custom elements default to display:inline; we set blocks here.
=========================================================== */

/* ---------- Display widgets ---------- */
ag-title          { display: block; }
ag-title .title   { color: var(--c-cyan-soft); font-size: var(--fs-md); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 10px rgba(0,229,255,.55); }
ag-title .sub     { color: var(--c-gray); font-size: var(--fs-sm); margin-top: 5px; letter-spacing: var(--ls-norm); }

ag-pill { display: inline-block; }
ag-pill > span {
  display: inline-block;
  border: var(--b-cyan);
  color: var(--c-cyan-soft);
  padding: 3px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  background: rgba(0, 229, 255, .05);
  box-shadow: inset 0 0 10px rgba(0, 229, 255, .12), 0 0 12px rgba(0, 229, 255, .18);
  text-shadow: 0 0 8px rgba(0, 229, 255, .7);
}
ag-pill[variant="amber"] > span { border-color: var(--c-amber); color: var(--c-amber); box-shadow: inset 0 0 10px rgba(251,191,36,.18), 0 0 12px rgba(251,191,36,.18); text-shadow: 0 0 8px rgba(251,191,36,.65); }
ag-pill[variant="violet"] > span { border-color: var(--c-violet); color: var(--c-violet); box-shadow: inset 0 0 10px rgba(167,139,250,.2), 0 0 12px rgba(167,139,250,.2); text-shadow: 0 0 8px rgba(167,139,250,.7); }
ag-pill-group { display: flex; gap: var(--gap-1); margin-top: 1.2vh; }

ag-clock { display: block; text-align: right; }
ag-clock .time { font-size: var(--fs-3xl); line-height: 1; color: var(--c-white); letter-spacing: var(--ls-tight); text-shadow: 0 0 18px rgba(125,211,252,.45); font-variant-numeric: tabular-nums; }
ag-clock .date { color: var(--c-cyan-soft); font-size: var(--fs-md); margin-top: 3px; letter-spacing: .14em; opacity: .92; }

ag-coords { display: block; margin-top: 1.3vh; color: var(--c-cyan-soft); font-size: var(--fs-sm); line-height: 1.58; letter-spacing: .05em; text-shadow: 0 0 8px rgba(0,229,255,.35); }
ag-coords .row b { color: var(--c-white); font-weight: 400; opacity: .9; }

ag-section-title { display: block; color: var(--c-cyan-soft); font-size: var(--fs-lg); letter-spacing: var(--ls-wide); margin-bottom: 1.1vh; text-shadow: 0 0 10px rgba(0,229,255,.5); }

ag-info-block { display: block; font-size: var(--fs-sm); line-height: 1.52; color: var(--c-gray-2); }
ag-info-block .head { color: var(--c-cyan-soft); letter-spacing: var(--ls-norm); text-shadow: 0 0 8px rgba(0,229,255,.48); margin-bottom: 2px; }
ag-info-block .row { display: block; }
ag-info-block .row b { color: var(--c-white); font-weight: 400; }

/* ---------- Stats ---------- */
ag-stat-list { display: flex; flex-direction: column; gap: 1.05vh; }
ag-stat { display: block; }
ag-stat .row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; font-size: var(--fs-md); gap: 6px; }
ag-stat .row .label { color: var(--c-gray-2); }
ag-stat .row .dots  { border-bottom: 1px dotted rgba(100,116,139,.45); height: 1px; transform: translateY(-4px); min-width: 30px; }
ag-stat .row .value { color: var(--c-white); font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(255,255,255,.2); }
ag-stat .bar { height: 3px; background: rgba(14,165,233,.14); margin-top: 4px; position: relative; overflow: hidden; border-radius: 2px; }
ag-stat .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,229,255,.15), var(--c-cyan)); box-shadow: 0 0 10px rgba(0,229,255,.75); transition: width .4s ease; }

ag-progress { display: block; height: 5px; background: rgba(14,165,233,.14); margin: 11px 0 8px; position: relative; border-radius: 3px; overflow: hidden; }
ag-progress .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,229,255,.25), var(--c-cyan)); box-shadow: 0 0 12px rgba(0,229,255,.8); transition: width .4s ease; }

ag-telemetry { display: block; }
ag-telemetry .grid { font-size: var(--fs-xs); line-height: 1.48; color: #60a5fa; opacity: .88; columns: 2; column-gap: 1.8vw; white-space: pre; }

/* ---------- Visual ----------
   Perf notes:
   - `filter: drop-shadow()` on an animated SVG forces a re-rasterize every
     frame. We removed it from anything that animates, and rely on stroke
     color + faint static box-shadow for the glow feel.
   - `will-change: transform` promotes rotating elements to the compositor
     thread (GPU layer) so the spin doesn't hit the main thread.
*/
ag-radar { display: block; position: relative; width: 100%; height: 100%; }
ag-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
ag-radar .ring-outer  { stroke: #e6f0ff;       stroke-width: 1.3; fill: none; stroke-dasharray: 2 7;     opacity: .82; }
ag-radar .ring-mid    { stroke: var(--c-cyan); stroke-width: 2.1; fill: none; stroke-dasharray: 1080 90; stroke-dashoffset: 30; opacity: .96; transform-origin: 300px 300px; animation: ag-spin-slow 15s linear infinite; will-change: transform; }
ag-radar .ring-inner  { stroke: var(--c-cyan-soft); stroke-width: 1; fill: none; stroke-dasharray: 2.2 6; opacity: .58; }
ag-radar .ticks       { transform-origin: 300px 300px; animation: ag-spin 60s linear infinite; will-change: transform; }
@keyframes ag-spin-slow { to { transform: rotate(-360deg); } }
@keyframes ag-spin      { to { transform: rotate(360deg); } }

ag-voice-orb { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; z-index: 6; box-shadow: 0 0 28px rgba(0,229,255,.42); transition: box-shadow .25s ease; }
ag-voice-orb canvas { width: 100%; height: 100%; display: block; }
ag-voice-orb .state-label { position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%); font-size: var(--fs-md); letter-spacing: .25em; color: var(--c-cyan-soft); text-shadow: var(--glow-cyan-soft); }
ag-voice-orb[state="listening"] { box-shadow: 0 0 36px rgba(0,229,255,.7); }
ag-voice-orb[state="thinking"]  { box-shadow: 0 0 36px rgba(167,139,250,.65); }
ag-voice-orb[state="speaking"]  { box-shadow: 0 0 36px rgba(52,211,153,.6); }

ag-mini-radar { display: block; width: clamp(96px, 8vw, 150px); aspect-ratio: 1; position: relative; align-self: flex-end; }
ag-mini-radar svg { width: 100%; height: 100%; overflow: visible; }
ag-mini-radar .sweep { transform-origin: 60px 60px; animation: ag-sweep 3s linear infinite; will-change: transform; }
@keyframes ag-sweep { to { transform: rotate(360deg); } }

ag-waveform { display: block; width: 100%; border: var(--b-cyan-soft); background: var(--c-surface); padding: 10px 12px 8px; position: relative; box-shadow: inset 0 0 18px rgba(0,229,255,.06); }
ag-waveform .label { color: var(--c-cyan-soft); font-size: var(--fs-md); margin-bottom: 6px; letter-spacing: .08em; }
ag-waveform svg { width: 100%; height: 38px; display: block; overflow: visible; }
ag-waveform path { fill: none; stroke: var(--c-cyan); stroke-width: 2; }

ag-compass { display: block; width: clamp(54px, 4.4vw, 70px); aspect-ratio: 1; }
ag-compass svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(0,229,255,.45)); }
/* compass is static — drop-shadow stays cheap because nothing animates */

/* ---------- Feedback ---------- */
ag-fps-meter {
  position: fixed; z-index: 100;
  font-family: var(--ff-mono);
  pointer-events: none;
}
ag-fps-meter[position="top-right"]    { top: 8px;    right: 8px;  }
ag-fps-meter[position="top-left"]     { top: 8px;    left: 8px;   }
ag-fps-meter[position="bottom-right"] { bottom: 8px; right: 8px;  }
ag-fps-meter[position="bottom-left"]  { bottom: 8px; left: 8px;   }
ag-fps-meter[position="inline"]       { position: static; }
ag-fps-meter:not([position]),
ag-fps-meter[position=""]             { top: 8px; right: 8px; }
ag-fps-meter .meter {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: rgba(3, 7, 18, .82);
  border: 1px solid rgba(0, 229, 255, .32);
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: .04em;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 12px rgba(0, 0, 0, .55);
}
ag-fps-meter .num  { font-size: var(--fs-md); font-weight: bold; color: var(--c-cyan); text-shadow: 0 0 6px currentColor; }
ag-fps-meter .unit { font-size: var(--fs-xs); color: var(--c-cyan-soft); opacity: .7; }
ag-fps-meter .aux  { font-size: var(--fs-xs); color: var(--c-cyan-soft); opacity: .65; }
ag-fps-meter .num[data-tier="ok"]   { color: #22c55e; }
ag-fps-meter .num[data-tier="warn"] { color: var(--c-amber); }
ag-fps-meter .num[data-tier="bad"]  { color: #ef4444; animation: pulse 1.2s ease-in-out infinite; }
ag-fps-meter[compact] .unit,
ag-fps-meter[compact] .aux { display: none; }

ag-log-stream { display: block; width: 100%; }
ag-log-stream .log { margin-top: .7vh; background: var(--c-surface-2); border: 1px solid rgba(14, 165, 233, .24); padding: 8px 10px; height: clamp(80px, 14vh, 178px); overflow: hidden; font-size: var(--fs-xs); line-height: 1.44; color: var(--c-blue-text); text-shadow: 0 0 6px rgba(56, 189, 248, .38); }
ag-log-stream .log .line { white-space: pre; }

/* ---------- Height-aware shrinks (laptops & 720p screens) ---------- */
@media (max-height: 880px) and (min-width: 900px) {
  ag-mini-radar  { width: clamp(80px, 7vw, 120px); }
  ag-log-stream .log { height: clamp(72px, 11vh, 130px); }
}
@media (max-height: 760px) and (min-width: 900px) {
  ag-mini-radar  { display: none; }   /* sacrifice the decorative one first */
  ag-log-stream .log { height: 80px; }
}

ag-bracket-card { display: block; position: relative; }
ag-bracket-card .inner { position: relative; border: var(--b-cyan); background: var(--c-surface); padding: 15px 18px 11px; box-shadow: inset 0 0 26px rgba(0,229,255,.07), 0 0 26px rgba(0,0,0,.55); }
ag-bracket-card .inner::before { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(0, 229, 255, .38); pointer-events: none; }

/* ---------- Voice agent specific ---------- */
ag-mic-button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
ag-mic-button .btn { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--c-cyan); background: radial-gradient(circle at 35% 30%, rgba(0,229,255,.18), rgba(3,7,18,.9) 70%); display: grid; place-items: center; box-shadow: inset 0 0 16px rgba(0,229,255,.18), 0 0 18px rgba(0,229,255,.35); transition: all .25s ease; }
ag-mic-button[active] .btn { background: radial-gradient(circle at 35% 30%, rgba(0,229,255,.55), rgba(3,7,18,.7) 70%); box-shadow: inset 0 0 22px rgba(0,229,255,.45), 0 0 26px rgba(0,229,255,.7); }
ag-mic-button .btn svg { width: 22px; height: 22px; color: var(--c-cyan); filter: drop-shadow(0 0 6px rgba(0,229,255,.7)); }
ag-mic-button .label { color: var(--c-cyan-soft); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); }

ag-transcript { display: block; width: 100%; }
ag-transcript .log { margin-top: .6vh; background: var(--c-surface-2); border: 1px solid rgba(14,165,233,.24); padding: 10px 12px; max-height: clamp(140px, 22vh, 240px); overflow: auto; font-size: var(--fs-md); line-height: 1.55; }
ag-transcript .turn { margin-bottom: 8px; }
ag-transcript .turn .who { color: var(--c-cyan-soft); letter-spacing: .08em; font-size: var(--fs-xs); margin-right: 6px; }
ag-transcript .turn[role="agent"] .who { color: var(--c-violet); }
ag-transcript .turn .text { color: var(--c-gray-2); }

ag-voice-status { display: block; }
ag-voice-status .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); border: 1px solid var(--c-status-idle); color: var(--c-status-idle); background: rgba(3, 7, 18, .82); }
ag-voice-status .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* Anchor the voice status badge under the orb inside the radar stage */
ag-voice-status.orb-status {
  position: absolute;
  left: 50%;
  bottom: 18%;            /* empty band between the orb and the radar's bottom rings */
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;   /* purely informational; clicks fall through to the radar */
}
ag-voice-status[state="listening"] .badge { border-color: var(--c-status-listen); color: var(--c-status-listen); box-shadow: 0 0 10px rgba(0,229,255,.4); }
ag-voice-status[state="listening"] .badge .dot { animation: pulse 1.2s ease-in-out infinite; }
ag-voice-status[state="thinking"]  .badge { border-color: var(--c-status-think);  color: var(--c-status-think);  box-shadow: 0 0 10px rgba(167,139,250,.4); }
ag-voice-status[state="thinking"]  .badge .dot { animation: pulse .8s ease-in-out infinite; }
ag-voice-status[state="speaking"]  .badge { border-color: var(--c-status-speak);  color: var(--c-status-speak);  box-shadow: 0 0 10px rgba(52,211,153,.4); }
ag-voice-status[state="speaking"]  .badge .dot { animation: pulse .55s ease-in-out infinite; }

ag-skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
ag-skill-list .skill { font-size: var(--fs-xs); padding: 3px 8px; border: 1px dashed rgba(0,229,255,.4); color: var(--c-cyan-soft); border-radius: 3px; }