/* ============================================================
   outflow · Axon design override
   Re-skins the in-app UI onto the canonical Axon design system
   (axon-design-system/theme.ts) without touching the app bundle.
   Loaded AFTER vendor + main CSS in index.html so it wins on
   equal specificity. Tokens are remapped at the variable level
   so most surfaces inherit the new palette automatically.
   ============================================================ */

:root {
  /* ── Axon canonical tokens ── */
  --axon-bg: #08080a;
  --axon-surface: #0f0f12;
  --axon-surface-elevated: #15151a;
  --axon-surface-hover: #1c1c22;
  --axon-border: #1f1f26;
  --axon-border-strong: #2a2a33;
  --axon-blue: #5e6ad2;
  --axon-blue-hover: #7b85e8;
  --axon-blue-glow: rgba(94, 106, 210, 0.15);
  --axon-purple: #8b7fd8;
  --axon-text-1: #f7f8f8;
  --axon-text-2: #8a8f98;
  --axon-text-3: #62666d;
  --axon-success: #4cb782;
  --axon-error: #eb5757;
  --axon-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Remap the app's brand levers → Axon indigo ──
     The original theme keys everything off a cyan #00a1f2 family.
     Overriding these custom properties recolors buttons, links,
     focus rings, active states, etc. across the whole app. */
  --color-Blue: var(--axon-blue);
  --color-Blue2-50: rgba(94, 106, 210, 0.08);
  --color-Blue2-500: var(--axon-blue);
  --color-Blue2-600: var(--axon-blue-hover);
  --color-Blue2-700: #4d58bd;
  --color-Blue2-800: #3f49a3;
  --color-Dark-blue: #4d58bd;
  --color-blue-50: rgba(94, 106, 210, 0.08);
  --color-blue-500: var(--axon-blue);
  --color-blue-600: var(--axon-blue-hover);

  /* secondary/accent cyan (#24aef7) used by badges (unread count) → indigo */
  --color-secondary-color: var(--axon-blue);
  --secondary-color: var(--axon-blue);

  /* Dark-theme canvas → Axon near-black (was indigo-tinted navy) */
  --color-dark-primary: var(--axon-bg);
  --color-dark-secondary: var(--axon-surface);
  --color-dark-secondary2: var(--axon-surface-elevated);
  --color-dark-secondary3: var(--axon-surface-hover);
  --color-dark-text: var(--axon-text-2);

  --button-hover-bg: var(--axon-surface-hover);
}

/* ── Global type: align with Inter Display used on login/join ── */
#plugNmeet-app,
#plugNmeet-app button,
#plugNmeet-app input,
#plugNmeet-app select,
#plugNmeet-app textarea {
  font-family: 'Inter Display', 'Inter', system-ui, sans-serif;
}

/* ── Dark canvas retune ── */
.dark,
.dark body,
body.dark {
  background-color: var(--axon-bg);
}

/* Primary call-to-action buttons → Axon indigo with glow on hover.
   The app uses utility classes built on #00a1f2; catch the common
   inline/utility blue backgrounds and remap them. */
#plugNmeet-app [style*="rgb(0, 161, 242)"],
#plugNmeet-app [class*="bg-Blue"]:not([class*="Blue2-50"]) {
  background-color: var(--axon-blue) !important;
}

/* Focus rings → indigo glow instead of cyan */
#plugNmeet-app *:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--axon-blue-glow) !important;
  border-color: var(--axon-blue) !important;
}

/* ============================================================
   Device-preferences popup
   "Microphone and Camera Preferences" / "Ready to join?"
   "Enable Microphone and Camera" / "Join as a listener"
   ============================================================ */

/* ============================================================
   GLOBAL BUTTON + SURFACE PATTERNS (app-wide, all dialogs)
   The app reuses .primary-button / .secondary-button and near-white
   Gray-25/50 backgrounds everywhere. Theme them once, globally, so
   every dialog (polls, breakout, lock, external link…) is consistent.
   ============================================================ */
/* Near-white utility surfaces → Axon dark (catches white buttons/rows
   like the poll "Add another option" bar, bg-Gray-25/50 panels) */
