/* hub/hub-phone.css — the hub on the phone: the glass bar (the capsule, the lens, the badge), the frame and its bottom strip,
   the More and Notifications sheets and the sign-in page (build-plan §6 and §3.2, lane L1). The phone block that lived in
   hub/index.html (the old max-width 767 px block of runs 075/077) moved here under html.ph-screen.
   Linked in hub/index.html after shared/phone-ui.css. Every rule starts with html.ph-screen (DS1 —
   factory/checks/phone-css-scope.js); no width @media here (build-plan §1 PH); components are q-*.
   Values are the approved prototype's (factory/specs/078b-phone-redesign/final/final.html + all/base.css + all/extra.css),
   through the --ph-* tokens of shared/phone-ui.css — no new colour. */

/* ================================================================ the shell ================================================================ */
html.ph-screen body{height:100dvh;color:var(--ph-t1)}   /* the hub's dark text is #e7e9ea; the phone's t1 is Chatwoot's #EDEEF0 */
/* the privacy leak (live, iPhone Safari): nothing of Chatwoot's frame may paint behind our Chats list — not even in a rubber-band pull */
html.ph-screen body.q5-chats-on #frame{visibility:hidden}
html.ph-screen,html.ph-screen body{overscroll-behavior:none}   /* the hub body is already opaque (--bg) */
/* the rail is not a screen of the phone: More (#phMore) is. Its items stay in the page as the places More's rows press. */
html.ph-screen .rail{display:none}
html.ph-screen .main{flex:1;min-width:0;background:var(--ph-page)}
/* §3.2, decision rule #12 (Kareem: «البار مش زجاجي خالص مفيش حاجه ورا باينه»): every frame runs the full height, Chatwoot's
   too — its lists pass under the glass; only the conversation's reply box stays above the capsule (hub/cw-phone.js hands
   Chatwoot the capsule's clearance as --q5-bar-clear, shared/cw-phone.css keeps the composer 12 px above it). The page-colour
   strip under Chatwoot's frame (D-BAR-1) is gone. */
/* run 077 (iPhone simulator): a field under 16 px makes Safari zoom the page in on focus, and it stays zoomed — the sign-in form
   (13–14 px) left the whole hub zoomed and cut at both edges after signing in. Kept verbatim from the old block. */
html.ph-screen input:not([type=checkbox]):not([type=radio]),html.ph-screen textarea,html.ph-screen select{font-size:16px !important}
html.ph-screen .chat-fab:not([data-q-bubble]){display:none!important}   /* only as the team bubble (chat/chat-bubble.js, rule #13): the old launcher sat on Chatwoot's Send button */
/* the hub's own toasts: where the phone's toasts are (G46) — 16 px above the capsule, in the sheet's colour */
/* Kareem 2026-09-30 (a notification showed mid-screen): a banner from the TOP, under the safe area, like WhatsApp — it slides down,
   one at a time (notify.js), far from the composer while typing */
