:root {
  --bg: #0a0b12;
  --bg-glow: #1a1233;
  --panel: rgba(22, 23, 34, 0.78);
  --panel-2: rgba(28, 30, 44, 0.78);
  --border: rgba(255, 255, 255, 0.08);
  --text: #f1eefb;
  --text-dim: #9491ab;
  --accent: #8f5cf7;
  --accent-rgb: 143, 92, 247;
  --accent-2: #26d7ef;
  --accent-glow: #b393fc;
  --accent-warm: #ff9466;
  --accent-warm-2: #ffb84d;
  --gold: #f5c451;
  --danger: #fb7185;
  --warn: #f5c451;

  /* radii -- --radius-pill for fully-rounded pill shapes (nav, chips, tags),
     used in ~13 places today as a bare 999px literal */
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* spacing scale (4px base). Existing rules keep their hand-tuned literals --
     this is for new/touched CSS so future additions don't reintroduce the
     same "8px here, 10px there, 12px over there" drift. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* type scale -- distinct roles so headings/cards/modals stop sharing one
     .card-title font-size for three different jobs */
  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2rem;
  --text-3xl: 2.6rem;

  /* icon sizes -- consolidates ad hoc 14/15/18/20/32px usages */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 32px;

  /* motion -- named durations so new rules stop inventing their own; the two
     easings already existed and are kept as the app's signature curves */
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-card: 0 14px 34px -16px rgba(168, 130, 255, 0.34), 0 3px 14px -5px rgba(245, 196, 81, 0.12), 0 2px 10px -3px rgba(0, 0, 0, 0.45);
  --shadow-btn: 0 10px 26px -6px rgba(143, 92, 247, 0.55), 0 4px 16px -6px rgba(255, 148, 102, 0.28);

  /* backdrop blur scale -- overlays were using 5/6/8/12/16/22/24px ad hoc */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* stacking scale, kept above the highest literal already in the file (200)
     so adding these can't silently invert an existing z-order */
  --z-nav: 210;
  --z-modal-backdrop: 220;
  --z-modal: 221;
  --z-toast: 230;

  --orb-size: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-size: 16px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f4fb;
  --bg-glow: #ece6f9;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-2: rgba(240, 237, 249, 0.85);
  --border: rgba(28, 23, 48, 0.09);
  --text: #1c1730;
  --text-dim: #6b6480;
  --accent: #7c3aed;
  --accent-rgb: 124, 58, 237;
  --accent-2: #0e88a8;
  --accent-glow: #9061f0;
  --accent-warm: #f2723a;
  --accent-warm-2: #d9930b;
  --gold: #b8860b;
  --danger: #e11d48;
  --warn: #c2760a;
  --shadow-card: 0 10px 30px -14px rgba(124, 58, 237, 0.18), 0 3px 12px -6px rgba(242, 114, 58, 0.08), 0 2px 10px -3px rgba(28, 23, 48, 0.08);
  --shadow-btn: 0 8px 22px -6px rgba(124, 58, 237, 0.35), 0 4px 14px -6px rgba(242, 114, 58, 0.18);
  color-scheme: light;
}

:root[data-theme="light"] body::before { opacity: 0.55; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Stops the browser's own pull-to-refresh/bounce-past-the-edge gesture from chaining
     into a page reload or nav-back -- the single biggest "this is a website, not an
     installed app" tell on mobile. */
  overscroll-behavior-y: none;
}

body {
  position: relative;
  /* Installed-app feel: the general UI (labels, cards, buttons) isn't selectable text --
     real text fields opt back in below. A JS backstop (see app.js DOMContentLoaded init)
     also blocks the long-press context menu and copy on non-input elements. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Without this, the browser holds every tap for ~300ms waiting to see if a second tap
     follows (double-tap-to-zoom detection) before committing to a click -- on some mobile
     WebKit builds that delay window, combined with user-select:none above, has been seen to
     make the eventual synthetic click land off from where the finger actually lifted (most
     noticeable on small icon-only buttons). `manipulation` tells the browser to skip that
     detection and dispatch the click immediately at the real touch point. */
  touch-action: manipulation;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Scrollable panels/modals shouldn't let an exhausted scroll "leak" into scrolling the
   page underneath them -- also part of feeling like a native sheet, not a webpage. */
.chat-messages, .chat-panel, .chat-history-sidebar {
  overscroll-behavior: contain;
}

body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  background:
    radial-gradient(38% 32% at 18% 22%, rgba(139, 92, 246, 0.38), transparent 70%),
    radial-gradient(42% 36% at 84% 14%, rgba(34, 211, 238, 0.28), transparent 70%),
    radial-gradient(46% 40% at 55% 96%, rgba(245, 196, 81, 0.14), transparent 70%),
    radial-gradient(30% 28% at 8% 88%, rgba(52, 211, 153, 0.16), transparent 70%);
  filter: blur(70px);
  animation: auroraDrift 28s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraDrift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(2.5%, -3%, 0) rotate(6deg) scale(1.08); }
  100% { transform: translate3d(-3%, 2.5%, 0) rotate(-5deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

#app {
  min-height: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 900px) {
  #app { max-width: 760px; padding-top: 40px; }
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* renderMarkdown() (utils.js) output: multiple stacked <p>/<ul> from AI text (chat,
   recaps, quiz portrait) need breathing room between them, but any lone paragraph
   elsewhere in the app (still the overwhelming majority) is unaffected since these are
   all adjacent-sibling/nesting selectors. */
p + p, p + ul, ul + p { margin-top: 0.6em; }
.chat-msg ul, .muted ul { margin: 0.3em 0 0.3em 1.2em; padding: 0; }
.chat-msg li, .muted li { margin-bottom: 0.25em; }
strong { font-weight: 700; }

/* ---------- view transition ---------- */

@keyframes viewIn {
  /* opacity only -- no transform/translate here, even as a "to: none" endpoint. A finished
     fill-mode:both animation keeps its effect attached, and the computed value it then reports
     for transform/translate is a resolved matrix/length (e.g. "0px"), never the literal "none"
     keyword -- which still counts as "has a transform" and makes .view a new containing block
     for position:fixed descendants for as long as the view exists. That broke .chat-overlay
     modals and the pet page's floating quick-bar: they'd size/position against .view's own
     (often short) box instead of the real viewport. Animating opacity alone sidesteps this
     entirely, since opacity never creates a containing block. */
  from { opacity: 0; }
  to { opacity: 1; }
}
.view {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: viewIn 0.35s var(--ease-smooth) both;
}

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.greeting {
  font-family: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: 1.6rem;
  font-weight: 560;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.date-line { color: var(--text-dim); font-size: 0.85rem; margin-top: 4px; }

.card {
  background: var(--panel);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-bounce), border-color 0.25s ease;
}

@media (hover: hover) {
  .card:hover {
    box-shadow: 0 18px 38px -14px rgba(168, 130, 255, 0.42), 0 4px 16px -6px rgba(255, 148, 102, 0.16), 0 2px 10px -3px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px) scale(1.004);
    border-color: rgba(var(--dc-rgb, 168, 130, 255), 0.28);
  }
}

/* Cascading entrance for cards stacked directly under a .view -- each one settles in
   slightly after the last so the page feels assembled rather than dumped on screen.
   The gentle overshoot (scale past 1 before settling) is what reads as "playful" rather
   than just "fading in" -- it's the same trick a bouncing ball reads as alive. */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  70% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.view > .card { animation: cardIn 0.5s var(--ease-bounce) both; }
.view > .card:nth-child(1) { animation-delay: 0.02s; }
.view > .card:nth-child(2) { animation-delay: 0.07s; }
.view > .card:nth-child(3) { animation-delay: 0.12s; }
.view > .card:nth-child(4) { animation-delay: 0.17s; }
.view > .card:nth-child(5) { animation-delay: 0.22s; }
.view > .card:nth-child(6) { animation-delay: 0.27s; }
.view > .card:nth-child(n+7) { animation-delay: 0.32s; }

/* Same cascading settle, reused for repeating list items that aren't direct .view > .card
   children -- trophy tiles, search results, friend/activity rows -- so lists feel
   assembled too instead of only the top-level cards. :nth-child resets per container,
   so each grid/list gets its own stagger regardless of how many precede it on the page. */
.trophy-tile,
.search-result-row,
.meditation-row,
.history-item { animation: cardIn 0.4s var(--ease-bounce) both; }
.trophy-tile:nth-child(1), .search-result-row:nth-child(1), .meditation-row:nth-child(1), .history-item:nth-child(1) { animation-delay: 0.02s; }
.trophy-tile:nth-child(2), .search-result-row:nth-child(2), .meditation-row:nth-child(2), .history-item:nth-child(2) { animation-delay: 0.06s; }
.trophy-tile:nth-child(3), .search-result-row:nth-child(3), .meditation-row:nth-child(3), .history-item:nth-child(3) { animation-delay: 0.1s; }
.trophy-tile:nth-child(4), .search-result-row:nth-child(4), .meditation-row:nth-child(4), .history-item:nth-child(4) { animation-delay: 0.14s; }
.trophy-tile:nth-child(5), .search-result-row:nth-child(5), .meditation-row:nth-child(5), .history-item:nth-child(5) { animation-delay: 0.18s; }
.trophy-tile:nth-child(n+6), .search-result-row:nth-child(n+6), .meditation-row:nth-child(n+6), .history-item:nth-child(n+6) { animation-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  .trophy-tile, .search-result-row, .meditation-row, .history-item { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view > .card { animation: none; }
}

.card-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}

.muted { color: var(--text-dim); font-size: 0.9rem; line-height: 1.45; }

.btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.32s var(--ease-bounce), opacity 0.15s ease, box-shadow 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { transform: scale(0.94); transition-duration: 0.08s; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 60%, var(--accent-warm) 140%);
  color: white;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { box-shadow: 0 12px 28px -4px rgba(143, 92, 247, 0.5), 0 6px 18px -6px rgba(255, 148, 102, 0.3); }
.btn-secondary { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08); transition: transform 0.32s var(--ease-bounce), opacity 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.btn-ghost { background: transparent; color: var(--text-dim); transition: transform 0.32s var(--ease-bounce), opacity 0.15s ease, color 0.2s ease, background 0.2s ease; }
@media (hover: hover) {
  .btn-secondary:hover { border-color: rgba(var(--accent-rgb), 0.35); background: var(--panel-2); }
  .btn-ghost:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.08); }
}
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.row { display: flex; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.85rem; color: var(--text-dim); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: dark;
}
textarea { resize: vertical; min-height: 70px; }

