/* MultiverseSocial phone screens: dial, incoming, call window (1-24 tiles), ended. Classes: .ph-*
   Tile grid sizes live in phone-layout.css (generated from the design 9.2 table). No inline styles are needed (CSP friendly). */
.ph{--bg:#0b1020;--panel:#151b34;--line:rgba(137,180,250,.28);--ink:#e8faff;--dim:#a6adc8;--cy:#22d3ee;--pu:#a78bfa;--red:#f87171;--grn:#34d399;
 margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);font:16px/1.4 ui-monospace,Consolas,monospace;
 background:radial-gradient(900px 480px at 50% -8%,rgba(167,139,250,.16),transparent 70%),radial-gradient(700px 400px at 100% 100%,rgba(34,211,238,.08),transparent 70%),var(--bg);
 -webkit-text-size-adjust:100%}
.ph *{box-sizing:border-box}
.ph [hidden]{display:none!important}
.ph a{color:var(--cy)}
.ph :focus-visible{outline:2px solid var(--pu);outline-offset:2px}
.ph-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}

/* top bar (>= 48 px) */
.ph-top{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);min-height:48px;background:rgba(21,27,52,.6)}
.ph-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 10px rgba(34,211,238,.35)}
.ph-timer{color:var(--cy);text-shadow:0 0 8px rgba(34,211,238,.6);font-variant-numeric:tabular-nums}

/* buttons: 56 px in the control bar, never below 44 px anywhere */
.ph-btn{min-width:56px;min-height:56px;padding:0 14px;border-radius:28px;border:1px solid var(--line);background:#1e2547;color:var(--ink);font:inherit;font-size:.85rem;
 cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;touch-action:manipulation}
.ph-btn:hover{border-color:var(--cy);box-shadow:0 0 12px rgba(34,211,238,.35)}
.ph-btn[disabled]{opacity:.45;cursor:default;box-shadow:none}
.ph-btn[aria-pressed="true"]{background:#3b2f6b;border-color:var(--pu);box-shadow:0 0 12px rgba(167,139,250,.45)}
.ph-btn.sm{min-width:44px;min-height:44px;border-radius:12px;padding:0 12px}
.ph-btn.end{background:var(--red);border-color:var(--red);color:#1a0505;font-weight:700;box-shadow:0 0 14px rgba(248,113,113,.4)}
.ph-btn.ok{background:var(--grn);border-color:var(--grn);color:#052015;font-weight:700;box-shadow:0 0 14px rgba(52,211,153,.4)}
.ph-btn.wide{width:100%}

.ph-bar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);position:relative}

/* ---------- content pages: dial, incoming, ended ---------- */
.ph-stage{flex:1;min-height:0;padding:8px;display:flex}
.ph-card{margin:auto;width:min(100%,360px);padding:20px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-align:center;box-shadow:0 0 24px rgba(167,139,250,.12)}
.ph-display{min-height:44px;font-size:1.5rem;letter-spacing:.06em;color:var(--cy);word-break:break-all;text-shadow:0 0 10px rgba(34,211,238,.5)}
.ph-err{min-height:1.4em;color:var(--red);font-size:.9rem;margin:4px 0}
.ph-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.ph-pad .ph-btn{border-radius:12px;min-height:56px;font-size:1.3rem;padding:0}
.ph-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px 0 0}
.ph-row .ph-btn{flex:1 1 84px}
.ph-tog{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0 0 8px;padding:0 12px;text-align:left;border-radius:12px;border:1px solid var(--line);background:#1a2040;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;touch-action:manipulation}
.ph-tog::before{content:"";flex:0 0 20px;height:20px;border-radius:6px;border:2px solid var(--dim)}
.ph-tog[aria-pressed="true"]{border-color:var(--pu)}
.ph-tog[aria-pressed="true"]::before{background:var(--cy);border-color:var(--cy);box-shadow:0 0 10px var(--cy)}
.ph-h{margin:16px 0 8px;font-size:.95rem;font-weight:400;color:var(--dim);text-align:left}
.ph-friends{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.ph-friends .ph-btn{flex-direction:row;justify-content:flex-start;gap:8px;min-height:48px;border-radius:12px;padding:0 10px;font-size:.9rem}
.ph-friends .ph-btn .ph-mini{width:28px;height:28px;flex:0 0 28px;font-size:.7rem}
.ph-mini{border-radius:50%;background:linear-gradient(135deg,var(--pu),var(--cy));display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b1020}
.ph-ring{width:96px;height:96px;margin:8px auto 16px;border-radius:50%;background:linear-gradient(135deg,var(--pu),var(--cy));display:flex;align-items:center;justify-content:center;font-size:2rem;color:#0b1020;font-weight:700;animation:phr 1.4s ease-out infinite}
.ph-ring.still{animation:none;box-shadow:0 0 22px rgba(34,211,238,.45)}
@keyframes phr{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}100%{box-shadow:0 0 0 28px rgba(34,211,238,0)}}
.ph-who{margin:0 0 4px;font-size:1.3rem;font-weight:700;overflow-wrap:anywhere}
.ph-state{margin:8px 0 12px;min-height:1.6em;font-size:1.1rem;color:var(--cy);overflow-wrap:anywhere}
.ph-num{color:var(--dim);font-size:.85rem}

/* ---------- call window ---------- */
.ph-call{height:100vh;height:100dvh;overflow:hidden}
.ph-live{position:relative;flex:1 1 0;min-height:0;padding:8px;display:block;container-type:size;overflow-x:hidden;overflow-y:auto}
.ph-live > .ph-grid{display:flex}
.ph-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--g,8px);width:100%;min-height:100%}
.ph-grid .ph-tile{flex:0 0 auto;width:var(--tw,96px);height:var(--th,128px)}
.ph-tile{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:12px;background:var(--panel);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
 cursor:pointer;color:inherit;font:inherit;padding:0;touch-action:manipulation}
