/* Tulqyn: the same colors as Bashla, with a single animated voice surface. */
.voice-studio { max-width: 790px; margin: 0 auto; color: var(--text); }
.voice-studio button, .voice-studio a, .voice-studio select { touch-action: manipulation; }
.voice-studio button, .voice-studio select { font: inherit; }
.voice-studio button { cursor: pointer; }
.voice-studio button:disabled { opacity: .42; cursor: default; }
.voice-studio :is(button,a,select):focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.voice-studio svg { display: block; width: 21px; height: 21px; flex: none; }
.vc-library { padding: 8px 10px 20px; }
.vc-header { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.vc-heading strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.vc-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.vc-icon, .vc-end { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.vc-icon:hover, .vc-end:hover { background: var(--surface-2); }
.vc-main { display: grid; gap: 20px; }
.vc-library-intro { isolation: isolate; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: clamp(22px,5vw,36px); border: 1px solid var(--border); border-radius: 25px; background: radial-gradient(ellipse at 92% 0%,#234347 0%,transparent 59%),var(--surface); }
.vc-intro-copy { position: relative; z-index: 1; min-width: 0; }
.vc-intro-copy h1 { margin: 0; font-size: clamp(26px,5vw,36px); line-height: 1.12; font-weight: 750; letter-spacing: -.045em; }
.vc-intro-copy p { max-width: 36ch; margin: 12px 0 20px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.vc-library-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.vc-start, .vc-new { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 15px; border-radius: 13px; font-size: 14px !important; font-weight: 700 !important; }
.vc-start { border: 1px solid transparent; background: #92d7b0; color: #0d281c; }
.vc-start:hover { background: #b0e6c5; }
.vc-new { border: 1px solid var(--border); background: #0b162363; color: var(--text); }
.vc-new:hover { background: var(--surface-2); }
.vc-library-actions svg { width: 18px; height: 18px; }
.vc-library-intro > .vc-emblem { --orb-size: clamp(80px,15vw,138px); margin-right: 3%; flex: none; }
.vc-library-intro .vc-signal svg { width: 32px; height: 32px; }
.vc-first { isolation: isolate; display: grid; justify-items: center; padding: clamp(24px,7dvh,70px) 18px 38px; text-align: center; }
.vc-first-visual { position: relative; display: grid; place-items: center; margin-bottom: 24px; }
.vc-first-visual::before, .vc-first-visual::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; }
.vc-first-visual::before { inset: -11%; border: 1px solid #a5dbca26; mask-image: linear-gradient(145deg,#000 12%,transparent 46%,#000 88%); }
.vc-first-visual::after { inset: -21%; border: 1px solid #a5dbca1c; mask-image: linear-gradient(30deg,#000 4%,transparent 42%,#000 92%); }
.vc-first-visual .vc-emblem { --orb-size: clamp(148px,29vmin,224px); --light: #bddec2; --mid: #4a8586; --deep: #183443; }
.vc-first-visual .vc-halo { inset: -47%; opacity: .5; }
.vc-first-visual .vc-signal { color: #ebf8ea; }
.vc-first-visual .vc-signal svg { width: 40px; height: 40px; }
.vc-first h1 { margin: 0; font-size: clamp(38px,8vw,60px); line-height: 1.04; letter-spacing: -.05em; font-weight: 750; }
.vc-first p { max-width: 34ch; margin: 13px 0 25px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.voice-studio .vc-first-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: min(100%,220px); min-height: 53px; padding: 10px 22px; border: 1px solid #f1dfb5; border-radius: 17px; background: #e9d5aa; color: #242b2c; font-size: 15px; font-weight: 700; box-shadow: 0 8px 28px #030a1670; }
.vc-first-start svg { width: 18px; height: 18px; }
.voice-studio .vc-first-start:hover:not(:disabled) { background: #f2e2c0; }
.vc-transcript { overflow: hidden; border: 1px solid var(--border); border-radius: 23px; background: var(--surface); }
.vc-transcript-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.vc-transcript-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.vc-transcript-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.vc-session-select { max-width: min(100%,260px); min-height: 40px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); color: var(--text); font-size: 13px !important; }
.vc-history { display: grid; }
.vc-message { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 18px 24px; }
.vc-message + .vc-message { border-top: 1px solid var(--border); }
.vc-message.is-user { background: #08111d38; }
.vc-message-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #a4e2cf; background: #386e6259; font-weight: 700; font-size: 14px; }
.vc-message-avatar svg { width: 17px; height: 17px; }
.vc-message.is-user .vc-message-avatar { color: #e7cd97; background: #9b793a33; }
.vc-message-name { display: block; margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.vc-message-body p { margin: 0; font-size: 16px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-message-body small { display: block; margin-top: 6px; color: var(--muted); }
.vc-play { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: #a4e2cf; background: #132c2d; }
.vc-play:hover { background: #21403f; }
.vc-play svg { width: 17px; height: 17px; }
.vc-error { margin: 0; padding: 13px 16px; border: 1px solid #fb718546; border-radius: 13px; color: var(--muted); font-size: 14px; line-height: 1.5; background: var(--surface); }

.voice-studio.vc-live { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; max-width: none; min-height: 100dvh; margin: 0; padding: max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); overflow: auto; isolation: isolate; background: radial-gradient(ellipse at 50% 47%,#1c2c3b 0%,#111c2b 42%,var(--bg) 78%); }
body:has(.vc-live) { overflow: hidden; }
.vc-live-header { width: min(100%,920px); display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.vc-live-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; color: #98bcb5; background: #182635; }
.vc-live-header .vc-end { border-color: #fb718533; color: #f5b8c4; background: #382a38; }
.vc-live-header .vc-end:hover { background: #553140; }
.vc-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 248px; width: min(100%,760px); margin: 0 auto; padding: 26px 0; }
.vc-emblem { --orb-size: clamp(176px,42vmin,284px); --voice-level: 0; --mist: #427c8a; --light: #a3e0c5; --mid: #397b86; --deep: #182c48; position: relative; display: grid; place-items: center; width: var(--orb-size); height: var(--orb-size); isolation: isolate; }
.vc-emblem.is-thinking { --mist: #5a6e9b; --light: #b7d4ee; --mid: #5d77a3; --deep: #252d51; }
.vc-emblem.is-speaking { --mist: #728c61; --light: #e8d7a4; --mid: #629789; --deep: #16394b; }
.vc-emblem.is-paused { --mist: #526576; --light: #a3b8c8; --mid: #566b81; --deep: #28354b; }
.vc-halo { position: absolute; z-index: -1; inset: -28%; border-radius: 50%; background: radial-gradient(circle,var(--mist) 0%,transparent 68%); opacity: .32; }
.vc-fluid { position: absolute; inset: 6%; overflow: hidden; isolation: isolate; border: 1px solid #d9f3ff30; border-radius: 48% 52% 52% 48% / 52% 46% 54% 48%; background: radial-gradient(ellipse at 38% 8%,var(--light),var(--mid) 47%,var(--deep) 92%); box-shadow: inset 0 0 32px #c9f9f629, inset 0 -25px 42px #07152e66, 0 18px 54px #030a16a3; transform: scale(calc(1 + .10 * var(--voice-level))); transition: transform .13s ease-out; }
.vc-fluid i { position: absolute; width: 147%; height: 108%; left: -24%; top: 34%; border-radius: 43% 57% 40% 60% / 52% 49% 51% 48%; transform-origin: 50% 39%; background: linear-gradient(162deg,#e1f6ed8c,var(--mid) 33%,var(--deep) 75%); transform: rotate(-14deg); }
.vc-fluid i:nth-child(2) { top: 48%; opacity: .79; transform: rotate(18deg); }
.vc-fluid i:nth-child(3) { top: 59%; opacity: .72; transform: rotate(-23deg); }
.vc-emblem.is-listening .vc-fluid i { animation: vc-current 6s ease-in-out infinite alternate; }
.vc-emblem.is-thinking .vc-fluid i { animation: vc-current 2.7s ease-in-out infinite alternate; }
.vc-emblem.is-speaking .vc-fluid i { animation: vc-current 1.75s ease-in-out infinite alternate; }
.vc-emblem .vc-fluid i:nth-child(2) { animation-direction: alternate-reverse; animation-delay: -.8s; }
.vc-emblem .vc-fluid i:nth-child(3) { animation-delay: -1.6s; }
.vc-emblem .vc-progress { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 1.8; transform: rotate(-90deg); }
.vc-progress circle:first-child { stroke: #a3d6ca32; }
.vc-progress [data-vc-progress] { stroke: #a0e1c3; stroke-linecap: round; transition: stroke-dasharray .13s linear; }
.vc-signal { position: relative; z-index: 1; display: grid; place-items: center; min-width: 60px; height: 60px; color: #f5fffe; }
.vc-signal > svg { width: 35px; height: 35px; filter: drop-shadow(0 2px 10px #07152595); }
.vc-dots, .vc-bars { display: flex; align-items: center; justify-content: center; gap: 7px; }
.vc-dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: vc-think 1.5s ease-in-out infinite; }
.vc-dots i:nth-child(2) { animation-delay: .18s; }
.vc-dots i:nth-child(3) { animation-delay: .36s; }
.vc-bars i { width: 5px; height: 31px; border-radius: 5px; background: currentColor; transform: scaleY(.4); animation: vc-voice .84s ease-in-out infinite alternate; }
.vc-bars i:nth-child(2n) { animation-delay: -.54s; }
.vc-bars i:nth-child(3n) { animation-delay: -.29s; }
.vc-bars i:nth-child(4) { height: 42px; animation-delay: -.66s; }
.vc-bars i:first-child, .vc-bars i:last-child { height: 21px; }
.vc-live-notice { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); color: #f6bd93; }
.vc-load-notice { box-sizing: border-box; flex: none; width: min(100%, 360px); margin: 12px auto 0; padding: 8px 12px; border-radius: 12px; background: #2e2528; color: #ffe1c5; font-size: 0.875rem; line-height: 1.4; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.vc-controls { display: grid; place-items: center; flex: none; min-height: 94px; padding: 6px 0; }
.vc-send { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid #f1dfb5; border-radius: 22px; background: #e9d5aa; color: #242b2c; box-shadow: 0 10px 26px #030a168c; }
.vc-send:hover { background: #f2e2c0; }
.vc-send:active { transform: scale(.96); }
.vc-send svg { width: 26px; height: 26px; }
@keyframes vc-current { from { transform: rotate(-18deg) translateY(-3%); } to { transform: rotate(17deg) translateY(5%); } }
@keyframes vc-think { 0%,70%,100% { opacity: .39; transform: translateY(2px); } 35% { opacity: 1; transform: translateY(-5px); } }
@keyframes vc-voice { from { transform: scaleY(calc(.24 + .26 * var(--voice-level))); } to { transform: scaleY(calc(.46 + .54 * var(--voice-level))); } }
@media (max-width: 520px) {
  .vc-library { padding: 4px 2px 18px; }
  .vc-library-intro { padding: 22px 18px; border-radius: 21px; }
  .vc-library-intro > .vc-emblem { position: absolute; right: -30px; top: -34px; --orb-size: 158px; opacity: .43; pointer-events: none; }
  .vc-library-intro .vc-signal { display: none; }
  .vc-transcript-head, .vc-message { padding: 16px 14px; }
  .vc-message { gap: 9px; }
  .vc-message-body p { font-size: 15px; }
  .vc-play { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-fluid, .vc-fluid i, .vc-dots i, .vc-bars i, .vc-progress [data-vc-progress] { animation: none !important; transition: none !important; }
}