.voice-input-row { position: relative; }
.voice-input-row textarea { padding-right: 40px; }
.voice-mic-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.voice-mic-btn:active { transform: scale(0.92); }
.voice-mic-btn.listening {
  background: rgba(var(--dc-rgb, 139, 92, 246), 0.22);
  color: var(--dc, var(--accent));
  animation: voiceMicPulse 1.1s ease-in-out infinite;
}
@keyframes voiceMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dc-rgb, 139, 92, 246), 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(var(--dc-rgb, 139, 92, 246), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-mic-btn.listening { animation: none; }
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--dc, var(--accent));
  box-shadow: 0 0 0 3px rgba(var(--dc-rgb, 139, 92, 246), 0.18);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 0.7; }

.scale {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.scale-opt {
  flex: 1;
  text-align: center;
  padding: 14px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  font-size: 1.4rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.28s var(--ease-bounce);
}
.scale-opt:active { transform: scale(0.9); transition-duration: 0.08s; }
.scale-opt.selected {
  border-color: var(--accent);
  background: rgba(143, 92, 247, 0.12);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px -4px rgba(143, 92, 247, 0.32);
  transform: scale(1.05);
}
.scale-caption { font-size: 0.7rem; color: var(--text-dim); text-align: center; margin-top: 4px; }

.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.2s var(--ease-bounce);
}
.choice:active { transform: scale(0.97); }
.choice.selected { border-color: var(--dc, var(--accent)); background: rgba(var(--dc-rgb, 143, 92, 247), 0.14); }
.choice-icon { display: flex; align-items: center; gap: 12px; }
.choice-icon .dom-icon { flex-shrink: 0; }

.nav {
  display: flex;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  position: sticky;
  bottom: calc(10px + var(--safe-bottom));
  margin-top: auto;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}
.nav-btn {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 0.68rem;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-icon { width: var(--icon-md); height: var(--icon-md); stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn.active { color: var(--accent); background: var(--panel-2); }
.nav-btn.active .nav-icon { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.35)); }

.phase {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.phase-head {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--panel-2);
}
.phase-title { font-weight: 600; font-size: 0.95rem; }
.phase-progress { font-size: 0.78rem; color: var(--text-dim); }
.phase-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.phase-bar-fill { height: 100%; background: linear-gradient(90deg, var(--dc, var(--accent)), var(--accent-2)); transition: width 0.5s var(--ease-smooth); }

.task-list { display: flex; flex-direction: column; }
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  transition: background 0.15s ease;
}
.task-row:hover { background: rgba(255, 255, 255, 0.02); }
.task-row.search-highlight { animation: searchHighlightPulse 1.6s ease-out; }
@keyframes searchHighlightPulse {
  0% { background: rgba(var(--dc-rgb, 139, 92, 246), 0.28); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .task-row.search-highlight { animation: none; background: rgba(var(--dc-rgb, 139, 92, 246), 0.28); } }
.task-check {
  width: 23px;
  height: 23px;
  border-radius: 11px;
  border: 1.5px solid var(--text-dim);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.3s var(--ease-bounce);
}
.task-check:active { transform: scale(0.82); transition-duration: 0.08s; }
.task-check.done { background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-2)); border-color: transparent; color: white; transform: scale(1.06); }
.task-check.blocked { border-color: var(--danger); color: var(--danger); }
.task-check.disabled { opacity: 0.35; cursor: not-allowed; }
.task-body { flex: 1; }
.task-title { font-size: 0.92rem; }
.task-title.done { text-decoration: line-through; color: var(--text-dim); }
.goal-domain-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dc, var(--text-dim));
}
.goal-domain-tag .dom-icon { width: 11px; height: 11px; }
.task-tag {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--text-dim);
  padding: 0;
  margin-top: 4px;
}
.task-tag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dc, var(--accent));
  margin-right: 6px;
  opacity: 0.7;
}

.task-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.task-icon-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 5px 7px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.task-icon-btn:hover { color: var(--danger); background: var(--panel-2); }
.task-icon-btn[data-toggle-partner]:hover { color: var(--accent); }
.task-icon-btn[data-toggle-partner].active { color: var(--accent); background: rgba(var(--accent-rgb, 139, 92, 246), 0.16); }