html.ph-screen #hubToasts{top:calc(env(safe-area-inset-top,0px) + 8px);bottom:auto;left:12px;right:12px;max-width:none;flex-direction:column;z-index:10000}   /* above the team chat (9998) and its popups (9999): seen while chatting */
html.ph-screen #hubToasts .htoast{animation:q-toast-down .34s var(--ph-ease-enter);touch-action:pan-x}
@keyframes q-toast-down{from{transform:translateY(-120%);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html.ph-screen #hubToasts .htoast{animation:none}}
/* #137 (P22): a showing toast never swallows a tap on what is under it — the stack and a plain toast let taps through; only the
   toast's own control takes them: its ✕, and the whole toast when it is one (.go — Kareem 2026-09-16: «clickable») */
html.ph-screen #hubToasts,html.ph-screen .htoast{pointer-events:none}
html.ph-screen .htoast.go,html.ph-screen .htoast .htx,html.ph-screen .htoast.ask{pointer-events:auto}   /* item 8: the notifications ask takes its own taps */
html.ph-screen .htoast .hask{font-size:13px;color:var(--ph-t2)}
html.ph-screen .htoast .hbtn{min-height:44px;padding:0 16px;font-size:14px;border-radius:10px}
html.ph-screen .htoast{background:var(--ph-sheet);border:0;border-radius:14px;box-shadow:var(--ph-toast-shadow);padding:12px 12px 12px 14px}
html.ph-screen .htoast .htt{font-size:14px;font-weight:600;color:var(--ph-t1)}
html.ph-screen .htoast .htd{font-size:13px;color:var(--ph-t2)}
html.ph-screen .htoast .hi{border-radius:8px;background:var(--ph-teal3);color:var(--ph-teal)}
html.ph-screen .htoast.chat .hi{background:var(--ph-blue3);color:var(--ph-blue11)}
html.ph-screen .htoast .htx{min-width:44px;min-height:44px;margin:-12px -12px -12px 0;color:var(--ph-t3);font-size:20px}
html.ph-screen .htoast.go:hover,html.ph-screen .htoast.go:focus-visible{border:0;transform:none;box-shadow:0 0 0 2px var(--ph-blue),var(--ph-toast-shadow)}
/* the frame veil (the loading state of every bar tap, G23) in the phone's words */
html.ph-screen #frameVeil{background:var(--ph-page);color:var(--ph-t2);font-size:14px;box-sizing:border-box;padding-bottom:var(--ph-bar-clear)}   /* eye review (veil): the spinner is centred in what is ABOVE the glass bar, as drawn */
/* the Chatwoot sign-in problem banner (a B banner above everything, run 041's words kept) */
html.ph-screen #cwMismatch{left:12px!important;right:12px!important;top:max(12px,env(safe-area-inset-top))!important;border-radius:14px;background:var(--ph-ruby3)!important;color:var(--ph-ruby)!important;font-size:13.5px!important;box-shadow:var(--ph-toast-shadow)}
html.ph-screen #cwMismatch #cwFix{min-height:44px;background:var(--ph-ruby9)!important;color:#fff!important;border-radius:10px!important}

/* ================================================================ the glass bar (final.html, base.css:44-77, family B) ======================= */
html.ph-screen #phoneBar{display:flex;position:fixed;left:14px;right:14px;bottom:var(--ph-bar-bottom);height:62px;z-index:10;
  border-radius:31px;background:var(--ph-glass);-webkit-backdrop-filter:var(--ph-glass-blur);backdrop-filter:var(--ph-glass-blur);box-shadow:var(--ph-glass-shadow);
  --q-bar-bg:var(--ph-glass-bar);font-family:var(--ph-font)}
/* the bar is not there: signed out, the keyboard is up, a sheet of a frame is open, the team chat is open (R1.4) */
html.ph-screen body.gate #phoneBar,html.ph-screen body.ph-kbd #phoneBar,html.ph-screen body.ph-sheet #phoneBar,html.ph-screen body.chat-open #phoneBar{display:none}
html.ph-screen #phoneBar .q-tabs{position:relative;display:flex;flex:1;height:62px;padding:0 6px}
html.ph-screen #phoneBar:not(:has(.q-tabs)){padding:0 6px}   /* the same row before phone.js has added the lens's frame */
html.ph-screen #phoneBar button[data-ph]{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ph-t1);-webkit-tap-highlight-color:transparent}
html.ph-screen #phoneBar button[data-ph][hidden]{display:none}   /* Dashboard is managers only; the author display above would beat hidden */
html.ph-screen #phoneBar button[data-ph][aria-current="page"]{color:var(--ph-blue-text)}
html.ph-screen #phoneBar button[data-ph] svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.ph-screen #phoneBar button[data-ph][aria-current="page"] svg{animation:pop .42s var(--ph-ease-pop)}
/* rule #24 (Kareem 2026-09-26, «زي الواتساب»): a word under every icon; the current tab's word is heavier */
html.ph-screen #phoneBar button[data-ph]>span{font-size:clamp(9.5px,calc((100vw - 250px) / 8.6),10.5px);font-weight:500;letter-spacing:.1px;line-height:1;white-space:nowrap}   /* R1: 10.5 from ~340 px up; on a 320 px phone «Calendar» and «Dashboard» touched → 9.5 */
html.ph-screen #phoneBar button[data-ph][aria-current="page"]>span{font-weight:600}
html.ph-screen #phoneBar .q-lens{position:absolute;z-index:0;top:6px;left:0;height:50px;width:0;border-radius:25px;background:var(--ph-lens);pointer-events:none}
html.ph-screen #phoneBar .q-lens.q-still{transition:none}   /* the first placement and a resize put it in place without gliding (final.html place()) */
html.ph-screen #phoneBar:focus-within button[data-ph]:focus-visible{outline:2px solid var(--ph-blue);outline-offset:-4px;border-radius:25px}
html.ph-screen #phoneBar .ph-badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ph-ruby9);color:#fff;
  font-size:10px;font-weight:600;display:grid;place-items:center;border:2px solid var(--q-bar-bg)}
