/* ============================================================
   HONEYBELL PRESENCE RING: honeybell-identity 1.0.0-rc.2
   Framework-free styles for HoneybellAvatar.jsx (React, built on
   components/core/Avatar.jsx) and honeybell-presence.js (vanilla).
   Requires tokens/colors.css, tokens/motion.css, tokens/honeybell.css.
   No color literals: every color is a token reference (checked by
   scripts/check-honeybell-identity.mjs).

   Markup contract (both renderers emit it):
     .hb-presence[data-hb-state][data-motion][data-busy?]   wrapper, --hb-size, --hb-level
       face        core Avatar (React) or .hb-presence__face (vanilla); ring = --hb-ring-color
       svg.hb-presence__svg  r-base r-halo r-seg r-arc r-level r-sweep g.r-orbit
       .hb-presence__badge
   Animations are keyed to data-motion, so a motion override or reduced
   motion never needs a second code path. Class names match the OS
   prototype (social-link-os-web app/globals.css .hb-presence) so the OS
   can replace its local copy without markup changes.

   Repair carried from the OS: Identity System 0.3.1 hb-ring.css set
   fill on the orbit <g>, but ".hb-ring__svg circle{fill:none}" matched
   the circles inside it, so the background orbit dot never rendered.
   Here the fill is set on ".r-orbit circle" (higher specificity).
   ============================================================ */
.hb-presence {
  --hb-ring-color: var(--hb-state-active);
  position: relative; display: inline-flex; flex: none;
  width: var(--hb-size, var(--hb-size-sm)); height: var(--hb-size, var(--hb-size-sm));
  border-radius: 50%; vertical-align: middle;
}
.hb-presence__face {
  width: 100%; height: 100%; border-radius: var(--radius-pill, 999px); overflow: hidden;
  display: flex; box-sizing: border-box; background: var(--hb-ink);
  border: var(--hb-ring-stroke) solid var(--hb-ring-color);
}
.hb-presence__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-presence__svg {
  position: absolute; inset: var(--hb-ring-overlay-inset); width: calc(100% - 2 * var(--hb-ring-overlay-inset)); height: calc(100% - 2 * var(--hb-ring-overlay-inset));
  overflow: visible; pointer-events: none;
}
.hb-presence__svg circle { fill: none; transform-origin: 60px 60px; }
.hb-presence .r-base, .hb-presence .r-halo, .hb-presence .r-seg, .hb-presence .r-arc,
.hb-presence .r-level, .hb-presence .r-sweep, .hb-presence .r-orbit { opacity: 0; }
.hb-presence .r-base { stroke: var(--hb-state-muted); stroke-width: 3; stroke-dasharray: 5 6; }
.hb-presence .r-halo { stroke: var(--hb-state-active); stroke-width: var(--hb-ring-halo-stroke); }
.hb-presence .r-seg { stroke: var(--hb-state-active); stroke-width: 2; stroke-dasharray: 3 5; }
.hb-presence .r-arc { stroke: var(--hb-state-active); stroke-width: var(--hb-ring-arc-stroke); stroke-linecap: round; stroke-dasharray: 69 333; transform: rotate(-90deg); }
.hb-presence .r-level { stroke: var(--hb-state-active); stroke-width: 3; }
.hb-presence .r-sweep { stroke: var(--hb-state-sweep); stroke-width: var(--hb-ring-arc-stroke); stroke-linecap: round; stroke-dasharray: 333 333; transform: rotate(-90deg); }
.hb-presence .r-orbit { transform-origin: 60px 60px; }
.hb-presence .r-orbit circle { fill: var(--hb-state-active); } /* orbit repair: fill on the circles, not the <g> */
.hb-presence__badge {
  position: absolute; right: -6%; bottom: -6%; width: 38%; height: 38%; min-width: 10px; min-height: 10px;
  box-sizing: border-box; border-radius: 50%; border: 2px solid var(--hb-badge-border); display: none; place-items: center;
}