.ph-tile .ph-vid{position:absolute;inset:0;background:linear-gradient(135deg,hsl(var(--h,230) 50% 24%),hsl(calc(var(--h,230) + 70) 55% 11%))}
.ph-tile.h0{--h:200}.ph-tile.h1{--h:262}.ph-tile.h2{--h:310}.ph-tile.h3{--h:160}.ph-tile.h4{--h:30}.ph-tile.h5{--h:340}.ph-tile.h6{--h:120}.ph-tile.h7{--h:240}
.ph-av{position:relative;width:clamp(40px,38%,96px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--pu),var(--cy));display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b1020;font-size:clamp(1rem,4vw,2rem)}
.ph-tile.has-vid .ph-av{display:none}
.ph-name{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.65);font-size:.875rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-st{position:absolute;right:6px;top:6px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:calc(100% - 12px);max-height:calc(100% - 40px);overflow:hidden}
.ph-st i{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-style:normal;padding:1px 6px;border-radius:8px;background:rgba(0,0,0,.65);font-size:.875rem;line-height:1.25;white-space:nowrap}
.ph-spk{position:absolute;left:6px;top:6px;display:none;align-items:flex-end;gap:2px;height:16px;padding:3px 4px;border-radius:6px;background:rgba(0,0,0,.65)}
.ph-spk b{display:block;width:3px;background:var(--cy);border-radius:1px;height:6px}.ph-spk b:nth-child(2){height:10px}.ph-spk b:nth-child(3){height:14px}
.ph-tile.is-speaking{border-color:var(--cy);border-width:3px;box-shadow:0 0 16px rgba(34,211,238,.5)}
.ph-tile.is-speaking .ph-spk{display:flex}
.ph-tile.is-self{border-style:dashed}
.ph-tile.is-self .ph-vid{transform:scaleX(-1)}
.ph-tile.is-pinned{border-color:var(--pu)}
.ph-tile:focus-visible{outline:2px solid var(--pu);outline-offset:-4px}

/* N = 2: remote fills the stage, self is a floating picture-in-picture, draggable to the four corners */
.ph-pip,.ph-preview{position:absolute;z-index:3;width:96px;height:128px;touch-action:none}
.ph-pip[data-corner="br"]{right:8px;bottom:8px}.ph-pip[data-corner="bl"]{left:8px;bottom:8px}
.ph-pip[data-corner="tr"]{right:8px;top:8px}.ph-pip[data-corner="tl"]{left:8px;top:8px}
.ph-pip.drag{transition:none}
.ph-preview{width:160px;height:90px;left:8px;bottom:8px;border-radius:12px;border:2px solid var(--pu);overflow:hidden;background:var(--panel);pointer-events:none}
.ph-pip{transition:none}

