/* Home (bro tab) v17 — Bro chat: the orb, one Talk button, the conversation, the compose bar and one small
   English | हिंदी switch. Markup from app/voice.js (BroVoice.html). */
#broVoiceRoot .bh{padding:2px 0 24px;display:flex;flex-direction:column;min-height:calc(100dvh - 210px)}
.bh .hb-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:2px 0 4px}
:is(.bh .hb-langs,.bvf-langs){display:flex;padding:3px;border-radius:999px;background:var(--b-bg-2)}
:is(.bh .hb-langs,.bvf-langs) button{min-width:64px;height:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;cursor:pointer;font:700 13px var(--b-sans);color:var(--b-mute);transition:background .2s,color .2s}
:is(.bh .hb-langs,.bvf-langs) button.on{background:var(--b-card);color:var(--b-ink);box-shadow:0 1px 3px rgba(31,30,28,.14)}
:is(.bh .hb-langs,.bvf-langs) button:focus-visible{outline:2px solid var(--b-ink);outline-offset:1px}

/* Bro, centred */
.bh .hb-stage{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 0 8px;position:relative}
.bh .hb-stage::before{content:"";position:absolute;left:50%;top:44%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--b-primary-soft,rgba(181,64,42,.12)) 0%,transparent 66%);pointer-events:none}
.bh .hb-bro{position:relative;border:0;background:none;padding:0;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.bh .hb-mas{display:block;width:210px;height:auto;filter:drop-shadow(0 22px 30px rgba(120,40,20,.22));animation:hb-float 4.5s ease-in-out infinite}
.bh.live .hb-mas{animation:hb-bob 1.4s ease-in-out infinite}
@keyframes hb-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes hb-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}
.bh .hb-say{min-height:22px;max-width:30ch;margin:4px 0 0;text-align:center;font:600 15px/1.4 var(--b-sans);color:var(--b-ink-2)}
.bh .hb-say:empty{visibility:hidden}
.bh .hb-say.partial{font-weight:500;color:var(--b-ink)}
.bh .hb-mic{position:relative;width:76px;height:76px;margin-top:6px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--b-ink);color:var(--b-bg);box-shadow:0 14px 28px -14px rgba(31,30,28,.8);transition:transform .15s}
.bh .hb-mic:active{transform:scale(.94)}
.bh .hb-mic.on{background:var(--b-primary,#B5402A);color:#fff}
.bh .hb-mic.on::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--b-primary,#B5402A);animation:hb-ring 1.4s ease-out infinite}
@keyframes hb-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}

/* chatting: Bro becomes a slim row (mascot · status · mic); only the bubbles scroll; compose stays at the bottom */
#broVoiceRoot .bh.chat{height:var(--hb-avail,auto);min-height:0;padding-bottom:0}
.bh.chat .hb-stage{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:8px 0 4px}
.bh.chat .hb-stage::before{display:none}
.bh.chat .hb-mas{width:64px;filter:drop-shadow(0 8px 12px rgba(120,40,20,.2))}
.bh.chat .hb-say{flex:1;min-width:0;max-width:none;margin:0;text-align:left;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh.chat .hb-say:empty{visibility:visible}
.bh.chat .hb-mic{width:52px;height:52px;margin:0}
.bh.chat .hb-mic svg{width:24px;height:24px}
.bh .hb-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:8px;padding:4px 0 8px;display:flex;flex-direction:column;gap:8px;-webkit-mask:linear-gradient(transparent,#000 16px);mask:linear-gradient(transparent,#000 16px)}
.bh .hb-thread>:first-child{margin-top:auto}
.bh .hb-thread .bv-msg{display:flex}.bh .hb-thread .bv-msg.me,.bh .hb-thread .bv-msg.user{justify-content:flex-end}
.bh .hb-thread .bv-bub{max-width:82%;padding:11px 14px;border-radius:18px;background:var(--b-card);color:var(--b-ink);font:500 15px/1.45 var(--b-sans);box-shadow:0 1px 2px rgba(31,30,28,.05)}
.bh .hb-thread .bv-msg.me .bv-bub,.bh .hb-thread .bv-msg.user .bv-bub{background:var(--b-ink);color:var(--b-bg)}

/* compose */
.bh .hb-compose{flex:none;display:flex;align-items:center;gap:10px;margin:14px 0 0}
.bh.chat .hb-compose{margin-top:6px}
.bh .hb-compose input{flex:1;min-width:0;height:54px;padding:0 18px;border:0;border-radius:18px;background:var(--b-card);color:var(--b-ink);font:500 16px var(--b-sans);box-shadow:0 1px 2px rgba(31,30,28,.05),0 10px 24px -18px rgba(31,30,28,.45);outline:none}
.bh .hb-compose input::placeholder{color:var(--b-mute)}
.bh .hb-compose input:focus{box-shadow:0 0 0 2px var(--b-ink),0 10px 24px -18px rgba(31,30,28,.45)}
.bh .hb-send{flex:0 0 auto;width:54px;height:54px;border:0;border-radius:18px;display:grid;place-items:center;cursor:pointer;background:var(--b-ink);color:var(--b-bg);box-shadow:0 10px 22px -14px rgba(31,30,28,.75);transition:transform .15s}
.bh .hb-send:active{transform:scale(.94)}
.bh .hb-send svg{width:20px;height:20px}

@media (max-width:370px){.bh .hb-mas{width:180px}}
@media (prefers-reduced-motion:reduce){.bh .hb-mas,.bh.live .hb-mas,.bh .hb-mic.on::before{animation:none}}
html[data-theme="dark"] .bh .hb-mas,body[data-theme=aurora] .bh .hb-mas{filter:drop-shadow(0 22px 34px rgba(0,0,0,.6))}
html[data-theme="dark"] :is(.bh .hb-langs,.bvf-langs) button.on,body[data-theme=aurora] :is(.bh .hb-langs,.bvf-langs) button.on{background:#F3F1EE;color:#17141F}
.bh .hb-send:disabled{opacity:.45;cursor:default}
:is(.bh .hb-langs,.bvf-langs) button{height:44px}

/* ── v15: the voice orb replaces the mascot. Layers of warm light turning slowly inside a glass sphere; it breathes when
   idle, ripples while listening, swirls faster while Bro speaks. Pure CSS, no images. ── */
:is(.bh,.bvf) .hb-orb{--orb:196px;position:relative;display:block;width:var(--orb);height:var(--orb);border-radius:50%;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 118%,#FFB88A 0%,#EE7445 24%,#B8402A 48%,#5E1A22 74%,#1E0B14 100%);
  box-shadow:inset 0 -14px 34px rgba(20,6,4,.45),inset 0 10px 24px rgba(255,255,255,.28);
  animation:hbBreathe 5s ease-in-out infinite}
:is(.bh,.bvf) .hb-orb i{position:absolute;border-radius:50%;pointer-events:none}
:is(.bh,.bvf) .hb-orb .o1{inset:-25%;background:conic-gradient(from 0deg,transparent 0 10%,rgba(255,196,120,.85) 20%,transparent 34%,rgba(140,90,255,.55) 52%,transparent 66%,rgba(255,110,70,.8) 82%,transparent);filter:blur(18px);mix-blend-mode:screen;animation:hbSpin 11s linear infinite}
:is(.bh,.bvf) .hb-orb .o2{inset:-10%;background:conic-gradient(from 180deg,transparent 0 22%,rgba(255,86,60,.6) 36%,transparent 52%,rgba(255,220,170,.5) 70%,transparent 86%);filter:blur(22px);mix-blend-mode:screen;animation:hbSpin 17s linear infinite reverse}
:is(.bh,.bvf) .hb-orb .o3{left:18%;top:7%;width:40%;height:26%;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);filter:blur(3px)}
/* the stage behind it: one soft halo; rings only while Bro is listening */
/* the shadow is a soft gradient ellipse under the sphere (no blur filter, so no compositing edge) */
.bh .hb-bro{position:relative;border-radius:50%}
:is(.bh,.bvf) .hb-orbw{position:relative;display:block}
.bh .hb-shade{position:absolute;left:8%;right:8%;bottom:-14%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(122,38,24,.32),rgba(122,38,24,0));pointer-events:none}
.bh.chat .hb-shade{bottom:-10%;height:24%}
.bh .hb-bro::before,.bh .hb-bro::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--b-primary) 55%,transparent);opacity:0;pointer-events:none}
.bh.live .hb-bro::before{animation:hbRipple 2.4s ease-out infinite}
.bh.live .hb-bro::after{animation:hbRipple 2.4s ease-out 1.2s infinite}
:is(.bh,.bvf) .hb-orb.st-speaking{animation:hbTalk .9s ease-in-out infinite}
:is(.bh,.bvf) .hb-orb.st-speaking .o1{animation-duration:3.5s}:is(.bh,.bvf) .hb-orb.st-speaking .o2{animation-duration:5s}
:is(.bh,.bvf) .hb-orb.st-thinking .o1,:is(.bh,.bvf) .hb-orb.st-connecting .o1{animation-duration:2.4s}
:is(.bh,.bvf) .hb-orb.st-thinking,:is(.bh,.bvf) .hb-orb.st-connecting{animation:hbBreathe 1.4s ease-in-out infinite}
:is(.bh,.bvf) .hb-orb.st-listening,:is(.bh,.bvf) .hb-orb.st-live{animation:hbBreathe 2.6s ease-in-out infinite}
@keyframes hbSpin{to{transform:rotate(360deg)}}
@keyframes hbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes hbTalk{0%,100%{transform:scale(1)}30%{transform:scale(1.06)}60%{transform:scale(.985)}}
@keyframes hbRipple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.bh.chat .hb-orb{--orb:56px;box-shadow:inset 0 -5px 12px rgba(20,6,4,.4),inset 0 4px 8px rgba(255,255,255,.25)}
.bh.chat .hb-orb .o1,.bh.chat .hb-orb .o2{filter:blur(6px)}
@media (max-width:370px){:is(.bh,.bvf) .hb-orb{--orb:176px}}
html[data-theme="dark"] .bh .hb-shade,body[data-theme=aurora] .bh .hb-shade{background:radial-gradient(closest-side,rgba(232,110,70,.28),rgba(232,110,70,0))}
@media (prefers-reduced-motion:reduce){:is(.bh,.bvf) .hb-orb,:is(.bh,.bvf) .hb-orb i,.bh .hb-bro::before,.bh .hb-bro::after{animation:none!important}}

