:root{color-scheme:dark;font:16px/1.45 system-ui;background:#100b20;color:#f7efff;--cyan:#72f7ee;--pink:#ff78d3;--panel:#1c1531}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at top,#302046,transparent 65%)}
main{max-width:1050px;margin:auto;padding:clamp(16px,4vw,48px)}
h1{font-size:clamp(2.4rem,7vw,4.4rem);line-height:1;margin:.2em 0}
h2,h3{margin-top:0}.eyebrow{color:var(--cyan);text-transform:uppercase;font-size:.8rem;letter-spacing:.15em}
#status,#peer,.muted{color:#cdbce5}.panel{background:var(--panel);border:1px solid #594679;border-radius:18px;padding:clamp(15px,3vw,26px);margin-bottom:16px}
label{display:grid;gap:5px;margin:12px 0}input,textarea,select,button{font:inherit;color:inherit;border:1px solid #725b97;border-radius:8px;background:#171027;padding:9px 12px;width:100%}
button,a{color:var(--cyan);cursor:pointer}button:disabled{opacity:.45;cursor:default}button{width:auto;min-height:44px}button:focus-visible,a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
summary{cursor:pointer}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0}
#hold{width:100%;padding:20px;font-weight:750;font-size:1.25rem;touch-action:none;user-select:none;border-color:var(--pink)}
#hold.recording{background:var(--pink);color:#200e28}.columns,#settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.turn{border-top:1px solid #51416b;padding:10px 0;overflow-wrap:anywhere}.turn p{margin:4px 0}.translated{color:var(--cyan);font-size:1.2em}.activity{color:var(--pink)}
#qr{display:block;background:white;padding:3px;border-radius:7px}
#invite-details{margin-bottom:12px}
#invite-details[open] summary{margin-bottom:12px}
#switch-panel .actions{margin-bottom:0}
#switch-panel p{margin:4px 0 12px}
#switch-android{display:inline-flex;align-items:center;min-height:44px}
body{padding-bottom:var(--call-dock-height,0px)}
html{scroll-padding-bottom:var(--call-dock-height,0px)}
#call-dock{position:fixed;z-index:1;inset:auto 0 0;margin:auto;width:min(100%,960px);
  background:#1c1531;border:1px solid #725b97;border-radius:16px 16px 0 0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #100b20aa}
#call-dock p{margin:0 0 2px;overflow-wrap:anywhere}
#call-dock .actions{margin:6px 0}
#languages{font-weight:700;color:var(--cyan)}
#audio-status,#call-state,#call-notice,.latest strong{font-size:.85rem}
#call-notice{color:var(--pink)}
.latest{background:#100b20;border-radius:8px;padding:5px 10px;margin:5px 0}
#latest-translation,#call-notice{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#call-dock #hold{padding:9px;min-height:50px}
#typing{display:flex;gap:6px}
@media(max-width:540px){.columns{grid-template-columns:1fr}}