/* =============================================================================
   Tactico — Live Collab styles
   All rules are gated by `body.collab-mode-active` so this file is inert on
   normal /app loads. The body class is toggled by js/collab-client.js when
   a share is joined (or by js/collab-ui.js on `tactico:collab-owner-started`).

   Day 2 — focused session layout + members panel + edit-control gating.
   Replaces the inline <style> blocks previously injected at runtime by
   collab-client.js (ensureBannerStyles) and collab-members.js (ensureStyles).
   ========================================================================== */

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes tcBannerSlideIn { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes tcLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes tmpSlide { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tmpPulseHand { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } 50% { box-shadow: 0 0 0 4px rgba(251,191,36,0.18); } }

/* ── Session header (44px fixed top bar) ────────────────────────────────── */
.tc-session-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
  height: 44px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(8, 20, 36, 0.96);
  border-bottom: 1px solid rgba(59,130,246,0.30);
  color: #cbd5e1; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  animation: tcBannerSlideIn 0.32s cubic-bezier(.2,.7,.3,1);
}
.tc-sh-left, .tc-sh-right { display: flex; align-items: center; gap: 10px; }
.tc-sh-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  animation: tcLivePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.tc-sh-title { color: #f1f5f9; font-weight: 700; letter-spacing: 0.01em; }
.tc-sh-sep   { opacity: 0.4; }
.tc-sh-sub   { opacity: 0.75; font-weight: 500; }
.tc-sh-member-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.tc-sh-leave {
  padding: 6px 14px; border-radius: 8px;
  background: rgba(239,68,68,0.18); border: 1px solid rgba(239,68,68,0.4);
  color: #fca5a5; font-weight: 700; font-size: 12.5px;
  cursor: pointer; font-family: inherit;
}
.tc-sh-leave:hover { background: rgba(239,68,68,0.3); color: #fff; }

/* ── Focused-layout: hide topbar + save/share + upgrade banner only ─────── */
/* We match `.app-topbar` alone (NOT `.app-topbar.v2-unified-topbar`) because
   the served HTML element only carries the base class. Tools, formations,
   equipment, chips-dock stay VISIBLE — admins need them mid-session, and
   editors get them once the owner grants edit control. Viewers + ungranted
   editors see them but with pointer-events disabled (read-only). */
body.collab-mode-active .app-topbar { display: none !important; }
body.collab-mode-active .save-share-row,
body.collab-mode-active .upgrade-banner { display: none !important; }
body.collab-mode-active .main-container,
body.collab-mode-active .app-body { padding-top: 44px !important; height: 100vh !important; max-height: 100vh !important; }
body.collab-mode-active .canvas-area { flex: 1 1 auto; height: 100% !important; min-height: 0 !important; }

/* Left toolbar — push DOWN so the field-layout / orientation button at the
   top of the toolbar isn't obscured by the 44 px session header. */
body.collab-mode-active .left-toolbar { top: 56px !important; }
@media (max-width: 768px) {
  body.collab-mode-active .left-toolbar { top: 50px !important; }
}

/* Reserve right-side space for the members panel when it's mounted AND not
   collapsed. The V2 board's right-panel (290 px) sits to the LEFT of the
   members panel inside the reserved width. */
body.collab-mode-active.has-member-panel:not(.members-panel-collapsed) .main-container,
body.collab-mode-active.has-member-panel:not(.members-panel-collapsed) .app-body { padding-right: 280px !important; }
@media (max-width: 768px) {
  body.collab-mode-active.has-member-panel:not(.members-panel-collapsed) .main-container,
  body.collab-mode-active.has-member-panel:not(.members-panel-collapsed) .app-body { padding-right: 0 !important; padding-bottom: 36vh !important; }
  /* On phones the right-panel is already a slide-in drawer, leave it alone. */
}

/* Viewer-specific: read-only board AND hide the right-panel / chips dock /
   subs row entirely — players don't need formation/equipment pickers. */
body.collab-mode-viewer .right-panel,
body.collab-mode-viewer #rightPanel,
body.collab-mode-viewer .chips-dock,
body.collab-mode-viewer #chipsDock,
body.collab-mode-viewer .subs-row { display: none !important; }
body.collab-mode-viewer .left-toolbar,
body.collab-mode-viewer .toolbar { pointer-events: none; opacity: 0.45; }
body.collab-mode-viewer .canvas-area { pointer-events: none; }

/* ── Right-panel collapse during live session ──────────────────────────────
   Mounts a small floating toggle on the left edge of the right-panel. When
   collapsed, the panel shrinks to zero width and the canvas reclaims the
   space. Width transition is intentional — the panel IS the layout
   contribution that needs to animate. */
.tc-rp-toggle {
  display: none;
  position: fixed;
  /* Parks ~160 px below the viewport top so it sits under the panel's
     home/away roster dropdowns and clears the pitch's delete-bin chip
     (top: 10 px + 56 px tall + clearance from the 44 px session header). */
  top: 160px;
  right: calc(var(--panel-width, 300px) - 1px);
  z-index: 1460;
  width: 24px; height: 40px;
  background: rgba(8, 20, 36, 0.95);
  border: 1px solid rgba(59,130,246,0.40);
  border-right: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-family: inherit; padding: 0;
  align-items: center; justify-content: center;
  box-shadow: -4px 4px 12px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: right 240ms cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.collab-mode-active .tc-rp-toggle { display: inline-flex; }
.tc-rp-toggle:hover {
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.65);
  color: #f1f5f9;
}
.tc-rp-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.tc-rp-toggle-icon { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Right-pointing chevron when panel open (click = push panel right).
   Left-pointing when collapsed (click = pull panel back). */
body:not(.right-panel-collapsed-collab) .tc-rp-toggle-icon { transform: rotate(0deg); }
body.right-panel-collapsed-collab .tc-rp-toggle-icon { transform: rotate(180deg); }

/* Phone viewport: right-panel is a slide-in drawer, not a sidebar, so the
   collapse toggle would float over nothing. Hide it on mobile. */
@media (max-width: 768px) {
  body.collab-mode-active .tc-rp-toggle { display: none !important; }
}

/* Collapsed state: shrink the panel to 0 width, canvas reclaims via flex. */
body.collab-mode-active.right-panel-collapsed-collab .right-panel {
  width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left-color: transparent !important;
  overflow: hidden;
}
body.collab-mode-active .right-panel {
  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1),
              max-width 240ms cubic-bezier(0.4, 0, 0.2, 1),
              padding 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* The toggle parks at the screen edge when the panel is gone. */
body.collab-mode-active.right-panel-collapsed-collab .tc-rp-toggle { right: 0; }

/* Animate tab — recording an animation while a multi-user live session is
   running doesn't sync across clients. Disable the tab during the session;
   re-enable when it ends. The click handler in app.html short-circuits too. */
body.collab-mode-active .panel-tab[data-panel="animate"],
body.collab-mode-active .panel-selector-option[data-panel="animate"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
body.collab-mode-active .panel-tab[data-panel="animate"] svg,
body.collab-mode-active .panel-selector-option[data-panel="animate"] svg { opacity: 0.5; }

/* Editor WITHOUT edit-control: panels stay VISIBLE (they can see what the
   admin is doing) but pointer-events are off so they can't actually mutate
   anything until the owner grants control. */
body.collab-mode-no-control .left-toolbar,
body.collab-mode-no-control .toolbar,
body.collab-mode-no-control .right-panel,
body.collab-mode-no-control #rightPanel,
body.collab-mode-no-control .chips-dock,
body.collab-mode-no-control #chipsDock,
body.collab-mode-no-control .subs-row { pointer-events: none; opacity: 0.55; }
body.collab-mode-no-control .canvas-area { pointer-events: none; }

/* ── Members panel (right sidebar, Zoom-style) ──────────────────────────── */
#tacticoMembersPanel {
  position: fixed; top: 44px; right: 0; bottom: 0;
  width: 280px; z-index: 1450;
  background: rgba(8, 20, 36, 0.96);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-left: 1px solid rgba(59,130,246,0.22);
  display: flex; flex-direction: column;
  color: #cbd5e1; font-size: 13px;
  animation: tmpSlide 0.32s cubic-bezier(.2,.7,.3,1);
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1);
}
/* Collapsed: panel slides off-screen to the right. The reopen tab takes over. */
body.members-panel-collapsed #tacticoMembersPanel {
  transform: translateX(100%);
  pointer-events: none;
}

/* Collapse / Expand button in the panel header — bumped up in visibility
   so it's actually findable (the old subtle chip got missed in user testing). */
.tmp-collapse {
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  width: 30px; height: 30px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tmp-collapse:hover { background: rgba(59,130,246,0.18); color: #f1f5f9; border-color: rgba(59,130,246,0.45); }
.tmp-collapse:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* Floating reopen tab — visible only when the panel is collapsed.
   Sits on the right edge of the viewport with the live member count
   so the owner can re-expand with a single click. */
#tacticoMembersReopen {
  position: fixed;
  /* Matches .tc-rp-toggle top so the two collapse-reopen tabs line up
     vertically below the home/away dropdowns and well clear of the
     pitch's delete-bin chip. */
  top: 160px;  right: 0;
  z-index: 1450;
  display: none;
  align-items: center; gap: 8px;
  padding: 10px 14px 10px 16px;
  background: rgba(8, 20, 36, 0.95);
  border: 1px solid rgba(59,130,246,0.40);
  border-right: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  color: #f1f5f9;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  box-shadow: -6px 6px 18px rgba(0,0,0,0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: padding-right 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#tacticoMembersReopen:hover {
  background: rgba(8, 20, 36, 0.98);
  border-color: rgba(59,130,246,0.60);
  padding-right: 18px;
}
body.members-panel-collapsed #tacticoMembersReopen { display: inline-flex; }
#tacticoMembersReopen .reopen-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px;
  background: #3b82f6;
  color: #f1f5f9;
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  /* On phones the panel is a bottom sheet — collapse just slides it
     down. Reopen tab moves to the bottom-right. */
  body.members-panel-collapsed #tacticoMembersPanel { transform: translateY(100%); }
  #tacticoMembersReopen { top: auto; bottom: 14px; right: 12px; border-radius: 999px; border-right: 1px solid rgba(22,216,179,0.40); }
}
.tmp-header {
  padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.tmp-header h3 { margin: 0; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; }
.tmp-count { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(22,216,179,0.15); color: #16d8b3; }
.tmp-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; }
.tmp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; position: relative;
  transition: background 0.12s ease;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tmp-row:last-child { border-bottom: none; }
.tmp-row:hover { background: rgba(255,255,255,0.03); }

.tmp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px;
  flex-shrink: 0; position: relative;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.08);
}
.tmp-avatar.role-owner  {
  background: linear-gradient(180deg, #3b82f6, #1e3a8a);
  color: #f1f5f9;
}
.tmp-avatar.role-editor {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
  color: #f1f5f9;
}
.tmp-avatar.role-viewer {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #1f1300;
}
.tmp-avatar.speaking {
  box-shadow: 0 0 0 2px rgba(59,130,246,0.65), 0 0 10px rgba(59,130,246,0.45);
  border-color: rgba(59,130,246,0.65);
}

.tmp-info { flex: 1 1 auto; min-width: 0; }
.tmp-name {
  font-size: 13px; font-weight: 600; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}
.tmp-name .tmp-you { font-weight: 400; color: rgba(255,255,255,0.4); margin-left: 4px; font-size: 11px; }

.tmp-meta {
  font-size: 11px; color: rgba(255,255,255,0.5);
  margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;        /* badges wrap to a 2nd line when many are present */
  row-gap: 4px;
}
.tmp-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: 0.10em;
  font-size: 9px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.tmp-badge.role { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.65); }
