/* LoveSync Design System — bundled (do not edit; npm run build) */

/* === src/styles/tokens/primitives.css === */
/**
 * LoveSync Design System — примітиви (спільні для всіх тем)
 * OKLCH — perceptually uniform, сучасний стандарт 2025–2026
 */

:root {
  /* Typography scale (4px rhythm, mobile-first) */
  --ls-font-3xs: 0.5625rem;   /* 9px  — micro badges, chart ticks */
  --ls-font-2xs: 0.625rem;    /* 10px — chips, tabs, compact CTAs */
  --ls-font-xs: 0.6875rem;    /* 11px — labels, overlines */
  --ls-font-sm: 0.8125rem;    /* 13px — secondary body, inputs */
  --ls-font-compact: 0.875rem; /* 14px — icons, compact paragraphs */
  --ls-font-base: 0.9375rem;  /* 15px — primary body */
  --ls-font-md: 1rem;
  --ls-font-lg: 1.125rem;
  --ls-font-xl: 1.25rem;
  --ls-font-2xl: 1.5rem;
  --ls-font-3xl: 1.875rem;
  --ls-font-4xl: 2.25rem;

  /* Semantic text roles */
  --ls-text-micro: var(--ls-font-3xs);
  --ls-text-badge: var(--ls-font-3xs);
  --ls-text-caption: var(--ls-font-2xs);
  --ls-text-overline: var(--ls-font-xs);
  --ls-text-label: var(--ls-font-xs);
  --ls-text-secondary: var(--ls-font-sm);
  --ls-text-body: var(--ls-font-base);
  --ls-text-subtitle: var(--ls-font-compact);
  --ls-text-title-sm: var(--ls-font-lg);
  --ls-text-title: var(--ls-font-xl);
  --ls-text-heading: var(--ls-font-2xl);
  --ls-text-display: 1.75rem;
  --ls-text-display-lg: 2.75rem;
  --ls-avatar-emoji: 3.25rem;
  --ls-avatar-emoji-md: 2.75rem;

  /* Chat composer */
  --ls-chat-input-font-sm: var(--ls-text-overline);
  --ls-chat-input-font-md: var(--ls-font-sm);
  --ls-chat-send-icon-sm: var(--ls-icon-2xs);
  --ls-chat-send-icon-md: var(--ls-icon-xs);
  --ls-chat-send-size-sm: var(--ls-btn-min-h-icon-sm);
  --ls-chat-send-size-md: 2.4rem;
  --ls-chat-input-min-h-sm: var(--ls-btn-min-h-icon-sm);
  --ls-chat-input-min-h-md: var(--ls-btn-min-h-sm);
  --ls-chat-input-min-h-lg: var(--ls-btn-min-h-md);

  /* Icon sizes */
  --ls-icon-2xs: 0.75rem;
  --ls-icon-xs: var(--ls-font-compact);
  --ls-icon-sm: var(--ls-font-base);
  --ls-icon-md: var(--ls-font-lg);
  --ls-icon-lg: var(--ls-font-xl);
  --ls-icon-nav: 1.375rem;

  /* Button typography & sizing */
  --ls-btn-font-xs: var(--ls-font-2xs);
  --ls-btn-font-sm: var(--ls-font-xs);
  --ls-btn-font-md: var(--ls-font-sm);
  --ls-btn-font-lg: var(--ls-font-sm);
  --ls-btn-min-h-xs: 1.75rem;
  --ls-btn-min-h-sm: 2rem;
  --ls-btn-min-h-md: 2.25rem;
  --ls-btn-min-h-lg: 2.5rem;
  --ls-btn-min-h-icon-sm: 2.25rem;
  --ls-btn-min-h-icon: 2.75rem;
  --ls-btn-min-h-icon-lg: 3rem;
  --ls-btn-py-xs: 0.25rem;
  --ls-btn-py-sm: 0.375rem;
  --ls-btn-py-md: 0.5rem;
  --ls-btn-py-lg: 0.625rem;
  --ls-btn-px-xs: 0.625rem;
  --ls-btn-px-sm: 0.75rem;
  --ls-btn-px-md: 1rem;
  --ls-btn-px-lg: 1.25rem;
  --ls-btn-gap-xs: 0.25rem;
  --ls-btn-gap-sm: 0.375rem;
  --ls-btn-gap-md: 0.5rem;

  --ls-leading-tight: 1.25;
  --ls-leading-normal: 1.5;
  --ls-leading-relaxed: 1.625;

  /* Spacing (4px base) */
  --ls-space-1: 0.25rem;
  --ls-space-2: 0.5rem;
  --ls-space-3: 0.75rem;
  --ls-space-4: 1rem;
  --ls-space-5: 1.25rem;
  --ls-space-6: 1.5rem;
  --ls-space-8: 2rem;
  --ls-space-10: 2.5rem;
  --ls-space-12: 3rem;

  /* Radii */
  --ls-radius-sm: 0.375rem;
  --ls-radius-md: 0.5rem;
  --ls-radius-lg: 0.75rem;
  --ls-radius-xl: 1rem;
  --ls-radius-2xl: 1.25rem;
  --ls-radius-full: 9999px;

  /* Accent / action pills (натяки, чат, настрій) */
  --ls-btn-accent-border-width: 2px;
  --ls-btn-accent-py: 0.625rem;
  --ls-btn-accent-px: 1.125rem;
  --ls-btn-accent-sm-py: 0.625rem;
  --ls-btn-accent-sm-px: 1.125rem;
  --ls-btn-accent-min-h: 2.5rem;
  --ls-btn-accent-gap: 0.75rem;

  --ls-nav-mobile-glow-size: 1.625rem;
  --ls-nav-mobile-glow-blur: 11px;
  --ls-nav-mobile-glow: color-mix(in oklch, var(--ls-brand-500) 30%, transparent);

  /* Motion */
  --ls-duration-fast: 150ms;
  --ls-duration-normal: 250ms;
  --ls-duration-slow: 400ms;
  --ls-duration-slower: 600ms;
  --ls-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ls-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ls-ease-spring-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --mobile-nav-height: 4.5rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Висота fixed bottom nav від краю viewport (margin + padding nav + grid + safe-area) */
  --mobile-nav-footprint: calc(
    var(--mobile-nav-height) + 1.2rem + 0.5rem + var(--safe-bottom)
  );
  /* Внутрішній pad scrollport — один раз, не на layout-батьку */
  --mobile-scroll-pad-bottom: calc(var(--mobile-nav-footprint) + 0.5rem);

  /* Breakpoints (Material / Flutter-aligned, mobile-first) */
  --ls-bp-xs: 380px;
  --ls-bp-sm: 640px;
  --ls-bp-md: 768px;
  --ls-bp-lg: 1024px;
  --ls-bp-xl: 1280px;
  --ls-bp-2xl: 1536px;

  /* Tab scroll areas — safe-area aware */
  --tab-scroll-pad-x: 1rem;
  --tab-scroll-pad-top: 1rem;

  /* Glass (defaults; themes override) */
  --ls-glass-blur: 16px;
  --ls-glass-blur-strong: 36px;
  --ls-glass-saturate: 1.2;
  --ls-glass-specular: inset 0 1px 0 oklch(1 0 0 / 0.45);
  --ls-material-regular: oklch(1 0 0 / 0.55);
  --ls-material-thick: oklch(1 0 0 / 0.78);
  --ls-material-nav: oklch(1 0 0 / 0.82);

  /* Mood palette (emoji accents — theme-independent) */
  --ls-mood-angry: oklch(0.68 0.19 45);
  --ls-mood-sad: oklch(0.58 0.17 25);
  --ls-mood-support: oklch(0.72 0.18 15);
  --ls-mood-tired: oklch(0.62 0.1 280);
  --ls-mood-peaceful: oklch(0.62 0.11 200);
  --ls-mood-calm: oklch(0.62 0.09 290);
  --ls-mood-happy: oklch(0.72 0.15 130);
  --ls-mood-bliss: oklch(0.54 0.16 155);
  /* Mood picker EQ bars */
  --ls-mood-eq-bar-dim: rgba(255, 255, 255, 0.14);
  --ls-mood-eq-track-bg: rgba(2, 6, 23, 0.6);
  --ls-mood-eq-track-border: rgba(71, 85, 105, 0.25);
  --ls-mood-eq-track-active: rgba(15, 23, 42, 0.85);
}


/* === src/styles/themes/dark.css === */
/**
 * LoveSync — темна тема (оновлена, refined)
 * Глибокий violet-slate + rose neon accents
 */

[data-theme="dark"] {
  color-scheme: dark;

  --ls-bg-base: oklch(0.14 0.025 270);
  --ls-bg-gradient: radial-gradient(
    circle at top left,
    oklch(0.22 0.08 300) 0%,
    oklch(0.14 0.025 270) 55%,
    oklch(0.16 0.06 350) 100%
  );
  --ls-surface: oklch(0.18 0.025 265);
  --ls-surface-raised: oklch(0.22 0.03 265);
  --ls-surface-sunken: oklch(0.12 0.02 270);
  --ls-surface-overlay: oklch(0.08 0.02 270 / 0.75);

  --ls-ink: oklch(0.95 0.01 270);
  --ls-ink-muted: oklch(0.72 0.02 265);
  --ls-ink-subtle: oklch(0.58 0.025 260);
  --ls-ink-inverse: oklch(0.14 0.025 270);

  --ls-brand-50: oklch(0.25 0.06 15);
  --ls-brand-100: oklch(0.3 0.1 15);
  --ls-brand-200: oklch(0.4 0.14 15);
  --ls-brand-300: oklch(0.52 0.18 15);
  --ls-brand-400: oklch(0.62 0.2 15);
  --ls-brand-500: oklch(0.62 0.22 15);
  --ls-brand-600: oklch(0.55 0.22 12);
  --ls-brand-700: oklch(0.48 0.2 10);
  --ls-brand-800: oklch(0.4 0.16 8);
  --ls-brand-900: oklch(0.32 0.12 6);
  --ls-brand-950: oklch(0.22 0.1 5);

  --ls-partner-50: oklch(0.25 0.06 300);
  --ls-partner-100: oklch(0.32 0.1 300);
  --ls-partner-200: oklch(0.42 0.12 300);
  --ls-partner-300: oklch(0.55 0.14 300);
  --ls-partner-400: oklch(0.65 0.16 295);
  --ls-partner-500: oklch(0.7 0.14 295);
  --ls-partner-600: oklch(0.62 0.12 290);
  --ls-partner-700: oklch(0.52 0.1 285);

  --ls-success: oklch(0.7 0.14 155);
  --ls-warning: oklch(0.78 0.12 85);
  --ls-danger: oklch(0.62 0.2 25);
  --ls-info: oklch(0.68 0.1 240);
  --ls-coupon: oklch(0.82 0.12 85);
  --ls-coupon-badge-fg: oklch(0.88 0.1 85);
  --ls-coupon-badge-bg: oklch(0.55 0.11 85 / 0.22);
  --ls-coupon-badge-border: oklch(0.68 0.11 85 / 0.4);

  --ls-glass-bg: oklch(1 0 0 / 0.04);
  --ls-glass-border: oklch(1 0 0 / 0.08);
  --ls-glass-border-strong: oklch(0.62 0.22 15 / 0.2);
  --ls-glass-pink-bg: oklch(0.62 0.22 15 / 0.06);

  --ls-dash-ai-bg: linear-gradient(
    145deg,
    oklch(0.62 0.22 15 / 0.12) 0%,
    oklch(1 0 0 / 0.06) 48%,
    oklch(0.7 0.14 295 / 0.08) 100%
  );
  --ls-dash-ai-border: oklch(1 0 0 / 0.1);
  --ls-dash-ai-shadow: none;
  --ls-dash-ai-text: oklch(0.82 0.02 85);
  --ls-dash-ai-strong: oklch(0.88 0.1 15);
  --ls-dash-ai-loading-bg: oklch(1 0 0 / 0.04);
  --ls-dash-ai-loading-border: oklch(1 0 0 / 0.12);
  --ls-dash-ai-accent: linear-gradient(180deg, var(--ls-brand-400), var(--ls-partner-400));

  --ls-accent-soft: oklch(0.58 0.2 15 / 0.12);
  --ls-accent-soft-fg: oklch(0.78 0.16 15);
  --ls-accent-soft-hover: oklch(0.58 0.2 15 / 0.18);
  --ls-accent-soft-border: oklch(0.62 0.22 15 / 0.22);
  --ls-accent-soft-shadow: none;

  --ls-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --ls-shadow-md: 0 4px 20px oklch(0 0 0 / 0.35);
  --ls-shadow-lg: 0 12px 48px oklch(0 0 0 / 0.45);
  --ls-shadow-glow: 0 0 20px oklch(0.62 0.22 15 / 0.3);
  --ls-shadow-glow-strong: 0 0 40px oklch(0.62 0.22 15 / 0.55), 0 0 60px oklch(0.55 0.2 350 / 0.25);
  --ls-shadow-glow-partner: 0 0 28px oklch(0.7 0.14 295 / 0.5);

  --ls-chart-grid: oklch(1 0 0 / 0.06);
  --ls-chart-tick: oklch(0.72 0.02 265);
  --ls-chart-me: oklch(0.68 0.2 15);
  --ls-chart-partner: oklch(0.75 0.1 300);
  --ls-chart-me-band: oklch(0.72 0.16 15 / 0.24);
  --ls-chart-partner-band: oklch(0.76 0.1 300 / 0.22);
  --ls-chart-wrap-bg: linear-gradient(
    180deg,
    oklch(0.14 0.025 270 / 0.55) 0%,
    oklch(0.1 0.02 270 / 0.75) 100%
  );
  --ls-chart-wrap-border: oklch(1 0 0 / 0.08);
  --ls-chart-point-border: oklch(0.12 0.02 270);
  --ls-chart-tooltip-bg: oklch(0.14 0.025 270 / 0.96);
  --ls-chart-tooltip-border: oklch(1 0 0 / 0.12);
  --ls-chart-tooltip-title: oklch(0.95 0.01 270);
  --ls-filter-bg: oklch(0.12 0.02 270 / 0.72);
  --ls-filter-fg: oklch(0.58 0.025 260);
  --ls-filter-fg-active: oklch(0.95 0.01 270);
  --ls-filter-active-bg: oklch(0.62 0.22 15 / 0.22);
  --ls-filter-active-border: oklch(0.62 0.22 15 / 0.35);
  --ls-legend-me-fg: oklch(0.88 0.06 15);
  --ls-legend-partner-fg: oklch(0.88 0.05 300);
  --ls-legend-off-bg: oklch(0.14 0.025 270 / 0.5);

  --ls-wishes-active-bg: oklch(0.52 0.14 155 / 0.05);
  --ls-wishes-active-border: oklch(0.52 0.14 155 / 0.2);
  --ls-wishes-active-heading: oklch(0.7 0.14 155);
  --ls-wishes-active-hint: oklch(0.72 0.02 265);
  --ls-wishes-active-hint-confirm: oklch(0.78 0.08 240);
  --ls-wishes-active-icon-bg: oklch(0.52 0.14 155 / 0.1);
  --ls-wishes-active-icon-border: oklch(0.52 0.14 155 / 0.2);
  --ls-wishes-confirm-heading: oklch(0.78 0.08 240);
  --ls-wish-snooze-text: oklch(0.84 0.12 78);
  --ls-wish-snooze-bg: oklch(0.62 0.13 75 / 0.2);
  --ls-wish-snooze-border: oklch(0.72 0.14 78 / 0.38);
  --ls-wish-snooze-btn-text: oklch(0.88 0.1 78);
  --ls-wish-snooze-btn-bg: oklch(0.62 0.13 75 / 0.16);
  --ls-wish-snooze-btn-border: oklch(0.72 0.14 78 / 0.32);
  --ls-btn-brand-text: var(--ls-brand-400);
  --ls-btn-brand-bg: oklch(0.62 0.22 15 / 0.1);
  --ls-btn-brand-border: oklch(0.62 0.22 15 / 0.2);
  --ls-btn-emerald-text: oklch(0.74 0.14 160);
  --ls-btn-emerald-bg: oklch(0.55 0.14 160 / 0.1);
  --ls-btn-emerald-border: oklch(0.55 0.14 160 / 0.2);
  --ls-btn-rose-text: oklch(0.72 0.14 25);
  --ls-btn-rose-bg: oklch(0.62 0.2 25 / 0.1);
  --ls-btn-rose-border: oklch(0.62 0.2 25 / 0.25);
  --ls-btn-amber-text: oklch(0.84 0.12 78);
  --ls-btn-amber-bg: oklch(0.72 0.14 78 / 0.12);
  --ls-btn-amber-border: oklch(0.72 0.14 78 / 0.28);
  --ls-btn-sky-text: oklch(0.78 0.08 240);
  --ls-btn-sky-bg: oklch(0.62 0.14 230 / 0.1);
  --ls-btn-sky-border: oklch(0.62 0.14 230 / 0.2);
  --ls-btn-slate-text: var(--ls-ink-muted);
  --ls-btn-slate-bg: oklch(1 0 0 / 0.04);
  --ls-btn-slate-border: oklch(1 0 0 / 0.1);
  --ls-btn-teal-text: oklch(0.78 0.1 180);
  --ls-btn-teal-bg: oklch(0.62 0.12 180 / 0.12);
  --ls-btn-teal-border: oklch(0.62 0.12 180 / 0.28);
  --ls-btn-accent-text: var(--ls-ink);
  --ls-btn-accent-bg: oklch(0.22 0.025 270);
  --ls-btn-accent-border: oklch(1 0 0 / 0.22);
  --ls-btn-accent-bg-hover: oklch(0.26 0.03 270);
  --ls-btn-accent-border-hover: oklch(1 0 0 / 0.34);
  --ls-btn-accent-shadow: 0 2px 8px oklch(0 0 0 / 0.35);
  --ls-wish-confirm-text: var(--ls-btn-emerald-text);
  --ls-wish-confirm-bg: var(--ls-btn-emerald-bg);
  --ls-wish-confirm-border: var(--ls-btn-emerald-border);
  --ls-wish-pending-confirm-text: var(--ls-btn-sky-text);
  --ls-wish-pending-confirm-bg: var(--ls-btn-sky-bg);
  --ls-wish-pending-confirm-border: var(--ls-btn-sky-border);
  --ls-wish-attention-shadow: 0 6px 24px oklch(0.58 0.22 15 / 0.12);
  --ls-wish-attention-shadow-mid: 0 10px 32px oklch(0.58 0.22 15 / 0.18);

  --ls-notifications-panel-bg: linear-gradient(
    165deg,
    oklch(0.18 0.025 265 / 0.98) 0%,
    oklch(0.16 0.025 270 / 0.99) 55%,
    oklch(0.2 0.06 300 / 0.98) 100%
  );
  --ls-notifications-panel-border: oklch(1 0 0 / 0.08);
  --ls-notifications-panel-shadow:
    0 24px 48px oklch(0 0 0 / 0.55),
    0 0 0 1px oklch(1 0 0 / 0.08),
    inset 0 1px 0 oklch(1 0 0 / 0.06);
  --ls-notifications-header-bg: oklch(0.14 0.025 270 / 0.85);
  --ls-notifications-backdrop: oklch(0.08 0.02 270 / 0.55);
  --ls-notifications-item-hover: oklch(1 0 0 / 0.06);
  --ls-notifications-group-bg: oklch(1 0 0 / 0.03);

  /* Chat markdown & coupon dock */
  --ls-chat-md-h2: oklch(0.98 0.01 320);
  --ls-chat-md-h3: oklch(0.88 0.06 350);
  --ls-chat-md-h4: oklch(0.72 0.14 350);
  --ls-chat-md-strong: oklch(0.98 0.01 320);
  --ls-chat-md-em: oklch(0.88 0.06 350);
  --ls-chat-md-quote: oklch(0.82 0.02 265);
  --ls-chat-md-code: oklch(0.88 0.06 350);
  --ls-chat-md-code-bg: oklch(0.12 0.02 270 / 0.75);
  --ls-chat-md-pre-bg: oklch(0.12 0.02 270 / 0.85);
  --ls-chat-md-pre-border: oklch(1 0 0 / 0.08);
  --ls-chat-md-link: oklch(0.72 0.14 350);
  --ls-chat-md-link-hover: oklch(0.88 0.06 350);
  --ls-chat-md-hr: oklch(1 0 0 / 0.1);
  --ls-chat-md-strong-user: oklch(0.99 0.004 95);
  --ls-chat-md-link-user: oklch(0.92 0.04 15);
  --ls-chat-dock-bg: linear-gradient(180deg, oklch(0.08 0.02 270 / 0.4) 0%, oklch(0.08 0.02 270 / 0.95) 100%);
  --ls-chat-dock-panel-bg: linear-gradient(to top, oklch(0.08 0.02 270 / 0.95), oklch(0.08 0.02 270 / 0.7));
  --ls-chat-dock-intro: oklch(0.58 0.025 260);
  --ls-chat-draft-label: oklch(0.58 0.025 260);
  --ls-chat-draft-card-bg: var(--ls-surface-sunken);
  --ls-chat-draft-input-bg: oklch(0.08 0.02 270);
  --ls-chat-delete-btn-bg: oklch(0.12 0.02 270 / 0.85);
}


/* === src/styles/themes/glass.css === */
/**
 * LoveSync — тема «Liquid Glass» (iOS 26)
 * Напівпрозорі матеріали, mesh-фон, vibrancy, specular edges
 */