html.ph-screen #phoneBar .ph-badge[hidden]{display:none}
/* R1: the manager's «someone is waiting» pip on Chats (base.css .bar .pip — 8 px, a 2 px ring in the bar's colour) */
html.ph-screen #phoneBar .q-bpip{position:absolute;top:9px;left:calc(50% + 7px);width:8px;height:8px;border-radius:50%;background:var(--ph-ruby9);border:2px solid var(--q-bar-bg);box-sizing:border-box}

/* ================================================================ More (all.html #sh-more, extra.css .me/.row/.sq) ============================= */
html.ph-screen #phMore>.q-sh-h{display:none}   /* the me header is More's head (the prototype draws no title row) */
html.ph-screen #phMore .q-sh-b,html.ph-screen #phNotif .q-sh-b,html.ph-screen .q-more-sub .q-sh-b{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
html.ph-screen #phMore .q-me .t{min-width:0;overflow-wrap:anywhere}
html.ph-screen .q-more .q-row .rl{overflow-wrap:anywhere}
html.ph-screen .q-more button.q-row,html.ph-screen .q-more-sub button.q-row{width:100%;text-align:left;font:inherit;color:var(--ph-t1);background:transparent;-webkit-tap-highlight-color:transparent}
html.ph-screen .q-more button.q-row:active,html.ph-screen .q-more-sub button.q-row:active,html.ph-screen #phNotif button.q-nt:active{background:var(--ph-soft)}
html.ph-screen .q-more .q-row .rv .q-n{min-width:20px;height:20px;border-radius:10px;background:var(--ph-blue-fill);color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;padding:0 6px}
html.ph-screen .q-more .q-row .rl small{font-size:12.5px}
html.ph-screen .q-more .q-row .q-tagrole{font-size:11px;color:var(--ph-t2);border:1px solid var(--ph-line);border-radius:5px;padding:0 4px;margin-left:6px;font-weight:500}
html.ph-screen .q-more .q-online.away{background:var(--ph-amber9)}
/* the Dark mode switch (all.html #sh-more: 44 × 26, knob 20) — on when the theme is dark */
html.ph-screen #phMore .q-switch[data-on="true"]{background:var(--ph-blue)}
html.ph-screen #phMore .q-switch[data-on="true"] i{transform:translateX(18px)}
html.ph-screen .q-more .q-row.q-danger .rl{color:var(--ph-ruby)}
html.ph-screen .q-more .q-row.q-danger .q-sq{color:var(--ph-ruby)}
html.ph-screen .q-more #phTeamChat{display:flex;margin:0;border:0;border-radius:0;min-height:50px;font-weight:400}
html.ph-screen .q-more .q-gfoot,html.ph-screen .q-more-sub .q-gfoot{padding:12px 16px 4px;font-size:12px;color:var(--ph-t3);text-align:center}
html.ph-screen .q-more-sub .q-dot{width:10px;height:10px;border-radius:3px}
html.ph-screen .q-more-sub .q-row .q-ch{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ph-soft);color:var(--ph-t1);flex:none}
html.ph-screen .q-more-sub .q-row .q-ch svg{width:17px;height:17px}
html.ph-screen .q-more-sub .q-state{padding:14px 16px;font-size:14px;color:var(--ph-t2)}
/* #1051 round 3 (Design C2): the main More sheet's Team group says «Checking status…» / «Couldn’t load — retrying» in a .q-state line —
   styled like the drill-ins' (it drew full-strength, flush on the card edge, the card a 22 px sliver); the failed line stays muted, not ruby */
html.ph-screen .q-more .q-state{padding:14px 16px;font-size:14px;color:var(--ph-t2)}
html.ph-screen .q-more-sub .q-state.err{color:var(--ph-ruby)}