.tmp-badge.hand {
  background: rgba(251,191,36,0.16); color: #fcd34d;
  border: 1px solid rgba(251,191,36,0.36);
  animation: tmpPulseHand 1.4s ease-in-out infinite;
}
.tmp-badge.ctrl {
  background: rgba(59,130,246,0.16); color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.40);
}

/* Action buttons — partially visible at rest so touch users can find them;
   fully revealed on row hover/focus. Previously opacity: 0 hid them entirely
   on touch devices. */
.tmp-actions {
  display: flex; align-items: center; gap: 3px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.tmp-row:hover .tmp-actions,
.tmp-row:focus-within .tmp-actions { opacity: 1; }
.tmp-actions button {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.72); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tmp-actions button:hover {
  background: rgba(255,255,255,0.10);
  color: #f1f5f9;
  border-color: rgba(255,255,255,0.18);
}
.tmp-actions button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.tmp-actions button.danger:hover {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.42);
}
.tmp-actions button.approve:hover {
  background: rgba(52,211,153,0.18);
  color: #6ee7b7;
  border-color: rgba(52,211,153,0.42);
}
.tmp-actions button.granted {
  background: rgba(59,130,246,0.20);
  color: #93c5fd;
  border-color: rgba(59,130,246,0.40);
}
.tmp-actions button.granted:hover {
  background: rgba(59,130,246,0.28);
  color: #f1f5f9;
}
.tmp-footer { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 8px; }
.tmp-self-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13px;
  background: linear-gradient(180deg, #3b82f6, #1e3a8a);
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 12px rgba(30,58,138,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: filter 0.15s ease;
}
.tmp-self-action:hover { filter: brightness(1.10); }
.tmp-self-action.muted {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,0.35), inset 0 1px 0 rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.10);
}
.tmp-self-action.raise {
  background: rgba(251,191,36,0.18);
  color: #fcd34d;
  border: 1px solid rgba(251,191,36,0.42);
  box-shadow: none;
}
.tmp-self-action.raise.pending { animation: tmpPulseHand 1.4s ease-in-out infinite; }
.tmp-no-control-note {
  font-size: 11.5px; color: rgba(255,255,255,0.55); line-height: 1.45;
  text-align: center; padding: 4px 6px 0;
}