/* ---- States (static appearance; identical with or without motion) ---- */
.hb-presence[data-hb-state="listening"] .r-halo { opacity: .5; }
.hb-presence[data-hb-state="thinking"] .r-arc { opacity: 1; }
.hb-presence[data-hb-state="searching"] .r-arc { opacity: 1; stroke-dasharray: 25 140; }
.hb-presence[data-hb-state="tool"] .r-seg { opacity: .55; }
.hb-presence[data-hb-state="tool"] .r-arc { opacity: .9; stroke-dasharray: 40 293; }
.hb-presence[data-hb-state="speaking"] .r-level { opacity: .45; }
.hb-presence[data-hb-state="found"] .r-sweep { opacity: .9; }
.hb-presence[data-hb-state="complete"] .hb-presence__badge { display: grid; background: var(--hb-state-active); }
.hb-presence[data-hb-state="complete"] .hb-presence__badge::before { content: ""; width: 22%; height: 42%; border: solid var(--hb-badge-glyph); border-width: 0 2px 2px 0; transform: translateY(-12%) rotate(45deg); }
.hb-presence[data-hb-state="approval"] { --hb-ring-color: color-mix(in srgb, var(--hb-state-active) 55%, transparent); }
.hb-presence[data-hb-state="approval"] .hb-presence__badge { display: grid; background: var(--hb-state-approval); }
.hb-presence[data-hb-state="approval"] .hb-presence__badge::before { content: ""; width: 36%; height: 42%; background: linear-gradient(90deg, var(--hb-badge-glyph) 0 34%, transparent 34% 66%, var(--hb-badge-glyph) 66%); }
.hb-presence[data-hb-state="approval"][data-busy="yes"] .r-orbit { opacity: .7; } /* other work still running; static */
.hb-presence[data-hb-state="error"] { --hb-ring-color: var(--hb-state-muted); }
.hb-presence[data-hb-state="error"] .hb-presence__badge { display: grid; background: var(--hb-state-muted); }
.hb-presence[data-hb-state="error"] .hb-presence__badge::before { content: "!"; color: var(--hb-badge-glyph); font: 800 calc(var(--hb-size, 44px) * .2)/1 var(--hb-font); }
.hb-presence[data-hb-state="offline"] { --hb-ring-color: transparent; }
.hb-presence[data-hb-state="offline"] .r-base { opacity: 1; }
.hb-presence[data-hb-state="disabled"] { --hb-ring-color: var(--hb-state-muted); opacity: .55; }
.hb-presence[data-hb-state="background"] .r-orbit { opacity: 1; }

/* ---- Motion, keyed to the contract (data-motion = effective motion) ---- */
.hb-presence[data-motion="ambient"][data-hb-state="idle"] { animation: hb-presence-breathe var(--hb-ring-dur-breathe) ease-in-out infinite; }
.hb-presence[data-motion="ambient"][data-hb-state="background"] .r-orbit { animation: hb-presence-spin var(--hb-ring-dur-orbit) linear infinite; }
.hb-presence[data-motion="loop"][data-hb-state="listening"] .r-halo { animation: hb-presence-halo var(--hb-ring-dur-halo) ease-in-out infinite; }
.hb-presence[data-motion="loop"][data-hb-state="thinking"] .r-arc { animation: hb-presence-spin-arc var(--hb-ring-dur-arc) linear infinite; }
.hb-presence[data-motion="loop"][data-hb-state="searching"] .r-arc { animation: hb-presence-spin-arc var(--hb-ring-dur-search) var(--hb-ring-ease-search) infinite; }
.hb-presence[data-motion="loop"][data-hb-state="tool"] .r-seg { animation: hb-presence-spin var(--hb-ring-dur-tool-seg) linear infinite; }
.hb-presence[data-motion="loop"][data-hb-state="tool"] .r-arc { animation: hb-presence-spin-arc var(--hb-ring-dur-tool-arc) linear infinite; }
.hb-presence[data-motion="level"][data-hb-state="speaking"] .r-level { opacity: calc(.25 + var(--hb-level, 0) * .7); transform: scale(calc(1 + var(--hb-level, 0) * .07)); }
.hb-presence[data-motion="once"][data-hb-state="found"] .r-sweep { animation: hb-presence-sweep var(--hb-ring-dur-sweep) var(--hb-ring-ease-once) 1 both; }
.hb-presence[data-motion="once"][data-hb-state="complete"] { animation: hb-presence-settle var(--hb-ring-dur-settle) var(--hb-ring-ease-once) 1 both; }

@keyframes hb-presence-breathe { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-state-active) 18%, transparent); } }
@keyframes hb-presence-halo { 50% { opacity: .15; transform: scale(1.04); } }
@keyframes hb-presence-spin { to { transform: rotate(360deg); } }
@keyframes hb-presence-spin-arc { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes hb-presence-sweep { from { stroke-dashoffset: 333; } to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hb-presence-settle { 0% { transform: scale(.96); } to { transform: none; } }

/* ---- Reduced motion: every state is static; cues, badge and label unchanged ---- */
@media (prefers-reduced-motion: reduce) {
  .hb-presence, .hb-presence * { animation: none !important; transition: none !important; }
  .hb-presence .r-level { transform: none !important; }
}