/* ================================================================ Notifications (all.html #sh-notif, extra.css .nt) ============================ */
html.ph-screen #phNotif .q-sh-h{padding-bottom:10px}
html.ph-screen #phNotif .q-sh-h .q-hit.fw{margin-block:-4px}
html.ph-screen #phNotif button.q-nt{width:100%;text-align:left;font:inherit;color:var(--ph-t1);background:transparent;-webkit-tap-highlight-color:transparent;align-items:flex-start}
html.ph-screen #phNotif button.q-nt.new{background:var(--ph-notif-unread)}
html.ph-screen #phNotif .q-nt .t{overflow-wrap:anywhere}
html.ph-screen #phNotif .q-nt .t .q-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
html.ph-screen #phNotif .q-nt.q-open .t .q-body{-webkit-line-clamp:unset;display:inline}
html.ph-screen #phNotif .q-nt .t b{font-weight:600}

/* ================================================================ sign in (all.html #p-signin, extra.css .auth, family B) ====================== */
/* the gate becomes the prototype's full page: no card, the plain background, a left-aligned column (build-plan §6 signin). The
   desk's first line-anchored #brandLogin{ rule and the body.gate rules stay as they are (suite-27 #E043-1). */
html.ph-screen body.gate #brandLogin{position:fixed;inset:0;top:0;left:0;transform:none;width:auto;max-width:none;border:0;border-radius:0;box-shadow:none;
  background:var(--ph-bg);color:var(--ph-t1);padding:0 0 92px;display:flex;flex-direction:column;overflow-y:auto;font-family:var(--ph-font);animation:enter .32s var(--ph-ease-enter)}
html.ph-screen #brandLogin .q-auth{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
html.ph-screen #brandLogin .b{display:block;margin:0}
html.ph-screen #brandLogin .b .d{width:56px;height:56px;border-radius:16px;background:var(--ph-blue);display:grid;place-items:center;font-weight:800;font-size:20px;letter-spacing:-.5px;color:#fff}
html.ph-screen #brandLogin h1{text-align:left;font-size:28px;font-weight:700;letter-spacing:-.6px;margin:22px 0 0;color:var(--ph-t1);line-height:1.35}
html.ph-screen #brandLogin .s{text-align:left;font-size:15px;color:var(--ph-t2);margin:6px 0 0}
html.ph-screen #brandLogin label{font-size:13px;color:var(--ph-t2);margin:0 0 6px;font-weight:500}
html.ph-screen #brandLogin .q-fld{margin-top:14px}
html.ph-screen #brandLogin .q-fld.q-f1{margin-top:26px}
html.ph-screen #brandLogin .q-in{position:relative}
html.ph-screen #brandLogin .q-in input{width:auto;height:46px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ph-t1);font-size:16px;font-family:inherit}
html.ph-screen #brandLogin .q-in input::placeholder{color:var(--ph-t3);opacity:1}
html.ph-screen #brandLogin .q-in input:focus{outline:none;border:0}
html.ph-screen #brandLogin .q-in:focus-within{box-shadow:inset 0 0 0 1.5px var(--ph-blue)}
html.ph-screen #brandLogin .q-in.q-bad,html.ph-screen #brandLogin .q-in.q-bad:focus-within{box-shadow:inset 0 0 0 1.5px var(--ph-ruby9)}
html.ph-screen #brandLogin button.q-eye{width:44px;min-width:44px;height:44px;margin:0 -12px 0 0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ph-t3);display:grid;place-items:center;flex:none}
html.ph-screen #brandLogin button.q-eye svg{width:18px;height:18px}
html.ph-screen #brandLogin button.q-eye .suf{font-size:16px;font-weight:400;line-height:1.35;text-align:start;color:inherit}
html.ph-screen #brandLogin button.q-eye[aria-pressed="true"]{color:var(--ph-t1)}
html.ph-screen #brandLogin #uBtn{height:48px;border-radius:14px;font-size:16px;font-weight:600;line-height:1.35;font-feature-settings:"cv11" 1;margin:20px 0 0;padding:0 18px;background:var(--ph-blue-fill);color:#fff;flex:none;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
html.ph-screen #brandLogin #uBtn:hover{filter:none}
html.ph-screen #brandLogin #uBtn:disabled{opacity:.45}
html.ph-screen #brandLogin .err{margin:5px 0 0;padding:0;border-radius:0;background:transparent;color:var(--ph-ruby);font-size:12.5px;text-align:left}
html.ph-screen #brandLogin .q-forgot{height:48px;margin-top:8px;border-radius:14px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:14px;color:var(--ph-t2);flex:none}
html.ph-screen #brandLogin .foot{margin:auto 0 0;padding:0;text-align:center;font-size:12.5px;color:var(--ph-t3)}