/* ── Share-links block at the top of the members panel (owner only) ──
   Persistent copy of the editor + viewer URLs so the host doesn't have
   to reopen the modal to grab a link mid-session. */
.tmp-share {
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.tmp-share-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tmp-share-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.tmp-share-label svg { opacity: 0.7; }
.tmp-share-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  background: rgba(0,0,0,0.28);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.tmp-share-input-wrap:focus-within { border-color: rgba(59,130,246,0.45); }
.tmp-share-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 11.5px;
  padding: 7px 9px;
  text-overflow: ellipsis;
}
.tmp-share-copy {
  flex-shrink: 0;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  background: rgba(59,130,246,0.16);
  color: #93c5fd;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tmp-share-copy:hover {
  background: rgba(59,130,246,0.28);
  color: #f1f5f9;
}
.tmp-share-copy:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}
.tmp-share-copy.is-copied {
  background: rgba(52,211,153,0.20);
  color: #6ee7b7;
}

/* Mobile: collapse members panel into a bottom sheet */
@media (max-width: 768px) {
  #tacticoMembersPanel {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%;
    height: 36vh; max-height: 36vh;
    border-left: none; border-top: 1px solid rgba(22,216,179,0.18);
  }
}

/* =============================================================================
   Live Collab — "Start session" modal (.lc-modal)
   Hero + features (free path) / voice-mode picker (pro path) / running view.
   Brand-aligned navy palette (DESIGN.md). Recording-red reserved for live
   indicator dots.
   ========================================================================== */
