/* One line at every width (2.26.0): the name, its presence and the number
   on the left, three small actions on the right. The name gives way first
   (ellipsis); the number is always shown whole; where the word of the
   presence would squeeze the name, only its coloured dot is shown and the
   word goes to assistive technology (.is-compact, fitHeaderPresence). */
.app-header-slim { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; min-height:48px; padding:6px 6px 6px 14px; }
.identity-status-row { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.identity-status-row .identity-name { display:block; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; font-size:15px; font-weight:700; line-height:1.3; color:var(--text); letter-spacing:-0.01em; }
.identity-status-row .status-badge-slim { flex:0 0 auto; min-height:22px; padding:0 8px; gap:5px; font-size:11px; line-height:1; box-shadow:none; }
.identity-status-row .status-dot { width:7px; height:7px; flex:0 0 7px; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.identity-status-row .identity-number { flex:0 0 auto; min-width:0; white-space:nowrap; overflow-wrap:normal; font-size:14px; font-weight:600; line-height:1.3; font-variant-numeric:tabular-nums; letter-spacing:.01em; color:var(--muted); }
.header-actions { display:flex; align-items:center; flex:0 0 auto; flex-wrap:nowrap; gap:4px; }
.header-actions .copy-chip { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; border-radius:11px; --clx-icon-size:22px; }
.header-actions .copy-chip svg, .header-info svg { width:18px; height:18px; }
/* fitHeaderPresence (app.js) adds .is-compact when the word would squeeze the name. */
.identity-status-row .status-badge-slim.is-compact { width:22px; padding:0; justify-content:center; }
.identity-status-row .status-badge-slim.is-compact .status-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:360px) {
 .app-header-slim { gap:6px; padding-left:10px; }
 .identity-status-row { gap:6px; }
 .identity-status-row .identity-name { font-size:14px; }
 .identity-status-row .identity-number { font-size:12.5px; letter-spacing:0; }
 .header-actions .copy-chip { flex-basis:34px; width:34px; height:34px; min-width:34px; min-height:34px; }
}
/* The smallest phones with the longest numbers (15 digits): every pixel goes to the name. */
@media (max-width:340px) {
 .app-header-slim, .identity-status-row { gap:5px; }
 .header-actions { gap:3px; }
 .header-actions .copy-chip { flex-basis:32px; width:32px; height:32px; min-width:32px; min-height:32px; border-radius:10px; }
 .identity-status-row .status-badge-slim.is-compact { width:20px; }
}
/* Layout contract: the footer owns its space, only the content can scroll. */
.app-shell { padding-bottom: 9px; }
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 4px 3px 6px; }
.header-info[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
/* The keypad sits at the bottom while there is room (the ::before spacer takes
   the free space and collapses first). It never clips: when banners and keys
   do not fit, the content overflows downwards and the frame scrolls, so
   "Call now" stays reachable (A33). The keys keep 44 px while they fit. */
.dialer-stack { justify-content: flex-start; gap: 8px; }
.dialer-stack::before { content: ''; flex: 1 1 0; margin-bottom: -8px; }
.dialer-card { flex: 0 1 auto; min-height: auto; max-height: 520px; overflow: visible; }
.dialpad-grid { flex: 0 1 auto; height: clamp(200px, 34dvh, 300px); min-height: 172px; margin: 6px 0 10px; gap: 8px; }
.dial-key { min-height: 36px; border-radius: 17px; }
#loginUsername { font-size: 21px; font-weight: 600; letter-spacing: .02em; min-height: 56px; }
#tabAbout.active, #tabSettings.active { display: flex; flex-direction: column; gap: 12px; height: auto; min-height: 100%; }
#tabAbout > *, #tabSettings > * { flex-shrink: 0; }
.report-card { padding: 10px 14px; }
#reportToggleBtn { width: 100%; }
.theme-card { padding: 18px; }
.theme-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 16px; }
.theme-options button { min-width: 0; padding: 6px 6px 12px; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.theme-options button[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: 1px; }
.theme-options strong, .theme-options small { display: block; margin: 6px 4px 0; font-size: 11px; }
.theme-options small { color: var(--muted); font-size: 9px; }
.theme-swatch { display: grid; place-items: center; height: 72px; border-radius: 11px; border: 1px solid #7b8ba422; }
.theme-swatch img { width: 40px; height: 40px; }
.swatch-glass { background: linear-gradient(145deg,#e3f2ff,#f6edff); }
.swatch-graphite { background: radial-gradient(ellipse at 20% 0,#50535b,#15171b 70%); }
.swatch-minimal { background: #f8f9fa; }
.profile-avatar.is-private { opacity: .35; filter: saturate(.35); transition: opacity .18s; }
.history-item.is-unread { border-color: #4b8fee; background: var(--primary-soft); }
.history-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.history-unread { border-radius: 12px; background: #2465d6; color: #fff; padding: 3px 7px; font-size: 10px; white-space: nowrap; }
.invitation-copy-number { width: 100%; min-height: 44px; margin-bottom: 12px; }
/* The call dock: icons only (the names are read to assistive technology),
   four to a row - mute, sound, speaker, Bluetooth while a headset is paired,
   camera, share, chat and the red End button at the end of that second row
   (2.32.0: two rows, the End button two keys wide instead of a row of its
   own). The voice-quality controls live in the sheet (.call-settings-panel)
   that the More button in the top corner opens above the dock; --dock-h is
   the room the dock takes. */
.call-surface { --dock-h: 120px; }
.call-command-bar { display: flex; flex: 0 0 auto; width: 100%; padding: 4px 6px 8px; }
.call-command-bar .video-dock { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; flex: 1 1 auto; width: auto; min-width: 0; gap: 8px; padding: 0; margin: 0; }
.call-command-bar .dock-row { display: flex; width: 100%; gap: 8px; min-width: 0; }
.call-command-bar .dock-row:not(:has(button:not(.hidden))) { display: none; }
.call-command-bar .video-dock button { position: relative; display: grid; place-items: center; flex: 1 1 0; width: auto; min-width: 0; height: 48px; min-height: 44px; padding: 0; margin: 0; --clx-icon-size: 30px; }
.call-command-bar .video-dock button.has-3d::before, .call-command-bar .video-dock button.has-minimal::before { display: block; margin: 0; }
.call-command-bar .video-dock button > svg { width: 24px; height: 24px; }
.call-command-bar .video-dock #activeCallActionBtn { flex: 2 1 0; height: 48px; --clx-icon-size: 34px; background: linear-gradient(140deg,#ec4059,#a81938); border: 1px solid #f2788c; box-shadow: 0 3px 0 #681127; }
/* Ringing: the round red Cancel in the middle, the speaker (and Bluetooth)
   small beside it, the way a phone lays out a ringing call. */
.call-command-bar.is-ringing .video-dock { flex-direction: row; justify-content: center; align-items: center; gap: 22px; min-height: 80px; }
.call-command-bar.is-ringing .dock-row { display: contents; }
.call-command-bar.is-ringing .video-dock button { flex: 0 0 54px; width: 54px; height: 54px; min-height: 54px; border-radius: 50%; --clx-icon-size: 30px; }
.call-command-bar.is-ringing .video-dock #audioRouteBtn { order: -1; }
.call-command-bar.is-ringing .video-dock #activeCallActionBtn { order: 0; flex: 0 0 74px; width: 74px; height: 74px; min-height: 74px; border-radius: 50%; --clx-icon-size: 42px; }
.call-command-bar.is-ringing .video-dock #bluetoothRouteBtn { order: 1; }
/* More: a small button in the top corner of the call, gone in full screen
   (there the drawer holds the sheet, open). */
.call-more-btn { position: absolute; top: 6px; right: 6px; z-index: 6; width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0; display: grid; place-items: center; border-radius: 13px; border: 1px solid #ffffff2e; background: #ffffff14; color: #ffffffd8; --clx-icon-size: 26px; }
.call-more-btn > svg { width: 22px; height: 22px; }
.call-more-btn[aria-expanded="true"] { background: #ffffff2e; border-color: #ffffff55; }
.call-surface.is-immersive .call-more-btn { display: none; }
.call-summary .call-card { border-radius: 16px; }
.call-settings-panel { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); max-height: calc(100% - var(--dock-h) - 16px); }
.call-settings-panel .call-quality-main { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 12px; border: 1px solid #8296b13d; border-radius: 16px; background: #ffffff0a; text-align: left; }
.quality-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quality-title { font-size: 12px; font-weight: 700; color: #bed0e7; }
#qualityValue { font-size: 12px; line-height: 1.3; color: #e7efff; }
.call-quality-main #qualitySlider { width: 100%; min-height: 44px; margin: 0; accent-color: #71aaff; touch-action: pan-y; }
.call-quality-main #qualityAutoBtn { min-height: 44px; width: 100%; margin: 0; font-size: 12px; }
.call-settings-panel > * + * { margin-top: 12px; }
.video-stage { isolation: isolate; }
.video-stage .video-main-el, .video-stage .video-pip-el { object-fit: contain; }
.video-stage.is-camera-pair > :is(.local-video, .remote-video) {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    translate: none;
    cursor: auto;
    touch-action: auto;
}
.video-stage.is-camera-pair > .remote-video { left: 50%; }
.video-stage.is-camera-pair > .video-pip-chip { translate: none; }
.video-pip-el { width: 92px; height: 122px; max-width: 32%; max-height: calc(100% - 64px); right: 10px; bottom: 10px; }
.video-stage-fs, .video-pip-chip { width: 44px; height: 44px; padding: 0; line-height: 1; display: grid; place-items: center; --clx-icon-size: 25px; }
.video-stage-fs { right: max(10px,env(safe-area-inset-right)); top: max(10px,env(safe-area-inset-top)); border-radius: 13px; }
.video-pip-chip { right: 10px; bottom: 10px; border-radius: 13px 0 11px 0; background: #132038e6; }
.video-stage-fs::before, .video-pip-chip::before { margin: 0 !important; max-width: 100%; max-height: 100%; }
.video-camera-switch { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid #a9c2d477; border-radius:13px; background:#152336e8; color:#fff; cursor:pointer; --clx-icon-size:25px; }
.video-camera-switch::before { margin:0 !important; }
.video-camera-switch:disabled { opacity:.5; cursor:wait; }
.video-camera-switch:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
.video-stage > .video-camera-switch { position:absolute; z-index:6; top:calc(max(8px,env(safe-area-inset-top)) + 50px); right:max(8px,env(safe-area-inset-right)); --clx-icon-size:32px; }
.video-stage-fs { top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); }
/* Full screen and Switch camera stack at the top right of the stage (8 + 44 + 6 + 44 + 10 px); the
   pin that holds the stage must not shrink below that, or a short screen clips the lower button. */
.has-video .video-stage, .has-video .call-scroll > .video-pin { min-height:112px; }
.video-stage:has(> .video-camera-switch:not(.hidden)) :is(.video-pip-el,.video-pip-chip) { right:64px; }
.video-stage:has(> .video-camera-switch:not(.hidden)) :is(.video-stage-tag,.remote-video-note) { left:10px; right:64px; transform:none; width:fit-content; max-width:calc(100% - 74px); white-space:normal; }
[data-theme="graphite"] .video-camera-switch { background:linear-gradient(145deg,#314256f5,#0c1523f5); border-color:#a4c0d366; }
[data-theme="minimal"] .video-camera-switch { border-radius:8px; background:#2d3540; }
.video-stage.pip-minimized .video-pip-chip { right: 10px; bottom: 10px; border-radius: 13px; }
.call-surface:fullscreen, .call-surface.is-fake-fullscreen { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.call-surface:fullscreen .call-surface-shell, .call-surface.is-fake-fullscreen .call-surface-shell { margin-inline: auto; }
.call-surface[data-orientation="portrait"] .call-surface-shell { max-width: 600px; }
@media (orientation:landscape) and (max-height:500px) {
 .has-video .call-surface-shell { display: grid; grid-template-columns: minmax(0,1fr) 270px; grid-template-rows: minmax(0,1fr) auto; gap: 6px 10px; }
 .has-video .call-scroll { grid-column: 1; grid-row: 1 / 3; }
 .has-video .call-summary { grid-column: 2; grid-row: 1; align-self: end; }
 .has-video .call-command-bar { grid-column: 2; grid-row: 2; }
 .call-settings-panel { bottom: 10px; max-height: calc(100% - 20px); }
}
/* Theme surfaces are shared across navigation, forms, dialogs and reports. */
.screen-controls-drawer { display:contents; }
.screen-camera-strip { position:absolute; z-index:5; left:max(10px,env(safe-area-inset-left)); bottom:max(10px,env(safe-area-inset-bottom)); display:flex; gap:2px; max-width:calc(100% - 76px); padding:3px; border:1px solid #9db8cd66; border-radius:13px; background:#101a28ec; box-shadow:0 4px 20px #0006; color:#fff; }
.screen-camera-tile { position:relative; width:clamp(64px,12vw,104px); height:clamp(64px,22vh,88px); overflow:hidden; border-radius:9px; background:#060b12; }
.screen-camera-tile video { display:block; width:100%; height:100%; object-fit:contain; }
.screen-camera-tile span { position:absolute; bottom:2px; left:4px; padding:1px 4px; border-radius:4px; background:#0009; color:#fff; font-size:10px; line-height:14px; }
#screenCamerasEmpty { padding:10px; font-size:12px; }
/* Full screen (immersive): the picture fills the surface; the name and the
   time float at the top, the round controls at the bottom (leave, switch
   camera, self-view, camera off, chat, More), and the sheet with the rest
   slides up over the picture from the More button. */
.stage-overlay { position:absolute; z-index:40; left:0; right:0; bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px)); display:flex; justify-content:center; align-items:center; gap:10px; padding:0 6px; pointer-events:none; transition:opacity .25s ease,visibility .25s; }
.stage-overlay-button, .stage-overlay .video-camera-switch { position:relative; top:auto; right:auto; display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; padding:0; border:1px solid #a9c2d477; border-radius:50%; color:#fff; background:#152336e8; box-shadow:0 2px 12px #0005; pointer-events:auto; cursor:pointer; --clx-icon-size:30px; }
.stage-overlay-button:disabled { opacity:.55; cursor:default; }
/* End over a full-screen picture (2.44.0). */
.stage-overlay .stage-end-button { border-color:#fca5a5aa; background:#dc2626f0; color:#fff; }
.stage-overlay .call-chat-button > .call-chat-count { position:absolute; top:-4px; right:-4px; width:auto; height:19px; min-width:19px; margin:0; padding:0 5px; overflow:visible; clip-path:none; white-space:nowrap; display:inline-grid; place-items:center; border-radius:999px; box-shadow:0 0 0 2px #152336; background:#dc2626; color:#fff; font-size:11px; font-weight:700; line-height:1; pointer-events:none; }
.stage-overlay .call-chat-button > .call-chat-count.hidden { display:none; }
@media (max-width:439px) { .stage-overlay { gap:7px; } .stage-overlay-button, .stage-overlay .video-camera-switch { flex-basis:46px; width:46px; height:46px; --clx-icon-size:26px; } }
/* Seven controls (End among them since 2.44.0) on small phones: 360 px and 320 px wide. */
@media (max-width:379px) { .stage-overlay { gap:5px; padding:0 4px; } .stage-overlay-button, .stage-overlay .video-camera-switch { flex-basis:42px; width:42px; height:42px; --clx-icon-size:24px; } }
@media (max-width:339px) { .stage-overlay { gap:4px; } .stage-overlay-button, .stage-overlay .video-camera-switch { flex-basis:40px; width:40px; height:40px; --clx-icon-size:23px; } }
.stage-overlay-button.has-3d::before, .stage-overlay-button.has-minimal::before, .stage-overlay .video-camera-switch::before { margin:0 !important; }
.stage-overlay-button > svg { width:24px; height:24px; }
.stage-overlay-button[aria-expanded="true"], .stage-overlay-button.is-active { border-color:#74d9ff; background:#174562f2; }
.stage-overlay-button:active, .stage-overlay .video-camera-switch:active { transform:scale(.94); }
.camera-state-dot { position:absolute; width:8px; height:8px; border-radius:50%; bottom:7px; right:9px; background:#ff7385; box-shadow:0 0 0 2px #152336; }
[data-camera-on="true"] .camera-state-dot { background:#41e4a4; }
.call-surface.is-immersive { --screen-safe-top:env(safe-area-inset-top,0px); --screen-safe-right:env(safe-area-inset-right,0px); --screen-safe-bottom:env(safe-area-inset-bottom,0px); --screen-safe-left:env(safe-area-inset-left,0px); padding:0; background:#05090f; }
.call-surface.is-immersive .call-surface-shell { display:block; width:100%; max-width:none; height:100%; margin:0; padding:0; }
.call-surface.is-immersive .call-scroll { position:absolute; inset:0; display:block; height:100%; padding:0; overflow:hidden; }
.call-surface.is-immersive .call-scroll > :not(.video-pin):not(.call-peer) { display:none; }
.call-surface.is-immersive .call-peer { position:absolute; z-index:6; top:max(10px,calc(var(--screen-safe-top) + 8px)); left:max(10px,calc(var(--screen-safe-left) + 8px)); display:flex; align-items:center; gap:8px; max-width:calc(100% - 20px); padding:6px 12px; border-radius:999px; background:#0a1220b8; color:#fff; transition:opacity .25s ease,visibility .25s; }
.call-surface.is-immersive .call-peer .call-avatar, .call-surface.is-immersive .call-peer .call-secondary { display:none; }
.call-surface.is-immersive .call-peer .call-primary { margin:0; font-size:.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-surface.is-immersive .call-peer .call-timer { margin:0; font-size:.85rem; color:#ffffffcc; }
.call-surface.is-immersive .video-pin { position:absolute; inset:0; width:100%; height:100%; padding:0; }
.call-surface.is-immersive .video-stage { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; margin:0; border:0; border-radius:0; aspect-ratio:auto; box-shadow:none; }
/* A camera picture fills the screen; a shared screen is shown whole. */
.call-surface.is-immersive .video-stage .video-main-el { object-fit:cover; }
.call-surface.is-immersive .video-stage.is-screen .video-main-el { object-fit:contain; }
.call-surface.is-immersive #sharedScreenVideo { position:absolute; inset:var(--screen-safe-top) var(--screen-safe-right) var(--screen-safe-bottom) var(--screen-safe-left); width:calc(100% - var(--screen-safe-left) - var(--screen-safe-right)); height:calc(100% - var(--screen-safe-top) - var(--screen-safe-bottom)); object-fit:contain; background:#05090f; }
.call-surface.is-immersive .video-pip-el { right:max(12px,calc(var(--screen-safe-right) + 8px)); bottom:calc(max(14px,var(--screen-safe-bottom) + 8px) + 72px); width:min(30%,132px); max-width:132px; height:auto; aspect-ratio:3 / 4; max-height:calc(100% - 180px); border-radius:14px; }
.call-surface.is-immersive .video-pip-chip, .call-surface.is-immersive .video-stage-fs { display:none; }
.call-surface.is-immersive .screen-camera-strip { bottom:calc(max(14px,var(--screen-safe-bottom) + 8px) + 72px); }
.call-surface.is-immersive .remote-video-note { top:auto; bottom:calc(max(14px,var(--screen-safe-bottom) + 8px) + 76px); }
.call-surface.is-immersive.is-controls-hidden :is(.stage-overlay,.call-peer) { opacity:0; visibility:hidden; pointer-events:none; }
/* The sheet ends where the floating controls begin, so More stays in reach
   and nothing of the sheet is under the controls; on wide screens it is a
   centred column. */
.call-surface.is-immersive .screen-controls-drawer { position:absolute; z-index:30; left:max(0px,calc(50% - 360px)); right:max(0px,calc(50% - 360px)); bottom:calc(max(14px,var(--screen-safe-bottom) + 8px) + 68px); display:flex; flex-direction:column; gap:8px; max-height:calc(100% - 100px - var(--screen-safe-top)); padding:14px 12px 12px; border:1px solid #819fb366; border-radius:22px; background:#132032f5; box-shadow:0 8px 32px #0008; overflow-y:auto; overscroll-behavior:contain; visibility:hidden; opacity:0; transform:translateY(24px); transition:transform .2s ease,opacity .2s ease,visibility .2s; }
.call-surface.is-immersive .screen-controls-drawer.is-open { visibility:visible; opacity:1; transform:translateY(0); }
.call-surface.is-immersive .screen-controls-drawer > * { flex-shrink:0; width:100%; }
.call-surface.is-immersive .call-summary { order:0; padding:0; }
.call-surface.is-immersive .call-command-bar { order:2; padding:4px 0 0; }
.call-surface.is-immersive .call-settings-panel { position:static; order:1; max-height:none; overflow:visible; padding:10px; }
[data-theme="graphite"] .stage-overlay-button, [data-theme="graphite"] .stage-overlay .video-camera-switch { background:linear-gradient(145deg,#314256f5,#0c1523f5); border-color:#a4c0d366; }
[data-theme="graphite"] .is-immersive .screen-controls-drawer { background:linear-gradient(160deg,#203045f7,#090f19fa); }
[data-theme="minimal"] :is(.stage-overlay-button,.screen-camera-strip) { box-shadow:none; }
[data-theme="minimal"] .is-immersive .screen-controls-drawer { background:#1c232cf7; box-shadow:none; }
@media (prefers-reduced-motion:reduce) { .call-surface.is-immersive :is(.screen-controls-drawer,.stage-overlay,.call-peer) { transition:none; } }
:root[data-theme="minimal"] { --primary:#202a37; --primary-strong:#111821; --ring:0 0 0 3px #202a374d; --primary-soft:#eaf0f5; --clx-ink:#18202b; --clx-edge:#dce1e7; --radius-lg:16px; --shadow:0 1px 3px #14203306; }
[data-theme="minimal"] .app-body, [data-theme="minimal"] .auth-body { background:#f8f9fa; }
[data-theme="minimal"] :is(.app-header,.card,.auth-card,.modal-card,.dial-key,.logo-shell,.copy-chip,.icon-pill,.icon-button,.nav-item,.history-action,.soft-button) { background:#fff; box-shadow:none; border-color:#dce1e7; color:#263342; }
[data-theme="minimal"] .nav-item.active { background:#eaf0f5; border-color:#95a7ba; box-shadow:none; }
[data-theme="minimal"] .dial-call-button { background:#183f34; color:#fff; box-shadow:none; border-color:#183f34; }
[data-theme="minimal"] .primary-button { background:#22344a; box-shadow:none; border-color:#22344a; }
[data-theme="minimal"] .dial-digit { font-size:clamp(22px,5dvh,36px); font-weight:500; text-shadow:none; }
[data-theme="minimal"] .call-surface { background:#151a21; }
[data-theme="minimal"] .video-dock button { background:#2d3540; box-shadow:none; border-color:#65718355; }
[data-theme="minimal"] .dial-key-mark { display:none; }
[data-clx-icon].has-minimal::before { content:''; display:inline-block; width:var(--clx-icon-size); height:var(--clx-icon-size); flex:0 0 var(--clx-icon-size); background:currentColor; -webkit-mask:var(--clx-minimal-image) center / contain no-repeat; mask:var(--clx-minimal-image) center / contain no-repeat; vertical-align:middle; margin-inline-end:7px; }
.clx-icon-only.has-minimal { font-size:0; --clx-icon-size:24px; }
.clx-icon-only.has-minimal::before { margin:0; }
.has-minimal > svg, .has-minimal > .nav-icon { display:none; }
.report-chevron.has-minimal::before { margin:0; }
.video-pip-chip.has-minimal::after { display:none; }
.video-pip-chip.is-restore.has-minimal::before { rotate:180deg; }
.video-dock #muteMicBtn.active, .video-dock #muteRemoteBtn.active { background:#672e3d; border-color:#e67486; color:#ffd8df; }
.video-dock .danger { background:#702e40; color:#fff; border-color:#de728a; }
.video-dock #screenShareBtn.is-active { background:#145a45; border-color:#5bd4a5; }

/* The state of the call under the picture: one word with a dot in the
   colour of the state, and a line under it only when there is something to
   know or to do (the line is empty otherwise). The name, number and the
   time of the call are at the top, with the avatar. */
.call-peer { display:flex; flex-direction:column; align-items:center; }
.call-peer .call-timer { margin-top:6px; font-size:1.05rem; font-variant-numeric:tabular-nums; color:#ffffffcc; }
.has-video .call-peer .call-timer { margin-top:2px; font-size:.9rem; }
.call-summary .call-card { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px; background:transparent; border:0; box-shadow:none; }
.call-summary .call-card-headline { display:inline-flex; align-items:center; gap:8px; text-align:center; font-size:1.02rem; }
.call-summary .call-card-headline::before { content:''; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 3px #60a5fa33; }
.call-surface[data-call-state="waiting"] .call-card-headline::before { animation:call-state-pulse 1.4s ease-in-out infinite; }
.call-surface[data-call-state="connected"] .call-card-headline::before { background:#34d399; box-shadow:0 0 0 3px #34d39933; }
.call-surface[data-call-state="trouble"] .call-card-headline::before { background:#fbbf24; box-shadow:0 0 0 3px #fbbf2433; }
@keyframes call-state-pulse { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
/* The guidance under the headline (what is wrong, what to do): two lines at most,
   the full text stays in the accessibility tree (A36). */
.call-summary .call-card-detail { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; text-align:center; color:#c3d1e3; }
.call-summary .call-card-detail:empty { display:none; }
/* A call on the screen: the invitation chips of the header make way. */
.app-shell.is-in-call :is(#copyPhoneBtn, #sharePhoneBtn) { display:none; }
@media (max-height:600px) and (orientation:portrait) {
 .call-surface { --dock-h:110px; }
 .call-command-bar .video-dock, .call-command-bar .dock-row { gap:6px; }
 .call-command-bar .video-dock button, .call-command-bar .video-dock #activeCallActionBtn { height:44px; min-height:44px; --clx-icon-size:30px; }
 /* A video call on a short phone: the name and the time share one line and the
    stage keeps no top margin, so the 112 px stage (Full screen + Switch camera)
    fits the scroll area even when the guidance line below is showing. */
 .has-video:not(.is-immersive) .call-peer { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:baseline; column-gap:10px; }
 .has-video:not(.is-immersive) .call-peer .call-timer { margin-top:0; }
 .has-video .video-stage { margin-top:0; }
}
.profile-account #aboutLogoutBtn { width:100%; min-height:48px; }
#aboutUpdateStatus:empty { display:none; }
#playerAudio { width:100%; min-width:0; }
@media (max-width:350px) {
 .call-command-bar .video-dock, .call-command-bar .dock-row { gap:6px; }
 .call-command-bar .video-dock button { --clx-icon-size:28px; }
}
@media (orientation:landscape) and (max-height:500px) {
 .call-surface { --dock-h:106px; }
 .has-video .call-surface-shell { grid-template-columns:minmax(0,1fr) 264px; grid-template-rows:minmax(0,1fr) auto; }
 .has-video .call-scroll { grid-column:1; grid-row:1 / 3; }
 .has-video .call-summary { grid-column:2; grid-row:1; align-self:end; }
 .has-video .call-command-bar { grid-column:2; grid-row:2; }
 .call-command-bar .video-dock, .call-command-bar .dock-row { gap:5px; }
 .call-command-bar .video-dock button { height:44px; --clx-icon-size:28px; }
 .call-command-bar .video-dock #activeCallActionBtn { height:44px; min-height:44px; }
 .call-settings-panel { bottom:8px; max-height:calc(100% - 16px); }
}
/* Landscape phones in a voice call: name and avatar on the left, state, guidance
   and controls on the right (as in a video call), so the guidance line never
   pushes End call below the frame (A36). */
@media (orientation:landscape) and (max-height:500px) {
 .call-surface:not(.has-video):not(.is-immersive) .call-surface-shell { display:grid; grid-template-columns:minmax(0,1fr) 264px; grid-template-rows:minmax(0,1fr) auto auto; gap:4px 10px; }
 .call-surface:not(.has-video):not(.is-immersive) .call-scroll { grid-column:1; grid-row:1 / -1; }
 .call-surface:not(.has-video):not(.is-immersive) .call-summary { grid-column:2; grid-row:1; align-self:end; }
 .call-surface:not(.has-video):not(.is-immersive) .call-actions { grid-column:2; grid-row:2; }
 .call-surface:not(.has-video):not(.is-immersive) .call-command-bar { grid-column:2; grid-row:3; }
 /* The side column holds the state above the controls; the guidance takes one
    line (the full text stays for assistive technology). */
 .call-surface:not(.is-immersive) .call-summary .call-card { padding:4px 10px; }
 .call-surface:not(.is-immersive) .call-summary .call-card-detail { -webkit-line-clamp:1; }
}
/* Portrait phones up to 760 px tall in a video call: the picture was a 112 px strip
   with the camera switch cut off (U-15). The peer's number (the name stays) gives
   its row to it, and the guidance takes one line. */
@media (max-height:760px) and (orientation:portrait) {
 .has-video:not(.is-immersive) .call-secondary { display:none; }
 .has-video:not(.is-immersive) .call-summary .call-card-detail { -webkit-line-clamp:1; }
 .has-video:not(.is-immersive) .call-scroll { gap:8px; }
 /* The 44 px control rows of shorter phones (max-height 600px above). */
 .has-video:not(.is-immersive) { --dock-h:160px; }
 .has-video:not(.is-immersive) .call-command-bar .video-dock { grid-auto-rows:44px; gap:6px; }
 .has-video:not(.is-immersive) .call-command-bar .video-dock button, .has-video:not(.is-immersive) .call-command-bar .video-dock #activeCallActionBtn { height:44px; min-height:44px; --clx-icon-size:30px; }
}

/* --- 2.26.0: a lighter frame ------------------------------------------------
   The permission check above the keypad: short rows, a quiet Later button,
   a warm edge on a row that is blocked. */
.setup-banner { gap:6px; padding:10px 10px 10px 14px; border-radius:20px; }
.setup-banner-head { align-items:center; }
.setup-banner .section-topline { margin-bottom:2px; }
.setup-banner .section-title { font-size:1rem; line-height:1.25; margin:0; }
.setup-item { gap:10px; padding:8px 8px 8px 12px; border-radius:14px; }
.setup-item-copy { gap:2px; font-size:.84rem; }
.setup-item-copy strong { font-size:.9rem; }
.setup-item-copy span { line-height:1.35; }
.setup-item-btn { min-height:44px; padding:0 14px; border-radius:13px; font-size:.86rem; --clx-icon-size:20px; }
.setup-item.is-blocked { border-color:#e0a10055; background:color-mix(in srgb, #f59e0b 9%, var(--surface-strong)); }
.setup-banner.is-blocked { border-color:#e0a10066; }
#setupBannerCloseBtn { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 44px; padding:0; border-color:transparent; background:transparent; box-shadow:none; color:var(--muted); }
#setupBannerCloseBtn svg { width:18px; height:18px; }
#setupBannerCloseBtn:hover { background:var(--primary-soft); }
/* The number in the middle of the card; Paste is a small key beside it. */
.dialer-number-row { grid-template-columns:40px minmax(0,1fr) 40px; gap:6px; }
.dialer-number-row::before { content:''; }
.dialer-number-row .paste-chip { width:40px; height:40px; min-width:40px; min-height:40px; border-radius:12px; --clx-icon-size:24px; }
.dialer-number-row .paste-chip svg { width:18px; height:18px; }
input.dialer-number::placeholder { font-size:17px; font-weight:500; letter-spacing:0; }
.dialer-caption { font-size:.8rem; }

/* While a banner is shown above the keypad (or the name reminder above the
   frame), the card takes the room that is left and the keys shrink towards
   their floor before anything has to scroll; the spacer only gets what the
   card cannot use. */
.dialer-stack:has(> .card:not(.dialer-card):not(.hidden)) .dialer-card,
.app-shell:has(> .name-reminder:not(.hidden)) .dialer-card { flex: 1000 1 auto; }
.dialer-stack:has(> .card:not(.dialer-card):not(.hidden)) .dialpad-grid,
.app-shell:has(> .name-reminder:not(.hidden)) .dialpad-grid { flex: 1 1 0; height: auto; max-height: clamp(200px, 34dvh, 300px); margin-block: auto; }
/* Short screens: banners take one compact block so "Call now" stays in view. */
@media (max-height:760px) {
 .dialer-stack:has(> .card:not(.dialer-card):not(.hidden)) .dialer-caption,
 .app-shell:has(> .name-reminder:not(.hidden)) .dialer-caption { display:none; }
 .dialer-stack > .card:not(.dialer-card) { padding:8px 10px 8px 14px; border-radius:16px; }
 .dialer-stack .mini-badge { min-height:28px; padding:0 10px; }
 .update-card { gap:6px; }
 .update-card-head { align-items:center; }
 .update-card .section-topline { display:none; }
 .update-card .section-title, .setup-banner .section-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
 .update-card .section-title { font-size:1rem; }
 .update-card .update-notes { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .update-card-actions { flex-wrap:nowrap; gap:8px; }
 .update-card-actions > button { flex:1 1 0; min-width:0; min-height:44px; }
 .lifeline-banner { gap:4px; }
 .lifeline-banner-head { flex-wrap:nowrap; }
 .lifeline-banner-head strong { font-size:.85rem; }
 #lifelineBannerText { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; font-size:.8rem; line-height:1.35; }
 /* One grid: each row is a permission and its button; Later sits at the
    end of the first row; the heading goes to assistive technology only. A
    row that offers a button shows its title alone, a blocked row (no
    button) shows what breaks and how to fix it, in two lines at most. */
 .setup-banner { display:grid; grid-template-columns:minmax(0,1fr) auto 44px; align-items:center; gap:4px 8px; padding:6px 6px 6px 12px; }
 .setup-banner-head, .setup-item:not(.hidden) { display:contents; }
 .setup-banner-head > div { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 #setupBannerCloseBtn { grid-area:1 / 3; margin:0; }
 .setup-item-copy { grid-column:1; padding:0; }
 .setup-item:not(:has(> .setup-item-btn:not(.hidden))) > .setup-item-copy { grid-column:1 / 3; }
 .setup-item:has(> .setup-item-btn:not(.hidden)) .setup-item-copy span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .setup-item-copy span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.78rem; line-height:1.3; }
 .setup-item-btn { grid-column:2; min-height:44px; }
 .line-preview-avatar { width:36px; height:36px; flex:0 0 auto; }
 .line-preview-copy { flex:1 1 auto; }
 .line-preview-name, .line-preview-detail { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* The lines called last, above the keys (2.32.0). The list takes the room the
   keys leave (the spacer before the card stands down), scrolls inside it and
   is gone while there is nothing to show or the screen is too short. */
.keypad-recent { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 0; scrollbar-width: thin; }
.dialer-stack:has(> .keypad-recent:not(.hidden))::before { display: none; }
.keypad-recent-list { display: grid; gap: 8px; }
.keypad-recent .history-item { padding: 8px 10px; border-radius: 18px; gap: 8px; }
.keypad-recent .history-avatar { width: 38px; height: 38px; font-size: .85rem; }
.keypad-recent .history-name { font-size: .92rem; }
.keypad-recent .history-meta { font-size: .72rem; }
.keypad-recent .history-action { min-height: 40px; }
@media (max-height: 540px) { .keypad-recent { display: none; } .dialer-stack:has(> .keypad-recent)::before { display: block; } }
/* The Profile tab shows the line's own picture or initials (2.32.0). */
.nav-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--primary); background: var(--primary-soft) center / cover no-repeat; border: 1px solid #ffffff55; box-shadow: 0 1px 0 #0000001a; }
.nav-avatar.has-photo { color: transparent; }
.nav-item-profile.active .nav-avatar { box-shadow: 0 0 0 2px var(--primary); }