/* Meridian Mail v2 — neon glass layered on the Organic tokens.
   Accent hues are oklch with a swappable hue; light + dark grounds; glass surfaces. */
:root {
  --hue-accent: 45;
  --hue-accent-2: 135;
  --blob-alpha: 0.55;
}
html[data-accent="lime"] { --hue-accent: 135; --hue-accent-2: 45; }
html[data-accent="cyan"] { --hue-accent: 215; --hue-accent-2: 320; }
html[data-accent="magenta"] { --hue-accent: 335; --hue-accent-2: 200; }
html[data-accent="violet"] { --hue-accent: 290; --hue-accent-2: 160; }
html[data-blobs="off"] { --blob-alpha: 0; }
html[data-blobs="vivid"] { --blob-alpha: 0.9; }

/* ---- light glass ---- */
:root {
  --color-bg: oklch(0.965 0.012 75);
  --color-text: oklch(0.22 0.02 55);
  --color-surface: rgba(255, 255, 255, 0.62);
  --color-divider: oklch(0.22 0.02 55 / 0.11);
  --color-accent: oklch(0.62 0.2 var(--hue-accent));
  --color-accent-2: oklch(0.6 0.15 var(--hue-accent-2));

  --color-neutral-100: oklch(0.985 0.006 75);
  --color-neutral-200: oklch(0.95 0.01 75);
  --color-neutral-300: oklch(0.9 0.012 70);
  --color-neutral-400: oklch(0.8 0.014 65);
  --color-neutral-500: oklch(0.66 0.016 60);
  --color-neutral-600: oklch(0.52 0.018 58);
  --color-neutral-700: oklch(0.42 0.018 56);
  --color-neutral-800: oklch(0.32 0.016 55);
  --color-neutral-900: oklch(0.2 0.014 55);

  --color-accent-100: oklch(0.97 0.03 var(--hue-accent));
  --color-accent-200: oklch(0.93 0.07 var(--hue-accent));
  --color-accent-300: oklch(0.87 0.12 var(--hue-accent));
  --color-accent-400: oklch(0.79 0.17 var(--hue-accent));
  --color-accent-500: oklch(0.7 0.2 var(--hue-accent));
  --color-accent-600: oklch(0.6 0.2 var(--hue-accent));
  --color-accent-700: oklch(0.5 0.17 var(--hue-accent));
  --color-accent-800: oklch(0.4 0.13 var(--hue-accent));
  --color-accent-900: oklch(0.3 0.09 var(--hue-accent));

  --color-accent-2-100: oklch(0.97 0.03 var(--hue-accent-2));
  --color-accent-2-200: oklch(0.93 0.06 var(--hue-accent-2));
  --color-accent-2-300: oklch(0.87 0.1 var(--hue-accent-2));
  --color-accent-2-400: oklch(0.79 0.14 var(--hue-accent-2));
  --color-accent-2-500: oklch(0.7 0.16 var(--hue-accent-2));
  --color-accent-2-600: oklch(0.6 0.16 var(--hue-accent-2));
  --color-accent-2-700: oklch(0.5 0.13 var(--hue-accent-2));
  --color-accent-2-800: oklch(0.4 0.1 var(--hue-accent-2));
  --color-accent-2-900: oklch(0.3 0.07 var(--hue-accent-2));

  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-hover: oklch(0.22 0.02 55 / 0.06);
  --glass-active: oklch(0.22 0.02 55 / 0.1);
  --neon-glow: oklch(0.7 0.2 var(--hue-accent) / 0.45);
  --neon-glow-2: oklch(0.7 0.16 var(--hue-accent-2) / 0.4);

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 55 / 0.08);
  --shadow-md: 0 10px 28px -10px oklch(0.2 0.02 55 / 0.2);
  --shadow-lg: 0 28px 70px -18px oklch(0.2 0.02 55 / 0.32);
}

