/* LOOK Group Call Layer — look-group-call-layer.css
 * Round F UI wave: Concept B "In-Theme Spotlight" (binding spec:
 * docs/group-call-design/SELECTED-DESIGN.md).
 *
 * Palette: LOOK Blue family ONLY (#0E77F2 / #50B5FF / #4BC3F7) over the app's
 * existing design tokens (hsl(var(--…)) from frontend-kimi/src/index.css
 * :root/.dark — glass, card, border, icon-bg, cyan, success, warning,
 * divider, primary-light/-dark, ease-out-soft). NO VIOLET anywhere in this
 * file, no new palette. The legacy near-black stage color #0f1221 is kept
 * only as a pre-token fallback behind the in-theme background. Arabic-first,
 * RTL-safe (logical properties throughout).
 *
 * Modes: MINI = in-flow 64px strip mounted inside #lookGroupCallMiniMount in
 * the chat column (pushes messages down, never overlays); FULL = fixed
 * in-theme stage (z-index 1090, same as Round E). Expand/minimize is a
 * UI-only class/visibility switch — see the layer JS.
 */

/* ---------- root + FULL stage ---------- */

#lookGroupCallLayer {
  font-family: 'Tajawal', 'Plus Jakarta Sans', system-ui, sans-serif;
  color: hsl(var(--foreground));
}

#lookGroupCallLayer[hidden] { display: none; }

.lgc-full {
  position: fixed;
  inset: 0;
  z-index: 1090;
  /* Pre-token fallback first (the Round D/E stage color), then the in-theme
     background required by Concept B — browsers with custom properties use
     the second declaration. */
  background: #0f1221;
  background: hsl(var(--background));
  display: flex;
  flex-direction: column;
  padding-block-start: env(safe-area-inset-top, 0px);
}
.lgc-full[hidden] { display: none; }

/* Light theme only: the faint R97.1 blue wash over the stage. */
:root:not(.dark) .lgc-full {
  background:
    linear-gradient(180deg, rgba(75, 195, 247, 0.14) 0%, rgba(75, 195, 247, 0.06) 40%, hsl(var(--background)) 70%);
}

/* --- FULL header bar (same glass recipe as the chat header) --- */
.lgc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: hsl(var(--glass-white) / 0.78);
  border-bottom: 1px solid hsl(var(--glass-border) / 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex: 0 0 auto;
}
.lgc-header-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lgc-title {
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-status {
  font-size: 12px; /* Round H: was 11px — comfort floor inside the header budget */
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-connecting .lgc-status { color: hsl(var(--cyan)); }
.lgc-duration {
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary-light));
  padding: 5px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  flex: 0 0 auto;
}
.dark .lgc-duration { color: #50b5ff; }

.lgc-btn.lgc-minimize {
  width: 44px;
  height: 44px;
  border-radius: 0.9rem;
  background: rgba(80, 181, 255, 0.15);
  color: #50b5ff;
  border: none;
  font-size: 20px;
}

/* --- FULL stage body: spotlight tile + rail (ONE persistent grid) --- */
.lgc-stage-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
}
.lgc-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 22px 18px;
  max-width: 320px;
}

.lgc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  /* Round I: 86→92px — names breathe at reading size before ellipsis. */
  width: 92px;
  min-width: 0;
  transition: opacity 200ms var(--ease-out-soft);
}

.lgc-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background-size: cover;
  background-position: center;
  border: 2px solid hsl(var(--border));
  transition: box-shadow 200ms ease, border-color 200ms ease, width 200ms var(--ease-out-soft), height 200ms var(--ease-out-soft), font-size 200ms var(--ease-out-soft);
}

