/* STRIDE call stage v2 (AJ approved 2026-09-25; prototype scratchpad callui/proto).
   Loaded last, so it owns the in-call stage:
   - camera-off seats: the person's photo or warm initials, lit in their own colour
   - mute-first glass name labels, visible on every seat, circle and PiP tile
   - the speaking ring that grows with the voice (stride-motion.md §7)
   - the avatar row for crowded mixed grids (#roomPresenceBar, has-circles)
   - dock clearance: the stage always ends above the dock band
   - reconnecting seats and the reconnecting status line
   - the in-call switcher that replaces the rail (AJ picked option c)
   Calls stay dark in both themes (components §16). */

@property --lvl { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --call-seat-text: #F5F5F7;
  --call-seat-text-2: #B3B5BC;
  --call-seat-raised: #26262B;
  --call-mute-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m2 2 20 20'/><path d='M5 10v2a7 7 0 0 0 12 0'/><path d='M15 9.34V5a3 3 0 0 0-5.68-1.33'/><path d='M9 9v3a3 3 0 0 0 5.12 2.12'/><path d='M12 19v3'/></svg>");
  --call-relay-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M790 240H444Q406 240 378 268L230 416Q202 444 230 472L374 616L474 516L402 444L462 384H646Z'/><path d='M234 784H580Q618 784 646 756L794 608Q822 580 794 552L650 408L550 508L622 580L562 640H378Z'/></svg>");
}

/* ---------- dock clearance: the stage never runs under the dock ----------
   The dock is 64 tall at bottom max(18, safe area); the stage reserves that
   band plus 16 even while the dock auto-hides, so no name, mute glyph or
   badge can ever sit beneath it and nothing jumps when it returns. */
@media (min-width: 641px) {
  #appShell.is-in-room[data-tool="room"] .presentation-tile,
  #appShell.is-authed.is-in-room[data-tool="room"] .presentation-tile,
  #appShell.is-authed.is-in-room[data-tool="room"]:not(.is-room-chat-open) .presentation-tile {
    padding-bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 64px + 16px);
  }
}