/* ================================================================ the team bubble (decision rule #13, app DECISIONS T-1…T-8) ============
   hub/chat/chat-bubble.js places the team chat's own launcher (#chatFab) and writes its place as left/top; the list view of the
   team chat's own panel becomes a popover beside it (on its side, above or below it — --qb-pop-*); a conversation, New group and
   ↗ (.qb-full) stay today's full page. Values: the app's picture team-bubble-flow.html (56, halo 5 px at .28, ruby count 20 with a
   2 px page-colour ring, popover radius 20, 1 px line, 50 % scrim) through the --ph-* tokens. */
html.ph-screen .chat-fab[data-q-bubble]{position:fixed;right:auto;bottom:auto;width:56px;height:56px;border-radius:28px;background:var(--ph-blue-fill);color:#fff;
  box-shadow:0 0 0 5px rgba(39,129,246,.28),0 8px 18px rgba(28,32,36,.22);z-index:9997;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;transition:transform .12s;cursor:grab}
html.ph-screen[data-theme="dark"] .chat-fab[data-q-bubble]{box-shadow:0 0 0 5px rgba(39,129,246,.28),0 8px 18px rgba(0,0,0,.5)}
html.ph-screen .chat-fab[data-q-bubble]:hover{transform:none}
html.ph-screen .chat-fab[data-q-bubble]:focus-visible{outline:3px solid var(--ph-t1);outline-offset:7px}   /* outside the halo: visible on both pages */
html.ph-screen .chat-fab[data-q-bubble]>svg{display:none}                     /* the desk's single bubble: the phone draws the picture's pair */
html.ph-screen .chat-fab[data-q-bubble] .qb-face{display:grid;place-items:center;pointer-events:none}
html.ph-screen .chat-fab[data-q-bubble] .qb-face svg{width:28px;height:28px;grid-area:1/1}
html.ph-screen .chat-fab[data-q-bubble] .qb-x{display:none;width:24px!important;height:24px!important}
html.ph-screen .chat-fab[data-q-bubble] .badge{top:-4px;right:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--ph-ruby9);
  font:800 11px/16px var(--ph-font);box-shadow:none;border:2px solid var(--ph-page);box-sizing:border-box}
html.ph-screen .chat-fab[data-q-bubble][data-qb-side="left"] .badge{right:auto;left:-4px}
html.ph-screen .chat-fab.qb-drag{cursor:grabbing;transform:scale(1.06);transition:none}
html.ph-screen .chat-fab.qb-snap{transition:left .26s var(--ph-ease-pop2),top .26s var(--ph-ease-pop2)}
html.ph-screen .chat-fab.qb-hop{animation:qbHop .56s var(--ph-ease-enter)}
@keyframes qbHop{0%{transform:none}30%{transform:translateY(-12px)}55%{transform:none}75%{transform:translateY(-4px)}100%{transform:none}}
/* where it hides: a sheet in front (T-7: a frame's sheet = body.ph-sheet, More = body.ph-more, a hub sheet = .q-sheet.on), the keyboard, the sign-in, Chatwoot's customer conversation (its composer, T-8), and
   the team chat's own full pages (a conversation, New group, the full list) */
