/* ══════════════════════════════════════════════════════════════════════════
   Neo — a dark, electric AI overlay on the Classical design system.
   Loaded AFTER styles.css so these token values win. Retheme lives here so
   all Mobirey pages stay in step. Keeps Classical's type + structure;
   inverts the ground to near-black and swaps the muted gold for electric indigo.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --color-bg: #08090f;
  --color-surface: #12131d;
  --color-text: #e7e8f2;
  --color-divider: color-mix(in srgb, #ffffff 12%, transparent);

  /* Electric-indigo accent. Ramp runs DARK→BRIGHT (inverse of a light theme)
     because on this ground the low steps are tint fills and the high steps
     (700/800) are the readable text the pages ask for. */
  --color-accent: #8b7bff;
  --color-accent-2: #8b7bff;
  --color-accent-100: #17162c;
  --color-accent-200: #201d40;
  --color-accent-300: #322b66;
  --color-accent-400: #4f43a3;
  --color-accent-500: #6f60e0;
  --color-accent-600: #9384ff;
  --color-accent-700: #ab9dff;
  --color-accent-800: #c8bcff;
  --color-accent-900: #e8e3ff;

  --color-accent-2-100: #17162c;
  --color-accent-2-200: #201d40;
  --color-accent-2-300: #322b66;
  --color-accent-2-400: #4f43a3;
  --color-accent-2-500: #6f60e0;
  --color-accent-2-600: #9384ff;
  --color-accent-2-700: #ab9dff;
  --color-accent-2-800: #c8bcff;
  --color-accent-2-900: #e8e3ff;

  /* Neutrals keep light→dark (low steps = light text on the dark ground). */
  --color-neutral-100: #f4f5fb;
  --color-neutral-200: #dcddec;
  --color-neutral-300: #b9bbd2;
  --color-neutral-400: #9092ad;
  --color-neutral-500: #6d6f8a;
  --color-neutral-600: #515368;
  --color-neutral-700: #383a4c;
  --color-neutral-800: #23242f;
  --color-neutral-900: #14151d;

  /* Elevation → ambient darkness + a hairline, per the system's dark-ground note. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.55);
  --shadow-md: 0 6px 22px rgba(0,0,0,0.55);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.62);

  /* Duotone highlight used sparingly for the AI/Neo glow (indigo → cyan). */
  --neo-cyan: #34e5ff;
  --neo-glow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent),
              0 8px 30px color-mix(in srgb, var(--color-accent) 34%, transparent);
}

body { background: var(--color-bg); color: var(--color-text); }

/* Selection + focus already read from the accent; just warm the selection tint. */
::selection { background: color-mix(in srgb, var(--color-accent) 34%, transparent); }

/* Primary CTA becomes a filled electric slab with glow — the one deliberate
   departure from the outlined-button rule, for the modern/AI punch asked for. */
.btn-primary {
  color: #0a0b12;
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--neo-cyan) 130%);
  box-shadow: var(--neo-glow);
}
.btn-primary:hover {
  color: #0a0b12;
  background: linear-gradient(135deg, var(--color-accent-600) 0%, var(--neo-cyan) 140%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent),
              0 10px 38px color-mix(in srgb, var(--color-accent) 48%, transparent);
}
.btn-primary:active {
  background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent) 130%);
}

/* Ghost/secondary stay outlined but pick up the brighter accent on dark. */
.btn-ghost { color: var(--color-accent-700); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* Inputs read clearer on the dark ground. */
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* Utility: an electric indigo→cyan gradient headline fragment. */
.neo-grad {
  background: linear-gradient(100deg, var(--color-accent-700) 0%, var(--neo-cyan) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Utility: the layered glow + faint grid backdrop for hero areas. */
.neo-backdrop {
  position: relative;
  background:
    radial-gradient(60% 90% at 78% 8%, color-mix(in srgb, var(--color-accent) 24%, transparent) 0%, transparent 60%),
    radial-gradient(50% 80% at 6% 96%, color-mix(in srgb, var(--neo-cyan) 12%, transparent) 0%, transparent 62%);
}
.neo-backdrop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #ffffff 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #ffffff 4%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
}
.neo-backdrop > * { position: relative; z-index: 1; }

@keyframes neo-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Pulsing glow ring for the live-call Vox button. */
@keyframes neo-callglow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neo-cyan) 55%, transparent), 0 0 16px 2px color-mix(in srgb, var(--color-accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--neo-cyan) 0%, transparent), 0 0 26px 6px color-mix(in srgb, var(--neo-cyan) 55%, transparent); }
}

/* Floating logo-mark motif — gentle bob + sway, for decorative M glyphs. */
@keyframes neo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-3deg); }
}
@keyframes neo-float-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(14px) rotate(4deg); }
}
/* Draw-in of the mark's stroke when it scrolls into view. */
@keyframes neo-draw {
  from { stroke-dashoffset: 220; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-mark-float] { animation: none !important; }
}

