/* ABOUTME: Main stylesheet defining design tokens, layout, and global styles */

/* ABOUTME: Defines global foundations; layouts load feature stylesheets explicitly */

/*
 * Application-wide styles for Yafa - AI Fitness Tracker
 * Design system based on mockup-10 (Clean Evolution)
 */

/* CSS Variables - Design Tokens from mockup-10 */
:root {
  /* ========== Core Brand Colors ========== */

  /* Sharpened Cream (Jul 2026): same hue, half a stop deeper, so orange holds
     its own as text and accents instead of washing out on the cream. */
  --orange: #E06428;
  --orange-light: #FBE9DA;
  --orange-600: #ca5a24;

  /* Legacy aliases */
  --yafa-orange: var(--orange);
  --yafa-orange-600: var(--orange-600);

  /* ========== Semantic Colors ========== */
  --green: #34A853;
  --green-light: #E6F4EA;
  --red: #EA4335;
  --red-light: #FCE8E6;
  --yellow: #FBBC04;
  --yellow-light: #FEF7E0;
  --purple: #8b5cf6;
  --purple-light: #f3e8ff;
  --blue: #4285f4;
  --blue-light: #e8f0fe;
  --indigo: #6366f1;
  --indigo-light: #e0e7ff;
  --teal: #14b8a6;
  --teal-light: #ccfbf1;
  --cyan: #06b6d4;
  --cyan-light: #cffafe;
  --amber: #f59e0b;
  --amber-light: #fef3c7;

  /* ========== Surface & Background (Warm Editorial design system) ========== */

  /* Sharpened Cream (Jul 2026): every value half a stop deeper than the Jun
     warm retune. The hues are unchanged - the fix is contrast: sub-text was
     2.8:1 on the cream, hairlines 1.3:1; these land ~3.7:1 and ~1.4:1 with
     the cards visibly lifting off the deeper ground. */
  --bg: #F3EBDD;        /* cream canvas (was #F6F0E7) */
  --surface: #FFFEFB;   /* warm paper card (was #FFFDFA) */
  --border: #D6C4A6;    /* warm rule, firm enough to actually see (was #E0D3BF) */

  /* ========== Typography Colors ========== */
  --text: #251E19;            /* warm ink (was #2A2320) */
  --text-secondary: #544639;  /* warm secondary (was #5D5148) */
  --text-muted: #857767;      /* warm muted, now legible at caption sizes (was #9A8E82) */

  /* ========== Typography Scale ========== */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* ========== Font Weights ========== */
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ========== Transitions ========== */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

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

  /* ========== Border Radius ========== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ========== Shadows & Elevation ==========
     The legacy names (--shadow-*, --elev-*) are defined further down as
     aliases onto the warm two-light --e1..e4 ramp. */

  /* ========== Legacy Gray Scale — retuned WARM (Jun 2026) ==========
     Same lightness ramp, warm hue, so the hundreds of var(--gray-N) refs across
     surfaces warm up with the design system instead of clashing cool on cream. */
  --gray-50: #FAF6EF;
  --gray-100: #F3ECE0;
  --gray-200: #E7DCCB;
  --gray-300: #D6C9B6;
  --gray-400: #AEA291;
  --gray-500: #8A7E72;
  --gray-600: #6B5F56;
  --gray-700: #50473F;
  --gray-800: #332B25;
  --gray-900: #221B15;

  /* ========== "Primary" — retuned to the BRAND ORANGE ramp (was cool blue) ==========
     The old design's primary accent was blue; in Warm Editorial the primary IS
     the brand orange, so every var(--primary-N) accent now reads on-brand. */
  --primary-50: #FBE9DA;
  --primary-100: #F8DFCE;
  --primary-200: #F2C2A0;
  --primary-300: #ECA173;
  --primary-400: #E6824C;
  --primary-500: #E06428;
  --primary-600: #CA5A24;
  --primary-700: #9E3A1B;
  --primary-800: #823016;
  --primary-900: #652511;
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: var(--green);
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-500: var(--red);
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --warning-500: var(--yellow);
  --warning-600: #d97706;
  --warning-700: #b45309;

  /* ========== Workout Block Type Colors ========== */

  /* Default block header: warm espresso (was cool slate #3d6a8f) — structure stays
     quiet so orange remains the action color; white text ≈ 10:1 on both stops. */
  --block-default-from: #43362C;
  --block-default-to: #322821;
  --block-emom-from: #2a9d8f;
  --block-emom-to: #1a7a6e;
  --block-amrap-from: #c4392a;
  --block-amrap-to: #a82e20;

  /* ===== Apple-native polish (Editorial Native) — Jun 8 2026 ===== */

  /* Native font stacks: true SF Pro on Apple/WKWebView, Manrope as fallback */
  --font-ui: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro", manrope, system-ui, "Segoe UI", roboto, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", palatino, georgia, serif;
  --font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, monaco, monospace;
  --font-sans: var(--font-ui); /* the tab bar already references var(--font-sans) */

  /* Semantic type rhythm */
  --type-eyebrow-size: 11px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-track: 0.07em;

  /* Continuous-feel radius additions (no base-ramp mutation) */
  --radius-card: 32px;
  --radius-2xl: 36px;

  /* Hairline divider (internal rules only) */
  --hairline: color-mix(in srgb, var(--border) 70%, transparent);

  /* One material vocabulary, promoted from the tab bar's proven recipe */
  --material-surface: color-mix(in srgb, var(--surface) 72%, transparent);
  --material-blur: saturate(180%) blur(20px);

  /* Specular top edge — the "lit tile" tell */
  --specular: inset 0 1px 0 rgb(255 255 255 / 60%);

  /* Two-light elevation (ambient contact + soft key spread), warm-ink-tinted (not black).
     e1/e2 are deliberately tight: a big blurry key light on every tile reads
     soft-and-fuzzy; resting surfaces get a crisp contact shadow instead. */
  --e1: 0 1px 1px rgb(42 35 32 / 14%), 0 3px 10px -5px rgb(42 35 32 / 16%);
  --e2: 0 1px 2px rgb(42 35 32 / 14%), 0 8px 18px -8px rgb(42 35 32 / 20%);
  --e3: 0 6px 14px rgb(42 35 32 / 11%), 0 32px 60px -14px rgb(42 35 32 / 44%);
  --e4: 0 12px 28px rgb(42 35 32 / 14%), 0 52px 88px -20px rgb(42 35 32 / 54%);

  /* Alias the legacy shadow names onto the ramp = app-wide depth, zero per-component edits */
  --shadow-sm: var(--e1);
  --shadow: var(--e1);
  --shadow-md: var(--e2);
  --shadow-lg: var(--e3);
  --elev-1: var(--e1);
  --elev-2: var(--e2);

  /* Motion: gentle iOS spring (no overshoot) */
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-press: 0.18s;

  /* Warm-editorial aliases + washes — at :root so the shared design-system
     primitives render the warm editorial look on ANY page.
     cream/paper/ink/rule alias the existing semantic tokens (single source); washes are NEW. */
  --cream: var(--bg);            /* #F6F0E7 */
  --paper: var(--surface);       /* #FFFDFA */
  --paper-2: #F9F0E1;
  --ink: var(--text);            /* #251E19 */
  --ink-soft: var(--text-secondary);
  --ink-faint: var(--text-muted);
  --rule: var(--border);
  --accent-ink: #9E3A1B;
  --accent-wash: #F8DFCE;
  --sage: #4A6B45;  --sage-wash: #DFE9D8;
  --violet: #675CA0; --violet-wash: #E3DFF2;
  --blue-wash: #DAE7F0;          /* NEW wash; do NOT touch the cool --blue token */
  --steel: #486E8C;              /* warm-leaning ink partner for --blue-wash */
  --gold: #85671F;   --gold-wash: #EFE0BD; /* Body Metrics identity hue */
  --radius-tile: 22px;           /* on-language card radius (NOT --radius-card 32px) */
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

/* Native shell only: a press-and-hold on the UI should feel native, not web -
   no stray text selection or iOS callout (Copy / Look Up). Desktop web keeps
   normal selection everywhere, so admin/debug text stays copyable. The prefixed
   property is required - iOS WebKit ignores unprefixed user-select here. */
body.native-app {
  -webkit-touch-callout: none;
  -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
  user-select: none;
}

/* ...but keep selection and the native edit menu where users actually copy or
   edit: message text, form fields, and rich-text editors (the chat composer is
   contenteditable). Restore the callout too - the inherited touch-callout: none
   would otherwise suppress the Copy / Paste / Look Up menu right here. */
body.native-app :is(
  .chatroom-message-content,
  .message-content,
  pre,
  code,
  input,
  textarea,
  select,
  [contenteditable="true"]
) {
  -webkit-touch-callout: default;
  -webkit-user-select: text; /* stylelint-disable-line property-no-vendor-prefix */
  user-select: text;
}

/* These chat elements carry their own long-press UI (reactor list, profile
   card, image lightbox), so the native selection/callout must never fire on
   them - on the native shell AND on mobile web, where the body rule above does
   not apply. None hold copyable content, so suppressing them everywhere is safe
   and keeps the gestures working for browser users too. */
.chatroom-reaction-btn,
.chatroom-message-avatar,
.chatroom-message-author,
.chatroom-message-image-link,
.chatroom-message-image {
  -webkit-touch-callout: none;
  -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
  user-select: none;
}

/* Turbo's stream-source elements are non-visual, but as flex items they
   consume a gap slot (e.g. phantom space between nav icons) */
turbo-cable-stream-source {
  display: none;
}

/* Yafa wordmark styling */
.yafa-wordmark {
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}

h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}