[data-theme="glass"],
:root {
  color-scheme: light;

  /* Theme-specific radii (iOS large corners) */
  --ls-radius-sm: 0.5rem;
  --ls-radius-md: 0.625rem;
  --ls-radius-lg: 1rem;
  --ls-radius-xl: 1.25rem;
  --ls-radius-2xl: 1.75rem;

  /* Surfaces — mesh gradient + translucent panels */
  --ls-bg-base: oklch(0.94 0.02 280);
  --ls-bg-gradient:
    radial-gradient(ellipse 120% 80% at 0% 0%, oklch(0.88 0.06 15 / 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 100% 10%, oklch(0.86 0.08 300 / 0.28) 0%, transparent 50%),
    linear-gradient(
      165deg,
      oklch(0.96 0.015 280) 0%,
      oklch(0.93 0.025 270) 45%,
      oklch(0.91 0.03 320) 100%
    );
  --ls-surface: oklch(1 0 0 / 0.55);
  --ls-surface-raised: oklch(1 0 0 / 0.72);
  --ls-surface-sunken: oklch(0.92 0.02 280 / 0.45);
  --ls-surface-overlay: oklch(0.2 0.02 270 / 0.32);

  /* Ink — cool near-black for glass readability */
  --ls-ink: oklch(0.22 0.02 270);
  --ls-ink-muted: oklch(0.44 0.025 275);
  --ls-ink-subtle: oklch(0.54 0.02 278);
  --ls-ink-inverse: oklch(0.99 0.004 280);

  /* Brand — vibrant rose (iOS saturation) */
  --ls-brand-50: oklch(0.97 0.02 15);
  --ls-brand-100: oklch(0.94 0.04 15);
  --ls-brand-200: oklch(0.88 0.08 15);
  --ls-brand-300: oklch(0.78 0.14 15);
  --ls-brand-400: oklch(0.66 0.2 15);
  --ls-brand-500: oklch(0.55 0.22 15);
  --ls-brand-600: oklch(0.48 0.21 12);
  --ls-brand-700: oklch(0.42 0.19 10);
  --ls-brand-800: oklch(0.36 0.16 8);
  --ls-brand-900: oklch(0.3 0.13 6);
  --ls-brand-950: oklch(0.24 0.1 5);

  /* Partner violet */
  --ls-partner-50: oklch(0.97 0.02 300);
  --ls-partner-100: oklch(0.93 0.04 300);
  --ls-partner-200: oklch(0.87 0.07 300);
  --ls-partner-300: oklch(0.76 0.11 300);
  --ls-partner-400: oklch(0.66 0.15 295);
  --ls-partner-500: oklch(0.56 0.17 295);
  --ls-partner-600: oklch(0.48 0.15 290);
  --ls-partner-700: oklch(0.42 0.13 285);

  /* Semantic */
  --ls-success: oklch(0.52 0.14 155);
  --ls-warning: oklch(0.62 0.13 75);
  --ls-danger: oklch(0.5 0.2 25);
  --ls-info: oklch(0.52 0.11 240);
  --ls-coupon: oklch(0.68 0.13 85);
  --ls-coupon-badge-fg: oklch(0.44 0.12 70);
  --ls-coupon-badge-bg: oklch(0.72 0.11 85 / 0.22);
  --ls-coupon-badge-border: oklch(0.55 0.12 80 / 0.35);

  /* UI semantics */
  --ls-accent-soft: oklch(0.55 0.22 15 / 0.12);
  --ls-accent-soft-fg: oklch(0.44 0.19 12);
  --ls-accent-soft-hover: oklch(0.55 0.22 15 / 0.18);
  --ls-accent-soft-border: oklch(0.55 0.22 15 / 0.28);
  --ls-accent-soft-shadow: 0 2px 12px oklch(0.55 0.22 15 / 0.12);
  --ls-nav-active-bg: oklch(0.55 0.22 15 / 0.14);
  --ls-nav-active-fg: oklch(0.42 0.19 12);
  --ls-nav-mobile-glow: oklch(0.55 0.22 15 / 0.24);
  --ls-border-subtle: oklch(1 0 0 / 0.35);
  --ls-border-default: oklch(1 0 0 / 0.45);
  --ls-border-strong: oklch(0.55 0.22 15 / 0.22);

  /* Mood picker EQ */
  --ls-mood-eq-bar-dim: oklch(0.48 0.03 275 / 0.52);
  --ls-mood-eq-track-bg: oklch(0.55 0.02 275 / 0.14);
  --ls-mood-eq-track-border: oklch(0.55 0.02 275 / 0.22);
  --ls-mood-eq-track-active: color-mix(in oklch, var(--ls-brand-100) 55%, var(--ls-surface-sunken));

  /* Glass materials */
  --ls-glass-bg: oklch(1 0 0 / 0.72);
  --ls-glass-border: oklch(1 0 0 / 0.5);
  --ls-glass-border-strong: oklch(0.55 0.22 15 / 0.25);
  --ls-glass-pink-bg: oklch(0.55 0.22 15 / 0.1);
  --ls-glass-blur: 28px;
  --ls-glass-saturate: 1.85;
  --ls-glass-blur-strong: 36px;
  --ls-glass-specular: inset 0 1px 0 oklch(1 0 0 / 0.55);
  --ls-material-regular: oklch(1 0 0 / 0.55);
  --ls-material-thick: oklch(1 0 0 / 0.78);
  --ls-material-nav: oklch(1 0 0 / 0.82);

  /* Dashboard AI insights */
  --ls-dash-ai-bg: linear-gradient(
    145deg,
    oklch(0.55 0.22 15 / 0.1) 0%,
    oklch(1 0 0 / 0.65) 42%,
    oklch(0.56 0.17 295 / 0.08) 100%
  );
  --ls-dash-ai-border: oklch(1 0 0 / 0.45);
  --ls-dash-ai-shadow: var(--ls-shadow-sm);
  --ls-dash-ai-text: var(--ls-ink-muted);
  --ls-dash-ai-strong: var(--ls-brand-700);
  --ls-dash-ai-loading-bg: oklch(1 0 0 / 0.55);
  --ls-dash-ai-loading-border: oklch(0.55 0.22 15 / 0.22);
  --ls-dash-ai-accent: linear-gradient(180deg, var(--ls-brand-400), var(--ls-partner-400));

  /* Shadows — soft depth on glass */
  --ls-shadow-sm: 0 1px 3px oklch(0.25 0.02 270 / 0.08), var(--ls-glass-specular);
  --ls-shadow-md: 0 4px 20px oklch(0.25 0.02 270 / 0.1), var(--ls-glass-specular);
  --ls-shadow-lg: 0 12px 40px oklch(0.25 0.02 270 / 0.14), var(--ls-glass-specular);
  --ls-shadow-glow: 0 0 20px oklch(0.55 0.22 15 / 0.15);
  --ls-shadow-glow-strong: 0 0 32px oklch(0.55 0.22 15 / 0.22);
  --ls-shadow-glow-partner: 0 0 24px oklch(0.56 0.17 295 / 0.18);
  --ls-shadow-brand: 0 4px 14px oklch(0.55 0.22 15 / 0.2);

  /* Charts */
  --ls-chart-grid: oklch(0.44 0.025 275 / 0.16);
  --ls-chart-tick: oklch(0.44 0.025 275);
  --ls-chart-me: oklch(0.55 0.22 15);
  --ls-chart-partner: oklch(0.66 0.15 295);
  --ls-chart-me-band: oklch(0.78 0.12 15 / 0.34);
  --ls-chart-partner-band: oklch(0.82 0.09 295 / 0.3);
  --ls-chart-wrap-bg: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.72) 0%,
    oklch(1 0 0 / 0.5) 100%
  );
  --ls-chart-wrap-border: oklch(1 0 0 / 0.45);
  --ls-chart-point-border: oklch(0.94 0.02 280);
  --ls-chart-tooltip-bg: oklch(1 0 0 / 0.92);
  --ls-chart-tooltip-border: oklch(1 0 0 / 0.5);
  --ls-chart-tooltip-title: oklch(0.22 0.02 270);
  --ls-filter-bg: oklch(1 0 0 / 0.4);
  --ls-filter-fg: oklch(0.44 0.025 275);
  --ls-filter-fg-active: oklch(0.42 0.19 12);
  --ls-filter-active-bg: oklch(0.55 0.22 15 / 0.12);
  --ls-filter-active-border: oklch(0.55 0.22 15 / 0.28);
  --ls-legend-me-fg: oklch(0.42 0.19 12);
  --ls-legend-partner-fg: oklch(0.42 0.13 290);
  --ls-legend-off-bg: oklch(1 0 0 / 0.35);

  /* Wishes */
  --ls-wishes-active-bg: oklch(0.55 0.14 155 / 0.12);
  --ls-wishes-active-border: oklch(0.52 0.14 155 / 0.28);
  --ls-wishes-active-heading: oklch(0.42 0.13 155);
  --ls-wishes-active-hint: oklch(0.44 0.025 275);
  --ls-wishes-active-hint-confirm: oklch(0.42 0.11 240);
  --ls-wishes-active-icon-bg: oklch(0.52 0.14 155 / 0.14);
  --ls-wishes-active-icon-border: oklch(0.52 0.14 155 / 0.28);
  --ls-wishes-confirm-heading: oklch(0.42 0.11 240);
  --ls-wish-snooze-text: oklch(0.36 0.13 62);
  --ls-wish-snooze-bg: oklch(0.78 0.14 75 / 0.35);
  --ls-wish-snooze-border: oklch(0.52 0.14 68 / 0.45);
  --ls-wish-snooze-btn-text: oklch(0.32 0.13 58);
  --ls-wish-snooze-btn-bg: oklch(0.82 0.13 78 / 0.5);
  --ls-wish-snooze-btn-border: oklch(0.52 0.14 68 / 0.4);
  --ls-btn-brand-text: var(--ls-brand-600);
  --ls-btn-brand-bg: oklch(0.55 0.22 15 / 0.12);
  --ls-btn-brand-border: oklch(0.55 0.22 15 / 0.28);
  --ls-btn-emerald-text: oklch(0.42 0.14 160);
  --ls-btn-emerald-bg: oklch(0.55 0.14 160 / 0.12);
  --ls-btn-emerald-border: oklch(0.55 0.14 160 / 0.25);
  --ls-btn-rose-text: oklch(0.46 0.16 25);
  --ls-btn-rose-bg: oklch(0.58 0.18 25 / 0.12);
  --ls-btn-rose-border: oklch(0.58 0.18 25 / 0.28);
  --ls-btn-amber-text: oklch(0.42 0.13 62);
  --ls-btn-amber-bg: oklch(0.78 0.14 75 / 0.25);
  --ls-btn-amber-border: oklch(0.52 0.14 68 / 0.38);
  --ls-btn-sky-text: oklch(0.42 0.11 240);
  --ls-btn-sky-bg: oklch(0.62 0.14 230 / 0.12);
  --ls-btn-sky-border: oklch(0.62 0.14 230 / 0.25);
  --ls-btn-slate-text: var(--ls-ink-muted);
  --ls-btn-slate-bg: oklch(1 0 0 / 0.35);
  --ls-btn-slate-border: oklch(1 0 0 / 0.45);
  --ls-btn-teal-text: oklch(0.38 0.11 180);
  --ls-btn-teal-bg: oklch(0.62 0.12 180 / 0.14);
  --ls-btn-teal-border: oklch(0.52 0.12 180 / 0.28);
  --ls-btn-accent-text: var(--ls-ink);
  --ls-btn-accent-bg: oklch(1 0 0 / 0.85);
  --ls-btn-accent-border: oklch(0.22 0.02 270 / 0.2);
  --ls-btn-accent-bg-hover: oklch(1 0 0 / 0.95);
  --ls-btn-accent-border-hover: oklch(0.55 0.22 15 / 0.45);
  --ls-btn-accent-shadow: 0 2px 10px oklch(0.25 0.02 270 / 0.1);
  --ls-wish-confirm-text: var(--ls-btn-emerald-text);
  --ls-wish-confirm-bg: var(--ls-btn-emerald-bg);
  --ls-wish-confirm-border: var(--ls-btn-emerald-border);
  --ls-wish-pending-confirm-text: var(--ls-btn-sky-text);
  --ls-wish-pending-confirm-bg: var(--ls-btn-sky-bg);
  --ls-wish-pending-confirm-border: var(--ls-btn-sky-border);
  --ls-wish-attention-shadow: 0 4px 20px oklch(0.55 0.22 15 / 0.12);
  --ls-wish-attention-shadow-mid: 0 8px 28px oklch(0.55 0.22 15 / 0.18);

  /* Notifications */
  --ls-notifications-panel-bg: oklch(1 0 0 / 0.88);
  --ls-notifications-panel-border: oklch(1 0 0 / 0.5);
  --ls-notifications-panel-shadow: var(--ls-shadow-lg);
  --ls-notifications-header-bg: oklch(1 0 0 / 0.65);
  --ls-notifications-backdrop: oklch(0.2 0.02 270 / 0.35);
  --ls-notifications-item-hover: oklch(0.55 0.22 15 / 0.08);
  --ls-notifications-group-bg: oklch(1 0 0 / 0.25);

  /* Notification bell badge */
  --ls-notifications-badge-bg: linear-gradient(145deg, oklch(0.58 0.24 15), oklch(0.48 0.22 12));
  --ls-notifications-badge-fg: oklch(0.99 0.006 280);
  --ls-notifications-badge-ring: oklch(0.99 0.006 280);
  --ls-notifications-badge-shadow: 0 2px 10px oklch(0.55 0.24 15 / 0.55);

  --ls-input-readonly-bg: oklch(1 0 0 / 0.4);

  /* Chat */
  --ls-chat-md-h2: var(--ls-ink);
  --ls-chat-md-h3: var(--ls-brand-700);
  --ls-chat-md-h4: var(--ls-brand-600);
  --ls-chat-md-strong: var(--ls-ink);
  --ls-chat-md-em: var(--ls-brand-600);
  --ls-chat-md-quote: var(--ls-ink-muted);
  --ls-chat-md-code: var(--ls-brand-700);
  --ls-chat-md-code-bg: var(--ls-surface-sunken);
  --ls-chat-md-pre-bg: var(--ls-surface-sunken);
  --ls-chat-md-pre-border: var(--ls-border-default);
  --ls-chat-md-link: var(--ls-brand-600);
  --ls-chat-md-link-hover: var(--ls-brand-700);
  --ls-chat-md-hr: var(--ls-border-default);
  --ls-chat-md-strong-user: var(--ls-ink-inverse);
  --ls-chat-md-link-user: oklch(0.95 0.04 15);
  --ls-chat-dock-bg: linear-gradient(180deg, var(--ls-glass-bg) 0%, var(--ls-surface-sunken) 100%);
  --ls-chat-dock-panel-bg: linear-gradient(to top, var(--ls-surface-sunken), var(--ls-glass-bg));
  --ls-chat-dock-intro: var(--ls-ink-muted);
  --ls-chat-draft-label: var(--ls-ink-subtle);
  --ls-chat-draft-card-bg: var(--ls-surface-raised);
  --ls-chat-draft-input-bg: var(--ls-glass-bg);
  --ls-chat-delete-btn-bg: var(--ls-surface-raised);

  /* Couple sync heart */
  --ls-heart-icon: var(--ls-brand-500);
  --ls-heart-hint: var(--ls-brand-300);
  --ls-heart-partner: var(--ls-partner-400);
  --ls-heart-pulse-mid: var(--ls-brand-400);
  --ls-heart-pulse-end: var(--ls-partner-400);

  /* Tailwind slate compat — cool glass neutrals */
  --tw-slate-50: oklch(0.97 0.01 280);
  --tw-slate-100: oklch(0.94 0.015 280);
  --tw-slate-200: oklch(0.9 0.02 278);
  --tw-slate-300: oklch(0.78 0.02 275);
  --tw-slate-400: oklch(0.58 0.025 275);
  --tw-slate-500: oklch(0.5 0.025 275);
  --tw-slate-600: oklch(0.42 0.03 272);
  --tw-slate-700: oklch(0.35 0.03 270);
  --tw-slate-800: oklch(0.28 0.025 268);
  --tw-slate-900: oklch(0.22 0.02 265);
  --tw-slate-950: oklch(0.18 0.02 262);
}


/* === src/styles/themes/glass-overrides.css === */
/**
 * LoveSync — Liquid Glass: override legacy Tailwind-класів (dark-first markup)
 * Підхід як у React ThemeProvider — семантичні токени замість hardcoded кольорів
 */

/* ——— Typography ——— */
[data-theme="glass"] body,
[data-theme="glass"] .text-slate-100,
[data-theme="glass"] .text-slate-200,
[data-theme="glass"] .text-slate-300 {
  color: var(--ls-ink);
}

[data-theme="glass"] .text-slate-400,
[data-theme="glass"] .text-slate-500,
[data-theme="glass"] .text-slate-600 {
  color: var(--ls-ink-muted);
}

[data-theme="glass"] .text-white:not(.bg-brand-500):not(.bg-brand-600):not(.bg-brand-500\/90):not(.bg-amber-500):not(.ls-btn--primary) {
  color: var(--ls-ink);
}

[data-theme="glass"] .text-brand-200,
[data-theme="glass"] .text-brand-300 {
  color: var(--ls-brand-600);
}

[data-theme="glass"] .text-brand-400 {
  color: var(--ls-brand-500);
}

[data-theme="glass"] .text-rose-300,
[data-theme="glass"] .text-rose-400 {
  color: var(--ls-brand-600);
}

[data-theme="glass"] .text-rose-400\/70,
[data-theme="glass"] .text-rose-300\/80 {
  color: var(--ls-ink-muted);
}

[data-theme="glass"] .text-violet-300 {
  color: var(--ls-partner-600);
}

[data-theme="glass"] .hover\:text-white:hover,
[data-theme="glass"] .hover\:text-rose-400:hover {
  color: var(--ls-brand-600);
}

/* ——— Surfaces ——— */
[data-theme="glass"] .bg-slate-900,
[data-theme="glass"] .bg-slate-900\/50,
[data-theme="glass"] .bg-slate-900\/60,
[data-theme="glass"] .bg-slate-900\/30,
[data-theme="glass"] .bg-slate-900\/70 {
  background-color: var(--ls-surface-sunken) !important;
  color: var(--ls-ink);
}

[data-theme="glass"] .bg-slate-950,
[data-theme="glass"] .bg-slate-950\/20,
[data-theme="glass"] .bg-slate-950\/30,
[data-theme="glass"] .bg-slate-950\/50,
[data-theme="glass"] .bg-slate-950\/60 {
  background-color: var(--ls-surface-sunken) !important;
}

[data-theme="glass"] .bg-brand-500,
[data-theme="glass"] .bg-brand-500:hover,
[data-theme="glass"] .hover\:bg-brand-600:hover.bg-brand-500,
[data-theme="glass"] button.bg-brand-500 {
  color: var(--ls-ink-inverse) !important;
}

[data-theme="glass"] #profile-save-btn,
[data-theme="glass"] #mood-save-open-btn,
[data-theme="glass"] #custom-wish-open-btn,
[data-theme="signature"] #profile-save-btn,
[data-theme="signature"] #mood-save-open-btn,
[data-theme="signature"] #custom-wish-open-btn {
  color: var(--ls-ink-inverse) !important;
}

[data-theme="glass"] #profile-save-btn [data-icon],
[data-theme="glass"] #mood-save-open-btn [data-icon],
[data-theme="glass"] #custom-wish-open-btn [data-icon],
[data-theme="signature"] #profile-save-btn [data-icon],
[data-theme="signature"] #mood-save-open-btn [data-icon],
[data-theme="signature"] #custom-wish-open-btn [data-icon] {
  color: inherit !important;
}

[data-theme="glass"] .bg-slate-800\/60 {
  background-color: var(--ls-surface-sunken) !important;
}

[data-theme="glass"] .dashboard-content-area {
  background-color: var(--ls-bg-base) !important;
}

[data-theme="glass"] .bg-white\/5,
[data-theme="glass"] .bg-white\/\[0\.01\],
[data-theme="glass"] .bg-white\/\[0\.005\],
[data-theme="glass"] .bg-white\/\[0\.02\],
[data-theme="glass"] .bg-white\/\[0\.03\] {
  background-color: var(--ls-glass-bg) !important;
}

[data-theme="glass"] .hover\:bg-white\/5:hover,
[data-theme="glass"] .hover\:bg-white\/10:hover {
  background-color: var(--ls-surface-sunken) !important;
}

[data-theme="glass"] .bg-brand-500\/5,
[data-theme="glass"] .bg-brand-950\/20 {
  background-color: var(--ls-glass-pink-bg) !important;
}

[data-theme="glass"] .bg-brand-500\/10,
[data-theme="glass"] .bg-brand-500\/15,
[data-theme="glass"] .bg-brand-500\/20 {
  background-color: oklch(0.52 0.2 15 / 0.08) !important;
}

[data-theme="glass"] .hover\:bg-brand-500\/10:hover,
[data-theme="glass"] .hover\:bg-brand-500\/20:hover {
  background-color: oklch(0.52 0.2 15 / 0.12) !important;
}

[data-theme="glass"] .bg-rose-500\/10 {
  background-color: oklch(0.52 0.2 15 / 0.07) !important;
}

[data-theme="glass"] .hover\:bg-rose-500\/20:hover {
  background-color: oklch(0.52 0.2 15 / 0.12) !important;
}

/* ——— Borders ——— */
[data-theme="glass"] .border-white\/5,
[data-theme="glass"] .border-white\/8,
[data-theme="glass"] .border-white\/10,
[data-theme="glass"] .border-white\/15,
[data-theme="glass"] .border-white\/20 {
  border-color: var(--ls-border-default) !important;
}

[data-theme="glass"] .hover\:border-white\/15:hover,
[data-theme="glass"] .hover\:border-white\/20:hover,
[data-theme="glass"] .group-hover\:border-white\/20 {
  border-color: var(--ls-border-strong) !important;
}

[data-theme="glass"] .border-brand-500\/10,
[data-theme="glass"] .border-brand-500\/20,
[data-theme="glass"] .border-brand-500\/25,
[data-theme="glass"] .border-brand-500\/30,
[data-theme="glass"] .border-brand-500\/40 {
  border-color: var(--ls-glass-border-strong) !important;
}

[data-theme="glass"] .border-rose-500\/30 {
  border-color: oklch(0.52 0.2 15 / 0.22) !important;
}

[data-theme="glass"] .ring-slate-950 {
  --tw-ring-color: var(--ls-surface-raised);
}

/* ——— Navigation ——— */
[data-theme="glass"] button[id^="nav-btn-"].bg-brand-500 {
  background-color: var(--ls-nav-active-bg) !important;
  color: var(--ls-nav-active-fg) !important;
  box-shadow: inset 0 0 0 1px var(--ls-glass-border-strong);
}

[data-theme="glass"] button[id^="nav-btn-"]:not(.bg-brand-500) {
  color: var(--ls-ink-muted);
}

[data-theme="glass"] button[id^="nav-btn-"]:not(.bg-brand-500):hover {
  background-color: var(--ls-accent-soft) !important;
  color: var(--ls-ink);
}

[data-theme="glass"] .mobile-nav-btn {
  color: var(--ls-ink-subtle);
}

[data-theme="glass"] .mobile-nav-btn.active {
  color: var(--ls-nav-active-fg) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-theme="glass"] .mobile-nav-btn.active.text-brand-400 {
  color: var(--ls-nav-active-fg) !important;
}

/* ——— Glass & cards ——— */
[data-theme="glass"] .glass,
[data-theme="glass"] .glass-pink {
  box-shadow: var(--ls-shadow-sm);
}

[data-theme="glass"] .dash-hero-card {
  background: linear-gradient(
    135deg,
    oklch(0.52 0.2 15 / 0.07) 0%,
    oklch(0.54 0.17 295 / 0.05) 50%,
    var(--ls-surface-raised) 100%
  ) !important;
  border-color: var(--ls-glass-border-strong) !important;
}

[data-theme="glass"] .mood-hero-card {
  background: linear-gradient(
    160deg,
    oklch(0.52 0.2 15 / 0.05) 0%,
    var(--ls-surface-raised) 50%
  ) !important;
}

[data-theme="glass"] .mood-picker-wrap,
[data-theme="signature"] .mood-picker-wrap {
  border-color: oklch(0.52 0.2 15 / 0.12);
  background: linear-gradient(
    128deg,
    oklch(0.78 0.14 15 / 0.35) 0%,
    oklch(0.72 0.1 295 / 0.22) 40%,
    oklch(0.97 0.01 270 / 0.95) 72%,
    oklch(0.75 0.12 295 / 0.2) 100%
  );
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.65),
    0 8px 24px oklch(0.52 0.2 15 / 0.08);
}

[data-theme="glass"] .mood-picker-wrap::before,
[data-theme="signature"] .mood-picker-wrap::before {
  background:
    radial-gradient(ellipse 85% 70% at 8% 15%, oklch(0.72 0.16 15 / 0.28), transparent 58%),
    radial-gradient(ellipse 75% 65% at 92% 88%, oklch(0.68 0.12 295 / 0.2), transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 100%, oklch(0.75 0.1 15 / 0.08), transparent 70%);
}

[data-theme="glass"] .mood-picker-wrap::after,
[data-theme="signature"] .mood-picker-wrap::after {
  background: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.5) 0%,
    transparent 42%,
    oklch(0.52 0.2 15 / 0.04) 100%
  );
}

[data-theme="glass"] .dash-kpi-card::after {
  background: radial-gradient(circle, oklch(0.52 0.2 15 / 0.05), transparent 70%);
}

[data-theme="glass"] .haptic-heart-btn {
  background: radial-gradient(
    circle at 42% 38%,
    oklch(0.78 0.14 15 / 0.42) 0%,
    oklch(0.68 0.18 15 / 0.16) 48%,
    oklch(0.62 0.12 15 / 0.08) 100%
  );
  box-shadow:
    0 0 0 1px oklch(0.58 0.22 15 / 0.08),
    0 10px 32px oklch(0.58 0.22 15 / 0.12),
    inset 0 1px 0 oklch(1 0 0 / 0.35);
}