.icon-inline { display: inline-flex; width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.icon-inline svg { width: 100%; height: 100%; }
.icon-btn { display: inline-flex; align-items: center; gap: 7px; }
.icon-btn svg { flex-shrink: 0; }

.tip-spark { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; color: var(--gold); margin-top: 1px; }

.streak-flame {
  color: var(--gold);
  transform-origin: center 90%;
  animation: flameFlicker 1.6s ease-in-out infinite;
}
.streak-flame-0 { opacity: 0.4; animation: none; }
.streak-flame-1 { color: var(--gold); }
.streak-flame-2 { color: #fb923c; filter: drop-shadow(0 0 3px rgba(251, 146, 60, 0.55)); animation-duration: 1.2s; }
.streak-flame-3 { color: #f97316; filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.7)); animation-duration: 0.95s; transform: scale(1.15); }
.streak-flame-4 { color: #ef4444; filter: drop-shadow(0 0 7px rgba(239, 68, 68, 0.8)); animation-duration: 0.75s; transform: scale(1.3); }
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  25% { transform: scale(1.08) rotate(2deg); }
  50% { transform: scale(0.96) rotate(-1deg); }
  75% { transform: scale(1.05) rotate(3deg); }
}
.streak-flame-3, .streak-flame-4 { animation-name: flameFlickerBig; }
@keyframes flameFlickerBig {
  0%, 100% { transform: scale(1.15) rotate(-4deg); }
  25% { transform: scale(1.28) rotate(3deg); }
  50% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.22) rotate(4deg); }
}
.streak-flame-4 { animation-name: flameFlickerHuge; }
@keyframes flameFlickerHuge {
  0%, 100% { transform: scale(1.3) rotate(-5deg); }
  25% { transform: scale(1.45) rotate(4deg); }
  50% { transform: scale(1.15) rotate(-3deg); }
  75% { transform: scale(1.4) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-flame { animation: none !important; }
}

.streak-freeze-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #7dd3fc;
  background: rgba(125, 211, 252, 0.12);
  border-radius: 999px;
  padding: 1px 6px 1px 5px;
}
.streak-freeze-badge svg { flex-shrink: 0; }

/* ---------- linked account badge (shown above the domain page it feeds) ---------- */

.integration-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px 5px 8px;
  margin-bottom: 4px;
}
.integration-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.integration-dot-strava { background: #fc4c02; box-shadow: 0 0 8px rgba(252, 76, 2, 0.6); }

/* ---------- streak popup (gained / frozen / degraded / lost) ---------- */
/* Duolingo-style deliberate popup (icon + fill bar + explicit dismiss) instead of the
   previous auto-fading corner toast -- reuses the exact trophy-popup-card/trophyPopIn/
   trophyIconPulse chrome (see "trophies" below) so every celebratory popup in the app
   shares one visual language. */

.streak-popup-card {
  width: 100%;
  max-width: 320px;
  margin: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
  animation: trophyPopIn 0.55s var(--ease-bounce) both;
}
.streak-popup-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: trophyIconPulse 1.4s ease-in-out infinite;
}
.streak-popup-icon svg { width: 34px; height: 34px; }
.streak-popup-title { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 600; margin-top: 2px; }
.streak-popup-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--panel);
  overflow: hidden;
  margin: 16px 0 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.streak-popup-bar-fill { height: 100%; border-radius: 5px; width: 0%; transition: width 1s var(--ease-bounce) 0.15s; }
.streak-popup-card .btn { margin-top: 14px; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .streak-popup-bar-fill { transition: width 0.4s ease; }
}

.streak-popup-gained .streak-popup-icon { color: var(--gold); background: radial-gradient(circle, rgba(245, 196, 81, 0.24), transparent 70%); box-shadow: 0 0 26px rgba(245, 196, 81, 0.4); }
.streak-popup-gained .streak-popup-bar-fill { background: linear-gradient(90deg, var(--gold), #fb923c); }

.streak-popup-frozen .streak-popup-icon { color: #7dd3fc; background: radial-gradient(circle, rgba(125, 211, 252, 0.24), transparent 70%); box-shadow: 0 0 26px rgba(125, 211, 252, 0.4); }
.streak-popup-frozen .streak-popup-bar-fill { background: linear-gradient(90deg, #7dd3fc, #38bdf8); }

.streak-popup-degraded .streak-popup-icon { color: #fbbf24; background: radial-gradient(circle, rgba(251, 191, 36, 0.22), transparent 70%); box-shadow: 0 0 24px rgba(251, 191, 36, 0.35); }
.streak-popup-degraded .streak-popup-bar-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

.streak-popup-lost .streak-popup-icon { color: var(--danger); background: radial-gradient(circle, rgba(251, 113, 133, 0.2), transparent 70%); box-shadow: 0 0 22px rgba(251, 113, 133, 0.3); }
.streak-popup-lost .streak-popup-bar-fill { background: linear-gradient(90deg, var(--danger), #fb7185); }

/* ---------- trophies ---------- */

.trophy-btn { position: relative; }
.trophy-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1204;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- nav menu dropdown (Amis/Notifications/Trophées/Profil/Paramètres) ---------- */
.nav-menu-wrap { position: relative; }
.nav-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 45;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: navMenuIn 0.15s var(--ease-bounce);
}
@keyframes navMenuIn { 0% { opacity: 0; transform: translateY(-6px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .nav-menu-dropdown { animation: none; } }
.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.nav-menu-item:active { background: var(--panel-2); }
@media (hover: hover) { .nav-menu-item:hover { background: var(--panel-2); } }
.nav-menu-item-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--text-dim); }
.nav-menu-item-label { flex: 1; }
.nav-menu-item-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1204;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sync-status-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  cursor: default;
}
.sync-status-saving { background: var(--accent-2); animation: syncPulse 1s ease-in-out infinite; }
.sync-status-error { background: var(--danger); }
.sync-status-offline { background: var(--text-dim); }
@keyframes syncPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.trophy-popup-card {
  width: 100%;
  max-width: 320px;
  margin: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
  animation: trophyPopIn 0.55s var(--ease-bounce) both;
}
@keyframes trophyPopIn {
  0% { opacity: 0; transform: scale(0.6) translateY(20px) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
.trophy-popup-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--tc-rgb, 245, 196, 81));
  background: radial-gradient(circle, rgba(var(--tc-rgb, 245, 196, 81), 0.22), transparent 70%);
  box-shadow: 0 0 24px rgba(var(--tc-rgb, 245, 196, 81), 0.4);
  animation: trophyIconPulse 1.4s ease-in-out infinite;
}
.trophy-popup-icon svg { width: var(--icon-lg); height: var(--icon-lg); }
@keyframes trophyIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.trophy-popup-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--tc-rgb, 245, 196, 81)); font-weight: 700; }
.trophy-popup-name { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600; margin-top: 4px; }
.trophy-popup-card .btn { margin-top: 16px; width: 100%; }

.garden-evolve-popup-card {
  width: 100%;
  max-width: 340px;
  margin: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
  animation: trophyPopIn 0.55s var(--ease-bounce) both;
}
.garden-evolve-popup-art {
  width: 128px;
  height: 128px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dc-rgb, 167, 139, 250), 0.28), transparent 70%);
  box-shadow: 0 0 30px rgba(var(--dc-rgb, 167, 139, 250), 0.45);
  animation: trophyIconPulse 1.4s ease-in-out infinite;
}
.garden-evolve-popup-art svg { width: 88px; height: 88px; }
.garden-evolve-popup-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--dc-rgb, 167, 139, 250)); font-weight: 700; }
.garden-evolve-popup-name { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 600; margin-top: 4px; }
.garden-evolve-popup-card .btn { margin-top: 18px; width: 100%; }

/* ---------- briefing / evening debrief: centered popup ---------- */