/* spotlight / strip / screen share */
.ph-spot{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;min-height:0}
.ph-main{flex:1 1 0;min-height:0;min-width:0;display:flex}
.ph-main .ph-tile{flex:1;width:100%;height:100%}
.ph-strip{flex:0 0 112px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ph-strip .ph-tile{flex:0 0 84px;width:84px;height:112px}
.ph-spot[data-share="1"] .ph-main{flex:0 0 auto;aspect-ratio:16/9;width:100%}
.ph-screen{touch-action:pan-x pan-y pinch-zoom;background:#070b18;border-width:0}
.ph-scr{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:16/9;background:#0f1730;border:1px solid var(--line);
 background-image:linear-gradient(var(--line),var(--line)),repeating-linear-gradient(180deg,transparent 0 18px,rgba(34,211,238,.16) 18px 20px);background-size:100% 14%,100% 100%;background-repeat:no-repeat}
.ph-screen.is-actual{overflow:auto;display:block}
.ph-screen.is-actual .ph-scr{width:200%;max-width:none;max-height:none}
.ph-screen .ph-name{z-index:2}

/* top bar extras: pager and the "you are sharing" banner */
.ph-pager{display:flex;align-items:center;gap:6px;font-size:.875rem;white-space:nowrap}
.ph-dots{display:flex;gap:4px}.ph-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.ph-dots i.on{background:var(--cy);box-shadow:0 0 6px var(--cy)}
.ph-banner{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:.8rem;line-height:1.2;color:#ffe3e3}
.ph-banner span{flex:1;min-width:0}
.ph-toast{position:absolute;z-index:6;left:8px;right:8px;top:8px;margin:0 auto;width:fit-content;max-width:min(100%,460px);text-align:center;padding:8px 14px;border-radius:12px;background:rgba(5,8,20,.94);border:1px solid var(--cy);box-shadow:0 0 14px rgba(34,211,238,.4);pointer-events:none}
.ph-cc{min-height:44px;padding:8px 12px;border-top:1px solid var(--line);background:rgba(21,27,52,.85);font-size:1rem}

/* control bar sizes: 320 = Mic, Cam, More, End at 56 px; 360-599 = 52 px buttons with 6 px gaps; wide = labelled, 56 px high */
.ph-call .ph-bar{flex-wrap:nowrap}
.ph-call .ph-bar .ph-btn{flex:0 0 auto;padding:0 4px}
.ph-menu{position:absolute;right:8px;bottom:calc(100% + 8px);z-index:9;display:flex;flex-direction:column;gap:4px;padding:8px;min-width:210px;max-width:calc(100vw - 16px);max-height:70vh;overflow-y:auto;
 border:1px solid var(--pu);border-radius:14px;background:var(--panel);box-shadow:0 0 22px rgba(167,139,250,.35)}
.ph-mi{min-height:48px;padding:0 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;font-size:.95rem;text-align:left;cursor:pointer;touch-action:manipulation}
.ph-mi:hover,.ph-mi:focus-visible{background:#1e2547;border-color:var(--line)}
.ph-mi[aria-checked="true"],.ph-mi[aria-pressed="true"]{color:var(--cy)}
@media(max-width:359.98px){
 .ph-b-share,.ph-b-view{display:none}
 .ph-pager-on .ph-top b{display:none}
}
@media(min-width:360px) and (max-width:599.98px){
 .ph-call .ph-bar{gap:6px}
 .ph-call .ph-bar .ph-btn{min-width:52px;width:52px;min-height:52px;font-size:.8rem}
}
@media(max-width:899.98px){.ph-b-hand{display:none}}
@media(min-width:600px){
 .ph-pip{width:192px;height:108px}
 .ph-spot{flex-direction:row}
 .ph-spot[data-share="1"] .ph-main{flex:1 1 0;aspect-ratio:auto;width:auto}
 .ph-main .ph-screen{align-items:center;justify-content:center}
 .ph-strip{flex:0 0 284px;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cy) transparent}
 .ph-strip .ph-tile{flex:0 0 153px;width:272px;height:153px}
 .ph-call .ph-bar .ph-btn{min-width:72px;padding:0 10px}
 .ph-bar{gap:10px}
}
@media(prefers-reduced-motion:reduce){.ph-ring{animation:none}.ph *{transition:none!important;animation:none!important}}
.ph-tile:not(.has-vid) .ph-vid{display:none}

/* callee-side call settings on the dial screen (do not disturb, friends only): one-line help under each switch */
.ph-note{margin:-2px 0 10px;padding:0 4px;text-align:left;font-size:.85rem;color:var(--dim);overflow-wrap:anywhere}