[data-theme="glass"] .heart-glow {
  background: oklch(0.58 0.22 15 / 0.08);
}

[data-theme="glass"] .haptic-heart-icon {
  color: oklch(0.52 0.18 15);
}

[data-theme="glass"] .tab-section-header {
  border-bottom-color: var(--ls-border-default);
  background: var(--ls-surface-raised);
}

/* ——— Header / sidebar footer ——— */
[data-theme="glass"] header.glass,
[data-theme="glass"] aside.glass {
  background: var(--ls-surface-raised);
  border-color: var(--ls-border-default);
}

[data-theme="glass"] aside .border-b.border-white\/5 {
  background: var(--ls-surface);
}

[data-theme="glass"] aside .bg-slate-950\/20 {
  background: var(--ls-surface-sunken) !important;
  color: var(--ls-ink-muted);
}

/* ——— Inputs ——— */
[data-theme="glass"] input,
[data-theme="glass"] textarea,
[data-theme="glass"] select {
  color: var(--ls-ink);
}

[data-theme="glass"] #chat-message-input,
[data-theme="signature"] #chat-message-input {
  background-color: var(--ls-glass-bg) !important;
  border-color: var(--ls-border-default) !important;
}

[data-theme="glass"] input::placeholder,
[data-theme="glass"] textarea::placeholder {
  color: var(--ls-ink-subtle);
}

/* ——— Partner mood compact ——— */
[data-theme="glass"] .mood-partner-compact {
  background: var(--ls-surface-raised);
  border-color: var(--ls-glass-border);
}

[data-theme="glass"] .mood-partner-compact__empty-icon,
[data-theme="glass"] .mood-partner-compact__refresh,
[data-theme="glass"] .mood-partner-compact__quote {
  background: var(--ls-surface-sunken);
  border-color: var(--ls-border-default);
}

[data-theme="glass"] .bg-slate-950\/60 {
  background-color: var(--ls-surface-sunken) !important;
}

[data-theme="glass"] .glass-pink {
  background: var(--ls-brand-50);
  border-color: var(--ls-glass-border-strong);
  box-shadow: var(--ls-shadow-sm);
}

[data-theme="glass"] .text-violet-400\/80 {
  color: var(--ls-partner-600);
}

[data-theme="glass"] #user-info-bar {
  background: var(--ls-surface-sunken);
  border-color: var(--ls-border-default);
  color: var(--ls-ink-muted);
}

/* ——— Opacity text variants ——— */
[data-theme="glass"] .text-slate-300\/90,
[data-theme="glass"] .text-slate-300\/80 {
  color: var(--ls-ink-muted) !important;
}

/* ——— Semantic status colors (badges, підписи) ——— */
[data-theme="glass"] .text-emerald-400 {
  color: oklch(0.42 0.13 155) !important;
}

[data-theme="glass"] .text-emerald-300,
[data-theme="glass"] .text-emerald-300\/90 {
  color: oklch(0.4 0.12 155) !important;
}

[data-theme="glass"] .bg-emerald-500\/10,
[data-theme="glass"] .bg-emerald-500\/\[0\.03\] {
  background-color: oklch(0.52 0.14 155 / 0.1) !important;
}

[data-theme="glass"] .border-emerald-500\/20 {
  border-color: oklch(0.52 0.14 155 / 0.22) !important;
}

[data-theme="glass"] .text-teal-300 {
  color: oklch(0.4 0.11 175) !important;
}

[data-theme="glass"] .bg-teal-500\/20 {
  background-color: oklch(0.48 0.12 175 / 0.14) !important;
}

[data-theme="glass"] .border-teal-500\/30 {
  border-color: oklch(0.48 0.12 175 / 0.26) !important;
}

[data-theme="glass"] .text-sky-300,
[data-theme="glass"] .text-sky-300\/90 {
  color: oklch(0.42 0.11 240) !important;
}

[data-theme="glass"] .text-sky-100 {
  color: var(--ls-ink) !important;
}

[data-theme="glass"] .bg-sky-500\/10 {
  background-color: oklch(0.52 0.11 240 / 0.1) !important;
}

[data-theme="glass"] .border-sky-500\/20 {
  border-color: oklch(0.52 0.11 240 / 0.22) !important;
}

[data-theme="glass"] .text-amber-400 {
  color: oklch(0.48 0.12 75) !important;
}

[data-theme="glass"] .haptic-record-duration {
  color: oklch(0.38 0.16 155) !important;
}

[data-theme="glass"] .bg-amber-500\/10 {
  background-color: oklch(0.62 0.13 75 / 0.12) !important;
}

[data-theme="glass"] .border-amber-500\/20 {
  border-color: oklch(0.62 0.13 75 / 0.24) !important;
}

[data-theme="glass"] .text-slate-300.bg-white\/5 {
  color: var(--ls-ink-muted) !important;
  background-color: oklch(0.55 0.02 40 / 0.06) !important;
}

[data-theme="glass"] .notification-group-label.text-sky-300 {
  color: oklch(0.42 0.11 240) !important;
}

[data-theme="glass"] .notification-group-label.text-brand-400 {
  color: var(--ls-brand-600) !important;
}

[data-theme="glass"] .notification-group-label.text-emerald-400 {
  color: oklch(0.42 0.13 155) !important;
}

[data-theme="glass"] .notification-group-label.text-amber-400 {
  color: oklch(0.48 0.12 75) !important;
}

[data-theme="glass"] .notification-group-label.text-violet-400 {
  color: var(--ls-partner-600) !important;
}

[data-theme="glass"] .notification-group-label.text-slate-400 {
  color: var(--ls-ink-muted) !important;
}

/* ——— Chat: coupon dock & draft card ——— */
[data-theme="glass"] #chat-coupon-dock,
[data-theme="signature"] #chat-coupon-dock {
  background: var(--ls-chat-dock-panel-bg) !important;
  border-color: var(--ls-glass-border-strong) !important;
}

[data-theme="glass"] #chat-coupon-dock .hitl-draft-card,
[data-theme="signature"] #chat-coupon-dock .hitl-draft-card {
  background: var(--ls-chat-draft-card-bg) !important;
  border-color: var(--ls-glass-border-strong) !important;
  box-shadow: var(--ls-shadow-sm);
}

[data-theme="glass"] #chat-coupon-dock .hitl-draft-card input,
[data-theme="glass"] #chat-coupon-dock .hitl-draft-card textarea,
[data-theme="signature"] #chat-coupon-dock .hitl-draft-card input,
[data-theme="signature"] #chat-coupon-dock .hitl-draft-card textarea {
  background: var(--ls-surface-sunken) !important;
  border: 1px solid var(--ls-border-strong) !important;
  color: var(--ls-ink) !important;
  box-shadow: inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 6%, transparent);
}

[data-theme="glass"] #chat-coupon-dock .hitl-draft-header,
[data-theme="signature"] #chat-coupon-dock .hitl-draft-header {
  border-color: var(--ls-border-default) !important;
}

[data-theme="glass"] #chat-coupon-dock .hitl-draft-actions,
[data-theme="signature"] #chat-coupon-dock .hitl-draft-actions {
  border-color: var(--ls-border-default) !important;
}

[data-theme="glass"] .chat-msg-delete-btn,
[data-theme="signature"] .chat-msg-delete-btn {
  border-color: var(--ls-border-default);
  color: var(--ls-brand-600);
}

[data-theme="glass"] .chat-msg-delete-btn:hover,
[data-theme="signature"] .chat-msg-delete-btn:hover {
  background: oklch(0.52 0.2 15 / 0.08);
}


/* === src/styles/utilities/responsive.css === */
/**
 * LoveSync — адаптивна система (mobile-first, Material / Flutter breakpoints)
 *
 * xs  <380px   — вузькі телефони
 * sm  640px+   — телефони landscape / phablet
 * md  768px+   — планшети
 * lg  1024px+  — desktop (базовий layout без змін)
 * xl  1280px+  — wide desktop
 */

/* ===== MOBILE SCROLL INSET (fixed bottom nav) =====
   Best practice: padding-bottom тільки на scrollport (overflow-y: auto),
   не на layout-батьку — інакше подвоєний відступ. */
@media (max-width: 767px) {
  .dash-scroll,
  .wishes-scroll-area,
  .mobile-tab-scroll,
  #tab-profile .profile-page__scroll {
    padding-bottom: var(--mobile-scroll-pad-bottom) !important;
    scroll-padding-bottom: var(--mobile-scroll-pad-bottom);
  }
}

/* ===== GLOBAL SHELL ===== */
@media (max-width: 767px) {
  .app-top-header {
    position: sticky;
    top: 0;
    z-index: 45;
    padding-left: max(0.875rem, var(--safe-left));
    padding-right: max(0.875rem, var(--safe-right));
  }

  #mobile-bottom-nav {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  #mobile-partner-strip {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .dash-scroll > #mobile-partner-strip,
  .wishes-scroll-area > #mobile-partner-strip,
  .mobile-tab-scroll > #mobile-partner-strip,
  #chat-messages-container > #mobile-partner-strip {
    margin: -1rem -1rem 0.75rem;
    border-radius: 0;
  }

  @media (min-width: 640px) {
    .dash-scroll > #mobile-partner-strip,
    .wishes-scroll-area > #mobile-partner-strip,
    .mobile-tab-scroll > #mobile-partner-strip,
    #chat-messages-container > #mobile-partner-strip {
      margin-top: -1.5rem;
      margin-left: -1.5rem;
      margin-right: -1.5rem;
    }
  }

  #mobile-bottom-nav > div {
    height: var(--mobile-nav-height);
  }

  .mobile-nav-btn {
    font-size: var(--ls-text-overline);
    font-weight: 500;
    min-width: 2.75rem;
    gap: 0.25rem;
    line-height: 1.2;
  }

  .mobile-nav-btn [data-icon],
  .mobile-nav-btn .nav-icon {
    font-size: var(--ls-icon-nav);
  }

  #user-info-bar #header-user-name {
    max-width: 5.75rem;
  }

  #screen-auth,
  #screen-connect {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
    padding-bottom: max(1rem, var(--safe-bottom));
  }

  #notifications-panel {
    left: max(0.75rem, var(--safe-left));
    right: max(0.75rem, var(--safe-right));
    width: auto;
    max-width: none;
  }
}

@media (max-width: 379px) {
  .mobile-nav-btn {
    min-width: 2.625rem;
    padding: 0.2rem 0.125rem;
  }

  .mobile-nav-btn span:last-child:not([data-icon]) {
    font-size: var(--ls-text-micro);
    letter-spacing: -0.01em;
  }

  #user-info-bar #header-user-name {
    max-width: 4.25rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .tab-section-header h2,
  .profile-page__title {
    font-size: var(--ls-font-xl);
  }
}

/* ===== DASHBOARD (≤1023 — tablet / phone) ===== */
@media (max-width: 767px) {
  #tab-dashboard .dash-scroll {
    padding-left: max(0.75rem, var(--safe-left));
    padding-right: max(0.75rem, var(--safe-right));
  }

  #tab-dashboard .dash-bento-hero {
    padding: 1rem !important;
  }

  #tab-dashboard .dash-kpi-card {
    min-height: 4.75rem;
    padding: 0.75rem !important;
  }

  #tab-dashboard .dash-kpi-card [id^="dash-kpi"] {
    font-size: var(--ls-text-title-sm);
  }

  #tab-dashboard .dash-hero-partner {
    padding: 0.75rem !important;
  }

  #tab-dashboard .dash-ai-insights__body {
    font-size: var(--ls-font-xs);
    padding: 0.625rem 0.75rem 0.625rem 0.875rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #tab-dashboard .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }

  #tab-dashboard .dash-charts-grid {
    gap: 1rem;
  }
}

/* ===== WISHES ===== */
@media (max-width: 767px) {
  .wishes-scroll-area {
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
    padding-top: 1rem !important;
  }

  #tab-wishes .tab-section-header {
    align-items: stretch;
  }

  #tab-wishes .tab-section-header .ls-btn {
    width: 100%;
    justify-content: center;
  }

  .wishes-quick-hints-grid button {
    padding: 0.75rem 0.375rem !important;
  }

  .wishes-quick-hints-grid button > div:first-of-type {
    height: 2.5rem;
    width: 2.5rem;
    margin-bottom: 0.5rem !important;
  }

  .wishes-quick-hints-grid button > div:first-of-type span {
    font-size: var(--ls-text-title);
  }

  #coupon-wallet-list {
    max-height: min(18rem, 42vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wishes-tabs-bar {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }

  .wishes-tab-btn {
    padding: 0.5rem 0.65rem;
    font-size: var(--ls-text-overline);
  }

  .wishes-hub-panels > section + section {
    margin-top: 1rem;
  }

  .wishes-active-item__content h4,
  .wishes-active-item__content p {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .wishes-active-item__actions {
    padding-top: 0.125rem;
    border-top: 1px solid var(--ls-wishes-active-border);
  }

  .wishes-hub-panel .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .wishes-active-item__actions {
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 479px) {
  .wishes-tab-btn {
    padding: 0.45rem 0.5rem;
    font-size: var(--ls-text-caption);
    gap: 0.25rem;
  }

  .wishes-tab-btn__badge {
    min-width: 1rem;
    height: 1rem;
    font-size: var(--ls-text-micro);
    line-height: 1rem;
  }
}

/* Wishes quick hints — progressive grid */
.wishes-quick-hints-grid {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 480px) and (max-width: 639px) {
  .wishes-quick-hints-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .wishes-quick-hints-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 768px) {
  .wishes-quick-hints-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* ===== HAPTIC ===== */
@media (max-width: 767px) {
  #tab-haptic > .mobile-tab-scroll {
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
  }
}

@media (max-width: 639px) {
  #haptic-rating-card > .flex {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  #haptic-rating-card .text-right {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    text-align: left;
  }

  #haptic-rating-score {
    font-size: var(--ls-text-display) !important;
  }

  .haptic-status p.text-xs {
    font-size: var(--ls-text-overline);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ===== MOOD ===== */
@media (max-width: 767px) {
  #tab-mood > .mobile-tab-scroll,
  #tab-mood > .flex-grow {
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
  }

  .mood-hero-card {
    padding: 1rem !important;
  }

  .mood-picker-wrap {
    padding: 0.5rem !important;
  }

  #mood-picker-root.mood-picker-grid {
    gap: 0.35rem 0.25rem;
  }

  #mood-picker-root [data-mood-label] {
    min-height: 2.2em;
    font-size: var(--ls-text-micro) !important;
    line-height: 1.2;
  }

  #mood-insights-row {
    gap: 0.375rem;
  }

  #mood-insights-row .mood-insight-chip {
    padding: 0.625rem 0.25rem;
  }

  #tab-mood #mood-save-open-btn {
    width: 100%;
    justify-content: center;
  }

  .mood-partner-compact__main {
    padding: 0.75rem 0.875rem;
    gap: 0.625rem;
  }

  .mood-partner-compact__empty-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  #mood-chart-wrap {
    min-height: 10rem;
  }

  .mood-timeline-date {
    margin-top: 0.25rem;
  }

  #mood-timeline-list > section:not(:first-child) .mood-timeline-date {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 639px) {
  #tab-mood .mood-hero-card > .flex.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
  }

  #my-mood-readback {
    max-width: 100% !important;
    text-align: left !important;
  }

  #tab-mood .glass.rounded-2xl.p-5 .flex.flex-wrap.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .chart-filter-group {
    width: 100%;
    justify-content: stretch;
  }

  .chart-filter-group .mood-days-btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: var(--ls-text-caption);
  }

  .mood-timeline-toggle {
    width: 100%;
    display: flex;
  }

  .mood-timeline-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: var(--ls-text-micro);
  }

  #mood-chart-wrap {
    height: 14rem !important;
  }
}

@media (max-width: 379px) {
  #mood-insights-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
  }

  #mood-insights-row .mood-insight-chip p:last-child {
    font-size: var(--ls-text-subtitle);
  }
}

/* ===== CHAT ===== */
@media (max-width: 767px) {
  #chat-messages-list {
    padding-left: 0;
    padding-right: 0;
  }

  #chat-messages-container {
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
  }

  #chat-scroll-controls {
    display: none !important;
  }

  .chat-bubble-user,
  .chat-bubble-assistant {
    max-width: 96% !important;
  }

  .hitl-bubble {
    max-width: 100% !important;
  }

  .chat-msg-delete-btn {
    opacity: 0.82;
  }

  .chat-message-row:hover .chat-msg-delete-btn,
  .chat-msg-delete-btn:focus-visible {
    opacity: 1;
  }

  /* Швидкі чіпи (Ідея побачення, Що подарувати…) — лише desktop/tablet landscape */
  #chat-quick-prompts {
    display: none !important;
  }

  /* Чат: власний inset знизу (не дублювати padding dashboard-content-area) */
  .dashboard-content-area:has(> #tab-chat:not(.hidden)) {
    padding-bottom: 0;
  }

  #tab-chat {
    padding-bottom: 0;
  }

  #tab-chat > .p-4.border-t,
  #tab-chat .chat-composer {
    margin-left: max(0.75rem, var(--safe-left));
    margin-right: max(0.75rem, var(--safe-right));
    /* nav footprint + невеликий зазор від краю viewport */
    margin-bottom: calc(var(--mobile-nav-footprint) + 0.25rem);
    --chat-input-font: var(--ls-chat-input-font-md);
    --chat-input-py: 0.35rem;
    --chat-input-px: 0.6rem;
    --chat-input-min-h: var(--ls-chat-input-min-h-sm);
    --chat-send-size: var(--ls-chat-send-size-sm);
    --chat-send-icon: var(--ls-chat-send-icon-sm);
    padding: 0.35rem 0.45rem !important;
    border-top: none;
    border-radius: var(--ls-radius-xl);
    border: 1px solid var(--ls-glass-border);
    background: var(--ls-material-nav, var(--ls-glass-bg)) !important;
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    box-shadow: var(--ls-shadow-md), var(--ls-glass-specular);
  }

  #tab-chat .chat-composer form {
    gap: 0.35rem;
    align-items: center;
  }

  #tab-chat #chat-message-input {
    border-radius: var(--ls-radius-lg);
  }

  #tab-chat #chat-send-btn {
    border-radius: var(--ls-radius-full);
  }

  #chat-welcome-scenarios {
    margin-bottom: 0.75rem !important;
  }

  #chat-welcome-scenarios .text-center {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  #chat-welcome-scenarios .text-center p:first-child {
    font-size: var(--ls-font-sm);
  }

  #chat-welcome-scenarios .text-center p:last-child {
    font-size: var(--ls-text-overline);
    line-height: 1.4;
  }

  .chat-scenario-grid {
    gap: 0.5rem !important;
  }

  .chat-scenario-card {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.625rem;
    min-height: 0;
    border-radius: var(--ls-radius-lg);
  }

  .chat-scenario-card__emoji {
    font-size: var(--ls-text-title-sm);
    flex-shrink: 0;
    line-height: 1;
  }

  .chat-scenario-card__title {
    font-size: var(--ls-text-overline);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
  }

  .chat-scenario-card__hint {
    display: none;
  }

  #chat-coupon-dock,
  #chat-typing-indicator {
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
  }
}

@media (max-width: 639px) {
  #chat-partner-context > div {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #chat-partner-context .wish-status-chip {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .chat-date-plan-actions {
    flex-direction: column;
  }

  .chat-date-plan-btn {
    width: 100%;
    text-align: center;
    min-height: 2.5rem;
  }

  #chat-coupon-dock > .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #chat-coupon-dock .chat-coupon-dock-cycle {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .chat-bubble-user,
  .chat-bubble-assistant {
    max-width: 88%;
  }
}

/* ===== PROFILE ===== */
@media (max-width: 767px) {
  #tab-profile > .flex-grow,
  #tab-profile > .profile-page__scroll {
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
  }

  label.profile-avatar-edit {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}

@media (max-width: 639px) {
  .profile-hero {
    padding: 1.25rem 1rem 1rem;
  }

  .profile-avatar-wrap {
    width: 6.25rem;
    height: 6.25rem;
  }

  .profile-avatar__placeholder {
    font-size: var(--ls-avatar-emoji-md);
  }

  .profile-form-card,
  .profile-partner-card {
    padding: 1rem;
  }

  .profile-field__input,
  .profile-form .ls-select__trigger {
    min-height: 2.75rem;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .profile-page__content {
    max-width: 36rem;
  }
}

/* ===== MODALS (bottom sheet on phone) ===== */
@media (max-width: 639px) {
  .modal-enter.rounded-t-2xl {
    max-height: min(92dvh, calc(100dvh - var(--safe-top) - 1rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #modal-mood-edit .modal-enter {
    padding-bottom: max(1.25rem, var(--safe-bottom));
  }
}

/* ===== TAB HEADERS (shared) ===== */
@media (max-width: 767px) {
  /* Назви вкладок — приховані на мобільному; профіль (#tab-profile) без змін */
  #tab-dashboard .tab-section-header,
  #tab-mood > .mobile-tab-scroll > .tab-section-header,
  #tab-haptic > .mobile-tab-scroll > .tab-section-header {
    display: none;
  }

  /* Натяки: лишаємо кнопку «Створити кастомний натяк» */
  #tab-wishes .tab-section-header > div:first-child {
    display: none;
  }

  #tab-wishes .tab-section-header {
    margin: 0 0 0.75rem;
    padding: 0;
    border-bottom: none;
    background: transparent;
  }

  /* Чат: ховаємо назву вкладки, лишаємо аватар, статус і дії */
  #tab-chat .tab-section-header h2,
  #tab-chat .tab-section-header #chat-model-name {
    display: none;
  }

  #tab-chat .tab-section-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .tab-section-header,
  .tab-section-header--chat,
  .tab-section-subheader {
    padding-left: max(var(--tab-scroll-pad-x, 0.75rem), var(--safe-left)) !important;
    padding-right: max(var(--tab-scroll-pad-x, 0.75rem), var(--safe-right)) !important;
  }
}

@media (min-width: 640px) {
  :root {
    --tab-scroll-pad-x: 1.5rem;
    --tab-scroll-pad-top: 1.5rem;
  }
}


/* === src/styles/base/reset.css === */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    margin: 0;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: var(--ls-font-base);
    line-height: var(--ls-leading-normal);
    color: var(--ls-ink);
    background: var(--ls-bg-gradient);
    background-color: var(--ls-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--safe-top);
  }

  ::selection {
    background-color: var(--ls-brand-500);
    color: var(--ls-ink-inverse);
  }

  :focus-visible {
    outline: 2px solid var(--ls-brand-500);
    outline-offset: 2px;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  /* Дизайн-система: .ls-btn / .ls-chip задають фон і рамку самі */
  button:not(.ls-btn):not(.ls-chip):not(.snooze-option):not(.wish-status-chip):not(.wishes-tab-btn):not(.mood-days-btn):not(.mood-timeline-toggle-btn):not(.chart-filter-group button):not(.theme-switcher__btn):not(.ls-select__trigger):not(.ls-select__option) {
    border: none;
    background: none;
  }
}


/* === src/styles/base/typography.css === */
@layer base {
  .font-heading {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Montserrat, "Plus Jakarta Sans", sans-serif;
  }

  .font-display {
    font-family: Fraunces, Georgia, serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat, "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    line-height: var(--ls-leading-tight);
    color: var(--ls-ink);
  }
}