.checkin-overlay { padding: 16px; }
.checkin-popup-card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100dvh - var(--safe-top) - 24px);
  overflow-y: auto;
  animation: trophyPopIn 0.5s var(--ease-bounce) both;
}
.checkin-illustration {
  width: 76px;
  height: 76px;
  margin: 0 auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dc-rgb, 245, 196, 81), 0.24), transparent 70%);
  box-shadow: 0 0 26px rgba(var(--dc-rgb, 245, 196, 81), 0.32);
  flex-shrink: 0;
}
.checkin-illustration svg { width: 50px; height: 50px; }
.checkin-step-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.checkin-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s ease, transform 0.2s ease; }
.checkin-step-dot.active { background: rgb(var(--dc-rgb, 167, 139, 250)); transform: scale(1.35); }
.checkin-todo-reminder { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checkin-todo-reminder li { font-size: 0.85rem; padding-left: 16px; position: relative; }
.checkin-todo-reminder li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.checkin-todo-list .task-row { padding: 8px 0; }
.checkin-todo-list:empty { display: none; }

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.trophy-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-align: center;
}
.trophy-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trophy-tile.earned .trophy-tile-icon {
  color: rgb(var(--tc-rgb, 245, 196, 81));
  background: radial-gradient(circle, rgba(var(--tc-rgb, 245, 196, 81), 0.22), transparent 70%);
  box-shadow: 0 0 10px rgba(var(--tc-rgb, 245, 196, 81), 0.35);
}
.trophy-tile.locked { opacity: 0.45; }
.trophy-tile.locked .trophy-tile-icon { color: var(--text-dim); background: var(--panel-2); }
.trophy-tile-name { font-size: 0.66rem; line-height: 1.2; color: var(--text-dim); }
.trophy-tile.earned .trophy-tile-name { color: var(--text); }

.search-result-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.search-result-row:active { transform: scale(0.98); }
@media (hover: hover) {
  .search-result-row:hover { background: var(--panel); border-color: rgba(var(--dc-rgb, 139, 92, 246), 0.3); }
}
.search-result-type {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent);
}
.search-result-label { font-size: 0.92rem; }
.search-result-sub { font-size: 0.76rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.briefing-recap {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.briefing-recap .pill { background: var(--panel); font-weight: 600; color: var(--text); }

.history-item {
  border-top: 1px solid var(--border);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-item:first-child { border-top: none; padding-top: 0; }
.history-date { font-size: 0.8rem; color: var(--text-dim); }

a { color: var(--accent); }

.stack-tight { display: flex; flex-direction: column; gap: 4px; }

.link-btn {
  background: rgba(var(--dc-rgb, 139, 92, 246), 0.12);
  border: 1px solid rgba(var(--dc-rgb, 139, 92, 246), 0.25);
  color: var(--dc, var(--accent));
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.28s var(--ease-bounce);
}
.link-btn:hover { background: rgba(var(--dc-rgb, 139, 92, 246), 0.2); border-color: rgba(var(--dc-rgb, 139, 92, 246), 0.4); }
.link-btn:active { transform: scale(0.94); transition-duration: 0.08s; }
.link-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Chrysa orb ---------- */

.chrysa-orb {
  --orb-size: 64px;
  width: var(--orb-size);
  height: var(--orb-size);
  position: relative;
  flex-shrink: 0;
  animation: orbFloat 6s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--orb-size) * -0.07)); }
}

@media (prefers-reduced-motion: reduce) {
  .chrysa-orb { animation: none; }
}
.chrysa-orb--sm { --orb-size: 22px; }
.chrysa-orb--md { --orb-size: 64px; }
.chrysa-orb--lg { --orb-size: 128px; }

.chrysa-orb__sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 32%),
    radial-gradient(circle at 60% 65%, #4c1d95 0%, #2e1065 55%, #0b0d14 100%);
  box-shadow:
    0 0 calc(var(--orb-size) * 0.45) rgba(139, 92, 246, 0.4),
    inset 0 0 calc(var(--orb-size) * 0.18) rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: orbBreathe 4.5s ease-in-out infinite;
}

@keyframes orbBreathe {
  0%, 100% { box-shadow: 0 0 calc(var(--orb-size) * 0.42) rgba(139, 92, 246, 0.35), inset 0 0 calc(var(--orb-size) * 0.18) rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 calc(var(--orb-size) * 0.58) rgba(139, 92, 246, 0.55), inset 0 0 calc(var(--orb-size) * 0.18) rgba(0, 0, 0, 0.6); }
}

.chrysa-orb__plasma {
  position: absolute;
  width: 78%;
  height: 78%;
  top: 10%;
  left: 14%;
  background: radial-gradient(circle, var(--accent-2) 0%, var(--accent) 45%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--orb-size) * 0.045));
  opacity: 0.85;
  border-radius: 42% 58% 53% 47% / 41% 44% 56% 59%;
  animation: plasmaMove 7s ease-in-out infinite;
}
.chrysa-orb__plasma--2 {
  animation-duration: 9s;
  animation-direction: reverse;
  opacity: 0.6;
  filter: blur(calc(var(--orb-size) * 0.07));
}

@keyframes plasmaMove {
  0% { transform: translate(-6%, -4%) rotate(0deg) scale(1); border-radius: 42% 58% 53% 47% / 41% 44% 56% 59%; }
  50% { transform: translate(5%, 6%) rotate(150deg) scale(1.12); border-radius: 58% 42% 47% 53% / 55% 62% 38% 45%; }
  100% { transform: translate(-6%, -4%) rotate(360deg) scale(1); border-radius: 42% 58% 53% 47% / 41% 44% 56% 59%; }
}

.chrysa-orb__spark { position: absolute; inset: 0; animation: orbitSpin linear infinite; }
.chrysa-orb__spark::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 6%;
  height: 6%;
  margin-left: -3%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px var(--accent-2);
}
.chrysa-orb__spark.s1 { animation-duration: 5s; }
.chrysa-orb__spark.s2 { animation-duration: 6.5s; animation-direction: reverse; }
.chrysa-orb__spark.s2::before { top: 16%; width: 4%; height: 4%; }
.chrysa-orb__spark.s3 { animation-duration: 8s; }
.chrysa-orb__spark.s3::before { top: 22%; width: 3.5%; height: 3.5%; opacity: 0.8; }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.chrysa-orb--pulse .chrysa-orb__sphere { animation: orbPulse 1.8s ease-in-out infinite; }
@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 calc(var(--orb-size) * 0.45) rgba(139, 92, 246, 0.4), inset 0 0 calc(var(--orb-size) * 0.18) rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 calc(var(--orb-size) * 0.7) rgba(34, 211, 238, 0.6), inset 0 0 calc(var(--orb-size) * 0.18) rgba(0, 0, 0, 0.6); }
}

.thinking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

/* ---------- chat ---------- */

.chrysa-fab {
  position: fixed;
  right: 20px;
  bottom: calc(90px + var(--safe-bottom));
  z-index: 40;
  cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(139, 92, 246, 0.45));
  transition: transform 0.15s ease;
  touch-action: none;
}
.chrysa-fab:active { transform: scale(0.9); }
.chrysa-fab.dragging {
  transform: scale(1.15);
  filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.65));
  transition: none;
}