.lc-modal {
  /* Modal-scoped tokens — DESIGN.md navy + a single recording red + amber
     for the secondary "viewer" semantic. Keeps the rest of collab.css alone. */
  --lc-accent:        #3b82f6;
  --lc-accent-deep:   #1e3a8a;
  --lc-accent-soft:   rgba(59,130,246,0.16);
  --lc-accent-line:   rgba(59,130,246,0.35);
  --lc-accent-glow:   rgba(30,58,138,0.40);
  --lc-rec:           #ef4444;
  --lc-amber:         #fbbf24;
  --lc-amber-soft:    rgba(251,191,36,0.18);
  --lc-amber-line:    rgba(251,191,36,0.30);

  width: 460px !important;
  max-width: calc(100vw - 24px);
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(59,130,246,0.10) 0%,
      rgba(30,58,138,0.06) 30%,
      rgba(14,28,46,0.99) 60%);
  border: 1px solid var(--lc-accent-line) !important;
}
.lc-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6); cursor: pointer;
  font-family: inherit; padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lc-modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.18); }
.lc-modal-body {
  padding: 32px 28px 22px !important;
  display: block !important;
  gap: 0 !important;
}

/* Hero: icon tile, title, subtitle */
.lc-hero { text-align: center; margin-bottom: 22px; }
.lc-hero-icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--lc-accent), var(--lc-accent-deep));
  color: #f1f5f9;
  margin-bottom: 14px;
  box-shadow:
    0 10px 28px var(--lc-accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.lc-hero-dot {
  position: absolute; top: -3px; right: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lc-rec);
  border: 3px solid rgba(14,28,46,0.99);
  animation: tcLivePulse 1.6s ease-in-out infinite;
}
.lc-hero-title {
  margin: 0 0 6px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  color: #f1f5f9;
}
.lc-hero-sub {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,0.62);
  max-width: 380px;
  margin-left: auto; margin-right: auto;
}