/* the call screen uses the same orb, larger, with the existing listening rings around it */
.bvf .bv-orb{width:236px;height:236px}
.bvf .hb-orb{--orb:208px}
.bvf .bv-orb .bv-ring{inset:14px}

/* ── v16 live call (Bro Core): the orb follows Bro's voice level (--lvl from an analyser, set by app/voice.js) ── */
:is(.bh,.bvf) .hb-orb.drv.st-speaking{animation:none;transform:scale(calc(1 + var(--lvl,0) * .16));transition:transform .08s linear}
@media (prefers-reduced-motion:reduce){:is(.bh,.bvf) .hb-orb.drv.st-speaking{transform:none}}
/* call screen (v17): the language switch on top; one state line, which is the interrupt control while Bro speaks;
   the rings follow your voice while Bro listens (--in from app/voice.js); captions, typing, end screen with the rating */
.bvf .bvf-top{gap:12px}
.bvf .bvf-top.solo{justify-content:center}
.bvf .bvf-langs button{min-width:72px}
.bvf-cap.bvf-int{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--b-line-2);border-radius:999px;background:var(--b-card);color:var(--b-ink);font:600 12px var(--b-sans);letter-spacing:.06em;text-transform:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bvf-cap.bvf-int:active{transform:scale(.97)}
.bvf-cap.dev{letter-spacing:0;text-transform:none;font-size:14px} /* Devanagari: tracking breaks the conjuncts */
.bvf-cap.bvf-int:focus-visible{outline:2px solid var(--b-ink);outline-offset:2px}
.bvf .bv-orb.st-listening .bv-ring{animation:none;opacity:calc(.06 + var(--in,0) * .4);transform:scale(calc(1.02 + var(--in,0) * .22));transition:transform .09s linear,opacity .09s linear}
.bvf .bv-orb.st-listening .bv-ring.r2{opacity:calc(var(--in,0) * .22);transform:scale(calc(1.04 + var(--in,0) * .36))}
@media (prefers-reduced-motion:reduce){.bvf .bv-orb.st-listening .bv-ring{transition:none}}
.bvf-heard{max-width:340px;margin:-8px 0 -10px;text-align:center;font:500 15px/1.4 var(--b-sans);color:var(--b-mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bvf-row{display:flex;align-items:center;justify-content:center;gap:12px}
.bvf-kb{width:52px;height:52px;border-radius:50%;border:1px solid var(--b-line-2);background:var(--b-card);color:var(--b-ink);display:grid;place-items:center;cursor:pointer}
.bvf-kb.on{background:var(--b-ink);color:var(--b-bg);border-color:var(--b-ink)}
.bvf-type{width:100%;max-width:440px;display:flex;gap:8px}
.bvf-type input{flex:1;min-width:0;height:50px;padding:0 16px;border-radius:16px;border:1px solid var(--b-line-2);background:var(--b-card);color:var(--b-ink);font:500 16px var(--b-sans);outline:none}
.bvf-type input:focus{border-color:var(--b-ink)}
.bvf-type button{flex:none;width:50px;height:50px;border-radius:16px;border:0;background:var(--b-ink);color:var(--b-bg);display:grid;place-items:center;cursor:pointer}
.bvf .hb-orb.bvf-endorb{--orb:128px;animation:hbBreathe 5s ease-in-out infinite}
.bvf-ask{font:400 30px/1.2 var(--b-serif);color:var(--b-ink);text-align:center}
.bvf-rate{display:flex;gap:20px}
.bvf-rate button{width:80px;height:80px;border-radius:50%;border:1px solid var(--b-line-2);background:var(--b-card);font-size:34px;line-height:1;cursor:pointer;transition:transform .15s,background .2s;box-shadow:0 8px 20px -14px rgba(31,30,28,.5)}
.bvf-rate button:active{transform:scale(.92)}
.bvf-rate button:focus-visible{outline:2px solid var(--b-ink);outline-offset:3px}
html[data-theme="dark"] .bvf-rate button,body[data-theme=aurora] .bvf-rate button{box-shadow:none}
/* v23: what Bro writes down (a plan, a list, a draft): a card in the chat, and on the call screen while you talk */
.bh .hb-thread .bv-doc,.bvf-doc{width:min(100%,520px);border-radius:18px;background:var(--b-card,#fff);color:var(--b-ink,#1F1E1C);box-shadow:0 1px 2px rgba(31,30,28,.06),0 10px 26px -18px rgba(31,30,28,.45);overflow:hidden;text-align:left}
.bv-doc-h{display:flex;align-items:center;gap:8px;padding:12px 14px 6px;font:700 15.5px/1.3 var(--b-sans,system-ui)}
.bv-doc-h b{flex:1;min-width:0}
.bv-doc-b{padding:2px 14px 10px;font:500 14.5px/1.45 var(--b-sans,system-ui);display:grid;gap:3px}
.bv-doc-l{overflow-wrap:anywhere}
.bv-doc-l.bl{position:relative;padding-left:14px}.bv-doc-l.bl::before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--b-primary,#B5402A)}
.bv-doc-l.tm{display:flex;gap:10px}.bv-doc-l.tm b{flex:none;min-width:98px;font-weight:700;color:var(--b-primary,#B5402A);font-variant-numeric:tabular-nums}
.bv-doc-gap{height:6px}
.bv-doc-f{display:flex;align-items:center;gap:8px;padding:8px 10px 10px 14px;border-top:1px solid var(--b-line,rgba(31,30,28,.08));font:600 12.5px var(--b-sans,system-ui);color:var(--b-mute,#6B6862)}
.bv-doc-f span{flex:1}
.bv-doc-f button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--b-line,rgba(31,30,28,.12));background:transparent;color:inherit;font:700 13px var(--b-sans,system-ui);cursor:pointer}
.bvf-doc{margin:0 auto 10px;max-height:38vh;display:flex;flex-direction:column}
.bvf-doc .bv-doc-b{overflow-y:auto;overscroll-behavior:contain}
.bvf-doc-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:16px;cursor:pointer}