/* V3 re-theme of the production file: color literals only (recolor.py). Structure/layout identical to production. */
/* AREX — EXACT reproduction of the CURRENT production visual (frontend/static/frontend/css/arex_widget.css, .axw-*).
   DO NOT restyle .arex-fab / .arex-orb*. V2 only adds placement containers (.arex-dock, .arex-slot) around it.
   Static (non-fixed) so it can be placed inside mockups. Mic glyph = inline SVG stand-in for fa-microphone-lines.
   Markup:
   FAB : <div class="arex-fab [live|speaking]"><svg class="arex-mic" viewBox="0 0 24 24"><use href="#arex-mic"/></svg></div>
   HUD : <div class="arex-hud [live|speaking]"><div class="arex-x">✕</div><div class="arex-orb-c"><div class="arex-glow"></div><div class="arex-r1"></div><div class="arex-r2"></div><div class="arex-orb"><svg class="arex-mic big" viewBox="0 0 24 24">…</svg></div></div><div class="arex-status">Tap to talk with Arex</div><div class="arex-waves"><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="arex-stop">End Session</div></div>
   Mic SVG paths (paste inline): <rect x="9" y="2.5" width="6" height="11.5" rx="3" fill="#ffffff"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M2.5 9v4M21.5 9v4" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round"/> */
.arex-fab{position:relative;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:radial-gradient(circle at 35% 30%,#387ef8 0%,#256eeb 45%,#211b4b 85%,#181b21 100%);
  box-shadow:inset -5px -5px 12px rgba(0, 0, 0, .65),inset 5px 5px 12px rgba(255, 255, 255, .45),0 10px 30px rgba(37, 110, 235, .5),0 0 50px rgba(56, 126, 248, .3)}
.arex-fab::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(56, 126, 248, .4) 0%,rgba(37, 110, 235, .15) 55%,transparent 72%);opacity:.6;z-index:-1}
.arex-fab.live{box-shadow:inset -5px -5px 12px rgba(0, 0, 0, .65),inset 5px 5px 14px rgba(255, 255, 255, .6),0 0 70px rgba(56, 126, 248, .85)}
.arex-fab.speaking{box-shadow:inset -5px -5px 12px rgba(0, 0, 0, .65),inset 5px 5px 14px rgba(255, 255, 255, .7),0 0 85px rgba(129, 173, 248, .9)}
.arex-fab.sm{width:48px;height:48px}.arex-fab.sm .arex-mic{width:20px;height:20px}
.arex-mic{width:26px;height:26px;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, .6))}
.arex-mic.big{width:38px;height:38px;filter:drop-shadow(0 4px 8px rgba(0, 0, 0, .6))}

.arex-hud{position:relative;width:290px;padding:28px 24px 24px;display:flex;flex-direction:column;align-items:center;
  background:rgba(16, 18, 22, .88);backdrop-filter:blur(32px) saturate(200%);border:1px solid rgba(255, 255, 255, .14);border-radius:40px;
  box-shadow:0 35px 80px rgba(0, 0, 0, .8),inset 0 1px 0 rgba(255, 255, 255, .25),0 0 80px rgba(56, 126, 248, .18)}