/* Feature rows: icon tile + title + meta */
.lc-features {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.lc-feature {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.lc-feature-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.lc-feature-icon.coach  { background: var(--lc-accent-soft); color: #93c5fd; border: 1px solid var(--lc-accent-line); }
.lc-feature-icon.viewer { background: var(--lc-amber-soft); color: var(--lc-amber); border: 1px solid var(--lc-amber-line); }
.lc-feature-text { min-width: 0; }
.lc-feature-title {
  font-size: 13.5px; font-weight: 700; color: #f1f5f9;
  margin-bottom: 2px;
}
.lc-feature-meta {
  font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,0.55);
}

/* Pro pill — only shown for free users (collab-ui.js toggles `hidden`) */
.lc-pro-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--lc-accent-soft);
  border: 1px solid var(--lc-accent-line);
  border-radius: 10px;
  font-size: 12px; line-height: 1.45;
  color: rgba(255,255,255,0.72);
}
.lc-pro-badge {
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.10em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--lc-accent);
  color: #f1f5f9;
  text-transform: uppercase;
}

/* Error block */
#liveCollabError {
  margin-top: 14px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.30);
  color: #fecaca;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.45;
}

/* Footer */
.lc-modal-footer {
  padding: 14px 18px !important;
  background: rgba(0,0,0,0.22) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* Buttons — bigger + more confident than generic .pm-btn */
.lc-btn {
  font-family: inherit;
  font-size: 13.5px; font-weight: 700;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative;
  min-width: 92px;
}
.lc-btn:disabled { cursor: wait; }
.lc-btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.70);
}
.lc-btn-ghost:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.lc-btn-primary {
  background: linear-gradient(180deg, var(--lc-accent), var(--lc-accent-deep));
  color: #f1f5f9;
  font-weight: 800;
  min-width: 150px;
  box-shadow:
    0 6px 18px var(--lc-accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.lc-btn-primary:hover { filter: brightness(1.10); }
.lc-btn-primary:disabled,
.lc-btn-primary[data-state="loading"]:hover { filter: none; }
.lc-btn-danger {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.42);
  color: #fca5a5;
}
.lc-btn-danger:hover { background: rgba(239,68,68,0.20); color: #fff; }

/* Primary button states (data-state="idle" | "loading") */
.lc-btn .lc-btn-loading { display: none; align-items: center; gap: 8px; }
.lc-btn[data-state="loading"] { cursor: wait; opacity: 0.92; }
.lc-btn[data-state="loading"] .lc-btn-label { display: none; }
.lc-btn[data-state="loading"] .lc-btn-loading { display: inline-flex; }
.lc-spin { animation: lcSpin 0.9s linear infinite; }
@keyframes lcSpin { to { transform: rotate(360deg); } }

/* Compact hero for Pro path (less vertical real-estate; no feature rows below) */
.lc-hero.compact { margin-bottom: 18px; }
.lc-hero.compact .lc-hero-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 11px; }
.lc-hero.compact .lc-hero-icon svg { width: 18px; height: 18px; }
.lc-hero.compact .lc-hero-title { font-size: 18px; margin-bottom: 4px; }
.lc-hero.compact .lc-hero-sub { font-size: 12.5px; }

/* Pro path: voice-mode toggle (radiogroup) */
.lc-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 8px;
}
.lc-voice-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.lc-voice-opt {
  position: relative;
  text-align: left;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #f1f5f9;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lc-voice-opt:hover {
  border-color: var(--lc-accent-line);
  background: rgba(59,130,246,0.05);
}
.lc-voice-opt.is-selected {
  border-color: var(--lc-accent);
  background: var(--lc-accent-soft);
}
.lc-voice-opt-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  color: #f1f5f9; margin-bottom: 3px;
}
.lc-voice-opt.is-selected .lc-voice-opt-head { color: #93c5fd; }
.lc-voice-opt-meta {
  font-size: 11.5px; line-height: 1.45;
  color: rgba(255,255,255,0.55);
}
.lc-voice-opt.is-selected .lc-voice-opt-meta { color: rgba(255,255,255,0.78); }

/* Inline caption row (info icon + small grey text) */
.lc-limit-caption {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 2px;
  font-size: 11.5px; line-height: 1.45;
  color: rgba(255,255,255,0.5);
}
.lc-limit-caption svg { flex-shrink: 0; opacity: 0.7; }

/* Recording toggle row (Pro path) */
.lc-toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  margin-bottom: 14px;
}
.lc-toggle-row:hover { border-color: rgba(255,255,255,0.14); }
.lc-toggle-text { flex: 1; min-width: 0; }
.lc-toggle-title {
  font-size: 13px; font-weight: 700; color: #f1f5f9;
  margin-bottom: 1px;
}
.lc-toggle-meta {
  font-size: 11.5px; line-height: 1.4;
  color: rgba(255,255,255,0.55);
}
.lc-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.lc-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  transition: background 0.2s ease;
}
.lc-toggle-switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.lc-toggle-input:checked ~ .lc-toggle-switch {
  background: linear-gradient(180deg, var(--lc-accent), var(--lc-accent-deep));
}
.lc-toggle-input:checked ~ .lc-toggle-switch::after { transform: translateX(16px); }
.lc-toggle-input:focus-visible ~ .lc-toggle-switch {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.30);
}