/* Deterministic LOOK-blue gradient family (selected per uid in JS) */
.lgc-avatar-g0 { background-image: linear-gradient(135deg, #0e77f2, #50b5ff); }
.lgc-avatar-g1 { background-image: linear-gradient(135deg, #0e77f2, #4bc3f7); }
.lgc-avatar-g2 { background-image: linear-gradient(160deg, #0b5fc4, #50b5ff); }
.lgc-avatar-g3 { background-image: linear-gradient(160deg, #0b5fc4, #4bc3f7); }

/* Spotlight: the active speaker grows generously while remaining Fold-safe. */
.lgc-tile.is-spotlight {
  flex-basis: 100%;
  width: 100%;
  gap: 10px;
}
.lgc-tile.is-spotlight .lgc-avatar {
  width: clamp(156px, 42vw, 190px);
  height: clamp(156px, 42vw, 190px);
  font-size: clamp(46px, 12vw, 58px);
}
.lgc-tile.is-spotlight .lgc-name { font-size: 17px; }

/* Round K — strong moving green speaking light. The border/glow is the
   fallback; the conic pseudo-ring adds visible circular motion on modern
   Android WebView without changing layout or intercepting touches. */
.lgc-tile.is-speaking .lgc-avatar {
  border-color: #22c55e;
  box-shadow:
    0 0 0 5px rgba(34, 197, 94, 0.34),
    0 0 34px rgba(34, 197, 94, 0.58);
}
.lgc-tile.is-speaking .lgc-avatar::before,
.lgc-mini-avatar.is-speaking::before,
.lgc-mini-cell-avatar.is-speaking::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 0deg, #16a34a, #86efac, rgba(34, 197, 94, 0.12), #22c55e, #16a34a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: lgc-speaker-orbit 1.45s linear infinite;
  filter: drop-shadow(0 0 7px rgba(34, 197, 94, 0.72));
}
@keyframes lgc-speaker-orbit {
  to { transform: rotate(360deg); }
}

@keyframes lgc-spot {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(34, 197, 94, 0.34),
      0 0 30px rgba(34, 197, 94, 0.42);
  }
  50% {
    box-shadow:
      0 0 0 9px rgba(34, 197, 94, 0.18),
      0 0 44px rgba(34, 197, 94, 0.64);
  }
}

.lgc-name {
  /* Round I: 86→92px with the tile; the full name rides the title attribute
     and the self tile no longer glues "· you" onto the line. */
  max-width: 92px;
  font-size: 12.5px; /* Round H: was 11.5px — participant names at reading size */
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-tile.is-spotlight .lgc-name { max-width: 220px; }

/* Status sub-line: text twin for reconnect/mute (no motion-only meaning). */
.lgc-sub {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px; /* Round H: was 9.5px — status twins must be legible */
}
.lgc-sub[hidden] { display: none; }
.lgc-sub-reconnect { color: hsl(var(--cyan)); }
.lgc-sub-muted { color: hsl(var(--muted-foreground)); }

/* Round H — Full Spotlight 5-bar audio level (Concept B). Data-driven
   heights (inline scaleY from the engine's audioLevel), LOOK-cyan bars, a
   calm 160ms transition; hidden on every non-spotlight tile. No looping
   animation — Reduced Motion only removes the transition. */
.lgc-level5 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 14px;
}
.lgc-level5[hidden] { display: none; }
.lgc-level5 i {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: #4bc3f7;
  display: block;
  transform: scaleY(0.18);
  transform-origin: bottom;
  transition: transform 160ms var(--ease-out-soft);
}
.lgc-speaking-label {
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--cyan));
  white-space: nowrap;
}
.lgc-speaking-label[hidden] { display: none; }
.lgc-tile.is-spotlight .lgc-speaking-label { font-size: 12.5px; }

/* Round H — founder ghost presence (founder-claim holders ONLY; the engine
   never emits ghosts to normal participants and the layer re-gates on the
   claim). Subtle header pill, calm muted chrome. */
.lgc-ghost-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 4px 10px;
  flex: 0 0 auto;
}
.lgc-ghost-badge[hidden] { display: none; }
.lgc-ghost-badge .ph { color: hsl(var(--cyan)); font-size: 13px; }

.lgc-mute-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 11px;
}
.lgc-mute-badge[hidden] { display: none; }

/* Reconnecting badge (Round E): same chip language as the mute badge, on
   the opposite corner, in the light LOOK-blue, while the pair sits inside
   the engine's reconnect grace. */
.lgc-reconnect-badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--card));
  border: 1px solid rgba(75, 195, 247, 0.45);
  color: hsl(var(--cyan));
  font-size: 11px;
}
.lgc-reconnect-badge[hidden] { display: none; }
.lgc-reconnect-badge .ph { animation: lgc-spin 1.4s linear infinite; }