.arex-x{position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255, 255, 255, .12);background:rgba(255, 255, 255, .06);color:#9ba3b1;display:flex;align-items:center;justify-content:center;font-size:12px}
.arex-orb-c{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;margin:6px 0 20px}
.arex-glow{position:absolute;inset:-15px;border-radius:50%;background:radial-gradient(circle,rgba(56, 126, 248, .5) 0%,rgba(37, 110, 235, .25) 50%,transparent 75%);filter:blur(24px);opacity:.8}
.arex-r1{position:absolute;inset:-10px;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(56, 126, 248, .7);border-bottom-color:rgba(99, 151, 241, .5);transform:rotate(-20deg)}
.arex-r2{position:absolute;inset:-22px;border-radius:50%;border:1px dashed rgba(56, 126, 248, .3)}
.arex-orb{position:relative;width:130px;height:130px;border-radius:50%;border:1px solid rgba(255, 255, 255, .3);display:flex;align-items:center;justify-content:center;z-index:2;
  background:radial-gradient(circle at 30% 20%,rgba(255, 255, 255, .3) 0%,transparent 45%),radial-gradient(circle at 50% 50%,#256eeb 0%,#1d62d8 40%,#181b21 80%,#0b0c0e 100%);
  box-shadow:inset 0 0 42px rgba(56, 126, 248, .5),inset 0 -34px 58px rgba(0, 0, 0, .8),inset 0 22px 40px rgba(255, 255, 255, .22),inset -12px -12px 30px rgba(37, 110, 235, .35),0 15px 40px rgba(0, 0, 0, .6),0 0 65px rgba(56, 126, 248, .4)}
.arex-orb::before{content:"";position:absolute;top:6%;left:12%;width:76%;height:34%;border-radius:50% 50% 15% 15%/50% 50% 20% 20%;background:linear-gradient(180deg,rgba(255, 255, 255, .65) 0%,rgba(255, 255, 255, 0) 100%);transform:rotate(-12deg);filter:blur(1px);z-index:3}
.arex-orb .arex-mic{position:relative;z-index:6}
.arex-hud.live .arex-glow{background:radial-gradient(circle,rgba(56, 126, 248, .65) 0%,rgba(37, 110, 235, .35) 50%,transparent 75%)}
.arex-hud.live .arex-orb{box-shadow:inset 0 0 45px rgba(56, 126, 248, .6),inset 0 -34px 58px rgba(0, 0, 0, .8),inset 0 22px 40px rgba(255, 255, 255, .28),0 0 75px rgba(56, 126, 248, .6)}
.arex-hud.speaking .arex-glow{background:radial-gradient(circle,rgba(129, 173, 248, .75) 0%,rgba(56, 126, 248, .4) 50%,transparent 75%)}
.arex-hud.speaking .arex-orb{box-shadow:inset 0 0 50px rgba(129, 173, 248, .7),inset 0 -34px 58px rgba(0, 0, 0, .8),inset 0 22px 40px rgba(255, 255, 255, .35),0 0 85px rgba(56, 126, 248, .85)}
.arex-status{font:600 .92rem 'Inter',system-ui,sans-serif;color:#d1d5db;letter-spacing:.02em;margin-bottom:14px;text-align:center}
.arex-hud.live .arex-status{color:#387ef8;text-shadow:0 0 10px rgba(56, 126, 248, .35)}
.arex-hud.speaking .arex-status{color:#81adf8;text-shadow:0 0 10px rgba(129, 173, 248, .35)}
.arex-waves{display:flex;align-items:center;justify-content:center;gap:4px;height:22px;margin-bottom:18px;opacity:0}
.arex-hud.speaking .arex-waves{opacity:1}
.arex-waves i{width:3.5px;border-radius:4px;background:linear-gradient(180deg,#387ef8,#6397f1)}
.arex-waves i:nth-child(1){height:6px}.arex-waves i:nth-child(2){height:16px}.arex-waves i:nth-child(3){height:22px}.arex-waves i:nth-child(4){height:12px}.arex-waves i:nth-child(5){height:18px}.arex-waves i:nth-child(6){height:8px}
.arex-stop{padding:11px 28px;border-radius:30px;border:1px solid rgba(239, 68, 85, .35);background:linear-gradient(135deg,rgba(239, 68, 85, .16) 0%,rgba(185, 28, 44, .25) 100%);color:#fca5ae;font:700 .82rem 'Inter',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 4px 15px rgba(0, 0, 0, .35),inset 0 1px 0 rgba(255, 255, 255, .1)}

/* ── V2 placement containers (the ONLY new AREX UI) ── */
/* Dock: a quiet obsidian tray that anchors the unchanged FAB + a context line saying what AREX can do on THIS screen */
.arex-dock{display:inline-flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(13, 15, 19, .86);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .09),0 24px 50px -16px rgba(0, 0, 0, .8)}
.arex-dock .ctx{display:flex;flex-direction:column;gap:2px;font:400 12.5px var(--f-ui);color:var(--tx-2)}
.arex-dock .ctx b{font:500 13px var(--f-ui);color:var(--tx)}
.arex-dock .ctx small{font:500 10px var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
/* Slot: a reserved, bordered stage for the HUD inside page layouts (AREX page, homepage voice section) */
.arex-slot{position:relative;border-radius:32px;padding:26px;display:flex;justify-content:center;background:radial-gradient(60% 60% at 50% 40%,rgba(37, 110, 235, .10),transparent 70%),var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair)}