/* ── Running-view (after the session has started) ─────────────────────── */
#liveCollabRunning { display: flex; flex-direction: column; gap: 14px; }
.lc-running-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  padding-right: 44px;   /* clearance for the floating × button */
  border-radius: 10px;
  background: var(--lc-accent-soft);
  border: 1px solid var(--lc-accent-line);
  font-size: 13px;
}
.lc-running-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lc-rec);
  animation: tcLivePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.lc-running-title { font-weight: 700; color: #f1f5f9; flex: 1; min-width: 0; }
.lc-running-tier {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Share rows (editor URL + viewer URL) */
.lc-share-row { display: flex; flex-direction: column; gap: 6px; }
.lc-share-row-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.lc-share-row-label svg { opacity: 0.65; }
.lc-share-input-wrap { display: flex; gap: 6px; }
.lc-share-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 12px; font-family: inherit;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
.lc-share-input:focus { border-color: var(--lc-accent-line); }
.lc-share-input[disabled] { opacity: 0.5; }
.lc-btn-copy { padding: 8px 14px; min-width: 0; font-size: 12.5px; }
.lc-share-meta { font-size: 11.5px; color: rgba(255,255,255,0.5); line-height: 1.4; }
.lc-running-foot {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 11.5px; line-height: 1.45;
  color: rgba(255,255,255,0.6);
}
.lc-running-foot strong { color: rgba(255,255,255,0.85); font-weight: 700; }

/* Error block (now class-driven not inline-styled) */
#liveCollabError:not([hidden]) {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.30);
  color: #fecaca;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.45;
  margin-top: 14px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lc-hero-dot, .lc-running-dot { animation: none; }
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .lc-modal { width: calc(100vw - 16px) !important; }
  .lc-modal-body { padding: 28px 18px 18px !important; }
  .lc-hero-title { font-size: 18px; }
  .lc-hero-sub { font-size: 12.5px; }
  .lc-btn-primary { min-width: 0; flex: 1; }
  .lc-voice-toggle { grid-template-columns: 1fr; }
  .lc-share-input-wrap { flex-direction: column; }
  .lc-btn-copy { width: 100%; }
}

/* ==========================================================================
   Recording upload overlay (.tc-rec-overlay)
   Mounted full-screen by js/collab-recorder.js after the host clicks "End
   session". States: in-progress (default) | success | warn | fail.
   ========================================================================== */
.tc-rec-overlay {
  position: fixed; inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 9, 16, 0.86);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.tc-rec-panel {
  /* Local tokens — DESIGN.md navy + recording-red + amber/green for terminal states. */
  --rec-accent:        #3b82f6;
  --rec-accent-deep:   #1e3a8a;
  --rec-accent-line:   rgba(59,130,246,0.35);
  --rec-accent-glow:   rgba(30,58,138,0.40);
  --rec-rec:           #ef4444;
  --rec-warn:          #fbbf24;
  --rec-success:       #34d399;

  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(14,28,46,0.99), rgba(8,20,34,0.99));
  border: 1px solid var(--rec-accent-line);
  border-radius: 14px;
  padding: 30px 30px 22px;
  text-align: center;
  color: #f1f5f9;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Icon tile — recording metaphor (mic + red corner dot) by default,
   swappable to success / warn / fail glyphs for terminal states. */
.tc-rec-icon {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 16px;
  margin: 0 auto 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--rec-accent), var(--rec-accent-deep));
  color: #f1f5f9;
  box-shadow:
    0 10px 28px var(--rec-accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.tc-rec-icon svg { width: 22px; height: 22px; }
.tc-rec-icon .dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rec-rec);
  border: 3px solid rgba(14,28,46,0.99);
  animation: tcLivePulse 1.6s ease-in-out infinite;
}
.tc-rec-icon.is-success {
  background: var(--rec-success);
  color: #06281d;
  box-shadow:
    0 10px 28px rgba(52,211,153,0.30),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.tc-rec-icon.is-warn {
  background: rgba(251,191,36,0.16);
  border: 1px solid rgba(251,191,36,0.40);
  color: var(--rec-warn);
  box-shadow: none;
}
.tc-rec-icon.is-fail {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.40);
  color: #fecaca;
  box-shadow: none;
}
.tc-rec-icon.is-success .dot,
.tc-rec-icon.is-warn .dot,
.tc-rec-icon.is-fail .dot { display: none; }