/* ---------- notification toasts (friend/binôme events while the app is open) ---------- */
.notification-toast-stack {
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
.notification-toast {
  pointer-events: auto;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: notificationToastIn 0.25s var(--ease-bounce);
}
@keyframes notificationToastIn { 0% { opacity: 0; transform: translateY(-14px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .notification-toast { animation: none; } }

/* ---------- panic bubble (dragging the orb around) ---------- */
.fab-panic-bubble {
  position: fixed;
  z-index: 41;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  pointer-events: none;
  animation: panicBubblePop 0.18s var(--ease-bounce);
}
.fab-panic-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fab-panic-bubble.tier-1 { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); }
.fab-panic-bubble.tier-2 { color: #fb923c; border-color: rgba(251, 146, 60, 0.5); }
.fab-panic-bubble.tier-3 { color: #f87171; border-color: rgba(248, 113, 113, 0.6); animation: panicBubblePop 0.18s var(--ease-bounce), panicShake 0.35s ease-in-out infinite; }
.fab-panic-bubble.tier-4 { color: #ef4444; border-color: rgba(239, 68, 68, 0.75); font-size: 0.82rem; animation: panicBubblePop 0.18s var(--ease-bounce), panicShake 0.22s ease-in-out infinite; }
@keyframes panicBubblePop { 0% { opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(0.6); } 100% { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); } }
@keyframes panicShake { 0%, 100% { margin-left: 0; } 25% { margin-left: -3px; } 75% { margin-left: 3px; } }
@media (prefers-reduced-motion: reduce) { .fab-panic-bubble, .fab-panic-bubble.tier-3, .fab-panic-bubble.tier-4 { animation: none; } }

.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 8, 20, 0.5);
  backdrop-filter: blur(5px);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.chat-panel {
  width: 100%;
  max-width: 640px;
  /* dvh (not vh) so the sheet sizes against the actually-visible viewport --
     on mobile Safari `vh` includes space hidden behind the collapsed address bar /
     status bar, which made this taller than the real screen and pushed the header
     up past the top edge, under the notch/status bar where the close button
     couldn't be tapped. The safe-top subtraction is a second guarantee: even if
     the height calc is ever off, the panel can never grow into the notch area. */
  height: min(82dvh, 720px);
  max-height: calc(100dvh - var(--safe-top) - 12px);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -14px 44px -12px rgba(168, 130, 255, 0.32), 0 -4px 20px -6px rgba(255, 148, 102, 0.14);
  animation: slideUp 0.4s var(--ease-bounce) both;
}
/* A touch of overshoot (past y=0, then settling) makes the sheet feel tossed up
   into place rather than mechanically translated -- consistent with the bouncy
   entrance used for cards, so every surface in the app "lands" the same way. */
@keyframes slideUp {
  from { transform: translateY(36px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Mirrored exit animations, driven by the shared closeModal() JS helper adding
   .modal-closing to the overlay right before it's torn out of the DOM -- previously
   every modal just vanished instantly on close, entrance-only. */
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(28px) scale(0.98); opacity: 0; }
}
@keyframes trophyPopOut {
  0% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
  100% { opacity: 0; transform: scale(0.7) translateY(14px) rotate(3deg); }
}
.chat-overlay.modal-closing { animation: fadeOut 0.18s ease both; }
.chat-overlay.modal-closing .chat-panel { animation: slideDown 0.18s var(--ease-smooth) both; }
.chat-overlay.modal-closing .trophy-popup-card,
.chat-overlay.modal-closing .garden-evolve-popup-card { animation: trophyPopOut 0.2s var(--ease-smooth) both; }
@media (prefers-reduced-motion: reduce) {
  .modal-closing, .modal-closing * { animation: none !important; }
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-header .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1.02rem; }
.chat-close {
  background: rgba(var(--dc-rgb, 143, 92, 247), 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease, transform 0.3s var(--ease-bounce);
}
.chat-close:hover { color: var(--text); background: rgba(var(--dc-rgb, 143, 92, 247), 0.2); transform: rotate(90deg); }
.chat-close:active { transform: scale(0.85) rotate(90deg); transition-duration: 0.08s; }

/* ---------- chat: conversation history sidebar (ChatGPT-style, slide-in drawer) ---------- */

.chat-history-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 14, 0.55);
  z-index: 4;
  animation: fadeIn 0.2s ease both;
}
.chat-history-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(82%, 300px);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-right: 1px solid var(--border);
  z-index: 5;
  display: flex;
  flex-direction: column;
  animation: chatSidebarIn 0.28s var(--ease-smooth) both;
}
@keyframes chatSidebarIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.chat-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  font-weight: 700;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.chat-history-new {
  margin: 0 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-history-list { flex: 1; overflow-y: auto; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.chat-history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-history-item:hover, .chat-history-item.active { background: rgba(var(--dc-rgb, 143, 92, 247), 0.14); }
.chat-history-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-history-item-title { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-item-date { font-size: 0.68rem; color: var(--text-dim); }
/* Not hover-only-visible: this is a touch-first mobile UI, and :hover never fires on
   tap -- the delete button would otherwise be permanently unreachable on a phone. */
.chat-history-item .task-icon-btn { opacity: 0.55; flex-shrink: 0; }
.chat-history-item:hover .task-icon-btn, .chat-history-item.active .task-icon-btn { opacity: 1; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-date-divider {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 2px;
}
.chat-date-divider::before, .chat-date-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.chat-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  animation: msgIn 0.25s var(--ease-smooth) both;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-glow));
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-row textarea {
  flex: 1;
  min-height: auto;
  height: 44px;
  resize: none;
  padding: 11px 14px;
}
.chat-send-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; padding: 0; }

/* ---------- domains & rings ---------- */

.stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.domain-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.domain-pills::-webkit-scrollbar { display: none; }
.domain-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.domain-pill:active { transform: scale(0.96); }
.domain-pill.active {
  color: white;
  background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-glow));
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(var(--dc-rgb, 139, 92, 246), 0.5);
}

.domain-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--dc-rgb, 139, 92, 246));
  box-shadow: 0 0 8px 1px rgba(var(--dc-rgb, 139, 92, 246), 0.7);
  flex-shrink: 0;
}

.domain-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, rgba(var(--dc-rgb, 139, 92, 246), 0.4), var(--panel-2) 68%);
  border: 1px solid rgba(var(--dc-rgb, 139, 92, 246), 0.4);
  box-shadow: 0 0 24px -4px rgba(var(--dc-rgb, 139, 92, 246), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: badgeGlow 4s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 20px -4px rgba(var(--dc-rgb, 139, 92, 246), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50% { box-shadow: 0 0 30px -2px rgba(var(--dc-rgb, 139, 92, 246), 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
  .domain-icon-badge { animation: none; }
}

.rings-card { align-items: center; }
.rings-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.rings-labels {
  display: flex;
  justify-content: space-around;
  width: 100%;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}
.ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ring svg { width: 100%; height: 100%; }
.ring-fill { transition: stroke-dashoffset 0.6s var(--ease-smooth); }
.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.ring-icon { font-size: 1.1rem; }

/* ---------- top bar & profile ---------- */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.top-bar-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.top-bar-name {
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar-stat-row { display: flex; align-items: center; gap: 5px; }
.top-bar-stat-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.top-bar-bar {
  flex: 1;
  min-width: 32px;
  max-width: 96px;
  height: 4px;
  border-radius: 3px;
  background: var(--panel-2);
  overflow: hidden;
}
.top-bar-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.top-bar-actions { flex-shrink: 0; }
.profile-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  transition: color 0.15s ease, transform 0.3s var(--ease-bounce), box-shadow 0.2s ease;
}
.profile-btn:active { transform: scale(0.88); transition-duration: 0.08s; }
.profile-btn.active-toggle { color: var(--accent); box-shadow: var(--shadow-card), 0 0 0 2px rgba(var(--dc-rgb, 143, 92, 247), 0.3); }
@media (hover: hover) {
  .profile-btn:hover { box-shadow: var(--shadow-card), 0 0 0 3px rgba(var(--dc-rgb, 143, 92, 247), 0.14); }
}
.profile-btn .nav-icon { width: 20px; height: 20px; }

/* ---------- install-to-home-screen banner ---------- */

.install-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--panel);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  animation: installBannerIn 0.3s var(--ease-smooth);
}
@keyframes installBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.install-banner-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
}
.install-banner-icon img { width: 100%; height: 100%; display: block; }
.install-banner-icon.lg { width: 64px; height: 64px; border-radius: 16px; }
.install-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-banner-text strong { font-size: 0.9rem; }
.install-banner-text span { font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; }
.install-banner-btn {
  flex-shrink: 0;
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-glow));
  color: white;
  box-shadow: var(--shadow-btn);
  transition: transform 0.08s ease;
  white-space: nowrap;
}
.install-banner-btn:active { transform: scale(0.96); }
.install-banner-close {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ios-install-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; text-align: left; width: 100%; }
.ios-install-steps li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--text-dim); }
.ios-install-steps li strong { color: var(--text); font-weight: 600; }
.ios-install-step-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

/* ---------- bottom nav (mobile tab bar) ---------- */