@layer components {
  .ls-text-gradient {
    background: linear-gradient(
      135deg,
      var(--ls-brand-400) 0%,
      var(--ls-brand-300) 40%,
      var(--ls-partner-400) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .ls-label {
    font-size: var(--ls-text-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ls-ink-subtle);
  }

  .ls-text-micro { font-size: var(--ls-text-micro); }
  .ls-text-caption { font-size: var(--ls-text-caption); }
  .ls-text-overline {
    font-size: var(--ls-text-overline);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ls-text-secondary { font-size: var(--ls-text-secondary); }
  .ls-text-body { font-size: var(--ls-text-body); }
  .ls-text-subtitle { font-size: var(--ls-text-subtitle); }
  .ls-text-title-sm { font-size: var(--ls-text-title-sm); }
  .ls-text-title { font-size: var(--ls-text-title); }

  /* SVG-іконки — розмір через CSS, не Tailwind JIT (важливо для Railway Docker build) */
  [data-icon] svg,
  svg.ls-icon-svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
  }
}


/* === src/styles/components/glass.css === */
@layer components {
  .glass,
  .glass-pink,
  .glass-elevated,
  .glass-vibrant,
  .glass-nav,
  .glass-sheet {
    backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
    transition:
      background-color var(--ls-duration-normal) var(--ls-ease-smooth),
      border-color var(--ls-duration-normal) var(--ls-ease-smooth),
      box-shadow var(--ls-duration-normal) var(--ls-ease-smooth);
  }

  .glass {
    background: var(--ls-glass-bg);
    border: 1px solid var(--ls-glass-border);
    box-shadow: var(--ls-glass-specular);
  }

  .glass-pink {
    background: var(--ls-glass-pink-bg);
    border: 1px solid var(--ls-glass-border-strong);
    box-shadow: var(--ls-glass-specular);
  }

  .glass-elevated {
    background: var(--ls-material-thick);
    border: 1px solid var(--ls-glass-border);
    box-shadow: var(--ls-shadow-md);
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
  }

  .glass-vibrant {
    background: var(--ls-accent-soft);
    border: 1px solid var(--ls-accent-soft-border);
    box-shadow: var(--ls-accent-soft-shadow), var(--ls-glass-specular);
  }

  .glass-nav {
    background: var(--ls-material-nav);
    border: 1px solid var(--ls-glass-border);
    box-shadow: var(--ls-shadow-lg), var(--ls-glass-specular);
    border-radius: var(--ls-radius-2xl);
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
  }

  .glass-sheet {
    background: var(--ls-material-thick);
    border: 1px solid var(--ls-glass-border);
    box-shadow: var(--ls-shadow-lg);
    border-radius: var(--ls-radius-2xl) var(--ls-radius-2xl) 0 0;
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .glass-pink,
    .glass-elevated,
    .glass-vibrant,
    .glass-nav,
    .glass-sheet {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--ls-surface-raised);
    }
  }

  @media (max-width: 768px) {
    [data-theme='glass'] .glass,
    [data-theme='glass'] .glass-pink,
    [data-theme='glass'] .glass-elevated {
      --ls-glass-blur: 20px;
    }
  }
}


/* === src/styles/components/buttons.css === */
@layer components {
  /* ===== Chip base (badges + buttons) ===== */
  .ls-chip,
  .ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ls-btn-gap-sm);
    padding: var(--ls-btn-py-sm) var(--ls-btn-px-sm);
    min-height: var(--ls-btn-min-h-sm);
    border-radius: var(--ls-radius-full);
    font-size: var(--ls-btn-font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
    border: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .ls-btn {
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition:
      filter var(--ls-duration-fast) ease,
      transform var(--ls-duration-fast) var(--ls-ease-spring),
      background-color var(--ls-duration-normal) ease,
      border-color var(--ls-duration-normal) ease,
      color var(--ls-duration-normal) ease;
  }

  .ls-btn:hover:not(:disabled) {
    filter: brightness(1.06);
  }

  .ls-btn:active:not(:disabled) {
    transform: scale(0.97);
  }

  .ls-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
  }

  /* Sizes */
  .ls-chip--xs,
  .ls-btn--xs {
    font-size: var(--ls-btn-font-xs);
    padding: var(--ls-btn-py-xs) var(--ls-btn-px-xs);
    min-height: var(--ls-btn-min-h-xs);
    gap: var(--ls-btn-gap-xs);
  }

  .ls-chip--sm,
  .ls-btn--sm {
    font-size: var(--ls-btn-font-sm);
    padding: var(--ls-btn-py-sm) var(--ls-btn-px-sm);
    min-height: var(--ls-btn-min-h-sm);
  }

  .ls-btn--md {
    font-size: var(--ls-btn-font-md);
    padding: var(--ls-btn-py-md) var(--ls-btn-px-md);
    min-height: var(--ls-btn-min-h-md);
  }

  .ls-btn--lg {
    font-size: var(--ls-btn-font-lg);
    padding: var(--ls-btn-py-lg) var(--ls-btn-px-lg);
    min-height: var(--ls-btn-min-h-lg);
    font-weight: 700;
  }

  .ls-btn--block {
    width: 100%;
  }

  .ls-btn--icon {
    padding: 0;
    min-width: var(--ls-btn-min-h-icon);
    min-height: var(--ls-btn-min-h-icon);
  }

  .ls-btn--icon-sm {
    padding: 0;
    min-width: var(--ls-btn-min-h-icon-sm);
    min-height: var(--ls-btn-min-h-icon-sm);
    font-size: var(--ls-btn-font-md);
  }

  .ls-btn--icon-lg {
    min-width: var(--ls-btn-min-h-icon-lg);
    min-height: var(--ls-btn-min-h-icon-lg);
  }

  /* Ghost variant — використовується для вторинної дії на фоні,
     де примарну кнопку треба явно підсилити (HITL, modals, dock). */
  .ls-btn--ghost {
    color: var(--ls-ink-muted);
    background: transparent;
    border-color: var(--ls-glass-border-strong);
  }

  .ls-btn--ghost:hover:not(:disabled) {
    color: var(--ls-ink);
    background: var(--ls-glass-bg);
    border-color: var(--ls-glass-border-strong);
    filter: none;
  }

  .ls-btn--ghost-rose {
    color: var(--ls-btn-rose-text);
    background: transparent;
    border-color: var(--ls-btn-rose-border);
  }

  .ls-btn--ghost-rose:hover:not(:disabled) {
    background: var(--ls-btn-rose-bg);
    filter: none;
  }

  .ls-btn--primary {
    color: var(--ls-ink-inverse);
    background: linear-gradient(135deg, var(--ls-brand-500), var(--ls-brand-600));
    border: 1px solid color-mix(in oklch, var(--ls-brand-600) 45%, transparent);
    box-shadow: var(--ls-shadow-brand);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .ls-btn--primary [data-icon] {
    color: inherit;
  }

  .ls-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-700));
    box-shadow: var(--ls-shadow-glow);
    filter: none;
  }

  .ls-btn--primary:active:not(:disabled) {
    transform: scale(0.98);
  }

  /* Color tones */
  .ls-chip--brand,
  .ls-btn--brand {
    color: var(--ls-btn-brand-text);
    background: var(--ls-btn-brand-bg);
    border-color: var(--ls-btn-brand-border);
  }

  .ls-chip--emerald,
  .ls-btn--emerald {
    color: var(--ls-btn-emerald-text);
    background: var(--ls-btn-emerald-bg);
    border-color: var(--ls-btn-emerald-border);
  }

  .ls-chip--rose,
  .ls-btn--rose {
    color: var(--ls-btn-rose-text);
    background: var(--ls-btn-rose-bg);
    border-color: var(--ls-btn-rose-border);
  }

  .ls-chip--amber,
  .ls-btn--amber {
    color: var(--ls-btn-amber-text);
    background: var(--ls-btn-amber-bg);
    border-color: var(--ls-btn-amber-border);
  }

  .ls-chip--sky,
  .ls-btn--sky {
    color: var(--ls-btn-sky-text);
    background: var(--ls-btn-sky-bg);
    border-color: var(--ls-btn-sky-border);
  }

  .ls-chip--slate,
  .ls-btn--slate {
    color: var(--ls-btn-slate-text);
    background: var(--ls-btn-slate-bg);
    border-color: var(--ls-btn-slate-border);
  }

  .ls-chip--teal,
  .ls-btn--teal {
    color: var(--ls-btn-teal-text);
    background: var(--ls-btn-teal-bg);
    border-color: var(--ls-btn-teal-border);
  }

  .ls-btn--accent {
    color: var(--ls-btn-accent-text);
    background: var(--ls-btn-accent-bg);
    border: var(--ls-btn-accent-border-width, 1.5px) solid var(--ls-btn-accent-border);
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-btn-accent-shadow, var(--ls-accent-soft-shadow, var(--ls-shadow-sm)));
    font-family: Montserrat, "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 700;
    line-height: 1.35;
  }

  .ls-btn--accent.ls-btn--sm {
    padding: var(--ls-btn-accent-sm-py, 0.5rem) var(--ls-btn-accent-sm-px, 0.9375rem);
    min-height: var(--ls-btn-accent-min-h, 2.375rem);
    gap: 0.375rem;
    font-size: var(--ls-font-sm);
  }

  .ls-btn--accent.ls-btn--xs {
    padding: 0.4rem 0.7rem;
    min-height: var(--ls-btn-min-h-xs);
    gap: var(--ls-btn-gap-xs);
    font-size: var(--ls-btn-font-xs);
    letter-spacing: 0.02em;
  }

  .ls-btn--accent:not(.ls-btn--xs):not(.ls-btn--sm) {
    padding: var(--ls-btn-accent-py, 0.5rem) var(--ls-btn-accent-px, 1rem);
    min-height: var(--ls-btn-accent-min-h, 2.375rem);
  }

  .ls-btn--accent .ls-btn__label {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  .ls-btn--accent [data-icon] {
    color: var(--ls-brand-400);
    flex-shrink: 0;
    font-size: var(--ls-icon-xs);
  }

  .ls-btn--accent:hover:not(:disabled) {
    background: var(--ls-btn-accent-bg-hover);
    border-color: var(--ls-btn-accent-border-hover);
    filter: none;
  }

  .ls-btn--coupon {
    color: var(--ls-coupon-badge-fg, oklch(0.44 0.12 70));
    background: var(--ls-coupon-badge-bg, oklch(0.72 0.11 85 / 0.18));
    border-color: var(--ls-coupon-badge-border, oklch(0.55 0.12 80 / 0.35));
    font-weight: 700;
  }

  /* Legacy compat */
  .btn-smooth {
    transition: all var(--ls-duration-slow) var(--ls-ease-smooth);
  }

  .btn-smooth:active:not(:disabled) {
    transform: scale(0.97);
  }

  /* Aliases — wishes / status chips */
  .wish-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ls-btn-gap-xs);
    padding: var(--ls-btn-py-xs) var(--ls-btn-px-xs);
    min-height: var(--ls-btn-min-h-xs);
    border-radius: var(--ls-radius-full);
    font-size: var(--ls-btn-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.25;
  }

  .wish-status-chip--pending-confirmation {
    color: var(--ls-btn-sky-text);
    background: var(--ls-btn-sky-bg);
    border-color: var(--ls-btn-sky-border);
  }

  .wish-status-chip--brand {
    color: var(--ls-btn-brand-text);
    background: var(--ls-btn-brand-bg);
    border-color: var(--ls-btn-brand-border);
  }

  .wish-status-chip--coupon {
    color: var(--ls-coupon-badge-fg, var(--ls-btn-coupon-text, oklch(0.44 0.12 70)));
    background: var(--ls-coupon-badge-bg, oklch(0.72 0.11 85 / 0.18));
    border-color: var(--ls-coupon-badge-border, oklch(0.55 0.12 80 / 0.35));
  }

  .wish-status-chip--emerald {
    color: var(--ls-btn-emerald-text);
    background: var(--ls-btn-emerald-bg);
    border-color: var(--ls-btn-emerald-border);
  }

  .wish-status-chip--rose {
    color: var(--ls-btn-rose-text);
    background: var(--ls-btn-rose-bg);
    border-color: var(--ls-btn-rose-border);
  }

  .wish-status-chip--amber {
    color: var(--ls-btn-amber-text);
    background: var(--ls-btn-amber-bg);
    border-color: var(--ls-btn-amber-border);
  }

  .wish-status-chip--sky {
    color: var(--ls-btn-sky-text);
    background: var(--ls-btn-sky-bg);
    border-color: var(--ls-btn-sky-border);
  }

  .wish-status-chip--teal {
    color: var(--ls-btn-teal-text);
    background: var(--ls-btn-teal-bg);
    border-color: var(--ls-btn-teal-border);
  }

  .wish-status-chip--partner {
    color: var(--ls-partner-500);
    background: oklch(0.58 0.18 295 / 0.12);
    border-color: oklch(0.58 0.18 295 / 0.25);
  }

  button.wish-status-chip {
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition:
      filter var(--ls-duration-fast) ease,
      transform var(--ls-duration-fast) var(--ls-ease-spring),
      background-color var(--ls-duration-normal) ease,
      border-color var(--ls-duration-normal) ease;
  }

  button.wish-status-chip:hover:not(:disabled) {
    filter: brightness(1.06);
  }

  button.wish-status-chip:active:not(:disabled) {
    transform: scale(0.97);
  }

  button.wish-status-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
  }

  button.wish-status-chip [data-icon] {
    color: currentColor;
    flex-shrink: 0;
    font-size: var(--ls-icon-2xs);
  }

  .wish-btn-confirm {
    color: var(--ls-btn-emerald-text);
    background: var(--ls-btn-emerald-bg);
    border-color: var(--ls-btn-emerald-border);
    cursor: pointer;
    transition:
      filter var(--ls-duration-fast) ease,
      transform var(--ls-duration-fast) var(--ls-ease-spring);
  }

  .wish-btn-snooze {
    color: var(--ls-btn-amber-text);
    background: var(--ls-btn-amber-bg);
    border-color: var(--ls-btn-amber-border);
    cursor: pointer;
    transition:
      filter var(--ls-duration-fast) ease,
      transform var(--ls-duration-fast) var(--ls-ease-spring);
  }

  .wish-btn-confirm:hover,
  .wish-btn-snooze:hover {
    filter: brightness(1.06);
  }

  .wish-btn-confirm:active,
  .wish-btn-snooze:active {
    transform: scale(0.97);
  }

  .snooze-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--ls-radius-xl);
    font-size: var(--ls-btn-font-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: var(--ls-btn-py-md) var(--ls-btn-px-sm);
    min-height: var(--ls-btn-min-h-md);
    border: 1px solid var(--ls-wish-snooze-btn-border);
    color: var(--ls-wish-snooze-btn-text);
    background: var(--ls-wish-snooze-btn-bg);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
    transition:
      filter var(--ls-duration-fast) ease,
      transform var(--ls-duration-fast) var(--ls-ease-spring),
      background-color var(--ls-duration-normal) ease,
      border-color var(--ls-duration-normal) ease,
      color var(--ls-duration-normal) ease,
      box-shadow var(--ls-duration-normal) ease;
  }

  .snooze-option:hover {
    filter: brightness(1.05);
  }

  .snooze-option:active {
    transform: scale(0.98);
  }

  .snooze-option.is-selected,
  .snooze-option.bg-brand-500\/20 {
    color: var(--ls-wish-snooze-text);
    background: var(--ls-wish-snooze-bg);
    border-color: var(--ls-wish-snooze-border);
    box-shadow: var(--ls-shadow-sm);
  }

  .snooze-option.ls-snooze-option--wide {
    grid-column: 1 / -1;
  }

  /* ===== HITL action-row (підтвердження купона) =====
     Спільне для:
       — incoming list (`#incoming-wishes-list`)
       — closed-dock варіант (`#chat-coupon-dock` поза fullscreen)
       — fullscreen draft mode (`#tab-chat.chat-draft-mode #chat-coupon-dock`)
     Primary action (Підтвердити) — solid brand. Secondary (Видалити) — ghost-rose. */
  .hitl-draft-actions {
    align-items: center;
  }

  .hitl-draft-actions .ls-btn {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    min-height: var(--ls-btn-min-h-md);
    padding: var(--ls-btn-py-md) var(--ls-btn-px-sm);
    font-size: var(--ls-btn-font-md);
    border-radius: var(--ls-radius-lg);
  }

  .hitl-draft-actions .ls-btn--primary,
  .hitl-draft-actions .ls-btn--confirm {
    color: var(--ls-ink-inverse);
    background: linear-gradient(135deg, var(--ls-brand-500), var(--ls-brand-600));
    border-color: var(--ls-brand-500);
    box-shadow: var(--ls-shadow-brand);
    font-weight: 700;
    flex: 1 1 auto;
    justify-content: center;
  }

  .hitl-draft-actions .ls-btn--primary [data-icon],
  .hitl-draft-actions .ls-btn--confirm [data-icon] {
    color: inherit;
  }

  .hitl-draft-actions .ls-btn--primary:hover:not(:disabled),
  .hitl-draft-actions .ls-btn--confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-700));
    box-shadow: var(--ls-shadow-glow);
    filter: none;
  }

  .hitl-draft-actions .ls-btn--primary:active:not(:disabled),
  .hitl-draft-actions .ls-btn--confirm:active:not(:disabled) {
    transform: scale(0.98);
  }

  .hitl-draft-actions .ls-btn--cancel {
    flex: 0 0 auto;
    min-width: var(--ls-btn-min-h-md);
  }

  .hitl-draft-actions .ls-btn--icon-sm,
  #chat-coupon-dock .hitl-draft-actions .ls-btn--icon-sm {
    padding: 0;
    width: var(--ls-btn-min-h-icon-sm);
    height: var(--ls-btn-min-h-icon-sm);
    min-width: var(--ls-btn-min-h-icon-sm);
    flex: 0 0 auto;
  }

  .hitl-draft-actions .ls-btn--icon-sm [data-icon],
  #chat-coupon-dock .hitl-draft-actions .ls-btn--icon-sm [data-icon] {
    font-size: var(--ls-icon-sm);
  }

  /* Тісний dock (closed-mode) — трохи компактніше, але не менше 36px */
  #chat-coupon-dock:not(.chat-draft-mode) .hitl-draft-actions .ls-btn {
    min-height: var(--ls-btn-min-h-md);
    padding: var(--ls-btn-py-sm) var(--ls-btn-px-sm);
    font-size: var(--ls-btn-font-sm);
  }

  /* Утиліта: чат-кнопки заголовка (icon-only) у consistent rounded square */
  .ls-btn--icon-sm[data-tone='rose'] {
    color: var(--ls-btn-rose-text);
  }
}


/* === src/styles/components/cards.css === */
@layer components {
  .ls-card {
    background: var(--ls-glass-bg);
    border: 1px solid var(--ls-glass-border);
    border-radius: var(--ls-radius-2xl);
    box-shadow: var(--ls-shadow-sm);
    backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
    transition:
      transform var(--ls-duration-slow) var(--ls-ease-smooth),
      border-color var(--ls-duration-normal) var(--ls-ease-smooth),
      box-shadow var(--ls-duration-normal) var(--ls-ease-smooth);
  }

  .ls-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--ls-shadow-md);
    border-color: var(--ls-glass-border-strong);
  }

  .ls-card--bento {
    overflow: hidden;
    position: relative;
  }

  .ls-card--bento::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--ls-brand-500) 10%, transparent) 0%,
      color-mix(in oklch, var(--ls-partner-500) 6%, transparent) 100%
    );
    pointer-events: none;
  }

  .card-hover {
    transition:
      transform var(--ls-duration-slow) var(--ls-ease-smooth),
      border-color var(--ls-duration-slow) var(--ls-ease-smooth),
      background-color var(--ls-duration-slow) var(--ls-ease-smooth),
      box-shadow var(--ls-duration-slow) var(--ls-ease-smooth);
  }

  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--ls-shadow-md);
  }
}


/* === src/styles/components/inputs.css === */
@layer components {
  .ls-input {
    width: 100%;
    min-height: 3rem;
    background: var(--ls-surface-sunken);
    border: 1.5px solid var(--ls-border-strong);
    border-radius: var(--ls-radius-xl);
    padding: 0.875rem 1.125rem;
    font-size: var(--ls-font-sm);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ls-ink);
    box-shadow: inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 4%, transparent);
    transition:
      border-color var(--ls-duration-normal) var(--ls-ease-smooth),
      box-shadow var(--ls-duration-normal) var(--ls-ease-smooth),
      background-color var(--ls-duration-normal) var(--ls-ease-smooth);
  }

  .ls-input::placeholder {
    color: var(--ls-ink-subtle);
    font-weight: 400;
    opacity: 1;
  }

  .ls-input:hover:not(:disabled):not(:focus) {
    border-color: var(--ls-glass-border-strong);
  }

  .ls-input:focus {
    outline: none;
    border-color: var(--ls-brand-500);
    box-shadow: 0 0 0 3px oklch(from var(--ls-brand-500) l c h / 0.2);
  }

  .ls-input--with-icon {
    padding-left: 2.5rem;
  }

  .ls-textarea {
    min-height: 5rem;
    resize: vertical;
  }

  .ls-input--readonly,
  .ls-input:read-only {
    background: var(--ls-input-readonly-bg, var(--ls-surface-sunken));
    color: var(--ls-ink-muted);
    border-color: var(--ls-border-default);
    cursor: not-allowed;
  }

  .ls-input--readonly:focus,
  .ls-input:read-only:focus {
    box-shadow: none;
    border-color: var(--ls-border-default);
  }

  select.ls-input {
    appearance: none;
    cursor: pointer;
  }

  select.ls-input option {
    color: var(--ls-ink);
    background: var(--ls-surface-raised);
  }
}


/* === src/styles/components/ls-select.css === */
/* Unlayered — щоб padding/стилі не губились через cascade layers */
.ls-select {
  position: relative;
  width: 100%;
}

.ls-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  text-align: left;
  cursor: pointer;
  background: var(--ls-surface-sunken);
  border: 1.5px solid var(--ls-border-strong);
  border-radius: var(--ls-radius-xl);
  box-shadow: inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 4%, transparent);
  color: var(--ls-ink);
  font-size: var(--ls-font-sm);
  font-weight: 500;
  line-height: 1.45;
  transition:
    border-color var(--ls-duration-normal) var(--ls-ease-smooth),
    box-shadow var(--ls-duration-normal) var(--ls-ease-smooth),
    background-color var(--ls-duration-normal) var(--ls-ease-smooth);
}

.ls-select__trigger:hover:not(:disabled) {
  border-color: color-mix(in oklch, var(--ls-brand-500) 40%, var(--ls-border-strong));
  background: color-mix(in oklch, var(--ls-brand-50) 35%, var(--ls-surface-sunken));
}

.ls-select__trigger:focus {
  outline: none;
}

.ls-select__trigger:focus-visible,
.ls-select.is-open .ls-select__trigger {
  border-color: var(--ls-brand-500);
  box-shadow:
    inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 4%, transparent),
    0 0 0 3px color-mix(in oklch, var(--ls-brand-500) 22%, transparent);
}

.ls-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ls-ink);
  padding-right: 0.25rem;
}

.ls-select__value.is-placeholder {
  color: var(--ls-ink-subtle);
  font-weight: 400;
}

.ls-select__chevron-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ls-radius-full);
  background: color-mix(in oklch, var(--ls-brand-500) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 18%, transparent);
  transition:
    background-color var(--ls-duration-fast) ease,
    transform var(--ls-duration-fast) var(--ls-ease-smooth);
}

.ls-select__chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ls-brand-600);
  transition: transform var(--ls-duration-fast) var(--ls-ease-smooth);
}

.ls-select.is-open .ls-select__chevron-wrap {
  background: color-mix(in oklch, var(--ls-brand-500) 20%, transparent);
}

.ls-select.is-open .ls-select__chevron {
  transform: rotate(180deg);
}

