/* Buddy's own on-screen UI, drawn from the real app: input panel, "Thinking" pill, listening capsule. */
.bud { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); width: min(88%, 470px); z-index: 6; display: grid; justify-items: center; font-family: Inter, system-ui, sans-serif; container-type: inline-size; }
.pr-demo .bud { bottom: 3.5%; }
.bud > div { grid-area: 1 / 1; opacity: 0; transform: scale(.94) translateY(8px); transition: opacity .28s, transform .38s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.bud[data-state="input"] .bud-input, .bud[data-state="thinking"] .bud-think, .bud[data-state="listening"] .bud-voice,
.bud[data-state="speaking"] .bud-voice, .bud[data-state="idle"] .bud-voice { opacity: 1; transform: none; }

/* 1. input panel */
.bud-input { width: 100%; background: #141414; border: 1px solid #2c2c2c; border-radius: 4.2cqw; padding: 3.6cqw 4.2cqw 3.4cqw; color: #bdbdbd; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .45); }
.bud-top { display: flex; align-items: center; gap: 2.4cqw; font-size: max(11px, 3.1cqw); font-weight: 500; color: #b5b5b5; }
.bud-name { flex: 1; }
.bud-modes { display: flex; gap: 1.2cqw; align-items: center; }
.bud-modes i { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: grid; place-items: center; color: #8e8e8e; }
.bud-modes i.on { background: #2a2a2a; color: #e8e8e8; }
.bud-modes svg, .bud-ic svg, .bud-x svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bud-x { width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; color: #6e6e6e; margin-left: 2.2cqw; }
.bud-field { display: flex; align-items: center; gap: 2cqw; margin-top: 2.6cqw; }
.bud-field .demo-say { flex: 1; min-width: 0; font-size: max(12px, 3.9cqw); color: #e6e6e6; border-bottom: 1px solid #d8d8d8; padding: 1cqw 0 1.4cqw; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1cqw; }
.bud-field .demo-say:empty::before { content: "Ask anything..."; color: #6f6f6f; }
.bud-field .demo-say::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: #e6e6e6; margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.bud-ic { display: flex; gap: 2.4cqw; color: #9a9a9a; }
.bud-ic svg { width: 5.6cqw; height: 5.6cqw; }

/* 2. thinking pill */
.bud-think { display: flex; align-items: center; gap: 4.4cqw; width: 64%; background: #141414; border: 1px solid #2c2c2c; border-radius: 4.4cqw; padding: 3cqw 4.4cqw; color: #eee; font-size: max(12px, 4cqw); box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .45); position: relative; }
.bud-think::before { content: ""; position: absolute; left: 36%; top: -1.4cqw; width: 2.2cqw; height: 2.2cqw; background: #cfcfcf; clip-path: polygon(0 0, 100% 0, 0 100%); transform: rotate(18deg); }
.bud-ring { width: 8.6cqw; height: 8.6cqw; flex: none; animation: spin 2.4s linear infinite; }
.bud-think b { flex: 1; font-weight: 500; }
.bud-stop { width: 4cqw; height: 4cqw; border: 1.6px solid #e8e8e8; border-radius: 1cqw; flex: none; }

/* 3. listening / speaking capsule */
.bud-voice { display: flex; align-items: center; justify-content: center; gap: 1.9cqw; width: 22cqw; min-width: 88px; height: 11.4cqw; min-height: 46px; background: #050505; border-radius: 99px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 2cqw 5cqw rgba(0, 0, 0, .4); }
.bud-voice i { width: 1.9cqw; min-width: 6px; height: 4.6cqw; min-height: 17px; border-radius: 99px; background: #fff; transform-origin: center; transform: scaleY(.62); }
.bud[data-state="listening"] .bud-voice i, .bud[data-state="speaking"] .bud-voice i { animation: vbar .9s ease-in-out infinite alternate; }
.bud-voice i:nth-child(2n) { animation-delay: -.3s; } .bud-voice i:nth-child(3n) { animation-delay: -.55s; } .bud-voice i:nth-child(4) { animation-delay: -.15s; }
@keyframes vbar { 0% { transform: scaleY(.45); } 100% { transform: scaleY(1.25); } }

/* subtitles for what is spoken, and the step status */
.demo-cap { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); max-width: 100%; width: max-content; padding: 6px 12px; border-radius: 9px; background: rgba(0, 0, 0, .72); color: #fff; font: 500 max(12px, 3.3cqw)/1.25 Inter, system-ui, sans-serif; text-align: center; opacity: 0; transition: opacity .2s; pointer-events: none; }
.demo-cap:not(:empty) { opacity: 1; }
.demo-cap.you::before { content: "You: "; opacity: .6; }
.demo-cap.buddy::before { content: "Buddy: "; opacity: .6; }
.demo-status { position: absolute; left: 12px; top: 12px; z-index: 7; padding: 5px 11px; border-radius: 99px; background: rgba(20, 20, 20, .82); color: #fff; font: 600 12px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; }
.demo-status:empty { display: none; }
.demo-status.ok { background: #1a7f55; }
@media (prefers-reduced-motion: reduce) { .bud-ring, .bud-voice i { animation: none !important; } }
.bud { align-items: end; }
/* capsule proportions from the real app: 7 tall, narrow bars */
.bud-voice { width: 27cqw; min-width: 100px; height: 12.6cqw; min-height: 50px; gap: 1.6cqw; }
.bud-voice i { width: 1.4cqw; min-width: 5px; height: 5.4cqw; min-height: 21px; transform: scaleY(1); }
@keyframes vbar { 0% { transform: scaleY(.5); } 100% { transform: scaleY(1.2); } }
.bud.top, .pr-demo .bud.top { bottom: auto; top: 9%; align-items: start; } .bud.top .demo-cap { bottom: auto; top: calc(100% + 10px); }

/* Minimal and zoom-aware: Buddy's UI is part of the screen, so it scales with the camera (--bz = zoom). */
.bud { width: min(94%, calc(var(--bz, 1) * clamp(170px, 30cqw, 300px))); bottom: 6%; }
.pr-demo .bud { bottom: 3%; }
.bud.top, .pr-demo .bud.top { top: 7%; bottom: auto; }
.bud-top { font-size: max(8px, 3.1cqw); }
.bud-field .demo-say { font-size: max(9px, 3.9cqw); }
.bud-think { width: 80%; font-size: max(9px, 4cqw); }
.bud-voice { width: 27cqw; height: 12.6cqw; min-width: 44px; min-height: 22px; }
.bud-voice i { min-width: 3px; min-height: 10px; }
/* smaller base: ~20% of the screen width at zoom 1, growing with the camera */
.bud { width: min(94%, calc(var(--bz, 1) * clamp(120px, 20cqw, 220px))); }
.bud-voice { width: 24cqw; height: 11cqw; min-width: 36px; min-height: 18px; }
.bud-voice i { min-height: 8px; }
.bud { width: min(94%, calc(var(--bz, 1) * clamp(140px, 23cqw, 240px))); }

/* Buddy's voice bars and Thinking pill always sit at the bottom centre of the screen, clear of whatever the pointer is showing */
.bud, .pr-demo .bud, .bud.top, .pr-demo .bud.top { top: auto; bottom: 5%; align-items: end; }

/* Buddy's cursor: a rounded black arrow with a thin white edge (reads on dark and light screens) and a soft shadow.
   Offsets put the tip of the arrow exactly on the point it targets. */
.demo-cursor { left: -6.6px; top: -3.94px; width: 22px; height: 22px; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .45)); }