.bg-Gray-25, .bg-Gray-50,
[class*="bg-Gray-25"], [class*="bg-Gray-50"] {
  background-color: var(--axon-surface-elevated) !important;
  color: var(--axon-text-1) !important;
}
/* Primary buttons → filled indigo (anywhere) */
.primary-button {
  background-color: var(--axon-blue) !important;
  border: 1px solid var(--axon-blue) !important;
  color: #fff !important;
}
.primary-button:hover {
  background-color: var(--axon-blue-hover) !important;
  border-color: var(--axon-blue-hover) !important;
  color: #fff !important;
}
/* Secondary buttons → calm ghost that lights indigo on hover (was near-white) */
.secondary-button {
  background-color: transparent !important;
  border: 1px solid var(--axon-border) !important;
  color: var(--axon-text-2) !important;
}
.secondary-button:hover {
  background-color: var(--axon-surface-hover) !important;
  border-color: var(--axon-blue) !important;
  color: var(--axon-text-1) !important;
}
/* "Add another option"-style ghost add buttons → dashed indigo affordance */
[class*="bg-Gray-50"][class*="cursor-pointer"]:hover {
  background-color: var(--axon-surface-hover) !important;
  color: var(--axon-blue) !important;
}

/* Real DOM (verified live):
     .join-the-audio-popup        full-canvas container
       > .inner                   outer card (kill this card → flat layout)
           > .head                heavy header bar (hide it)
           > .wrapper
               > .left            preview card  > .camera, .micro-cam-wrap
               > .right           > .texts (h3 + p), .buttons (primary/secondary)
*/

/* Full-canvas backdrop: Axon near-black + faint radial glow, no chrome */
#plugNmeet-app .join-the-audio-popup {
  background: var(--axon-bg) !important;
  background-image: radial-gradient(circle at top, rgba(94, 106, 210, 0.08) 0%, transparent 70%) !important;
}

/* Outer card → dissolve into the canvas (skill: no card-in-a-card) */
#plugNmeet-app .join-the-audio-popup .inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 920px !important;
}

/* Heavy "Microphone and Camera Preferences" header bar → removed.
   The body's "Ready to join?" already names the screen. */
#plugNmeet-app .join-the-audio-popup .head { display: none !important; }

#plugNmeet-app .join-the-audio-popup .wrapper {
  background: transparent !important;
  align-items: center !important;
}

/* Camera preview: one calm Axon surface, 12px radius, soft frame */
#plugNmeet-app .join-the-audio-popup .left {
  background: var(--axon-surface) !important;
  border: 1px solid var(--axon-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
#plugNmeet-app .join-the-audio-popup .camera {
  background: var(--axon-surface-elevated) !important;
  border-radius: 8px !important;
}

/* Mic / cam toggle chips → Axon tokens, indigo on hover (not gray) */
#plugNmeet-app .join-the-audio-popup .microphone-wrap,
#plugNmeet-app .join-the-audio-popup .cam-wrap {
  background: rgba(15, 15, 18, 0.72) !important;
  border: 1px solid var(--axon-border-strong) !important;
  border-radius: 9999px !important;
  color: var(--axon-text-1) !important;
  backdrop-filter: blur(10px);
}
#plugNmeet-app .join-the-audio-popup .microphone-wrap:hover,
#plugNmeet-app .join-the-audio-popup .cam-wrap:hover {
  background: rgba(94, 106, 210, 0.14) !important;
  border-color: var(--axon-blue) !important;
  color: var(--axon-blue) !important;
}

/* Off-palette lime-green "+" device badge → on-brand success/indigo dot */
#plugNmeet-app .join-the-audio-popup .microphone-wrap span.add,
#plugNmeet-app .join-the-audio-popup .cam-wrap span.add {
  color: var(--axon-success) !important;
}
#plugNmeet-app .join-the-audio-popup span.add svg rect,
#plugNmeet-app .join-the-audio-popup span.add svg path {
  fill: var(--axon-success) !important;
  stroke: var(--axon-success) !important;
}

/* Heading "Ready to join?" + prompt copy */
#plugNmeet-app .join-the-audio-popup .texts h1,
#plugNmeet-app .join-the-audio-popup .texts h2,
#plugNmeet-app .join-the-audio-popup .texts h3 {
  color: var(--axon-text-1) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: 28px !important;
  margin-bottom: 8px !important;
}
#plugNmeet-app .join-the-audio-popup .texts p {
  color: var(--axon-text-2) !important;
  font-size: 14px !important;
  max-width: 42ch !important;
}

/* ── Button hierarchy (skill: one clear primary, calm secondary) ── */
#plugNmeet-app .join-the-audio-popup .buttons button {
  border-radius: 6px !important;
  font-weight: 600 !important;
  height: 44px !important;
  box-shadow: none !important;
  transition: background 0.2s var(--axon-ease), border-color 0.2s var(--axon-ease),
    box-shadow 0.2s var(--axon-ease), color 0.2s var(--axon-ease) !important;
}