.ls-select__menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  border-radius: var(--ls-radius-xl);
  border: 1px solid var(--ls-glass-border-strong);
  background: color-mix(in oklch, var(--ls-material-thick) 92%, white);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    var(--ls-shadow-lg),
    inset 0 1px 0 color-mix(in oklch, white 65%, transparent);
  max-height: min(14rem, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: ls-select-menu-in 0.18s var(--ls-ease-spring-soft) forwards;
}

.ls-select__menu[hidden] {
  display: none !important;
}

.ls-select__menu-header {
  padding: 0.25rem 0.5rem 0.125rem;
  font-size: var(--ls-text-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ls-ink-subtle);
}

.ls-select__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.125rem;
  padding: 0.4375rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--ls-radius-lg);
  background: transparent;
  color: var(--ls-ink);
  font-size: var(--ls-font-sm);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--ls-duration-fast) ease,
    border-color var(--ls-duration-fast) ease,
    color var(--ls-duration-fast) ease;
}

.ls-select__option:hover,
.ls-select__option:focus {
  outline: none;
  background: color-mix(in oklch, var(--ls-brand-500) 9%, transparent);
  border-color: color-mix(in oklch, var(--ls-brand-500) 14%, transparent);
}

.ls-select__option:focus-visible {
  outline: 2px solid var(--ls-brand-500);
  outline-offset: 1px;
}

.ls-select__option.is-selected {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--ls-brand-500) 16%, transparent),
    color-mix(in oklch, var(--ls-partner-400) 10%, transparent)
  );
  border-color: color-mix(in oklch, var(--ls-brand-500) 28%, transparent);
  color: var(--ls-brand-700);
  font-weight: 600;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 40%, transparent);
}

.ls-select__option-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--ls-radius-md);
  font-size: var(--ls-text-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.ls-select__option-badge--neutral {
  color: var(--ls-ink-muted);
  background: color-mix(in oklch, var(--ls-ink) 6%, transparent);
  border-color: var(--ls-border-default);
}

.ls-select__option-badge--female {
  color: var(--ls-brand-700);
  background: color-mix(in oklch, var(--ls-brand-500) 14%, transparent);
  border-color: color-mix(in oklch, var(--ls-brand-500) 22%, transparent);
}

.ls-select__option-badge--male {
  color: var(--ls-partner-700);
  background: color-mix(in oklch, var(--ls-partner-500) 14%, transparent);
  border-color: color-mix(in oklch, var(--ls-partner-500) 22%, transparent);
}

.ls-select__option-badge--other {
  color: oklch(0.48 0.12 280);
  background: color-mix(in oklch, var(--ls-partner-400) 12%, transparent);
  border-color: color-mix(in oklch, var(--ls-partner-400) 20%, transparent);
}

.ls-select__option-label {
  flex: 1;
  min-width: 0;
  padding-right: 0.25rem;
}

.ls-select__option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: var(--ls-radius-full);
  opacity: 0;
  transform: scale(0.8);
  color: var(--ls-ink-inverse);
  background: linear-gradient(135deg, var(--ls-brand-500), var(--ls-brand-600));
  box-shadow: 0 1px 4px color-mix(in oklch, var(--ls-brand-500) 30%, transparent);
  transition:
    opacity var(--ls-duration-fast) ease,
    transform var(--ls-duration-fast) var(--ls-ease-spring);
}

.ls-select__option-check [data-icon] {
  width: 0.625rem;
  height: 0.625rem;
}

.ls-select__option.is-selected .ls-select__option-check {
  opacity: 1;
  transform: scale(1);
}

.ls-select__option-hint {
  font-size: var(--ls-font-xs);
  color: var(--ls-ink-subtle);
  font-weight: 400;
}

@keyframes ls-select-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Компактний варіант (профіль, вузькі форми) */
.ls-select--compact .ls-select__menu {
  padding: 0.25rem;
  max-height: min(10.5rem, 36vh);
}

.ls-select--compact .ls-select__menu-header {
  padding: 0.1875rem 0.4375rem 0.0625rem;
  font-size: var(--ls-text-micro);
}

.ls-select--compact .ls-select__option {
  min-height: 1.875rem;
  padding: 0.3125rem 0.4375rem;
  gap: 0.4375rem;
  font-size: var(--ls-font-xs);
  border-radius: var(--ls-radius-md);
}

.ls-select--compact .ls-select__option-badge {
  width: 1.375rem;
  height: 1.375rem;
  font-size: var(--ls-text-micro);
}

.ls-select--compact .ls-select__option-check {
  width: 0.875rem;
  height: 0.875rem;
}

.ls-select--compact .ls-select__option-check [data-icon] {
  width: 0.5rem;
  height: 0.5rem;
}

/* Відкривається вгору — не перекриває поля нижче */
.ls-select--dropup .ls-select__menu {
  top: auto;
  bottom: calc(100% + 0.375rem);
  animation: ls-select-menu-in-up 0.18s var(--ls-ease-spring-soft) forwards;
}

@keyframes ls-select-menu-in-up {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-select__menu {
    animation: none;
  }

  .ls-select__chevron,
  .ls-select__option-check {
    transition: none;
  }
}


/* === src/styles/components/modals.css === */
@layer components {
  .ls-modal-backdrop {
    background: var(--ls-surface-overlay);
    backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
  }

  .ls-modal {
    background: var(--ls-material-thick);
    border: 1px solid var(--ls-glass-border);
    border-radius: var(--ls-radius-2xl);
    box-shadow: var(--ls-shadow-lg), var(--ls-glass-specular);
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
  }

  .modal-enter {
    animation: ls-scale-in 0.35s var(--ls-ease-spring) forwards;
  }

  .modal-backdrop-enter {
    animation: ls-fade-in 0.3s ease-out forwards;
  }

  .screen-enter {
    animation: ls-fade-in-up 0.45s ease-out forwards;
  }

  .tab-enter {
    animation: ls-fade-in 0.35s ease-out forwards;
  }

  /* ===== Snooze picker (відкладення натяку) ===== */
  .ls-snooze-backdrop {
    background: var(--ls-surface-overlay);
    backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
  }

  .ls-snooze-modal {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: min(92vh, 32rem);
    background: var(--ls-material-thick);
    border: 1px solid var(--ls-glass-border-strong);
    box-shadow: var(--ls-shadow-lg), var(--ls-glass-specular);
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
  }

  .ls-snooze-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .ls-snooze-modal__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--ls-font-heading);
    font-size: var(--ls-text-title-sm);
    font-weight: 700;
    color: var(--ls-ink);
    line-height: 1.25;
  }

  .ls-snooze-modal__title [data-icon] {
    color: var(--ls-btn-amber-text);
    flex-shrink: 0;
  }

  .ls-snooze-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border: none;
    border-radius: var(--ls-radius-full);
    background: transparent;
    color: var(--ls-ink-muted);
    cursor: pointer;
    transition:
      color var(--ls-duration-fast) ease,
      background-color var(--ls-duration-fast) ease;
  }

  .ls-snooze-modal__close:hover {
    color: var(--ls-ink);
    background: var(--ls-glass-bg);
  }

  .ls-snooze-modal__lead {
    margin: 0;
    font-size: var(--ls-text-body-sm);
    line-height: 1.5;
    color: var(--ls-ink-muted);
  }

  .ls-snooze-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ls-snooze-modal__hint {
    margin: 0;
    padding: 0.625rem 0.875rem;
    font-size: var(--ls-text-caption);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    color: var(--ls-wish-snooze-text);
    background: var(--ls-wish-snooze-bg);
    border: 1px solid var(--ls-wish-snooze-border);
    border-radius: var(--ls-radius-lg);
  }

  .ls-snooze-modal__hint--last {
    color: var(--ls-btn-rose-text);
    background: var(--ls-btn-rose-bg);
    border-color: var(--ls-btn-rose-border);
  }

  .ls-snooze-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.625rem;
    padding-top: 0.25rem;
  }

  @media (max-width: 380px) {
    .ls-snooze-modal__actions {
      flex-direction: column-reverse;
      align-items: stretch;
    }

    .ls-snooze-modal__actions .ls-btn {
      width: 100%;
    }
  }
}


/* === src/styles/components/badges.css === */
@layer components {
  .ls-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--ls-text-badge);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ls-radius-full);
    border: 1px solid transparent;
    flex-shrink: 0;
  }

  .ls-badge--hint {
    color: var(--ls-brand-400);
    background: oklch(0.58 0.22 15 / 0.1);
    border-color: oklch(0.58 0.22 15 / 0.22);
  }

  .ls-badge--coupon {
    color: var(--ls-coupon-badge-fg, oklch(0.44 0.12 70));
    background: var(--ls-coupon-badge-bg, oklch(0.72 0.11 85 / 0.18));
    border-color: var(--ls-coupon-badge-border, oklch(0.55 0.12 80 / 0.35));
  }

  .ls-badge--partner {
    color: var(--ls-partner-400);
    background: oklch(0.58 0.18 295 / 0.12);
    border-color: oklch(0.58 0.18 295 / 0.25);
  }

  .ls-badge--success {
    color: var(--ls-success);
    background: oklch(0.62 0.16 155 / 0.12);
    border-color: oklch(0.62 0.16 155 / 0.25);
  }

  /* Legacy wish entity badges */
  .wish-entity-hint {
    color: var(--ls-brand-400);
    background: oklch(0.58 0.22 15 / 0.1);
    border-color: oklch(0.58 0.22 15 / 0.22);
  }

  .wish-entity-coupon {
    color: var(--ls-coupon-badge-fg, oklch(0.44 0.12 70));
    background: var(--ls-coupon-badge-bg, oklch(0.72 0.11 85 / 0.18));
    border-color: var(--ls-coupon-badge-border, oklch(0.55 0.12 80 / 0.35));
  }

  .wish-entity-custom {
    color: var(--ls-partner-400);
    background: oklch(0.58 0.18 295 / 0.1);
    border-color: oklch(0.58 0.18 295 / 0.22);
  }
}


/* === src/styles/components/skeleton.css === */
@layer components {
  .ls-skeleton {
    background: linear-gradient(
      90deg,
      var(--ls-surface-sunken) 0%,
      var(--ls-glass-bg) 50%,
      var(--ls-surface-sunken) 100%
    );
    background-size: 200% 100%;
    animation: ls-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ls-radius-md);
  }

  .ls-skeleton--text {
    height: 0.875rem;
    width: 100%;
  }

  .ls-skeleton--avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ls-radius-full);
  }

  .ls-skeleton--card {
    height: 6rem;
    width: 100%;
    border-radius: var(--ls-radius-xl);
  }
}


/* === src/styles/components/empty-state.css === */
@layer components {
  .ls-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ls-space-8) var(--ls-space-4);
    gap: var(--ls-space-3);
  }

  .ls-empty__icon {
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.85;
    animation: ls-float 4s ease-in-out infinite;
  }

  .ls-empty__title {
    font-family: Montserrat, sans-serif;
    font-size: var(--ls-font-lg);
    font-weight: 700;
    color: var(--ls-ink);
  }

  .ls-empty__desc {
    font-size: var(--ls-font-sm);
    color: var(--ls-ink-muted);
    max-width: 20rem;
    line-height: var(--ls-leading-relaxed);
  }

  .wishes-hub-panel-empty {
    text-align: center;
    padding: 1.25rem 0.75rem;
    border: 1px dashed var(--ls-glass-border);
    border-radius: var(--ls-radius-lg);
    font-size: var(--ls-font-xs);
    color: var(--ls-ink-subtle);
    line-height: 1.45;
  }
}


/* === src/styles/components/navigation.css === */
@layer components {
  .nav-icon {
    transition:
      transform var(--ls-duration-slow) var(--ls-ease-spring),
      color var(--ls-duration-normal) var(--ls-ease-smooth);
  }

  .nav-btn:hover .nav-icon,
  .mobile-nav-btn:hover .nav-icon {
    transform: scale(1.12);
  }

  .mobile-nav-btn {
    position: relative;
    isolation: isolate;
    min-width: 3.5rem;
    min-height: 3.25rem;
    color: var(--ls-ink-subtle);
    border-radius: var(--ls-radius-full);
    border: 1px solid transparent;
    background: transparent;
    transition: color var(--ls-duration-normal) var(--ls-ease-smooth);
  }

  .mobile-nav-btn::before {
    content: "";
    position: absolute;
    top: 0.625rem;
    left: 50%;
    width: var(--ls-nav-mobile-glow-size);
    height: var(--ls-nav-mobile-glow-size);
    border-radius: 50%;
    transform: translateX(-50%) scale(0.55);
    opacity: 0;
    background: var(--ls-nav-mobile-glow);
    filter: blur(var(--ls-nav-mobile-glow-blur));
    transition:
      opacity var(--ls-duration-normal) var(--ls-ease-smooth),
      transform var(--ls-duration-normal) var(--ls-ease-spring);
    pointer-events: none;
    z-index: 0;
  }

  .mobile-nav-btn [data-icon],
  .mobile-nav-btn .nav-icon,
  .mobile-nav-btn > span:not([data-icon]) {
    position: relative;
    z-index: 1;
  }

  .mobile-nav-btn.active {
    color: var(--ls-nav-active-fg, var(--ls-btn-brand-text));
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .mobile-nav-btn.active::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  [data-theme="glass"] .mobile-nav-btn.active {
    color: var(--ls-nav-active-fg);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .ls-nav-active {
    color: var(--ls-btn-brand-text) !important;
    background: var(--ls-btn-brand-bg) !important;
    border: 1px solid var(--ls-btn-brand-border);
    border-radius: var(--ls-radius-full);
  }

  #mobile-bottom-nav {
    margin: 0 max(0.75rem, var(--safe-left)) calc(0.5rem + var(--safe-bottom)) max(0.75rem, var(--safe-right));
    padding: 0.35rem 0.5rem calc(0.35rem + var(--safe-bottom));
    background: var(--ls-material-nav);
    border: 1px solid var(--ls-glass-border);
    border-radius: var(--ls-radius-2xl);
    box-shadow: var(--ls-shadow-lg), var(--ls-glass-specular);
    backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
    -webkit-backdrop-filter: blur(var(--ls-glass-blur-strong)) saturate(var(--ls-glass-saturate));
  }

  .dashboard-content-area {
    /* Fixed nav — inset на scrollport, не на layout-батьку */
    padding-bottom: 0;
  }

  .app-logo-mark {
    background: linear-gradient(
      135deg,
      var(--ls-brand-500) 0%,
      var(--ls-brand-400) 52%,
      var(--ls-partner-500) 100%
    );
    box-shadow:
      0 4px 14px color-mix(in oklch, var(--ls-brand-500) 28%, transparent),
      inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 22%, transparent);
  }

  .app-logo-mark__icon {
    color: var(--ls-ink-inverse);
    filter: drop-shadow(0 1px 2px color-mix(in oklch, var(--ls-ink) 12%, transparent));
  }

  [data-theme="glass"] .app-logo-mark {
    box-shadow:
      0 4px 16px color-mix(in oklch, var(--ls-brand-500) 20%, transparent),
      inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 28%, transparent);
  }

  [data-theme="glass"] .app-logo-mark__icon {
    color: var(--ls-ink-inverse);
  }
}


/* === src/styles/components/theme-switcher.css === */
@layer components {
  #theme-switcher-root,
  .ls-theme-switcher {
    display: none !important;
  }

  .ls-theme-switcher {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: var(--ls-radius-xl);
    background: var(--ls-surface-sunken);
    border: 1px solid var(--ls-glass-border);
    gap: 0.125rem;
  }

  .ls-theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--ls-radius-full);
    border: 1px solid transparent;
    font-size: var(--ls-btn-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ls-btn-slate-text);
    transition:
      color var(--ls-duration-normal) var(--ls-ease-smooth),
      background var(--ls-duration-normal) var(--ls-ease-smooth),
      border-color var(--ls-duration-normal) var(--ls-ease-smooth),
      filter var(--ls-duration-fast) ease;
    white-space: nowrap;
  }

  .ls-theme-option:hover {
    color: var(--ls-ink-muted);
    filter: brightness(1.04);
  }

  .ls-theme-option[aria-pressed="true"] {
    color: var(--ls-btn-brand-text);
    background: var(--ls-btn-brand-bg);
    border-color: var(--ls-btn-brand-border);
    box-shadow: none;
  }

  .ls-theme-option__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--ls-radius-full);
    flex-shrink: 0;
  }

  .ls-theme-option__dot--signature {
    background: linear-gradient(135deg, oklch(0.58 0.22 15), oklch(0.75 0.12 85));
  }

  .ls-theme-option__dot--dark {
    background: linear-gradient(135deg, oklch(0.22 0.08 300), oklch(0.14 0.025 270));
  }

  .ls-theme-option__dot--light {
    background: linear-gradient(135deg, oklch(0.99 0.004 95), oklch(0.58 0.22 15));
    box-shadow: inset 0 0 0 1px oklch(0.55 0.02 40 / 0.18);
  }

  [data-theme='light'] .ls-theme-switcher {
    background: var(--ls-surface-sunken);
    border-color: var(--ls-border-default);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35);
  }

  [data-theme='light'] .ls-theme-option {
    color: var(--ls-ink-muted);
  }

  [data-theme='light'] .ls-theme-option:hover {
    color: var(--ls-ink);
    background: oklch(0.55 0.02 40 / 0.05);
  }

  [data-theme='light'] .ls-theme-option[aria-pressed='true'] {
    color: var(--ls-btn-brand-text);
    background: var(--ls-btn-brand-bg);
    border-color: var(--ls-btn-brand-border);
    box-shadow: none;
  }
}


/* === src/styles/components/couple-sync-heart.css === */
/**
 * Couple Sync Heart — premium animated component
 */
.heart-sync-active {
  animation: syncPulse 0.9s ease-in-out infinite;
}

@keyframes syncPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px var(--ls-brand-500));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 28px var(--ls-brand-500)) drop-shadow(0 0 48px var(--ls-brand-600));
  }
}

.couple-sync-heart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.65rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--ls-radius-xl);
  transition: transform 0.35s var(--ls-ease-spring);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.couple-sync-heart:focus-visible {
  box-shadow: 0 0 0 2px oklch(0.58 0.22 15 / 0.45);
}

.couple-sync-heart:hover {
  transform: scale(1.1);
}

.couple-sync-heart:active {
  transform: scale(0.94);
}

.couple-sync-heart__glow {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%) scale(0.75);
  border-radius: var(--ls-radius-full);
  background: radial-gradient(
    circle,
    oklch(0.58 0.22 15 / 0.32) 0%,
    oklch(0.58 0.18 295 / 0.12) 45%,
    transparent 72%
  );
  opacity: 0.45;
  transition: opacity 0.35s ease, transform 0.45s ease;
  pointer-events: none;
}

.couple-sync-heart:hover .couple-sync-heart__glow,
.couple-sync-heart--partner .couple-sync-heart__glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.55);
}

.couple-sync-heart__ring {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  transform: translate(-50%, -50%);
  border-radius: var(--ls-radius-full);
  border: 1px solid oklch(0.58 0.22 15 / 0.4);
  pointer-events: none;
  opacity: 0;
}

.couple-sync-heart:hover .couple-sync-heart__ring--1 {
  animation: coupleHeartRipple 1.4s ease-out infinite;
}

.couple-sync-heart:hover .couple-sync-heart__ring--2 {
  animation: coupleHeartRipple 1.4s ease-out 0.55s infinite;
}

@keyframes coupleHeartRipple {
  0% {
    width: 1.75rem;
    height: 1.75rem;
    opacity: 0.55;
  }
  100% {
    width: 4.75rem;
    height: 4.75rem;
    opacity: 0;
  }
}

.couple-sync-heart__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  color: var(--ls-brand-500);
  font-size: var(--ls-font-3xl);
  line-height: 1;
  animation: coupleHeartBeat 1.35s ease-in-out infinite;
  transition: filter 0.3s ease, color 0.3s ease;
  filter: drop-shadow(0 0 8px oklch(0.58 0.22 15 / 0.45));
}

.couple-sync-heart:hover .couple-sync-heart__icon {
  animation: coupleHeartBeatHover 0.72s ease-in-out infinite;
  filter: drop-shadow(0 0 14px oklch(0.58 0.22 15 / 0.85))
    drop-shadow(0 0 22px oklch(0.55 0.2 350 / 0.45));
}

.couple-sync-heart--partner .couple-sync-heart__icon {
  color: var(--ls-partner-400);
  animation: coupleHeartBeatHover 0.55s ease-in-out infinite;
  filter: drop-shadow(0 0 12px oklch(0.7 0.14 295 / 0.75));
}

.couple-sync-heart--synced .couple-sync-heart__icon {
  color: var(--ls-brand-400);
  animation: coupleHeartBeatHover 0.45s ease-in-out infinite;
  filter: drop-shadow(0 0 18px oklch(0.58 0.22 15 / 1))
    drop-shadow(0 0 30px oklch(0.55 0.2 350 / 0.55));
}

.couple-sync-heart__pulse-bar {
  position: relative;
  z-index: 2;
  height: 3px;
  width: 2rem;
  background: oklch(0.58 0.22 15 / 0.14);
  border-radius: var(--ls-radius-full);
  overflow: hidden;
}

.couple-sync-heart__pulse-fill {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--ls-brand-500),
    var(--ls-brand-300),
    var(--ls-partner-400),
    var(--ls-brand-300),
    var(--ls-brand-500)
  );
  background-size: 220% 100%;
  animation: coupleHeartShimmer 2.2s linear infinite;
  transition: width 0.85s var(--ls-ease-smooth);
}

.couple-sync-heart--synced .couple-sync-heart__pulse-fill {
  width: 100% !important;
  animation: coupleHeartShimmer 0.45s linear infinite;
}

.couple-sync-heart__hint {
  position: absolute;
  bottom: -0.15rem;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-size: var(--ls-text-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ls-brand-300);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.couple-sync-heart:hover .couple-sync-heart__hint,
.couple-sync-heart:focus-visible .couple-sync-heart__hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.couple-sync-heart--sm .couple-sync-heart__hint {
  display: none;
}

.couple-sync-heart--sm .couple-sync-heart__icon {
  font-size: var(--ls-text-title-sm);
}

.couple-sync-heart--sm .couple-sync-heart__glow {
  width: 2.25rem;
  height: 2.25rem;
}

.couple-sync-heart--sm .couple-sync-heart__pulse-bar {
  width: 1.5rem;
  height: 2px;
}

.couple-sync-heart:hover .couple-sync-heart__pulse-fill {
  animation: coupleHeartShimmer 0.75s linear infinite;
}

@keyframes coupleHeartGlowPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.couple-sync-heart--partner .couple-sync-heart__glow {
  animation: coupleHeartGlowPulse 0.9s ease-in-out infinite;
}

@keyframes coupleHeartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  56% { transform: scale(1); }
}

@keyframes coupleHeartBeatHover {
  0%, 100% { transform: scale(1.06); }
  50% { transform: scale(1.22); }
}

@keyframes coupleHeartShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .couple-sync-heart__icon,
  .couple-sync-heart__pulse-fill,
  .couple-sync-heart__ring,
  .couple-sync-heart__glow {
    animation: none !important;
  }
  .couple-sync-heart:hover {
    transform: none;
  }
}


/* === src/styles/components/screens.css === */
/* ===== Dashboard layout ===== */
.dash-bento {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .dash-bento {
    gap: 1.25rem;
  }

  .dash-bento-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }
}

.dash-bento > .dash-kpi-grid,
.dash-bento > .dash-charts-grid,
.dash-bento-bottom,
.dash-bento-activity,
.dash-bento-quick {
  width: 100%;
}

.dash-hero-card {
  border-color: var(--ls-glass-border-strong) !important;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--ls-brand-500) 14%, transparent) 0%,
    color-mix(in oklch, var(--ls-partner-500) 10%, transparent) 50%,
    color-mix(in oklch, var(--ls-brand-500) 6%, transparent) 100%
  ) !important;
}