h2, h3 { letter-spacing: -0.018em; }

h2 {
  font-size: 1.375rem;
}

/* ===== Apple-native polish globals (Jun 8 2026) ===== */

/* Tabular + SF straight-sided digits on stat/number surfaces (progressive enhancement). */
[data-align="num"], .table-unit,
.editable-field-value, .straight-sets-field,
.timer-display, .workout-metadata-stat strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

.card { border-radius: var(--radius-card); box-shadow: var(--specular), var(--e1); }

/* Buttons: gentle spring press + elevation-coupled hover (no color change) */
.btn {
  transition: transform var(--transition-press) var(--ease-spring),
              background .15s var(--ease-out),
              box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.btn-primary:hover { box-shadow: var(--e2); }

.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-success:active:not(:disabled) { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .workout-block-card:hover {
    transition: none !important;
    transform: none !important;
  }
}

h3 {
  font-size: 1.125rem;
}

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--primary-700);
}

/* Unread indicator on nav icons (e.g. Community new messages) */
.nav-icon-btn--badged {
  position: relative;
}

/* Unread chat badge: a number = count of @mentions of you. Inline by default so it
   bubbles into rows/pills; the mobile section bar positions its slot on the icon. */
.nav-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--error-500, #ef4444);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* Plain dot: unread chat activity with no @mention */
.nav-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error-500, #ef4444);
}