/* Primary "Enable Microphone and Camera" → filled indigo */
#plugNmeet-app .join-the-audio-popup .buttons .primary-button {
  background: var(--axon-blue) !important;
  border: 1px solid var(--axon-blue) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#plugNmeet-app .join-the-audio-popup .buttons .primary-button:hover {
  background: var(--axon-blue-hover) !important;
  border-color: var(--axon-blue-hover) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px var(--axon-blue-glow) !important;
}

/* Secondary "Join as a listener" → calm ghost, lights indigo on hover */
#plugNmeet-app .join-the-audio-popup .buttons .secondary-button {
  background: transparent !important;
  border: 1px solid var(--axon-border) !important;
  color: var(--axon-text-2) !important;
}
#plugNmeet-app .join-the-audio-popup .buttons .secondary-button:hover {
  background: var(--axon-surface-hover) !important;
  border-color: var(--axon-border-strong) !important;
  color: var(--axon-text-1) !important;
}

/* ── Form controls inside the app (name fields, selects, etc.) ── */
#plugNmeet-app input[type="text"],
#plugNmeet-app input[type="email"],
#plugNmeet-app input[type="password"],
#plugNmeet-app input[type="search"],
#plugNmeet-app select,
#plugNmeet-app textarea {
  background-color: var(--axon-surface-elevated) !important;
  border: 1px solid var(--axon-border) !important;
  border-radius: 6px !important;
  color: var(--axon-text-1) !important;
}
#plugNmeet-app input::placeholder,
#plugNmeet-app textarea::placeholder { color: var(--axon-text-3) !important; }
#plugNmeet-app input:focus,
#plugNmeet-app select:focus,
#plugNmeet-app textarea:focus {
  border-color: var(--axon-blue) !important;
  box-shadow: 0 0 0 3px var(--axon-blue-glow) !important;
}

/* ── Links / accents ── */
#plugNmeet-app a { color: var(--axon-blue); }
#plugNmeet-app a:hover { color: var(--axon-blue-hover); }

/* ── Footer/toolbar mic + cam active state → indigo, not cyan ── */
#plugNmeet-app .pnm-mic-unmute,
#plugNmeet-app .pnm-webcam[class*="active"] {
  color: var(--axon-blue) !important;
}

/* ── Toast notifications: align with dark surface ── */
.Toastify__toast {
  background: var(--axon-surface-elevated) !important;
  color: var(--axon-text-1) !important;
  border: 1px solid var(--axon-border) !important;
  border-radius: 8px !important;
}
.Toastify__progress-bar { background: var(--axon-blue) !important; }

/* ============================================================
   IN-CALL ROOM SHELL  (verified live)
   header (.header-logo-img .header-title) · footer (.footer-*)
   .plugNmeet-app-main-area stage · .participants-panel
   ============================================================ */

/* App canvas + main areas → Axon near-black */
#plugNmeet-app .plugNmeet-app-main-area,
#plugNmeet-app .middle-area,
#plugNmeet-app .middle-fullscreen-wrapper {
  background: var(--axon-bg) !important;
}

/* ── Header ── */
#plugNmeet-app header {
  background: var(--axon-surface) !important;
  border-bottom: 1px solid var(--axon-border) !important;
}
#plugNmeet-app .header-title { color: var(--axon-text-1) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }

/* Replace the old bitmap logo with the Axon hexagon wordmark.
   Hide the <img>, paint the mark via the logo container background. */
#plugNmeet-app .header-logo-img { opacity: 0 !important; width: 0 !important; }
#plugNmeet-app .header-logo {
  min-width: 120px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: auto 24px !important;
  /* hexagon mark (indigo) + "outflow" wordmark */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='28' viewBox='0 0 128 28'><g fill='none'><path d='M14 3 24 8.5v11L14 25 4 19.5v-11L14 3Z' stroke='%235e6ad2' stroke-width='1.6' stroke-linejoin='round'/><path d='M14 8 19 10.8v5.4L14 19l-5-2.8v-5.4L14 8Z' fill='%235e6ad2' fill-opacity='0.7'/></g><text x='34' y='19' font-family='Inter,system-ui,sans-serif' font-size='15' font-weight='600' letter-spacing='-0.02em' fill='%23f7f8f8'>outflow</text></svg>") !important;
}

