/*
 * MiroTalk P2P — Shared design tokens.
 *
 * Common values (colors, spacing, radius, shadows, motion, z-index)
 * used across all pages. Tokens are prefixed with `--ds-` so they
 * don't clash with existing CSS variables.
 */

:root {
    /* Colors */
    --ds-brand-50: #eef3ff;
    --ds-brand-100: #d9e3ff;
    --ds-brand-300: #8aa9ff;
    --ds-brand-500: #4678f9;
    --ds-brand-600: #376df9;
    --ds-brand-700: #2a5ad6;

    --ds-neutral-0: #ffffff;
    --ds-neutral-50: #f9faff;
    --ds-neutral-100: #e8ecf1;
    --ds-neutral-300: #b0b6c2;
    --ds-neutral-500: #6a6f82;
    --ds-neutral-700: #292b32;
    --ds-neutral-800: #1d2026;
    --ds-neutral-900: #0f1117;

    --ds-success: #22c55e;
    --ds-warning: #ffc107;
    --ds-danger: #e74c3c;
    --ds-info: #5a8aff;

    /* Spacing (4px base) */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-7: 32px;
    --ds-space-8: 40px;
    --ds-space-9: 48px;
    --ds-space-10: 64px;

    /* Border radius */
    --ds-radius-xs: 4px;
    --ds-radius-sm: 6px;
    --ds-radius-md: 10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 20px;
    --ds-radius-full: 999px;

    /* Shadows */
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.22);
    --ds-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.32);
    --ds-shadow-focus: 0 0 0 2px var(--ds-brand-500), 0 0 0 4px rgba(70, 120, 249, 0.28);

    /* Stacking order (use these instead of raw z-index values) */
    --ds-z-base: 1;
    --ds-z-grid: 5;
    --ds-z-toolbar: 20;
    --ds-z-popover: 40;
    --ds-z-panel: 60;
    --ds-z-overlay: 80;
    --ds-z-modal: 100;
    --ds-z-toast: 200;
    --ds-z-tooltip: 300;

    /* Motion */
    --ds-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ds-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ds-duration-fast: 120ms;
    --ds-duration-base: 180ms;
    --ds-duration-slow: 240ms;

    /* Minimum touch target size */
    --ds-touch-min: 44px;

    /* Typography */
    --ds-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Visible focus ring when navigating with keyboard. */
:where(button, [role='button'], a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-brand-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(70, 120, 249, 0.28);
    border-radius: var(--ds-radius-sm);
}

/* Honor the user's "reduce motion" system preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* ============================================================================
 * Moustachir brand override for MiroTalk design tokens.
 *
 * This block is APPENDED to upstream public/css/_tokens.css at image-build time
 * (see Dockerfile). Because _tokens.css loads first on every MiroTalk view, a
 * trailing :root wins the cascade and re-themes the whole UI without touching
 * any HTML or upstream CSS.
 *
 * Palette source of truth: packages/ui/src/styles/globals.css
 *   --primary    #152c4c  (deep navy)   --brand      #365e97  (brand blue)
 *   --background #f8f8f8                 --card       #ffffff
 *   --foreground #152c4c                 --ai         #17a6b1  (teal accent)
 *
 * Light mode is the default (brand favors light surfaces). The dark-mode block
 * is kept commented below for a future opt-in.
 * ========================================================================== */

:root {
  /* Brand ramp — map MiroTalk --ds-brand-* onto Moustachir blue/navy.
     600 is the primary action color; 700 is the hover/pressed (navy). */
  --ds-brand-50: #eaf0f8;
  --ds-brand-100: #d2e0f1;
  --ds-brand-300: #8fa9cd;
  --ds-brand-500: #365e97; /* --brand */
  --ds-brand-600: #365e97; /* --brand (primary action) */
  --ds-brand-700: #152c4c; /* --primary (hover / pressed) */

  /* Neutral ramp — surfaces & text mapped to Moustachir light tokens. */
  --ds-neutral-0: #ffffff; /* --card */
  --ds-neutral-50: #f8f8f8; /* --background */
  --ds-neutral-100: #f3f4f6; /* --secondary / surface-muted */
  --ds-neutral-300: #9ca3af; /* --muted-foreground */
  --ds-neutral-500: #374151; /* --secondary-foreground */
  --ds-neutral-700: #1f2d44;
  --ds-neutral-800: #18283f;
  --ds-neutral-900: #152c4c; /* --foreground (deep navy) */

  /* Semantic — keep success, retint info to the Moustachir teal accent. */
  --ds-success: #22c55e; /* --success */
  --ds-warning: #eab308; /* --warning-500 */
  --ds-danger: #ef4444; /* --destructive */
  --ds-info: #17a6b1; /* --ai (teal) */
}