@keyframes lgc-spin { to { transform: rotate(360deg); } }

/* Degraded pair: a thin cyan avatar ring (subtler than the speaker glow). */
.lgc-tile.is-degraded .lgc-avatar {
  border-color: rgba(75, 195, 247, 0.6);
}

/* --- FULL controls: 5 labeled stacks (labels required — never icon-only) --- */
.lgc-controls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  /* Round H consolidation: worst-case 5-stack row is exactly 360px — wrap
     gracefully on ≤340px hosts instead of clipping ~20px. On ≥360px the
     single row is unchanged (wrap only engages when content overflows). */
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 14px 12px calc(26px + env(safe-area-inset-bottom, 0px));
  flex: 0 0 auto;
}
.lgc-cstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lgc-cstack[hidden] { display: none; }
.lgc-clabel {
  font-size: 11px; /* Round H: was 10px — control labels at comfort size */
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.lgc-btn {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  color: hsl(var(--foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  transition: transform 120ms ease, background 140ms ease;
}
.lgc-btn:active { transform: scale(0.92); }
.lgc-btn[hidden] { display: none; }

/* G8: keyboard focus must be visible on every interactive control (the layer
   ships on web too). LOOK light-blue ring, both themes, never purple. */
.lgc-btn:focus-visible,
.lgc-mini-btn:focus-visible,
.lgc-invite-action:focus-visible,
.lgc-admin-remove:focus-visible,
.lgc-admin-unban:focus-visible,
.lgc-admin-invite:focus-visible,
.lgc-invite-pick:focus-visible,
.lgc-btn.lgc-minimize:focus-visible {
  outline: 2px solid #50b5ff;
  outline-offset: 2px;
}

.lgc-btn.is-toggled {
  background: hsl(var(--primary));
  border-color: transparent;
  color: #fff;
}

/* Hang-up red: hsl(0 84% 60%) in BOTH themes (spec — the dark theme's muted
   --destructive surface red is explicitly rejected for the leave control). */
.lgc-btn.lgc-leave {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: hsl(0 84% 60%);
  border-color: transparent;
  color: #fff;
}

/* --- FULL admin card (host only) ---
   Round I: contained bottom SHEET, never a screen takeover — absolutely
   positioned above the controls inside the fixed stage, capped height, a
   grab handle, and a scrim behind it (tap = close). The spotlight stage
   stays visible and readable above the sheet. */
.lgc-admin {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  margin: 0;
  border-radius: 22px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--glass-shadow);
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: min(52%, 430px);
}
/* Sheet grab handle (Concept B sheet language). */
.lgc-admin::before {
  content: '';
  align-self: center;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--muted-foreground) / 0.35);
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.lgc-admin[hidden] { display: none; }

/* Scrim behind contained sheets (admin; tap-outside-to-close). */
.lgc-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(15, 18, 33, 0.28);
}
.lgc-scrim[hidden] { display: none; }
.lgc-admin-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: hsl(var(--foreground));
}
.lgc-admin-title .ph { color: hsl(var(--primary)); }
.lgc-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-bottom: 1px solid hsl(var(--divider));
}
.lgc-admin-row:last-of-type { border-bottom: none; }
.lgc-admin-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
}
.lgc-admin-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--foreground));
}
.lgc-admin-crown { color: hsl(var(--warning)); font-size: 13px; }
.lgc-chip {
  font-size: 11px; /* Round H: was 10px — state chips at comfort size */
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.lgc-chip-pending { background: hsl(var(--primary-light)); color: hsl(var(--primary-dark)); }
.dark .lgc-chip-pending { color: #50b5ff; }
.lgc-chip-accepted { background: hsl(var(--success) / 0.16); color: hsl(var(--success)); }
.lgc-chip-declined { background: hsl(0 84% 60% / 0.14); color: hsl(0 84% 52%); }
.dark .lgc-chip-declined { color: hsl(0 84% 70%); }
.lgc-chip-offline { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lgc-chip-left {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
}
.lgc-admin-remove {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid hsl(0 84% 60% / 0.4);
  background: hsl(0 84% 60% / 0.10);
  color: hsl(0 84% 52%);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dark .lgc-admin-remove { color: hsl(0 84% 68%); }

/* Round H (M3) — banned roster inside the admin card (no new pages). */
.lgc-admin-banned {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid hsl(var(--divider));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lgc-admin-banned-title {
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: hsl(var(--foreground));
}
.lgc-admin-banned-title .ph { color: hsl(0 84% 52%); }
.dark .lgc-admin-banned-title .ph { color: hsl(0 84% 68%); }
.lgc-admin-banned-empty {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  padding: 4px 2px 6px;
}
.lgc-chip-banned { background: hsl(0 84% 60% / 0.14); color: hsl(0 84% 52%); }
.dark .lgc-chip-banned { color: hsl(0 84% 70%); }
.lgc-admin-unban {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid hsl(var(--primary) / 0.35);
  background: hsl(var(--primary-light));
  color: hsl(var(--primary-dark));
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 120ms ease, background 140ms ease;
}
.lgc-admin-unban:active { transform: scale(0.92); }
.dark .lgc-admin-unban { color: #50b5ff; }
.lgc-admin-invite {
  margin-top: 8px;
  min-height: 46px;
  border-radius: 999px;
  border: none;
  background: hsl(var(--primary));
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lgc-invite-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.lgc-invite-empty {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  padding: 8px 2px;
}
.lgc-invite-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: 4px 10px;
  text-align: start;
}
.lgc-invite-pick[aria-pressed="true"] {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary-light));
}

/* Round I — ringing chip (invite lobby): LOOK-cyan, calm pulse, text twin. */
.lgc-chip-ringing {
  background: hsl(var(--primary-light));
  color: hsl(var(--primary-dark));
  animation: lgc-chip-breathe 2.2s var(--ease-out-soft) infinite;
}
.dark .lgc-chip-ringing { color: #50b5ff; }
@keyframes lgc-chip-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* --- Round I — invite lobby strip (FULL stage, host waiting view) --- */
.lgc-lobby {
  margin-top: 18px;
  width: min(100%, 340px);
  border-radius: 20px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--glass-shadow);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lgc-lobby[hidden] { display: none; }
.lgc-lobby-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: hsl(var(--foreground));
}
.lgc-lobby-title .ph { color: hsl(var(--cyan)); }
.lgc-lobby-row { min-height: 48px; }
.lgc-lobby-cancel {
  margin-top: 10px;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid hsl(0 84% 60% / 0.4);
  background: hsl(0 84% 60% / 0.10);
  color: hsl(0 84% 52%);
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dark .lgc-lobby-cancel { color: hsl(0 84% 68%); }

/* --- Round I — invite-first member picker (pre-call bottom sheet) --- */
.lgc-picker {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lgc-picker[hidden] { display: none; }
.lgc-picker-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 33, 0.34);
}
.lgc-picker-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--glass-shadow);
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.lgc-sheet-handle {
  align-self: center;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--muted-foreground) / 0.35);
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.lgc-picker-head { margin-bottom: 8px; }
.lgc-picker-title {
  font-size: 16px;
  font-weight: 800;
  color: hsl(var(--foreground));
}
.lgc-picker-hint {
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}
.lgc-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lgc-picker-pick { position: relative; }
.lgc-picker-pick.is-disabled { opacity: 0.45; }
.lgc-picker-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid hsl(var(--border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 13px;
  flex: 0 0 auto;
}
.lgc-picker-pick[aria-pressed="true"] .lgc-picker-check {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff;
}
.lgc-picker-footer {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex: 0 0 auto;
}
.lgc-picker-cancel {
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-weight: 700;
  font-size: 13.5px;
}
.lgc-picker-start {
  flex: 1 1 auto;
  min-height: 48px;
  border-radius: 999px;
  border: none;
  background: hsl(var(--primary));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 120ms ease, opacity 140ms ease;
}
.lgc-picker-start:active { transform: scale(0.97); }
.lgc-picker-start:disabled { opacity: 0.45; }
.lgc-picker-start .ph-circle-notch { animation: lgc-spin 1.4s linear infinite; }

/* ---------- MINI strip (in-flow, 64px) ---------- */

.lgc-mini {
  margin: 8px 10px 0;
  min-height: 64px;
  border-radius: 16px;
  padding: 6px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  /* Round I: wrap lets the Concept B roster row sit on its own line ABOVE
     the classic strip row (order:-1, flex-basis:100%) — the card grows, the
     64px compact strip stays the roster-less state. */
  flex-wrap: wrap;
  background: hsl(var(--glass-white) / 0.72);
  border: 1px solid hsl(var(--glass-border) / 0.60);
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lgc-mini[hidden] { display: none; }
.dark .lgc-mini { box-shadow: var(--glass-shadow); }

/* Fallback placement only when the chat screen provides no in-flow mount:
   fixed under the header — never covering the composer. */
.lgc-mini.lgc-inline-fallback {
  position: fixed;
  inset-block-start: calc(64px + env(safe-area-inset-top, 0px));
  inset-inline: auto;
  width: min(420px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  z-index: 1090;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 160ms ease, opacity 160ms ease;
}
.lgc-mini.lgc-inline-fallback.lgc-is-dragging {
  cursor: grabbing;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.22);
  opacity: 0.96;
}

.lgc-mini-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  background-size: cover;
  background-position: center;
}
/* MINI speaking state: static 2.5px ring + soft glow (always on while
   speaking) + the 4 level bars — no echo ring (Concept A's pattern). */
.lgc-mini-avatar.is-speaking {
  box-shadow: 0 0 0 4px #22c55e, 0 0 18px rgba(34, 197, 94, 0.58);
}

.lgc-bars {
  position: absolute;
  inset-block-end: -5px;
  inset-inline: 0;
  display: none;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}
.lgc-mini-avatar.is-speaking .lgc-bars { display: flex; }
.lgc-bars i {
  width: 3px;
  border-radius: 2px;
  background: #4bc3f7;
  display: block;
  animation: lgc-level 0.9s ease-in-out infinite;
}
.lgc-bars i:nth-child(1) { height: 4px; animation-delay: 0s; }
.lgc-bars i:nth-child(2) { height: 9px; animation-delay: 0.15s; }
.lgc-bars i:nth-child(3) { height: 6px; animation-delay: 0.30s; }
.lgc-bars i:nth-child(4) { height: 8px; animation-delay: 0.45s; }
@keyframes lgc-level {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.lgc-mini-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lgc-mini-line1 {
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lgc-mini-line1.lgc-is-connecting { color: hsl(var(--cyan)); }
.lgc-mini-line2 {
  font-size: 11.5px; /* Round H: was 10.5px — duration/reconnect/count line */
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lgc-mini-duration {
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
  direction: ltr;
  flex: 0 0 auto;
}
.lgc-mini-reconnect {
  color: hsl(var(--cyan));
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lgc-mini-reconnect[hidden] { display: none; }
.lgc-mini-reconnect .ph { animation: lgc-spin 1.4s linear infinite; }
.lgc-mini-count {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lgc-mini-stack {
  display: flex;
  flex: 0 0 auto;
}
.lgc-mini-chip {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-inline-start: -7px;
  border: 2px solid hsl(var(--card));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  background-size: cover;
  background-position: center;
}
.lgc-mini-chip:first-child { margin-inline-start: 0; }
.lgc-mini-chip.is-degraded { border-color: rgba(75, 195, 247, 0.6); }
.lgc-mini-chip-badge {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 8.5px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Round I — Concept B hero roster (hero-light.png): first visual row of
   the mini card — real avatars, blue ring on the current speaker, mic badge
   on muted, names underneath; lobby cells carry the invite-state line. --- */
.lgc-mini-roster {
  order: -1;
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 8px 6px 9px;
  margin-bottom: 5px;
  border-bottom: 1px solid hsl(var(--divider));
  overflow-x: auto;
  scrollbar-width: none;
}
.lgc-mini-roster[hidden] { display: none; }
.lgc-mini-roster::-webkit-scrollbar { display: none; }
/* With the roster row carrying the visual, the legacy 42px speaker chip is
   redundant — keep it painted (compact state) but out of the layout. */
.lgc-mini.has-roster .lgc-mini-avatar { display: none; }

.lgc-mini-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: hsl(var(--foreground));
}
.lgc-mini-cell-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background-size: cover;
  background-position: center;
  border: 2px solid hsl(var(--border));
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
/* Green orbit = current speaker, same visual language as FULL. */
.lgc-mini-cell-avatar.is-speaking {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.34), 0 0 18px rgba(34, 197, 94, 0.56);
}
.lgc-mini-cell-avatar.is-degraded { border-color: rgba(75, 195, 247, 0.6); }
.lgc-mini-cell-name {
  max-width: 64px;
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-mini-cell-state {
  font-size: 10px;
  font-weight: 600;
  color: hsl(var(--cyan));
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Audio-wave glyph on the speaking line (Concept B «جميع المشاركين
   يتحدثون» indicator) — the inline twin of the spotlight bars. */
.lgc-mini-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lgc-mini-line1-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-mini-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex: 0 0 auto;
}
.lgc-mini-wave[hidden] { display: none; }
.lgc-mini-wave i {
  width: 3px;
  border-radius: 2px;
  background: #4bc3f7;
  display: block;
  animation: lgc-level 0.9s ease-in-out infinite;
}
.lgc-mini-wave i:nth-child(1) { height: 5px; animation-delay: 0s; }
.lgc-mini-wave i:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.lgc-mini-wave i:nth-child(3) { height: 8px; animation-delay: 0.30s; }
.lgc-mini-wave i:nth-child(4) { height: 10px; animation-delay: 0.45s; }

/* ≤370px (Android-class): the stack collapses — the "N مشاركين" count in
   line 2 already carries the information (binding compaction rule). */
@media (max-width: 370px) {
  .lgc-mini-stack { display: none; }
}

.lgc-mini-btn {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: hsl(var(--icon-bg));
  color: hsl(var(--foreground));
  /* G8: same tactile press language as the FULL-mode .lgc-btn. */
  transition: transform 120ms ease, background 140ms ease;
}
.lgc-mini-btn:active { transform: scale(0.92); }
.lgc-mini-btn[hidden] { display: none; }
.lgc-mini-btn.is-toggled { background: hsl(var(--primary)); color: #fff; }
.lgc-mini-btn.lgc-mini-leave { background: hsl(0 84% 60%); color: #fff; }

/* ---------- invite banner (non-blocking, in-flow, same mount slot) ---------- */

.lgc-invite {
  margin: 8px 10px 0;
  border-radius: 18px;
  background: hsl(var(--glass-white) / 0.86);
  border: 1px solid hsl(var(--primary) / 0.35);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.lgc-invite[hidden] { display: none; }
.lgc-invite.lgc-inline-fallback {
  position: fixed;
  inset-block-start: calc(64px + env(safe-area-inset-top, 0px));
  inset-inline: 0;
  z-index: 1090;
}
/* Brand hairline accent (Round 29b recipe). */
.lgc-invite::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 18%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.55), hsl(var(--cyan) / 0.45), transparent);
}
.lgc-invite-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
}
.lgc-invite-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(80, 181, 255, 0.55);
  animation: lgc-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes lgc-ping {
  0% { transform: scale(1); opacity: 0.7; }
  75%, 100% { transform: scale(1.5); opacity: 0; }
}
.lgc-invite-text { flex: 1 1 auto; min-width: 0; }
.lgc-invite-line1 {
  font-size: 13.5px;
  font-weight: 700;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-invite-line2 {
  font-size: 12px; /* Round H: was 11px — invite subtitle at reading size */
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgc-invite-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.lgc-invite-action {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lgc-invite-action.lgc-accept { background: hsl(var(--success)); }
.lgc-invite-action.lgc-decline { background: hsl(0 84% 60%); }

/* ---------- transient notice (kick / error / app-only feedback) ---------- */

.lgc-notice {
  margin: 8px 10px 0;
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 14px;
  background: rgba(14, 119, 242, 0.14);
  border: 1px solid rgba(80, 181, 255, 0.35);
  color: hsl(var(--foreground));
}
.lgc-notice[hidden] { display: none; }
.lgc-notice.lgc-inline-fallback {
  position: fixed;
  inset-block-start: calc(64px + env(safe-area-inset-top, 0px));
  inset-inline: 0;
  z-index: 1090;
}
.lgc-notice .ph { color: #50b5ff; }
.lgc-notice-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- media sink ---------- */

.lgc-media {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- reduced motion (binding: bars freeze at 60%, rings stay,
   every state keeps its text twin — nothing is motion-only) ---------- */

@media (prefers-reduced-motion: reduce) {
  .lgc-tile.is-speaking .lgc-avatar,
  .lgc-tile.is-speaking .lgc-avatar::before,
  .lgc-mini-avatar.is-speaking::before,
  .lgc-mini-cell-avatar.is-speaking::before,
  .lgc-invite-avatar::after,
  .lgc-mini-reconnect .ph,
  .lgc-reconnect-badge .ph {
    animation: none;
  }
  /* Round I: roster speaker ring keeps the STATIC blue ring, no pulse. */
  .lgc-mini-cell-avatar.is-speaking {
    animation: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 4px #22c55e, 0 0 14px rgba(34, 197, 94, 0.48);
  }
  .lgc-chip-ringing,
  .lgc-picker-start .ph-circle-notch {
    animation: none;
  }
  .lgc-bars i {
    animation: none;
    transform: scaleY(0.6);
  }
  .lgc-mini-wave i {
    animation: none;
    transform: scaleY(0.6);
  }
  /* Round H: spotlight bars keep their honest static level — no transition. */
  .lgc-level5 i {
    transition: none;
  }
}

/* The scripted twin of the media query (the layer tags the root when
   matchMedia reports reduce, so embedders/tests see the same state). */
.lgc-reduced-motion .lgc-tile.is-speaking .lgc-avatar,
.lgc-reduced-motion .lgc-tile.is-speaking .lgc-avatar::before,
.lgc-reduced-motion .lgc-mini-avatar.is-speaking::before,
.lgc-reduced-motion .lgc-mini-cell-avatar.is-speaking::before,
.lgc-reduced-motion .lgc-invite-avatar::after,
.lgc-reduced-motion .lgc-mini-reconnect .ph,
.lgc-reduced-motion .lgc-reconnect-badge .ph {
  animation: none;
}
.lgc-reduced-motion .lgc-mini-cell-avatar.is-speaking {
  animation: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 4px #22c55e, 0 0 14px rgba(34, 197, 94, 0.48);
}
.lgc-reduced-motion .lgc-chip-ringing,
.lgc-reduced-motion .lgc-picker-start .ph-circle-notch {
  animation: none;
}
.lgc-reduced-motion .lgc-bars i {
  animation: none;
  transform: scaleY(0.6);
}
.lgc-reduced-motion .lgc-mini-wave i {
  animation: none;
  transform: scaleY(0.6);
}
.lgc-reduced-motion .lgc-level5 i {
  transition: none;
}

/* ---------- Round I — responsive (Z Fold folded/unfolded + small phones) --- */

/* Narrow phones (360–380px class): tighter roster, comfort floor intact. */
@media (max-width: 380px) {
  .lgc-mini-roster { gap: 8px; padding: 6px 4px 8px; }
  .lgc-mini-cell { width: 56px; }
  .lgc-mini-cell-avatar { width: 42px; height: 42px; font-size: 14px; }
  .lgc-mini-cell-name { max-width: 56px; font-size: 11px; }
  .lgc-mini-cell-state { max-width: 56px; }
  .lgc-controls { gap: 8px; }
  .lgc-btn { width: 52px; height: 52px; }
  .lgc-picker-footer { flex-direction: column-reverse; }
  .lgc-picker-cancel { width: 100%; }
}

/* Unfolded foldables / tablets (≥660px CSS width): the inline card and the
   sheets stay phone-width, centered — never a stretched wall of UI. */
@media (min-width: 660px) {
  .lgc-mini { max-width: 600px; margin-inline: auto; }
  .lgc-invite { max-width: 600px; margin-inline: auto; }
  .lgc-notice { max-width: 600px; margin-inline: auto; }
  .lgc-grid { max-width: 480px; }
  .lgc-admin { inset-inline: 0; max-width: 520px; margin-inline: auto; }
  .lgc-lobby { width: min(100%, 420px); }
}