/* Main content wrapper */
main {
  min-height: calc(100vh - env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

/* The chatroom container is position: fixed, so main has no in-flow content.
   The default min-height would still stretch the body to ~100vh and let it
   scroll behind the fixed header and composer; collapse it so nothing scrolls
   behind the shell. */
body:has(.chatroom-container) main {
  min-height: 0;
}

/* Container utilities */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.container.max-w-6xl {
  max-width: 72rem;
}

/* Card component */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.card-body {
  padding: var(--space-4) var(--space-5);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 var(--space-5);
  height: 44px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
  gap: var(--space-2);
}

.btn-primary {
  background: var(--orange);
  color: white;
  border: 0;
}

.btn-primary:hover {
  background: var(--orange-600);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
  background: color-mix(in srgb, var(--orange-600) 92%, black);
}

.btn-primary:focus {
  outline: 2px solid var(--orange-light);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none !important;
  box-shadow: none;
}

.btn-sm {
  padding: 0 var(--space-3);
  height: 32px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}

.btn-xs {
  padding: 0 var(--space-2);
  height: 28px;
  font-size: 0.75rem;
  border-radius: 6px;
}

.btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background-color: var(--bg);
  border-color: var(--gray-400);
}

.btn-success {
  background: var(--green);
  border: none;
  color: white;
  font-weight: 600;
}

.btn-success:hover {
  background: #2d9249;
  box-shadow: var(--shadow-md);
}

.btn-danger {
  background-color: var(--red);
  color: white;
  border: none;
}

.btn-danger:hover {
  background-color: #d33426;
  box-shadow: var(--shadow-md);
}



/* Forms */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: all 0.2s;
  background-color: var(--bg);
}

.form-select {
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1rem;
  cursor: pointer;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--orange);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px rgb(232 116 59 / 10%);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

/* iOS Safari zooms the viewport when a focused control is under 16px */
@media (width <= 640px) {
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 1rem;
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Tables */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

thead th {
  background-color: var(--gray-50);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.8rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 1;
}

th, td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--gray-100);
}

tbody tr:nth-child(even) {
  background: transparent; /* Remove heavy stripes */
}

tbody tr:hover {
  background: #f7f7f9;
}

/* Number alignment and tabular figures */
td[data-align="num"],
[data-align="num"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

th[data-align="num"] {
  text-align: right;
}

/* Dim units in tables for better readability */
td .unit,
.table-unit {
  opacity: 0.7;
}

/* Progress bars with CSS variable model */
.goal-progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.goal-progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background: linear-gradient(90deg, var(--yafa-orange), var(--yafa-orange-600));
}

/* CSS variable model for progress percentage */
[style*="--p"] .goal-progress-fill {
  width: calc(var(--p) * 1%);
}

/* Sticky table headers for activity tables */
.table-scroll-container {
  max-height: calc(100vh - 300px); /* Account for header and tabs */
  overflow: auto;
  position: relative;

  /* Allow tooltips to be visible outside container */
}

.table-scroll-container thead th {
  position: sticky;
  top: 0;
  z-index: 20; /* Higher z-index for headers */
  background: var(--gray-50);
  box-shadow: 0 1px 0 var(--gray-200);
  overflow: visible; /* Allow tooltips to escape */
}

/* Sticky footer for tables */
.table-scroll-container tfoot {
  position: sticky;
  bottom: 0;
  z-index: 20; /* Higher than row borders */
}

.table-scroll-container tfoot td {
  background: var(--primary-50);
  border-top: 2px solid var(--primary-200);
  position: relative; /* Create stacking context */
}

/* Hide row borders that would show through footer */
.table-scroll-container tfoot td::before {
  content: '';
  position: absolute;
  left: -3px; /* Cover the 3px border */
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary-50);
  z-index: 1;
}

/* Activity table scroll shadows */
.activity-table-wrapper {
  position: relative;
}

.activity-scroll-shadow-top,
.activity-scroll-shadow-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 25; /* Above content but below modals */
}

.activity-scroll-shadow-top {
  top: 0; /* At the top of the scroll container */
  background: linear-gradient(to bottom, rgb(0 0 0 / 6%), transparent);
}

.activity-scroll-shadow-bottom {
  bottom: 0; /* At the bottom of the scroll container */
  background: linear-gradient(to top, rgb(0 0 0 / 6%), transparent);
}