/* Header right-side icons (bell, volume, kebab) → calm text color */
#plugNmeet-app header svg { color: var(--axon-text-2) !important; }

/* Light/dark toggle → hidden. The brand is dark-only (locked in index.html),
   so the toggle would only let users break the theme into white mode. */
#plugNmeet-app header [class*="rounded-full"]:has(> .moon),
#plugNmeet-app header button:has(.moon),
#plugNmeet-app header .moon { display: none !important; }

/* ============================================================
   BODY-LEVEL PORTALED MODALS (record dialog, popups that render
   OUTSIDE #plugNmeet-app). Dark mode is force-locked in index.html
   so the app's own dark: variants handle most surfaces. These are
   targeted safety nets for portals whose dark variant is missing.
   ============================================================ */
/* Record dialog + any headlessui dialog panel rendered at body root */
body [id^="headlessui-dialog-panel"],
body [class*="DialogPanel"] {
  background-color: var(--axon-surface) !important;
  border: 1px solid var(--axon-border) !important;
  color: var(--axon-text-1) !important;
  border-radius: 12px !important;
}
body [id^="headlessui-dialog-panel"] h1,
body [id^="headlessui-dialog-panel"] h2,
body [id^="headlessui-dialog-panel"] h3 { color: var(--axon-text-1) !important; }
body [id^="headlessui-dialog-panel"] p { color: var(--axon-text-2) !important; }
/* Primary action button inside body-portal dialogs → indigo */
body [id^="headlessui-dialog-panel"] button[class*="bg-Blue"],
body [id^="headlessui-dialog-panel"] button[class*="primary"] {
  background: var(--axon-blue) !important;
  border-color: var(--axon-blue) !important;
  color: #fff !important;
}

/* ── Footer toolbar ── */
#plugNmeet-app footer {
  background: var(--axon-surface) !important;
  border-top: 1px solid var(--axon-border) !important;
}
/* All footer icon chips → unified Axon surface, indigo on hover */
#plugNmeet-app .footer-icon-bg {
  background: var(--axon-surface-elevated) !important;
  border: 1px solid var(--axon-border) !important;
  border-radius: 10px !important;
  color: var(--axon-text-1) !important;
  box-shadow: none !important;
  transition: background 0.2s var(--axon-ease), border-color 0.2s var(--axon-ease), color 0.2s var(--axon-ease) !important;
}
#plugNmeet-app .footer-icon:hover .footer-icon-bg {
  background: var(--axon-surface-hover) !important;
  border-color: var(--axon-blue) !important;
  color: var(--axon-blue) !important;
}
#plugNmeet-app .footer-icon-bg svg { color: currentColor !important; }

/* Off-palette lime-green "+" device badges in the footer → Axon success */
#plugNmeet-app footer .microphone-wrap span.add,
#plugNmeet-app footer .cam-wrap span.add,
#plugNmeet-app footer span.add { color: var(--axon-success) !important; }
#plugNmeet-app footer span.add svg rect,
#plugNmeet-app footer span.add svg path { fill: var(--axon-success) !important; stroke: var(--axon-success) !important; }

/* REC indicator → on-brand error red */
#plugNmeet-app .recorder-icon [class*="REC"],
#plugNmeet-app .recorder-icon svg { color: var(--axon-error) !important; }

/* "End meeting" button → Axon error, restrained */
#plugNmeet-app footer button[class*="bg-Red"],
#plugNmeet-app footer .footer-right button:last-child,
#plugNmeet-app [class*="end-meeting"] button,
#plugNmeet-app button[class*="Red-400"] {
  background: var(--axon-error) !important;
  border: 1px solid var(--axon-error) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#plugNmeet-app footer button[class*="bg-Red"]:hover,
#plugNmeet-app button[class*="Red-400"]:hover { background: #d94c4c !important; border-color: #d94c4c !important; }

/* ── Participants panel ── */
#plugNmeet-app .participants-panel,
#plugNmeet-app .side-panel-bg-color {
  background: var(--axon-surface) !important;
  border-left: 1px solid var(--axon-border) !important;
}
#plugNmeet-app .search-participants-wrap { border-bottom: 1px solid var(--axon-border) !important; }
#plugNmeet-app .participants-panel h1,
#plugNmeet-app .participants-panel h2,
#plugNmeet-app .participants-panel h3 { color: var(--axon-text-1) !important; font-weight: 600 !important; }