/* ---------- camera-off seats: everyone brings their own light ---------- */
#appShell .video-tile { --tint: #7C7B45; }
#appShell .video-tile .tile-avatar,
body .pip-tile .pip-tile__portrait {
  container-type: size;
  background:
    radial-gradient(120% 78% at 50% 116%, color-mix(in oklab, color-mix(in oklab, var(--tint) 70%, #FFD9B8) 58%, transparent) 0%, color-mix(in oklab, color-mix(in oklab, var(--tint) 70%, #FFD9B8) 16%, transparent) 46%, transparent 70%),
    color-mix(in oklab, var(--tint) 10%, var(--tile-fill, #141417));
}
/* the seat's light rises a little while they talk (opacity-only layer) */
#appShell .video-tile .tile-avatar::before,
body .pip-tile .pip-tile__portrait::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 78% at 50% 116%, color-mix(in oklab, color-mix(in oklab, var(--tint) 70%, #FFD9B8) 44%, transparent) 0%, transparent 62%);
  opacity: calc(var(--lvl) * .8);
}
#appShell .video-tile.is-placeholder .tile-avatar { display: grid; }
#appShell .video-tile.is-placeholder > .owner-avatar { display: none; }

.call-portrait {
  --disc: clamp(44px, 38cqmin, 168px);
  position: absolute; left: 50%; top: min(46%, calc(100% - 44px - var(--disc) / 2));
  width: var(--disc); height: var(--disc); translate: -50% -50%; z-index: 1;
}
.call-portrait__halo {
  position: absolute; inset: -24%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tint) 52%, #FFE6CF) 60%, color-mix(in oklab, color-mix(in oklab, var(--tint) 52%, #FFE6CF) 45%, transparent) 80%, transparent 100%);
  opacity: calc(.5 * var(--lvl)); transform: scale(calc(1 + .16 * var(--lvl)));
}
.call-portrait__disc {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
  background: linear-gradient(155deg, color-mix(in oklab, var(--tint) 78%, white) 0%, var(--tint) 62%, color-mix(in oklab, var(--tint) 82%, black) 100%);
  color: #fff; font: 600 calc(var(--disc) * .36)/1 var(--font-sans); letter-spacing: -.01em;
  box-shadow: 0 calc(var(--disc) * .08) calc(var(--disc) * .3) rgb(0 0 0 / .38);
}
.call-portrait__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the old "camera off" corner chip retires: the lit seat says it */
#appShell.is-in-room .video-tile.is-camera-off .media-flag--camera { display: none; }

/* ---------- the name label: a glass pill, mute glyph first ---------- */
#appShell.is-in-room .video-tile .video-label,
#appShell.is-in-room .hearth-seat .video-label {
  left: 8px; right: auto; bottom: 8px; z-index: 6;
  display: block; max-width: calc(100% - 16px); height: 24px; padding: 0 9px 0 8px;
  border-radius: 999px; background: var(--glass-media); color: var(--call-seat-text);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 500 12px/24px var(--font-sans); text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#appShell.is-in-room .video-tile.has-drag-control .video-label { max-width: calc(100% - 64px); padding-right: 9px; }
#appShell.is-in-room .video-tile .video-label::before { content: none; }
#appShell.is-in-room .video-tile.is-muted .video-label::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -3px;
  background: currentColor; -webkit-mask: var(--call-mute-mask) center / contain no-repeat; mask: var(--call-mute-mask) center / contain no-repeat;
}
#appShell.is-in-room .video-tile.is-muted:not(.is-hand-raised) .video-label::after { content: none; }
.call-mute-glyph {
  display: inline-block; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--call-mute-mask) center / contain no-repeat; mask: var(--call-mute-mask) center / contain no-repeat;
}

/* ---------- the speaking ring grows with the voice ---------- */
#appShell .video-tile.is-voice::after,
body .pip-tile.is-voice::after {
  box-shadow: inset 0 0 0 2px var(--speaker-accent), inset 0 0 0 3px color-mix(in srgb, var(--bg-stage) 30%, transparent);
}
.call-ring-level {
  position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 4px var(--speaker-accent); opacity: 0;
}
.is-voice > .call-ring-level { opacity: min(1, calc(var(--lvl) * 1.1)); }

/* ---------- the avatar row (crowded mixed grids) ---------- */
#appShell .room-presence-bar.has-circles {
  width: 100%; min-height: 0; margin: 12px auto 0; padding: 4px 0 0; gap: 12px; justify-content: center;
  overflow: visible; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#appShell .room-presence-bar .room-circle {
  --circle-disc: 56px;
  display: grid; grid-template-columns: none; justify-items: center; gap: 6px;
  width: 72px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--call-seat-text);
}
#appShell .room-presence-bar .room-circle--more { cursor: pointer; font: inherit; }
.room-circle__seat { position: relative; width: var(--circle-disc); height: var(--circle-disc); display: block; }
.room-circle .call-portrait { --disc: var(--circle-disc); position: relative; left: auto; top: auto; translate: none; width: var(--disc); height: var(--disc); }
.room-circle .call-portrait__disc { box-shadow: 0 6px 18px rgb(0 0 0 / .35); font-size: calc(var(--disc) * .34); }
.room-circle__ring, .room-circle__ring-level { position: absolute; inset: -4px; z-index: 2; border-radius: 50%; pointer-events: none; opacity: 0; }
.room-circle__ring { box-shadow: 0 0 0 2px var(--speaker-accent); transition: opacity 320ms var(--ease); }
.room-circle.is-voice .room-circle__ring { opacity: 1; transition-duration: 120ms; }
.room-circle__ring-level { box-shadow: 0 0 0 4px var(--speaker-accent); }
.room-circle.is-voice .room-circle__ring-level { opacity: min(1, calc(var(--lvl) * 1.1)); }
.room-circle__mute {
  position: absolute; right: -3px; bottom: -3px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--call-seat-raised); color: var(--call-seat-text);
  box-shadow: 0 0 0 2px var(--bg-stage);
}
.room-circle__mute .call-mute-glyph { width: 12px; height: 12px; }
.room-circle__more { display: grid; place-items: center; border-radius: 50%; background: var(--call-seat-raised); color: var(--call-seat-text-2); font: 600 15px/1 var(--font-sans); }
#appShell .room-presence-bar .room-circle__name {
  max-width: 100%; color: var(--call-seat-text-2); font: 500 12px/16px var(--font-sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#appShell .room-presence-bar .room-circle.is-voice .room-circle__name { color: var(--call-seat-text); }
@media (max-width: 640px) {
  #appShell .room-presence-bar.has-circles { gap: 6px; }
  #appShell .room-presence-bar .room-circle { --circle-disc: 48px; width: 66px; }
}

/* ---------- PiP tiles: lit seat, mute-first label ---------- */
body .pip-tile .owner-avatar.pip-tile__portrait { position: absolute; inset: 0; top: 0; left: 0; translate: none; width: auto; height: auto; border-radius: inherit; display: block; box-shadow: none; }
body .pip-tile .pip-tile__portrait .call-portrait { --disc: clamp(36px, 40cqmin, 96px); }
body .pip-tile .pip-tile__label { display: inline-flex; align-items: center; gap: 4px; }
body .pip-tile .pip-tile__label .call-mute-glyph { width: 12px; height: 12px; }

/* ---------- reconnecting: keep the last frame, say so quietly ---------- */
#appShell .video-tile.is-uplink-reconnecting video { opacity: 1 !important; filter: saturate(.55) brightness(.62); }
#appShell .video-tile.is-uplink-reconnecting:not(.is-camera-off) .tile-avatar { display: none; }
.call-reconnecting {
  position: absolute; left: 50%; top: 50%; z-index: 6; translate: -50% -50%;
  height: 28px; padding: 0 12px 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-media); color: var(--call-seat-text); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 500 12px/1 var(--font-sans); white-space: nowrap; pointer-events: none;
}
.call-relay {
  width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--call-relay-mask) center / contain no-repeat; mask: var(--call-relay-mask) center / contain no-repeat;
  animation: call-relay 1.4s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