.activity-scroll-shadow-top.visible,
.activity-scroll-shadow-bottom.visible {
  opacity: 1;
}

/* On daily dashboard, make the table container scrollable */
.daily-dashboard-container .table-scroll-container {
  max-height: calc(100vh - 280px); /* Adjust for daily dashboard header */
}

/* Ensure proper stacking in daily dashboard */
.daily-dashboard-container .table-scroll-container thead th {
  z-index: 25;
}

.daily-dashboard-container .table-scroll-container tbody tr:first-child[style*="background: var(--primary-50)"] td {
  z-index: 20;
}

/* Alerts and notifications */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--e1);
}

.alert-success {
  background-color: var(--sage-wash);
  color: var(--sage);
}

.alert-error {
  /* The palette has no dedicated error-red; --accent-ink is already the app's
     deep warm red-brown (used with --accent-wash elsewhere), so reuse that
     pairing instead of the cool web red this used to be. */
  background-color: var(--accent-wash);
  color: var(--accent-ink);
}

.alert-info {
  background-color: var(--gold-wash);
  color: var(--gold);
}

/* Chat-specific styles */
.messages-container {
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message:last-child {
  margin-bottom: 0;
}

/* Activity item cards */
.activity-item {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s;
}

.activity-item:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

/* Loading states */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-8 { margin-bottom: 2rem; }

.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

.hidden { display: none; }

/* Responsive */
@media (width <= 640px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* =================================================================
   Chat Components
   ================================================================= */

/* Typing Indicator Animation */

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #4B5563;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Inline typing indicator (used in streaming messages) */
.typing-indicator-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgb(0 0 0 / 5%);
  border-radius: 16px;
  margin-left: 4px;
}

.typing-indicator-inline span {
  height: 8px;
  width: 8px;
  background-color: #4B5563;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator-inline span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator-inline span:nth-child(2) {
  animation-delay: -0.16s;
}

/* Message Styles (used in daily dashboard) */

.message.own-message {
  align-items: flex-end;
}

.message.other-message {
  align-items: flex-start;
}

.sender-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.message-bubble {
  max-width: 90%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.own-message .message-bubble {
  background: var(--primary-600);
  color: white;
  border-bottom-right-radius: 0.25rem;
}

.own-message.trainer-mode .message-bubble {
  background: var(--success-600);
}

.other-message .message-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink, var(--text));
  border-bottom-left-radius: 0.25rem;
}

.other-message.trainer-mode .message-bubble {
  background: var(--success-50);
  border-color: var(--success-200);
}

.message-bubble p {
  margin: 0 0 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.message-bubble p:last-child {
  margin-bottom: 0;
}

/* Markdown styling for chat messages */
.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6 {
  margin: 1rem 0 0.5rem;
  line-height: 1.3;
}

.message-bubble h1 { font-size: 1.25rem; }
.message-bubble h2 { font-size: 1.125rem; }
.message-bubble h3 { font-size: 1rem; }
.message-bubble h4 { font-size: 0.9375rem; }
.message-bubble h5 { font-size: 0.875rem; }
.message-bubble h6 { font-size: 0.875rem; }

/* First heading shouldn't have top margin */
.message-bubble h1:first-child,
.message-bubble h2:first-child,
.message-bubble h3:first-child,
.message-bubble h4:first-child,
.message-bubble h5:first-child,
.message-bubble h6:first-child {
  margin-top: 0;
}

/* Lists in messages */
.message-bubble ul,
.message-bubble ol {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.5rem;
}

.message-bubble ul:last-child,
.message-bubble ol:last-child {
  margin-bottom: 0;
}

.message-bubble li {
  margin: 0.25rem 0;
  line-height: 1.5;
}

.message-bubble li:first-child {
  margin-top: 0;
}

.message-bubble li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.message-bubble ul ul,
.message-bubble ol ol,
.message-bubble ul ol,
.message-bubble ol ul {
  margin: 0.25rem 0;
}

/* Strong emphasis */
.message-bubble strong {
  font-weight: 600;
}

/* Code blocks */
.message-bubble code {
  background: rgb(0 0 0 / 5%);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 0.875em;
}

.message-bubble pre {
  background: rgb(0 0 0 / 5%);
  padding: 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.5rem 0 0.75rem;
}

.message-bubble pre code {
  background: none;
  padding: 0;
}

/* Blockquotes */
.message-bubble blockquote {
  border-left: 3px solid rgb(0 0 0 / 10%);
  margin: 0.5rem 0 0.75rem;
  padding-left: 1rem;
  font-style: italic;
  color: rgb(0 0 0 / 70%);
}

/* Horizontal rules */
.message-bubble hr {
  border: none;
  border-top: 1px solid rgb(0 0 0 / 10%);
  margin: 1rem 0;
}

/* Tables in messages */
.message-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.875rem;
}

.message-bubble th,
.message-bubble td {
  padding: 0.5rem;
  border: 1px solid rgb(0 0 0 / 10%);
  text-align: left;
}

.message-bubble th {
  background: rgb(0 0 0 / 5%);
  font-weight: 600;
}