/* ---- dark glass (charcoal) ---- */
html[data-theme="dark"] {
  --color-bg: oklch(0.15 0.014 55);
  --color-text: oklch(0.95 0.01 75);
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-divider: rgba(255, 255, 255, 0.11);
  --color-accent: oklch(0.78 0.19 var(--hue-accent));
  --color-accent-2: oklch(0.8 0.15 var(--hue-accent-2));

  --color-neutral-100: oklch(0.2 0.014 55);
  --color-neutral-200: oklch(0.27 0.015 55);
  --color-neutral-300: oklch(0.35 0.016 56);
  --color-neutral-400: oklch(0.46 0.017 58);
  --color-neutral-500: oklch(0.58 0.016 60);
  --color-neutral-600: oklch(0.7 0.014 65);
  --color-neutral-700: oklch(0.8 0.012 70);
  --color-neutral-800: oklch(0.9 0.01 75);
  --color-neutral-900: oklch(0.97 0.006 75);

  --color-accent-100: oklch(0.28 0.08 var(--hue-accent));
  --color-accent-200: oklch(0.36 0.11 var(--hue-accent));
  --color-accent-300: oklch(0.46 0.15 var(--hue-accent));
  --color-accent-400: oklch(0.58 0.18 var(--hue-accent));
  --color-accent-500: oklch(0.7 0.2 var(--hue-accent));
  --color-accent-600: oklch(0.78 0.19 var(--hue-accent));
  --color-accent-700: oklch(0.85 0.14 var(--hue-accent));
  --color-accent-800: oklch(0.91 0.09 var(--hue-accent));
  --color-accent-900: oklch(0.96 0.04 var(--hue-accent));

  --color-accent-2-100: oklch(0.28 0.06 var(--hue-accent-2));
  --color-accent-2-200: oklch(0.36 0.09 var(--hue-accent-2));
  --color-accent-2-300: oklch(0.46 0.12 var(--hue-accent-2));
  --color-accent-2-400: oklch(0.58 0.14 var(--hue-accent-2));
  --color-accent-2-500: oklch(0.7 0.16 var(--hue-accent-2));
  --color-accent-2-600: oklch(0.8 0.15 var(--hue-accent-2));
  --color-accent-2-700: oklch(0.86 0.11 var(--hue-accent-2));
  --color-accent-2-800: oklch(0.92 0.07 var(--hue-accent-2));
  --color-accent-2-900: oklch(0.96 0.03 var(--hue-accent-2));

  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(38, 33, 30, 0.78);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glass-active: rgba(255, 255, 255, 0.12);
  --neon-glow: oklch(0.78 0.19 var(--hue-accent) / 0.55);
  --neon-glow-2: oklch(0.8 0.15 var(--hue-accent-2) / 0.5);

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 34px -12px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 34px 80px -22px rgba(0, 0, 0, 0.8);
}

/* theme cross-fade — only while html.theming is set, so hovers stay instant */
html.theming body, html.theming body * {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease,
    box-shadow 0.45s ease, fill 0.45s ease, stroke 0.45s ease, opacity 0.45s ease !important;
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theming body, html.theming body * { transition: none !important; }
}

html, body { height: 100%; margin: 0; overflow: hidden; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
* { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; }
::placeholder { color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.btn, .input, .seg-opt { transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; }
.seg-opt { white-space: nowrap; }
.seg { flex-wrap: wrap; }
.btn-primary { box-shadow: 0 8px 26px -10px var(--neon-glow); }
.btn-primary:hover { box-shadow: 0 10px 30px -8px var(--neon-glow); }
.input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.seg { background: var(--glass); }
.seg-opt:has(input:checked) { box-shadow: 0 0 18px -4px var(--neon-glow); }
/* rich-text content inside the editor and message bodies */
.mm-rich blockquote { margin: 6px 0 6px 4px; padding: 2px 0 2px 12px; border-left: 3px solid var(--color-accent-400); opacity: 0.85; }
.mm-rich p { margin: 0 0 10px; }
.mm-rich ul, .mm-rich ol { margin: 6px 0 10px; padding-left: 26px; }
.mm-rich a { color: var(--color-accent-700); }
.mm-rich:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--color-text) 42%, transparent); pointer-events: none; }

/* mobile browsers: no auto-zoom on focus (iOS zooms inputs under 16px), no double-tap zoom on controls */
html { -webkit-text-size-adjust: 100%; }
button, a, [role="button"] { touch-action: manipulation; }
@media (max-width: 760px), (pointer: coarse) {
  input, textarea, select, [contenteditable] { font-size: 16px !important; }
}

/* mobile app shell: fixed non-bouncing page, never a horizontal scrollbar, no tap flash */
html, body { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.86); --glass-strong: rgba(255, 255, 255, 0.94); }
  html[data-theme="dark"] { --glass: rgba(38, 33, 30, 0.9); --glass-strong: rgba(38, 33, 30, 0.96); }
}
@media (max-width: 760px) { .dialog { border-radius: 0; } }