/* Calls-only directory and full-viewport media stage. */
.circles-page { padding-top: 42px; }
.calls-heading { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-bottom:35px; }
.calls-heading .kicker { margin:0 0 12px; }
.calls-heading h1 { font-size:clamp(40px,4.6vw,76px); line-height:1.05; letter-spacing:-.055em; display:flex; gap:18px; align-items:center; }
.calls-heading h1>span { color:var(--coral); font-size:.65em; transform:rotate(12deg); }
.calls-heading p:last-child { color:var(--muted); margin:15px 0 0; }
.call-primary { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:48px; padding:12px 21px; background:var(--ink); border-radius:14px; color:#fffaf4; font-weight:800; font-size:14px; white-space:nowrap; }
.call-primary:hover { background:var(--blue); }
.call-primary svg { width:19px; height:19px; }
.calls-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-block:1px solid var(--line); margin-bottom:28px; }
.calls-toolbar label { display:flex; align-items:center; gap:12px; width:min(430px,70%); }
.calls-toolbar svg { width:19px; height:19px; }
.calls-toolbar input { background:none; border:0; width:100%; min-width:0; padding:8px; color:var(--ink); font:inherit; }
#calls-count { font-size:13px; color:var(--muted); }
#calls-notice:empty { display:none; }
#calls-notice { padding:15px; border:1px solid var(--line); border-radius:12px; }
.calls-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-bottom:35px; }
.call-color-cobalt { --cover-ink:#fff; --cover-soft:#dce3ff; background:linear-gradient(140deg,#2038db,#526fff); }
.call-color-coral { --cover-ink:#301b1a; --cover-soft:#583026; background:linear-gradient(135deg,#ffad89,#ff6867); }
.call-color-lilac { --cover-ink:#2d204b; --cover-soft:#4f3c78; background:linear-gradient(145deg,#e4cdff,#ad9cf5); }
.call-color-lime { --cover-ink:#1e3524; --cover-soft:#365334; background:linear-gradient(140deg,#e3f4a0,#b9e857); }
.call-color-midnight { --cover-ink:#fffaf4; --cover-soft:#c7c6df; background:linear-gradient(140deg,#202437,#4b466d); }
.call-color-sunset { --cover-ink:#37204c; --cover-soft:#583a67; background:linear-gradient(145deg,#f9c9ff,#ffada4 62%,#ffde91); }
.call-card { position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; min-height:330px; overflow:hidden; border-radius:25px; padding:25px; text-align:left; color:var(--cover-ink); transition:transform .25s,box-shadow .25s; }
.call-card:hover:not(:disabled) { transform:translateY(-5px); box-shadow:0 15px 30px #1e264326; }
.call-card:disabled { cursor:default; }
.call-card-photo,.call-draft>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.has-photo { --cover-ink:#fff; --cover-soft:#fff; }
.has-photo:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#080c1844,#080c1888 55%,#080c18cc); z-index:-1; }
.call-card-top { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:800; gap:10px; }
.call-card-top>span { display:flex; align-items:center; gap:5px; }
.call-card-top>span:first-child { padding:5px 9px; border:1px solid currentColor; border-radius:7px; letter-spacing:.06em; }
.call-card svg { width:17px; height:17px; }
.call-card-copy { margin:43px 0 26px; }
.call-card h2 { font-size:clamp(26px,2.3vw,39px); line-height:1.06; letter-spacing:-.04em; overflow-wrap:anywhere; }
.call-card p { font-size:14px; line-height:1.55; margin:13px 0 0; color:var(--cover-soft); overflow-wrap:anywhere; }
.call-card>footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.call-card>footer>span { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; }
.call-card-faces { display:flex; padding-left:5px; }
.call-avatar { display:block; width:38px; height:38px; object-fit:contain; }
.call-card-faces .call-avatar { margin-left:-5px; filter:drop-shadow(0 4px 6px #0002); }
.call-card-art { position:absolute; inset:0; z-index:-1; overflow:hidden; opacity:.15; }
.call-card-art i { position:absolute; width:230px; height:230px; border:48px solid var(--cover-ink); border-radius:50%; right:-100px; top:40px; transform:rotate(-25deg); }
.call-card-art i:nth-child(2) { width:180px;height:180px;top:auto;right:60%;bottom:-120px; }
.calls-empty { grid-column:1/-1; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; border:1px dashed #c9c3ba; border-radius:25px; background:#fffaf49c; text-align:center; padding:35px; }
.calls-empty>svg { width:46px; height:46px; color:var(--blue); }
.calls-empty h2 { font-size:28px; line-height:1.15; }
.calls-empty p { margin:0 0 7px; color:var(--muted); }
.call-builder { border:0; padding:0; border-radius:26px; background:#fffaf4; color:var(--ink); width:min(710px,calc(100vw - 24px)); max-height:calc(100dvh - 30px); }
.call-builder::backdrop { background:#15142180; backdrop-filter:blur(7px); }
.call-builder header,.call-builder footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 27px; background:#fffaf4; }
.call-builder header { border-bottom:1px solid var(--line); }
.call-builder header span { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.1em; }
.call-builder h2 { font-size:36px; line-height:1.1; margin-top:4px; }
.call-builder header button { display:grid; place-items:center; width:40px; height:40px; flex:none; }
.call-builder header svg { width:22px; height:22px; }
.call-builder-body { padding:22px 27px; }
.call-builder footer { position:sticky; bottom:0; border-top:1px solid var(--line); z-index:4; }
.call-builder footer>button:first-child { min-height:44px; padding:10px 14px; }
.call-draft { position:relative; isolation:isolate; overflow:hidden; min-height:180px; border-radius:19px; padding:24px; color:var(--cover-ink); margin-bottom:23px; }
.call-draft>div { position:relative; z-index:1; }
.call-draft span { font-size:11px; font-weight:800; letter-spacing:.07em; }
.call-draft strong { display:block; font:700 32px/1.1 var(--display); margin:18px 0 10px; overflow-wrap:anywhere; }
.call-draft p { font-size:13px; color:var(--cover-soft); margin:0; overflow-wrap:anywhere; }
.call-field { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; font-weight:800; margin-bottom:17px; }
.call-field small { font-weight:400; color:var(--muted); }
.call-field input,.call-field textarea,.call-field select { display:block; flex-basis:100%; min-width:0; width:100%; padding:13px 14px; border:1px solid #d7d1c8; border-radius:12px; background:#fffefb; color:var(--ink); font:500 14px/1.4 var(--body); }
.call-field textarea { resize:vertical; }
.call-appearance { border:0; padding:0; margin:20px 0; min-width:0; }
.call-appearance legend { font-weight:800; font-size:13px; margin-bottom:12px; }
.call-swatches { display:flex; gap:12px; margin-bottom:15px; }
.call-swatch { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; cursor:pointer; flex:none; }
.call-swatch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.call-swatch span { color:var(--cover-ink); opacity:0; pointer-events:none; }
.call-swatch svg { width:21px; height:21px; }
.call-swatch:has(input:checked) { outline:2px solid var(--ink); outline-offset:3px; }
.call-swatch:has(input:checked) span { opacity:1; }
.call-swatch:focus-within { outline:3px solid var(--blue); outline-offset:3px; }
.call-photo-actions { display:flex; gap:15px; align-items:center; margin-bottom:8px; }
.call-photo-button { position:relative; display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; font-weight:700; cursor:pointer; font-size:13px; }
.call-photo-button input { position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; }
.call-photo-button svg { width:19px; height:19px; }
.call-photo-button:focus-within { outline:3px solid var(--blue); }
.call-photo-actions button { font-size:13px; text-decoration:underline; }
.call-appearance>small,.call-hint { color:var(--muted); font-size:12px; line-height:1.6; }
.call-options { display:grid; grid-template-columns:1.5fr 1fr; gap:15px; }
.call-error { color:#ad2929; font-size:13px; margin:0; }
.call-error:empty { display:none; }
/* A call replaces the entire app surface, not a small card or browser fullscreen. */
body.in-call { overflow:hidden; }
.call-stage[open] { position:fixed; inset:0; margin:0; padding:0; max-width:none; max-height:none; width:100vw; height:100dvh; display:flex; flex-direction:column; border:0; border-radius:0; color:#faf7f1; background:radial-gradient(ellipse at 15% 0,#39324c 0,transparent 50%),#191920; }
.call-stage::backdrop { background:#191920; }
.call-stage-header { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:26px 35px; border-bottom:1px solid #ffffff14; }
.call-stage-heading { min-width:0; }
.call-stage-heading>span { font-size:11px; font-weight:800; letter-spacing:.13em; color:#c0b7ef; }
.call-stage-heading h2 { font-size:28px; line-height:1.15; margin-top:7px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.call-stage-header>div:last-child { display:flex; align-items:center; gap:20px; flex:none; }
#call-stage-count { font-size:13px; color:#c6c3d2; }
#call-invite { display:flex; align-items:center; gap:8px; border:1px solid #ffffff30; border-radius:12px; padding:11px 16px; font-size:13px; font-weight:800; }
.call-stage svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
#call-stage-notice { padding:9px 30px 0; min-height:30px; color:#c7c2d8; font-size:13px; text-align:center; transition:opacity .18s ease; }
#call-stage-notice:empty { opacity:0; pointer-events:none; }
.call-tiles { flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:18px; padding:22px 35px; align-content:center; }
.call-tiles[data-count="1"] { grid-template-columns:minmax(0,700px); justify-content:center; }
.call-tiles[data-count="2"],.call-tiles[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.call-tile { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; border-radius:23px; background:linear-gradient(140deg,#373240,#24252e); border:1px solid #ffffff15; }
.call-tile:nth-child(2n) { background:linear-gradient(145deg,#283541,#212732); }
.call-tile:nth-child(3n) { background:linear-gradient(145deg,#40312e,#2a2329); }
.call-tile .call-avatar { width:clamp(65px,13vw,170px); height:auto; max-height:65%; object-fit:contain; filter:drop-shadow(0 20px 20px #0003); }
.call-tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.call-tile.camera-on video { opacity:1; }
.call-tile video.is-self { transform:scaleX(-1); }
.call-tile footer { position:absolute; inset:auto 0 0; padding:30px 18px 17px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(transparent,#17141da8); }
.call-tile strong { font-size:14px; }
.tile-state { display:flex; align-items:center; gap:6px; flex:none; }
.tile-media-state { display:grid; place-items:center; width:32px; height:32px; border-radius:11px; background:#191920bb; border:1px solid #ffffff14; color:#c7c2d8; }
.tile-media-state[data-on="true"] { color:#d7f5b4; }
.call-stage .tile-media-state svg { width:18px; height:18px; }
.call-stage .call-state-icon { flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.call-state-icon g { transition:opacity .16s ease; }
.call-state-icon[data-muted="true"] .call-icon-on,.call-state-icon[data-muted="false"] .call-icon-off { opacity:0; }
.call-state-icon[data-muted="true"] .call-icon-off,.call-state-icon[data-muted="false"] .call-icon-on { opacity:1; }
.call-tile[data-connection="connected"] { border-color:#b9e85766; }
.call-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 25px 26px; }
.call-controls button { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-width:118px; min-height:56px; padding:13px 20px; border-radius:18px; background:#2d2d38; font-size:13px; font-weight:750; color:#eeeaf6; border:1px solid #ffffff14; box-shadow:0 10px 28px #0000001f; transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.call-controls button:hover { background:#3a3a47; transform:translateY(-2px); border-color:#ffffff24; }
.call-controls button:active { transform:translateY(0) scale(.96); }
.call-controls button[data-state="on"] { background:#f3f0ff; color:#211d32; border-color:#fff; box-shadow:0 10px 34px #8d72ff42; }
.call-controls button[data-state="on"]::after { content:""; position:absolute; right:10px; top:10px; width:7px; height:7px; border-radius:50%; background:#428454; }
.call-controls button[data-state="off"] { background:#2d2d38; color:#c7c2d8; box-shadow:none; }
.call-controls button[data-state="off"] svg { opacity:.65; }
.call-controls button:focus-visible { outline:2px solid #c7b6ff; outline-offset:4px; }
.call-controls button[aria-busy="true"] svg { animation:call-control-pulse .8s ease-in-out infinite alternate; }
#call-resume-audio { align-self:center; padding:10px 18px; background:#c7b6ff; color:#211d32; border-radius:12px; font-weight:750; }
.call-device-panel { position:absolute; right:24px; bottom:112px; width:min(360px,calc(100vw - 32px)); padding:22px; border:1px solid #ffffff24; border-radius:20px; background:#292632; color:#f3f0ff; box-shadow:0 20px 60px #0006; z-index:6; max-height:calc(100dvh - 180px); overflow:auto; }
.call-device-panel header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.call-device-panel h3 { font-size:20px; }
.call-device-panel header button { display:grid; place-items:center; padding:6px; border-radius:8px; }
.call-device-panel label { display:grid; gap:8px; font-size:13px; font-weight:700; margin-top:15px; }
.call-device-panel select { color-scheme:dark; width:100%; min-width:0; background:#36323f; border:1px solid #ffffff25; border-radius:10px; padding:12px 8px; color:#faf7f1; font:inherit; }
.call-device-panel p { color:#c7c2d8; font-size:12px; line-height:1.6; margin:16px 0 0; }
@keyframes call-control-pulse { to { opacity:.45; transform:scale(.86); } }
.call-controls .call-leave { background:#fa5e5b; color:#29191b; }
.call-controls .call-leave:hover { background:#ff8076; }
.call-invite-panel { position:absolute; right:30px; top:98px; width:min(390px,calc(100vw - 30px)); padding:22px; border:1px solid #ffffff25; border-radius:20px; background:#fdf8f0; color:#26232c; box-shadow:0 20px 60px #0006; z-index:5; }
.call-invite-panel header { display:flex; justify-content:space-between; align-items:center; }
.call-invite-panel h3 { font-size:23px; }
.call-invite-panel header button { padding:6px; }
.call-invite-panel p { font-size:13px; color:#65606b; }
.call-invite-panel label { display:grid; gap:8px; font-size:12px; font-weight:750; }
.call-invite-panel input { width:100%; padding:12px; border:1px solid #cbc4bb; background:white; color:#292533; border-radius:9px; }
.call-invite-panel .call-primary { margin-top:15px; width:100%; }
@media(min-width:1800px) { .calls-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.call-card{min-height:365px} }
@media(max-width:1200px) { .calls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.call-stage-header{padding:20px}.call-tiles{padding:18px 20px} }
@media(max-width:767px) {
 .calls-heading { flex-wrap:wrap; gap:20px; margin-bottom:25px; }.calls-heading h1{font-size:44px}.calls-heading h1>span{display:none}.calls-heading p:last-child{font-size:14px}.calls-heading>.call-primary{width:100%}
 .calls-grid{grid-template-columns:1fr;gap:17px}.call-card{min-height:330px}.call-card h2{font-size:35px}.calls-toolbar{gap:8px}.calls-toolbar input{font-size:13px}#calls-count{font-size:12px;white-space:nowrap}
 .call-builder h2{font-size:30px}.call-builder header,.call-builder footer{padding:20px}.call-builder-body{padding:20px}.call-options{grid-template-columns:1fr;gap:0}.call-swatches{gap:10px}.call-swatch{width:36px;height:36px}
 .call-stage-header{padding:15px;gap:10px}.call-stage-heading h2{font-size:21px}.call-stage-header>div:last-child{gap:8px;flex-direction:column;align-items:flex-end}#call-stage-count{font-size:11px}#call-invite{padding:7px 10px;font-size:12px}
 .call-tiles,.call-tiles[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px}.call-tiles[data-count="1"]{grid-template-columns:1fr}.call-tiles[data-count="2"]{grid-template-columns:1fr}.call-tile{border-radius:15px}.call-tile footer{padding:25px 10px 10px;flex-wrap:wrap;gap:3px}.call-tile strong{font-size:12px}.tile-state{font-size:10px}.call-tile .call-avatar{width:90px}
 .call-controls{gap:7px;padding:13px 10px max(16px,env(safe-area-inset-bottom))}.call-controls button{flex:1;min-width:0;padding:10px 4px;flex-direction:column;gap:6px;min-height:67px;border-radius:12px;font-size:10px}.call-controls svg{width:20px;height:20px}#call-stage-notice{padding:7px 14px 0;font-size:12px}.call-invite-panel{right:15px;top:100px}
}
@media(prefers-reduced-motion:reduce) {.call-card,.call-controls button,.call-state-icon g{transition:none}.call-controls button[aria-busy="true"] svg{animation:none}}
@media(max-width:359px){.call-swatches{gap:8px}.call-swatch{width:32px;height:32px}.call-builder footer{padding-inline:15px;gap:8px}.call-builder footer .call-primary{padding-inline:13px}.call-builder-body{padding-inline:17px}}