@keyframes call-relay { from { opacity: 1; } to { opacity: .45; } }
.call-reconnect-status { display: inline-flex; align-items: center; gap: 6px; color: #F5B544; font: 500 12px/1 var(--font-sans); }
.call-reconnect-status[hidden] { display: none; }
#appShell.is-call-reconnecting #roomTranscriptPill { display: none; }

/* ---------- "You're muted" (talking while muted): inside the dock ----------
   The mic seat widens into a pill around its words. Lifted past the kit's
   .call-ctl seat (3 ids), which pins every seat to 48px: under it the words
   spilled out of the dock (AJ 2026-10-15). A long translation ends in an
   ellipsis inside the pill. */
#appShell.is-in-room .meeting-bar #muteMic.is-muted-nudge.call-ctl:not(#k):not(#k):not(#k) {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; max-width: 240px; padding: 0 16px 0 13px; gap: 8px;
}
#appShell.is-in-room .meeting-bar #muteMic.is-muted-nudge .mute-label {
  position: static; display: block; width: auto; height: auto; min-width: 0; clip: auto; clip-path: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 14px/1.2 var(--font-sans); color: inherit;
}
/* phones: the dock has no room to widen, so the seat keeps its size and the
   words ride a small glass caption just above it, inside the screen */
@media (max-width: 640px) {
  #appShell.is-in-room .meeting-bar #muteMic.is-muted-nudge.call-ctl:not(#k):not(#k):not(#k) {
    display: grid; width: 48px; max-width: none; padding: 0;
  }
  #appShell.is-in-room .meeting-bar #muteMic.is-muted-nudge .mute-label {
    position: absolute; left: 0; bottom: calc(100% + 18px);
    max-width: calc(100vw - 48px); padding: 8px 12px;
    border-radius: var(--r-full);
    background: var(--glass-media, rgb(28 28 32 / .84)); color: var(--call-ctl-fg, #F5F5F7);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 4px 16px rgb(0 0 0 / .28);
    font: 500 13px/1.2 var(--font-sans); pointer-events: none;
  }
}

/* ---------- the in-call switcher: the rail steps aside (AJ picked c) ----------
   The stage runs full-bleed; one glass "Stride" pill at the top left carries
   the unread count and opens Home, Conversations and Drive. Leaving keeps the
   call going in the PiP. */