/* Adjust colors for own messages (blue/green bubbles) */
.own-message .message-bubble code {
  background: rgb(255 255 255 / 20%);
}

.own-message .message-bubble pre {
  background: rgb(255 255 255 / 15%);
}

.own-message .message-bubble blockquote {
  border-left-color: rgb(255 255 255 / 30%);
  color: rgb(255 255 255 / 90%);
}

.own-message .message-bubble hr {
  border-top-color: rgb(255 255 255 / 20%);
}

.own-message .message-bubble th,
.own-message .message-bubble td {
  border-color: rgb(255 255 255 / 20%);
}

.own-message .message-bubble th {
  background: rgb(255 255 255 / 10%);
}

.message-bubble.streaming p {
  color: var(--gray-500);
  font-style: italic;
}


.own-message .message-time {
  text-align: right;
}

/* Activity jump links in chat messages */
.message a[href^="#activity-"] {
  color: #007AFF;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease-out;
  border-bottom: 1px solid transparent;
  position: relative;
}

.message a[href^="#activity-"]:hover {
  color: #0051D5;
  border-bottom-color: #0051D5;
}

/* Loading animation */
.message #loading {
  max-width: 90%;
}

.message #loading .typing-indicator {
  padding: 0.5rem;
}

/* Compact line under an assistant bubble listing actions the AI completed */
.action-summary {
  max-width: 90%;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.action-summary::before {
  content: "\2713  ";
  color: var(--primary-600);
  font-weight: 700;
}

/* Mutations Display Styles */
.mutations {
  max-width: 90%;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.mutations-header {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--gray-700);
}

.mutation-group {
  margin-bottom: 0.5rem;
}

.mutation-group:last-child {
  margin-bottom: 0;
}

.activity-link {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.activity-link:hover {
  text-decoration: underline;
}

.show-details-btn {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--primary-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.show-details-btn:hover {
  color: var(--primary-700);
}

.mutation-details {
  margin-top: 0.5rem;
  position: relative;
}

.mutation-table-wrapper {
  overflow-x: auto;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 0.25rem;
}




/* Sticky actions column */
.mutation-table .actions-column,
.mutation-table .action-buttons {
  position: sticky;
  right: 0;
  background: inherit;
  z-index: 1;
}

.mutation-table th.actions-column {
  background: var(--gray-50);
  box-shadow: -2px 0 4px rgb(0 0 0 / 5%);
}

.mutation-table td.action-buttons {
  background: white;
  box-shadow: -2px 0 4px rgb(0 0 0 / 5%);
}

.mutation-table.deleted th.actions-column {
  background: white;
  box-shadow: -2px 0 4px rgb(0 0 0 / 5%);
}

.mutation-table.deleted td.action-buttons {
  background: white;
  box-shadow: -2px 0 4px rgb(0 0 0 / 5%);
}

.mutation-table tr:last-child td {
  border-bottom: none;
}

.mutation-table.deleted {
  border-color: var(--error-200);
}

.mutation-table.deleted th {
  background: var(--error-50);
  color: var(--error-700);
  border-bottom-color: var(--error-200);
}

.mutation-table.deleted td {
  background: var(--error-50);
}

.action-buttons {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.btn-icon {
  padding: 0.25rem;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--gray-600);
  transition: all 0.15s;
  position: relative;
}

.btn-icon:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-700);
}

/* Primary button icon style for daily dashboard */
.btn-icon.btn-primary {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.btn-icon.btn-primary:hover:not(:disabled) {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  color: white;
}

/* Tooltips below for activity header buttons */

.section-header .btn[data-tooltip] {
  position: relative;
  z-index: 10;
}

.section-header .btn[data-tooltip]::before {
  top: 100%;
  bottom: auto;
  border-top-color: transparent;
  border-bottom: 6px solid var(--gray-900);
  margin-bottom: 0;
  margin-top: 4px;
  z-index: 9999;
  position: absolute;
}

.section-header .btn[data-tooltip]::after {
  top: 100%;
  bottom: auto;
  margin-bottom: 0;
  margin-top: 10px;
  z-index: 9999;
  position: absolute;
  line-height: 1.2;
  white-space: nowrap;
}

/* Custom tooltips - Remove native tooltips */
.btn-icon[title] {
  overflow: visible;
  position: relative;
}

.btn-icon[title]:hover::before,
.btn-icon[title]:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}

/* Hide native tooltips by removing title on hover */
.btn-icon[title]:hover {
  cursor: pointer;
}

/* Ensure tooltips aren't clipped by table */

.action-buttons {
  position: relative;
  z-index: 10;
}

.btn-icon[title]::before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 4px 8px;
  background: #000;
  background-color: rgb(0 0 0 / 90%);
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  transition-delay: 0s;
  z-index: 1000;
  pointer-events: none;
}

.btn-icon[title]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  border: 5px solid transparent;
  border-top-color: #000;
  border-top-color: rgb(0 0 0 / 90%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  transition-delay: 0s;
  z-index: 1000;
  pointer-events: none;
}

/* Adjust tooltip position for buttons in the rightmost column */
.action-buttons .btn-icon:last-child[title]::before,
td:last-child .btn-icon[title]::before,
.btn-icon:last-child[title]::before {
  left: auto;
  right: 0;
  transform: none;
}