.dash-kpi-card {
  position: relative;
  overflow: hidden;
}

.dash-kpi-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  background: radial-gradient(circle, color-mix(in oklch, var(--ls-brand-500) 8%, transparent), transparent 70%);
  pointer-events: none;
}

.dash-quick-btn {
  min-height: 4.5rem;
}

/* ——— Dashboard responsive grids (mobile-first) ——— */
#tab-dashboard .dash-scroll {
  padding-left: max(var(--tab-scroll-pad-x), var(--safe-left));
  padding-right: max(var(--tab-scroll-pad-x), var(--safe-right));
}

#tab-dashboard .dash-hero-inner {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "score"
    "main"
    "partner";
  align-items: center;
}

#tab-dashboard .dash-hero-score {
  grid-area: score;
  justify-self: center;
}

#tab-dashboard .dash-hero-main {
  grid-area: main;
  min-width: 0;
}

#tab-dashboard .dash-hero-partner {
  grid-area: partner;
  width: 100%;
}

@media (min-width: 480px) {
  #tab-dashboard .dash-hero-inner {
    grid-template-columns: 7.5rem 1fr;
    grid-template-areas:
      "score main"
      "partner partner";
  }

  #tab-dashboard .dash-hero-score {
    justify-self: start;
  }

  #tab-dashboard .dash-hero-main {
    text-align: left;
  }
}

@media (min-width: 768px) {
  #tab-dashboard .dash-hero-inner {
    grid-template-columns: 8rem minmax(0, 1fr) minmax(9rem, 11rem);
    grid-template-areas: "score main partner";
    align-items: center;
  }

  #tab-dashboard .dash-hero-partner {
    width: auto;
  }
}

@media (min-width: 1024px) {
  #tab-dashboard .dash-hero-inner {
    grid-template-columns: 8.5rem minmax(0, 1fr) 10.5rem;
    gap: 1.5rem 2rem;
  }
}

#tab-dashboard .dash-ring {
  width: 7.5rem;
  height: 7.5rem;
}

@media (min-width: 640px) {
  #tab-dashboard .dash-ring {
    width: 8rem;
    height: 8rem;
  }
}

@media (min-width: 1024px) {
  #tab-dashboard .dash-ring {
    width: 8.5rem;
    height: 8.5rem;
  }
}

#tab-dashboard #dash-harmony-ring {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#tab-dashboard .dash-ai-insights__body {
  position: relative;
  padding: 0.75rem 0.875rem 0.8125rem 1rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-dash-ai-bg);
  border: 1px solid var(--ls-dash-ai-border);
  box-shadow: var(--ls-dash-ai-shadow);
  font-size: var(--ls-font-sm);
  line-height: var(--ls-leading-relaxed);
  letter-spacing: 0.01em;
  color: var(--ls-dash-ai-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#tab-dashboard .dash-ai-insights__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--ls-dash-ai-accent);
  opacity: 0.8;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-p {
  margin: 0 0 0.55rem;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-p:last-child {
  margin-bottom: 0;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-strong {
  font-weight: 600;
  color: var(--ls-dash-ai-strong);
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-ul,
#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-ol {
  margin: 0.45rem 0 0;
  padding-left: 0;
  list-style: none;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-ul .chat-md-li {
  position: relative;
  margin: 0.35rem 0;
  padding-left: 1rem;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-ul .chat-md-li::before {
  content: "♥";
  position: absolute;
  left: 0;
  top: 0.12em;
  font-size: var(--ls-text-micro);
  line-height: 1;
  color: var(--ls-brand-400);
  opacity: 0.85;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-ol {
  padding-left: 1.15rem;
  list-style: decimal;
}

#tab-dashboard .dash-ai-insights__body.chat-markdown .chat-md-ol .chat-md-li {
  margin: 0.3rem 0;
  padding-left: 0.15rem;
}

#tab-dashboard .dash-ai-insights__loading {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-dash-ai-loading-bg);
  border: 1px dashed var(--ls-dash-ai-loading-border);
  font-size: var(--ls-font-sm);
  line-height: var(--ls-leading-relaxed);
  color: var(--ls-ink-subtle);
  animation: pulse 1.6s ease-in-out infinite;
}

#tab-dashboard .dash-kpi-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 380px) {
  #tab-dashboard .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #tab-dashboard .dash-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

#tab-dashboard .dash-kpi-card {
  min-height: 5.5rem;
}

@media (min-width: 640px) {
  #tab-dashboard .dash-kpi-card {
    min-height: 6rem;
  }
}

#tab-dashboard .dash-kpi-label {
  line-height: 1.25;
  word-break: break-word;
}

#tab-dashboard .dash-charts-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  #tab-dashboard .dash-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

#tab-dashboard .dash-chart-box {
  position: relative;
  width: 100%;
  height: clamp(10rem, 32vw, 13rem);
  min-height: 10rem;
}

@media (min-width: 640px) {
  #tab-dashboard .dash-chart-box {
    height: clamp(11rem, 28vw, 14rem);
  }
}

@media (min-width: 1024px) {
  #tab-dashboard .dash-chart-box {
    height: 13.5rem;
  }
}

#tab-dashboard .dash-chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#tab-dashboard .dash-activity-list {
  max-height: none;
}

#tab-dashboard .dash-quick-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  #tab-dashboard .dash-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

#tab-dashboard .dash-quick-btn {
  min-height: 3.25rem;
  touch-action: manipulation;
}

@media (min-width: 640px) {
  #tab-dashboard .dash-quick-btn {
    min-height: 4.5rem;
  }
}

#tab-dashboard .dash-activity-row {
  gap: 0.625rem 0.75rem;
}

@media (max-width: 379px) {
  #tab-dashboard .dash-activity-status {
    width: 100%;
    text-align: left;
    padding-left: 2.75rem;
  }
}

/* ===== Wishes Tabs ===== */
.wishes-tabs-bar {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.25rem;
  margin-bottom: 1rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-surface-sunken);
  border: 1px solid var(--ls-glass-border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wishes-tabs-bar::-webkit-scrollbar { display: none; }

.wishes-tab-btn {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ls-btn-gap-sm);
  padding: var(--ls-btn-py-md) var(--ls-btn-px-sm);
  min-height: var(--ls-btn-min-h-md);
  border-radius: var(--ls-radius-full);
  border: 1px solid transparent;
  font-size: var(--ls-btn-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ls-ink-subtle);
  white-space: nowrap;
  transition: all var(--ls-duration-normal) var(--ls-ease-smooth);
}

.wishes-tab-btn:hover {
  color: var(--ls-ink-muted);
  background: var(--ls-glass-bg);
}

.wishes-tab-btn[aria-selected="true"] {
  color: var(--ls-btn-brand-text);
  background: var(--ls-btn-brand-bg);
  border-color: var(--ls-btn-brand-border);
  box-shadow: none;
}

.wishes-tab-btn__badge {
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: var(--ls-radius-full);
  font-size: var(--ls-text-micro);
  font-weight: 700;
  background: var(--ls-brand-500);
  color: var(--ls-ink-inverse);
  line-height: 1.125rem;
}

.wishes-tab-panel {
  display: none;
  animation: ls-fade-in-up 0.35s ease-out;
}

.wishes-tab-panel[aria-hidden="false"] {
  display: block;
}

.wishes-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .wishes-quick-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.wishes-quick-card {
  border-radius: var(--ls-radius-2xl);
  padding: 1.1rem 0.75rem;
  text-align: center;
  transition: transform var(--ls-duration-slow) var(--ls-ease-spring);
}

.wishes-quick-card:hover {
  transform: translateY(-3px);
}

.wishes-tab-off {
  display: none !important;
}

.wishes-hub--tabbed {
  display: block !important;
}

.wishes-hub--tabbed .wishes-hub-wallet,
.wishes-hub--tabbed .wishes-hub-panels {
  display: block;
  min-height: 0;
}

.wishes-hub--tabbed .wishes-hub-wallet.wishes-tab-off,
.wishes-hub--tabbed .wishes-hub-panels.wishes-tab-off {
  display: none !important;
}

#tab-wishes.wishes-tabbed-mode .wishes-tabs-bar {
  margin-bottom: 0.5rem;
}

#tab-wishes.wishes-tabbed-mode .wishes-scroll-area > * + * {
  margin-top: 1rem !important;
}

#tab-wishes.wishes-tabbed-mode .wishes-hub > * {
  margin-bottom: 0;
}

#tab-wishes.wishes-tabbed-mode .wishes-hub-panel:not(.hidden),
#tab-wishes.wishes-tabbed-mode #incoming-wishes-section:not(.hidden),
#tab-wishes.wishes-tabbed-mode #wishes-history-panel {
  animation: ls-fade-in-up 0.35s ease-out;
}

/* ===== Haptic Immersive ===== */
.haptic-page {
  width: 100%;
}

.haptic-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.875rem, 2.5vw, 1.25rem);
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.haptic-status {
  width: 100%;
  flex-shrink: 0;
}

.haptic-record-duration {
  font-weight: 700;
  color: var(--ls-success);
}

.haptic-heart-wrap {
  --haptic-heart-size: clamp(8rem, min(38dvh, 30dvw), 20rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: max(12rem, calc(var(--haptic-heart-size) * 1.2));
  padding: clamp(0.75rem, 3vw, 2rem) 0;
}

.heart-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--haptic-heart-size) * 1.55);
  height: calc(var(--haptic-heart-size) * 1.55);
  border-radius: 50%;
  background: color-mix(in oklch, var(--ls-brand-500) 12%, transparent);
  filter: blur(calc(var(--haptic-heart-size) * 0.22));
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease;
  pointer-events: none;
  animation: haptic-glow-idle 3.2s ease-in-out infinite;
}

.heart-glow--active {
  animation: none;
  background: color-mix(in oklch, var(--ls-brand-500) 38%, transparent);
  transform: translate(-50%, -50%) scale(1.12);
}

.heart-glow--sync {
  background: color-mix(in oklch, var(--ls-brand-500) 45%, transparent);
  animation: haptic-glow-sync 0.9s ease-in-out infinite;
}

.haptic-heart-btn {
  width: var(--haptic-heart-size);
  height: var(--haptic-heart-size);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  background: radial-gradient(
    circle at 42% 38%,
    color-mix(in oklch, var(--ls-brand-500) 34%, transparent) 0%,
    color-mix(in oklch, var(--ls-brand-500) 14%, transparent) 48%,
    color-mix(in oklch, var(--ls-brand-600) 6%, transparent) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--ls-brand-500) 6%, transparent),
    0 10px 36px color-mix(in oklch, var(--ls-brand-500) 16%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 14%, transparent);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease;
  animation: haptic-heart-idle 3s ease-in-out infinite;
}

.haptic-heart-btn::before,
.haptic-heart-btn::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 18%, transparent);
  opacity: 0;
  pointer-events: none;
}

.haptic-heart-btn:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--ls-brand-500) 10%, transparent),
    0 14px 42px color-mix(in oklch, var(--ls-brand-500) 22%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 16%, transparent);
}

.haptic-heart-btn:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ls-brand-500) 45%, transparent);
  outline-offset: 4px;
}

.haptic-heart-btn--pressing {
  animation: none;
  transform: scale(0.93);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--ls-brand-500) 14%, transparent),
    0 6px 24px color-mix(in oklch, var(--ls-brand-500) 28%, transparent),
    inset 0 2px 12px color-mix(in oklch, var(--ls-brand-500) 12%, transparent);
}

.haptic-heart-btn--pressing::after {
  animation: haptic-ripple 0.85s ease-out infinite;
}

.haptic-heart-btn.heart-sync-active {
  animation: syncPulse 0.9s ease-in-out infinite;
}

.haptic-heart-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(var(--haptic-tilt-x, 0deg)) rotateY(var(--haptic-tilt-y, 0deg)) scale(var(--haptic-lift, 1));
  transition: transform 0.2s ease-out;
}

.haptic-heart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--haptic-heart-size) * 0.44);
  height: calc(var(--haptic-heart-size) * 0.44);
  color: var(--ls-ink-muted, var(--ls-ink-muted));
  transition: color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.haptic-heart-icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke-width: 1.65;
}

.haptic-heart-icon--active {
  color: var(--ls-brand-500, var(--ls-brand-500));
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--ls-brand-500) 45%, transparent));
}

.haptic-heart-icon--sync {
  color: var(--ls-brand-400);
  animation: ls-heart-beat 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 14px color-mix(in oklch, var(--ls-brand-500) 55%, transparent));
}

@keyframes haptic-heart-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes haptic-glow-idle {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes haptic-glow-sync {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

@keyframes haptic-ripple {
  0% { opacity: 0.55; transform: scale(0.88); }
  100% { opacity: 0; transform: scale(1.35); }
}

@media (min-width: 640px) {
  .haptic-heart-wrap {
    --haptic-heart-size: clamp(10rem, min(44dvh, 26dvw), 24rem);
    min-height: max(14rem, calc(var(--haptic-heart-size) * 1.25));
  }
}

@media (min-width: 1024px) {
  .haptic-heart-wrap {
    --haptic-heart-size: clamp(12rem, min(48dvh, 22dvw), 28rem);
    min-height: max(16rem, calc(var(--haptic-heart-size) * 1.3));
  }
}

@media (min-width: 1536px) {
  .haptic-heart-wrap {
    --haptic-heart-size: clamp(14rem, min(52dvh, 20dvw), 32rem);
  }
}

#tab-haptic > .mobile-tab-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 639px) {
  .haptic-heart-wrap {
    --haptic-heart-size: clamp(7.5rem, min(44vw, 34dvh), 11rem);
    min-height: max(10rem, calc(var(--haptic-heart-size) * 1.15));
  }
}

@media (prefers-reduced-motion: reduce) {
  .haptic-heart-btn,
  .heart-glow,
  .haptic-heart-icon--sync {
    animation: none !important;
  }

  .haptic-heart-inner {
    transform: none !important;
  }
}

/* ===== Chat Intimate ===== */
.chat-intimate .chat-bubble-user .chat-bubble-body {
  background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-500)) !important;
  color: var(--ls-ink-inverse) !important;
  box-shadow: var(--ls-shadow-brand);
  border-radius: var(--ls-radius-2xl) var(--ls-radius-2xl) var(--ls-radius-sm) var(--ls-radius-2xl);
}

.chat-intimate .chat-bubble-assistant .chat-bubble-body {
  background: var(--ls-surface-sunken) !important;
  border: 1px solid var(--ls-glass-border);
  color: var(--ls-ink);
  border-radius: var(--ls-radius-2xl) var(--ls-radius-2xl) var(--ls-radius-2xl) var(--ls-radius-sm);
}

.chat-bubble-main {
  position: relative;
  min-width: 0;
}

.chat-bubble-avatar {
  width: 2rem;
  height: 2rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  border-radius: var(--ls-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-caption);
  font-weight: 700;
  line-height: 1;
}

.chat-bubble-avatar--user {
  background: color-mix(in oklch, var(--ls-brand-500) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 20%, transparent);
  color: var(--ls-brand-500);
}

.chat-bubble-avatar--assistant {
  background: color-mix(in oklch, var(--ls-brand-500) 20%, transparent);
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 20%, transparent);
  color: var(--ls-brand-400);
}

.chat-bubble-time {
  margin: 0.375rem 0 0;
  font-size: var(--ls-text-micro);
  color: var(--ls-ink-subtle);
}

.chat-bubble-time--user {
  text-align: right;
}

.chat-bubble-user,
.chat-bubble-assistant {
  width: fit-content;
  max-width: 85%;
}

.chat-message-row {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  width: 100%;
}

.chat-message-row-user {
  justify-content: flex-end;
}

.chat-message-row-assistant {
  justify-content: flex-start;
}

.chat-message-row .chat-bubble-user,
.chat-message-row .chat-bubble-assistant {
  flex-shrink: 1;
  min-width: 0;
}

.chat-message-row.hitl-bubble {
  max-width: 92%;
  width: fit-content;
}

.chat-intimate .chat-scenario-card {
  border-radius: var(--ls-radius-xl) !important;
  background: var(--ls-surface-raised) !important;
  border-color: var(--ls-glass-border) !important;
}

#chat-quick-prompts {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: var(--ls-space-3, 0.75rem) 0 var(--ls-space-4, 1rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#chat-quick-prompts::-webkit-scrollbar {
  display: none;
}

#chat-quick-prompts .chat-quick-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

#chat-quick-prompts .wish-status-chip,
#chat-partner-context .wish-status-chip,
#tab-wishes .tab-section-header .wish-status-chip,
#tab-mood .mood-hero-card .wish-status-chip,
#chat-coupon-dock .wish-status-chip {
  box-shadow: none;
}

#tab-wishes .tab-section-header .wish-status-chip,
#tab-mood .mood-hero-card .wish-status-chip {
  padding: 0.35rem 0.8rem;
  font-size: var(--ls-btn-font-xs);
}

#custom-wish-open-btn {
  padding: 0.75rem 1.75rem;
  min-height: 2.75rem;
  gap: 0.5rem;
}

/* ===== Chat — картка плану побачення ===== */
.chat-date-plan-message .chat-bubble-body {
  background: var(--ls-surface-sunken) !important;
  border: 1px solid var(--ls-glass-border);
  color: var(--ls-ink);
}

.chat-date-plan-intro .chat-markdown {
  color: var(--ls-ink);
}

.chat-date-plan-card {
  border-radius: var(--ls-radius-xl);
  padding: 1rem 1.1rem;
  background: linear-gradient(
    155deg,
    color-mix(in oklch, var(--ls-brand-500) 12%, transparent) 0%,
    var(--ls-surface-raised) 42%,
    var(--ls-surface-sunken) 100%
  );
  border: 1px solid var(--ls-glass-border-strong);
  box-shadow: var(--ls-shadow-sm);
}

.chat-date-plan-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.65rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--ls-glass-border);
}

.chat-date-plan-header-icon {
  color: var(--ls-brand-500);
  margin-top: 0.1rem;
}

.chat-date-plan-title {
  margin: 0;
  font-size: var(--ls-text-body);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ls-brand-700);
  text-transform: none;
}

.chat-date-plan-meta {
  margin: 0 0 0.75rem;
  font-size: var(--ls-text-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ls-ink-muted);
}

.chat-date-plan-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-date-step-num {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  font-size: var(--ls-text-caption);
  font-weight: 700;
  color: var(--ls-brand-600);
  background: color-mix(in oklch, var(--ls-brand-500) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 28%, transparent);
}

.chat-date-plan-step-text {
  display: block;
  font-size: var(--ls-text-subtitle);
  line-height: 1.5;
  color: var(--ls-ink);
}

.chat-date-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ls-glass-border);
}

.chat-date-plan-btn {
  font-size: var(--ls-btn-font-sm);
  font-weight: 600;
  border-radius: var(--ls-radius-lg);
  padding: var(--ls-btn-py-md) var(--ls-btn-px-sm);
  min-height: var(--ls-btn-min-h-md);
  transition:
    background-color var(--ls-duration-fast) ease,
    border-color var(--ls-duration-fast) ease,
    color var(--ls-duration-fast) ease;
}

.chat-date-plan-btn--ghost {
  color: var(--ls-ink-muted);
  background: var(--ls-surface-raised);
  border: 1px solid var(--ls-glass-border);
}

.chat-date-plan-btn--ghost:hover {
  color: var(--ls-ink);
  background: var(--ls-surface);
  border-color: var(--ls-glass-border-strong);
}

.chat-date-plan-btn--primary {
  color: var(--ls-brand-700);
  background: color-mix(in oklch, var(--ls-brand-500) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 28%, transparent);
}

.chat-date-plan-btn--primary:hover {
  color: var(--ls-brand-800);
  background: color-mix(in oklch, var(--ls-brand-500) 16%, transparent);
  border-color: color-mix(in oklch, var(--ls-brand-500) 40%, transparent);
}

.chat-date-plan-time {
  margin: 0.35rem 0 0;
  font-size: var(--ls-text-caption);
  color: var(--ls-ink-subtle);
}

[data-theme="dark"] .chat-date-plan-card {
  background: linear-gradient(
    155deg,
    color-mix(in oklch, var(--ls-brand-500) 18%, transparent) 0%,
    var(--ls-surface-sunken) 55%,
    var(--ls-bg-base) 100%
  );
}

[data-theme="dark"] .chat-date-plan-title {
  color: var(--ls-brand-200);
}

[data-theme="dark"] .chat-date-plan-step-text {
  color: var(--ls-ink);
}

#tab-chat.chat-draft-mode #chat-coupon-dock {
  animation: ls-fade-in-up 0.4s ease-out;
}

/* ===== Chat message delete button — поруч з бульбашкою (вільна сторона) ===== */
.chat-msg-delete-btn {
  position: absolute;
  top: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border-radius: var(--ls-radius-lg);
  color: var(--ls-btn-rose-text);
  background: var(--ls-chat-delete-btn-bg, var(--ls-surface-sunken));
  border: 1px solid var(--ls-btn-rose-border);
  opacity: 0;
  z-index: 2;
  line-height: 1;
  transition:
    opacity var(--ls-duration-normal) ease,
    background-color var(--ls-duration-fast) ease,
    border-color var(--ls-duration-fast) ease,
    color var(--ls-duration-fast) ease,
    filter var(--ls-duration-fast) ease;
}

.chat-message-row-user .chat-msg-delete-btn {
  left: 0;
  right: auto;
  transform: translateX(calc(-100% - 0.4rem));
}

.chat-message-row-assistant .chat-msg-delete-btn,
.chat-message-row.hitl-bubble .chat-msg-delete-btn {
  right: 0;
  left: auto;
  transform: translateX(calc(100% + 0.4rem));
}

.chat-message-row:hover .chat-msg-delete-btn,
.chat-msg-delete-btn:focus-visible {
  opacity: 1;
}

.chat-msg-delete-btn:hover {
  color: var(--ls-ink-inverse);
  background: var(--ls-brand-500);
  border-color: var(--ls-brand-500);
}

.chat-msg-delete-btn:active {
  filter: brightness(0.95);
}

.chat-msg-delete-btn [data-icon] {
  font-size: var(--ls-text-subtitle);
  display: inline-flex;
}

/* ===== Chat header action buttons (reload / clear) ===== */
.chat-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-header-actions .ls-btn--icon-sm [data-icon] {
  font-size: var(--ls-text-body);
}

/* ===== Chat welcome scenario cards (Подарунок / Побачення / ...) ===== */
.chat-scenario-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  text-align: left;
  background: var(--ls-surface-raised);
  border: 1px solid var(--ls-glass-border);
  border-radius: var(--ls-radius-xl);
  color: var(--ls-ink);
  transition:
    transform var(--ls-duration-normal) var(--ls-ease-spring),
    border-color var(--ls-duration-normal) ease,
    background-color var(--ls-duration-normal) ease,
    box-shadow var(--ls-duration-normal) ease;
}

.chat-scenario-card:hover {
  transform: translateY(-2px);
  border-color: var(--ls-glass-border-strong);
  background: linear-gradient(
    155deg,
    color-mix(in oklch, var(--ls-brand-500) 6%, transparent),
    var(--ls-surface-raised) 55%
  );
  box-shadow: var(--ls-shadow-sm);
}

.chat-scenario-card:active {
  transform: translateY(0) scale(0.98);
}

.chat-scenario-card__emoji {
  font-size: var(--ls-icon-nav);
  line-height: 1;
}

.chat-scenario-card__title {
  font-size: var(--ls-font-base);
  font-weight: 700;
  color: var(--ls-ink);
  margin: 0;
}

.chat-scenario-card__hint {
  font-size: var(--ls-font-xs);
  color: var(--ls-ink-muted);
  margin: 0;
  line-height: 1.4;
}