@media (min-width: 641px) {
  html #appShell.is-authed.is-in-room[data-tool="room"] { --rail-width: 0px; padding-left: 0; }
  html #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail { display: none !important; }
  html #appShell.is-authed.is-in-room[data-tool="room"] .presentation-tile,
  html #appShell.is-authed.is-in-room[data-tool="room"]:not(.is-room-chat-open) .presentation-tile { padding-top: 56px; }
}
.call-switcher { display: none; }
@media (min-width: 641px) {
  #appShell.is-authed.is-in-room[data-tool="room"] .call-switcher { display: block; position: absolute; left: 16px; top: 12px; z-index: 40; }
}
.call-switcher__button {
  height: 36px; padding: 0 10px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--glass-media); color: var(--call-seat-text); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 500 13px/1 var(--font-sans); transition: transform 120ms var(--ease), background-color 120ms var(--ease);
}
.call-switcher__button:active { transform: scale(.98); }
@media (hover: hover) { .call-switcher__button:hover { background: var(--glass-media-hover, var(--glass-media)); } }
.call-switcher__button:focus-visible { outline: 2px solid var(--ring, #FF7A40); outline-offset: 2px; }
.call-switcher__mark { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--call-relay-mask) center / contain no-repeat; mask: var(--call-relay-mask) center / contain no-repeat; }
.call-switcher__count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--unread, #FF6A2B); color: var(--on-unread, #1A0800); font: 600 11px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.call-switcher__count[hidden] { display: none; }
.call-switcher__chevron { width: 14px; height: 14px; opacity: .7; }
.call-switcher__menu {
  position: absolute; left: 0; top: 44px; width: 248px; padding: 4px; border-radius: 12px; color: #F5F5F7;
  background: rgba(29, 29, 33, .92); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 16px 40px #0000008C; transform-origin: 0 0;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.call-switcher__menu[hidden] { display: none; }
@starting-style { .call-switcher__menu { opacity: 0; transform: scale(.96); } }
.call-switcher__item {
  width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; display: flex; align-items: center; gap: 12px;
  background: transparent; color: inherit; font: 500 14px/1 var(--font-sans); text-align: left; cursor: pointer;
}
.call-switcher__item > span:first-of-type { flex: 1; }
.call-switcher__item svg { width: 20px; height: 20px; flex: none; }
.call-switcher__item:hover, .call-switcher__item:focus-visible { background: rgb(255 255 255 / .08); outline: 0; }
.call-switcher__note { display: block; margin: 4px 8px 0; padding: 8px 2px 6px; border-top: 1px solid rgb(255 255 255 / .08); color: #B3B5BC; font: 400 12px/1.35 var(--font-sans); }

/* ---------- Reduce Motion: the canon ring stays; no level layer, halo or glow ---------- */
@media (prefers-reduced-motion: reduce) {
  .call-ring-level, .room-circle__ring-level, .call-portrait__halo { display: none; }
  #appShell .video-tile .tile-avatar::before, body .pip-tile .pip-tile__portrait::before { opacity: 0; }
  .call-relay { animation: none; }
  .call-switcher__menu { transition: opacity 120ms linear; }
}
@media (prefers-reduced-transparency: reduce) {
  .call-switcher__button, .call-reconnecting, #appShell.is-in-room .video-tile .video-label { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--call-seat-raised); }
}

/* the tiny status line centres above the stage; the switcher owns the left */
@media (min-width: 641px) {
  #appShell.is-authed.is-in-room[data-tool="room"] .stage-chrome__meeting {
    top: 20px; left: 50%; right: auto; translate: -50% 0; justify-content: center;
    font: 500 12px/1 var(--font-sans); color: var(--call-seat-text-2);
  }
}

/* phone strip seats are small: the label takes the seat's width */
@media (max-width: 640px) {
  #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .video-label,
  #appShell.is-in-room .video-tile.has-drag-control:not(.is-mobile-hero) .video-label {
    left: 6px; bottom: 6px; max-width: calc(100% - 12px); height: 22px; padding: 0 7px; font: 500 11px/22px var(--font-sans);
  }
  #appShell.is-in-room .video-tile.is-muted:not(.is-mobile-hero) .video-label::before { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }
}

/* the share filmstrip keeps the same glass name pill, mute first: muted is
   visible everywhere, the minis included (AJ, 2026-09-25) */
html #appShell.is-in-room .presentation-tile.is-screen-sharing .hearth-seat .video-label {
  left: 6px; right: auto; bottom: 6px; max-width: calc(100% - 12px); height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--glass-media); color: var(--call-seat-text);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 500 11px/22px var(--font-sans);
}
html #appShell.is-in-room .presentation-tile.is-screen-sharing .video-tile.is-muted .video-label::before { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }

/* calls are always on the dark stage, Daybreak included (components §16):
   the light theme's stage is the warm #110D0B, never the sunlit ground */
#appShell.is-in-room[data-tool="room"] .presentation-tile,
#appShell.is-in-room[data-tool="room"] .workspace { background: var(--bg-stage); }
#appShell.is-in-room[data-tool="room"] :is(.hearth-stage, .hearth-center, #videoStack) { background: transparent; }
html[data-theme="light"] #appShell.is-in-room[data-tool="room"] { background: var(--bg-stage); }

/* phone share (AJ, 2026-09-26): the share leads at the top, full width and
   as tall as its own shape (never a black band above or below it); the
   people strip sits right beneath, and the dock band stays clear */