.action-buttons .btn-icon:last-child[title]::after,
td:last-child .btn-icon[title]::after,
.btn-icon:last-child[title]::after {
  left: auto;
  right: 8px;
  transform: none;
}

.btn-icon.disabled {
  cursor: not-allowed;
}

.btn-icon.disabled svg {
  opacity: 0.5;
}

.btn-icon.delete {
  color: var(--error-500);
}

.btn-icon.delete:hover:not(:disabled) {
  background: var(--error-50);
  border-color: var(--error-300);
  color: var(--error-600);
}

.btn-icon.revert {
  color: var(--error-500);
}

.btn-icon.revert:hover:not(:disabled) {
  background: var(--error-50);
  border-color: var(--error-300);
  color: var(--error-600);
}

.btn-icon.restore {
  color: var(--success-600);
}

.btn-icon.restore:hover:not(:disabled) {
  background: var(--success-50);
  border-color: var(--success-300);
  color: var(--success-700);
}

/* Reorder buttons - mobile-friendly touch targets with subtle appearance */
.btn-reorder {
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--gray-600);
  transition: all 0.15s;

  /* Ensure minimum touch target */
  min-width: 28px;
  min-height: 28px;
}

.btn-reorder:hover:not(:disabled) {
  background: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--gray-900);
}

.btn-reorder:active:not(:disabled) {
  background: var(--gray-200);
}

.btn-reorder:disabled {
  opacity: 0.3;
  cursor: default;
}

.mutation-summary {
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.action-added {
  color: var(--success-600);
}

.action-edited {
  color: var(--primary-600);
}

.action-deleted {
  color: var(--error-500);
}

/* Navigation highlight for attention banner navigation */
.navigation-highlight {
  background: rgb(255 149 0 / 15%) !important; /* Stronger orange when navigating */
  border-left: 4px solid var(--warning-600) !important; /* Thicker, darker border */
  box-shadow: 0 0 0 2px rgb(255 149 0 / 20%) !important; /* Orange glow */
  transition: all 0.3s ease-out;
  animation: pulse-highlight 1.5s ease-in-out infinite;
}

@keyframes pulse-highlight {
  0%, 100% {
    box-shadow: 0 0 0 2px rgb(255 149 0 / 20%);
  }

  50% {
    box-shadow: 0 0 0 4px rgb(255 149 0 / 10%);
  }
}

/* Smooth highlight animation for jump links */
@keyframes gentle-highlight {
  0% {
    background-color: rgb(0 122 255 / 15%);
    transform: scale(1.005);
  }

  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

.highlight-flash {
  animation: gentle-highlight 2s ease-out;
}

/* =====================================================
   Dropdown action menus (shared primitive)
   Wrapper .dropdown is the positioning context wired to dropdown_controller;
   .dropdown-menu is the floating container, .dropdown-menu-item its rows.
   ===================================================== */

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--specular), var(--e3);
  min-width: 180px;
  padding: 4px;
  z-index: 100;
  animation: menu-in 0.14s var(--ease-out);
}

/* Opens above the toggle when dropdown_controller detects clipping below */
.dropdown-menu--up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  animation-name: menu-in-up;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-in-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: none;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.dropdown-menu-item:hover {
  background: var(--gray-100);
}

.dropdown-menu-item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.dropdown-menu-item[disabled] {
  opacity: 0.4;
  cursor: default;
}

.dropdown-menu-item[disabled]:hover {
  background: none;
}

.dropdown-menu-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.dropdown-menu-item--danger,
.dropdown-menu-item--danger svg {
  color: var(--error-500);
}

.dropdown-menu-item--danger:hover {
  background: var(--error-50);
}

.dropdown-menu-divider {
  height: 1px;
  background: var(--hairline);
  margin: 4px 8px;
}

/* button_to wraps its button in a form; keep the form out of menu layout */
.dropdown-menu-form {
  display: contents;
}

/* Round kebab toggle for action menus */
.dropdown-kebab {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}

.dropdown-kebab:hover {
  background: var(--paper-2);
}

.dropdown-kebab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Library template browser (Add From Library modal) */
.library-folders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.library-folder {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

.library-folder-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  list-style: none;
}

.library-folder-summary svg {
  flex-shrink: 0;
}

.library-folder-name {
  flex: 1;
  font-weight: 600;
}

.library-folder-count {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.library-template-list {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem 0.5rem;
}

.library-template-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: none;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text);
  transition: background var(--transition-fast);
}

.library-template-btn:hover,
.library-template-btn:focus-visible {
  background: var(--gray-50);
}

.library-template-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.library-template-btn svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.library-template-name {
  flex: 1;
}

.suggested-actions {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  z-index: 10; /* Same as .action-buttons to create proper stacking context */
}

/* Font Awesome stack-based attention badges */

/* Action required indicator wrapper */
.suggestion-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}


@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Square icon buttons for suggested actions to match other action buttons */
.suggested-actions .btn-icon {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}



.required-fields-notice {
  font-size: 0.75rem;
  color: #f59e0b;
  margin-top: 0.25rem;
}

