:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0c1020;
  color: #f5f7ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #1e2854, #0c1020 48%); }
main { width: min(960px, calc(100% - 24px)); margin: 0 auto; padding: 32px 0 64px; }
h1 { margin: 4px 0 8px; font-size: clamp(2rem, 6vw, 4rem); line-height: .95; }
h2 { grid-column: 1 / -1; margin: 0 0 12px; font-size: 1rem; letter-spacing: .08em; }
.eyebrow { color: #8db5ff; font-weight: 800; letter-spacing: .14em; }
.panel, .status-panel { background: rgba(20, 29, 57, .9); border: 1px solid #344577; border-radius: 16px; padding: 18px; margin-top: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .2); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 6px; color: #c8d3f3; }
select, input, textarea, button { min-height: 44px; border-radius: 10px; border: 1px solid #52628b; font: inherit; }
select, input, textarea { padding: 10px 12px; background: #101831; color: inherit; }
button { padding: 0 16px; background: #27365f; color: white; font-weight: 750; cursor: pointer; }
button.primary { background: #2877f0; border-color: #5f9cff; }
button.danger { background: #6e2630; border-color: #9c4854; }
button:disabled { opacity: .45; cursor: not-allowed; }
.actions, .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions { grid-column: 1 / -1; }
.actions input { width: 160px; text-transform: uppercase; }
.share { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.status-panel { display: flex; justify-content: space-between; align-items: center; }
#status { color: #72ffb6; letter-spacing: .08em; }
#status[data-state="PROCESSING"] { color: #ffd26c; }
#status[data-state="SPEAKING"] { color: #82d8ff; }
#status[data-state="ERROR"], #status[data-state="DISCONNECTED"] { color: #ff8d9b; }
.controls h2, .controls p { flex-basis: 100%; }
.controls details { width: 100%; }
.controls summary { cursor: pointer; color: #ffd26c; font-weight: 800; margin-bottom: 12px; }
.chat-messages, .attachments { max-height: 240px; overflow: auto; display: grid; gap: 8px; margin: 10px 0; }
.chat-messages p, .attachments p { margin: 0; padding: 10px; border-radius: 10px; background: #111a35; overflow-wrap: anywhere; }
.attachments a { color: #8db5ff; }
.consent-panel strong { display:block; margin-top:.75rem; color:#ffd86b; letter-spacing:.06em; }
.consent-panel p { color:#d7cbed; }
.attachment-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.voice-panel { display: grid; gap: 14px; }
.language-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voice-start { width: 100%; }
.voice-status { margin: 0; color: #ffd26c; font-weight: 750; }
.transcript-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.transcript-grid article { min-height: 140px; padding: 14px; border: 1px solid #344577; border-radius: 12px; background: #111a35; }
.transcript-grid h3 { margin: 0; color: #aebce3; }
.transcript-grid p { font-size: 1.25rem; line-height: 1.45; }
.metrics dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; }
.metrics dl div { background: #111a35; padding: 12px; border-radius: 10px; }
dt { color: #aebce3; font-size: .78rem; }
dd { margin: 4px 0 0; font-weight: 800; }
.note { color: #aebce3; font-size: .85rem; }
#eventLog { min-height: 72px; max-height: 180px; overflow: auto; white-space: pre-wrap; color: #9eacd0; font-size: .75rem; }
@media (max-width: 720px) {
  .grid, .transcript-grid, .language-pair { grid-template-columns: 1fr; }
  .metrics dl { grid-template-columns: repeat(2, 1fr); }
  .share { grid-template-columns: 1fr; }
  .share input { width: 100%; }
  .attachment-row { grid-template-columns: 1fr; }
}

/* Serena Call Translator approved purple/gold presentation. */
:root { color-scheme: dark; background:#080018; color:#fff8ff; --gold:#ffd35a; --panel:rgba(29,7,68,.92); --line:rgba(255,211,90,.62); }
html { min-height:100%; background:#080018; }
body { background:radial-gradient(circle at 50% -10%,rgba(144,46,255,.62),transparent 38%),radial-gradient(circle at 100% 34%,rgba(49,83,255,.26),transparent 30%),linear-gradient(180deg,#12002e 0%,#080018 72%); }
body::before { content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.6px);background-size:44px 44px;opacity:.13; }
.call-shell { position:relative;width:min(920px,calc(100% - 22px));margin:0 auto;padding:22px 0 max(42px,env(safe-area-inset-bottom)); }
.call-hero { text-align:center;padding:10px 8px 16px; }
.call-kicker { color:#e8c8ff;font-size:.78rem;font-weight:850;letter-spacing:.16em; }
h1 { margin:8px 0 4px;color:var(--gold);font-size:clamp(2rem,8vw,3.65rem);line-height:1;text-shadow:0 0 18px rgba(255,179,55,.55); }
.call-hero p { margin:10px auto 0;max-width:600px;color:#eadbff;font-size:clamp(.95rem,3.8vw,1.15rem); }
h2 { color:var(--gold); }
.panel,.status-panel { position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(47,14,105,.96),rgba(13,5,50,.96));border:1px solid var(--line);border-radius:22px;padding:17px;margin-top:14px;box-shadow:0 0 0 1px rgba(172,73,255,.25),0 14px 36px rgba(0,0,0,.34),inset 0 0 26px rgba(119,40,220,.16); }
label { color:#e6d5ff;font-weight:650; }
select,input,textarea,button { min-height:46px;border-radius:13px;border-color:rgba(202,151,255,.64); }
select,input,textarea { width:100%;background:rgba(11,4,40,.82);color:#fff; }
textarea { resize:vertical;min-height:64px;max-height:150px; }
button { background:linear-gradient(145deg,#3d147c,#251058);box-shadow:inset 0 0 14px rgba(183,74,255,.15); }
button.primary { color:#210535;background:linear-gradient(135deg,#ffe073,#e7a623);border-color:#fff1ac;box-shadow:0 0 18px rgba(255,185,48,.28); }
button.join { border-color:#9edcff; }
button.danger { background:linear-gradient(135deg,#7c173e,#3c0928);border-color:#ff8bad; }
.invite-actions button { flex:1 1 130px; }
.status-panel { display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:14px 17px; }
.status-label { color:#d9c4f5; }
.participant-count { min-width:54px;color:var(--gold);text-align:right;font-weight:900; }
#status { color:#62ffa8;font-size:.91rem;overflow-wrap:anywhere; }
.voice-start { min-height:58px;font-size:1.08rem; }
.transcript-grid { gap:11px; }
.transcript-grid article { min-height:122px;border-color:rgba(181,115,255,.48);border-radius:15px;background:rgba(8,2,37,.72); }
.transcript-grid h3 { color:#cfabff; }
.chat-panel { margin-top:14px; }
.chat-messages { min-height:112px;max-height:310px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:10px 0 13px;padding:4px;scroll-behavior:smooth; }
.chat-message { max-width:86%;margin:0;padding:10px 12px;border-radius:15px;overflow-wrap:anywhere; }
.chat-message.mine { align-self:flex-end;background:linear-gradient(135deg,#7130c7,#43158a);border-bottom-right-radius:4px; }
.chat-message.theirs { align-self:flex-start;background:rgba(17,8,53,.94);border:1px solid rgba(255,211,90,.48);border-bottom-left-radius:4px; }
.chat-message strong { color:var(--gold); }
.chat-compose { display:grid;grid-template-columns:1fr auto;gap:9px;align-items:end; }
.chat-compose button { min-width:104px;height:100%; }
.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
[hidden] { display:none!important; }

@media (max-width:720px) {
  .call-shell { width:min(100% - 14px,920px);padding-top:12px; }
  .status-panel { grid-template-columns:1fr auto; }
  .status-label { grid-column:1 / -1;font-size:.78rem; }
  .chat-compose { grid-template-columns:1fr; }
  .chat-compose button,.attachment-row button { width:100%;min-height:48px; }
}

/* Final approved Serena Call Translator composition. */
html,body { max-width:100%;overflow-x:hidden; }
.call-topbar { display:grid;grid-template-columns:54px 1fr 54px;gap:10px;align-items:center;text-align:center; }
.call-topbar h1 { margin:0;color:#ffe16d;font-size:clamp(1.42rem,6vw,3.25rem);text-transform:uppercase;letter-spacing:.025em;text-shadow:0 0 8px #ff8a2b,0 0 22px rgba(255,64,195,.55); }
.icon-button { width:52px;padding:0;border-radius:17px;color:#fff5a7;font-size:1.9rem;border-color:#ffe269; }
.topbar-spacer { width:52px; }
.participant-indicator { width:max-content;max-width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin:11px auto 13px;padding:7px 15px;border:1px solid rgba(198,109,255,.72);border-radius:999px;background:rgba(19,5,54,.82);color:#d9cbed;font-size:.82rem;letter-spacing:.08em;box-shadow:0 0 15px rgba(175,63,255,.22); }
.participant-indicator strong { color:#ffe16d;font-size:1rem; }
.presence-dot { width:12px;height:12px;display:inline-block;border-radius:50%;background:#ffb93d;box-shadow:0 0 11px #ff9b2d; }
.participant-indicator.is-online { border-color:#54ff9e;color:#74ffad; }
.participant-indicator.is-online strong { color:#74ffad; }
.participant-indicator.is-online .presence-dot,.status-strip .presence-dot { background:#55ff9a;box-shadow:0 0 12px #3bff86; }
.hero-languages { grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:end;gap:12px;margin-top:2px; }
.hero-languages label,.hero-languages select,.call-actions > * { min-width:0; }
.hero-languages label { padding:11px;border:1px solid #d74aff;border-radius:20px;background:linear-gradient(145deg,rgba(55,18,113,.94),rgba(11,6,44,.94));box-shadow:0 0 17px rgba(217,60,255,.24); }
.hero-languages label > span { padding-inline:4px;font-size:.9rem; }
.hero-languages select { border-color:#ffe06b;font-weight:800;font-size:1.02rem; }
.swap-button { width:58px;height:58px;padding:0;border-radius:50%;border:2px solid #ffe66d;background:radial-gradient(circle,#8e26ff,#260066 72%);color:#fff5a3;font-size:2rem;box-shadow:0 0 18px #be3dff,0 0 11px #ffba35; }
.hero-stage { position:relative;display:grid;place-items:center;min-height:250px;margin:6px 0 -8px;isolation:isolate; }
.hero-stage::before { content:"";position:absolute;width:min(74vw,430px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(104,28,244,.48),rgba(9,2,36,.22) 64%,transparent 71%);box-shadow:0 0 34px rgba(131,57,255,.55);z-index:-2; }
.hero-orbit { position:absolute;width:min(83vw,500px);aspect-ratio:1;border:2px solid rgba(255,197,69,.66);border-radius:50%;transform:rotate(-13deg) scaleY(.67);box-shadow:0 0 17px #ffb13a;z-index:-1; }
.hero-stage img { width:min(67vw,380px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:28%;filter:drop-shadow(0 0 22px rgba(198,61,255,.72)); }
.call-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-items:start;margin:3px auto 17px;max-width:660px; }
.round-action { min-width:0;padding:0;border:0;background:none;box-shadow:none;display:grid;justify-items:center;gap:7px; }
.round-action .round-icon { width:clamp(72px,20vw,118px);aspect-ratio:1;display:grid;place-items:center;border:2px solid #ffe672;border-radius:50%;font-size:clamp(2rem,8vw,3.6rem);box-shadow:0 0 20px currentColor,inset 0 0 25px rgba(255,255,255,.2); }
.round-action b { font-size:clamp(.78rem,3.4vw,1.05rem);color:#fff5bd; }
.call-start .round-icon { background:radial-gradient(circle at 35% 30%,#4aff72,#00a83b 62%,#006827);color:#5bff83; }
.voice-start .round-icon { background:radial-gradient(circle at 35% 30%,#ffdc62,#7a28ec 62%,#3a0978);color:#ffd462; }
.call-end .round-icon { background:radial-gradient(circle at 35% 30%,#ff365d,#9b002b 62%,#500019);color:#ff385e; }
.voice-status { text-align:center;min-height:1.3em;margin:0 0 10px;overflow-wrap:anywhere; }
.secondary-action { display:block;margin:0 auto 10px; }
.speaker-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px; }
.speaker-card { position:relative;display:grid;gap:8px;min-height:205px;padding:15px 66px 15px 15px;border:1px solid;border-radius:22px;background:linear-gradient(145deg,rgba(23,8,66,.96),rgba(7,4,36,.96));box-shadow:inset 0 0 27px rgba(98,28,221,.18); }
.speaker-card header { display:flex;align-items:center;justify-content:space-between;gap:9px; }
.speaker-card h2 { grid-column:auto;margin:0;font-size:1.08rem;letter-spacing:0; }
.speaker-card > div { padding:9px;border:1px solid rgba(189,117,255,.52);border-radius:12px;background:rgba(5,3,29,.58); }
.speaker-card > div b { color:#c9b6e7;font-size:.72rem; }
.speaker-card p { margin:3px 0 0;min-height:1.35em;overflow-wrap:anywhere; }
.speaker-me { border-color:#17c9ff;box-shadow:0 0 18px rgba(0,191,255,.2),inset 0 0 25px rgba(0,177,255,.1); }
.speaker-me h2,.speaker-me .mini-wave { color:#22d8ff; }
.speaker-other { border-color:#ef45ff;box-shadow:0 0 18px rgba(232,44,255,.2),inset 0 0 25px rgba(232,44,255,.1); }
.speaker-other h2,.speaker-other .mini-wave { color:#ef52ff; }
.speaker-play { position:absolute;right:13px;top:50%;width:46px;min-height:46px;padding:0;border-radius:50%;font-size:1.2rem;transform:translateY(-8%); }
.quick-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0 10px; }
.quick-actions button { min-width:0;display:grid;place-items:center;gap:4px;padding:9px 5px;border-color:#b459ff; }
.quick-actions button span { font-size:1.4rem; }
.quick-actions button b { font-size:.78rem;overflow-wrap:anywhere; }
.status-strip { display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;padding:11px 14px;border:1px solid #943dff;border-radius:15px;background:rgba(26,8,64,.88); }
.status-strip span { font-size:.75rem;white-space:nowrap; }
.chat-panel { border-color:#8a38ed; }
.chat-panel summary,.advanced-panel summary { cursor:pointer;color:#fff;font-weight:850; }
.chat-compose { grid-template-columns:48px minmax(0,1fr) 52px;gap:8px;align-items:stretch; }
.chat-compose label { min-width:0; }
.chat-compose textarea { min-height:48px;height:48px;resize:none; }
.paperclip,.send-button { width:48px;min-width:0;padding:0;border-radius:15px;font-size:1.3rem; }
.send-button { width:52px;border-radius:50%;background:linear-gradient(145deg,#3670ff,#b600ff); }
.chat-compose .paperclip { width:48px;min-width:0; }
.chat-compose .send-button { width:52px;min-width:0; }
.attachment-menu { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px; }
.attachment-menu button { padding:5px;font-size:.78rem; }
.attachment-selection { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;overflow-wrap:anywhere; }
.advanced-panel { margin-top:12px; }
.help-dialog { width:min(520px,calc(100% - 24px));padding:20px;border:1px solid #ffe06b;border-radius:22px;background:linear-gradient(160deg,#280668,#090020);color:#fff;box-shadow:0 0 35px rgba(211,67,255,.55); }
.help-dialog::backdrop { background:rgba(2,0,13,.78); }
.help-head { display:flex;justify-content:space-between;align-items:center; }
.help-head h2 { margin:0;font-size:1.35rem; }
.help-head button { width:44px;padding:0;border-radius:50%;font-size:1.6rem; }
.help-dialog ol { display:grid;gap:8px;padding-left:1.5rem; }
.help-dialog li span { display:inline-block;width:34px;text-align:center; }
[dir="rtl"] .speaker-play { right:auto;left:13px; }

@media (max-width:560px) {
  .call-shell { width:calc(100% - 12px);padding-top:10px; }
  .call-topbar { grid-template-columns:44px 1fr 44px; }
  .topbar-spacer,.icon-button { width:44px; }
  .icon-button { min-height:44px;font-size:1.55rem; }
  .hero-languages { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:6px; }
  .hero-languages label { padding:7px;border-radius:15px; }
  .hero-languages select { padding:7px 5px;font-size:.86rem; }
  .swap-button { width:48px;height:48px;font-size:1.6rem; }
  .hero-stage { min-height:225px; }
  .speaker-grid { grid-template-columns:1fr; }
  .speaker-card { min-height:170px; }
  .quick-actions button b { font-size:.7rem; }
  .status-strip { grid-template-columns:auto 1fr auto; }
  .status-strip span:last-child { display:none; }
  .attachment-menu { grid-template-columns:1fr; }
}

/* One chronological conversation replaces the duplicated transcript panels. */
.transcript-compat[hidden] { display:none!important; }
.chat-panel { width:100%; }
.chat-panel details[open] .chat-messages { min-height:150px;max-height:52vh; }
.conversation-entry { margin:9px 0;padding:11px 12px;border:1px solid rgba(167,88,255,.55);border-radius:16px;background:rgba(16,8,55,.9);overflow-wrap:anywhere; }
.conversation-entry.mine { margin-left:8%;border-color:rgba(33,204,255,.72); }
.conversation-entry.theirs { margin-right:8%;border-color:rgba(239,55,255,.72); }
.conversation-entry header { display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff1b8; }
.conversation-entry p { margin:5px 0;line-height:1.35; }
.conversation-entry .translation { color:#fff;font-weight:700; }
.conversation-entry footer { display:flex;align-items:center;justify-content:space-between;gap:8px;color:#c9b9ec;font-size:.78rem; }
.conversation-entry .replay-entry { min-width:38px;min-height:38px;border-radius:50%;padding:0; }
.signal-lost-icon svg { width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round; }

.guest-accept { position:relative;max-width:590px;margin:18px auto;padding:24px 20px;border:1px solid rgba(255,217,104,.88);border-radius:26px;background:radial-gradient(circle at 78% 18%,rgba(126,35,255,.3),transparent 34%),linear-gradient(150deg,rgba(48,10,100,.98),rgba(8,3,35,.98));box-shadow:0 0 0 1px rgba(221,71,255,.55),0 0 30px rgba(184,45,255,.38),inset 0 0 28px rgba(255,194,79,.08);text-align:center;overflow:hidden; }
.guest-accept::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 18%,rgba(255,215,103,.08) 48%,transparent 72%); }
.guest-call-emblem { position:relative;display:grid;place-items:center;width:78px;height:78px;margin:0 auto 13px;border:2px solid #ffd568;border-radius:50%;background:radial-gradient(circle at 36% 28%,#8d3cff,#26065d 70%);color:#fff4b7;font-size:2.2rem;box-shadow:0 0 22px rgba(192,61,255,.6),inset 0 0 18px rgba(255,218,93,.28); }
.guest-accept h2 { position:relative;margin:0 0 11px;color:#ffe58c;font-size:clamp(1.45rem,6vw,2rem);letter-spacing:.02em;text-shadow:0 0 14px rgba(255,196,70,.35); }
.guest-accept p { position:relative;margin:9px 0;color:#f3ecff;line-height:1.45; }
.guest-accept strong { position:relative;display:block;margin:12px 0;color:#65ecff;font-size:1.08rem; }
.guest-free-notice { color:#8effba!important;font-weight:850; }
.guest-ui-language { position:relative;margin:16px 0 12px;text-align:left;color:#f3eaff;font-weight:750; }
.guest-ui-language select { width:100%;border-color:#ffd568;background:#12052e;color:#fff; }
.guest-consent-notice { padding:12px 13px;border:1px solid rgba(255,211,90,.55);border-radius:15px;background:rgba(33,9,76,.78);text-align:left;font-size:.92rem; }
.guest-answer { position:relative;width:100%;min-height:64px;margin-top:13px;padding:10px 18px;border:2px solid #baff83;border-radius:32px;background:linear-gradient(180deg,#33df68,#08a743 62%,#058133);color:#fff;font-size:clamp(1.2rem,5vw,1.55rem);font-weight:950;line-height:1.2;letter-spacing:.07em;overflow-wrap:anywhere;white-space:normal;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 0 22px rgba(32,235,105,.5),inset 0 2px 2px rgba(255,255,255,.3); }
.guest-answer:active:not(:disabled) { transform:translateY(1px);box-shadow:0 0 13px rgba(32,235,105,.42),inset 0 2px 5px rgba(0,0,0,.22); }
.guest-answer:disabled { filter:saturate(.45); }
.external-browser-action { position:relative;width:100%;min-height:58px;margin:13px 0 10px;padding:10px 16px;border:2px solid #ffd568;border-radius:29px;background:linear-gradient(135deg,#5520c9,#8d32ec 58%,#3c148c);color:#fff8ca;font-size:clamp(1.05rem,4.5vw,1.32rem);font-weight:900;line-height:1.2;overflow-wrap:anywhere;white-space:normal;box-shadow:0 0 20px rgba(176,55,255,.45),inset 0 1px 2px rgba(255,255,255,.22); }
.external-browser-action:active { transform:translateY(1px); }
.guest-accept .privacy-info { position:relative;margin-top:16px;padding-top:3px;border-top:1px solid rgba(187,100,255,.35); }
.guest-accept .privacy-info summary { min-height:44px;padding:11px 2px;color:#e8d8ff;font-weight:800;cursor:pointer; }
.guest-invite-pending .call-shell > :not(.reader-home-nav):not(.call-topbar):not(.guest-accept):not(.help-dialog) { display:none!important; }
.guest-invite-pending .call-topbar { margin-bottom:6px; }
[dir="rtl"] .guest-ui-language,[dir="rtl"] .guest-consent-notice,[dir="rtl"] .guest-accept .privacy-info { text-align:right; }
.billing-notice { margin:6px 3px 0;padding:9px 12px;border:1px solid rgba(190,106,255,.48);border-radius:12px;background:rgba(17,7,52,.84);color:#e9dcff;font-size:.82rem;line-height:1.35; }
.billing-notice:empty { display:none; }
.natural-mode { display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:11px;border:1px solid rgba(190,106,255,.45);border-radius:13px;background:rgba(20,7,56,.78); }
.natural-mode input { width:20px;height:20px;flex:0 0 auto; }
.simple-consent { display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:12px;border:1px solid rgba(255,211,90,.62);border-radius:14px;background:rgba(31,10,72,.9);color:#f4edff;line-height:1.35; }
.simple-consent input { width:22px;height:22px;flex:0 0 auto;accent-color:#8c38ed; }
.host-consent { max-width:640px;margin:8px auto 10px; }
.waiting-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;margin:8px 0;padding:12px;border:1px solid rgba(85,232,171,.55);border-radius:15px;background:rgba(7,44,49,.72); }
.waiting-actions strong { grid-column:1/-1;color:#8fffc9;text-align:center; }
.waiting-actions button { min-height:44px; }
.privacy-info { margin-top:10px;text-align:left;color:#ded2f4; }
.privacy-info p { font-size:.88rem; }
.browser-support-warning { padding:10px 12px;border:1px solid #ffbd45;border-radius:12px;background:rgba(86,42,0,.38);color:#fff4cf!important; }
.signal-overlay { position:fixed;z-index:900;left:8px;right:8px;top:max(8px,env(safe-area-inset-top));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #ffcc57;border-radius:16px;background:rgba(24,5,63,.96);box-shadow:0 8px 25px rgba(0,0,0,.42);text-align:left;pointer-events:none; }
.signal-overlay[hidden] { display:none; }
.signal-lost-icon { width:46px;height:46px;display:grid;place-items:center;border:2px solid #ffcc57;border-radius:50%;color:#ffcc57;box-shadow:0 0 16px rgba(255,184,51,.35);transform:rotate(-8deg); }
.signal-overlay strong { color:#fff;font-size:clamp(.9rem,3.8vw,1.1rem);line-height:1.25; }
.signal-overlay button { min-width:0;min-height:42px;padding:7px 10px;background:#6f27d8;border-color:#ffd35a;font-weight:900;pointer-events:auto; }
.signal-overlay .signal-lost-icon svg { width:28px;height:28px; }
.call-topbar,.call-actions { position:relative;z-index:901; }
.quick-actions,.advanced-panel { display:none!important; }
.status-strip > span:not(:first-child) { display:none; }
.status-strip { grid-template-columns:auto minmax(0,1fr); }

/* A32 accessibility correction: full-width stacked transcripts and independent chat/help surfaces. */
html,body { max-width:100%;overflow-x:hidden; }
.speaker-grid,.speaker-grid:is(:where(*)) { grid-template-columns:minmax(0,1fr)!important;gap:11px;width:100%; }
.speaker-card { width:100%;min-height:178px;padding:13px 61px 13px 13px; }
.speaker-language { max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.speaker-play { right:11px;width:44px;min-height:44px;font-size:1.05rem; }
.audio-wave { right:12px;width:55px; }
.chat-panel { width:100%;overflow:visible; }
.chat-panel summary { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;list-style:none;cursor:pointer;user-select:none; }
.chat-panel summary::-webkit-details-marker { display:none; }
.chat-heading-label { display:flex;align-items:center;gap:8px;min-width:0; }
.chat-heading-actions { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
#chatExpand { width:42px;min-width:42px;min-height:42px;padding:0;border-radius:12px;font-size:1.2rem; }
.chat-caret { display:inline-grid;place-items:center;width:28px;height:28px;font-size:1.35rem;transition:transform .18s ease; }
#chatPanel[open] .chat-caret { transform:rotate(180deg); }
.chat-unavailable { margin:8px 0;color:#d8c8ed;font-size:.86rem;line-height:1.35; }
.chat-compose { width:100%; }
.chat-panel.chat-expanded { position:fixed;inset:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom));z-index:1000;margin:0;padding:14px;background:linear-gradient(160deg,#210653,#080018 72%);overflow:auto;overscroll-behavior:contain; }
.chat-panel.chat-expanded details { min-height:100%;display:flex;flex-direction:column; }
.chat-panel.chat-expanded .chat-messages { flex:1;min-height:42vh;max-height:none; }
.chat-panel.chat-expanded .chat-compose { position:sticky;bottom:0;padding:9px 0;background:#0b0120; }
body.chat-expanded { overflow:hidden; }
.status-strip .presence-dot { background:#ff5e72;box-shadow:0 0 10px rgba(255,68,94,.78); }
.status-strip[data-state="CONNECTED"] .presence-dot,.status-strip[data-state="RECONNECTED"] .presence-dot { background:#55ff9a;box-shadow:0 0 12px rgba(53,255,139,.9); }
.status-strip[data-state="CONNECTING"] .presence-dot,.status-strip[data-state="AUTHENTICATING"] .presence-dot,.status-strip[data-state="RECONNECTING"] .presence-dot { background:#ffd052;box-shadow:0 0 11px rgba(255,208,82,.82); }
.help-dialog { width:min(92vw,560px);max-width:560px;max-height:min(88dvh,760px);padding:0;border:1px solid #d28aff;border-radius:24px;background:linear-gradient(155deg,#280866,#09011f 72%);color:#fff;overflow:hidden;box-shadow:0 0 34px rgba(189,57,255,.52); }
.help-dialog::backdrop { background:rgba(3,0,16,.82);backdrop-filter:blur(5px); }
.help-head { position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:rgba(27,5,70,.97);border-bottom:1px solid rgba(255,211,90,.55); }
.help-head h2 { margin:0;color:#ffd35a;font-size:clamp(1.25rem,5vw,1.65rem);letter-spacing:.02em; }
#helpClose { flex:0 0 auto;width:46px;min-width:46px;min-height:46px;padding:0;border-radius:50%;font-size:1.75rem;line-height:1;background:#43107b;border-color:#ffd35a; }
.help-steps { display:grid;gap:10px;padding:14px 14px 20px;overflow-y:auto;max-height:calc(min(88dvh,760px) - 77px);overscroll-behavior:contain; }
.help-steps article { display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:start;padding:11px;border:1px solid rgba(188,91,255,.55);border-radius:15px;background:rgba(16,5,48,.78); }
.help-steps article>span { display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#40108b;color:#ffd35a;font-size:1.35rem; }
.help-steps b { display:block;color:#fff;font-size:1rem;line-height:1.25;overflow-wrap:anywhere; }
.help-steps p { margin:4px 0 0;color:#dfd1f5;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere; }
.help-dialog #helpCloseAction { display:none; }
@media (max-width:560px) {
  .speaker-card { min-height:174px;padding-right:58px; }
  .speaker-language { max-width:62vw; }
  .chat-panel { padding:11px; }
  .chat-compose { grid-template-columns:45px minmax(0,1fr) 49px; }
  .chat-compose .paperclip { width:45px; }
  .chat-compose .send-button { width:49px; }
  .help-dialog { width:calc(100vw - 14px);max-height:calc(100dvh - 18px); }
  .help-steps { max-height:calc(100dvh - 93px); }
}

/* Premium 22nd-century refinement. Existing IDs and behavior remain unchanged. */
.reader-brand-header { position:relative;height:112px;overflow:hidden;background:#100629;border-bottom:1px solid rgba(254,220,98,.72);box-shadow:0 10px 26px rgba(3,0,14,.62); }
.reader-brand-header > img { width:100%;height:100%;display:block;object-fit:cover;object-position:76% 32%;transform:scaleX(-1);filter:saturate(1.1) contrast(1.07) brightness(.9); }
.reader-brand-shade { position:absolute;inset:0;background:radial-gradient(circle at 12% 35%,rgba(72,52,255,.15),transparent 38%),linear-gradient(0deg,rgba(6,4,45,.34),transparent 70%); }
.reader-brand-copy { position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:12px 12px 10px 45%; }
.reader-brand-copy strong { color:#fedc62;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,5.7vw,1.72rem);line-height:1.05;white-space:nowrap;text-shadow:0 2px 3px #210d00,0 0 14px rgba(250,189,63,.38); }
.reader-brand-copy small { max-width:300px;margin-top:5px;color:#f0e8ff;font-size:.72rem;line-height:1.25;text-shadow:0 2px 8px #06042d; }
.call-shell { padding-top:0; }
.reader-home-nav { padding:10px 12px 0; }
.reader-home-button { display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 13px;border:1px solid #9c68ef;border-radius:14px;background:#18083fe8;color:#eee7ff;font-weight:800;box-shadow:inset 0 0 13px rgba(119,69,206,.28),0 5px 16px rgba(3,0,9,.66); }
.reader-home-button svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.call-topbar { margin-top:8px; }
.back-button svg,.round-icon svg { width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.call-start .round-icon svg,.call-end .round-icon svg { fill:currentColor;stroke:#fff7d2;stroke-width:1.25; }
.call-topbar h1 { font-size:clamp(1.28rem,5.5vw,1.72rem); }
.participant-indicator { margin-block:9px 12px;padding:6px 14px;background:rgba(15,7,50,.9);box-shadow:0 5px 14px rgba(0,0,0,.28); }
.hero-stage { min-height:178px;margin:3px 0 -3px; }
.hero-stage::before { width:min(57vw,320px); }
.hero-orbit { width:min(64vw,360px);box-shadow:0 0 12px rgba(250,189,63,.78); }
.hero-stage img { width:min(50vw,280px);border-radius:27%;filter:drop-shadow(0 0 14px rgba(142,72,255,.58)); }
.call-actions { max-width:570px;gap:10px;margin-top:0; }
.round-action .round-icon { width:clamp(68px,18vw,94px);border-width:1.5px;box-shadow:0 7px 20px rgba(0,0,0,.3),inset 0 0 18px rgba(255,255,255,.14); }
.voice-start .round-icon { width:clamp(78px,20vw,104px); }
.round-action b { font-size:clamp(.86rem,3.7vw,.98rem);line-height:1.18; }
.speaker-card { min-height:215px;padding:15px 65px 15px 15px; }
.speaker-card h2 { font-size:clamp(1rem,4.4vw,1.18rem);line-height:1.18; }
.speaker-language { display:block;margin-top:3px;color:#cfb2fa;font-size:.76rem;font-weight:700; }
.speaker-card > div b { font-size:.8rem; }
.speaker-card p { font-size:clamp(1.05rem,4.8vw,1.22rem);line-height:1.42; }
.audio-wave { width:76px;height:34px;display:flex;align-items:center;justify-content:flex-end;gap:3px;color:currentColor; }
.audio-wave i { width:4px;height:7px;border-radius:999px;background:currentColor;opacity:.48;transform:scaleY(.62);transform-origin:center; }
.audio-wave i:nth-child(2),.audio-wave i:nth-child(7) { height:13px; }
.audio-wave i:nth-child(3),.audio-wave i:nth-child(6) { height:21px; }
.audio-wave i:nth-child(4),.audio-wave i:nth-child(5) { height:29px; }
.audio-wave.is-active i { opacity:1;animation:serena-wave .72s ease-in-out infinite alternate; }
.audio-wave.is-active i:nth-child(2),.audio-wave.is-active i:nth-child(6) { animation-delay:-.18s; }
.audio-wave.is-active i:nth-child(3),.audio-wave.is-active i:nth-child(7) { animation-delay:-.34s; }
.audio-wave.is-active i:nth-child(4),.audio-wave.is-active i:nth-child(8) { animation-delay:-.5s; }
@keyframes serena-wave { from { transform:scaleY(.42);opacity:.58; } to { transform:scaleY(1);opacity:1; } }
.quick-actions button b { font-size:.86rem;line-height:1.18; }
.status-strip { font-size:.86rem; }
.chat-panel summary,.advanced-panel summary { font-size:1rem; }
.chat-compose textarea { font-size:1rem; }
.help-dialog { font-size:1rem; }

@media (prefers-reduced-motion:reduce) {
  .audio-wave.is-active i { animation:none;transform:scaleY(1); }
}
@media (max-width:412px) {
  .reader-brand-header { height:104px; }
  .reader-brand-copy { padding-left:43%; }
  .reader-brand-copy strong { font-size:1.28rem; }
  .call-shell { padding-top:11px; }
  .hero-stage { min-height:166px; }
  .hero-stage img { width:min(49vw,230px); }
  .call-actions { gap:6px; }
  .round-action .round-icon { width:clamp(64px,18vw,76px); }
  .voice-start .round-icon { width:clamp(76px,21vw,84px); }
  .speaker-card { padding-right:59px; }
  .speaker-play { right:10px;width:44px;min-height:44px; }
  .audio-wave { width:66px;gap:2px; }
}
@media (max-width:340px) {
  .reader-brand-copy { padding-left:41%;padding-right:7px; }
  .reader-brand-copy strong { font-size:1.13rem; }
  .hero-languages { grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr); }
  .swap-button { width:42px;height:42px; }
  .round-action b { font-size:.76rem; }
  .quick-actions { gap:5px; }
  .quick-actions button b { font-size:.68rem; }
}

/* Reference-locked A32/A53 composition: same controls, tighter approved layout. */
.reader-brand-header { height:96px; }
.call-shell { width:min(942px,calc(100% - 12px));padding-top:9px; }
.call-topbar { grid-template-columns:48px minmax(0,1fr) 48px;gap:7px; }
.call-topbar h1 { font-size:clamp(1.34rem,5.75vw,2.5rem);line-height:1.02; }
.icon-button { width:48px;min-height:48px;border-radius:15px; }
.participant-indicator { margin:7px auto 9px;padding:5px 13px; }
.hero-languages { margin-top:0;gap:7px;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); }
.hero-languages label { padding:7px 8px;border-radius:16px; }
.hero-languages label > span { font-size:.78rem; }
.hero-languages select { min-height:42px;padding:6px 25px 6px 7px;font-size:.89rem; }
.swap-button { width:50px;height:50px;font-size:1.7rem; }
.hero-stage { min-height:148px;margin:0; }
.hero-stage::before { width:min(49vw,275px); }
.hero-orbit { width:min(56vw,315px); }
.hero-stage img { width:min(45vw,252px);border-radius:50%;clip-path:circle(48% at 50% 50%); }
.call-actions { max-width:540px;gap:8px;margin:-2px auto 8px; }
.round-action { opacity:1!important; }
.round-action .round-icon { width:clamp(62px,17vw,86px);border-width:2px;box-shadow:0 5px 12px rgba(0,0,0,.36),inset 0 0 9px rgba(255,255,255,.14); }
.voice-start .round-icon { width:clamp(68px,18.5vw,94px); }
.call-start .round-icon { background:linear-gradient(145deg,#1ff45a 0%,#00b638 56%,#007022 100%);color:#fff;box-shadow:0 0 13px rgba(43,255,99,.72),inset 0 0 8px rgba(255,255,255,.23); }
.voice-start .round-icon { background:linear-gradient(145deg,#ffd052 0%,#8a28f1 55%,#4a0b9e 100%);color:#fff;box-shadow:0 0 13px rgba(255,189,67,.76),inset 0 0 8px rgba(255,255,255,.2); }
.call-end .round-icon { background:linear-gradient(145deg,#ff3150 0%,#d60035 55%,#77001d 100%);color:#fff;box-shadow:0 0 13px rgba(255,45,78,.72),inset 0 0 8px rgba(255,255,255,.2); }
.call-end .round-icon svg { width:82%;height:82%; }
.round-action:disabled .round-icon { opacity:.86;filter:none; }
.round-action b { max-width:100%;font-size:clamp(.78rem,3.2vw,.96rem);line-height:1.08; }
.voice-status { margin-bottom:6px;font-size:.78rem; }
.speaker-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.speaker-card { min-width:0;min-height:168px;padding:10px 39px 10px 10px;border-radius:18px;gap:6px; }
.speaker-card header { min-width:0;align-items:flex-start; }
.speaker-card h2 { font-size:clamp(.8rem,3.65vw,1.08rem);line-height:1.08; }
.speaker-language { font-size:.65rem;white-space:normal; }
.speaker-card > div { min-width:0;padding:7px;border-radius:10px; }
.speaker-card > div b { font-size:.67rem; }
.speaker-card p { font-size:clamp(.82rem,3.5vw,1rem);line-height:1.22; }
.speaker-play { right:6px;width:34px;min-height:34px;padding:0;font-size:.9rem; }
.audio-wave { position:absolute;right:7px;top:9px;width:44px;height:25px;gap:2px; }
.audio-wave i { width:3px; }
.quick-actions { grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:9px 0 7px; }
.quick-actions button { min-height:68px;padding:6px 3px;border-radius:14px; }
.quick-actions button span { font-size:1.18rem; }
.quick-actions button b { font-size:clamp(.61rem,2.6vw,.78rem);line-height:1.08; }
.status-strip { min-height:45px;padding:8px 11px; }
.chat-panel { margin-top:9px;padding:12px; }
.chat-panel summary { font-size:.91rem; }
.chat-messages { min-height:76px;max-height:190px;margin:7px 0; }
.chat-compose textarea { font-size:.9rem; }
.advanced-panel { margin-top:8px; }

@media (max-width:560px) {
  .reader-brand-header { height:92px; }
  .reader-brand-copy strong { font-size:1.24rem; }
  .call-shell { width:calc(100% - 8px);padding-top:7px; }
  .call-topbar { grid-template-columns:43px minmax(0,1fr) 43px; }
  .icon-button { width:43px;min-height:43px; }
  .hero-languages { grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:5px; }
  .hero-languages label { padding:6px; }
  .hero-languages select { font-size:.76rem;padding-inline:5px 21px; }
  .swap-button { width:44px;height:44px; }
  .hero-stage { min-height:142px; }
  .hero-stage img { width:min(44vw,220px); }
  .round-action .round-icon { width:clamp(60px,16.5vw,72px); }
  .voice-start .round-icon { width:clamp(66px,18vw,78px); }
  .speaker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .speaker-card { min-height:164px;padding-right:38px; }
  .quick-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .status-strip { grid-template-columns:auto minmax(0,1fr) auto auto; }
  .status-strip span:last-child { display:inline; }
  .attachment-menu { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Two reference-led holographic voice strips. The existing wave IDs and
   lifecycle remain the only activity source; this section is presentation-only. */
.voice-wave-deck {
  display:grid;
  gap:10px;
  width:100%;
  margin:9px 0 10px;
}
.voice-wave-strip {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(118px,30%) minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:96px;
  padding:10px 14px 10px 11px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:28px;
  background:
    linear-gradient(112deg,rgba(31,7,72,.97),rgba(8,2,34,.97) 54%,rgba(31,5,73,.96)) padding-box,
    linear-gradient(100deg,#ffd360 0%,#9b41ff 22%,#6d72ff 48%,#f254ff 72%,#ffd86d 100%) border-box;
  box-shadow:
    inset 0 0 24px rgba(129,49,255,.2),
    0 0 0 1px rgba(213,167,255,.28),
    0 0 17px rgba(150,48,255,.38),
    0 6px 20px rgba(2,0,18,.62);
}
.voice-wave-strip::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.58;
  background:
    radial-gradient(circle at 10% 25%,rgba(255,220,112,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 24% 73%,rgba(198,92,255,.82) 0 1px,transparent 2px),
    radial-gradient(circle at 49% 18%,rgba(255,189,69,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 71% 74%,rgba(156,98,255,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 33%,rgba(255,216,100,.76) 0 1px,transparent 2px);
}
.voice-wave-strip::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:5%;right:5%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#ffd76d 12%,#a344ff 35%,#ffe07c 55%,#b248ff 82%,transparent);
  box-shadow:0 0 9px #a846ff,0 0 15px rgba(255,202,81,.72);
}
.voice-wave-identity {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.voice-wave-identity > span:last-child { min-width:0; }
.voice-wave-identity strong {
  display:block;
  overflow:hidden;
  color:#f1ddff;
  font-size:clamp(.92rem,3.9vw,1.18rem);
  line-height:1.12;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 0 10px rgba(195,104,255,.72);
}
.voice-wave-identity small {
  display:block;
  margin-top:4px;
  color:#c9b2e9;
  font-size:.67rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.voice-wave-avatar {
  position:relative;
  flex:0 0 48px;
  width:48px;
  height:48px;
  border:1px solid #dca2ff;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#a95dff 0 5%,#4c149a 43%,#14042f 72%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.2),0 0 9px #9137ff,0 0 17px rgba(255,194,74,.32);
}
.voice-wave-remote .voice-wave-avatar {
  border-color:#ffd577;
  background:radial-gradient(circle at 50% 38%,#ffc751 0 5%,#7d3510 43%,#250824 72%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.18),0 0 9px #ffad33,0 0 17px rgba(180,47,255,.32);
}
.voice-wave-avatar::before,
.voice-wave-avatar::after {
  content:"";
  position:absolute;
  left:50%;
  translate:-50% 0;
  background:#fff3ff;
  box-shadow:0 0 7px currentColor;
}
.voice-wave-avatar::before { top:10px;width:13px;height:13px;border-radius:50%; }
.voice-wave-avatar::after { bottom:9px;width:25px;height:15px;border-radius:50% 50% 34% 34%; }
.voice-wave-remote .voice-wave-avatar::before,
.voice-wave-remote .voice-wave-avatar::after { background:#fff1b8; }
.voice-wave-strip .audio-wave {
  position:relative;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  width:100%;
  height:66px;
  color:#d964ff;
  filter:drop-shadow(0 0 5px rgba(173,68,255,.86));
}
.voice-wave-local .audio-wave { color:#bb62ff; }
.voice-wave-remote .audio-wave { color:#ffbd4d; }
.voice-wave-strip .audio-wave::before,
.voice-wave-strip .audio-wave::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;right:0;top:50%;
  height:2px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#a43fff 16%,#ffce58 48%,#a83fff 78%,transparent);
  box-shadow:0 0 8px #a33cff,0 0 12px rgba(255,188,58,.7);
  transform:translateY(-50%) rotate(-2deg);
}
.voice-wave-strip .audio-wave::after {
  opacity:.66;
  transform:translateY(-50%) rotate(2deg);
}
.voice-wave-strip .audio-wave i {
  flex:1 1 3px;
  width:auto;
  min-width:2px;
  max-width:5px;
  height:24%;
  border-radius:999px;
  opacity:.52;
  background:linear-gradient(180deg,#fff9dd 0%,currentColor 35%,#6b2cff 100%);
  box-shadow:0 0 5px currentColor;
  transform:scaleY(.55);
  transform-origin:center;
}
.voice-wave-strip .audio-wave i:nth-child(3n+1) { height:38%; }
.voice-wave-strip .audio-wave i:nth-child(4n+2) { height:64%; }
.voice-wave-strip .audio-wave i:nth-child(5n+3) { height:88%; }
.voice-wave-strip .audio-wave i:nth-child(6n+4) { height:52%; }
.voice-wave-strip .audio-wave.is-active i {
  opacity:.96;
  animation:serena-holographic-wave .68s ease-in-out infinite alternate;
}
.voice-wave-strip .audio-wave.is-active i:nth-child(3n+1) { animation-delay:-.13s; }
.voice-wave-strip .audio-wave.is-active i:nth-child(3n+2) { animation-delay:-.31s; }
.voice-wave-strip .audio-wave.is-active i:nth-child(3n) { animation-delay:-.49s; }
@keyframes serena-holographic-wave {
  from { transform:scaleY(.38);filter:brightness(.86); }
  to { transform:scaleY(1.08);filter:brightness(1.3); }
}
@media (prefers-reduced-motion:reduce) {
  .voice-wave-strip .audio-wave.is-active i { animation:none;transform:scaleY(.9); }
}
@media (max-width:560px) {
  .voice-wave-deck { gap:8px;margin-block:7px 9px; }
  .voice-wave-strip { grid-template-columns:minmax(102px,34%) minmax(0,1fr);min-height:82px;padding:8px 10px 8px 8px;border-radius:23px; }
  .voice-wave-avatar { flex-basis:40px;width:40px;height:40px; }
  .voice-wave-avatar::before { top:8px;width:11px;height:11px; }
  .voice-wave-avatar::after { bottom:7px;width:21px;height:13px; }
  .voice-wave-identity { gap:7px; }
  .voice-wave-identity strong { font-size:clamp(.82rem,3.8vw,1rem); }
  .voice-wave-identity small { font-size:.58rem; }
  .voice-wave-strip .audio-wave { height:56px;gap:1.5px; }
}
@media (max-width:350px) {
  .voice-wave-strip { grid-template-columns:92px minmax(0,1fr);padding-inline:7px; }
  .voice-wave-avatar { display:none; }
  .voice-wave-strip .audio-wave i:nth-child(even) { display:none; }
}