/* ----------------------------------------------------------------------------
 * Dark mode (opt-in) — uncomment to enable a navy-tinted dark theme.
 * Values mirror the commented .dark block in packages/ui globals.css.
 * MiroTalk does not ship a dark toggle by default; enabling this requires
 * applying the [data-theme="dark"] (or equivalent) selector upstream uses.
 * ----------------------------------------------------------------------------
:root[data-theme="dark"] {
  --ds-brand-500: #93c5fd;
  --ds-brand-600: #93c5fd;
  --ds-brand-700: #60a5fa;
  --ds-neutral-0: #13233a;   // --card (dark)
  --ds-neutral-50: #0f172a;  // --background (dark)
  --ds-neutral-100: #18263d;
  --ds-neutral-300: #94a3b8;
  --ds-neutral-500: #cbd5e1;
  --ds-neutral-700: #e2e8f0;
  --ds-neutral-800: #f1f5f9;
  --ds-neutral-900: #f8fafc; // --foreground (dark)
  --ds-info: #17a6b1;
}
 * -------------------------------------------------------------------------- */

/* ============================================================================
 * Hero override — match the moustachir-v4 web landing page.
 *
 * The v4 web hero (apps/web/.../landing-hero.tsx) is a NAVY→BLUE gradient with
 * WHITE text that melts into a light (#f8f8f8) page below — NOT a flat light
 * hero. We mirror that recipe here so MiroTalk's login/landing match the
 * product's front door, while keeping light mode the default for everything
 * below the hero. These rules use !important only where landing.css already
 * does; re-verify after an upstream bump that restyles landing.css.
 *
 * v4 recipe:
 *   hero base   #123b7a (brand blue)
 *   hero grad   top white/12 → #24539a/28 → #0a2d63/90 (deep navy)
 *   hero text   white                primary btn   #365e97 (brand) on white text
 *   page below  #f8f8f8 (light)      navy ink      #152c4c
 * ========================================================================== */

/* Solid navy fallback on html/body so any uncovered pixel is brand navy,
   never black. */
html,
body {
  min-height: 100vh !important;
  background: #0a2d63 !important;
}

/* Hero background — match the v4 web landing page: a country photo behind a
   navy overlay + vertical navy gradient (v4 uses bg-primary/52 over the image
   plus from-primary/10 via-primary/40 to-primary/75). The photo is the default
   Algeria artwork (../images/hero-bg.webp), matching getHeroBackground()'s DZ
   fallback — a static meeting server has no per-country runtime selection.
   Lives on .body-wrap so it grows with the document (no black band below fold). */
.body-wrap,
.site-content,
main.site-content {
  min-height: 100vh !important;
  background:
    linear-gradient(
      to bottom,
      rgba(21, 44, 76, 0.55) 0%,
      rgba(21, 44, 76, 0.72) 45%,
      rgba(10, 45, 99, 0.92) 100%
    ),
    url("../images/hero-bg.webp") center top / cover no-repeat,
    linear-gradient(to bottom, #123b7a 0%, #16356f 55%, #0a2d63 100%) no-repeat !important;
  background-attachment: scroll, scroll, scroll !important;
  background-size: cover, cover, cover !important;
}

/* Neutralize the stray white divider lines on the wrap/footer. */
.body-wrap,
.site-footer {
  border-top: 0 !important;
}

/* Suppress MiroTalk's stock aurora illustration (../images/header.png), painted
   via .illustration-section-01::after — it clashes with the clean v4 gradient. */
.illustration-section-01::after,
.illustration-section-02::after,
[class*="illustration-section"]::after {
  display: none !important;
  background: none !important;
}

/* Hero copy → white, matching the v4 hero. */
body,
h1,
h2,
h3,
.hero-content,
.hero-content p,
.subtitle {
  color: #ffffff !important;
}

/* ── Login layout: two-column hero (card left · brand panel right) ─────────────
   Match the v4 auth split-layout. MiroTalk's login template only fills the left
   split column, leaving the right half empty — so we (a) trim the oversized
   stacked padding, (b) lay the hero out as a centered flex row, and (c) fill the
   right column with the Moustachir brand via .hero-inner::after.
   Below 900px it stacks: brand on top, card below. */

/* Trim the stacked vertical padding (was 80 + 80 + 40 = 200px+). */
.hero.illustration-section-01 {
  padding-top: 0 !important;
}

.hero-inner.section-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(24px, 5vw, 72px) !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 64px) !important;
  padding: 40px 0 !important;
}