/* Daily Dashboard Styles */

/* Base layout styles */

/* Header section */




/* Date navigation buttons */


.date-nav-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}

/* Lightning bolt overlay badge for yesterday button */
.date-nav-button-wrapper {
  position: relative;
  display: inline-block;
}

.attention-badge-overlay {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  pointer-events: none;
  z-index: 1;
}

/* Tab button wrapper for overlay badges */
.tab-button-wrapper {
  position: relative;
  display: inline-block;
}

/* Lightning bolt overlay for tabs */
.tab-attention-overlay {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  pointer-events: none;
  z-index: 1;
}

/* Add button wrapper for overlay badges */
.add-button-wrapper {
  position: relative;
  display: inline-block;
}

/* Lightning bolt overlay for add buttons */
.add-button-attention-overlay {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--warning-500);
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  pointer-events: none;
  z-index: 1;
}

.add-button-attention-overlay .fa-bolt {
  font-size: 9px;
}




.date-nav-icon-button.disabled {
  color: var(--gray-300);
  cursor: not-allowed;
}

.date-nav-icon-button.disabled:hover {
  background: transparent;
  color: var(--gray-300);
  border-color: transparent;
}

/* Hidden date picker input */

/* Date display */










/* Desktop chat panel - hidden by default */

/* Tab navigation improvements */




/* Activity badges (used in navigation and tabs) */
.activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 9999px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  vertical-align: middle;
}

.activity-badge.incomplete {
  background: var(--amber-500, #f59e0b);
  color: white;
}

.activity-badge.planned {
  background: var(--blue-500, #3b82f6);
  color: white;
}

/* Activity badge tooltips */
.activity-badge[data-tooltip],
.activity-badge-missing[data-tooltip] {
  position: relative;
  cursor: help;
}

.activity-badge[data-tooltip]:hover::after,
.activity-badge-missing[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  background: var(--gray-900);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  margin-left: 0.5rem;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

.activity-badge[data-tooltip]:hover::before,
.activity-badge-missing[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: var(--gray-900);
  margin-left: 1px;
  z-index: 1001;
  pointer-events: none;
}

/* Activity badge position adjustments */
.tab-button .activity-badge {
  margin-left: 0;
  margin-right: 0.375rem;
  vertical-align: baseline;
}

.tab-button .activity-badge-missing {
  margin-right: 0;
  vertical-align: baseline;
  position: relative;
  top: -1px;
  font-size: 0.625rem;
}

/* Dropdown item badge positioning */
.nav-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}


.tab-button.active .tab-badge:not(.tab-badge-empty) {
  background: var(--primary-100);
  color: var(--primary-700);
}

.tab-button-all {
  margin-left: auto;
}


/* Badge container for count + suggestion indicator */
.badge-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Action-required indicator for pending suggestions (on badge containers) */
.suggestion-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tab suggestion indicators (left of tab text) */


.tab-button .suggestion-indicator {
}

/* Attention banner for actions required */


/* Highlight animation for jumped-to items */
.highlight-action {
  animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
  0%, 100% {
    background-color: transparent;
    box-shadow: none;
  }

  25%, 75% {
    background-color: rgb(37 99 235 / 10%);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 20%);
  }
}

/* Lightning bolt inside add button */
.btn-primary .button-bolt {
  color: white;
  margin-right: 0.25rem;
  font-size: 0.875rem;
}



@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes subtle-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* Mobile adjustments for date navigation */
@media (width <= 768px) {
  .date-display-info {
    gap: 0.5rem;
  }
}

/* Mobile-only elements - hide by default on desktop */
@media (width >= 1024px) {
}

/* Show mobile-only elements on mobile */
@media (width <= 1023px) {
  /* Hide entire desktop chat panel on mobile */

  /* Make activities section full width on mobile */
}

/* Ensure proper scrolling for both panels */
.activities-section .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.activities-section .card-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0;
}

/* Chat panel styling */

/* Desktop chat panel scrolling */

.desktop-chat-panel .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.desktop-chat-panel .chat-interface {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chat messages scroll shadow */


.chat-scroll-shadow-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.chat-scroll-shadow-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgb(0 0 0 / 10%), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.chat-scroll-shadow-top.visible,
.chat-scroll-shadow-bottom.visible {
  opacity: 1;
}

/* Empty states */



/* Chat badge for notifications */

/* Tab content styling */


/* Responsive layout for desktop */
@media (width >= 1024px) {
  /* Hide chat in tab view on desktop */
  #tab_chat .chat-interface {
    display: none !important;
  }
}

/* Mobile-specific adjustments */
@media (width <= 1023px) {
  /* Show chat interface in tab when active */
  #tab_chat.active .chat-interface {
    display: flex;
    height: calc(100vh - 300px); /* Adjust for header and tab bar */
    max-height: 500px; /* Reasonable max height for tab view */
  }

  /* Override desktop chat styles when in tab mode */
  #tab_chat .chat-interface {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #tab_chat .chat-messages-wrapper {
    flex: 1;
    min-height: 0; /* Important for proper flex behavior */
  }

  #tab_chat .chat-messages {
    height: 100%;
    overflow-y: auto;
  }
}