html.ph-screen body.ph-sheet .chat-fab[data-q-bubble],html.ph-screen body.ph-more .chat-fab[data-q-bubble],html.ph-screen body:has(.q-sheet.on) .chat-fab[data-q-bubble],html.ph-screen body.ph-kbd .chat-fab[data-q-bubble],html.ph-screen body.qb-typing:not(.chat-open) .chat-fab[data-q-bubble],html.ph-screen body.gate .chat-fab[data-q-bubble],
html.ph-screen body.qb-cwconv:not(.chat-open) .chat-fab[data-q-bubble],
html.ph-screen body.chat-open:has(#chatConv:not([hidden])) .chat-fab[data-q-bubble],html.ph-screen body.chat-open:has(#chatGroupSheet:not([hidden])) .chat-fab[data-q-bubble],
html.ph-screen body.chat-open:has(.chat-pop.qb-full) .chat-fab[data-q-bubble]{display:none!important}
/* the popover is open: the bubble is its ✕ (above the scrim and the popover), no count */
html.ph-screen body.chat-open .chat-fab[data-q-bubble]{display:flex;z-index:10000;box-shadow:0 0 0 5px rgba(39,129,246,.4)}
html.ph-screen body.chat-open .chat-fab[data-q-bubble] .qb-i,html.ph-screen body.chat-open .chat-fab[data-q-bubble] .badge{display:none}
html.ph-screen body.chat-open .chat-fab[data-q-bubble] .qb-x{display:block}
html.ph-screen .qb-scrim{display:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ph-screen body.chat-open:has(.chat-pop:not(.qb-full)>#chatListView:not([hidden])) .qb-scrim{display:block;position:fixed;inset:0;background:var(--ph-scrim);z-index:9996;animation:enter .2s ease-out}
/* the popover: today's list view, beside the bubble */
html.ph-screen .chat-pop:not(.qb-full):has(>#chatListView:not([hidden])){inset:auto;top:var(--qb-pop-top,auto);bottom:var(--qb-pop-bottom,96px);left:auto;right:auto;
  width:min(340px,calc(100vw - 24px));height:auto;max-height:min(var(--qb-pop-max,520px),520px);border-radius:20px;border:1px solid var(--ph-line);
  background:var(--ph-card);box-shadow:0 18px 40px rgba(28,32,36,.22);overflow:hidden;animation:qbPop .22s var(--ph-ease-pop2)}
html.ph-screen[data-qb-pop-side="right"] .chat-pop:not(.qb-full):has(>#chatListView:not([hidden])){right:12px;transform-origin:bottom right}
html.ph-screen[data-qb-pop-side="left"] .chat-pop:not(.qb-full):has(>#chatListView:not([hidden])){left:12px;transform-origin:bottom left}
html.ph-screen[data-qb-pop="below"] .chat-pop:not(.qb-full):has(>#chatListView:not([hidden])){transform-origin:top right}
html.ph-screen[data-theme="dark"] .chat-pop:not(.qb-full):has(>#chatListView:not([hidden])){box-shadow:0 18px 40px rgba(0,0,0,.6)}
@keyframes qbPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
html.ph-screen .chat-pop:not(.qb-full)>#chatListView{background:var(--ph-card);box-shadow:none;animation:none}
html.ph-screen .chat-pop:not(.qb-full)>#chatListView .chat-pop-h{padding:12px 12px 6px 16px}
html.ph-screen .chat-pop:not(.qb-full)>#chatListView .chat-pop-h b{font-size:17px;font-weight:800;letter-spacing:-.2px}
html.ph-screen .chat-pop:not(.qb-full)>#chatListView .chat-pop-h .chat-ic>.q-face{width:30px;height:30px;border-radius:15px}
html.ph-screen .chat-pop:not(.qb-full)>#chatListView .chat-pop-h [data-act="closePanel"]{display:none}   /* the bubble is the ✕ */
html.ph-screen .chat-pop:not(.qb-full)>#chatListView .q-chat-search,html.ph-screen .chat-pop:not(.qb-full)>#chatListView .chat-list{background:var(--ph-card)}
html.ph-screen .chat-pop:not(.qb-full)>#chatListView .chat-list{overflow:auto;min-height:0;overscroll-behavior:contain}
html.ph-screen .chat-pop.qb-full .qb-widen{display:none}
html.ph-screen .chat-win-h .actions .qb-close{width:44px;height:44px;margin:-6px -6px -6px 0;border:0;background:transparent;display:grid;place-items:center;color:var(--ph-t2)}
html.ph-screen .chat-win-h .actions .qb-close>.q-face{width:30px;height:30px;border-radius:15px;background:var(--ph-soft);display:grid;place-items:center}
html.ph-screen .chat-win-h .actions .qb-close svg{width:16px;height:16px}
/* «Team chat» leaves the More sheet: the bubble is its one entry point (T-4). The node stays (hub/phone.js binds it once). */
html.ph-screen #phTeamChat,html.ph-screen [data-more-slot="teamchat"]{display:none!important}
/* item 9: the «Open in a new tab» bar sits above the glass bar on a phone, full width */
html.ph-screen #metaBar{left:12px;right:12px;transform:none;max-width:none;bottom:calc(var(--ph-bar-clear) + 8px);flex-wrap:wrap;background:var(--ph-sheet);border:0;box-shadow:var(--ph-toast-shadow);color:var(--ph-t2);font-size:13px}
html.ph-screen #metaBar .mb-go,html.ph-screen #metaCover .mc-go,html.ph-screen #metaCover .mc-back{min-height:44px}
html.ph-screen #metaCover{background:var(--ph-page);padding-bottom:var(--ph-bar-clear)}