.call-page{position:relative;min-height:min(640px,calc(100vh - 180px));display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.call-visual{text-align:center;display:grid;justify-items:center;gap:8px}.call-avatar{width:150px;height:150px;border-radius:50%;overflow:hidden;background:var(--accent-deep);color:var(--accent);display:grid;place-items:center;font-size:42px;font-weight:800;box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 28%,transparent)}.call-avatar img{width:100%;height:100%;object-fit:cover}.call-visual h2{margin:12px 0 0;font-size:28px}.call-duration{margin:0;color:var(--accent-strong);font-weight:800;font-variant-numeric:tabular-nums}.call-state{margin:0;color:var(--muted)}.call-controls{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px}.call-control{min-width:84px;height:66px;padding:9px 12px;border-radius:18px;background:var(--surface-soft);color:var(--ink);display:grid;place-items:center;gap:3px;font-size:12px;font-weight:750;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease,opacity 180ms ease}.call-control:hover{background:var(--accent-wash);transform:translateY(-2px)}.call-control.is-active{background:var(--line);color:var(--muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 35%,transparent)}.call-control.is-active img{opacity:.58;filter:grayscale(1)}.call-control img{width:25px;height:25px;object-fit:contain;transition:opacity 180ms ease,filter 180ms ease}.call-control span:first-child{font-size:22px;color:var(--accent-strong)}.call-control.end-call{background:var(--danger);color:#fff;min-width:92px}.active-call-pill{position:fixed;right:24px;top:18px;z-index:40;display:flex;align-items:center;gap:9px;min-height:52px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);animation:call-pill-in 260ms cubic-bezier(.22,1,.36,1) both}.active-call-pill:hover{background:var(--surface-soft)}.active-call-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--accent-deep);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}.active-call-avatar img{width:100%;height:100%;object-fit:cover}.active-call-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.active-call-time{color:var(--muted);font-variant-numeric:tabular-nums}.call-pill-mute,.call-pill-end{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-deep);font-size:0}.call-pill-mute img{width:17px;height:17px}.call-pill-end{width:auto;padding:0 12px;border-radius:999px;background:var(--danger);color:#fff;font-size:12px;font-weight:800}.call-message-pill{position:fixed;top:18px;left:50%;z-index:45;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);animation:call-message-in 360ms cubic-bezier(.22,1,.36,1) both}.call-message-pill span:last-child{display:grid;text-align:left;line-height:1.15}.call-message-pill small{color:var(--muted);margin-top:3px}.call-video{position:absolute;border-radius:16px;background:#160d11;object-fit:contain;box-shadow:var(--shadow);transition:inset 260ms ease,width 260ms ease,height 260ms ease,opacity 180ms ease}.call-video.remote{inset:18px;width:calc(100% - 36px);height:calc(100% - 170px);z-index:0}.call-video.local{right:22px;top:22px;width:180px;height:120px;z-index:2}.call-video.local.is-screen-share{inset:18px;width:calc(100% - 36px);height:calc(100% - 170px);z-index:1}.call-video.local.is-camera-preview{right:22px;top:22px;width:180px;height:120px}.call-page:has(.call-video.remote:not([hidden])) .call-visual{position:relative;z-index:3;background:color-mix(in srgb,var(--surface) 82%,transparent);padding:20px;border-radius:20px}.call-page:has(.call-video.remote:not([hidden])){background:#160d11}@keyframes call-pill-in{from{opacity:0;transform:translate(12px,-8px) scale(.96)}to{opacity:1;transform:none}}@keyframes call-message-in{from{opacity:0;transform:translate(-50%,-22px) scale(.82)}70%{transform:translate(-50%,3px) scale(1.02)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:800px){.call-page{min-height:calc(100vh - 170px)}.call-avatar{width:116px;height:116px}.call-controls{bottom:18px;max-width:calc(100% - 24px);width:100%;gap:6px}.call-control{min-width:68px;height:58px;padding:7px 6px}.active-call-pill{right:10px;top:10px;max-width:calc(100% - 20px)}.active-call-name{max-width:90px}.call-message-pill{top:10px;max-width:calc(100% - 20px)}}
.call-pill-end{width:auto;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:5px;font-size:12px}.call-pill-end img,.end-call img{width:17px;height:17px;object-fit:contain;filter:brightness(0) invert(1)}