@media (max-width: 640px) {
  html #appShell.is-in-room[data-tool="room"] .presentation-tile.is-screen-sharing {
    grid-template-rows: auto 104px; align-content: start;
  }
  html #appShell.is-in-room[data-tool="room"] .presentation-tile.is-screen-sharing .screen-stage {
    height: auto; aspect-ratio: var(--share-aspect, 16 / 9); max-height: 62svh; width: 100%;
  }
  html #appShell.is-in-room[data-tool="room"] .presentation-tile.is-screen-sharing .screen-stage video#screenStageVideo {
    width: 100%; height: 100%; object-fit: contain;
  }
}

/* ---------- Release C: in-call chrome is the stage and the dock ----------
   Phones too: no app top bar (back, search) in a call. The desktop rule
   lives in workspace.css; this closes the phone gap (WEB_QA #13). */
@media (max-width: 640px) {
  #appShell.is-authed.is-in-room[data-tool="room"] { --shell-topbar-height: 0px; }
  #appShell.is-authed.is-in-room[data-tool="room"] > .topbar,
  #appShell.is-authed.is-in-room[data-tool="room"] .topbar { display: none; }
}

/* tile corner controls sit side by side and never overlap: the pin holds
   the corner, the host ⋮ sits one control plus a 6px gap to its left, and
   the media flags clear both (36 on a fine pointer, 44 on touch) */
#appShell.is-in-room .video-tile { --tile-corner-ctl: 36px; }
@media (pointer: coarse) { #appShell.is-in-room .video-tile { --tile-corner-ctl: 44px; } }
html #appShell.is-in-room .video-tile > .tile-host-menu.call-ctl--xs:not(#k):not(#k):not(#k) {
  top: 10px; right: calc(10px + var(--tile-corner-ctl) + 6px);
}
html #appShell.is-in-room .video-tile:has(> .tile-host-menu) .media-flags {
  right: calc(10px + 2 * var(--tile-corner-ctl) + 12px);
}
/* your own seat (the floating self view included): its ⋯ sits beside the
   pin the same way, centred on the pin's row */
html #appShell.is-in-room .video-tile:has(> .pin-speaker) > .self-view__menu {
  top: calc(10px + (var(--tile-corner-ctl) - 30px) / 2); right: calc(10px + var(--tile-corner-ctl) + 6px);
}

/* phone filmstrip seats carry no control over the face: a tap anywhere on
   the seat brings that person to the hero, where the pin and host ⋮ live.
   The pin becomes the invisible full-seat tap target it was designed as
   (the kit's 44px corner size had shrunk it into a stray corner), and your
   own seat keeps one small glass ⋯ tucked in its corner. */
@media (max-width: 640px) {
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .tile-host-menu { display: none; }
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .pin-speaker.call-ctl--xs:not(#k):not(#k):not(#k) {
    inset: 0; width: 100%; min-width: 0; height: 100%; min-height: 0;
    border-radius: inherit; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    opacity: 0; transform: none;
  }
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .pin-speaker.call-ctl--xs:not(#k):not(#k):not(#k)::before { content: none; }
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .pin-speaker.call-ctl--xs:not(#k):not(#k):not(#k):focus-visible {
    opacity: 1; outline: none; box-shadow: inset 0 0 0 2px #fff;
  }
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .self-view__menu {
    top: 4px; right: 4px; width: 24px; height: 24px;
  }
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .self-view__menu svg { width: 14px; height: 14px; }
  html #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .self-view__menu::before {
    content: ""; position: absolute; inset: -10px; border-radius: inherit;
  }
}

/* the presenter's camera stays live beside the share: with the share on its
   own uplink (Wave 6 D4) the seat's video IS the camera, so viewers see the
   presenter's face, not a camera-off monogram. The legacy single-uplink room
   (share replaced the camera) keeps the monogram. */
html #appShell .presentation-tile.is-screen-sharing .hearth-seat.is-sharing-screen.has-camera-beside-share video { opacity: 1; }
html #appShell .presentation-tile.is-screen-sharing .hearth-seat.is-sharing-screen.has-camera-beside-share .tile-avatar { display: none; }

/* the mini call while you share: the status line says so and one engaged
   glass control stops the share without going back to the room */
.pip-control--share.call-ctl:not(#k):not(#k):not(#k) { background: var(--call-ctl-selected); }
.pip-control--share.call-ctl:not(#k):not(#k):not(#k)[hidden] { display: none; }
/* the phone mini call is too narrow for five controls and the Return pill:
   while you share, the head's expand control (the same Return) carries it */
@media (max-width: 640px) {
  body .pip-meeting[data-sharing="true"]:not([data-composite="true"]) .pip-return { display: none; }
}