#app:has(.bottom-nav) {
  padding-bottom: calc(88px + var(--safe-bottom));
}
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + var(--safe-bottom));
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
  max-width: calc(100% - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.3s var(--ease-bounce);
}
.bottom-nav-btn:active { transform: scale(0.86); transition-duration: 0.08s; }
.bottom-nav-btn.active {
  color: white;
  background: linear-gradient(135deg, var(--dc, var(--accent)) 0%, var(--accent-glow) 70%, var(--accent-warm) 150%);
  box-shadow: 0 8px 18px -6px rgba(var(--dc-rgb, 143, 92, 247), 0.55);
  transform: scale(1.06);
}
.bottom-nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
}
.bottom-nav-icon svg { width: 100%; height: 100%; }

.bottom-nav-garden:not(.active) .bottom-nav-icon { animation: gardenTabPulse 2.6s ease-in-out infinite; }
@keyframes gardenTabPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav-garden:not(.active) .bottom-nav-icon { animation: none; }
}

@media (min-width: 900px) {
  .bottom-nav { bottom: calc(24px + var(--safe-bottom)); }
}

/* ---------- mini evolution chart ---------- */

.mini-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 90px;
  padding-top: 10px;
}
.mini-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  height: 100%;
}
.mini-bar {
  width: 22px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  min-height: 3px;
}
.mini-bar-label { font-size: 0.62rem; color: var(--text-dim); }
/* Compact variant for "Mes tendances" -- 3 stacked mini-charts (sleep/sport/business)
   need to be shorter than the single full-size evolution chart. */
.mini-chart-sm { height: 46px; padding-top: 4px; }
.mini-chart-sm .mini-bar { width: 12px; }

.trend-regularity-row {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}
.trend-regularity-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.62rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------- toggle switch ---------- */

.switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(128, 128, 160, 0.28);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s var(--ease-bounce), width 0.12s ease, left 0.12s ease;
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }
/* Squash the knob slightly while pressed -- released on the next transition tick,
   so it "snaps back" round on the way to its new side, same bouncy language as .btn. */
.switch:active::after { width: 22px; }
.switch.on:active::after { left: -1px; }
.switch.disabled { opacity: 0.5; pointer-events: none; }

/* ---------- photo gallery ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.photo-thumb {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--border);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px 6px;
  font-size: 0.6rem;
  color: white;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
}

.illus-svg { width: 100%; height: 100%; display: block; object-fit: contain; }
.dom-icon { display: inline-flex; flex-shrink: 0; vertical-align: middle; }

.priority-num {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-2));
}

/* ---------- CTA buttons (measurements, performances, photos evolution) ---------- */

.evolution-card { padding: 16px; gap: 0; }

.cta-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(var(--dc-rgb, 34, 211, 238)), rgba(var(--dc-rgb, 34, 211, 238), 0.55));
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.1s ease;
}
.cta-btn:active { transform: scale(0.97); }
.cta-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.cta-badge {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}
.cta-badge svg { display: block; }

.cta-text { display: flex; flex-direction: column; gap: 2px; }
.cta-title { font-weight: 700; color: #06202a; font-size: 0.92rem; line-height: 1.3; }
.cta-sub { font-size: 0.74rem; color: rgba(6, 32, 42, 0.75); }

/* ---------- Photo evolution modal ---------- */

.folder-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.28s var(--ease-bounce);
}
.folder-chip:active { transform: scale(0.94); transition-duration: 0.08s; }
.folder-chip.active {
  color: white;
  background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-glow));
  border-color: transparent;
}

.photo-list { display: flex; flex-direction: column; gap: 10px; }
.photo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.photo-row:hover { border-color: rgba(var(--dc-rgb, 139, 92, 246), 0.4); }
.photo-row img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: block; }
.photo-row-date { font-size: 0.85rem; color: var(--text-dim); flex: 1; }

/* ---------- Measurement & performance history rows ---------- */

.measurement-row, .performance-row {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.measurement-row-date, .performance-row-date { font-size: 0.78rem; color: var(--text-dim); }
.measurement-row-values { font-size: 0.88rem; }
.performance-row-name { font-weight: 600; font-size: 0.92rem; }
.performance-row-value { font-size: 0.88rem; color: var(--text-dim); }

/* ---------- Illustrated card backgrounds ---------- */

.card-illustrated { position: relative; overflow: hidden; }
.card-illustrated > *:not(.card-illustration) { position: relative; z-index: 1; }
.card-illustration {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: bgDrift1 32s ease-in-out infinite alternate;
}
.card-illustration.variant-b { animation-name: bgDrift2; animation-duration: 37s; }
.card-illustration.variant-c { animation-name: bgDrift3; animation-duration: 28s; }

.dashboard-banner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@keyframes bgDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3%, -2%) scale(1.06); }
}
@keyframes bgDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.07); }
}
@keyframes bgDrift3 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(2%, 3%) rotate(3deg); }
}

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

/* ---------- Business timers ---------- */

.timer-card { position: relative; overflow: hidden; }
.timer-illustration { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.timer-card > *:not(.timer-illustration) { position: relative; z-index: 1; }

.timer-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.timer-preset {
  flex: 1;
  min-width: 88px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.timer-preset:active { transform: scale(0.96); }
.timer-preset-icon { width: 24px; height: 24px; }
.timer-preset.active {
  border-color: var(--dc, var(--accent));
  color: var(--dc, var(--accent));
  background: rgba(var(--dc-rgb, 139, 92, 246), 0.16);
}

.timer-display {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin: 2px 0;
}

.timer-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.timer-bar-fill { height: 100%; background: linear-gradient(90deg, var(--dc, var(--accent)), var(--accent-2)); transition: width 1s linear; }

/* ---------- Bien-être: méditations & respiration ---------- */

.meditation-list { display: flex; flex-direction: column; gap: 10px; }
.meditation-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.meditation-row:active { transform: scale(0.98); }
.meditation-row:hover { border-color: rgba(var(--dc-rgb, 129, 140, 248), 0.4); }
.meditation-row-icon { width: 34px; height: 34px; flex-shrink: 0; }
.meditation-row-icon svg { width: 100%; height: 100%; display: block; }
.meditation-row-text { display: flex; flex-direction: column; gap: 2px; }
.meditation-row-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.meditation-row-sub { font-size: 0.76rem; color: var(--text-dim); }

.meditation-orb { width: 64px; height: 64px; display: block; animation: orbFloat 6s ease-in-out infinite; }
.meditation-step-text { max-width: 340px; line-height: 1.5; color: var(--text); }

.breath-circle-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breath-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(var(--dc-rgb, 129, 140, 248), 0.95), rgba(var(--dc-rgb, 129, 140, 248), 0.4));
  box-shadow: 0 0 50px rgba(var(--dc-rgb, 129, 140, 248), 0.45);
  transform: scale(0.6);
  transition: transform 4s ease-in-out;
}
.breath-label {
  position: absolute;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}

/* ---------- Tableau de bord: identity card & radar ---------- */

.identity-card { gap: 10px; }
.identity-card-lg { padding: 24px 22px; }