@keyframes neo-wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* Live voice VU-meter: irregular height + light, three offset patterns. */
@keyframes neo-vu-a {
  0%   { transform: scaleY(.22); opacity: .5; box-shadow: 0 0 0 color-mix(in srgb, var(--neo-cyan) 0%, transparent); }
  25%  { transform: scaleY(.95); opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--neo-cyan) 55%, transparent); }
  45%  { transform: scaleY(.4);  opacity: .7; box-shadow: 0 0 4px color-mix(in srgb, var(--neo-cyan) 20%, transparent); }
  70%  { transform: scaleY(1);   opacity: 1; box-shadow: 0 0 16px color-mix(in srgb, var(--neo-cyan) 60%, transparent); }
  100% { transform: scaleY(.55); opacity: .8; box-shadow: 0 0 8px color-mix(in srgb, var(--neo-cyan) 30%, transparent); }
}
@keyframes neo-vu-b {
  0%   { transform: scaleY(.7);  opacity: .85; box-shadow: 0 0 8px color-mix(in srgb, var(--neo-cyan) 30%, transparent); }
  30%  { transform: scaleY(.28); opacity: .5;  box-shadow: 0 0 2px color-mix(in srgb, var(--neo-cyan) 10%, transparent); }
  55%  { transform: scaleY(1);   opacity: 1;   box-shadow: 0 0 16px color-mix(in srgb, var(--neo-cyan) 60%, transparent); }
  80%  { transform: scaleY(.45); opacity: .7;  box-shadow: 0 0 4px color-mix(in srgb, var(--neo-cyan) 20%, transparent); }
  100% { transform: scaleY(.62); opacity: .8;  box-shadow: 0 0 8px color-mix(in srgb, var(--neo-cyan) 30%, transparent); }
}
@keyframes neo-vu-c {
  0%   { transform: scaleY(.4);  opacity: .65; box-shadow: 0 0 4px color-mix(in srgb, var(--neo-cyan) 20%, transparent); }
  35%  { transform: scaleY(1);   opacity: 1;   box-shadow: 0 0 16px color-mix(in srgb, var(--neo-cyan) 60%, transparent); }
  60%  { transform: scaleY(.3);  opacity: .55; box-shadow: 0 0 2px color-mix(in srgb, var(--neo-cyan) 10%, transparent); }
  85%  { transform: scaleY(.82); opacity: .95; box-shadow: 0 0 12px color-mix(in srgb, var(--neo-cyan) 45%, transparent); }
  100% { transform: scaleY(.5);  opacity: .75; box-shadow: 0 0 6px color-mix(in srgb, var(--neo-cyan) 25%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  [data-voicebar] { animation: none !important; transform: scaleY(.6) !important; opacity: .85 !important; }
}


/* ═══ Mobile app shell — bottom tab bar + compact header (≤820px) ═══ */
.app-tabbar { display: none; }
@media (max-width: 820px) {
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-around; align-items: stretch;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-divider);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
  }
  .app-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 2px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 58%, transparent); text-decoration: none;
  }
  .app-tabbar a[aria-current="page"] { color: var(--color-accent-700); }
  .app-tabbar a[aria-current="page"] svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--neo-cyan) 55%, transparent)); }
  .app-tabbar svg { width: 22px; height: 22px; }
  /* content clears the tab bar */
  body { padding-bottom: 76px; }
  /* compact app header: brand + CTA only, inline text links move to the tab bar */
  .nav { justify-content: space-between; gap: 10px; }
  .nav > a:not(.nav-brand):not(.btn) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-tabbar a[aria-current="page"] svg { filter: none; }
}


/* ═══ Mobile hamburger menu (top-right) — supersedes the bottom tab bar ═══ */
.app-menu { display: none; }
@media (max-width: 820px) {
  .app-tabbar { display: none !important; }
  body { padding-bottom: 0; }
  .nav .btn { display: none; }              /* hamburger carries navigation */
  .app-menu { display: block; margin-left: auto; position: relative; }
  .app-menu > summary {
    list-style: none; cursor: pointer;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
    color: var(--color-text); background: transparent;
  }
  .app-menu > summary::-webkit-details-marker { display: none; }
  .app-menu[open] > summary { border-color: var(--color-accent); color: var(--color-accent-700); box-shadow: var(--neo-glow); }
  .app-menu > summary svg { width: 22px; height: 22px; }
  .app-menu-panel {
    position: fixed; right: clamp(16px,5vw,72px); top: 68px; min-width: 220px; z-index: 4000;
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 8px;
  }
  .app-menu-panel a {
    display: block; padding: 12px 14px; font-size: 15px; color: var(--color-text);
    text-decoration: none; border-radius: var(--radius-sm);
    font-family: var(--font-heading);
  }
  .app-menu-panel a + a { border-top: 1px solid var(--color-divider); }
  .app-menu-panel a:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
}