/* Scoped call palette: graphite, plum, white and a red end button. */
#calldialog,.conference-dialog{--call-accent:#b99cf1;color:#faf8ff;color-scheme:dark;background:radial-gradient(ellipse at 25% 0,#4a345c99,transparent 65%),linear-gradient(150deg,#30243c,#17151d 85%);border:1px solid #ffffff20;box-shadow:0 30px 100px #0009}
#calldialog{width:min(480px,96vw);height:min(860px,96dvh);border-radius:28px;overflow:hidden;display:none;padding:24px}
#calldialog[open]{display:flex;flex-direction:column;animation:none}
#calldialog .call-person{margin:auto 0;padding:24px 0;animation:call-enter .35s ease-out}
#calldialog .call-orbit{width:230px;height:230px;margin-bottom:26px}
#calldialog .call-orbit i{border-color:#c3a5f044}
#calldialog .callavatar{width:180px;height:180px;border-radius:50%;background:linear-gradient(140deg,#785897,#44344f);color:#fff;box-shadow:0 0 0 12px #ffffff08}
#calldialog .call-state,#calldialog .call-hint,#calldialog #callduration,#calldialog .call-brand{color:#cbc3d8}
#calldialog .call-dot,#calldialog[data-phase=connected] .call-dot{background:#b99cf1;box-shadow:none}
#calldialog[data-phase=connected] .call-orbit i{border-color:#c3a5f033}
#calldialog .call-actions{gap:clamp(16px,5vw,36px);margin-top:auto;min-height:110px;padding-top:20px}
#calldialog .call-control{border-radius:50%;width:64px;height:64px;flex:0 0 64px;background:#ffffff22;color:#fff;border:0;box-shadow:none}
#calldialog .call-control span{top:76px;color:#faf8ff}
#calldialog .call-accept{background:#7957a6;color:#fff;box-shadow:none}
#calldialog .call-end{background:#ed3852;box-shadow:none}
#calldialog .call-mute[aria-pressed=true]{background:#faf8ff;color:#39284c;border:0}
#calldialog .call-sound{background:#ffffff20;color:#fff;border-color:#ffffff30}
.conference-dialog{position:fixed;inset:0;width:min(1040px,98vw);height:94dvh;max-height:94dvh;padding:0;overflow:hidden;border-radius:28px}
.conference-dialog::backdrop,#calldialog::backdrop{background:#100c17df;backdrop-filter:blur(14px)}
.conference-dialog>h2,.conference-dialog>p{position:absolute;z-index:3;left:0;right:0;margin:0;padding:12px 18px;pointer-events:none;color:#faf8ff}
.conference-dialog>h2{top:0;padding-top:32px;font-size:28px;font-weight:500;text-shadow:0 1px 14px #000;background:linear-gradient(#0009,transparent)}
.conference-dialog>p:not(.hint){top:78px;font-size:14px;text-shadow:0 1px 8px #000}
.conference-dialog>.hint{bottom:145px;font-size:12px;color:#e5dced;background:#19131b88}
.conference-dialog>.hint:empty{display:none}
.conference-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:125px 12px 160px;overflow:auto}
.conference-person{position:relative;padding:0;border:0;border-radius:18px;min-height:210px;background:#ffffff09;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
.conference-person h3{color:#faf8ff;position:absolute;z-index:2;bottom:4px;left:0;right:0;margin:0;padding:14px;background:linear-gradient(transparent,#0009)}
.conference-person video{width:100%;height:100%;position:absolute;inset:0;border-radius:0;object-fit:contain;background:transparent}
.conference-avatar,.avatar.conference-avatar{width:150px;height:150px;min-width:150px;border-radius:50%;background:linear-gradient(140deg,#785897,#44344f);box-shadow:0 0 0 15px #ffffff08;color:#fff;font-size:52px}
.conference-dialog[data-layout=personal] .conference-grid{display:block;padding:0;overflow:hidden}
.conference-dialog[data-layout=personal] .conference-person{position:absolute;inset:0;min-height:0;border-radius:0;background:transparent}
.conference-dialog[data-layout=personal] .conference-person h3{bottom:32%;font-size:28px;background:none;text-align:center}
.conference-dialog[data-layout=personal] .conference-person[data-video=true] h3{display:none}
.conference-dialog[data-layout=personal] .conference-person[data-local=true]:has(~.conference-person){inset:auto 18px 160px auto;width:106px;height:178px;border-radius:16px;z-index:2;box-shadow:0 4px 25px #0005;background:#2c2334}
.conference-dialog[data-layout=personal] .conference-person[data-local=true][data-video=false]:has(~.conference-person){display:none}
.conference-dialog[data-layout=personal] .conference-person[data-local=true]:has(~.conference-person) h3{display:none}
.conference-actions{position:absolute;z-index:4;bottom:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-evenly;flex-wrap:nowrap;gap:8px;padding:28px 12px 45px;background:linear-gradient(transparent,#000b)}
.conference-actions button{position:relative;border:0;border-radius:50%;width:64px;height:64px;min-height:64px;flex:0 0 64px;padding:0;margin:0;background:#ffffff26;box-shadow:none;color:#fff;display:flex;align-items:center;justify-content:center;overflow:visible;transition:background .25s,transform .25s}
.conference-actions button svg{width:27px;height:27px}
.conference-actions button span{position:absolute;top:76px;left:50%;transform:translateX(-50%);font-size:11px;color:#faf8ff;white-space:nowrap}
.conference-actions button[aria-pressed=true]{background:#faf8ff;color:#39284c}
.conference-actions button:disabled{opacity:.35}
.conference-actions button.danger{background:#ed3852;color:#fff}
.conference-actions button:active,#calldialog .call-control:active{transform:scale(.93)}
.conference-dialog>button{position:absolute;z-index:5;right:14px;top:110px;width:auto;background:#ffffff25;color:#fff;border:0;border-radius:24px;font-size:12px}
@media(max-width:600px){#calldialog,.conference-dialog{width:100%;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;margin:0}#calldialog{padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}.conference-dialog>h2{padding-top:calc(28px + env(safe-area-inset-top))}.conference-dialog>p:not(.hint){top:calc(74px + env(safe-area-inset-top))}.conference-actions{padding-bottom:calc(45px + env(safe-area-inset-bottom))}.conference-dialog[data-layout=personal] .conference-person[data-local=true]:has(~.conference-person){bottom:calc(160px + env(safe-area-inset-bottom))}.conference-grid{padding-top:120px}.conference-person{min-height:180px}}
@media(max-width:360px){.conference-actions button,#calldialog .call-control{width:56px;height:56px;min-height:56px;flex-basis:56px}.conference-actions button span{top:66px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#calldialog *, .conference-dialog *{animation:none!important;transition:none!important}}

/* Incoming calls: portrait/profile above, only accept and decline below. */
#calldialog[data-phase=incoming] .call-person{margin:0;padding-top:10dvh}
#calldialog[data-phase=incoming] .call-actions{justify-content:space-around;gap:40px;padding-bottom:16px}
#calldialog[data-phase=incoming] .call-accept,.conference-dialog[data-phase=incoming] .conference-actions button:first-child{background:#32c747;color:#fff;width:76px;height:76px;min-height:76px;flex-basis:76px}
#calldialog[data-phase=incoming] .call-control span,.conference-dialog[data-phase=incoming] .conference-actions button:first-child span{top:88px;font-size:12px}
#calldialog[data-phase=incoming] .call-end{width:76px;height:76px;flex-basis:76px}
.conference-dialog[data-phase=incoming] .conference-grid{padding:0;display:block;overflow:hidden}
.conference-ringing-avatar{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:180px;height:180px;min-width:180px;border-radius:50%;overflow:hidden;background:#69507f;box-shadow:0 0 0 12px #ffffff08,0 0 0 24px #ffffff04;font-size:52px;color:white;display:grid;place-items:center}
.conference-dialog[data-phase=incoming]>h2{top:calc(18% + 206px);padding:0 20px;font-size:30px;background:none}
.conference-dialog[data-phase=incoming]>p:not(.hint){top:calc(18% + 256px);padding:0 20px;font-size:16px}
.conference-dialog[data-phase=incoming] .conference-actions{justify-content:space-around;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.conference-dialog[data-phase=incoming] .conference-actions button.danger{width:76px;height:76px;flex-basis:76px}
.conference-dialog[data-phase=incoming] .conference-actions button.danger span{top:88px;font-size:12px}
#calldialog[data-phase=incoming] .call-accept:before,.conference-dialog[data-phase=incoming] .conference-actions button:first-child:before{content:'';position:absolute;inset:-10px;border-radius:50%;border:6px solid #32c74724;animation:incoming-ring 2s ease-out infinite;pointer-events:none}
@keyframes incoming-ring{from{transform:scale(.95);opacity:.8}to{transform:scale(1.15);opacity:0}}