/* ---------- dashboard widgets ---------- */
.widgets-section { margin-bottom: 4px; }
.widgets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.widget-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-card);
}
.widget-card[data-select-domain], .widget-card[data-open-league-detail] { cursor: pointer; }
.widget-icon { font-size: 1.1rem; }
.widget-value {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.widget-value-text {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.widget-label { font-size: 0.7rem; color: var(--text-dim); }

.widget-edit-wrap {
  position: relative;
  border-radius: 14px;
  outline: 1.5px dashed var(--border);
  outline-offset: 2px;
}
.widget-edit-wrap .widget-card { pointer-events: none; }
.widget-edit-wrap.widget-edit-hidden { opacity: 0.4; }
.widget-edit-wrap.dragging {
  z-index: 5;
  transition: none;
}
.widget-edit-handle,
.widget-edit-visibility {
  position: absolute;
  top: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: pointer;
  touch-action: none;
}
.widget-edit-handle { left: -8px; cursor: grab; }
.widget-edit-visibility { right: -8px; touch-action: manipulation; }
.widget-edit-visibility.active-toggle { color: var(--accent); }
.widget-edit-wrap.dragging .widget-edit-handle { cursor: grabbing; color: var(--accent); }

.completion-circles-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 12px 8px;
}
.completion-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.completion-circle-item .ring-label { font-size: 0.78rem; font-weight: 700; }
.completion-circle-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  max-width: 70px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-badge {
  flex-shrink: 0;
  animation: orbFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(167, 139, 250, 0.4));
}
.friend-profile-hero { text-align: center; }
.friend-profile-photo-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.friend-profile-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 2px solid var(--border);
  box-shadow: 0 0 24px -4px rgba(var(--dc-rgb, 167, 139, 250), 0.5);
}
.friend-profile-photo-fallback {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
}
.friend-profile-level-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  background: var(--panel);
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.league-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px auto 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  width: fit-content;
  font-family: inherit;
  cursor: pointer;
}
/* Small, understated -- a status marker next to the name, not a promotional element. Reuses
   the existing --gold token (already theme-aware) so it needs no dark/light override here. */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  background: rgba(245, 196, 81, 0.16);
  border: 1px solid rgba(245, 196, 81, 0.4);
  border-radius: 999px;
  padding: 1px 7px 1px 5px;
}

/* ---------- plan/forfait screen + freemium intro popup ---------- */

.plan-hero { text-align: center; }
.plan-hero .quiz-reveal-icon { color: var(--gold); }

/* 3-column pricing-table grid: label | Gratuit | Premium. The Premium column gets a
   continuous gold-tinted band down the whole table (not just its header) so the eye reads
   it as one column, the classic "this is the one to pick" pricing-table cue. */
.plan-compare {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.plan-compare-row {
  display: grid;
  grid-template-columns: 1fr 72px 84px;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
}
.plan-compare-row:first-child { border-top: none; }
.plan-compare-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 8px;
  padding-bottom: 8px;
}
.plan-compare-label { font-weight: 500; }
.plan-compare-free { text-align: center; color: var(--text-dim); font-size: 0.76rem; }
.plan-compare-premium-col {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(245, 196, 81, 0.1);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -9px -10px;
  padding: 9px 10px;
}
.plan-compare-head .plan-compare-premium-col { background: rgba(245, 196, 81, 0.18); }
/* Icon-in-circle + name, not just an inline emoji character -- gives the personality type
   real visual weight befitting "who you are" rather than reading as one more small stat
   pill lost among the others. */
.personality-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px auto 0;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: var(--text);
  width: fit-content;
}
.personality-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 75%);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.personality-badge-name { font-size: 0.76rem; font-weight: 700; }

/* ---------- personality quiz: reveal + back button ---------- */

.quiz-reveal-icon {
  width: 84px;
  height: 84px;
  margin: 4px auto 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 72%);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
  animation: trophyPopIn 0.6s var(--ease-bounce) both, trophyIconPulse 1.6s ease-in-out 0.6s infinite;
}
.quiz-reveal-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(167, 139, 250); font-weight: 700; margin-top: 4px; }
.quiz-reveal-name { font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; font-weight: 600; }
.level-badge-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--dc-rgb, 167, 139, 250), 0.18);
  color: var(--dc, var(--accent));
  font-weight: 700;
  font-size: 0.7rem;
}

/* Elevated above the plain friend-request list sections (which are unboxed flowing divs)
   so binôme reads as the featured relationship rather than one setting among many. */
.binome-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--dc-rgb, 143, 92, 247), 0.35);
  background: linear-gradient(135deg, rgba(var(--dc-rgb, 143, 92, 247), 0.12), rgba(var(--dc-rgb, 143, 92, 247), 0.03));
}

.radar-chart { width: 100%; max-width: 260px; margin: 4px auto; display: block; }

.radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-top: 4px;
}

/* ---------- Settings (profile) ---------- */

.settings-divider {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 700;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.theme-toggle { display: flex; gap: 4px; background: var(--panel-2); border-radius: 999px; padding: 3px; }
.theme-opt {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-opt.active { background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-2)); color: white; }

/* ---------- Profile photo ---------- */

.profile-photo-block { display: flex; flex-direction: column; align-items: center; }

.profile-photo-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.profile-photo,
.profile-photo-fallback {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 2px solid var(--border);
  box-shadow: 0 0 24px -4px rgba(var(--dc-rgb, 167, 139, 250), 0.5);
}

.profile-photo-fallback { font-family: "Fraunces", Georgia, serif; font-size: 2.1rem; font-weight: 600; color: var(--dc, var(--accent)); }

.profile-photo-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-2));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Quiz ---------- */

.quiz-progress { height: 4px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.quiz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s ease; }
.quiz-axis-icon { width: 56px; height: 56px; margin: 0 auto; }
.quiz-result-orb { width: 64px; height: 64px; display: block; animation: orbFloat 6s ease-in-out infinite; }

/* ---------- Friend comparison ---------- */

.compare-table { display: flex; flex-direction: column; gap: 2px; }
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.compare-row:first-child { border-top: none; }
.compare-head { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }

/* Read-only mini garden shown on a friend's profile -- simplified, non-interactive version
   of .garden-parcel (no fence/decor cosmetics, those are personal to each account). */
.friend-garden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.friend-garden-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: #2a1c10;
  border: 3px solid #8a5a34;
}
.friend-garden-tile-art { width: 44px; height: 44px; }
.friend-garden-tile-art svg { width: 100%; height: 100%; display: block; }
.friend-garden-tile-name { font-size: 0.7rem; display: flex; align-items: center; gap: 4px; }
.friend-garden-tile-stage { font-size: 0.6rem; color: rgba(255, 255, 255, 0.7); }

/* ---------- Auth screens ---------- */

.boot-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card { max-width: 420px; margin: 8vh auto 0; gap: 16px; }

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}
.auth-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.auth-remember input[type="checkbox"]:active { transform: scale(0.88); }

/* ---------- Page sub-tabs (Aujourd'hui / Roadmap / Focus) ---------- */

.page-tabs {
  display: flex;
  gap: 4px;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 4px;
}
.page-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.page-tab.active { background: linear-gradient(135deg, var(--dc, var(--accent)), var(--accent-2)); color: white; }

/* ---------- Layout editor ---------- */

.layout-list { display: flex; flex-direction: column; }

.layout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  background: var(--bg);
}

.layout-row:last-child { border-bottom: none; }

.layout-row.hidden-row { opacity: 0.45; }

.layout-row.dragging {
  position: relative;
  z-index: 5;
  background: var(--panel-2);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  transition: none;
}

.layout-row-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: grab;
  /* 44px is Apple/Google's own minimum recommended touch target -- the icon itself stays
     16px, padding just widens the actual tappable/draggable box around it. */
  width: 44px;
  height: 44px;
  touch-action: none;
}
.layout-row.dragging .layout-row-handle { cursor: grabbing; color: var(--accent); }

.layout-row-label { flex: 1; min-width: 0; }

.layout-row-visibility {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.layout-row-visibility.active-toggle { color: var(--accent); }

/* ---------- category creator swatches ---------- */

.swatch-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgb(var(--sw-rgb));
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.color-swatch:active { transform: scale(0.9); }
.color-swatch.selected {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(var(--sw-rgb), 0.35);
}

.emoji-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.emoji-swatch:active { transform: scale(0.9); }
.emoji-swatch.selected { border-color: var(--text); }

.swatch-grid-scroll {
  max-height: 148px;
  overflow-y: auto;
  padding: 2px;
  margin-top: 0;
}
.color-hex-picker {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-dim);
}
.color-hex-picker input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* ---------- garden ---------- */