/* Remove browser tooltips on buttons in mutation details */
.mutation-details button[title] {
  pointer-events: auto;
}

/* Prevent browser tooltip */
.mutation-details button[title]:hover::before {
  content: attr(title);
  pointer-events: none;
}

/* Divider */
.divider {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--gray-300);
}

.divider span {
  position: relative;
  background-color: white;
  padding: 0 1rem;
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* Devise error messages */
.error-alert {
  background-color: #FEE2E2;
  border: 1px solid #FECACA;
  color: #991B1B;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.error-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.error-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #DC2626;
}

.error-messages {
  flex: 1;
}

.error-message {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.error-message + .error-message {
  margin-top: 0.25rem;
}

/* Fix Rails field_with_errors wrapper */
.field_with_errors {
  display: contents;
}

.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  border-color: #EF4444;
}

.field_with_errors input:focus,
.field_with_errors textarea:focus,
.field_with_errors select:focus {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgb(239 68 68 / 10%);
}

/* Portal Overlay System */
#overlay-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Portaled Tooltip Styles */
.tooltip-portal {
  position: fixed;
  max-width: 160px;
  background: var(--gray-900);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

.tooltip-portal::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gray-900);
}

/* Flipped tooltip when at top of viewport */
.tooltip-bottom {
  transform: translate(-50%, 0);
}

.tooltip-bottom::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--gray-900);
}

/* Button States */
.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-processing {
  opacity: 0.7;
  cursor: wait;
}

/* Applied count span styles */
.applied-count {
  font-size: 0.75rem !important;
  margin-left: 0.5rem !important;
}

/* Utility Classes for JavaScript */
.hidden {
  display: none !important;
}

.visible {
  opacity: 1 !important;
}

.invisible {
  opacity: 0 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.inline-flex {
  display: inline-flex !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.table-row {
  display: table-row !important;
}

.scroll-auto {
  scroll-behavior: auto !important;
}

.scroll-smooth {
  scroll-behavior: smooth !important;
}

.bg-white {
  background: white !important;
}

.pointer-events-none {
  pointer-events: none !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

.text-success {
  color: var(--success-600) !important;
}

.fade-out {
  transition: opacity 0.3s;
  opacity: 0;
}

/* Date Section */
.date-section {
  margin-bottom: var(--space-4);
}

.date-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
}

.date-btn {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.date-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--gray-400);
}

.date-content {
  flex: 1;
  text-align: center;
}

.date-main {
  font-size: 1.125rem;
  font-weight: 700;
}

.date-chip {
  display: inline-block;
  background: var(--orange-light);
  color: var(--orange);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 4px;
  text-transform: uppercase;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg);
  border-radius: var(--radius);
  position: relative;
  transition: all 0.2s;
}

.activity-item:hover {
  background: var(--gray-100);
}

/* AI-logged items have subtle purple highlight */
.activity-item.from-ai {
  border-left: 3px solid var(--purple, #667eea);
  background: var(--purple-light, #f0f0ff);
}

.activity-icon {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.activity-meta {
  display: flex;
  gap: var(--space-3);
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.activity-meta strong {
  color: var(--text);
}

.ai-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--purple, #667eea);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: var(--space-1);
}

/* Meal Groups */
.meal-group {
  margin-bottom: var(--space-4);
}

.meal-group:last-child {
  margin-bottom: 0;
}

.meal-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding-left: 4px;
}

/* Quick Stats Grid */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.quick-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}

.quick-stat-value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
}

.quick-stat-value.good {
  color: var(--green);
}

.quick-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.quick-stat-progress {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-2);
}

.quick-stat-progress-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.quick-stat-progress-fill.good {
  background: var(--green);
}

/* FAB (Floating Action Button) Styles */
.fab-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 40;
}

@media (width <= 768px) {
  .fab-container {
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  border: none;
  font-size: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.fab-primary {
  background: var(--orange);
  color: white;
  box-shadow: 0 4px 20px rgb(232 116 59 / 40%);
}

.fab-primary:hover {
  background: var(--orange-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgb(232 116 59 / 50%);
}

.fab-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.fab-secondary:hover {
  background: var(--bg);
  border-color: var(--gray-400);
  transform: translateY(-2px);
}

/* ===== Apple-native polish: app-wide depth + material (Jun 8 2026) ===== */

/* Most depth is free via the token alias; these add the specular top-edge to
   surfaces that read as lifted tiles, and float the popovers. */
.activity-item { box-shadow: var(--specular), var(--e1); }
.activity-item:hover { box-shadow: var(--specular), var(--e2); }

/* Workout block cards become lifted tiles; fixes the prior sink-on-hover regression */
.workout-block-card {
  border-color: var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--specular), var(--e2);
}
.workout-block-card:hover { box-shadow: var(--specular), var(--e3); }

/* Retire the "0 -10px 0 white" mask hack; frost the sticky header (chrome, not reading copy) */
.workout-sticky-header {
  background: var(--material-surface);
  backdrop-filter: var(--material-blur);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--e1);
}

/* Heavy 2px round separators -> hairlines */
.round-container { border-bottom: 1px solid var(--hairline); }