/* ===== Coupon dock — "Інший" cycle button ===== */
#chat-coupon-dock .chat-coupon-dock-cycle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--ls-radius-full);
  font-size: var(--ls-font-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ls-coupon-badge-fg, var(--ls-btn-amber-text));
  background: var(--ls-coupon-badge-bg, var(--ls-btn-amber-bg));
  border: 1px solid var(--ls-coupon-badge-border, var(--ls-btn-amber-border));
  cursor: pointer;
  transition:
    filter var(--ls-duration-fast) ease,
    transform var(--ls-duration-fast) var(--ls-ease-spring);
}

#chat-coupon-dock .chat-coupon-dock-cycle:hover {
  filter: brightness(1.05);
}

#chat-coupon-dock .chat-coupon-dock-cycle:active {
  transform: scale(0.96);
}

/* ===== Chat composer — масштаб поля вводу (~80% від базового) ===== */
#tab-chat .chat-composer {
  --chat-input-font: var(--ls-chat-input-font-sm);
  --chat-input-py: 0.5rem;
  --chat-input-px: 0.6rem;
  --chat-input-min-h: var(--ls-chat-input-min-h-md);
  --chat-send-size: var(--ls-chat-send-size-md);
  --chat-send-icon: var(--ls-chat-send-icon-md);
}

@media (min-width: 640px) {
  #tab-chat .chat-composer {
    --chat-input-font: var(--ls-chat-input-font-md);
    --chat-input-py: 0.7rem;
    --chat-input-px: 0.8rem;
    --chat-input-min-h: var(--ls-chat-input-min-h-lg);
  }
}

#tab-chat #chat-message-input {
  font-size: var(--chat-input-font) !important;
  padding-top: var(--chat-input-py) !important;
  padding-bottom: var(--chat-input-py) !important;
  padding-left: var(--chat-input-px) !important;
  padding-right: var(--chat-input-px) !important;
  min-height: var(--chat-input-min-h);
  line-height: 1.35;
}

#tab-chat #chat-message-input::placeholder {
  font-size: 1em;
  line-height: inherit;
  opacity: 0.82;
}

#tab-chat #chat-send-btn {
  width: var(--chat-send-size);
  height: var(--chat-send-size);
  min-width: var(--chat-send-size);
  min-height: var(--chat-send-size);
  padding: 0;
}

#tab-chat #chat-send-btn [data-icon] {
  font-size: var(--chat-send-icon);
}

/* ===== Chat scroll dock (↑ / ↓) — без накладання на бульбашки ===== */
.chat-scroll-controls {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 1rem 0.45rem;
  min-height: 0;
  pointer-events: none;
}

.chat-scroll-controls--hidden {
  display: none !important;
}

.chat-scroll-controls:not(.chat-scroll-controls--hidden) {
  min-height: 3.15rem;
}

.chat-scroll-fab {
  display: none;
  border: 1px solid var(--ls-brand-300);
  background: linear-gradient(145deg, var(--ls-brand-50), var(--ls-brand-100));
  color: var(--ls-brand-700);
  box-shadow:
    0 4px 18px color-mix(in oklch, var(--ls-brand-500) 22%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 65%, transparent);
}

.chat-scroll-fab--visible {
  display: inline-flex;
  pointer-events: auto;
}

.chat-scroll-fab:hover {
  border-color: var(--ls-brand-400);
  background: linear-gradient(145deg, var(--ls-brand-100), var(--ls-brand-200));
  color: var(--ls-brand-800);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--ls-brand-500) 32%, transparent);
}

[data-theme='dark'] .chat-scroll-fab {
  border-color: color-mix(in oklch, var(--ls-brand-400) 45%, transparent);
  background: linear-gradient(145deg, var(--ls-brand-900), var(--ls-brand-950));
  color: var(--ls-brand-200);
  box-shadow: 0 4px 20px color-mix(in oklch, var(--ls-ink) 45%, transparent);
}

[data-theme='dark'] .chat-scroll-fab:hover {
  border-color: var(--ls-brand-300);
  background: linear-gradient(145deg, var(--ls-brand-800), var(--ls-brand-900));
  color: var(--ls-brand-100);
}

/* ===== Mood Hero ===== */
.mood-eq-slider {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  min-height: 2rem;
  padding: 0.5rem 0.625rem;
  border-top: 1px solid var(--ls-mood-eq-track-border);
  background: var(--ls-mood-eq-track-bg);
  -webkit-tap-highlight-color: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.mood-eq-slider:active {
  background: var(--ls-mood-eq-track-active);
}

.mood-eq-bar {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  min-width: 6px;
  border-radius: 3px;
  transition:
    height 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.mood-hero-card {
  border-radius: var(--ls-radius-2xl);
  border: 1px solid var(--ls-glass-border-strong);
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--ls-brand-500) 8%, transparent) 0%,
    var(--ls-surface-raised) 45%
  );
}

/* Градієнтна підкладка під кнопками пікера настрою */
.mood-picker-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in oklch, var(--ls-brand-500) 14%, transparent);
  background: linear-gradient(
    128deg,
    color-mix(in oklch, var(--ls-brand-500) 22%, transparent) 0%,
    color-mix(in oklch, var(--ls-partner-500) 16%, transparent) 42%,
    color-mix(in oklch, var(--ls-surface-overlay) 88%, transparent) 72%,
    color-mix(in oklch, var(--ls-partner-400) 14%, transparent) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 6%, transparent),
    0 12px 32px color-mix(in oklch, var(--ls-ink) 45%, transparent);
}

.mood-picker-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 85% 70% at 8% 15%, color-mix(in oklch, var(--ls-brand-500) 32%, transparent), transparent 58%),
    radial-gradient(ellipse 75% 65% at 92% 88%, color-mix(in oklch, var(--ls-partner-400) 26%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 100%, color-mix(in oklch, var(--ls-brand-500) 10%, transparent), transparent 70%);
}

.mood-picker-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--ls-ink-inverse) 4%, transparent) 0%,
    transparent 38%,
    color-mix(in oklch, var(--ls-ink) 18%, transparent) 100%
  );
}

.mood-picker-wrap #mood-picker-root {
  position: relative;
  z-index: 1;
}

.mood-picker-card[data-mood="angry"] { --mood-accent: var(--ls-mood-angry); }
.mood-picker-card[data-mood="sad"] { --mood-accent: var(--ls-mood-sad); }
.mood-picker-card[data-mood="support"] { --mood-accent: var(--ls-mood-support); }
.mood-picker-card[data-mood="tired"] { --mood-accent: var(--ls-mood-tired); }
.mood-picker-card[data-mood="peaceful"] { --mood-accent: var(--ls-mood-peaceful); }
.mood-picker-card[data-mood="calm"] { --mood-accent: var(--ls-mood-calm); }
.mood-picker-card[data-mood="happy"] { --mood-accent: var(--ls-mood-happy); }
.mood-picker-card[data-mood="bliss"] { --mood-accent: var(--ls-mood-bliss); }
.mood-picker-card[data-mood="excited"] { --mood-accent: var(--ls-mood-happy); }

.mood-picker-btn[data-mood="angry"] { --mood-accent: var(--ls-mood-angry); }
.mood-picker-btn[data-mood="sad"] { --mood-accent: var(--ls-mood-sad); }
.mood-picker-btn[data-mood="support"] { --mood-accent: var(--ls-mood-support); }
.mood-picker-btn[data-mood="tired"] { --mood-accent: var(--ls-mood-tired); }
.mood-picker-btn[data-mood="peaceful"] { --mood-accent: var(--ls-mood-peaceful); }
.mood-picker-btn[data-mood="calm"] { --mood-accent: var(--ls-mood-calm); }
.mood-picker-btn[data-mood="happy"] { --mood-accent: var(--ls-mood-happy); }
.mood-picker-btn[data-mood="bliss"] { --mood-accent: var(--ls-mood-bliss); }
.mood-picker-btn[data-mood="excited"] { --mood-accent: var(--ls-mood-happy); }

.mood-picker-card[data-mood] {
  border-color: color-mix(in oklch, var(--mood-accent) 24%, var(--ls-glass-border));
  background: linear-gradient(
    155deg,
    color-mix(in oklch, var(--mood-accent) 26%, var(--ls-surface-raised)) 0%,
    color-mix(in oklch, var(--mood-accent) 10%, transparent) 52%,
    color-mix(in oklch, var(--mood-accent) 18%, var(--ls-surface-sunken)) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mood-picker-card[data-mood].ring-2 {
  border-color: color-mix(in oklch, var(--mood-accent) 48%, transparent);
  background: linear-gradient(
    155deg,
    color-mix(in oklch, var(--mood-accent) 38%, var(--ls-surface-raised)) 0%,
    color-mix(in oklch, var(--mood-accent) 18%, transparent) 48%,
    color-mix(in oklch, var(--mood-accent) 28%, var(--ls-surface-sunken)) 100%
  );
  box-shadow:
    0 6px 20px color-mix(in oklch, var(--mood-accent) 16%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--ls-ink-inverse) 12%, transparent);
}

.mood-picker-btn[aria-pressed="true"] [data-mood-label] {
  color: var(--mood-accent);
  font-weight: 600;
}

.mood-picker-wrap .mood-picker-card.ring-2 .mood-eq-slider {
  background: color-mix(in oklch, var(--mood-accent) 8%, var(--ls-mood-eq-track-bg));
  border-top-color: color-mix(in oklch, var(--mood-accent) 32%, var(--ls-mood-eq-track-border));
}

.mood-picker-wrap .mood-picker-card.ring-2 .mood-eq-slider:active {
  background: var(--ls-mood-eq-track-active);
}

/* ===== HITL coupon draft ===== */
#chat-coupon-dock .hitl-draft-card {
  border: 1px solid var(--ls-glass-border-strong) !important;
  background: var(--ls-glass-bg) !important;
  box-shadow: var(--ls-shadow-sm);
}

#chat-coupon-dock .hitl-draft-header {
  border-bottom: 1px solid var(--ls-border-default) !important;
  color: var(--ls-brand-600);
}

#chat-coupon-dock .hitl-draft-hint {
  color: var(--ls-ink-muted);
}

#chat-coupon-dock .hitl-draft-card label {
  color: var(--ls-ink-muted);
  font-weight: 600;
}

#chat-coupon-dock .hitl-draft-card input,
#chat-coupon-dock .hitl-draft-card textarea {
  background: var(--ls-surface-sunken) !important;
  border: 1px solid var(--ls-border-strong) !important;
  color: var(--ls-ink) !important;
  border-radius: var(--ls-radius-lg);
  box-shadow: inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 6%, transparent);
}

#chat-coupon-dock .hitl-draft-card input:focus,
#chat-coupon-dock .hitl-draft-card textarea:focus {
  border-color: var(--ls-brand-500) !important;
  box-shadow:
    inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 6%, transparent),
    0 0 0 3px color-mix(in oklch, var(--ls-brand-500) 22%, transparent);
  outline: none;
}

#chat-coupon-dock .hitl-draft-actions {
  border-top: 1px solid var(--ls-border-default) !important;
}

#chat-coupon-dock .hitl-draft-actions .ls-btn--primary,
#chat-coupon-dock .hitl-draft-actions .ls-btn--confirm {
  color: var(--ls-ink-inverse) !important;
  background: linear-gradient(135deg, var(--ls-brand-500), var(--ls-brand-600)) !important;
  border: 1px solid color-mix(in oklch, var(--ls-brand-600) 45%, transparent) !important;
  box-shadow: var(--ls-shadow-brand) !important;
}

#chat-coupon-dock .hitl-draft-actions .ls-btn--primary:hover:not(:disabled),
#chat-coupon-dock .hitl-draft-actions .ls-btn--confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-700)) !important;
  box-shadow: var(--ls-shadow-glow) !important;
}

#chat-coupon-dock .hitl-draft-actions .ls-btn--ghost-rose {
  border-color: var(--ls-btn-rose-border) !important;
  background: var(--ls-btn-rose-bg) !important;
}

.mood-insight-chip {
  border-radius: var(--ls-radius-xl);
  padding: 0.85rem;
  text-align: center;
  background: var(--ls-surface-raised);
  border: 1px solid var(--ls-glass-border);
  transition: transform var(--ls-duration-normal) var(--ls-ease-smooth);
}

.mood-insight-chip:hover {
  transform: translateY(-2px);
}

/* ===== Partner mood compact ===== */
.mood-partner-compact {
  background: var(--ls-surface-raised);
  border-color: var(--ls-glass-border);
}

.mood-partner-compact__main {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
}

.mood-partner-compact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mood-partner-compact__icon .mood-partner-glyph {
  filter: drop-shadow(0 2px 6px color-mix(in oklch, var(--ls-ink) 12%, transparent));
}

.mood-partner-compact__aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-left: 0.25rem;
}

.mood-partner-compact__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ls-radius-full);
  border: 1px solid var(--ls-btn-slate-border);
  background: var(--ls-btn-slate-bg);
  color: var(--ls-btn-slate-text);
  transition:
    color var(--ls-duration-fast) ease,
    background var(--ls-duration-fast) ease,
    border-color var(--ls-duration-fast) ease,
    transform var(--ls-duration-fast) ease,
    filter var(--ls-duration-fast) ease;
}

.mood-partner-compact__refresh:hover {
  color: var(--ls-btn-brand-text);
  border-color: var(--ls-btn-brand-border);
  background: var(--ls-btn-brand-bg);
  filter: brightness(1.06);
}

.mood-partner-compact__refresh:active {
  transform: scale(0.94);
}

.mood-partner-compact__empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-surface-sunken);
  border: 1px solid var(--ls-glass-border);
  color: var(--ls-ink-subtle);
}

.mood-partner-compact__quote {
  margin: 0 1rem 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ls-radius-lg);
  background: var(--ls-surface-sunken);
  border: 1px solid var(--ls-glass-border);
  font-size: var(--ls-icon-2xs);
  font-style: italic;
  color: var(--ls-ink-muted);
}

.mood-partner-compact__ai {
  border-top: 1px solid var(--ls-glass-border);
}

.mood-partner-compact__ai-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--ls-icon-2xs);
  font-weight: 600;
  color: var(--ls-ink-muted);
  user-select: none;
  transition: background var(--ls-duration-fast) ease, color var(--ls-duration-fast) ease;
}

.mood-partner-compact__ai-summary::-webkit-details-marker {
  display: none;
}

.mood-partner-compact__ai-summary:hover {
  background: color-mix(in oklch, var(--ls-brand-500) 4%, transparent);
  color: var(--ls-brand-500);
}

.mood-partner-compact__chevron {
  color: var(--ls-ink-subtle);
  transition: transform var(--ls-duration-normal) var(--ls-ease-smooth);
}

.mood-partner-compact__ai[open] .mood-partner-compact__chevron {
  transform: rotate(180deg);
}

.mood-partner-compact__ai-body {
  padding: 0 1rem 0.875rem;
}

.mood-partner-compact__ai-text {
  margin: 0 0 0.625rem;
  font-size: var(--ls-font-sm);
  line-height: 1.55;
  color: var(--ls-ink-muted);
}

.mood-partner-compact__ai-text.chat-markdown .chat-md-p {
  margin: 0 0 0.5rem;
}

.mood-partner-compact__ai-text.chat-markdown .chat-md-p:last-child {
  margin-bottom: 0;
}

.mood-partner-compact__ai-text.chat-markdown .chat-md-strong {
  color: var(--ls-ink);
  font-weight: 600;
}

.mood-partner-compact__ai-text.chat-markdown .chat-md-ul,
.mood-partner-compact__ai-text.chat-markdown .chat-md-ol {
  margin: 0.375rem 0 0.5rem;
  padding-left: 1.125rem;
}

.mood-partner-compact__ai-text.chat-markdown .chat-md-li {
  margin-bottom: 0.25rem;
}

.mood-partner-compact__ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ls-btn-gap-sm);
  width: 100%;
  padding: var(--ls-btn-py-md) var(--ls-btn-px-sm);
  min-height: var(--ls-btn-min-h-md);
  border-radius: var(--ls-radius-full);
  border: 1px solid var(--ls-btn-brand-border);
  background: var(--ls-btn-brand-bg);
  color: var(--ls-btn-brand-text);
  font-size: var(--ls-btn-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    filter var(--ls-duration-fast) ease,
    transform var(--ls-duration-fast) ease,
    background var(--ls-duration-fast) ease,
    border-color var(--ls-duration-fast) ease;
}

.mood-partner-compact__ai-btn:hover {
  filter: brightness(1.06);
}

.mood-partner-compact__ai-btn:active {
  transform: scale(0.97);
}

.mood-trend-compact {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ls-radius-lg);
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}

.mood-trend-compact__val {
  font-size: var(--ls-text-overline);
  font-weight: 700;
  white-space: nowrap;
}

.mood-trend-compact__period {
  font-size: var(--ls-text-micro);
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

.mood-trend--up {
  color: var(--ls-success);
  background: color-mix(in oklch, var(--ls-success) 10%, transparent);
  border-color: color-mix(in oklch, var(--ls-success) 22%, transparent);
}

.mood-trend--down {
  color: var(--ls-warning);
  background: color-mix(in oklch, var(--ls-warning) 10%, transparent);
  border-color: color-mix(in oklch, var(--ls-warning) 22%, transparent);
}

.mood-trend--flat {
  color: var(--ls-ink-muted);
  background: var(--ls-surface-sunken);
  border-color: var(--ls-glass-border);
}

.mood-trend--unknown {
  color: var(--ls-ink-subtle);
  background: var(--ls-surface-sunken);
  border-color: var(--ls-glass-border);
}

/* ===== Profile ===== */
.profile-page__scroll {
  padding: var(--tab-scroll-pad-top) var(--tab-scroll-pad-x) 2rem;
}

.profile-page__header {
  background: color-mix(in oklch, var(--ls-glass-bg) 88%, transparent);
  border-bottom-color: var(--ls-glass-border);
  backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ls-glass-blur)) saturate(var(--ls-glass-saturate));
}

.profile-page__header-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.profile-page__title-block {
  flex: 1;
}

.profile-page__title {
  color: var(--ls-ink);
}

.profile-page__subtitle {
  color: var(--ls-ink-muted);
  line-height: var(--ls-leading-relaxed);
}

.profile-back-btn {
  flex-shrink: 0;
  margin-top: 0.125rem;
  transform: rotate(180deg);
}

.profile-back-btn__icon {
  width: 1rem;
  height: 1rem;
}

.profile-page__content {
  padding-top: 0.25rem;
}

.profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ls-radius-2xl);
  border: 1px solid var(--ls-glass-border);
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
}

.profile-hero__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, color-mix(in oklch, var(--ls-brand-500) 18%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 60% at 85% 100%, color-mix(in oklch, var(--ls-partner-400) 14%, transparent), transparent 55%);
}

.profile-avatar-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.profile-avatar-wrap {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--ls-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--ls-brand-100) 80%, transparent),
    color-mix(in oklch, var(--ls-partner-100) 70%, transparent)
  );
  color: var(--ls-brand-500);
}

.profile-avatar__placeholder {
  font-size: var(--ls-avatar-emoji);
  line-height: 1;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero-ring {
  box-shadow:
    0 0 0 3px var(--ls-glass-bg),
    0 0 0 5px color-mix(in oklch, var(--ls-brand-500) 35%, transparent),
    var(--ls-shadow-md);
}

.profile-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ls-radius-full);
  cursor: pointer;
  color: var(--ls-ink-inverse);
  background: linear-gradient(145deg, var(--ls-brand-500), var(--ls-brand-600));
  border: 2px solid var(--ls-glass-bg);
  box-shadow: var(--ls-shadow-brand);
  transition:
    transform var(--ls-duration-fast) var(--ls-ease-spring),
    box-shadow var(--ls-duration-normal) var(--ls-ease-smooth);
}

.profile-avatar-edit:hover {
  transform: scale(1.06);
  box-shadow: var(--ls-shadow-glow);
}

.profile-avatar-edit [data-icon] {
  width: 1rem;
  height: 1rem;
}

.profile-avatar-hint {
  margin: 0;
  font-size: var(--ls-font-xs);
  color: var(--ls-ink-muted);
}

.profile-avatar-remove {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--ls-font-xs);
  font-weight: 600;
  color: var(--ls-brand-600);
  cursor: pointer;
  transition: color var(--ls-duration-fast) ease;
}

.profile-avatar-remove:hover {
  color: var(--ls-brand-700);
}

.profile-form-card,
.profile-partner-card {
  border-radius: var(--ls-radius-2xl);
  border: 1px solid var(--ls-glass-border);
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .profile-form-card,
  .profile-partner-card {
    padding: 1.5rem;
  }
}

.profile-section-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ls-border-default);
}

.profile-section-head__icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ls-brand-500);
}

.profile-section-head__icon--partner {
  color: var(--ls-partner-500);
}

.profile-section-title {
  margin: 0;
  font-family: Montserrat, "Plus Jakarta Sans", sans-serif;
  font-size: var(--ls-font-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ls-ink);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.profile-field__label {
  display: block;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--ls-font-xs);
  font-weight: 600;
  color: var(--ls-ink-muted);
  line-height: var(--ls-leading-normal);
}

.profile-field__input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.875rem 1.125rem !important;
  line-height: 1.45;
  font-weight: 500;
  background: var(--ls-surface-sunken) !important;
  border: 1.5px solid var(--ls-border-strong) !important;
  box-shadow: inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 4%, transparent);
}

.profile-field__input::placeholder {
  color: var(--ls-ink-subtle);
  font-weight: 400;
  opacity: 1;
}

.profile-field__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.profile-field__input[type="number"]::-webkit-outer-spin-button,
.profile-field__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.profile-form .ls-select__trigger {
  padding: 0.875rem 1rem 0.875rem 1.125rem !important;
  min-height: 3rem;
  border: 1.5px solid var(--ls-border-strong) !important;
}

.profile-field__select {
  z-index: 2;
}

.profile-field__select.ls-select.is-open,
.profile-field__select.is-open {
  z-index: 40;
}

.profile-field__select .ls-select__menu {
  border-radius: var(--ls-radius-2xl);
}

.profile-field__input:focus {
  border-color: var(--ls-brand-500) !important;
  box-shadow:
    inset 0 1px 2px color-mix(in oklch, var(--ls-ink) 5%, transparent),
    0 0 0 3px color-mix(in oklch, var(--ls-brand-500) 20%, transparent);
}

.profile-field__input--readonly {
  background: var(--ls-input-readonly-bg) !important;
  border-color: var(--ls-border-default) !important;
  box-shadow: none;
  color: var(--ls-ink-muted);
}

.profile-field__hint {
  margin: 0;
  font-size: var(--ls-text-overline);
  line-height: var(--ls-leading-relaxed);
  color: var(--ls-ink-subtle);
}

.profile-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Однаковий розмір контролів «Вік» та «Стать» */
.profile-field-grid {
  --profile-control-h: 3rem;
  --profile-control-px: 1.125rem;
}

.profile-field-grid .profile-field {
  min-width: 0;
}