/* .view-fill (added only when activeDomain is "garden") turns .view from its normal
   content-height flex item into one that grows to consume whatever space is left in
   #app's viewport-height flex column -- see #app{min-height:100%} and html,body{height:
   100%} above. That's what lets the map fill the screen instead of just its content. */
.view-fill { flex: 1; display: flex; min-height: 0; }
.garden-page { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.garden-toolbar { position: absolute; top: 10px; right: 10px; z-index: 6; display: flex; gap: 8px; }
/* A single shared top-down field (base-builder style) instead of separate cards --
   parcels are grid cells directly on the field, the grid gap itself reading as the dirt
   paths between plots. Each parcel keeps its own --dc/--dc-rgb so the crop-dot art and
   border tint per domain without per-domain CSS. Row/column counts are set inline per
   render (see computeGridDims, garden.js) so the whole field -- not just each tile --
   fills the available screen regardless of how many parcels exist. */
/* The field itself: a few soft radial "sun" and grain-texture dots layered under a deep
   green gradient, plus a thick dark border standing in for a base-builder game's outer
   wall -- cartoon depth without needing real texture images. */
.garden-map {
  display: grid;
  gap: 9px;
  flex: 1;
  width: 100%;
  padding: 12px;
  background:
    radial-gradient(120% 55% at 28% -8%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.04) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 52%, rgba(255, 255, 255, 0.035) 0 3px, transparent 4px),
    radial-gradient(circle at 40% 84%, rgba(255, 255, 255, 0.035) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.03) 0 2px, transparent 3px),
    radial-gradient(circle at 8% 78%, rgba(255, 255, 255, 0.03) 0 2px, transparent 3px),
    linear-gradient(180deg, #274a2c, #17301d 55%, #0e2013);
  border: 4px solid #0c1f0e;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), var(--shadow-card);
}
/* Each parcel: a chunky rounded "wooden crate" frame (highlight top edge, shadow below,
   drop shadow for lift) with a thin inner ring tinted per-domain (--dc-rgb) so the game
   board reads as one coherent set with distinct owned plots, not a plain grid of cards. */
.garden-parcel {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #2a1c10;
  border: 5px solid #8a5a34;
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.3),
    inset 0 3px 4px rgba(255, 255, 255, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.38),
    0 7px 14px rgba(0, 0, 0, 0.42);
  transition: transform 0.12s var(--ease-bounce), box-shadow 0.12s ease;
}
.garden-parcel:active {
  transform: scale(0.94);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.4);
}
.garden-parcel.reserved { cursor: default; border-color: #52504a; opacity: 0.7; }
.garden-parcel-fence {
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 2px rgba(var(--dc-rgb, 148, 163, 184), 0.65);
  pointer-events: none;
  z-index: 2;
}
.garden-parcel.reserved .garden-parcel-fence { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
/* Glossy top sheen, purely decorative, sits above the plant art so every tile keeps a
   consistent "toy/cartoon" glaze regardless of its growth stage. */
.garden-parcel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%);
  pointer-events: none;
  z-index: 3;
}
.garden-parcel-empty {
  min-width: 0;
  min-height: 0;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px);
  border: 3px dashed rgba(255, 255, 255, 0.1);
}
.garden-parcel-art { position: absolute; inset: 0; }
.garden-parcel-art svg { width: 100%; height: 100%; display: block; }
.garden-parcel-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}
.garden-parcel-lock svg { width: 24px; height: 24px; }
.garden-parcel-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 7px 6px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 20%, transparent 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.garden-parcel-name {
  font-weight: 700;
  font-size: 0.66rem;
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.garden-parcel-stage { font-size: 0.56rem; color: rgba(255, 255, 255, 0.82); line-height: 1.15; }
.garden-parcel-bar { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.35); overflow: hidden; margin-top: 2px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); }
.garden-parcel-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(180deg, rgb(var(--dc-rgb, 52, 211, 153)), rgba(var(--dc-rgb, 52, 211, 153), 0.8)); }

/* ---------- garden cosmetics: unlockable parcel borders + seasonal decor ---------- */

.garden-border-bois { border-color: #8a5a34; }
.garden-border-pierre { border-color: #9aa3b0; }
.garden-border-or { border-color: #e8b84b; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 3px 4px rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.38), 0 0 16px rgba(232, 184, 75, 0.5); }
.garden-border-cristal { border-color: #7dd3fc; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 3px 4px rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.38), 0 0 18px rgba(125, 211, 252, 0.55); }
.garden-border-arcenciel {
  border-color: transparent;
  background-image: linear-gradient(#2a1c10, #2a1c10), linear-gradient(135deg, #f87171, #fbbf24, #34d399, #60a5fa, #c084fc, #f87171);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: rainbowBorderShift 6s linear infinite;
}
@keyframes rainbowBorderShift { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .garden-border-arcenciel { animation: none; } }
.garden-border-argent { border-color: #cbd5e1; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 3px 4px rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.38), 0 0 14px rgba(203, 213, 225, 0.45); }
.garden-border-saphir { border-color: #3b82f6; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 3px 4px rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.38), 0 0 16px rgba(59, 130, 246, 0.5); }
.garden-border-onyx { border-color: #18181b; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 3px 4px rgba(255, 255, 255, 0.1), 0 3px 0 rgba(0, 0, 0, 0.38), 0 0 16px rgba(139, 92, 246, 0.4); }

/* ---------- garden watering ---------- */
.garden-water-btn {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 20, 0.55);
  backdrop-filter: blur(3px);
  color: rgba(255, 255, 255, 0.75);
  transition: transform 0.15s var(--ease-bounce), color 0.2s ease, background 0.2s ease;
}
.garden-water-btn:active { transform: scale(0.88); }
.garden-water-btn.watered { color: #38bdf8; background: rgba(56, 189, 248, 0.22); }
.garden-water-btn.just-watered { animation: gardenWaterPulse 0.6s var(--ease-bounce); }
@keyframes gardenWaterPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .garden-water-btn.just-watered { animation: none; } }

.garden-parcel-decor { position: absolute; top: 5px; right: 5px; z-index: 4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); pointer-events: none; }
.garden-parcel-decor svg { display: block; }

.cosmetics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.cosmetic-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  border: 3px solid #8a5a34;
  background: #2a1c10;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}
.cosmetic-swatch.active { box-shadow: 0 0 0 2px var(--accent); }
.cosmetic-swatch.locked { opacity: 0.45; cursor: not-allowed; }
.cosmetic-swatch-preview { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cosmetic-swatch-name { font-size: 0.72rem; text-align: center; }
.cosmetic-swatch-lock { position: absolute; top: 6px; right: 6px; color: var(--text-dim); }
.cosmetic-swatch-lock svg { width: 12px; height: 12px; }

/* ---------- focus mode ---------- */
/* Mirrors the prefers-reduced-motion rules above: while a work timer runs,
   decorative/ambient animations pause app-wide (not just on the timer page). */
body.focus-mode::before { animation: none; }
body.focus-mode .card-illustration { animation: none; }
body.focus-mode .streak-flame { animation: none !important; }
body.focus-mode .domain-icon-badge { animation: none; }
body.focus-mode .chrysa-orb,
body.focus-mode .chrysa-orb__sphere,
body.focus-mode .chrysa-orb__plasma,
body.focus-mode .chrysa-orb__spark { animation: none; }
body.focus-mode .bottom-nav-garden:not(.active) .bottom-nav-icon { animation: none; }

.focus-mode-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  color: var(--accent);
  background: rgba(var(--accent-rgb, 139, 92, 246), 0.12);
  border: 1px solid rgba(var(--accent-rgb, 139, 92, 246), 0.28);
  border-radius: 10px;
  padding: 6px 10px;
}
.focus-mode-badge svg { flex-shrink: 0; }

.focus-mode-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(var(--accent-rgb, 139, 92, 246), 0.14);
}