/* Left column: the login card wrapper — no longer hugging the far left. */
.hero-inner .split-wrap,
.hero-inner .split-item {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Right column: Moustachir brand panel (white wordmark + tagline). */
.hero-inner::after {
  display: flex !important;
  flex: 0 1 420px !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  order: 2 !important;
  min-width: 280px !important;
  max-width: 460px !important;
  padding: 8px 8px 8px 0 !important;
  padding-top: clamp(96px, 12vw, 120px) !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  text-wrap: balance !important;
  content: "Secure video meetings with your Moustachir experts — no install, just one click." !important;
  /* the wordmark sits above the tagline */
  background:
    url("../images/logo-white.svg") left top / clamp(200px, 22vw, 280px) auto
    no-repeat !important;
}

/* Keep the card to the left of the brand panel. */
.hero-inner .split-wrap {
  order: 1 !important;
}

/* Login card → translucent navy glass on the blue hero (v4 surface feel). */
#loginForm {
  position: relative !important;
  width: min(420px, 90vw) !important;
  margin: 0 !important;
  color: #ffffff !important;
  background: rgba(10, 30, 60, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 20px 25px -5px rgba(2, 8, 23, 0.45) !important;
  backdrop-filter: blur(12px) !important;
}

/* Stack on small screens: brand on top, card below, centered. */
@media (max-width: 900px) {
  .hero-inner.section-inner {
    flex-direction: column !important;
    min-height: auto !important;
    padding: 32px 0 !important;
  }

  .hero-inner::after {
    flex-basis: auto !important;
    align-items: center !important;
    order: 0 !important;
    padding-top: clamp(72px, 18vw, 96px) !important;
    text-align: center !important;
    background-position: center top !important;
  }

  .hero-inner .split-wrap {
    order: 1 !important;
  }
}

#loginForm h1,
#loginForm h2,
#loginForm label,
#loginForm p {
  color: #ffffff !important;
}

/* Inputs → subtle light-on-navy fields. */
#loginForm input,
input[type="text"],
input[type="password"] {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

#loginForm input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Primary button → brand blue with white text (v4 hero CTA). */
.button-primary,
button[type="submit"] {
  color: #ffffff !important;
  background: #365e97 !important;
  border: none !important;
}

.button-primary:hover,
button[type="submit"]:hover {
  background: #2a5ad6 !important;
}

/* ── Footer: de-brand upstream + blend into the navy hero ──────────────────────
   Hide MiroTalk's promotional footer chrome (social row, GitHub Sponsor/Star,
   the "© MiroTalk" credit) so the published image is cleanly Moustachir, and
   keep the footer transparent so the page gradient carries through. */
.site-footer {
  background: transparent !important;
}

.footer-social,
.footer-copyright,
.github-btn,
[class*="github"],
a[href*="github.com"],
a[href*="codecanyon"] {
  display: none !important;
}

/* Hide the upstream "Rest API" docs link and "Contact: Miroslav Pejic" from the
   footer nav (hide the whole <li> so no empty bullet remains). */
.footer-nav li:has(> a[href*="mirotalk.com/api"]),
.footer-nav li:has(> a[href*="miroslav-pejic"]),
.footer-nav a[href*="mirotalk.com/api"],
.footer-nav a[href*="miroslav-pejic"] {
  display: none !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Navbar: "back to main app" (injected by moustachir-nav.js) ────────────────
   Sits in MiroTalk's .site-header. Brand monogram + label on the navy hero. */
.site-header {
  position: relative !important;
  z-index: 5 !important;
  padding-top: 18px !important;
}

.site-header .site-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.moustachir-back-nav {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px 6px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  opacity: 0.92 !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease !important;
}

/* Subtle, on-brand hover: the whole link lifts slightly and the arrow nudges
   left — no frosted box, no harsh background flash. */
.moustachir-back-nav:hover {
  opacity: 1 !important;
  transform: translateX(-2px) !important;
}

.moustachir-back-nav__logo {
  width: auto !important;
  height: 28px !important;
}

.moustachir-back-nav__label {
  display: inline-flex !important;
  align-items: center !important;
  padding-left: 12px !important;
  margin-left: 2px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  white-space: nowrap !important;
  border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.moustachir-back-nav:hover .moustachir-back-nav__label {
  color: #ffffff !important;
}

/* The arrow icon nudges on hover to signal "go back". */
.moustachir-back-nav__label i {
  transition: transform 0.18s ease !important;
}

.moustachir-back-nav:hover .moustachir-back-nav__label i {
  transform: translateX(-3px) !important;
}

@media (max-width: 640px) {
  .moustachir-back-nav__label {
    display: none !important;
  }
}

/* ── Branded 404 / access-restricted card ─────────────────────────────────────
   Centered glass card on the navy hero, matching the login card surface. */
#restricted-card {
  max-width: 460px !important;
  padding: 40px !important;
  margin: 0 auto !important;
  color: #ffffff !important;
  text-align: center !important;
  background: rgba(10, 30, 60, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 25px -5px rgba(2, 8, 23, 0.45) !important;
  backdrop-filter: blur(12px) !important;
}

#restricted-logo {
  width: auto !important;
  height: 40px !important;
  margin: 0 auto 22px !important;
}

#restricted-card .login-title {
  color: #ffffff !important;
}

#restricted-card .login-description {
  margin-bottom: 26px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

#restricted-cta {
  display: inline-block !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: #365e97 !important;
  border-radius: 9999px !important;
}