/* Copy */
.tc-rec-title {
  margin: 0 0 8px;
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em;
  color: #f1f5f9;
}
.tc-rec-state {
  margin: 0 0 16px;
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
  min-height: 1.5em;
}
.tc-rec-state.is-fail { color: #fca5a5; }

.tc-rec-body {
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.70);
}
.tc-rec-tip {
  margin: 0 0 18px;
  font-size: 12px; line-height: 1.55;
  color: rgba(255,255,255,0.50);
}

/* Progress bar — solid navy on a tinted track. No gradient. */
.tc-rec-progress {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.tc-rec-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--rec-accent);
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tc-rec-hint {
  margin: 16px 0 0;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(255,255,255,0.45);
}

/* Duration pill (success only) */
.tc-rec-duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.tc-rec-duration .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rec-rec);
}

/* Action stack */
.tc-rec-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.tc-rec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tc-rec-btn-primary {
  background: linear-gradient(180deg, var(--rec-accent), var(--rec-accent-deep));
  color: #f1f5f9;
  box-shadow:
    0 6px 16px var(--rec-accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.tc-rec-btn-primary:hover { filter: brightness(1.10); }
.tc-rec-btn-secondary {
  background: rgba(255,255,255,0.05);
  color: #f1f5f9;
  border-color: rgba(255,255,255,0.14);
}
.tc-rec-btn-secondary:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.24);
}
.tc-rec-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
}
.tc-rec-btn-ghost:hover { color: #f1f5f9; }

/* Side-by-side ghost actions (success state: Back to board / Dashboard). */
.tc-rec-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}
.tc-rec-actions-row .tc-rec-btn-ghost {
  padding: 6px 10px;
  font-size: 12px;
}

@media (max-width: 480px) {
  .tc-rec-panel { padding: 24px 20px 18px; }
  .tc-rec-title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-rec-icon .dot { animation: none; }
  .tc-rec-progress-bar { transition: none; }
}