.profile-field-grid .profile-field__input,
.profile-field-grid .ls-select__trigger {
  height: var(--profile-control-h);
  min-height: var(--profile-control-h);
  max-height: var(--profile-control-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: var(--profile-control-px) !important;
  padding-right: var(--profile-control-px) !important;
  font-size: var(--ls-font-sm);
  font-weight: 500;
  line-height: 1.25;
  border-width: 1.5px !important;
  border-radius: var(--ls-radius-xl);
  box-sizing: border-box;
}

.profile-field-grid .profile-field__input {
  display: block;
  width: 100%;
}

.profile-field-grid .ls-select,
.profile-field-grid .profile-field__select {
  width: 100%;
  min-width: 0;
}

.profile-field-grid .ls-select__trigger {
  display: flex;
  align-items: center;
  padding-right: 0.625rem !important;
}

.profile-field-grid .ls-select__chevron-wrap {
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
}

.profile-field-grid .ls-select__value {
  line-height: 1.25;
}

@media (max-width: 420px) {
  .profile-field-grid {
    grid-template-columns: 1fr;
  }
}

.profile-save-btn {
  margin-top: 0.25rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ls-ink-inverse) !important;
  background: linear-gradient(135deg, var(--ls-brand-500), var(--ls-brand-600)) !important;
  border: 1px solid color-mix(in oklch, var(--ls-brand-600) 45%, transparent) !important;
  box-shadow: var(--ls-shadow-brand) !important;
}

.profile-save-btn .ls-btn__label,
.profile-save-btn [data-icon] {
  color: inherit !important;
}

.profile-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-700)) !important;
  box-shadow: var(--ls-shadow-glow) !important;
  filter: none !important;
}

.profile-partner-card__text {
  margin: 0 0 1rem;
  font-size: var(--ls-font-sm);
  line-height: var(--ls-leading-relaxed);
  color: var(--ls-ink-muted);
}

.profile-partner-card__name {
  color: var(--ls-ink);
  font-weight: 700;
}

.profile-partner-card__action {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ===== Page transitions ===== */
.tab-content-enter {
  animation: ls-fade-in-up 0.4s var(--ls-ease-spring-soft) forwards;
}

.ls-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--ls-surface-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.ls-skeleton-overlay[hidden] {
  display: none !important;
}

/* ===== Tab section headers (scroll with content) ===== */
.dash-scroll,
.wishes-scroll-area,
.mobile-tab-scroll,
#chat-messages-container {
  --tab-scroll-pad-x: 1rem;
  --tab-scroll-pad-top: 1rem;
}

@media (min-width: 640px) {
  .dash-scroll,
  .wishes-scroll-area,
  .mobile-tab-scroll,
  #chat-messages-container {
    --tab-scroll-pad-x: 1.5rem;
    --tab-scroll-pad-top: 1.5rem;
  }
}

.tab-section-header {
  margin: calc(-1 * var(--tab-scroll-pad-top)) calc(-1 * var(--tab-scroll-pad-x)) 1rem;
  padding: var(--tab-scroll-pad-top) var(--tab-scroll-pad-x) 1rem;
  border-bottom: 1px solid var(--ls-glass-border);
  background: color-mix(in oklch, var(--ls-glass-bg) 72%, transparent);
}

.tab-section-header--chat {
  margin-bottom: 0.75rem;
}

#tab-chat .tab-section-header .chat-concierge-avatar [data-icon] {
  font-size: 1.25rem;
  color: var(--ls-brand-500);
}

#tab-chat .tab-section-header .chat-concierge-avatar [data-icon] svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tab-section-subheader {
  margin: -0.75rem calc(-1 * var(--tab-scroll-pad-x)) 1rem;
  padding: 0.625rem var(--tab-scroll-pad-x);
  border-bottom: 1px solid var(--ls-glass-border);
}

#tab-chat #chat-partner-context {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#tab-chat #chat-partner-status {
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* ===== A11y ===== */
.wishes-tab-btn:focus-visible,
.dash-quick-btn:focus-visible,
.chat-quick-chip:focus-visible,
.wish-status-chip.chat-quick-chip:focus-visible,
button.wish-status-chip:focus-visible {
  outline: 2px solid var(--ls-brand-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tab-content-enter,
  .wishes-tab-panel,
  .dash-bento-hero {
    animation: none !important;
  }
}


/* === src/styles/components/charts.css === */
/**
 * LoveSync — графіки, фільтри періоду, легенда настрою, активні натяки
 * Кольори через CSS-токени — працює в dark / glass
 */

.mood-legend-dot--me {
  background: var(--ls-chart-me);
}

.mood-legend-dot--partner {
  background: var(--ls-chart-partner);
}

/* ——— Область графіка ——— */
#mood-chart-wrap {
  overflow: hidden;
  background: var(--ls-chart-wrap-bg);
  border-color: var(--ls-chart-wrap-border, var(--ls-border-default));
}

#mood-chart-empty {
  background: var(--ls-surface-sunken);
  border-color: var(--ls-border-default);
}

#mood-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

.mood-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
}

@media (min-width: 640px) {
  .mood-chart-legend {
    justify-content: flex-start;
  }
}

.mood-legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--ls-radius-full);
  border: 1px solid transparent;
  font-size: var(--ls-btn-font-xs);
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
  user-select: none;
}

.mood-legend-btn:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ls-brand-500) 50%, transparent);
  outline-offset: 2px;
}

.mood-legend-btn:hover {
  filter: brightness(1.08);
}

.mood-legend-dot--dim {
  opacity: 0.35;
}

.mood-legend-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
}

.mood-legend-text--muted {
  opacity: 0.75;
}

.mood-legend-name {
  font-weight: 600;
}

.mood-legend-meta {
  font-size: var(--ls-text-micro);
  opacity: 0.85;
  color: inherit;
}

@media (max-width: 639px) {
  .mood-legend-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    justify-content: center;
  }

  .mood-legend-text {
    align-items: center;
    text-align: center;
  }
}

/* ——— Фільтри періоду (7 / 14 / 30 дн.) ——— */
.chart-filter-group {
  background: var(--ls-filter-bg) !important;
  border-color: var(--ls-border-default) !important;
}

.mood-days-btn {
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--ls-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.mood-days-btn--idle {
  color: var(--ls-filter-fg);
  border: 1px solid transparent;
}

.mood-days-btn--idle:hover {
  color: var(--ls-ink);
  background: oklch(0.55 0.02 40 / 0.06);
}

.mood-days-btn--active {
  color: var(--ls-filter-fg-active);
  background: var(--ls-filter-active-bg);
  border: 1px solid var(--ls-filter-active-border);
  box-shadow: var(--ls-shadow-sm);
}

/* ——— Легенда графіка настрою ——— */
.mood-legend-btn--me.mood-legend-btn--on {
  background: oklch(0.52 0.2 15 / 0.1);
  border-color: oklch(0.52 0.2 15 / 0.28);
  color: var(--ls-legend-me-fg);
}

.mood-legend-btn--partner.mood-legend-btn--on {
  background: oklch(0.54 0.17 295 / 0.1);
  border-color: oklch(0.54 0.17 295 / 0.28);
  color: var(--ls-legend-partner-fg);
}

.mood-legend-btn--off {
  background: var(--ls-legend-off-bg);
  border-color: var(--ls-border-default);
  color: var(--ls-ink-subtle);
  opacity: 1;
}

.mood-legend-btn--off .mood-legend-name {
  text-decoration: line-through;
  text-decoration-color: var(--ls-ink-subtle);
}

.mood-legend-dot {
  box-shadow: 0 0 0 2px var(--ls-chart-point-border);
}

/* ——— Перемикач timeline (Я / Партнер) ——— */
.mood-timeline-toggle {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 0.875rem;
  gap: 0.125rem;
  background: var(--ls-filter-bg);
  border: 1px solid var(--ls-border-default);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04);
}

.mood-timeline-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--ls-radius-full);
  border: 1px solid transparent;
  font-size: var(--ls-btn-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  color: var(--ls-filter-fg);
}

.mood-timeline-toggle-btn:hover {
  color: var(--ls-ink);
}

.mood-timeline-toggle-btn[aria-pressed='true'] {
  color: var(--ls-btn-brand-text);
  background: var(--ls-btn-brand-bg);
  border-color: var(--ls-btn-brand-border);
  box-shadow: none;
}

.mood-timeline-toggle-btn[data-who='partner'][aria-pressed='true'] {
  color: var(--ls-partner-400);
  background: oklch(0.54 0.17 295 / 0.1);
  border-color: oklch(0.54 0.17 295 / 0.28);
  box-shadow: none;
}

.mood-timeline-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--ls-radius-full);
  font-size: var(--ls-btn-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ls-btn-slate-text);
  background: var(--ls-btn-slate-bg);
  border: 1px solid var(--ls-btn-slate-border);
  transition:
    filter 0.2s ease,
    transform 0.15s ease,
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.mood-timeline-more-btn:hover:not(:disabled) {
  color: var(--ls-btn-brand-text);
  background: var(--ls-btn-brand-bg);
  border-color: var(--ls-btn-brand-border);
  filter: brightness(1.06);
}

.mood-timeline-more-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.mood-timeline-more-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ——— Timeline: точка по центру картки ——— */
.mood-timeline-rail {
  position: relative;
  display: flex;
  width: 1.5rem;
  flex-shrink: 0;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

.mood-timeline-rail__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    oklch(1 0 0 / 0.14),
    oklch(1 0 0 / 0.06) 55%,
    transparent
  );
  pointer-events: none;
}

.mood-timeline-rail__dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

#mood-timeline-list .mood-timeline-item:last-child .mood-timeline-rail__line {
  bottom: 50%;
}

/* ——— Дашборд: AI-аналіз (markdown-текст) ——— */
.dash-ai-insights {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.dash-ai-insights__head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dash-ai-insights__head [data-icon] {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ls-brand-400);
  opacity: 0.95;
}

.dash-ai-insights__title {
  font-family: Montserrat, "Plus Jakarta Sans", sans-serif;
  font-size: var(--ls-text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-brand-400);
}

.dash-ai-insights__body {
  position: relative;
  padding: 0.75rem 0.875rem 0.8125rem 1rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-dash-ai-bg);
  border: 1px solid var(--ls-dash-ai-border);
  box-shadow: var(--ls-dash-ai-shadow);
  font-size: var(--ls-font-sm);
  line-height: var(--ls-leading-relaxed);
  letter-spacing: 0.01em;
  color: var(--ls-dash-ai-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dash-ai-insights__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--ls-dash-ai-accent);
  opacity: 0.8;
}

.dash-ai-insights__body.chat-markdown .chat-md-p {
  margin: 0 0 0.55rem;
}

.dash-ai-insights__body.chat-markdown .chat-md-p:last-child {
  margin-bottom: 0;
}

.dash-ai-insights__body.chat-markdown .chat-md-strong {
  font-weight: 600;
  color: var(--ls-dash-ai-strong);
}

.dash-ai-insights__body.chat-markdown .chat-md-ul,
.dash-ai-insights__body.chat-markdown .chat-md-ol {
  margin: 0.45rem 0 0;
  padding-left: 0;
  list-style: none;
}

.dash-ai-insights__body.chat-markdown .chat-md-ul .chat-md-li {
  position: relative;
  margin: 0.35rem 0;
  padding-left: 1rem;
}

.dash-ai-insights__body.chat-markdown .chat-md-ul .chat-md-li::before {
  content: "♥";
  position: absolute;
  left: 0;
  top: 0.12em;
  font-size: var(--ls-text-micro);
  line-height: 1;
  color: var(--ls-brand-400);
  opacity: 0.85;
}

.dash-ai-insights__body.chat-markdown .chat-md-ol {
  padding-left: 1.15rem;
  list-style: decimal;
}

.dash-ai-insights__body.chat-markdown .chat-md-ol .chat-md-li {
  margin: 0.3rem 0;
  padding-left: 0.15rem;
}

.dash-ai-insights__body.chat-markdown .chat-md-ol .chat-md-li::marker {
  color: var(--ls-brand-400);
  font-weight: 600;
}

.dash-ai-insights__placeholder {
  margin: 0;
  font-size: var(--ls-font-sm);
  line-height: var(--ls-leading-relaxed);
  color: var(--ls-ink-subtle);
}

.dash-ai-insights__loading {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-dash-ai-loading-bg);
  border: 1px dashed var(--ls-dash-ai-loading-border);
  font-size: var(--ls-font-sm);
  line-height: var(--ls-leading-relaxed);
  color: var(--ls-ink-subtle);
  animation: pulse 1.6s ease-in-out infinite;
}

.dash-ai-insights--error .dash-ai-insights__placeholder {
  padding: 0.75rem 0.875rem;
  border-radius: var(--ls-radius-xl);
  background: var(--ls-dash-ai-loading-bg);
  border: 1px dashed oklch(0.72 0.14 55 / 0.28);
  color: oklch(0.58 0.16 25);
  font-size: var(--ls-font-sm);
}

/* ——— Активні натяки (вкладка «Активні») ——— */
.wishes-active-heading {
  color: var(--ls-wishes-active-heading);
}

.wishes-active-sub {
  color: var(--ls-ink-muted);
}

.wishes-active-item {
  border-radius: 0.75rem;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
  background: var(--ls-wishes-active-bg);
  border: 1px solid var(--ls-wishes-active-border);
}

.wishes-active-item__body {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
}

.wishes-active-item__content {
  min-width: 0;
  flex: 1 1 auto;
}

.wishes-active-item__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .wishes-active-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .wishes-active-item__body {
    flex: 1 1 auto;
    width: auto;
  }

  .wishes-active-item__actions {
    width: auto;
    flex-shrink: 0;
  }
}

.wishes-active-item__icon {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ls-wishes-active-icon-bg);
  border: 1px solid var(--ls-wishes-active-icon-border);
  box-shadow: var(--ls-shadow-sm);
}

.wishes-active-item__icon [data-icon] {
  font-size: var(--ls-text-title-sm);
  line-height: 1;
}

.wishes-active-hint {
  font-size: var(--ls-btn-font-xs);
  margin-top: 0.5rem;
  line-height: 1.625;
  color: var(--ls-wishes-active-hint);
}

.wishes-active-hint--confirm {
  color: var(--ls-wishes-active-hint-confirm);
}

.wishes-history-item {
  border-color: var(--ls-wishes-active-border);
}

/* ——— Вхідні натяки: паралакс-увага замість мигання ——— */
@keyframes wish-incoming-parallax {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.15deg);
    box-shadow: var(--ls-wish-attention-shadow);
  }
  33% {
    transform: translate3d(2px, -3px, 0) rotate(0.12deg);
    box-shadow: var(--ls-wish-attention-shadow-mid);
  }
  66% {
    transform: translate3d(-2px, -1px, 0) rotate(-0.08deg);
    box-shadow: var(--ls-wish-attention-shadow);
  }
}

@keyframes wish-incoming-shimmer {
  0%,
  100% {
    transform: translate3d(-35%, -8%, 0);
    opacity: 0.45;
  }
  50% {
    transform: translate3d(35%, 8%, 0);
    opacity: 0.85;
  }
}

@keyframes wish-title-sway {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-2px) rotate(-5deg);
  }
  70% {
    transform: translateY(1px) rotate(4deg);
  }
}

.wish-incoming-attention {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: wish-incoming-parallax 5.5s ease-in-out infinite;
  will-change: transform;
}

.wish-incoming-attention::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(
    118deg,
    transparent 34%,
    oklch(0.58 0.22 15 / 0.07) 44%,
    oklch(0.78 0.14 85 / 0.05) 50%,
    oklch(0.58 0.22 15 / 0.07) 56%,
    transparent 66%
  );
  animation: wish-incoming-shimmer 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.wish-incoming-attention > * {
  position: relative;
  z-index: 1;
}

.wish-incoming-attention--urgent {
  animation-duration: 4s;
}

.wish-incoming-attention--urgent::before {
  animation-duration: 5s;
  background: linear-gradient(
    118deg,
    transparent 32%,
    oklch(0.72 0.14 78 / 0.1) 44%,
    oklch(0.58 0.22 15 / 0.08) 50%,
    oklch(0.72 0.14 78 / 0.1) 56%,
    transparent 68%
  );
}

.wish-incoming-title-icon {
  display: inline-flex;
  animation: wish-title-sway 3.8s ease-in-out infinite;
}

.wish-status-snoozed {
  color: var(--ls-wish-snooze-text) !important;
  background: var(--ls-wish-snooze-bg) !important;
  border-color: var(--ls-wish-snooze-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  .wish-incoming-attention,
  .wish-incoming-attention::before,
  .wish-incoming-title-icon {
    animation: none !important;
  }

  .wish-incoming-attention {
    box-shadow: var(--ls-wish-attention-shadow);
  }
}

#tab-dashboard .dash-wishes-chart-wrap {
  position: relative;
}

#tab-dashboard .dash-wishes-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding-bottom: 1.75rem;
}

#tab-dashboard .dash-wishes-center.hidden {
  display: none !important;
}

#tab-dashboard .dash-wishes-center [data-wishes-total] {
  font-size: var(--ls-icon-nav);
  font-weight: 700;
  color: var(--ls-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#tab-dashboard .dash-wishes-center [data-wishes-label] {
  font-size: var(--ls-text-caption);
  color: var(--ls-ink-muted);
  margin-top: 0.125rem;
}

.wishes-confirm-heading {
  color: var(--ls-wishes-confirm-heading);
}


/* === src/styles/components/notifications.css === */
/**
 * LoveSync — панель сповіщень (активні дії)
 */

#notifications-panel {
  animation: fadeInDown 0.2s ease-out forwards;
  background: var(--ls-notifications-panel-bg);
  border-color: var(--ls-notifications-panel-border);
  backdrop-filter: blur(var(--ls-glass-blur));
  -webkit-backdrop-filter: blur(var(--ls-glass-blur));
  box-shadow: var(--ls-notifications-panel-shadow);
  color: var(--ls-ink);
}

#notifications-panel .notifications-panel-header {
  background: var(--ls-notifications-header-bg);
  border-color: var(--ls-border-default);
}

.notifications-panel-title {
  color: var(--ls-ink);
}

.notifications-panel-close {
  color: var(--ls-ink-muted);
}

.notifications-panel-close:hover {
  color: var(--ls-ink);
  background: oklch(0.55 0.02 40 / 0.07);
}

#notifications-backdrop {
  animation: fadeIn 0.15s ease-out forwards;
  background: var(--ls-notifications-backdrop);
}

.notification-item {
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.notification-item:hover {
  background: var(--ls-notifications-item-hover);
}

.notification-item:active {
  transform: scale(0.98);
}

.notification-group-label {
  background: var(--ls-notifications-group-bg);
  border-radius: 0.5rem;
  color: var(--ls-ink-muted);
}

#notifications-list .notification-item .text-slate-100 {
  color: var(--ls-ink);
}

#notifications-list .notification-item .text-slate-400 {
  color: var(--ls-ink-muted);
}

#notifications-list .text-slate-400,
#notifications-list .text-slate-500,
#notifications-list .text-slate-600 {
  color: var(--ls-ink-muted);
}

#notifications-list .text-slate-500 {
  color: var(--ls-ink-subtle);
}

.notifications-badge {
  z-index: 2;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: var(--ls-radius-full);
  background: var(--ls-notifications-badge-bg, linear-gradient(145deg, var(--ls-brand-500), var(--ls-brand-600))) !important;
  color: var(--ls-notifications-badge-fg, var(--ls-ink-inverse)) !important;
  border: 2px solid var(--ls-notifications-badge-ring, var(--ls-ink-inverse)) !important;
  box-shadow: var(--ls-notifications-badge-shadow, var(--ls-shadow-glow));
  font-size: var(--ls-text-caption);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

[data-theme="glass"] .notifications-badge {
  border-color: var(--ls-notifications-badge-ring) !important;
  box-shadow: var(--ls-notifications-badge-shadow);
}


/* === src/styles/components/toast.css === */
/**
 * LoveSync — push / toast сповіщення
 */

.ls-toast {
  background: var(--ls-toast-bg);
  border: 1px solid var(--ls-toast-border);
  box-shadow: var(--ls-toast-shadow);
  color: var(--ls-toast-fg);
  backdrop-filter: blur(var(--ls-glass-blur));
  -webkit-backdrop-filter: blur(var(--ls-glass-blur));
}

.ls-toast__icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: var(--ls-font-md);
  color: var(--ls-toast-icon);
}

.ls-toast__title {
  font-size: var(--ls-icon-2xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ls-toast-title);
}

.ls-toast__text {
  font-size: var(--ls-text-caption);
  margin-top: 0.125rem;
  line-height: 1.625;
  color: var(--ls-toast-muted);
}

.ls-toast--success {
  --ls-toast-bg: oklch(0.16 0.04 155 / 0.92);
  --ls-toast-border: oklch(0.52 0.14 155 / 0.35);
  --ls-toast-icon: oklch(0.7 0.14 155);
  --ls-toast-title: oklch(0.95 0.01 155);
  --ls-toast-muted: oklch(0.82 0.04 155);
  --ls-toast-fg: oklch(0.95 0.01 155);
  --ls-toast-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
}

.ls-toast--danger {
  --ls-toast-bg: oklch(0.18 0.05 25 / 0.92);
  --ls-toast-border: oklch(0.55 0.2 25 / 0.35);
  --ls-toast-icon: oklch(0.72 0.18 25);
  --ls-toast-title: oklch(0.96 0.01 25);
  --ls-toast-muted: oklch(0.84 0.04 25);
  --ls-toast-fg: oklch(0.96 0.01 25);
  --ls-toast-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
}

.ls-toast--info {
  --ls-toast-bg: oklch(0.16 0.025 265 / 0.94);
  --ls-toast-border: oklch(1 0 0 / 0.1);
  --ls-toast-icon: oklch(0.68 0.2 15);
  --ls-toast-title: oklch(0.95 0.01 270);
  --ls-toast-muted: oklch(0.78 0.02 265);
  --ls-toast-fg: oklch(0.95 0.01 270);
  --ls-toast-shadow: 0 12px 32px oklch(0 0 0 / 0.4);
}

[data-theme='glass'] .ls-toast--success {
  --ls-toast-bg: oklch(0.975 0.018 155 / 0.98);
  --ls-toast-border: oklch(0.52 0.14 155 / 0.28);
  --ls-toast-icon: oklch(0.42 0.13 155);
  --ls-toast-title: oklch(0.28 0.04 155);
  --ls-toast-muted: oklch(0.42 0.06 155);
  --ls-toast-fg: oklch(0.28 0.03 30);
  --ls-toast-shadow: var(--ls-shadow-lg);
}

[data-theme='glass'] .ls-toast--danger {
  --ls-toast-bg: oklch(0.98 0.015 25 / 0.98);
  --ls-toast-border: oklch(0.52 0.2 25 / 0.26);
  --ls-toast-icon: oklch(0.46 0.19 12);
  --ls-toast-title: oklch(0.32 0.06 25);
  --ls-toast-muted: oklch(0.44 0.08 25);
  --ls-toast-fg: oklch(0.28 0.03 30);
  --ls-toast-shadow: var(--ls-shadow-lg);
}

[data-theme='glass'] .ls-toast--info {
  --ls-toast-bg: oklch(0.992 0.006 92 / 0.98);
  --ls-toast-border: oklch(0.55 0.02 40 / 0.14);
  --ls-toast-icon: oklch(0.46 0.19 12);
  --ls-toast-title: var(--ls-ink);
  --ls-toast-muted: var(--ls-ink-muted);
  --ls-toast-fg: var(--ls-ink);
  --ls-toast-shadow: var(--ls-shadow-lg);
}

/* Чернетка сертифіката: toasts внизу, щоб не перекривати 🎲 «Інший» */
#toast-container.toast-container--bottom {
  top: auto;
  bottom: max(5.5rem, calc(var(--mobile-nav-height, 4.25rem) + var(--safe-bottom, 0px) + 1rem));
  left: 1rem;
  right: 1rem;
  flex-direction: column-reverse;
}

@media (min-width: 640px) {
  #toast-container.toast-container--bottom {
    left: 1.25rem;
    right: auto;
    max-width: 22rem;
  }
}

@keyframes coupon-dice-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 oklch(0.55 0.2 15 / 0.35);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px oklch(0.55 0.2 15 / 0);
  }
}

#chat-coupon-dock button.coupon-dice-pulse {
  animation: coupon-dice-pulse 0.55s ease-out;
}