#restricted-cta:hover {
  background: #2a5ad6 !important;
}

/* ── Branded waiting room ──────────────────────────────────────────────────────
   Calm, refined consultation lobby on the navy hero. The one memorable detail:
   a breathing presence ring around the waiting person's initial. */
#mst-wait-card {
  width: min(460px, 92vw) !important;
  padding: 44px 40px 36px !important;
  margin: 0 auto !important;
  color: #ffffff !important;
  text-align: center !important;
  background: rgba(10, 30, 60, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 48px -16px rgba(2, 8, 23, 0.5) !important;
  opacity: 1 !important;
  backdrop-filter: blur(14px) !important;
  transform: none !important;
}

/* Breathing presence avatar */
.mst-wait-avatar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto 24px !important;
}

.mst-wait-initial {
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #365e97, #17a6b1) !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 20px -6px rgba(23, 166, 177, 0.6) !important;
}

.mst-wait-ring {
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid rgba(23, 166, 177, 0.5) !important;
  border-radius: 9999px !important;
  animation: mst-wait-breathe 2.6s ease-out infinite !important;
}

.mst-wait-ring--2 {
  animation-delay: 1.3s !important;
}

@keyframes mst-wait-breathe {
  0% {
    transform: scale(0.78);
    opacity: 0.9;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.mst-wait-eyebrow {
  margin: 0 0 6px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: rgba(23, 166, 177, 0.95) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

.mst-wait-name {
  margin: 0 0 10px !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.mst-wait-sub {
  max-width: 34ch !important;
  margin: 0 auto 26px !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

/* Consultation schedule + elapsed meta */
.mst-wait-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  text-align: left !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}

.mst-wait-meta-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 16px !important;
}

.mst-wait-meta-row + .mst-wait-meta-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mst-wait-meta-row i {
  width: 16px !important;
  color: rgba(23, 166, 177, 0.95) !important;
}

.mst-wait-meta-label {
  flex: 1 !important;
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.mst-wait-meta-value {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* Live status line with soft pulse */
.mst-wait-status-line {
  display: inline-flex !important;
  gap: 9px !important;
  align-items: center !important;
  font-size: 0.86rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.mst-wait-pulse {
  width: 9px !important;
  height: 9px !important;
  background: #22c55e !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6) !important;
  animation: mst-wait-pulse 1.8s ease-out infinite !important;
}

@keyframes mst-wait-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mst-wait-ring,
  .mst-wait-pulse {
    animation: none !important;
  }
}

/* Music player stays hidden even if initAudioPlayer un-hides it before the
   empty waitingRoomSongUrl config loads. No music in the consultation lobby. */
#waitingAudioPlayer {
  display: none !important;
}

/* Upstream waitingRoom.js un-hides #waitingRoomName and fills it with the raw
   room id — we surface the person's name instead, so keep this hidden. */
#waitingRoomName {
  display: none !important;
}

/* Share/invite controls are disabled at the SOURCE, not via CSS: config.buttons.*
   turns them off for guests, and moustachir-noshare.js wraps handleRules() so the
   Share-Room button, Share-QR, and Settings email-invitation tab stay off for
   presenters too (handleRules would otherwise re-enable them). The share-on-join
   popup is killed in moustachir-room.js. No CSS hack needed. */