/* Participant avatar initials chip → Axon indigo (was cyan) */
#plugNmeet-app .participants-panel [class*="bg-Blue"],
#plugNmeet-app [class*="avatar"][class*="bg-"] {
  background: var(--grad-brand, linear-gradient(135deg, #5e6ad2 0%, #8b7fd8 100%)) !important;
}

/* ============================================================
   WEBCAM TILES + PIN ARRANGEMENT  (.all-webcam-wrapper)
   Tiles render only with live video; arrangement CSS below
   refines spacing, radius and the pinned-cam split so pins sit
   correctly. Verify against real cams (2nd participant).
   ============================================================ */

/* Each webcam tile → Axon surface, tight radius, clean frame */
#plugNmeet-app .video-camera-item {
  background: var(--axon-surface-elevated) !important;
  border: 1px solid var(--axon-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
#plugNmeet-app .video-camera-item.its-me {
  border-color: var(--axon-blue) !important;
  box-shadow: 0 0 0 1px var(--axon-blue-glow) !important;
}

/* Grid gutters: consistent, calm spacing */
#plugNmeet-app .all-webcam-wrapper .all-webcam-wrapper-inner {
  gap: 10px !important;
  padding: 12px !important;
}
#plugNmeet-app .all-webcam-wrapper .all-webcam-wrapper-inner [class*="camera-row"] {
  gap: 10px !important;
}

/* Pinned-cam layout: give the pinned tile clear dominance, keep the
   secondary strip evenly sized (fixes cramped/misaligned pin rows). */
#plugNmeet-app .has-pin-cam .pinCam-item.video-camera-item {
  border-color: var(--axon-blue) !important;
  box-shadow: 0 0 0 1px var(--axon-blue-glow) !important;
}
#plugNmeet-app .has-pin-cam .camera-row-wrap {
  gap: 10px !important;
  align-items: stretch !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX: stranded webcam tile in the bottom strip (whiteboard /
   screenshare active). The stock CSS locks a single cam to 33%
   width, so it floats with huge dead space either side. Give the
   few-cam cases a proper 16:9 tile that fills the strip height and
   sits centered — no more stranded sliver.
   Verified live (single cam) — geometry was 313px tile in 938px row.
   ────────────────────────────────────────────────────────────── */
#plugNmeet-app .vertical-webcams-wrapper .inner,
#plugNmeet-app .vertical-webcams-wrapper [class*="row-count"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
#plugNmeet-app .vertical-webcams-wrapper [class*="camera-row"] {
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  gap: 10px !important;
}

/* The strip is responsive: a RIGHT COLUMN on xl (w-[212px], full height)
   and a BOTTOM BAND below xl (full width, ~126-200px tall). Fix both so a
   small number of cams reads as deliberate, not stranded. */

/* ── BOTTOM-BAND mode (below xl: full-width horizontal strip) ──
   Single cam: make the tile fill the band height generously and center,
   capping width so it never becomes a lonely sliver in a vast row. */
@media (max-width: 1279px) {
  #plugNmeet-app .vertical-webcams-wrapper:not(.extended-view-wrap) {
    height: 200px !important;
  }
  #plugNmeet-app .vertical-webcams-wrapper .camera-row-0.total-items-1 .video-camera-item {
    width: auto !important;
    height: 176px !important;
    aspect-ratio: 16 / 9 !important;
  }
  #plugNmeet-app .vertical-webcams-wrapper .camera-row-0.total-items-2 .video-camera-item {
    width: auto !important;
    height: 176px !important;
    aspect-ratio: 16 / 9 !important;
    max-width: calc(50% - 6px) !important;
  }
  #plugNmeet-app .vertical-webcams-wrapper .camera-row-0.total-items-3 .video-camera-item,
  #plugNmeet-app .vertical-webcams-wrapper .camera-row-0.total-items-4 .video-camera-item {
    width: auto !important;
    height: 176px !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ── RIGHT-COLUMN mode (xl+: vertical 212px-wide rail) ──
   Tiles stack full-width of the rail; just center them vertically and
   give each a clean 16:9 frame so 1-2 cams don't float oddly. */
@media (min-width: 1280px) {
  #plugNmeet-app .vertical-webcams-wrapper .inner,
  #plugNmeet-app .vertical-webcams-wrapper [class*="row-count"] {
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
  }
  #plugNmeet-app .vertical-webcams-wrapper [class*="camera-row"] {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
  }
  #plugNmeet-app .vertical-webcams-wrapper .video-camera-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}