/* ═══════════════════════════════════════════════════════════════
   ARIA — AI Fitness Assistant
   Design System: Sarvam AI · Indian Aesthetic
   Palette: Warm white · Saffron · Deep ink
   Typography: Sora · Instrument Serif · DM Mono
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Surfaces — warm paper white */
  --bg:         #FAFAF8;
  --bg-2:       #F5F4F0;
  --bg-3:       #EDEAE3;
  --bg-4:       #E2DED6;
  --surface:    #FFFFFF;
  --glass:      rgba(255,255,255,.7);
  --glass-2:    rgba(255,255,255,.9);

  /* Saffron — primary brand */
  --saffron:      #F97316;
  --saffron-d:    #C2590C;
  --saffron-h:    #EA6C0A;
  --saffron-l:    #FFF3E8;
  --saffron-xl:   rgba(249,115,22,.06);
  --saffron-glow: rgba(249,115,22,.2);

  /* --amber aliases --saffron so existing component rules keep working */
  --amber:      #F97316;
  --amber-d:    #C2590C;
  --amber-l:    #FFF3E8;
  --amber-xl:   rgba(249,115,22,.06);
  --amber-glow: rgba(249,115,22,.2);
  --on-amber:   #FFFFFF;

  /* Ink — warm deep black */
  --ink:        #0D0D0B;
  --ink-2:      #2D2C28;
  --ink-3:      #4A4745;
  --dim:        #8C8885;
  --dim-2:      #B8B4AE;
  /* aliases so old rules keep working */
  --text:       #0D0D0B;
  --text-2:     #4A4745;
  --text-3:     #8C8885;

  /* Accents */
  --jade:     #16A34A;
  --jade-d:   #14532D;
  --jade-l:   rgba(22,163,74,.1);
  --coral:    #DC2626;
  --coral-l:  rgba(220,38,38,.1);
  --rose:     #DC2626;
  --rose-l:   rgba(220,38,38,.1);
  --sky:      #0284C7;
  --sky-l:    rgba(2,132,199,.1);
  --teal:     #0D7377;
  --teal-l:   rgba(13,115,119,.1);
  --turmeric: #D4920A;
  --turmeric-l: rgba(212,146,10,.12);
  --green:    #16A34A;
  --green-l:  #DCFCE7;
  --emerald:  #16A34A;
  --emerald-l: rgba(22,163,74,.1);

  /* Borders — warm */
  --border:   #E8E5DF;
  --border-2: #D5D0C8;
  --border-3: #C0BAB0;

  /* Shadows — warm */
  --shadow-xs: 0 1px 2px rgba(13,13,11,.04);
  --shadow-sm: 0 1px 4px rgba(13,13,11,.06), 0 1px 2px rgba(13,13,11,.04);
  --shadow:    0 4px 16px rgba(13,13,11,.07), 0 2px 6px rgba(13,13,11,.04);
  --shadow-md: 0 8px 28px rgba(13,13,11,.09), 0 4px 10px rgba(13,13,11,.05);
  --shadow-lg: 0 20px 56px rgba(13,13,11,.11), 0 8px 18px rgba(13,13,11,.06);
  --glow-amber: 0 0 20px rgba(249,115,22,.2);

  /* Radii */
  --r:      10px;
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 100px;

  /* Typography */
  --ff:       'Sora', system-ui, sans-serif;
  --ff-serif: 'Instrument Serif', 'Georgia', serif;
  --ff-mono:  'DM Mono', 'Courier New', monospace;

  /* Easing */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ── BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
button { font-family: var(--ff); cursor: pointer; }
input, textarea { font-family: var(--ff); }

/* ── BOOT ─────────────────────────────────────────────── */
#boot-screen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease);
}

.boot-content {
  text-align: center;
  animation: boot-emerge .8s var(--ease) both;
}

@keyframes boot-emerge {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

.boot-logo {
  font-family: var(--ff-serif);
  font-size: 6rem; font-weight: 300;
  letter-spacing: .06em; line-height: 1;
  margin-bottom: .2rem;
  color: var(--text);
}
/* Amber A, light cream RIA */
.boot-a   { color: var(--amber); font-style: italic; }
.boot-ria { color: var(--text); }

.boot-tag {
  font-family: var(--ff-mono);
  font-size: .58rem; letter-spacing: .32em;
  color: var(--dim); margin-bottom: 3rem;
  text-transform: uppercase;
}

.boot-track {
  width: 160px; height: 1px;
  background: var(--border);
  margin: 0 auto 1.2rem; overflow: hidden;
}
.boot-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber-d), var(--amber));
  transition: width .4s var(--ease);
  box-shadow: 0 0 12px var(--amber-glow);
}
.boot-status {
  font-family: var(--ff-mono);
  font-size: .65rem; color: var(--dim); letter-spacing: .06em;
}

/* ── APP SHELL ────────────────────────────────────────── */
#app {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: row;
  background: var(--bg);
}

/* Main column: holds topbar + chat + input */
.main-col {
  flex: 1; min-width: 0;
  display: grid; grid-template-rows: 52px 1fr auto;
  overflow: hidden;
}

/* ── TOP BAR ──────────────────────────────────────────── */
.topbar {
  grid-row: 1;
  display: flex; align-items: center; padding: 0 1.2rem 0 .75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: .8rem; z-index: 50;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Menu button for sidebar toggle */
.tb-menu-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease);
}
.tb-menu-btn:hover { background: var(--bg-2); border-color: var(--border); color: var(--ink); }

.tb-brand { display: flex; align-items: center; gap: .6rem; }

.tb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--saffron);
  animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

.tb-name {
  font-family: var(--ff-serif);
  font-weight: 500; font-size: 1.3rem;
  letter-spacing: .08em; color: var(--text);
  font-style: italic;
}
.tb-status {
  font-family: var(--ff-mono);
  font-size: .6rem; color: var(--dim);
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: .1rem .5rem; border-radius: var(--r-pill);
  letter-spacing: .06em; transition: all .3s;
}

.tb-vitals { flex: 1; display: flex; align-items: center; justify-content: center; gap: .55rem; }

.vital-pill {
  display: flex; align-items: center; gap: .35rem;
  padding: .22rem .75rem;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 500; color: var(--ink-3);
  transition: all .22s var(--ease); cursor: default;
  backdrop-filter: blur(8px);
}
.vital-pill:hover {
  border-color: var(--saffron); background: var(--saffron-l);
  color: var(--saffron-d); transform: translateY(-1px);
}
.vp-icon { width: 13px; height: 13px; display: inline-block; }
.icon-steps { background: var(--jade); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2M9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7'/></svg>") center/contain no-repeat; }
.icon-fire { background: var(--coral); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 5 3.27 2.14.32 4.44-.06 6.02-1.62 1.58-1.56 2.09-3.97 1.3-6.11l-.06-.18-.6.14z'/></svg>") center/contain no-repeat; }
.icon-bolt { background: var(--amber); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M7 2v11h3v9l7-12h-4l4-8z'/></svg>") center/contain no-repeat; }
.vp-unit { color: var(--dim); font-weight: 400; }

.tb-time {
  font-family: var(--ff-mono);
  font-size: .7rem; color: var(--dim); letter-spacing: .06em;
}

/* ── CHAT AREA ────────────────────────────────────────── */
.chat-area {
  grid-row: 2; overflow-y: auto;
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column;
}
.messages {
  flex: 1; display: flex; flex-direction: column; gap: 1rem;
  max-width: 720px; width: 100%; margin: 0 auto; padding-bottom: .75rem;
}

/* ── WELCOME ──────────────────────────────────────────── */
.welcome {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1rem;
  animation: welcome-in .8s var(--ease) both;
}

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

.welcome-avatar { position: relative; width: 80px; height: 80px; margin-bottom: 1.8rem; }

.wa-ring {
  position: absolute; inset: 0;
  border: 1px solid var(--amber);
  border-radius: 50%; opacity: .3;
  animation: ring-rotate 10s linear infinite;
}
.wa-ring::before {
  content: ''; position: absolute; top: -3px; left: 50%;
  width: 7px; height: 7px; background: var(--amber); border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--amber-glow);
}
@keyframes ring-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.wa-core {
  position: absolute; inset: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif);
  font-size: 1.8rem; font-weight: 300; color: var(--amber);
  font-style: italic;
  animation: core-breathe 4s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%       { box-shadow: 0 0 28px var(--amber-glow); }
}

.welcome-title {
  font-family: var(--ff-serif);
  font-size: 3rem; font-weight: 300;
  letter-spacing: .02em; margin-bottom: .5rem;
  color: var(--text); font-style: italic; line-height: 1.1;
}
.welcome-title span {
  font-style: normal; font-weight: 600; color: var(--amber);
  letter-spacing: -.01em;
}

.welcome-sub {
  font-family: var(--ff);
  font-size: .88rem; color: var(--text-3); margin-bottom: 2.4rem;
  max-width: 360px; line-height: 1.7; font-weight: 400;
}

/* Module grid */
.module-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem; max-width: 600px; width: 100%;
}

.module-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.1rem 1rem;
  text-align: left; display: flex; flex-direction: column; gap: .18rem;
  transition: all .24s var(--ease);
  position: relative; overflow: hidden;
  animation: card-reveal .6s var(--ease) both;
}
.module-card:nth-child(1) { animation-delay: .06s; }
.module-card:nth-child(2) { animation-delay: .12s; }
.module-card:nth-child(3) { animation-delay: .18s; }
.module-card:nth-child(4) { animation-delay: .24s; }
.module-card:nth-child(5) { animation-delay: .30s; }
.module-card:nth-child(6) { animation-delay: .36s; }

@keyframes card-reveal {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Amber top-edge glow on hover */
.module-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0; transition: opacity .3s;
}
.module-card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--shadow), 0 0 24px var(--amber-glow); }
.module-card:hover::after { opacity: 1; }
.module-card:hover .mc-label { color: var(--amber); }
.module-card:hover .mc-icon-wrap { background: var(--amber-xl); color: var(--amber); border-color: rgba(240,165,0,.25); }
.module-card:active { transform: translateY(-1px); }

.mc-icon-wrap {
  width: 34px; height: 34px; background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); margin-bottom: .5rem;
  transition: all .24s var(--ease);
}
.mc-label {
  font-family: var(--ff);
  font-size: .82rem; font-weight: 600;
  color: var(--text-2); display: block; transition: color .2s;
}
.mc-desc { font-size: .68rem; color: var(--dim); display: block; }

/* ── MESSAGES ─────────────────────────────────────────── */
.msg-user {
  align-self: flex-end; max-width: 68%;
  background: var(--amber); color: var(--on-amber);
  border-radius: var(--r) var(--r) 3px var(--r);
  padding: .7rem 1rem; font-size: .875rem; line-height: 1.6; font-weight: 500;
  box-shadow: 0 3px 16px var(--amber-glow);
  animation: msg-user-in .22s var(--ease) both;
}
@keyframes msg-user-in {
  from { opacity: 0; transform: translateX(14px) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.msg-ai {
  align-self: flex-start; max-width: 88%;
  display: flex; gap: .65rem; align-items: flex-start;
  animation: msg-ai-in .25s var(--ease) both;
}
@keyframes msg-ai-in {
  from { opacity: 0; transform: translateX(-14px) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.msg-ai-av {
  width: 30px; height: 30px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif);
  font-size: .95rem; font-weight: 500; color: var(--amber); font-style: italic;
  flex-shrink: 0; margin-top: 2px;
  animation: av-pop .3s var(--spring) both;
}
@keyframes av-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.msg-ai-body {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 3px var(--r) var(--r) var(--r);
  padding: .85rem 1.05rem;
  font-size: .875rem; line-height: 1.72;
  flex: 1; min-width: 0;
  box-shadow: var(--shadow-xs);
}
.msg-ai-body p { margin-bottom: .4rem; }
.msg-ai-body p:last-of-type { margin-bottom: 0; }
.msg-ai-body strong { color: var(--amber); font-weight: 600; }
.msg-ai-body em { color: var(--text-2); font-style: italic; }

/* Typing dots */
.typing-indicator { display: flex; gap: 5px; align-items: center; padding: .3rem 0; }
.typing-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--border-2);
  animation: typing-bounce 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); background: var(--border-2); }
  40% { transform: translateY(-6px); background: var(--amber); }
}

/* ── FLOW CHOICES ─────────────────────────────────────── */
.flow-choices { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .75rem; }

.flow-choice {
  padding: .4rem .9rem;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  color: var(--text-2); font-size: .79rem; font-weight: 500;
  transition: all .18s var(--ease); white-space: nowrap;
  animation: choice-in .3s var(--ease) both;
}
.flow-choice:nth-child(1) { animation-delay: .05s; }
.flow-choice:nth-child(2) { animation-delay: .10s; }
.flow-choice:nth-child(3) { animation-delay: .15s; }
.flow-choice:nth-child(4) { animation-delay: .20s; }
.flow-choice:nth-child(5) { animation-delay: .25s; }
.flow-choice:nth-child(6) { animation-delay: .30s; }

@keyframes choice-in {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.flow-choice:hover:not(:disabled) {
  border-color: var(--amber); color: var(--amber);
  background: var(--amber-xl); transform: translateY(-1px);
  box-shadow: 0 0 12px var(--amber-glow);
}
.flow-choice:active:not(:disabled) { transform: scale(.96); }
.flow-choice.active { border-color: var(--amber); color: var(--amber); background: var(--amber-xl); }
.flow-choice:disabled { opacity: .3; cursor: default; }

/* ── FLOW INPUT ───────────────────────────────────────── */
.flow-input-row { display: flex; gap: .4rem; margin-top: .65rem; animation: choice-in .3s var(--ease) .1s both; }
.flow-input {
  flex: 1; background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: .5rem .85rem; color: var(--text);
  font-size: .85rem; outline: none; transition: all .18s var(--ease);
}
.flow-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-xl); }
.flow-input:disabled { opacity: .4; }

.flow-submit {
  background: var(--amber); border: none; border-radius: var(--r-sm);
  padding: .5rem 1.1rem; color: var(--on-amber); font-weight: 700; font-size: .84rem;
  transition: all .18s var(--ease);
  box-shadow: 0 2px 10px var(--amber-glow);
}
.flow-submit:hover { background: var(--amber-d); transform: translateY(-1px); box-shadow: 0 4px 18px var(--amber-glow); }
.flow-submit:active { transform: scale(.96); }
.flow-submit:disabled { opacity: .4; cursor: default; transform: none; }

/* ── ACTION BUTTONS ───────────────────────────────────── */
.msg-actions { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .65rem; }
.msg-action-btn {
  padding: .32rem .85rem;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  color: var(--text-2); font-size: .78rem; font-weight: 500;
  transition: all .18s var(--ease);
  animation: choice-in .3s var(--ease) both;
}
.msg-action-btn:nth-child(1) { animation-delay: .04s; }
.msg-action-btn:nth-child(2) { animation-delay: .09s; }
.msg-action-btn:nth-child(3) { animation-delay: .14s; }
.msg-action-btn:nth-child(4) { animation-delay: .19s; }
.msg-action-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-xl); transform: translateY(-1px); }
.msg-action-btn.primary { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 600; }
.msg-action-btn.primary:hover { background: var(--amber-d); border-color: var(--amber-d); }

/* ── INPUT BAR ────────────────────────────────────────── */
.input-bar {
  grid-row: 3; background: var(--surface);
  border-top: 1px solid var(--border); padding: .7rem 1rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,.4);
}
.input-wrap { max-width: 720px; width: 100%; margin: 0 auto; }

.quick-pills { display: flex; gap: .3rem; margin-bottom: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.quick-pills::-webkit-scrollbar { display: none; }
.qpill {
  padding: .22rem .7rem; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .04em;
  color: var(--text-3); white-space: nowrap;
  transition: all .18s var(--ease); flex-shrink: 0;
}
.qpill:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-xl); }
.qpill:active { transform: scale(.94); }

.input-row {
  display: flex; align-items: flex-end; gap: .45rem;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: .4rem .45rem .4rem .6rem;
  transition: border-color .2s, box-shadow .2s;
}
.input-row:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-xl); }

.input-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  background: transparent; border: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); transition: all .18s;
}
.input-icon-btn:hover { color: var(--amber); }

.chat-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: .875rem; line-height: 1.5;
  resize: none; max-height: 140px;
}
.chat-input::placeholder { color: var(--dim); }

.voice-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  background: transparent; border: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); transition: all .18s; position: relative; cursor: pointer;
}
.voice-btn:hover { color: var(--saffron-d); }
.voice-btn.recording {
  color: white; background: var(--saffron); border-radius: 50%;
  animation: recording-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--saffron-glow);
}
.voice-btn.recording::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--saffron);
  opacity: .4; animation: recording-ring 1.2s ease-in-out infinite;
}
@keyframes recording-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--saffron-glow); transform: scale(1); }
  50%       { box-shadow: 0 0 0 8px rgba(249,115,22,.08); transform: scale(1.06); }
}
@keyframes recording-ring {
  0%, 100% { transform: scale(1); opacity: .4; }
  50%       { transform: scale(1.3); opacity: 0; }
}

.send-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--amber); border: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-amber); transition: all .18s var(--spring);
  box-shadow: 0 2px 8px var(--amber-glow);
}
.send-btn:hover { background: var(--amber-d); transform: scale(1.08); box-shadow: 0 4px 16px var(--amber-glow); }
.send-btn:active { transform: scale(.92); }
.send-btn svg { stroke: var(--on-amber) !important; }
.send-btn svg polygon { fill: var(--on-amber) !important; }

/* ── TOAST ────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 90px; right: 1.5rem; z-index: 300;
  background: var(--ink); color: var(--surface);
  border: 1px solid var(--border-2);
  padding: .6rem 1rem; border-radius: var(--r-sm);
  font-size: .76rem; font-weight: 500; max-width: 280px;
  box-shadow: var(--shadow-md);
  animation: toast-in .3s var(--ease) both;
}
@keyframes toast-in { from { transform: translateX(20px) translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── MEAL CARD ────────────────────────────────────────── */
.meal-confirm { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: .9rem; margin-top: .6rem; animation: card-reveal .3s var(--ease) both; }
.mc-header { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; margin-bottom: .7rem; color: var(--jade); }
.mc-check { width: 20px; height: 20px; background: var(--jade); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg); font-size: .7rem; flex-shrink: 0; }
.mc-food-grid { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.mc-food-item { display: flex; align-items: center; gap: .45rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .4rem .6rem .4rem .35rem; min-width: 120px; flex: 1 1 auto; transition: all .2s var(--ease); }
.mc-food-item:hover { border-color: var(--saffron); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mc-food-img { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-3); }
.mc-food-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-food-img-fallback { display: flex; align-items: center; justify-content: center; }
.mc-food-img-fallback::after { content: ''; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2590C' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6V10M10 7V10M14 7V10'/%3E%3Cline x1='8' y1='10' x2='16' y2='10'/%3E%3C/svg%3E") no-repeat center/contain; opacity: .4; }
.mc-food-info { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.mc-food-name { font-size: .76rem; font-weight: 600; color: var(--ink-2); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-food-cal { font-family: var(--ff-mono); font-size: .65rem; color: var(--saffron-d); letter-spacing: .04em; }
.mc-divider { height: 1px; background: var(--border); margin: .1rem 0 .55rem; }
.mc-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; padding: 0 .15rem; }
.mc-total-label { font-family: var(--ff-mono); font-size: .65rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.mc-total-val { font-family: var(--ff-mono); font-size: 1rem; font-weight: 600; color: var(--saffron-d); }
.mc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.mc-tag { font-size: .72rem; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .16rem .55rem; color: var(--text-2); }
.mc-tag span { color: var(--dim); margin-left: .25rem; }
.mc-total { font-family: var(--ff-mono); font-size: .8rem; color: var(--text); margin-bottom: .55rem; }
.mc-macros { display: flex; gap: .45rem; }
.mcm-item { flex: 1; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .5rem .3rem .4rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.mcm-ring { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.mcm-ring::after { content:''; position:absolute; inset:4px; background:var(--surface); border-radius:50%; }
.mcm-val { font-family: var(--ff-mono); font-size: .82rem; color: var(--saffron-d); display: block; font-weight: 600; }
.mcm-lbl { font-size: .52rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.mcm-kcal .mcm-val { color: var(--jade); }

/* ══════════════════════════════════════════════════════════════
   BMI CALCULATOR
══════════════════════════════════════════════════════════════ */

.bmi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.1rem; margin-top: .6rem;
  animation: card-reveal .3s var(--ease) both;
  display: flex; flex-direction: column; gap: .85rem;
}

/* Unit toggle */
.bmi-toggle-row {
  display: flex; gap: .35rem;
  background: var(--bg-2); border-radius: var(--r-pill);
  padding: .2rem; width: fit-content;
}
.bmi-unit-btn {
  font-family: var(--ff); font-size: .74rem; font-weight: 600;
  padding: .3rem .9rem; border-radius: var(--r-pill);
  border: none; cursor: pointer; background: transparent;
  color: var(--dim); transition: all .18s var(--ease);
}
.bmi-unit-btn.active {
  background: var(--saffron); color: white;
  box-shadow: 0 2px 8px var(--saffron-glow);
}

/* Input grid */
.bmi-inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
}
.bmi-field { display: flex; flex-direction: column; gap: .28rem; }
.bmi-label {
  font-family: var(--ff-mono); font-size: .58rem;
  letter-spacing: .1em; color: var(--dim); text-transform: uppercase;
}
.bmi-optional { font-size: .52rem; color: var(--dim-2); text-transform: none; }
.bmi-input-row {
  display: flex; align-items: center; gap: .3rem;
}
.bmi-input {
  flex: 1; background: var(--bg-2); border: 1.5px solid var(--border-2);
  border-radius: var(--r-sm); padding: .5rem .7rem;
  font-family: var(--ff-mono); font-size: .88rem; color: var(--ink);
  outline: none; transition: border-color .17s;
  min-width: 0;
}
.bmi-input:focus { border-color: var(--saffron); background: var(--surface); box-shadow: 0 0 0 3px var(--saffron-xl); }
.bmi-input::placeholder { color: var(--dim-2); }
.bmi-unit-tag {
  font-family: var(--ff-mono); font-size: .62rem;
  color: var(--dim); white-space: nowrap; min-width: 20px;
}

/* Sex selector */
.bmi-sex-row { display: flex; gap: .35rem; }
.bmi-sex-btn {
  flex: 1; padding: .45rem; background: var(--bg-2);
  border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  font-family: var(--ff); font-size: .75rem; font-weight: 600;
  color: var(--dim); cursor: pointer; transition: all .18s var(--ease);
}
.bmi-sex-btn.active { background: var(--saffron-l); border-color: var(--saffron); color: var(--saffron-d); }
.bmi-sex-btn:hover:not(.active) { border-color: var(--border-3); color: var(--ink-3); }

/* Calculate button */
.bmi-calc-btn {
  width: 100%; padding: .72rem; background: var(--saffron);
  border: none; border-radius: var(--r-sm); color: white;
  font-family: var(--ff); font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease);
  box-shadow: 0 3px 14px var(--saffron-glow);
}
.bmi-calc-btn:hover { background: var(--saffron-h); transform: translateY(-1px); box-shadow: 0 5px 20px var(--saffron-glow); }
.bmi-calc-btn:active { transform: scale(.97); }

/* ── RESULT PANEL ──────────────────────────────────────────── */
.bmi-result {
  border-top: 1px solid var(--border); padding-top: .85rem;
  animation: card-reveal .4s var(--ease) both;
}
.bmi-result-inner { display: flex; flex-direction: column; gap: .85rem; }

/* Score circle + info */
.bmi-score-row { display: flex; align-items: center; gap: 1rem; }
.bmi-score-circle {
  width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--border-2);
}
.bmi-score-num {
  font-family: var(--ff-mono); font-size: 1.5rem; font-weight: 500; line-height: 1;
}
.bmi-score-lbl {
  font-family: var(--ff-mono); font-size: .55rem; letter-spacing: .14em;
  color: var(--dim); text-transform: uppercase; margin-top: .1rem;
}
.bmi-score-info { flex: 1; }
.bmi-category {
  font-size: .92rem; font-weight: 700; margin-bottom: .22rem;
}
.bmi-age-note { font-size: .72rem; color: var(--dim); margin-bottom: .18rem; }
.bmi-ideal { font-size: .74rem; color: var(--ink-3); }

/* Category colour classes */
.bmi-under   { border-color: #0284C7; color: #0284C7; }
.bmi-healthy { border-color: var(--jade); color: var(--jade); }
.bmi-over    { border-color: var(--saffron-d); color: var(--saffron-d); }
.bmi-obese   { border-color: var(--rose); color: var(--rose); }

/* Gauge bar */
.bmi-gauge-wrap { display: flex; flex-direction: column; gap: .3rem; }
.bmi-gauge-track {
  position: relative; display: flex; height: 10px;
  border-radius: var(--r-pill); overflow: visible;
}
.bmi-gauge-seg { height: 100%; flex: 1; }
.bmi-gauge-seg:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.bmi-gauge-seg:last-child  { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.bmi-seg-under   { background: #BFDBFE; flex: 1.7; }
.bmi-seg-healthy { background: #BBF7D0; flex: 1.95; }
.bmi-seg-over    { background: #FED7AA; flex: 1.65; }
.bmi-seg-obese   { background: #FECACA; flex: 1.7; }
.bmi-gauge-needle {
  position: absolute; top: -3px; width: 4px; height: 16px;
  background: var(--ink); border-radius: 2px;
  transform: translateX(-50%); box-shadow: 0 0 4px rgba(13,13,11,.25);
  transition: left .5s var(--ease);
}
.bmi-gauge-labels {
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono); font-size: .55rem; color: var(--dim);
}

/* Reference table */
.bmi-table {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden;
}
.bmi-table-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .7rem; font-size: .78rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.bmi-table-row:last-child { border-bottom: none; }
.bmi-table-row.active { background: var(--saffron-l); }
.bmi-tbl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bmi-tbl-range { font-family: var(--ff-mono); font-size: .72rem; color: var(--dim); min-width: 80px; }
.bmi-tbl-cat { font-weight: 600; color: var(--ink-2); }
.bmi-table-row.active .bmi-tbl-cat { color: var(--saffron-d); }

/* Advice box */
.bmi-advice {
  padding: .7rem .85rem; border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.bmi-advice.bmi-under   { background: #EFF6FF; border-color: #BFDBFE; }
.bmi-advice.bmi-healthy { background: var(--jade-l); border-color: rgba(22,163,74,.2); }
.bmi-advice.bmi-over    { background: var(--saffron-l); border-color: rgba(249,115,22,.25); }
.bmi-advice.bmi-obese   { background: var(--rose-l); border-color: rgba(220,38,38,.2); }
.bmi-advice-text {
  font-size: .79rem; line-height: 1.6; color: var(--ink-2);
}

/* ── NUTRITION SUMMARY ────────────────────────────────── */
.nutr-summary { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: .9rem; margin-top: .6rem; animation: card-reveal .3s var(--ease) both; }
.ns-title { font-family: var(--ff-mono); font-size: .56rem; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; margin-bottom: .65rem; }
.ns-progress { margin-bottom: .75rem; }
.ns-bar-track { height: 4px; background: var(--bg-4); border-radius: 2px; overflow: hidden; margin-bottom: .35rem; }
.ns-bar-fill { height: 100%; background: linear-gradient(90deg, var(--jade-d), var(--jade)); border-radius: 2px; animation: bar-grow .8s var(--ease) .2s both; }
@keyframes bar-grow { from { width: 0 !important; } }
.ns-pct { font-family: var(--ff-mono); font-size: .68rem; color: var(--dim); }
.ns-macros { display: flex; gap: .45rem; }
.ns-macro { flex: 1; text-align: center; }
.ns-macro-val { font-family: var(--ff-mono); font-size: .9rem; color: var(--text); display: block; }
.ns-macro-lbl { font-size: .58rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }

/* ── ACTIVITY FLOW ────────────────────────────────────── */
.act-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .38rem; margin-top: .6rem; }
.act-type-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); font-size: .77rem; font-weight: 600; color: var(--ink-2);
  transition: all .18s var(--ease); animation: choice-in .3s var(--ease) both; cursor: pointer;
}
.act-type-btn:hover:not(:disabled) { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); transform: translateY(-2px); box-shadow: var(--shadow); }
.act-type-btn.selected { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.at-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--saffron-xl); border-radius: var(--r-sm); transition: all .18s; }
.at-icon svg { width: 20px; height: 20px; }
.act-type-btn:hover .at-icon, .act-type-btn.selected .at-icon { background: var(--saffron); }
.act-type-btn:hover .at-icon svg, .act-type-btn.selected .at-icon svg { stroke: white; }
.at-label { font-size: .78rem; }
.at-abbr { font-family: var(--ff-mono); font-size: .54rem; color: var(--amber); background: var(--amber-xl); padding: .1rem .3rem; border-radius: 3px; letter-spacing: .06em; flex-shrink: 0; transition: all .18s; }
.act-type-btn:hover .at-abbr, .act-type-btn.selected .at-abbr { background: var(--amber); color: var(--on-amber); }

/* Live tracker */
.live-tracker { display: flex; flex-direction: column; align-items: center; padding: 1rem 0; }

/* Animated activity illustration */
.lt-anim-wrap { width: 110px; height: 110px; margin-bottom: .6rem; opacity: .4; transition: opacity .4s; }
.lt-anim-wrap.animating { opacity: 1; }
.lt-anim-icon { width: 100%; height: 100%; overflow: visible; }

/* All activities: the figure group gets the activity-specific animation */
.lt-anim-wrap.animating .lt-runner   { animation: lt-run   .6s ease-in-out infinite; }
.lt-anim-wrap.animating .lt-jogger   { animation: lt-jog   .8s ease-in-out infinite; }
.lt-anim-wrap.animating .lt-walker   { animation: lt-walk  1.2s ease-in-out infinite; }
.lt-anim-wrap.animating .lt-cyclist  { animation: lt-cycle .7s ease-in-out infinite alternate; }
.lt-anim-wrap.animating .lt-swimmer  { animation: lt-swim  1.4s ease-in-out infinite; }
.lt-anim-wrap.animating .lt-barbell  { animation: lt-press 1.6s ease-in-out infinite; }

/* Wheels spin independently using fill-box */
.lt-wheel-l, .lt-wheel-r { transform-box: fill-box; transform-origin: center; }
.lt-anim-wrap.animating .lt-wheel-l { animation: lt-spin .5s linear infinite; }
.lt-anim-wrap.animating .lt-wheel-r { animation: lt-spin .5s linear infinite; }

/* Waves scroll */
.lt-anim-wrap.animating .lt-wave-1 { animation: lt-wv 2s linear infinite; }
.lt-anim-wrap.animating .lt-wave-2 { animation: lt-wv 2.8s linear infinite; }
.lt-anim-wrap.animating .lt-wave-3 { animation: lt-wv 3.5s linear infinite; }

/* Ground dashes scroll */
.lt-anim-wrap.animating .lt-ground { animation: lt-gnd .6s linear infinite; }

/* ─── Keyframes ─── */

/* Running: fast vertical + slight tilt */
@keyframes lt-run {
  0%   { transform: translateY(0px)  rotate(0deg); }
  15%  { transform: translateY(-8px) rotate(-3deg); }
  30%  { transform: translateY(-2px) rotate(0deg); }
  50%  { transform: translateY(0px)  rotate(0deg); }
  65%  { transform: translateY(-8px) rotate(3deg); }
  80%  { transform: translateY(-2px) rotate(0deg); }
  100% { transform: translateY(0px)  rotate(0deg); }
}

/* Jogging: moderate bounce + sway */
@keyframes lt-jog {
  0%   { transform: translateY(0)    rotate(0deg); }
  20%  { transform: translateY(-5px) rotate(-2deg); }
  40%  { transform: translateY(0)    rotate(0deg); }
  60%  { transform: translateY(-5px) rotate(2deg); }
  80%  { transform: translateY(0)    rotate(0deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

/* Walking: gentle lateral sway */
@keyframes lt-walk {
  0%   { transform: translateX(0)    translateY(0); }
  25%  { transform: translateX(3px)  translateY(-2px); }
  50%  { transform: translateX(0)    translateY(0); }
  75%  { transform: translateX(-3px) translateY(-2px); }
  100% { transform: translateX(0)    translateY(0); }
}

/* Cycling: lean forward/back */
@keyframes lt-cycle {
  0%   { transform: translateY(0)    rotate(0deg); }
  50%  { transform: translateY(-3px) rotate(-1.5deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

/* Swimming: horizontal undulation */
@keyframes lt-swim {
  0%   { transform: translateY(0)    translateX(0)   rotate(0deg); }
  25%  { transform: translateY(-4px) translateX(3px) rotate(-3deg); }
  50%  { transform: translateY(0)    translateX(0)   rotate(0deg); }
  75%  { transform: translateY(-4px) translateX(-3px) rotate(3deg); }
  100% { transform: translateY(0)    translateX(0)   rotate(0deg); }
}

/* Gym press: lift up, hold, lower */
@keyframes lt-press {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-18px); }
  45%  { transform: translateY(-18px); }
  70%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Wheel spin */
@keyframes lt-spin { to { transform: rotate(360deg); } }

/* Wave scroll */
@keyframes lt-wv { to { transform: translateX(-30px); } }

/* Ground scroll */
@keyframes lt-gnd {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -22; }
}

.lt-activity { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .24em; color: var(--dim); text-transform: uppercase; margin-bottom: .5rem; }
.lt-timer { font-family: var(--ff-serif); font-size: 3.5rem; font-weight: 300; color: var(--text); letter-spacing: .02em; line-height: 1; margin-bottom: 1rem; font-style: italic; }
.lt-stats { display: flex; gap: 1.2rem; margin-bottom: 1.2rem; }
.lt-stat { text-align: center; }
.lt-stat-val { font-family: var(--ff-mono); font-size: .95rem; color: var(--jade); display: block; }
.lt-stat-lbl { font-size: .58rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.lt-pulse { width: 8px; height: 8px; background: var(--coral); border-radius: 50%; margin-bottom: .8rem; animation: recording-pulse 1s ease-in-out infinite; }
.lt-start-btn { background: var(--amber); border: none; border-radius: var(--r-sm); padding: .7rem 2.2rem; color: var(--on-amber); font-weight: 700; font-size: .88rem; transition: all .2s var(--ease); box-shadow: 0 2px 12px var(--amber-glow); }
.lt-start-btn:hover { background: var(--amber-d); transform: translateY(-2px); box-shadow: 0 6px 24px var(--amber-glow); }
.lt-stop-btn { background: var(--coral); border: none; border-radius: var(--r-sm); padding: .65rem 1.6rem; color: white; font-weight: 700; font-size: .88rem; transition: all .2s; margin-top: .8rem; }
.lt-stop-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* Session summary */
.session-summary { padding: 1rem 0; }
.ss-title { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 400; font-style: italic; text-align: center; margin-bottom: .9rem; color: var(--text); }
.ss-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin-bottom: 1rem; }
.ss-stat { text-align: center; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .7rem .5rem; }
.ss-stat-val { font-family: var(--ff-mono); font-size: 1.1rem; color: var(--jade); display: block; }
.ss-stat-lbl { font-size: .58rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.ss-chart { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-bottom: 1rem; }
.ss-bar { flex: 1; background: var(--bg-4); border-radius: 2px 2px 0 0; }
.ss-bar.peak { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
.ss-save-btn { width: 100%; padding: .7rem; background: var(--amber); border: none; border-radius: var(--r-sm); color: var(--on-amber); font-size: .85rem; font-weight: 700; transition: all .2s var(--ease); box-shadow: 0 2px 10px var(--amber-glow); }
.ss-save-btn:hover { background: var(--amber-d); transform: translateY(-2px); box-shadow: 0 6px 20px var(--amber-glow); }

/* Upload zone */
.flow-upload-zone { border: 1px dashed var(--border-2); border-radius: var(--r); padding: 1.5rem; text-align: center; cursor: pointer; color: var(--dim); font-size: .82rem; transition: all .22s var(--ease); margin-top: .65rem; }
.flow-upload-zone:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-xl); }
.fuz-svg { color: var(--dim); margin-bottom: .3rem; transition: color .2s; }
.flow-upload-zone:hover .fuz-svg { color: var(--amber); }
.fuz-text span { color: var(--amber); font-weight: 600; }

/* ── VIDEO CARDS ──────────────────────────────────────── */
.video-row { display: flex; gap: .7rem; overflow-x: auto; padding: .25rem .05rem .5rem; scrollbar-width: none; margin-top: .6rem; }
.video-row::-webkit-scrollbar { display: none; }
.vid-card { width: 198px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; flex-shrink: 0; transition: all .22s var(--ease); animation: card-reveal .35s var(--ease) both; cursor: pointer; }
.vid-card:nth-child(1) { animation-delay: .05s; } .vid-card:nth-child(2) { animation-delay: .10s; } .vid-card:nth-child(3) { animation-delay: .15s; } .vid-card:nth-child(4) { animation-delay: .20s; }
.vid-card:hover { border-color: var(--amber); box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 20px var(--amber-glow); transform: translateY(-3px); }
.vid-thumb { position: relative; width: 100%; height: 110px; background: var(--bg-3); overflow: hidden; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; filter: brightness(.85); }
.vid-card:hover .vid-thumb img { transform: scale(1.05); filter: brightness(1); }
.vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s; }
.vid-card:hover .vid-play { opacity: 1; }
.vid-play-icon { width: 34px; height: 34px; background: var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--amber-glow); transition: transform .2s; }
.vid-play-icon svg { stroke: var(--on-amber) !important; }
.vid-card:hover .vid-play-icon { transform: scale(1.12); }
.vid-info { padding: .6rem .72rem; }
.vid-title { font-size: .79rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.35; color: var(--text-2); }
.vid-meta { display: flex; gap: .38rem; align-items: center; flex-wrap: wrap; }
.vid-diff { font-size: .58rem; padding: .1rem .38rem; border-radius: 4px; font-weight: 600; font-family: var(--ff-mono); letter-spacing: .04em; }
.diff-beginner     { background: var(--jade-l); color: var(--jade-d); }
.diff-intermediate { background: rgba(240,165,0,.12); color: var(--amber-d); }
.diff-advanced     { background: var(--coral-l); color: var(--coral); }
.vid-dur { font-size: .62rem; color: var(--dim); font-family: var(--ff-mono); }
.vid-embed-wrap { position: relative; padding-bottom: 56.25%; }
.vid-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ══════════════════════════════════════════════════════════════
   SHOP — Product Cards (image-first, horizontal scroll row)
══════════════════════════════════════════════════════════════ */

/* Horizontal scrolling row */
.product-row {
  display: flex; gap: .65rem;
  overflow-x: auto; padding: .25rem .05rem .65rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-top: .5rem;
}
.product-row::-webkit-scrollbar { display: none; }

/* Card shell */
.prod-card {
  width: 185px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: all .22s var(--ease);
  animation: card-reveal .35s var(--ease) both;
}
.prod-card:hover {
  border-color: var(--saffron);
  box-shadow: var(--shadow-md), 0 0 18px var(--saffron-glow);
  transform: translateY(-3px);
}

/* Product image area */
.prod-img-wrap {
  position: relative; width: 100%; height: 155px;
  background: var(--bg-2); overflow: hidden; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.prod-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s var(--ease);
}
.prod-card:hover .prod-img { transform: scale(1.06); }

/* Image fails gracefully */
.prod-img-fallback {
  display: flex !important; align-items: center; justify-content: center;
}
.prod-img-fallback::after {
  content: "";
  width: 36px; height: 36px; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M8 10L6 22H22L20 10H8Z' stroke='%23C2590C' stroke-width='1.5' fill='%23F97316' opacity='.12'/%3E%3Cpath d='M10 10V8C10 5.8 11.8 4 14 4C16.2 4 18 5.8 18 8V10' stroke='%23C2590C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Badge (Best Seller, Top Rated etc.) */
.prod-tag {
  position: absolute; top: .45rem; left: .45rem;
  font-family: var(--ff-mono); font-size: .5rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--saffron); color: white;
  padding: .15rem .42rem; border-radius: var(--r-pill);
  box-shadow: 0 2px 6px var(--saffron-glow);
  z-index: 2;
}

/* Card content body */
.prod-body {
  padding: .7rem .78rem .78rem; display: flex;
  flex-direction: column; flex: 1; gap: 0;
}
.prod-name {
  font-size: .79rem; font-weight: 600; color: var(--ink-2);
  line-height: 1.3; margin-bottom: .2rem;
}
.prod-desc {
  font-size: .67rem; color: var(--dim); line-height: 1.38;
  margin-bottom: .3rem; flex: 1;
}
.prod-rating { font-size: .64rem; color: var(--saffron-d); margin-bottom: .28rem; }
.prod-price {
  font-family: var(--ff-mono); font-size: .97rem; font-weight: 500;
  color: var(--ink); margin-bottom: .58rem;
}
.prod-add {
  width: 100%; padding: .42rem;
  background: transparent; border: 1.5px solid var(--saffron);
  border-radius: var(--r-sm); color: var(--saffron-d);
  font-family: var(--ff); font-size: .71rem; font-weight: 600;
  cursor: pointer; transition: all .18s var(--ease);
}
.prod-add:hover:not(.added) {
  background: var(--saffron); color: white;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px var(--saffron-glow);
}
.prod-add.added {
  background: var(--jade-l); border-color: var(--jade);
  color: var(--jade); cursor: default;
}

/* Difficulty pills (used in edu + shop) */
.vid-diff, .diff-beginner, .diff-intermediate, .diff-advanced {
  display: inline-block; font-family: var(--ff-mono);
  font-size: .58rem; padding: .1rem .38rem;
  border-radius: var(--r-pill); letter-spacing: .04em;
}
.diff-beginner     { background: var(--jade-l);  color: var(--jade); }
.diff-intermediate { background: rgba(240,165,0,.12); color: var(--amber-d); }
.diff-advanced     { background: var(--coral-l); color: var(--coral); }

/* ═══════════════════════════════════════════════════════════
   EXPERT CARDS
═══════════════════════════════════════════════════════════ */
.expert-row {
  display: flex; gap: .65rem;
  overflow-x: auto; padding: .2rem .05rem .65rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.expert-row::-webkit-scrollbar { display: none; }

.exp-card {
  width: 196px; flex-shrink: 0;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: .95rem;
  display: flex; flex-direction: column; gap: .3rem;
  cursor: pointer; transition: all .2s var(--ease);
  animation: card-reveal .35s var(--ease) both;
}
.exp-card:hover { border-color: var(--saffron); transform: translateY(-2px); box-shadow: var(--shadow), 0 0 14px var(--saffron-glow); }
.exp-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .1rem; }
.exp-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: 1rem;
  color: white; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  overflow: hidden; position: relative;
}
.exp-name { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.exp-spec { font-family: var(--ff-mono); font-size: .52rem; letter-spacing: .1em; color: var(--dim); margin-top: .04rem; }
.exp-about { font-size: .68rem; color: var(--dim); line-height: 1.45; flex: 1; }
.exp-stats { display: flex; gap: .6rem; align-items: center; }
.exp-rating { font-size: .68rem; color: var(--saffron-d); }
.exp-exp { font-family: var(--ff-mono); font-size: .58rem; color: var(--dim); }
.exp-price { font-family: var(--ff-mono); font-size: .88rem; color: var(--ink); }
.exp-cta {
  margin-top: .3rem; padding: .42rem;
  background: var(--saffron-l); border: 1.5px solid var(--saffron);
  border-radius: var(--r-sm); color: var(--saffron-d);
  font-size: .74rem; font-weight: 700; text-align: center;
  transition: all .18s var(--ease);
}
.exp-card:hover .exp-cta { background: var(--saffron); color: white; }

/* ═══════════════════════════════════════════════════════════
   CONSULT CHAT — Full messaging UI
═══════════════════════════════════════════════════════════ */
.consult-chat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  margin-top: .55rem; display: flex; flex-direction: column;
  max-height: 480px; animation: card-reveal .3s var(--ease) both;
}
.cc-header {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .85rem; border-bottom: 1px solid var(--border);
  background: var(--bg-2); flex-shrink: 0;
}
.cc-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: .92rem; color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  overflow: hidden; position: relative;
}
.cc-header-info { flex: 1; min-width: 0; }
.cc-name { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.cc-status { display: flex; align-items: center; gap: .3rem; font-size: .65rem; color: var(--jade); margin-top: .06rem; }
.cc-online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jade); box-shadow: 0 0 5px var(--jade);
  animation: dot-pulse 2s ease-in-out infinite;
}
.cc-cal-btn {
  display: flex; align-items: center; gap: .3rem;
  padding: .32rem .7rem; background: transparent;
  border: 1.5px solid var(--border-2); border-radius: var(--r-pill);
  font-family: var(--ff); font-size: .68rem; font-weight: 600; color: var(--ink-3);
  cursor: pointer; white-space: nowrap; transition: all .18s var(--ease);
}
.cc-cal-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.cc-messages {
  flex: 1; overflow-y: auto; padding: .75rem .85rem;
  display: flex; flex-direction: column; gap: .6rem;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.cc-messages::-webkit-scrollbar { width: 3px; }
.cc-messages::-webkit-scrollbar-thumb { background: var(--border); }
.cc-msg-wrap { display: flex; align-items: flex-end; gap: .4rem; animation: msg-ai-in .22s var(--ease) both; }
.cc-msg-wrap.user { flex-direction: row-reverse; animation-name: msg-user-in; }
.cc-av-sm {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: .65rem; color: white;
  overflow: hidden; position: relative;
}
.cc-msg-wrap.user .cc-av-sm { display: none; }
.cc-bubble {
  max-width: 72%; padding: .6rem .82rem;
  font-size: .81rem; line-height: 1.55; border-radius: var(--r);
}
.cc-bubble.expert { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.cc-bubble.user   { background: var(--saffron); color: white; border-bottom-right-radius: 3px; }
.cc-typing { display: flex; align-items: center; gap: 4px; padding: .6rem .8rem; }
.cc-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dim);
  display: inline-block; animation: typing-bounce .9s ease-in-out infinite;
}
.cc-typing span:nth-child(2){animation-delay:.15s} .cc-typing span:nth-child(3){animation-delay:.30s}
@keyframes typing-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.cc-nudge-card {
  max-width: 76%; background: var(--saffron-l);
  border: 1.5px solid rgba(249,115,22,.25); border-radius: var(--r);
  border-bottom-left-radius: 3px; padding: .75rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.cc-nudge-text { font-size: .8rem; color: var(--ink-2); line-height: 1.5; }
.cc-nudge-btn {
  align-self: flex-start; padding: .38rem .9rem;
  background: var(--saffron); border: none; border-radius: var(--r-pill);
  color: white; font-size: .74rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px var(--saffron-glow); transition: all .18s var(--ease);
}
.cc-nudge-btn:hover { background: var(--saffron-h); transform: translateY(-1px); }
.cc-input-area { border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; padding: .5rem .65rem; }
.cc-input-row { display: flex; align-items: flex-end; gap: .4rem; }
.cc-voice-btn {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease);
}
.cc-voice-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.cc-voice-btn.active { background: var(--rose); border-color: var(--rose); color: white; animation: dot-pulse 1s infinite; }
.cc-input {
  flex: 1; background: var(--bg-2); border: 1.5px solid var(--border-2);
  border-radius: var(--r-sm); padding: .48rem .75rem;
  font-family: var(--ff); font-size: .82rem; color: var(--ink);
  resize: none; outline: none; overflow-y: auto;
  min-height: 36px; max-height: 96px; transition: border-color .17s; line-height: 1.5;
}
.cc-input:focus { border-color: var(--saffron); background: var(--surface); box-shadow: 0 0 0 3px var(--saffron-xl); }
.cc-send-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--saffron); border: none; color: white;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px var(--saffron-glow); transition: all .18s var(--ease);
}
.cc-send-btn:hover { transform: scale(1.08); }
.cc-voice-bar {
  display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem;
  background: var(--rose-l); border-radius: var(--r-sm); margin-top: .35rem;
}
.cc-voice-waves { display: flex; align-items: center; gap: 2.5px; }
.cc-vw-b { width: 3px; border-radius: 2px; background: var(--rose); animation: va-bar-dance .7s ease-in-out infinite alternate; }
.cc-vw-b:nth-child(1){height:6px;--h:10px}.cc-vw-b:nth-child(2){height:10px;--h:16px}
.cc-vw-b:nth-child(3){height:14px;--h:18px}.cc-vw-b:nth-child(4){height:10px;--h:14px}.cc-vw-b:nth-child(5){height:6px;--h:8px}
.cc-voice-lbl { font-size: .65rem; color: var(--rose); font-style: italic; }
.booking-confirm-card {
  display: flex; align-items: center; gap: .75rem;
  background: var(--jade-l); border: 1.5px solid rgba(22,163,74,.25);
  border-radius: var(--r); padding: .85rem 1rem; margin-top: .55rem;
}
.bcc-check {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--jade); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(22,163,74,.3);
}
.bcc-info { flex: 1; min-width: 0; }
.bcc-title { font-size: .8rem; font-weight: 700; color: var(--jade); }
.bcc-expert { font-size: .75rem; color: var(--ink-2); margin-top: .06rem; }
.bcc-detail { font-family: var(--ff-mono); font-size: .65rem; color: var(--dim); margin-top: .1rem; }
.bcc-join-btn {
  display: flex; align-items: center; gap: .35rem; padding: .5rem 1rem;
  background: var(--jade); border: none; border-radius: var(--r-pill);
  color: white; font-size: .75rem; font-weight: 700; flex-shrink: 0;
  cursor: pointer; box-shadow: 0 2px 10px rgba(22,163,74,.3); transition: all .18s var(--ease);
}
.bcc-join-btn:hover { transform: translateY(-1px); }

   CALENDAR BOOKING
══════════════════════════════════════════════════════════════ */
.consult-cal-card { width: min(620px, 95vw); }
.cal-body { padding: 1.2rem 1.4rem 1.4rem; }
.cal-expert-info { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.cal-exp-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-serif); font-style: italic; font-size: 1.1rem; color: white; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,0,0,.2); overflow: hidden; position: relative; }
.cal-exp-name { font-size: .92rem; font-weight: 700; color: var(--ink); }
.cal-exp-spec { font-size: .72rem; color: var(--dim); margin-top: .1rem; }
.cal-section-label { font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-bottom: .6rem; }

/* Date grid — horizontal scroll */
.cal-day-grid { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1.2rem; scrollbar-width: none; }
.cal-day-grid::-webkit-scrollbar { display: none; }
.cal-day-btn {
  display: flex; flex-direction: column; align-items: center; gap: .06rem;
  padding: .55rem .6rem; flex-shrink: 0; min-width: 52px;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; transition: all .17s var(--ease);
}
.cal-day-btn:hover { border-color: var(--saffron); background: var(--saffron-l); }
.cal-day-btn.today { border-color: var(--saffron-d); background: var(--saffron-l); }
.cal-day-btn.selected { background: var(--saffron); border-color: var(--saffron); box-shadow: 0 2px 10px var(--saffron-glow); }
.cal-day-btn.selected .cal-day-name,
.cal-day-btn.selected .cal-day-num,
.cal-day-btn.selected .cal-day-month { color: white; }
.cal-day-name { font-family: var(--ff-mono); font-size: .55rem; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.cal-day-num { font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.cal-day-month { font-size: .54rem; color: var(--dim); }

/* Time slot grid */
.cal-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: 1.2rem; }
.cal-time-placeholder { grid-column: 1/-1; text-align: center; font-size: .78rem; color: var(--dim); padding: 1rem; font-style: italic; }
.cal-time-btn {
  padding: .5rem .3rem; text-align: center;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-size: .75rem; color: var(--ink-3);
  cursor: pointer; transition: all .17s var(--ease);
}
.cal-time-btn:hover:not(:disabled) { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.cal-time-btn.selected { background: var(--saffron); border-color: var(--saffron); color: white; box-shadow: 0 2px 10px var(--saffron-glow); }
.cal-time-btn.booked { background: var(--bg-3); border-color: var(--border); color: var(--dim); cursor: not-allowed; opacity: .6; text-decoration: line-through; }

/* Confirm bar */
.cal-confirm-bar {
  background: var(--bg-2); border: 1.5px solid var(--saffron);
  border-radius: var(--r); padding: .85rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  animation: card-reveal .25s var(--ease) both;
}
.cal-confirm-detail { font-size: .78rem; color: var(--ink-2); line-height: 1.6; }
.cal-confirm-btn {
  flex-shrink: 0; padding: .6rem 1.1rem; background: var(--saffron); border: none;
  border-radius: var(--r-sm); color: white; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .18s var(--ease); box-shadow: 0 2px 10px var(--saffron-glow);
}
.cal-confirm-btn:hover { background: var(--saffron-h); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   VIDEO CALL MODAL
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   VIDEO CALL — Full immersive call with live camera + expert sim
══════════════════════════════════════════════════════════════ */

/* Overlay */
.vc-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #07080f;
  display: flex; align-items: center; justify-content: center;
  animation: overlay-in .3s ease both;
}
.vc-panel {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
}

/* ── REMOTE — expert video simulation ───────────────────── */
.vc-remote {
  flex: 1; position: relative; overflow: hidden;
  background: #07080f;
  display: flex; align-items: center; justify-content: center;
}

/* Ambient colour blob matching expert colour */
.vc-remote-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, var(--vc-color, rgba(249,115,22,.15)) 0%, transparent 65%);
  animation: vc-glow-breathe 4s ease-in-out infinite;
}
@keyframes vc-glow-breathe {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.05); }
}

/* Expert video area */
.vc-expert-video {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.2rem; position: relative; z-index: 1;
}

/* Subtle dark-to-transparent gradient bg behind expert */
.vc-expert-bg {
  position: absolute; inset: -60px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.02) 0%, transparent 60%);
  pointer-events: none;
}

/* Avatar wrap with pulsing rings */
.vc-expert-av-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 140px; height: 140px;
}
.vc-expert-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid var(--vc-color, rgba(249,115,22,.4));
  opacity: 0; transition: opacity .4s;
}
.vc-ring-1 { width: 160px; height: 160px; }
.vc-ring-2 { width: 185px; height: 185px; }

/* Animate rings when expert is "speaking" */
.vc-expert-video.speaking .vc-ring-1 { opacity: .5; animation: vc-ring-pulse 1.2s ease-in-out infinite; }
.vc-expert-video.speaking .vc-ring-2 { opacity: .25; animation: vc-ring-pulse 1.2s .3s ease-in-out infinite; }
@keyframes vc-ring-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* Expert avatar circle */
.vc-expert-av {
  width: 130px; height: 130px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: 3.2rem; color: white;
  position: relative; z-index: 1; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.vc-expert-video.speaking .vc-expert-av {
  animation: vc-av-nod .8s ease-in-out infinite alternate;
}
@keyframes vc-av-nod {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-4px) scale(1.02); }
}

/* Expert name + waveform + status */
.vc-expert-info {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  position: relative; z-index: 1;
}
.vc-expert-name {
  font-size: 1.35rem; font-weight: 700; color: white;
  font-family: var(--ff); letter-spacing: .01em;
}
.vc-expert-wave {
  display: flex; align-items: center; gap: 3px; height: 22px;
  opacity: 0; transition: opacity .3s;
}
.vc-expert-video.speaking .vc-expert-wave { opacity: 1; }
.vc-ew-bar {
  width: 3px; border-radius: 2px; background: var(--vc-color, rgba(249,115,22,.8));
  animation: vc-wave-dance .6s ease-in-out infinite alternate;
  height: 4px;
}
.vc-ew-bar:nth-child(1){--h:6px;animation-delay:.00s}
.vc-ew-bar:nth-child(2){--h:12px;animation-delay:.07s}
.vc-ew-bar:nth-child(3){--h:18px;animation-delay:.14s}
.vc-ew-bar:nth-child(4){--h:14px;animation-delay:.21s}
.vc-ew-bar:nth-child(5){--h:20px;animation-delay:.14s}
.vc-ew-bar:nth-child(6){--h:16px;animation-delay:.07s}
.vc-ew-bar:nth-child(7){--h:10px;animation-delay:.00s}
.vc-ew-bar:nth-child(8){--h:6px;animation-delay:.07s}
@keyframes vc-wave-dance {
  from { height: 4px; }
  to   { height: calc(4px + var(--h, 12px)); }
}
.vc-expert-status {
  font-family: var(--ff-mono); font-size: .7rem;
  color: rgba(255,255,255,.45); letter-spacing: .1em;
}

/* Connecting overlay */
.vc-connecting {
  position: absolute; inset: 0; z-index: 10;
  background: #07080f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; transition: opacity .5s ease;
}
.vc-connecting.hidden { opacity: 0; pointer-events: none; }
.vc-conn-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: rgba(249,115,22,.8);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.vc-conn-text { font-family: var(--ff-mono); font-size: .72rem; color: rgba(255,255,255,.4); letter-spacing: .14em; }

/* ── SELF — user live webcam ─────────────────────────────── */
.vc-self {
  position: absolute; bottom: 5.5rem; right: 1.2rem;
  width: 140px; height: 100px; border-radius: 12px;
  background: #111528; border: 2px solid rgba(255,255,255,.2);
  overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transition: all .25s var(--ease);
  z-index: 10;
}
.vc-self:hover { border-color: rgba(255,255,255,.4); transform: scale(1.04); }
#vc-self-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scaleX(-1); /* mirror — natural selfie view */
  border-radius: 10px;
}
.vc-self-no-cam {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #111528;
}
.vc-self-label {
  position: absolute; bottom: .3rem; left: .45rem;
  font-size: .6rem; color: rgba(255,255,255,.45);
  font-family: var(--ff-mono); text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* ── TOPBAR ──────────────────────────────────────────────── */
.vc-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, transparent 100%);
}
.vc-call-info { display: flex; align-items: center; gap: .5rem; }
.vc-call-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: dot-pulse 1.5s ease-in-out infinite; }
#vc-timer { font-family: var(--ff-mono); font-size: .85rem; color: white; letter-spacing: .1em; }
.vc-call-title { font-size: .75rem; color: rgba(255,255,255,.55); font-family: var(--ff-mono); letter-spacing: .08em; }

/* Network quality bars */
.vc-network-qual { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.vc-net-bar {
  width: 4px; border-radius: 2px; background: rgba(255,255,255,.2);
  transition: background .4s;
}
.vc-net-bar:nth-child(1){ height: 5px; }
.vc-net-bar:nth-child(2){ height: 8px; }
.vc-net-bar:nth-child(3){ height: 11px; }
.vc-net-bar:nth-child(4){ height: 15px; }
.vc-network-qual.good .vc-net-bar { background: #22c55e; }
.vc-network-qual.ok   .vc-net-bar:nth-child(-n+3) { background: #f59e0b; }
.vc-network-qual.poor .vc-net-bar:nth-child(-n+2) { background: #ef4444; }

/* ── CONTROLS ────────────────────────────────────────────── */
.vc-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.2rem 1.5rem 2rem;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
}
.vc-ctrl-btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2);
  color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease); backdrop-filter: blur(8px);
}
.vc-ctrl-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.08); }
.vc-ctrl-btn.vc-ctrl-off { background: rgba(220,38,38,.3); border-color: rgba(220,38,38,.5); }
.vc-end-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: #ef4444; border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s var(--ease);
  box-shadow: 0 4px 20px rgba(239,68,68,.55);
}
.vc-end-btn:hover { background: #dc2626; transform: scale(1.1); box-shadow: 0 6px 30px rgba(239,68,68,.7); }

/* ── IN-CALL CHAT ────────────────────────────────────────── */
.vc-chat-panel {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 8;
  width: 280px; background: rgba(7,8,15,.93); backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column;
  animation: slide-in-right .25s var(--ease) both;
}
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.vc-chat-panel.hidden { display: none; }
.vc-chat-header {
  padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .14em;
  color: rgba(255,255,255,.4); text-transform: uppercase;
}
.vc-chat-msgs { flex: 1; overflow-y: auto; padding: .85rem .75rem; display: flex; flex-direction: column; gap: .45rem; }
.vc-chat-line { font-size: .76rem; color: rgba(255,255,255,.7); line-height: 1.5; }
.vc-chat-line.you { color: #f9b96e; }
.vc-chat-input-row { display: flex; border-top: 1px solid rgba(255,255,255,.1); }
.vc-chat-input { flex: 1; background: transparent; border: none; outline: none; padding: .65rem .8rem; color: white; font-size: .78rem; }
.vc-chat-input::placeholder { color: rgba(255,255,255,.25); }
.vc-chat-send { padding: .65rem .9rem; background: var(--saffron); border: none; color: white; cursor: pointer; display: flex; align-items: center; }

  background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, transparent 100%);
}
.vc-call-info { display: flex; align-items: center; gap: .5rem; }
.vc-call-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: dot-pulse 1.5s ease-in-out infinite; }
#vc-timer { font-family: var(--ff-mono); font-size: .85rem; color: white; letter-spacing: .1em; }
.vc-call-title { font-size: .78rem; color: rgba(255,255,255,.65); font-family: var(--ff-mono); letter-spacing: .06em; }

/* Controls bar */
.vc-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.2rem 1.5rem 1.8rem;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
}
.vc-ctrl-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2);
  color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease); backdrop-filter: blur(8px);
}
.vc-ctrl-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.08); }
.vc-ctrl-btn.vc-ctrl-off { background: rgba(220,38,38,.25); border-color: rgba(220,38,38,.4); }
.vc-end-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: #ef4444; border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s var(--ease);
  box-shadow: 0 4px 20px rgba(239,68,68,.5);
}
.vc-end-btn:hover { background: #dc2626; transform: scale(1.1); box-shadow: 0 6px 28px rgba(239,68,68,.6); }

/* In-call chat */
.vc-chat-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 280px; background: rgba(10,10,20,.92); backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column;
}
.vc-chat-panel.hidden { display: none; }
.vc-chat-msgs { flex: 1; overflow-y: auto; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .4rem; }
.vc-chat-line { font-size: .75rem; color: rgba(255,255,255,.75); line-height: 1.45; }
.vc-chat-line.you { color: #f9b96e; }
.vc-chat-input-row { display: flex; border-top: 1px solid rgba(255,255,255,.1); }
.vc-chat-input { flex: 1; background: transparent; border: none; outline: none; padding: .65rem .75rem; color: white; font-size: .78rem; }
.vc-chat-input::placeholder { color: rgba(255,255,255,.3); }
.vc-chat-send { padding: .65rem .8rem; background: var(--saffron); border: none; color: white; font-size: .85rem; cursor: pointer; }


/* ── POST-CALL REPORT ───────────────────────────────────── */
.call-report {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin-top: .55rem;
  animation: card-reveal .3s var(--ease) both;
}
.cr-header {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.1rem; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.cr-check-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--jade); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(22,163,74,.3); margin-top: .1rem;
}
.cr-header-info { flex: 1; }
.cr-title { font-size: .9rem; font-weight: 700; color: var(--ink-2); margin-bottom: .3rem; }
.cr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .7rem; color: var(--dim); }
.cr-av {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: .55rem; color: white;
  overflow: hidden; position: relative; vertical-align: middle;
}
.cr-sep { color: var(--border-2); }
.cr-section { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
.cr-section:last-of-type { border-bottom: none; }
.cr-section-label {
  font-family: var(--ff-mono); font-size: .56rem; letter-spacing: .14em;
  color: var(--dim); text-transform: uppercase; margin-bottom: .45rem;
}
.cr-summary-text { font-size: .8rem; color: var(--ink-3); line-height: 1.6; }
.cr-recs-list { padding-left: 1.1rem; display: flex; flex-direction: column; gap: .32rem; }
.cr-recs-list li { font-size: .79rem; color: var(--ink-2); line-height: 1.5; }
.cr-plan-text { font-size: .79rem; color: var(--ink-3); line-height: 1.55; }
.cr-next-section { background: var(--saffron-l); }
.cr-next-text { font-size: .79rem; color: var(--saffron-d); line-height: 1.55; font-weight: 500; }
.cr-actions {
  display: flex; gap: .5rem; padding: .85rem 1.1rem;
  border-top: 1px solid var(--border); background: var(--bg-2);
}
.cr-btn-primary {
  flex: 1; padding: .55rem; background: var(--saffron); border: none;
  border-radius: var(--r-sm); color: white; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .18s var(--ease); box-shadow: 0 2px 8px var(--saffron-glow);
}
.cr-btn-primary:hover { background: var(--saffron-h); }
.cr-btn-secondary {
  flex: 1; padding: .55rem; background: transparent;
  border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .18s var(--ease);
}
.cr-btn-secondary:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }


/* ══════════════════════════════════════════════════════════════
   CART — Full cart with qty controls and order summary
══════════════════════════════════════════════════════════════ */
.cart-full {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin-top: .6rem;
  animation: card-reveal .3s var(--ease) both;
}
.cart-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.cart-title { font-family: var(--ff-serif); font-size: 1rem; font-style: italic; color: var(--ink); }
.cart-count { font-family: var(--ff-mono); font-size: .65rem; color: var(--dim); }

/* Cart item rows */
.cart-items-full { display: flex; flex-direction: column; }
.cart-row {
  display: flex; gap: .75rem; padding: .85rem 1rem;
  border-bottom: 1px solid var(--border); align-items: flex-start;
  transition: background .15s;
}
.cart-row:hover { background: var(--bg-2); }
.cart-row-img {
  width: 68px; height: 68px; flex-shrink: 0;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--border);
}
.cart-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-name { font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .2rem; line-height: 1.3; }
.cart-row-meta { font-size: .67rem; color: var(--jade); margin-bottom: .45rem; }
.cart-row-controls { display: flex; align-items: center; gap: .65rem; }
.cart-qty-group {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden;
}
.cart-qty-btn {
  width: 28px; height: 28px; background: var(--bg-2); border: none;
  font-size: 1rem; color: var(--ink-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cart-qty-btn:hover { background: var(--saffron-l); color: var(--saffron-d); }
.cart-qty-val {
  min-width: 30px; text-align: center;
  font-family: var(--ff-mono); font-size: .78rem; color: var(--ink);
  padding: 0 .3rem;
}
.cart-remove-btn {
  font-size: .72rem; color: var(--rose); background: none; border: none;
  cursor: pointer; padding: .1rem .3rem; border-radius: 3px;
  transition: background .15s;
}
.cart-remove-btn:hover { background: var(--rose-l); }
.cart-row-price { text-align: right; flex-shrink: 0; }
.cart-row-subtotal { font-family: var(--ff-mono); font-size: .95rem; color: var(--ink); font-weight: 500; }
.cart-row-unit { font-size: .62rem; color: var(--dim); margin-top: .1rem; }

/* Summary box */
.cart-summary-box {
  padding: 1rem; background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.cart-summary-row {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--ink-3); margin-bottom: .35rem;
}
.cart-free-delivery { color: var(--jade); font-weight: 600; }
.cart-free-msg { font-size: .7rem; color: var(--jade); margin-bottom: .6rem; }
.cart-summary-total {
  display: flex; justify-content: space-between;
  font-size: .95rem; font-weight: 700; color: var(--ink);
  padding-top: .6rem; border-top: 1px solid var(--border-2); margin-bottom: .8rem;
}
.cart-checkout-btn {
  width: 100%; padding: .78rem; background: var(--saffron); border: none;
  border-radius: var(--r-sm); color: white; font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease);
  box-shadow: 0 2px 12px var(--saffron-glow); margin-bottom: .4rem;
}
.cart-checkout-btn:hover { background: var(--saffron-h); transform: translateY(-1px); box-shadow: 0 5px 20px var(--saffron-glow); }
.cart-continue-btn {
  width: 100%; padding: .6rem; background: transparent;
  border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: .8rem; cursor: pointer; transition: all .17s;
}
.cart-continue-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.cart-trust-row {
  display: flex; justify-content: center; gap: 1.2rem;
  padding: .65rem 1rem .8rem; background: var(--bg-2);
}
.cart-trust-item { font-size: .65rem; color: var(--dim); }

/* Cart badge on quick pills */
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  background: var(--saffron); color: white;
  border-radius: var(--r-pill); font-size: .55rem; font-weight: 700;
  padding: 0 .28rem; margin-left: .3rem; vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT v2 — Amazon-inspired multi-step layout
══════════════════════════════════════════════════════════════ */
#checkout-body { padding: 0; overflow-y: auto; flex: 1; }

.co2-layout {
  display: flex; gap: 0; height: 100%; min-height: 0;
}

/* Left: steps + forms */
.co2-main { flex: 1; overflow-y: auto; padding: 1.2rem 1.2rem 1.2rem 1.4rem; }

/* Stepper */
.co2-stepper {
  display: flex; align-items: center; margin-bottom: 1.5rem;
}
.co2-step {
  display: flex; align-items: center; gap: .4rem;
}
.co2-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
  background: var(--bg-3); border: 2px solid var(--border-2); color: var(--dim);
  transition: all .3s;
}
.co2-step.active .co2-step-num { background: var(--saffron); border-color: var(--saffron); color: white; box-shadow: 0 0 10px var(--saffron-glow); }
.co2-step.done .co2-step-num { background: var(--jade); border-color: var(--jade); color: white; }
.co2-step-label { font-size: .72rem; font-weight: 600; color: var(--dim); transition: color .3s; }
.co2-step.active .co2-step-label { color: var(--saffron-d); }
.co2-step.done .co2-step-label { color: var(--jade); }
.co2-step-line {
  flex: 1; height: 2px; background: var(--border); margin: 0 .5rem;
  transition: background .3s;
}
.co2-step-line.done { background: var(--jade); }

/* Step content */
.co2-step-content { animation: card-reveal .3s var(--ease) both; }
.co2-step-heading {
  font-family: var(--ff-serif); font-style: italic;
  font-size: 1.1rem; color: var(--ink); margin-bottom: 1.1rem;
}

/* Address form */
.co2-addr-form { display: flex; flex-direction: column; gap: .55rem; }
.co2-field { display: flex; flex-direction: column; gap: .22rem; }
.co2-field-row { display: flex; gap: .5rem; }
.co2-field-row .co2-field { flex: 1; }
.co2-label { font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.co2-input {
  background: var(--bg-2); border: 1.5px solid var(--border-2);
  border-radius: var(--r-sm); padding: .55rem .8rem; color: var(--ink);
  font-family: var(--ff); font-size: .83rem; outline: none; transition: all .17s;
  width: 100%;
}
.co2-input:focus { border-color: var(--saffron); background: var(--surface); box-shadow: 0 0 0 3px var(--saffron-xl); }

/* Saved address card */
.co2-saved-addr {
  background: var(--bg-2); border: 1.5px solid var(--saffron);
  border-radius: var(--r); padding: .9rem 1rem; margin-bottom: .9rem;
  position: relative;
}
.co2-saved-addr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.co2-addr-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.co2-addr-edit { font-size: .72rem; color: var(--saffron-d); background: none; border: none; cursor: pointer; font-weight: 600; }
.co2-addr-line { font-size: .78rem; color: var(--ink-3); line-height: 1.55; }

/* Payment options */
.co2-pay-methods { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.co2-pay-option {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem; cursor: pointer;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); transition: all .18s var(--ease);
}
.co2-pay-option:hover { border-color: var(--saffron); background: var(--saffron-l); }
.co2-pay-option.selected { border-color: var(--saffron); background: var(--saffron-l); }
.co2-pay-option input[type="radio"] { display: none; }
.co2-pay-icon { font-size: 1.3rem; flex-shrink: 0; }
.co2-pay-name { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.co2-pay-sub { font-size: .67rem; color: var(--dim); }
.co2-card-fields { display: flex; flex-direction: column; gap: .4rem; margin: .2rem 0 .4rem 2.6rem; }
.co2-card-fields.hidden { display: none; }
.co2-upi-apps { display: flex; gap: .35rem; margin-top: .15rem; }
.co2-upi-app {
  padding: .3rem .7rem; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  font-size: .7rem; color: var(--ink-3); cursor: pointer; transition: all .17s;
}
.co2-upi-app:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.co2-ssl-note { font-size: .67rem; color: var(--dim); margin-bottom: .85rem; }

/* Review step */
.co2-review-section {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem 0; border-bottom: 1px solid var(--border);
}
.co2-review-label { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; min-width: 90px; padding-top: .1rem; }
.co2-review-value { flex: 1; font-size: .82rem; color: var(--ink-2); line-height: 1.55; }
.co2-review-edit { font-size: .72rem; color: var(--saffron-d); background: none; border: none; cursor: pointer; font-weight: 600; white-space: nowrap; }
.co2-delivery-date { color: var(--jade); font-weight: 600; }
.co2-review-total { font-family: var(--ff-mono); font-size: 1.05rem; color: var(--ink); font-weight: 600; }

.co2-place-order-wrap { margin-top: 1.2rem; }
.co2-place-btn {
  width: 100%; padding: .85rem; background: var(--saffron); border: none;
  border-radius: var(--r-sm); color: white; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease);
  box-shadow: 0 3px 16px var(--saffron-glow); margin-bottom: .5rem;
}
.co2-place-btn:hover { background: var(--saffron-h); transform: translateY(-1px); box-shadow: 0 6px 26px var(--saffron-glow); }
.co2-terms-note { font-size: .64rem; color: var(--dim); text-align: center; }

/* Shared action buttons */
.co2-primary-btn {
  width: 100%; padding: .75rem; background: var(--saffron); border: none;
  border-radius: var(--r-sm); color: white; font-size: .85rem; font-weight: 700;
  cursor: pointer; margin-top: .85rem; transition: all .2s var(--ease);
  box-shadow: 0 2px 12px var(--saffron-glow);
}
.co2-primary-btn:hover { background: var(--saffron-h); transform: translateY(-1px); }
.co2-back-btn {
  width: 100%; padding: .6rem; background: none;
  border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: .8rem; cursor: pointer;
  margin-top: .4rem; transition: all .17s;
}
.co2-back-btn:hover { border-color: var(--saffron); color: var(--saffron-d); }

/* Right: Order summary sidebar */
.co2-summary {
  width: 240px; flex-shrink: 0; padding: 1.2rem 1rem;
  background: var(--bg-2); border-left: 1px solid var(--border);
  overflow-y: auto;
}
.co2-summary-title {
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .16em;
  color: var(--dim); text-transform: uppercase; margin-bottom: .9rem;
}
.co2-summary-item {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-bottom: .75rem;
}
.co2-summary-img {
  width: 42px; height: 42px; object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--border); flex-shrink: 0; display: block;
}
.co2-summary-info { flex: 1; min-width: 0; }
.co2-summary-name { font-size: .73rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.co2-summary-qty { font-family: var(--ff-mono); font-size: .6rem; color: var(--dim); }
.co2-summary-price { font-family: var(--ff-mono); font-size: .78rem; color: var(--ink); flex-shrink: 0; }
.co2-summary-divider { height: 1px; background: var(--border); margin: .7rem 0; }
.co2-summary-row {
  display: flex; justify-content: space-between;
  font-size: .76rem; color: var(--ink-3); margin-bottom: .3rem;
}
.co2-free { color: var(--jade); font-weight: 600; }
.co2-summary-total {
  display: flex; justify-content: space-between;
  font-size: .9rem; font-weight: 700; color: var(--ink);
  padding-top: .5rem; border-top: 1px solid var(--border-2); margin-top: .3rem;
}

/* Success / confirmation screen */
.co2-success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2.5rem 2rem;
  animation: card-reveal .4s var(--ease) both;
}
.co2-success-icon {
  width: 64px; height: 64px; background: var(--jade); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; box-shadow: 0 4px 20px rgba(22,163,74,.3);
  animation: check-pop .55s var(--spring) both;
}
.co2-success-title {
  font-family: var(--ff-serif); font-size: 1.6rem; font-weight: 400;
  font-style: italic; color: var(--ink); margin-bottom: .4rem;
}
.co2-success-sub { font-size: .84rem; color: var(--dim); line-height: 1.6; margin-bottom: 1.2rem; max-width: 300px; }
.co2-order-id-box {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .55rem 1.2rem;
  margin-bottom: 1.5rem; display: flex; gap: .6rem; align-items: center;
}
.co2-order-label { font-family: var(--ff-mono); font-size: .6rem; color: var(--dim); letter-spacing: .1em; }
.co2-order-id { font-family: var(--ff-mono); font-size: .88rem; color: var(--saffron-d); font-weight: 600; }

/* Order tracking timeline */
.co2-tracking-steps { width: 100%; max-width: 320px; margin-bottom: 1.2rem; }
.co2-track-step {
  display: flex; gap: .75rem; align-items: flex-start;
  padding-bottom: 1rem; position: relative;
}
.co2-track-step:not(:last-child)::before {
  content: ''; position: absolute; left: 9px; top: 20px;
  width: 2px; bottom: 0; background: var(--border);
}
.co2-track-step.done::before { background: var(--jade); }
.co2-track-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--border); border: 2px solid var(--border-2);
  margin-top: 2px; transition: all .3s;
}
.co2-track-step.done .co2-track-dot { background: var(--jade); border-color: var(--jade); }
.co2-track-info { text-align: left; }
.co2-track-info strong { display: block; font-size: .8rem; color: var(--ink-2); }
.co2-track-info span { font-size: .7rem; color: var(--dim); }
.co2-success-total { font-family: var(--ff-mono); font-size: .88rem; color: var(--ink); margin-bottom: 1.2rem; }
.co2-success-close {
  padding: .65rem 2rem; background: var(--saffron); border: none;
  border-radius: var(--r-pill); color: white; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: all .2s var(--ease); box-shadow: 0 2px 12px var(--saffron-glow);
}
.co2-success-close:hover { background: var(--saffron-h); transform: translateY(-1px); }


/* ── GAME MODAL ───────────────────────────────────────── */
.game-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); width: min(1060px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.game-panel-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--bg-3); }
.gph-left { display: flex; align-items: center; gap: .7rem; }
.gph-icon-svg { color: var(--amber); flex-shrink: 0; }
.gph-title { font-family: var(--ff-serif); font-size: 1rem; font-weight: 500; color: var(--text); font-style: italic; }
.gph-hint { font-family: var(--ff-mono); font-size: .58rem; color: var(--dim); letter-spacing: .06em; }
.gph-right { display: flex; align-items: center; gap: .7rem; }
.game-stat-chip { display: flex; flex-direction: column; align-items: center; padding: .22rem .75rem; background: var(--bg-4); border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 62px; transition: all .3s; }
.game-stat-chip.accent { border-color: rgba(240,165,0,.3); background: var(--amber-xl); }
.game-stat-chip.accent .gsc-val { color: var(--amber); }
.gsc-lbl { font-family: var(--ff-mono); font-size: .5rem; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.gsc-val { font-family: var(--ff-mono); font-size: .96rem; color: var(--text-2); transition: color .2s; }
@keyframes score-pulse { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }
.gsc-val.pulse { animation: score-pulse .22s var(--ease); }
.game-panel-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.game-iframe { flex: 1; border: none; min-height: 480px; }
.game-side { width: 198px; background: var(--bg-2); border-left: 1px solid var(--border); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; flex-shrink: 0; }
.gs-title { font-family: var(--ff-mono); font-size: .56rem; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; margin-bottom: .55rem; }
.gesture-guide { display: flex; flex-direction: column; gap: .45rem; }
.gg-row { display: flex; flex-direction: column; gap: .08rem; }
.gg-gesture { font-size: .73rem; font-weight: 600; color: var(--amber); }
.gg-desc { font-size: .64rem; color: var(--dim); }
.diff-row { display: flex; gap: .32rem; }
.diff-btn { flex: 1; padding: .3rem; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--dim); font-size: .64rem; font-weight: 600; transition: all .18s var(--ease); }
.diff-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-xl); }
.diff-btn.active { border-color: var(--amber); color: var(--amber); background: var(--amber-xl); }
.lb-list { display: flex; flex-direction: column; gap: .25rem; }
.lb-row { font-family: var(--ff-mono); font-size: .66rem; color: var(--dim); padding: .28rem .42rem; border-radius: 5px; transition: all .18s; }
.lb-row:hover { background: var(--bg-3); }
.lb-row.you { color: var(--amber); background: var(--amber-xl); }

/* ── MODALS SHARED ────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(13,13,11,.45); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: overlay-in .25s ease both; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; max-height: 88vh; animation: modal-scale-in .3s var(--ease) both; }
@keyframes modal-scale-in { from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: none; } }
.modal-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mch-title { font-family: var(--ff-serif); font-size: 1rem; font-weight: 500; font-style: italic; color: var(--text); }
.modal-card-body { padding: 1.2rem; overflow-y: auto; flex: 1; }
.act-modal-card { width: min(450px, 94vw); }
.video-modal-card { width: min(800px, 94vw); padding: 0; }
.close-btn { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .28rem .72rem; font-size: .73rem; font-weight: 600; color: var(--text-3); transition: all .18s; }
.close-btn:hover { background: var(--coral-l); border-color: var(--coral); color: var(--coral); }

/* ── SHIMMER ──────────────────────────────────────────── */
.shimmer { background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: shimmer-sweep 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── UTILITY ──────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── RESPONSIVE ───────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   SIDEBAR — Profile, Navigation, History
═══════════════════════════════════════════════════════════ */
.sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  transition: width .28s var(--ease), transform .28s var(--ease);
  z-index: 40;
}
.sidebar.collapsed { width: 0; }

/* Header */
.sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-logo { display: flex; align-items: center; gap: .45rem; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); flex-shrink: 0; animation: dot-pulse 2.5s ease-in-out infinite; }
.sb-brand { font-family: var(--ff-serif); font-style: italic; font-size: 1.1rem; color: var(--ink); letter-spacing: .04em; }
.sb-header-actions { display: flex; gap: .3rem; }
.sb-icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease); flex-shrink: 0;
}
.sb-icon-btn:hover { background: var(--bg-2); border-color: var(--border); color: var(--ink); }

/* Profile card */
.sb-profile-card {
  display: flex; align-items: center; gap: .6rem;
  margin: .65rem .75rem .45rem;
  padding: .6rem .7rem;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: all .18s var(--ease);
}
.sb-profile-card:hover { border-color: var(--saffron); background: var(--saffron-l); }
.sb-profile-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--saffron); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic;
  font-size: .95rem; font-weight: 400; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(249,115,22,.25);
}
.sb-profile-text { flex: 1; min-width: 0; }
.sb-profile-name { font-size: .82rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-profile-goal { font-family: var(--ff-mono); font-size: .58rem; color: var(--dim); letter-spacing: .04em; margin-top: .08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-switch-btn {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--r-sm);
  background: transparent; border: none; color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .18s;
}
.sb-switch-btn:hover { color: var(--saffron); }

/* Mini stats strip */
.sb-mini-stats {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: .2rem .75rem .55rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .45rem 0;
}
.sb-mini-stat { flex: 1; text-align: center; }
.sb-mstat-val { font-family: var(--ff-mono); font-size: .82rem; color: var(--saffron-d); display: block; font-weight: 500; }
.sb-mstat-lbl { font-size: .55rem; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
.sb-mstat-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

/* Section labels */
.sb-section {
  font-family: var(--ff-mono);
  font-size: .53rem; letter-spacing: .18em; color: var(--dim-2);
  text-transform: uppercase;
  padding: .35rem 1rem .25rem; flex-shrink: 0;
}

/* Navigation */
.sb-nav { display: flex; flex-direction: column; gap: .08rem; padding: 0 .55rem; flex-shrink: 0; }
.sb-nav-btn {
  display: flex; align-items: center; gap: .52rem;
  padding: .48rem .65rem; border-radius: var(--r-sm);
  background: transparent; border: none;
  font-size: .78rem; font-weight: 500; color: var(--ink-3);
  cursor: pointer; text-align: left; width: 100%;
  transition: all .17s var(--ease); white-space: nowrap;
}
.sb-nav-btn svg { flex-shrink: 0; color: var(--dim); transition: color .17s; }
.sb-nav-btn:hover { background: var(--bg-2); color: var(--saffron-d); }
.sb-nav-btn:hover svg { color: var(--saffron); }
.sb-nav-btn.active { background: var(--saffron-l); color: var(--saffron-d); }
.sb-nav-btn.active svg { color: var(--saffron); }

/* History */
.sb-history {
  flex: 1; overflow-y: auto; padding: .3rem .55rem;
  display: flex; flex-direction: column; gap: .06rem;
}
.sb-history::-webkit-scrollbar { width: 2px; }
.sb-history::-webkit-scrollbar-thumb { background: var(--border); }

.sb-history-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .42rem .65rem; border-radius: var(--r-sm);
  cursor: pointer; transition: background .16s; width: 100%;
  background: transparent; border: none; text-align: left;
}
.sb-history-item:hover { background: var(--bg-2); }
.sb-history-item.active { background: var(--saffron-l); }
.sb-hi-icon { color: var(--dim-2); flex-shrink: 0; }
.sb-hi-text { flex: 1; min-width: 0; }
.sb-hi-title { font-size: .74rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sb-hi-time  { font-family: var(--ff-mono); font-size: .57rem; color: var(--dim-2); }
.sb-history-empty { font-size: .74rem; color: var(--dim-2); text-align: center; padding: 1.5rem .5rem; font-style: italic; }

/* Footer */
.sb-footer { padding: .55rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.sb-version { font-family: var(--ff-mono); font-size: .55rem; color: var(--dim-2); letter-spacing: .06em; }

/* Mobile overlay */
.sb-overlay { position: fixed; inset: 0; z-index: 39; background: rgba(13,13,11,.35); backdrop-filter: blur(2px); }

/* ═══════════════════════════════════════════════════════════
   PROFILE MODAL
═══════════════════════════════════════════════════════════ */
.profile-modal-card { width: min(440px, 94vw); padding: 0; overflow: visible; }
.profile-step { display: none; padding: 2rem 1.8rem 1.8rem; }
.profile-step.active { display: block; animation: card-reveal .3s var(--ease) both; }

.pm-header { text-align: center; margin-bottom: 1.5rem; }
.pm-logo-mark { font-family: var(--ff-serif); font-size: 1.8rem; font-style: italic; color: var(--ink); margin-bottom: .6rem; }
.pm-logo-mark .boot-a { color: var(--saffron); }
.pm-title { font-family: var(--ff-serif); font-size: 1.3rem; font-weight: 400; font-style: italic; color: var(--ink); margin-bottom: .25rem; }
.pm-sub   { font-size: .8rem; color: var(--dim); }

/* Profile list */
.pm-profiles { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.pm-profile-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: all .18s var(--ease);
}
.pm-profile-item:hover { border-color: var(--saffron); background: var(--saffron-l); transform: translateX(3px); }
.pm-pi-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic;
  font-size: 1.1rem; color: white; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pm-pi-name { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.pm-pi-meta { font-family: var(--ff-mono); font-size: .6rem; color: var(--dim); margin-top: .06rem; }
.pm-pi-arrow { margin-left: auto; color: var(--dim-2); transition: color .18s; }
.pm-profile-item:hover .pm-pi-arrow { color: var(--saffron); }
.pm-active-badge { font-family: var(--ff-mono); font-size: .54rem; color: var(--saffron-d); background: var(--saffron-l); border: 1px solid rgba(249,115,22,.2); padding: .1rem .4rem; border-radius: var(--r-pill); margin-left: auto; }

.pm-new-btn {
  width: 100%; padding: .65rem;
  background: transparent; border: 1.5px dashed var(--border-2);
  border-radius: var(--r); color: var(--dim); font-size: .8rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  cursor: pointer; transition: all .18s var(--ease);
}
.pm-new-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }

/* Create form */
.pm-back-btn {
  display: flex; align-items: center; gap: .35rem;
  background: none; border: none; color: var(--dim); font-size: .78rem;
  cursor: pointer; margin-bottom: 1.1rem; padding: 0; transition: color .18s;
}
.pm-back-btn:hover { color: var(--saffron-d); }

.pm-avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.pm-avatar-preview {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--saffron); color: white; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic;
  font-size: 1.5rem; font-weight: 400;
  box-shadow: 0 4px 16px rgba(249,115,22,.3);
  transition: background .25s;
}
.pm-color-swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.pm-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .18s, border-color .18s; }
.pm-swatch:hover { transform: scale(1.2); }
.pm-swatch.active { border-color: var(--ink-2); transform: scale(1.15); }

.pm-form { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.1rem; }
.pm-field { display: flex; flex-direction: column; gap: .28rem; }
.pm-field-row { display: flex; gap: .5rem; }
.pm-field-row .pm-field { flex: 1; }
.pm-label { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.pm-input { background: var(--bg-2); border: 1.5px solid var(--border-2); border-radius: var(--r-sm); padding: .55rem .8rem; color: var(--ink); font-size: .84rem; outline: none; transition: all .17s; }
.pm-input:focus { border-color: var(--saffron); background: var(--surface); box-shadow: 0 0 0 3px var(--saffron-xl); }
.pm-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.pm-goal-btn {
  padding: .5rem .6rem; background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-size: .75rem; font-weight: 500; color: var(--ink-3);
  cursor: pointer; transition: all .18s var(--ease); text-align: center;
}
.pm-goal-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.pm-goal-btn.selected { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }

.pm-create-btn { width: 100%; padding: .75rem; background: var(--saffron); border: none; border-radius: var(--r-sm); color: white; font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); box-shadow: 0 2px 12px rgba(249,115,22,.28); }
.pm-create-btn:hover { background: var(--saffron-h); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,.32); }

/* ═══════════════════════════════════════════════════════════
   VOICE AGENT LAUNCH BUTTON (in input bar)
═══════════════════════════════════════════════════════════ */
.voice-agent-launch-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-d));
  border: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: white; cursor: pointer; position: relative; overflow: hidden;
  transition: all .2s var(--spring);
  box-shadow: 0 2px 10px rgba(249,115,22,.3);
}
.voice-agent-launch-btn:hover { transform: scale(1.08); box-shadow: 0 4px 18px rgba(249,115,22,.45); }
.voice-agent-launch-btn:active { transform: scale(.94); }
.va-launch-ripple {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.15);
  animation: va-launch-pulse 2.5s ease-in-out infinite;
}
@keyframes va-launch-pulse {
  0%, 100% { transform: scale(1); opacity: .15; }
  50%       { transform: scale(1.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   VOICE AGENT MODAL
═══════════════════════════════════════════════════════════ */
.va-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  animation: overlay-in .3s ease both;
}

/* Yantra background for voice agent — full screen version */
.va-yantra {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, var(--saffron-xl) 0%, transparent 55%),
    radial-gradient(circle, transparent 88%, rgba(232,229,223,.5) 88.5%, transparent 89.5%),
    radial-gradient(circle, transparent 72%, rgba(232,229,223,.4) 72.5%, transparent 73.5%),
    radial-gradient(circle, transparent 56%, rgba(232,229,223,.3) 56.5%, transparent 57.5%),
    radial-gradient(circle, transparent 40%, rgba(232,229,223,.25) 40.5%, transparent 41.5%),
    radial-gradient(circle, transparent 24%, rgba(232,229,223,.2) 24.5%, transparent 25.5%);
  background-size: 700px 700px;
  background-position: center;
  background-repeat: no-repeat;
  animation: yantra-breathe 8s ease-in-out infinite;
  pointer-events: none;
}

.va-panel {
  position: relative; z-index: 1;
  width: min(480px, 94vw);
  display: flex; flex-direction: column; align-items: center;
  padding: 2rem 1.5rem 2.5rem;
  animation: modal-scale-in .35s var(--ease) both;
}

.va-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-bottom: 2rem;
}
.va-title-row { display: flex; align-items: center; gap: .6rem; }
.va-label-text { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }
.va-state-badge {
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .08em;
  padding: .12rem .5rem; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--dim); transition: all .3s var(--ease);
}
.va-state-badge.listening { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: var(--rose); }
.va-state-badge.speaking  { background: var(--saffron-l); border-color: rgba(249,115,22,.3); color: var(--saffron-d); }
.va-state-badge.thinking  { background: rgba(2,132,199,.08); border-color: rgba(2,132,199,.25); color: var(--sky); }

.va-close-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s;
}
.va-close-btn:hover { background: var(--rose-l); border-color: var(--rose); color: var(--rose); }

/* Avatar area */
.va-avatar-area {
  position: relative;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2rem;
}

/* Pulsing rings — only active when listening/speaking */
.va-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--saffron);
  opacity: 0; transition: opacity .4s;
}
.va-ring-1 { inset: -16px; }
.va-ring-2 { inset: -30px; }
.va-ring-3 { inset: -46px; }

.va-overlay.listening .va-ring-1 { opacity: .4; animation: va-ring-pulse 1.4s ease-in-out infinite; }
.va-overlay.listening .va-ring-2 { opacity: .2; animation: va-ring-pulse 1.4s .3s ease-in-out infinite; }
.va-overlay.listening .va-ring-3 { opacity: .1; animation: va-ring-pulse 1.4s .6s ease-in-out infinite; }
.va-overlay.speaking  .va-ring-1 { opacity: .6; animation: va-ring-pulse .9s ease-in-out infinite; }
.va-overlay.speaking  .va-ring-2 { opacity: .3; animation: va-ring-pulse .9s .2s ease-in-out infinite; }
.va-overlay.speaking  .va-ring-3 { opacity: .15; animation: va-ring-pulse .9s .4s ease-in-out infinite; }

@keyframes va-ring-pulse {
  0%,100% { transform: scale(1);    opacity: inherit; }
  50%      { transform: scale(1.06); }
}

.va-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--saffron-d), var(--saffron));
  display: flex; align-items: center; justify-content: center;
  color: white; box-shadow: 0 8px 32px rgba(249,115,22,.35);
  transition: transform .3s var(--spring), box-shadow .3s;
  z-index: 1;
}
.va-overlay.listening .va-avatar { transform: scale(1.08); box-shadow: 0 12px 42px rgba(249,115,22,.45); }
.va-overlay.speaking  .va-avatar { animation: va-avatar-bounce .5s ease-in-out infinite alternate; }
@keyframes va-avatar-bounce { from { transform: scale(1.04); } to { transform: scale(1.1); } }
.va-avatar-icon { color: white; }

/* Waveform — 20 bars arranged in a horizontal line below avatar */
.va-waveform {
  position: absolute; bottom: -16px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2.5px;
  height: 24px;
}
.va-bar {
  width: 3px; border-radius: 2px;
  background: var(--saffron); height: 3px;
  transition: height .1s, opacity .3s;
  opacity: .3;
}
/* Animated bars when active */
.va-overlay.listening .va-bar,
.va-overlay.speaking .va-bar {
  opacity: 1;
  animation: va-bar-dance 0.8s ease-in-out infinite alternate;
}
.va-overlay.listening .va-bar:nth-child(1)  { animation-delay: .00s; }
.va-overlay.listening .va-bar:nth-child(2)  { animation-delay: .04s; }
.va-overlay.listening .va-bar:nth-child(3)  { animation-delay: .08s; }
.va-overlay.listening .va-bar:nth-child(4)  { animation-delay: .12s; }
.va-overlay.listening .va-bar:nth-child(5)  { animation-delay: .16s; }
.va-overlay.listening .va-bar:nth-child(6)  { animation-delay: .20s; }
.va-overlay.listening .va-bar:nth-child(7)  { animation-delay: .16s; }
.va-overlay.listening .va-bar:nth-child(8)  { animation-delay: .12s; }
.va-overlay.listening .va-bar:nth-child(9)  { animation-delay: .08s; }
.va-overlay.listening .va-bar:nth-child(10) { animation-delay: .04s; }
.va-overlay.listening .va-bar:nth-child(11) { animation-delay: .00s; }
.va-overlay.listening .va-bar:nth-child(12) { animation-delay: .04s; }
.va-overlay.listening .va-bar:nth-child(13) { animation-delay: .08s; }
.va-overlay.listening .va-bar:nth-child(14) { animation-delay: .12s; }
.va-overlay.listening .va-bar:nth-child(15) { animation-delay: .16s; }
.va-overlay.listening .va-bar:nth-child(16) { animation-delay: .20s; }
.va-overlay.listening .va-bar:nth-child(17) { animation-delay: .16s; }
.va-overlay.listening .va-bar:nth-child(18) { animation-delay: .12s; }
.va-overlay.listening .va-bar:nth-child(19) { animation-delay: .08s; }
.va-overlay.listening .va-bar:nth-child(20) { animation-delay: .04s; }

.va-overlay.speaking .va-bar { animation-duration: .4s; }

@keyframes va-bar-dance {
  from { height: 3px; }
  to   { height: calc(3px + var(--h, 18px)); }
}
/* Vary heights with custom properties via nth-child */
.va-bar:nth-child(1)  { --h: 6px; } .va-bar:nth-child(2)  { --h: 10px; }
.va-bar:nth-child(3)  { --h: 16px; } .va-bar:nth-child(4)  { --h: 20px; }
.va-bar:nth-child(5)  { --h: 14px; } .va-bar:nth-child(6)  { --h: 8px; }
.va-bar:nth-child(7)  { --h: 18px; } .va-bar:nth-child(8)  { --h: 22px; }
.va-bar:nth-child(9)  { --h: 16px; } .va-bar:nth-child(10) { --h: 12px; }
.va-bar:nth-child(11) { --h: 18px; } .va-bar:nth-child(12) { --h: 14px; }
.va-bar:nth-child(13) { --h: 20px; } .va-bar:nth-child(14) { --h: 16px; }
.va-bar:nth-child(15) { --h: 10px; } .va-bar:nth-child(16) { --h: 18px; }
.va-bar:nth-child(17) { --h: 14px; } .va-bar:nth-child(18) { --h: 8px; }
.va-bar:nth-child(19) { --h: 12px; } .va-bar:nth-child(20) { --h: 6px; }

/* Transcript area */
.va-transcript-area {
  width: 100%; min-height: 72px; max-height: 140px;
  margin-bottom: 2rem; overflow-y: auto; text-align: center;
}
.va-transcript-area::-webkit-scrollbar { display: none; }
.va-transcript-scroll { padding: 0 .5rem; }
.va-transcript-line {
  font-size: .95rem; line-height: 1.65; color: var(--ink-2);
  margin-bottom: .3rem; animation: msg-ai-in .25s var(--ease) both;
}
.va-transcript-line.user-line { color: var(--saffron-d); font-weight: 500; }
.va-transcript-line.placeholder { color: var(--dim); font-style: italic; font-size: .88rem; }

/* Controls */
.va-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; margin-bottom: 1rem;
}

.va-aux-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-2); border: 1.5px solid var(--border);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease);
}
.va-aux-btn:hover { border-color: var(--border-2); color: var(--ink); background: var(--bg-3); }
.va-aux-end:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-l); }

.va-mic-btn {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--saffron); border: none;
  color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  box-shadow: 0 4px 24px rgba(249,115,22,.4);
  transition: all .2s var(--spring);
}
.va-mic-btn:hover { transform: scale(1.06); box-shadow: 0 6px 32px rgba(249,115,22,.5); }
.va-mic-btn:active { transform: scale(.96); }

/* Active listening state */
.va-overlay.listening .va-mic-btn { background: var(--rose); box-shadow: 0 4px 24px rgba(220,38,38,.4); }
.va-overlay.listening .va-mic-btn:hover { box-shadow: 0 6px 32px rgba(220,38,38,.5); }

.va-mic-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--saffron); opacity: 0;
  animation: none; pointer-events: none;
}
.va-overlay.listening .va-mic-ring {
  opacity: .5; animation: va-mic-ring-pulse 1.2s ease-in-out infinite;
}
@keyframes va-mic-ring-pulse {
  0%,100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.12); opacity: .15; }
}

.va-mute-line { transition: opacity .2s; }
.va-hint-text { font-family: var(--ff-mono); font-size: .6rem; color: var(--dim-2); letter-spacing: .06em; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE UPDATES for sidebar
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Profile card, navigation, history
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  transition: width .28s var(--ease), transform .28s var(--ease);
  z-index: 40;
}
.sidebar.collapsed { width: 0; overflow: hidden; }

.sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sb-logo { display: flex; align-items: center; gap: .45rem; }
.sb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--saffron); animation: dot-pulse 2.5s ease-in-out infinite;
}
.sb-brand {
  font-family: var(--ff-serif); font-style: italic;
  font-size: 1.1rem; color: var(--ink); letter-spacing: .04em;
}
.sb-header-actions { display: flex; gap: .3rem; }
.sb-icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease);
}
.sb-icon-btn:hover { background: var(--bg-2); border-color: var(--border); color: var(--ink); }

/* Active profile card */
.sb-profile-card {
  display: flex; align-items: center; gap: .6rem;
  margin: .65rem .75rem .45rem; padding: .6rem .7rem;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; transition: all .18s var(--ease);
}
.sb-profile-card:hover { border-color: var(--saffron); background: var(--saffron-l); }
.sb-profile-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--saffron); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic;
  font-size: .95rem; flex-shrink: 0;
  box-shadow: 0 2px 8px var(--saffron-glow);
}
.sb-profile-text { flex: 1; min-width: 0; }
.sb-profile-name {
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-profile-goal {
  font-family: var(--ff-mono); font-size: .58rem; color: var(--dim);
  margin-top: .06rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-switch-btn {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--r-sm);
  background: transparent; border: none; color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .18s;
}
.sb-switch-btn:hover { color: var(--saffron); }

/* Mini stats strip */
.sb-mini-stats {
  display: flex; align-items: center; justify-content: center;
  margin: .2rem .75rem .55rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .45rem 0;
}
.sb-mini-stat { flex: 1; text-align: center; }
.sb-mstat-val { font-family: var(--ff-mono); font-size: .82rem; color: var(--saffron-d); display: block; }
.sb-mstat-lbl { font-size: .55rem; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
.sb-mstat-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

/* Section labels */
.sb-section {
  font-family: var(--ff-mono); font-size: .53rem;
  letter-spacing: .18em; color: var(--dim-2);
  text-transform: uppercase; padding: .35rem 1rem .25rem; flex-shrink: 0;
}

/* Navigation */
.sb-nav { display: flex; flex-direction: column; gap: .08rem; padding: 0 .55rem; flex-shrink: 0; }
.sb-nav-btn {
  display: flex; align-items: center; gap: .52rem;
  padding: .48rem .65rem; border-radius: var(--r-sm);
  background: transparent; border: none;
  font-family: var(--ff); font-size: .78rem; font-weight: 500; color: var(--ink-3);
  cursor: pointer; text-align: left; width: 100%;
  transition: all .17s var(--ease); white-space: nowrap;
}
.sb-nav-btn svg { flex-shrink: 0; color: var(--dim); transition: color .17s; }
.sb-nav-btn:hover { background: var(--bg-2); color: var(--saffron-d); }
.sb-nav-btn:hover svg { color: var(--saffron); }
.sb-nav-btn.active { background: var(--saffron-l); color: var(--saffron-d); }
.sb-nav-btn.active svg { color: var(--saffron); }

/* History */
.sb-history { flex: 1; overflow-y: auto; padding: .3rem .55rem; display: flex; flex-direction: column; gap: .06rem; }
.sb-history::-webkit-scrollbar { width: 2px; }
.sb-history::-webkit-scrollbar-thumb { background: var(--border); }
.sb-history-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .42rem .65rem; border-radius: var(--r-sm);
  cursor: pointer; transition: background .16s;
  background: transparent; border: none; text-align: left; width: 100%;
}
.sb-history-item:hover { background: var(--bg-2); }
.sb-history-item.active { background: var(--saffron-l); }
.sb-hi-icon { color: var(--dim-2); flex-shrink: 0; }
.sb-hi-text { flex: 1; min-width: 0; }
.sb-hi-title { font-size: .74rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sb-hi-time { font-family: var(--ff-mono); font-size: .57rem; color: var(--dim-2); }
.sb-history-empty { font-size: .74rem; color: var(--dim-2); text-align: center; padding: 1.5rem .5rem; font-style: italic; }

/* Footer */
.sb-footer { padding: .55rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.sb-version { font-family: var(--ff-mono); font-size: .55rem; color: var(--dim-2); letter-spacing: .06em; }

/* Overlay (mobile) */
.sb-overlay { position: fixed; inset: 0; z-index: 39; background: rgba(13,13,11,.35); backdrop-filter: blur(2px); }

/* ═══════════════════════════════════════════════════════════════
   PROFILE MODAL
═══════════════════════════════════════════════════════════════ */
.profile-modal-card { width: min(440px, 94vw); padding: 0; overflow: visible; }
.profile-step { display: none; padding: 2rem 1.8rem 1.8rem; }
.profile-step.active { display: block; animation: card-reveal .3s var(--ease) both; }
.pm-header { text-align: center; margin-bottom: 1.5rem; }
.pm-logo-mark { font-family: var(--ff-serif); font-size: 1.8rem; font-style: italic; color: var(--ink); margin-bottom: .6rem; }
.pm-logo-mark .boot-a { color: var(--saffron); }
.pm-title { font-family: var(--ff-serif); font-size: 1.3rem; font-weight: 400; font-style: italic; color: var(--ink); margin-bottom: .25rem; }
.pm-sub   { font-size: .8rem; color: var(--dim); }

.pm-profiles { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.pm-profile-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: all .18s var(--ease);
}
.pm-profile-item:hover { border-color: var(--saffron); background: var(--saffron-l); transform: translateX(3px); }
.pm-pi-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: 1.1rem; color: white;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pm-pi-name { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.pm-pi-meta { font-family: var(--ff-mono); font-size: .6rem; color: var(--dim); margin-top: .06rem; }
.pm-active-badge {
  font-family: var(--ff-mono); font-size: .54rem; color: var(--saffron-d);
  background: var(--saffron-l); border: 1px solid rgba(249,115,22,.2);
  padding: .1rem .4rem; border-radius: var(--r-pill); margin-left: auto;
}
.pm-new-btn {
  width: 100%; padding: .65rem;
  background: transparent; border: 1.5px dashed var(--border-2);
  border-radius: var(--r); color: var(--dim); font-family: var(--ff); font-size: .8rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  cursor: pointer; transition: all .18s var(--ease);
}
.pm-new-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }

.pm-back-btn {
  display: flex; align-items: center; gap: .35rem;
  background: none; border: none; color: var(--dim); font-family: var(--ff); font-size: .78rem;
  cursor: pointer; margin-bottom: 1.1rem; padding: 0; transition: color .18s;
}
.pm-back-btn:hover { color: var(--saffron-d); }

.pm-avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.pm-avatar-preview {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--saffron); color: white; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-style: italic; font-size: 1.5rem;
  box-shadow: 0 4px 16px var(--saffron-glow); transition: background .25s;
}
.pm-color-swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.pm-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s, border-color .18s;
}
.pm-swatch:hover { transform: scale(1.2); }
.pm-swatch.active { border-color: var(--ink-2); transform: scale(1.15); }

.pm-form { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.1rem; }
.pm-field { display: flex; flex-direction: column; gap: .28rem; }
.pm-field-row { display: flex; gap: .5rem; }
.pm-field-row .pm-field { flex: 1; }
.pm-label { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.pm-input {
  background: var(--bg-2); border: 1.5px solid var(--border-2);
  border-radius: var(--r-sm); padding: .55rem .8rem; color: var(--ink);
  font-family: var(--ff); font-size: .84rem; outline: none; transition: all .17s;
}
.pm-input:focus { border-color: var(--saffron); background: var(--surface); box-shadow: 0 0 0 3px var(--saffron-xl); }
.pm-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.pm-goal-btn {
  padding: .5rem .6rem; background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-family: var(--ff); font-size: .75rem; font-weight: 500; color: var(--ink-3);
  cursor: pointer; transition: all .18s var(--ease); text-align: center;
}
.pm-goal-btn:hover, .pm-goal-btn.selected { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.pm-create-btn {
  width: 100%; padding: .75rem; background: var(--saffron); border: none;
  border-radius: var(--r-sm); color: white; font-family: var(--ff); font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: all .2s var(--ease); box-shadow: 0 2px 12px var(--saffron-glow);
}
.pm-create-btn:hover { background: var(--saffron-h); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   VOICE AGENT LAUNCH BUTTON (input bar)
═══════════════════════════════════════════════════════════════ */
.voice-agent-launch-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-d));
  border: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: white; cursor: pointer; position: relative; overflow: hidden;
  transition: all .2s var(--spring); box-shadow: 0 2px 10px var(--saffron-glow);
}
.voice-agent-launch-btn:hover { transform: scale(1.08); box-shadow: 0 4px 18px var(--saffron-glow); }
.voice-agent-launch-btn:active { transform: scale(.94); }
.va-launch-ripple {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.15);
  animation: va-launch-pulse 2.5s ease-in-out infinite;
}
@keyframes va-launch-pulse {
  0%,100% { transform: scale(1); opacity: .15; }
  50%      { transform: scale(1.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   VOICE AGENT MODAL
═══════════════════════════════════════════════════════════════ */
.va-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  animation: overlay-in .3s ease both;
}
.va-yantra {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, var(--saffron-xl) 0%, transparent 55%),
    radial-gradient(circle, transparent 88%, rgba(232,229,223,.5) 88.5%, transparent 89.5%),
    radial-gradient(circle, transparent 72%, rgba(232,229,223,.4) 72.5%, transparent 73.5%),
    radial-gradient(circle, transparent 56%, rgba(232,229,223,.3) 56.5%, transparent 57.5%),
    radial-gradient(circle, transparent 40%, rgba(232,229,223,.25) 40.5%, transparent 41.5%),
    radial-gradient(circle, transparent 24%, rgba(232,229,223,.2) 24.5%, transparent 25.5%);
  background-size: 700px 700px; background-position: center; background-repeat: no-repeat;
  animation: yantra-breathe 8s ease-in-out infinite;
}
@keyframes yantra-breathe {
  0%,100% { opacity: .55; transform: rotate(0deg); }
  50%      { opacity: .7; transform: rotate(22.5deg); }
}

.va-panel {
  position: relative; z-index: 1;
  width: min(480px, 94vw);
  display: flex; flex-direction: column; align-items: center;
  padding: 2rem 1.5rem 2.5rem;
  animation: modal-scale-in .35s var(--ease) both;
}
.va-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-bottom: 2rem;
}
.va-title-row { display: flex; align-items: center; gap: .6rem; }
.va-label-text { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }
.va-state-badge {
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .08em;
  padding: .12rem .5rem; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--dim); transition: all .3s var(--ease);
}
.va-state-badge.listening { background: var(--rose-l); border-color: rgba(220,38,38,.3); color: var(--rose); }
.va-state-badge.speaking  { background: var(--saffron-l); border-color: rgba(249,115,22,.3); color: var(--saffron-d); }
.va-state-badge.thinking  { background: var(--sky-l); border-color: rgba(2,132,199,.25); color: var(--sky); }
.va-close-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s;
}
.va-close-btn:hover { background: var(--rose-l); border-color: var(--rose); color: var(--rose); }

/* Avatar area */
.va-avatar-area {
  position: relative; width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2rem;
}
.va-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--saffron); opacity: 0; transition: opacity .4s;
}
.va-ring-1 { inset: -16px; }
.va-ring-2 { inset: -30px; }
.va-ring-3 { inset: -46px; }
.va-overlay.listening .va-ring-1 { opacity: .4; animation: va-ring-pulse 1.4s ease-in-out infinite; }
.va-overlay.listening .va-ring-2 { opacity: .2; animation: va-ring-pulse 1.4s .3s ease-in-out infinite; }
.va-overlay.listening .va-ring-3 { opacity: .1; animation: va-ring-pulse 1.4s .6s ease-in-out infinite; }
.va-overlay.speaking  .va-ring-1 { opacity: .6; animation: va-ring-pulse .9s ease-in-out infinite; }
.va-overlay.speaking  .va-ring-2 { opacity: .3; animation: va-ring-pulse .9s .2s ease-in-out infinite; }
.va-overlay.speaking  .va-ring-3 { opacity: .15; animation: va-ring-pulse .9s .4s ease-in-out infinite; }
@keyframes va-ring-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

.va-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--saffron-d), var(--saffron));
  display: flex; align-items: center; justify-content: center;
  color: white; box-shadow: 0 8px 32px var(--saffron-glow);
  transition: transform .3s var(--spring), box-shadow .3s; z-index: 1;
}
.va-overlay.listening .va-avatar { transform: scale(1.08); box-shadow: 0 12px 42px var(--saffron-glow); }
.va-overlay.speaking  .va-avatar { animation: va-bounce .5s ease-in-out infinite alternate; }
@keyframes va-bounce { from{transform:scale(1.04)} to{transform:scale(1.1)} }

/* Waveform */
.va-waveform {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2.5px; height: 24px;
}
.va-bar { width: 3px; border-radius: 2px; background: var(--saffron); height: 3px; opacity: .3; transition: height .1s, opacity .3s; }
.va-overlay.listening .va-bar,
.va-overlay.speaking  .va-bar { opacity: 1; animation: va-bar-dance .8s ease-in-out infinite alternate; }
.va-overlay.speaking  .va-bar { animation-duration: .4s; }
.va-bar:nth-child(1){--h:6px}.va-bar:nth-child(2){--h:10px}.va-bar:nth-child(3){--h:16px}.va-bar:nth-child(4){--h:20px}
.va-bar:nth-child(5){--h:14px}.va-bar:nth-child(6){--h:8px}.va-bar:nth-child(7){--h:18px}.va-bar:nth-child(8){--h:22px}
.va-bar:nth-child(9){--h:16px}.va-bar:nth-child(10){--h:12px}.va-bar:nth-child(11){--h:18px}.va-bar:nth-child(12){--h:14px}
.va-bar:nth-child(13){--h:20px}.va-bar:nth-child(14){--h:16px}.va-bar:nth-child(15){--h:10px}.va-bar:nth-child(16){--h:18px}
.va-bar:nth-child(17){--h:14px}.va-bar:nth-child(18){--h:8px}.va-bar:nth-child(19){--h:12px}.va-bar:nth-child(20){--h:6px}
@keyframes va-bar-dance { from{height:3px} to{height:calc(3px + var(--h,18px))} }
.va-overlay.listening .va-bar:nth-child(1){animation-delay:.00s}.va-overlay.listening .va-bar:nth-child(2){animation-delay:.04s}
.va-overlay.listening .va-bar:nth-child(3){animation-delay:.08s}.va-overlay.listening .va-bar:nth-child(4){animation-delay:.12s}
.va-overlay.listening .va-bar:nth-child(5){animation-delay:.16s}.va-overlay.listening .va-bar:nth-child(6){animation-delay:.20s}
.va-overlay.listening .va-bar:nth-child(7){animation-delay:.16s}.va-overlay.listening .va-bar:nth-child(8){animation-delay:.12s}
.va-overlay.listening .va-bar:nth-child(9){animation-delay:.08s}.va-overlay.listening .va-bar:nth-child(10){animation-delay:.04s}
.va-overlay.listening .va-bar:nth-child(11){animation-delay:.00s}.va-overlay.listening .va-bar:nth-child(12){animation-delay:.04s}

/* Transcript */
.va-transcript-area { width: 100%; min-height: 72px; max-height: 140px; margin-bottom: 2rem; overflow-y: auto; text-align: center; }
.va-transcript-area::-webkit-scrollbar { display: none; }
.va-transcript-scroll { padding: 0 .5rem; }
.va-transcript-line { font-size: .95rem; line-height: 1.65; color: var(--ink-2); margin-bottom: .3rem; animation: msg-ai-in .25s var(--ease) both; }
.va-transcript-line.user-line { color: var(--saffron-d); font-weight: 500; }
.va-transcript-line.placeholder { color: var(--dim); font-style: italic; font-size: .88rem; }

/* Controls */
.va-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.va-aux-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-2); border: 1.5px solid var(--border);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s var(--ease);
}
.va-aux-btn:hover { border-color: var(--border-2); color: var(--ink); background: var(--bg-3); }
.va-aux-end:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-l); }
.va-mic-btn {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--saffron); border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  box-shadow: 0 4px 24px var(--saffron-glow); transition: all .2s var(--spring);
}
.va-mic-btn:hover { transform: scale(1.06); box-shadow: 0 6px 32px var(--saffron-glow); }
.va-overlay.listening .va-mic-btn { background: var(--rose); box-shadow: 0 4px 24px rgba(220,38,38,.4); }
.va-mic-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--saffron); opacity: 0; pointer-events: none;
}
.va-overlay.listening .va-mic-ring { opacity: .5; animation: va-mic-ring-pulse 1.2s ease-in-out infinite; }
@keyframes va-mic-ring-pulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.12);opacity:.15} }
.va-hint-text { font-family: var(--ff-mono); font-size: .6rem; color: var(--dim-2); letter-spacing: .06em; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   EDUCATION — Tabbed Playlist Library
═══════════════════════════════════════════════════════════════ */
.edu-tabs {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  padding: .25rem 0 .55rem; margin-bottom: .5rem; -webkit-overflow-scrolling: touch;
}
.edu-tabs::-webkit-scrollbar { display: none; }
.edu-tab {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .38rem .82rem; background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--r-pill); font-family: var(--ff);
  font-size: .74rem; font-weight: 500; color: var(--ink-3);
  white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: all .18s var(--ease);
}
.edu-tab:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }
.edu-tab.active { background: var(--saffron); border-color: var(--saffron); color: white; box-shadow: 0 2px 10px var(--saffron-glow); }
.edu-tab-badge {
  font-family: var(--ff-mono); font-size: .5rem; letter-spacing: .06em;
  background: white; color: var(--saffron-d); padding: .06rem .28rem; border-radius: var(--r-pill); font-weight: 600;
}
.edu-tab.active .edu-tab-badge { background: rgba(255,255,255,.25); color: white; }

.edu-playlist-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .75rem; margin-bottom: .5rem;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
}
.edu-pl-info { display: flex; align-items: center; gap: .6rem; }
.edu-pl-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.edu-pl-name { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.edu-pl-desc { font-size: .7rem; color: var(--dim); margin-top: .06rem; }
.edu-pl-count {
  font-family: var(--ff-mono); font-size: .62rem; color: var(--dim);
  background: var(--bg-3); border: 1px solid var(--border);
  padding: .2rem .5rem; border-radius: var(--r-pill); flex-shrink: 0;
}

.edu-video-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
  max-height: 500px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  padding-right: .1rem;
}
.edu-video-grid::-webkit-scrollbar { width: 3px; }
.edu-video-grid::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

.edu-vid-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: all .2s var(--ease); animation: card-reveal .4s var(--ease) both;
}
.edu-vid-card:hover { border-color: var(--saffron); transform: translateY(-2px); box-shadow: var(--shadow), 0 0 14px var(--saffron-glow); }
.edu-vid-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg-3); overflow: hidden; flex-shrink: 0; }
.edu-vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.edu-vid-card:hover .edu-vid-thumb img { transform: scale(1.04); }
.edu-vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13,13,11,.28); opacity: 0; transition: opacity .2s; }
.edu-vid-card:hover .edu-vid-play { opacity: 1; }
.edu-play-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--saffron); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--saffron-glow); transition: transform .2s var(--spring); }
.edu-vid-card:hover .edu-play-icon { transform: scale(1.1); }
.edu-vid-dur-badge { position: absolute; bottom: .3rem; right: .3rem; font-family: var(--ff-mono); font-size: .55rem; color: white; background: rgba(13,13,11,.72); padding: .08rem .3rem; border-radius: 3px; }
.edu-vid-body { padding: .5rem .58rem; display: flex; flex-direction: column; gap: .15rem; }
.edu-vid-title { font-size: .77rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.edu-vid-meta { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.edu-vid-channel { font-size: .61rem; color: var(--dim); }
.edu-vid-muscles { font-size: .61rem; color: var(--dim-2); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */


/* Checkout modal wider for 2-col layout */
.checkout-modal-card { width: min(820px, 96vw) !important; max-height: 88vh; }

/* ═══════════════════════════════════════════════════════════════
   ARIA ANIMATION SYSTEM — Cursor + Magnetic + Parallax + Glow
═══════════════════════════════════════════════════════════════ */

/* ── 1. CURSOR GLOW FOLLOWER ─────────────────────────────── */
#cursor-glow {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(249,115,22,.07) 0%,
    rgba(249,115,22,.04) 30%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  transition: opacity .4s ease;
  will-change: transform;
}

#cursor-dot {
  position: fixed; z-index: 10000; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--saffron);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease, transform .1s ease;
  box-shadow: 0 0 8px var(--saffron-glow);
  will-change: transform;
}

/* Show dot only when hovering interactive elements */
body.cursor-on-interactive #cursor-dot { opacity: .85; transform: translate(-50%, -50%) scale(1.8); }

/* ── 2. ENHANCED HOVER — UNIVERSAL INTERACTIVE ELEMENTS ──── */

/* Module cards — upgraded glow */
.module-card {
  transition: all .22s var(--ease) !important;
  transform-origin: center bottom;
}
.module-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--shadow-md), 0 0 28px var(--saffron-glow) !important;
  border-color: var(--saffron) !important;
}
.module-card:active { transform: translateY(-1px) scale(.99) !important; }

/* Quick pills */
.qpill {
  transition: all .18s var(--ease);
}
.qpill:hover {
  border-color: var(--saffron) !important;
  color: var(--saffron-d) !important;
  background: var(--saffron-l) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--saffron-glow);
}

/* Vital pills */
.vital-pill {
  transition: all .18s var(--ease);
}
.vital-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--saffron-glow);
}

/* Send button */
.send-btn {
  transition: all .18s var(--spring) !important;
}
.send-btn:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 4px 20px var(--saffron-glow) !important;
}

/* All generic buttons */
button { transition: all .18s var(--ease); }

/* Expert cards */
.exp-card { transition: all .22s var(--ease) !important; }

/* Product cards */
.prod-card { transition: all .22s var(--ease) !important; }

/* Edu video cards */
.edu-vid-card { transition: all .22s var(--ease) !important; }

/* ── 3. MAGNETIC BUTTON EFFECT (via JS data-magnetic) ────── */
.magnetic {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  will-change: transform;
}

/* ── 4. MODULE CARD INNER GLOW ───────────────────────────── */
.module-card {
  position: relative; overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(249,115,22,.12) 0%,
    transparent 60%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0;
  border-radius: inherit;
}
.module-card:hover::before { opacity: 1; }
.module-card > * { position: relative; z-index: 1; }

/* ── 5. BACKGROUND PARALLAX ──────────────────────────────── */
.chat-area {
  transition: background-position .1s ease-out;
}

/* Subtle drifting dot grid on chat background */
#chat-area {
  background-image:
    radial-gradient(circle, rgba(249,115,22,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0px 0px;
  will-change: background-position;
}

/* ── 6. INPUT FOCUS GLOW ─────────────────────────────────── */
.input-row {
  transition: border-color .22s ease, box-shadow .22s ease, transform .18s var(--ease) !important;
}
.input-row:focus-within {
  border-color: var(--saffron) !important;
  box-shadow: 0 0 0 3px var(--saffron-xl), 0 4px 20px rgba(249,115,22,.1) !important;
  transform: translateY(-1px);
}

/* ── 7. MESSAGE APPEAR ANIMATIONS (refined) ─────────────── */
@keyframes msg-user-in {
  from { opacity: 0; transform: translateX(16px) translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes msg-ai-in {
  from { opacity: 0; transform: translateX(-16px) translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes card-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Action button row — staggered reveal */
.action-btns .action-btn {
  animation: card-reveal .28s var(--ease) both;
}
.action-btns .action-btn:nth-child(1) { animation-delay: .04s; }
.action-btns .action-btn:nth-child(2) { animation-delay: .08s; }
.action-btns .action-btn:nth-child(3) { animation-delay: .12s; }
.action-btns .action-btn:nth-child(4) { animation-delay: .16s; }

/* AI avatar pulse on new message */
.msg-ai-av {
  transition: transform .3s var(--spring), box-shadow .3s;
}
.msg-ai:hover .msg-ai-av {
  transform: scale(1.12);
  box-shadow: 0 0 12px var(--saffron-glow);
}

/* ── 8. SIDEBAR NAV HOVER ────────────────────────────────── */
.sb-nav-btn {
  transition: all .17s var(--ease);
  position: relative; overflow: hidden;
}
.sb-nav-btn::after {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0; background: var(--saffron);
  border-radius: 0 2px 2px 0; transition: height .2s var(--ease);
}
.sb-nav-btn:hover::after, .sb-nav-btn.active::after { height: 60%; }

/* ── 9. TOPBAR BRAND PULSE ───────────────────────────────── */
.tb-dot {
  animation: dot-pulse 2.5s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

/* ── 10. WELCOME SCREEN ENTRANCE ─────────────────────────── */
.welcome-avatar { animation: welcome-float 4s ease-in-out infinite; }
@keyframes welcome-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.welcome-title {
  animation: fade-up .7s var(--ease) both;
  animation-delay: .1s;
}
.welcome-sub {
  animation: fade-up .7s var(--ease) both;
  animation-delay: .2s;
}
.module-grid {
  animation: fade-up .7s var(--ease) both;
  animation-delay: .3s;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── 11. SCROLL REVEAL ───────────────────────────────────── */
.reveal-ready {
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.reveal-ready.revealed {
  opacity: 1; transform: none;
}

/* ── 12. VOICE AGENT LAUNCH BUTTON PULSE ─────────────────── */
.voice-agent-launch-btn {
  animation: va-idle-pulse 3s ease-in-out infinite;
}
@keyframes va-idle-pulse {
  0%, 100% { box-shadow: 0 2px 10px var(--saffron-glow); }
  50%       { box-shadow: 0 2px 22px rgba(249,115,22,.4); }
}
.voice-agent-launch-btn:hover { animation: none; transform: scale(1.12) !important; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   Breakpoints:
   xl  ≥ 1280px  — wide desktop
   lg  ≥ 1024px  — laptop / small desktop (default base)
   md   < 1024px — tablet landscape
   sm   < 768px  — tablet portrait / large phone
   xs   < 480px  — phone
   xxs  < 380px  — small phone
═══════════════════════════════════════════════════════════════ */

/* ── SIDEBAR: hide on mobile, show on desktop ─────────────── */
@media (min-width: 769px) {
  .sb-overlay     { display: none !important; }
  .tb-menu-btn    { display: none !important; }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    z-index: 45; box-shadow: var(--shadow-lg);
    transition: transform .28s var(--ease);
  }
  .sidebar.open   { transform: translateX(0); }
  .sb-overlay     { display: block !important; }
  .tb-menu-btn    { display: flex !important; }
}

/* ══════════════════════════════════════════════════════════════
   MD — Tablet landscape (< 1024px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Topbar — hide time on smaller screens */
  .tb-time { display: none; }

  /* Checkout — stack summary below form */
  .co2-layout    { flex-direction: column; }
  .co2-summary   {
    width: 100%; border-left: none;
    border-top: 1px solid var(--border);
    padding: .9rem 1rem;
  }

  /* Voice agent side panel becomes overlay at this size */
  #app.va-open .va-side-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 300px; z-index: 120;
    box-shadow: var(--shadow-lg);
  }
  #app.va-open .va-side-backdrop { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   SM — Tablet portrait / large phone (< 768px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── APP SHELL ──────────────────────────────────────────── */
  #app { flex-direction: column; }
  .main-col { width: 100%; min-width: 0; grid-template-rows: 52px 1fr auto; }

  /* ── TOPBAR ─────────────────────────────────────────────── */
  .topbar { padding: 0 .85rem; gap: .55rem; height: 52px; }
  .tb-vitals {
    display: none; /* Hidden on mobile — shown in sidebar mini-stats */
  }
  .tb-time { display: none; }
  .tb-name { font-size: 1.15rem; }

  /* ── CHAT AREA ──────────────────────────────────────────── */
  .messages { padding: .65rem .75rem; }
  .msg-user { max-width: 82%; font-size: .84rem; }
  .msg-ai   { max-width: 95%; }
  .msg-ai-body { font-size: .84rem; }

  /* ── WELCOME ────────────────────────────────────────────── */
  .welcome { padding: 2rem 1.1rem 1.2rem; align-items: flex-start; }
  .welcome-avatar { width: 64px; height: 64px; margin-bottom: 1.2rem; }
  .wa-core { font-size: 1.4rem; }
  .welcome-title { font-size: 2.2rem; }
  .welcome-sub { font-size: .84rem; margin-bottom: 1.8rem; max-width: 100%; }

  /* ── MODULE GRID ────────────────────────────────────────── */
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; max-width: 100%; }
  .module-card { padding: .9rem .8rem; }
  .mc-icon-wrap { width: 34px; height: 34px; }
  .mc-label { font-size: .78rem; }
  .mc-desc  { font-size: .64rem; }

  /* ── INPUT BAR ──────────────────────────────────────────── */
  .input-wrap { padding: 0 .1rem; }
  .input-bar  { padding: .55rem .75rem; }
  .quick-pills { gap: .25rem; }
  .qpill { font-size: .62rem; padding: .2rem .6rem; }

  /* ── PRODUCT CARDS ──────────────────────────────────────── */
  .product-row { gap: .55rem; }
  .prod-card { width: 165px; }
  .prod-img-wrap { height: 120px; }
  .prod-name { font-size: .76rem; }
  .prod-desc { font-size: .63rem; }
  .prod-price { font-size: .9rem; }

  /* ── EXPERT CARDS ───────────────────────────────────────── */
  .expert-row { gap: .55rem; }
  .exp-card { width: 175px; padding: .82rem; }

  /* ── CONSULT CHAT ───────────────────────────────────────── */
  .consult-chat { max-height: 420px; }
  .cc-bubble { max-width: 82%; font-size: .79rem; }

  /* ── BOOKING CONFIRM CARD ───────────────────────────────── */
  .booking-confirm-card { flex-wrap: wrap; gap: .6rem; }
  .bcc-join-btn { width: 100%; justify-content: center; }

  /* ── CART ───────────────────────────────────────────────── */
  .cart-row { gap: .55rem; }
  .cart-row-img { width: 54px; height: 54px; }
  .cart-row-name { font-size: .78rem; }
  .cart-row-subtotal { font-size: .88rem; }

  /* ── CHECKOUT MODAL ─────────────────────────────────────── */
  .checkout-modal-card { width: 100% !important; max-height: 100% !important; border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: auto; }
  .modal-overlay { align-items: flex-end; }
  .co2-field-row { flex-direction: column; gap: .4rem; }
  .co2-pay-option { padding: .6rem .75rem; }
  .co2-card-fields { margin-left: 1.8rem; }
  .co2-review-section { flex-wrap: wrap; gap: .4rem; }
  .co2-review-label { min-width: 70px; }

  /* ── CALENDAR MODAL ─────────────────────────────────────── */
  .consult-cal-card { width: min(100%, 94vw); border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .cal-day-grid { gap: .3rem; }
  .cal-day-btn { min-width: 44px; padding: .4rem .2rem; }
  .cal-time-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── VIDEO CALL MODAL ───────────────────────────────────── */
  .vc-overlay { align-items: flex-end; }
  .vc-panel { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .vc-remote { height: 50vh; min-height: 240px; }
  .vc-self { width: 90px; height: 68px; bottom: 72px; }
  .vc-controls { gap: .6rem; padding: .7rem .9rem; }
  .vc-ctrl-btn, .vc-end-btn { width: 48px; height: 48px; }

  /* ── STATS PANEL ────────────────────────────────────────── */
  .stats-panel { padding: .85rem; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-title { font-size: .58rem; }

  /* ── EDUCATION TABS ─────────────────────────────────────── */
  .edu-video-grid { grid-template-columns: repeat(2, 1fr); max-height: 420px; }
  .edu-tab { font-size: .7rem; padding: .33rem .68rem; }

  /* ── VOICE AGENT PANEL ──────────────────────────────────── */
  #app.va-open .va-side-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }

  /* ── PROFILE MODAL ──────────────────────────────────────── */
  .profile-modal-card { width: 100% !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; margin-top: auto; }
  .pm-field-row { flex-direction: column; gap: .45rem; }
  .pm-goal-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── ACTION BUTTONS ─────────────────────────────────────── */
  .action-btns { flex-wrap: wrap; gap: .35rem; }
  .action-btn { font-size: .74rem; padding: .38rem .75rem; }

  /* ── CURSOR EFFECTS — disable on touch ─────────────────── */
  #cursor-glow, #cursor-dot { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   XS — Phone (< 480px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── TOPBAR ─────────────────────────────────────────────── */
  .topbar { padding: 0 .7rem; gap: .45rem; }
  .tb-name { font-size: 1.05rem; }
  .tb-status { display: none; }

  /* ── WELCOME ────────────────────────────────────────────── */
  .welcome { padding: 1.6rem .9rem 1rem; }
  .welcome-title { font-size: 1.95rem; }
  .welcome-sub { font-size: .82rem; margin-bottom: 1.5rem; }
  .welcome-avatar { width: 56px; height: 56px; margin-bottom: 1rem; }

  /* ── MODULE GRID — 2-col full width ─────────────────────── */
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: .42rem; }
  .module-card { padding: .82rem .7rem; gap: .12rem; }
  .mc-icon-wrap { width: 30px; height: 30px; margin-bottom: .28rem; }
  .mc-label { font-size: .74rem; }
  .mc-desc  { font-size: .6rem; }

  /* ── MESSAGES ───────────────────────────────────────────── */
  .messages { padding: .55rem .65rem; gap: .7rem; }
  .msg-user { max-width: 88%; font-size: .82rem; padding: .58rem .82rem; }
  .msg-ai-body { font-size: .82rem; padding: .62rem .78rem; }
  .msg-ai-av { width: 26px; height: 26px; }

  /* ── INPUT BAR ──────────────────────────────────────────── */
  .input-bar { padding: .5rem .65rem; }
  .quick-pills { gap: .22rem; padding-bottom: 1px; }
  .qpill { font-size: .6rem; padding: .18rem .52rem; }
  .chat-input { font-size: .83rem; }

  /* ── PRODUCT CARDS — full-width stacked on phone ──────────── */
  .product-row { flex-direction: column; overflow-x: visible; }
  .prod-card   { width: 100%; flex-direction: column; }
  .prod-img-wrap { width: 100%; height: 170px; aspect-ratio: unset; }
  .prod-body   { padding: .65rem .75rem .75rem; }
  .prod-tag    { font-size: .5rem; }

  /* ── EXPERT CARDS — full-width ──────────────────────────── */
  .expert-row { flex-direction: column; overflow-x: visible; }
  .exp-card   { width: 100%; }

  /* ── CONSULT CHAT ───────────────────────────────────────── */
  .consult-chat { max-height: 380px; }
  .cc-name { font-size: .78rem; }
  .cc-bubble { font-size: .78rem; padding: .55rem .72rem; }
  .cc-input { font-size: .8rem; }

  /* ── CART ───────────────────────────────────────────────── */
  .cart-header-row { padding: .7rem .85rem; }
  .cart-row { padding: .7rem .85rem; gap: .45rem; }
  .cart-row-img { width: 48px; height: 48px; }
  .cart-row-name { font-size: .76rem; }
  .cart-summary-box { padding: .85rem; }
  .cart-summary-total { font-size: .88rem; }

  /* ── CHECKOUT ───────────────────────────────────────────── */
  .co2-main { padding: .9rem .9rem; }
  .co2-step-label { font-size: .65rem; }
  .co2-step-num { width: 22px; height: 22px; font-size: .62rem; }
  .co2-step-heading { font-size: 1rem; }
  .co2-input { font-size: .8rem; padding: .48rem .7rem; }
  .co2-primary-btn { font-size: .82rem; padding: .7rem; }
  .co2-place-btn { font-size: .85rem; padding: .78rem; }
  .co2-pay-option { padding: .55rem .7rem; }
  .co2-review-section { flex-direction: column; gap: .25rem; }
  .co2-review-label { min-width: unset; }

  /* ── CALENDAR ───────────────────────────────────────────── */
  .cal-day-grid { gap: .25rem; }
  .cal-day-btn { min-width: 40px; padding: .35rem .15rem; }
  .cal-day-num { font-size: .9rem; }
  .cal-confirm-bar { flex-direction: column; gap: .5rem; }
  .cal-confirm-btn { width: 100%; }

  /* ── STATS ──────────────────────────────────────────────── */
  .sp-grid { grid-template-columns: repeat(3, 1fr); }
  .sp-item { padding: .5rem .3rem; }
  .sp-val { font-size: 1rem; }

  /* ── EDUCATION VIDEOS — single column ────────────────────── */
  .edu-video-grid { grid-template-columns: 1fr; max-height: 380px; }
  .edu-tab { font-size: .67rem; padding: .3rem .6rem; }
  .edu-vid-title { font-size: .74rem; }

  /* ── BOOKING CONFIRM ────────────────────────────────────── */
  .booking-confirm-card { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .bcc-join-btn { width: 100%; justify-content: center; }

  /* ── CALL REPORT ────────────────────────────────────────── */
  .cr-header { flex-direction: column; gap: .5rem; padding: .9rem; }
  .cr-check-icon { width: 28px; height: 28px; }
  .cr-title { font-size: .84rem; }
  .cr-meta { font-size: .65rem; }
  .cr-section { padding: .7rem .9rem; }
  .cr-recs-list li { font-size: .75rem; }
  .cr-actions { padding: .7rem .9rem; }
  .cr-btn-primary, .cr-btn-secondary { font-size: .74rem; padding: .5rem; }

  /* ── VIDEO CALL ─────────────────────────────────────────── */
  .vc-remote-avatar { width: 80px; height: 80px; font-size: 2rem; }
  .vc-remote-name { font-size: 1rem; }
  .vc-ctrl-btn, .vc-end-btn { width: 44px; height: 44px; }
  .vc-self { width: 78px; height: 58px; }

  /* ── PROFILE MODAL ──────────────────────────────────────── */
  .pm-step { padding: 1.5rem 1.2rem 1.4rem; }
  .pm-goal-grid { grid-template-columns: 1fr 1fr; gap: .28rem; }

  /* ── VOICE AGENT SIDE PANEL ─────────────────────────────── */
  .va-side-panel { width: 100% !important; }
  .va-side-header { padding: .6rem .85rem; }
  .va-side-avatar-wrap { padding: 1.2rem 0 1rem; }
  .va-avatar { width: 62px; height: 62px; }
  .va-ring-1 { width: 76px; height: 76px; }
  .va-ring-2 { width: 92px; height: 92px; }
  .va-ring-3 { width: 108px; height: 108px; }
  .va-side-controls { gap: .8rem; padding: .75rem; }
  .va-mic-btn { width: 52px; height: 52px; }
}

/* ══════════════════════════════════════════════════════════════
   XXS — Very small phone (< 380px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .topbar { padding: 0 .6rem; }
  .tb-name { font-size: .95rem; }
  .welcome-title { font-size: 1.75rem; }
  .module-grid { gap: .35rem; }
  .module-card { padding: .72rem .6rem; }
  .mc-label { font-size: .7rem; }
  .qpill { font-size: .58rem; padding: .16rem .46rem; }
  .messages { padding: .45rem .55rem; }
  .msg-user, .msg-ai-body { font-size: .8rem; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-img-wrap { height: 150px; }
}

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — special case
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .welcome { padding: 1rem .9rem .8rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .welcome-avatar { margin-bottom: 0; width: 52px; height: 52px; flex-shrink: 0; }
  .welcome-title { font-size: 1.6rem; margin-bottom: .2rem; }
  .welcome-sub { font-size: .78rem; margin-bottom: .8rem; }
  .module-grid { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
  .module-card { padding: .65rem; }
  .vc-remote { height: 40vh; min-height: 160px; }
  .input-bar { padding: .4rem .65rem; }
}

/* ══════════════════════════════════════════════════════════════
   XL — Wide desktop (≥ 1280px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .sidebar { width: 264px; }
  .module-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .welcome-title { font-size: 3.4rem; }
  .product-row .prod-card { width: 200px; }
  .expert-row .exp-card { width: 210px; }
  .edu-video-grid { grid-template-columns: repeat(2, 1fr); max-height: 540px; }
  .co2-summary { width: 260px; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR — global thin style
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim-2); }

/* ══════════════════════════════════════════════════════════════
   TOUCH — tap highlight and touch callout
══════════════════════════════════════════════════════════════ */
@media (hover: none) {
  /* Remove hover transforms on touch devices to avoid sticky states */
  .module-card:hover,
  .exp-card:hover,
  .prod-card:hover,
  .edu-vid-card:hover { transform: none !important; }

  /* Ensure tap targets are large enough */
  .qpill, .action-btn, .cal-day-btn, .cal-time-btn { min-height: 36px; }
  .cc-voice-btn, .cc-send-btn { min-height: 34px; min-width: 34px; }
}

/* Prevent text size inflation on iOS */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Safe area insets (notch / home indicator) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-bar { padding-bottom: max(.65rem, env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ══════════════════════════════════════════════════════════════
   WATER TRACKER
══════════════════════════════════════════════════════════════ */
.wt-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.1rem; margin-top:.6rem; animation:card-reveal .3s var(--ease) both; }
.wt-header { margin-bottom:.9rem; }
.wt-title-row { display:flex; align-items:center; gap:.7rem; margin-bottom:.65rem; }
.wt-emoji { font-size:1.6rem; flex-shrink:0; }
.wt-title { font-size:.9rem; font-weight:700; color:var(--ink-2); }
.wt-sub { font-size:.68rem; color:var(--dim); margin-top:.1rem; }
.wt-big-count { font-family:var(--ff-mono); font-size:1.5rem; font-weight:500; color:var(--sky); margin-left:auto; }
.wt-big-count span { font-size:.9rem; color:var(--dim); }
.wt-progress-track { height:8px; background:var(--bg-3); border-radius:var(--r-pill); overflow:hidden; margin-bottom:.3rem; }
.wt-progress-fill { height:100%; background:linear-gradient(90deg,var(--sky),#38bdf8); border-radius:var(--r-pill); transition:width .5s var(--ease); box-shadow:0 0 8px rgba(2,132,199,.3); }
.wt-pct { font-family:var(--ff-mono); font-size:.62rem; color:var(--dim); }
.wt-glasses { display:flex; gap:.45rem; flex-wrap:wrap; margin:.75rem 0; }
.wt-glass { background:transparent; border:none; cursor:pointer; padding:.2rem; border-radius:var(--r-sm); transition:transform .15s var(--spring); color:var(--border-2); }
.wt-glass:hover { transform:scale(1.15); color:var(--sky); }
.wt-glass.filled { color:var(--sky); }
.wt-glass.filled svg path { filter:drop-shadow(0 0 4px rgba(2,132,199,.4)); }
.wt-actions { display:flex; gap:.45rem; margin-top:.55rem; }
.wt-add-btn { flex:1; padding:.5rem; background:var(--sky); border:none; border-radius:var(--r-sm); color:white; font-family:var(--ff); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .18s var(--ease); box-shadow:0 2px 8px rgba(2,132,199,.3); }
.wt-add-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.wt-add-half { background:var(--sky-l); color:var(--sky); border:1.5px solid rgba(2,132,199,.2); box-shadow:none; }
.wt-add-half:hover { background:rgba(2,132,199,.15); }
.wt-reset-btn { padding:.5rem .9rem; background:transparent; border:1.5px solid var(--border-2); border-radius:var(--r-sm); color:var(--dim); font-family:var(--ff); font-size:.78rem; cursor:pointer; transition:all .18s; }
.wt-reset-btn:hover { border-color:var(--rose); color:var(--rose); background:var(--rose-l); }
.wt-tip { font-size:.76rem; color:var(--ink-3); background:var(--bg-2); border-radius:var(--r-sm); padding:.5rem .7rem; margin-top:.6rem; line-height:1.5; border-left:3px solid var(--sky); }

/* ══════════════════════════════════════════════════════════════
   SLEEP TRACKER
══════════════════════════════════════════════════════════════ */
.sl-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.1rem; margin-top:.6rem; animation:card-reveal .3s var(--ease) both; display:flex; flex-direction:column; gap:.9rem; }
.sl-header { display:flex; align-items:center; gap:.7rem; }
.sl-emoji { font-size:1.6rem; flex-shrink:0; }
.sl-title { font-size:.9rem; font-weight:700; color:var(--ink-2); }
.sl-sub { font-size:.68rem; color:var(--dim); }
.sl-avg-chip { margin-left:auto; text-align:center; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:.3rem .65rem; }
.sl-avg-num { font-family:var(--ff-mono); font-size:1.1rem; color:var(--jade); font-weight:500; }
.sl-avg-lbl { font-family:var(--ff-mono); font-size:.55rem; color:var(--dim); letter-spacing:.1em; }
.sl-chart { background:var(--bg-2); border-radius:var(--r-sm); padding:.7rem .7rem .35rem; }
.sl-bars { display:flex; gap:.4rem; align-items:flex-end; height:70px; margin-bottom:.35rem; }
.sl-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; height:100%; justify-content:flex-end; }
.sl-bar { width:100%; border-radius:3px 3px 0 0; min-height:4px; transition:height .5s var(--ease); }
.sl-bar-lbl { font-family:var(--ff-mono); font-size:.52rem; color:var(--dim); }
.sl-chart-labels { display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:.52rem; color:var(--dim-2); border-top:1px solid var(--border); padding-top:.25rem; margin-top:.1rem; }
.sl-empty { text-align:center; padding:1rem; font-size:.8rem; color:var(--dim); font-style:italic; background:var(--bg-2); border-radius:var(--r-sm); }
.sl-form { background:var(--bg-2); border-radius:var(--r-sm); padding:.8rem; }
.sl-form-title { font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; margin-bottom:.6rem; }
.sl-form-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-bottom:.65rem; }
.sl-field { display:flex; flex-direction:column; gap:.22rem; }
.sl-label { font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.sl-input { background:var(--surface); border:1.5px solid var(--border-2); border-radius:var(--r-sm); padding:.48rem .65rem; font-family:var(--ff-mono); font-size:.82rem; color:var(--ink); outline:none; transition:border-color .17s; width:100%; }
.sl-input:focus { border-color:var(--saffron); box-shadow:0 0 0 3px var(--saffron-xl); }
.sl-log-btn { width:100%; padding:.62rem; background:var(--saffron); border:none; border-radius:var(--r-sm); color:white; font-family:var(--ff); font-size:.82rem; font-weight:700; cursor:pointer; transition:all .2s var(--ease); box-shadow:0 2px 10px var(--saffron-glow); }
.sl-log-btn:hover { background:var(--saffron-h); transform:translateY(-1px); }
.sl-legend { display:flex; gap:1rem; flex-wrap:wrap; }
.sl-leg-item { display:flex; align-items:center; gap:.35rem; font-size:.7rem; color:var(--dim); }
.sl-leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════
   MEAL PLANNER
══════════════════════════════════════════════════════════════ */
.mp-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.1rem; margin-top:.6rem; animation:card-reveal .3s var(--ease) both; }
.mp-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.85rem; }
.mp-title { font-size:.9rem; font-weight:700; color:var(--ink-2); }
.mp-sub { font-size:.68rem; color:var(--dim); margin-top:.1rem; }
.mp-clear-btn { font-size:.72rem; padding:.28rem .7rem; background:transparent; border:1.5px solid var(--border-2); border-radius:var(--r-pill); color:var(--dim); cursor:pointer; transition:all .17s; white-space:nowrap; }
.mp-clear-btn:hover { border-color:var(--rose); color:var(--rose); background:var(--rose-l); }
.mp-grid { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
.mp-grid::-webkit-scrollbar { display:none; }
.mp-day-col { flex-shrink:0; width:110px; display:flex; flex-direction:column; gap:.3rem; }
.mp-day-header { font-family:var(--ff-mono); font-size:.62rem; font-weight:500; letter-spacing:.1em; color:var(--dim); text-align:center; padding:.3rem 0; text-transform:uppercase; }
.mp-cell { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:.45rem .5rem; cursor:pointer; min-height:52px; transition:all .17s var(--ease); }
.mp-cell:hover { border-color:var(--saffron); background:var(--saffron-l); }
.mp-meal-type { font-family:var(--ff-mono); font-size:.52rem; letter-spacing:.1em; color:var(--saffron-d); text-transform:uppercase; margin-bottom:.18rem; }
.mp-meal-val { font-size:.68rem; color:var(--ink-2); line-height:1.35; }
.mp-empty { color:var(--dim-2); font-style:italic; }
.mp-edit-panel { background:var(--bg-2); border:1.5px solid var(--border-2); border-radius:var(--r-sm); padding:.85rem; margin-top:.7rem; animation:card-reveal .2s var(--ease) both; }
.mp-edit-title { font-size:.8rem; font-weight:700; color:var(--ink-2); margin-bottom:.55rem; }
.mp-edit-input { width:100%; background:var(--surface); border:1.5px solid var(--border-2); border-radius:var(--r-sm); padding:.5rem .75rem; font-family:var(--ff); font-size:.83rem; color:var(--ink); outline:none; transition:border-color .17s; margin-bottom:.55rem; }
.mp-edit-input:focus { border-color:var(--saffron); box-shadow:0 0 0 3px var(--saffron-xl); }
.mp-suggestions { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.65rem; }
.mp-sugg-btn { font-size:.7rem; padding:.22rem .6rem; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-pill); color:var(--ink-3); cursor:pointer; transition:all .15s; }
.mp-sugg-btn:hover { background:var(--saffron-l); border-color:var(--saffron); color:var(--saffron-d); }
.mp-edit-actions { display:flex; gap:.4rem; }
.mp-save-btn { flex:1; padding:.52rem; background:var(--saffron); border:none; border-radius:var(--r-sm); color:white; font-family:var(--ff); font-size:.8rem; font-weight:700; cursor:pointer; transition:all .18s; box-shadow:0 2px 8px var(--saffron-glow); }
.mp-save-btn:hover { background:var(--saffron-h); }
.mp-cancel-btn { padding:.52rem 1rem; background:transparent; border:1.5px solid var(--border-2); border-radius:var(--r-sm); color:var(--dim); font-family:var(--ff); font-size:.8rem; cursor:pointer; transition:all .17s; }
.mp-cancel-btn:hover { border-color:var(--border-3); color:var(--ink-3); }

/* ══════════════════════════════════════════════════════════════
   STREAKS & BADGES
══════════════════════════════════════════════════════════════ */
.bg-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.1rem; margin-top:.6rem; animation:card-reveal .3s var(--ease) both; display:flex; flex-direction:column; gap:1rem; }
.bg-streak-hero { display:flex; align-items:center; gap:1.1rem; background:var(--bg-2); border-radius:var(--r-sm); padding:.9rem 1rem; }
.bg-ring-wrap { position:relative; flex-shrink:0; width:100px; height:100px; display:flex; align-items:center; justify-content:center; }
.bg-ring-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bg-streak-num { font-family:var(--ff-mono); font-size:1.7rem; font-weight:500; color:var(--saffron-d); line-height:1; }
.bg-streak-lbl { font-family:var(--ff-mono); font-size:.52rem; color:var(--dim); letter-spacing:.08em; }
.bg-streak-info { flex:1; }
.bg-streak-title { font-size:.9rem; font-weight:700; color:var(--ink-2); margin-bottom:.18rem; }
.bg-streak-sub { font-size:.74rem; color:var(--dim); margin-bottom:.6rem; }
.bg-progress-row { display:flex; gap:.65rem; }
.bg-prog-item { text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:.3rem .6rem; min-width:52px; }
.bg-prog-val { font-family:var(--ff-mono); font-size:.88rem; font-weight:500; color:var(--saffron-d); }
.bg-prog-lbl { font-family:var(--ff-mono); font-size:.5rem; color:var(--dim); letter-spacing:.08em; }
.bg-section-title { font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; padding-bottom:.35rem; border-bottom:1px solid var(--border); }
.bg-badges-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.5rem; }
.bg-badge { border-radius:var(--r-sm); padding:.7rem .5rem; text-align:center; border:1px solid var(--border); transition:all .2s var(--ease); }
.bg-badge.earned { background:var(--saffron-l); border-color:rgba(249,115,22,.2); }
.bg-badge.earned:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--saffron); }
.bg-badge.locked { background:var(--bg-2); opacity:.6; }
.bg-badge-icon { font-size:1.5rem; margin-bottom:.25rem; display:flex; align-items:center; justify-content:center; min-height:42px; }
.bg-badge-icon svg { width:38px; height:38px; }
.bg-badge-name { font-size:.7rem; font-weight:700; color:var(--ink-2); margin-bottom:.1rem; }
.bg-badge-desc { font-size:.6rem; color:var(--dim); line-height:1.35; }
.bg-badge.locked .bg-badge-name { color:var(--dim); }

/* ══════════════════════════════════════════════════════════════
   RIGHT PANEL — Streaks, Badges & Stats
══════════════════════════════════════════════════════════════ */
.right-panel {
  width: 248px; flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  position: relative;
}
.right-panel::-webkit-scrollbar { width: 3px; }
.right-panel::-webkit-scrollbar-thumb { background: var(--border-2); }

/* Header */
.rp-header {
  padding: .85rem 1rem .6rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rp-title-row { display: flex; align-items: center; gap: .45rem; }
.rp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--saffron); animation: dot-pulse 2.5s ease-in-out infinite;
}
.rp-title {
  font-family: var(--ff-mono); font-size: .6rem;
  letter-spacing: .16em; color: var(--dim); text-transform: uppercase;
}

/* Sections */
.rp-section {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.rp-section-label {
  font-family: var(--ff-mono); font-size: .55rem;
  letter-spacing: .14em; color: var(--dim-2);
  text-transform: uppercase; margin-bottom: .6rem;
}

/* Stats grid */
.rp-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .4rem; margin-bottom: .65rem;
}
.rp-stat-item {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .45rem .55rem;
  text-align: center;
}
.rp-stat-val {
  font-family: var(--ff-mono); font-size: .92rem; font-weight: 500;
  color: var(--saffron-d); line-height: 1;
}
.rp-stat-lbl {
  font-family: var(--ff-mono); font-size: .5rem;
  color: var(--dim); letter-spacing: .06em; margin-top: .18rem;
}

/* Calorie bar */
.rp-cal-bar-wrap { margin-top: .1rem; }
.rp-cal-bar-track {
  height: 6px; background: var(--bg-3);
  border-radius: var(--r-pill); overflow: hidden; margin-bottom: .3rem;
}
.rp-cal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--jade), #22c55e);
  border-radius: var(--r-pill); width: 0%;
  transition: width .6s var(--ease);
}
.rp-cal-labels {
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono); font-size: .55rem; color: var(--dim);
}

/* Streak ring */
.rp-streak-row { display: flex; align-items: center; gap: .75rem; }
.rp-streak-ring-wrap {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
}
.rp-streak-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.rp-streak-num {
  font-family: var(--ff-mono); font-size: 1.3rem; font-weight: 500;
  color: var(--saffron-d); line-height: 1;
}
.rp-streak-lbl {
  font-family: var(--ff-mono); font-size: .46rem;
  color: var(--dim); letter-spacing: .08em;
}
.rp-streak-info { flex: 1; min-width: 0; }
.rp-streak-title {
  font-size: .78rem; font-weight: 700; color: var(--ink-2);
  margin-bottom: .15rem; line-height: 1.3;
}
.rp-streak-sub {
  font-size: .65rem; color: var(--dim); line-height: 1.4; margin-bottom: .4rem;
}
.rp-macros-mini {
  display: flex; gap: .5rem;
  font-family: var(--ff-mono); font-size: .58rem; color: var(--dim);
}
.rp-macros-mini strong { color: var(--ink-3); }

/* Badges */
.rp-badges-section { flex: 1; border-bottom: none; }
.rp-badges-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .35rem;
}
.rp-badge {
  border-radius: var(--r-sm); padding: .5rem .4rem;
  text-align: center; border: 1px solid var(--border);
  transition: all .2s var(--ease); cursor: default;
}
.rp-badge.earned {
  background: var(--saffron-l); border-color: rgba(249,115,22,.2);
}
.rp-badge.earned:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--saffron);
}
.rp-badge.locked {
  background: var(--bg-2); opacity: .55;
}
.rp-badge-icon { font-size: 1.2rem; margin-bottom: .18rem; display:flex; align-items:center; justify-content:center; min-height:34px; }
.rp-badge-icon svg { width:30px; height:30px; }
.rp-badge-name {
  font-size: .58rem; font-weight: 600; color: var(--ink-3);
  line-height: 1.3;
}
.rp-badge.locked .rp-badge-name { color: var(--dim); }

/* Responsive: hide right panel on smaller screens */
@media (max-width: 1200px) {
  .right-panel { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR GROUPED NAV
══════════════════════════════════════════════════════════════ */
.sb-group {
  margin-bottom: .15rem;
}

/* Group header — the category label row */
.sb-group-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .42rem .85rem .38rem;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--r-sm); margin-bottom: .08rem;
  transition: background .15s;
}
.sb-group-header:hover { background: var(--bg-2); }

.sb-group-label {
  font-family: var(--ff-mono); font-size: .56rem;
  letter-spacing: .16em; color: var(--dim-2);
  text-transform: uppercase; font-weight: 500;
}

/* Chevron rotates when collapsed */
.sb-group-chevron {
  color: var(--dim-2); flex-shrink: 0;
  transition: transform .22s var(--ease);
}
.sb-group.collapsed .sb-group-chevron { transform: rotate(-90deg); }

/* Items container — collapses smoothly */
.sb-group-items {
  overflow: hidden;
  max-height: 300px;
  transition: max-height .28s var(--ease), opacity .22s ease;
  opacity: 1;
}
.sb-group.collapsed .sb-group-items {
  max-height: 0;
  opacity: 0;
}

/* Indent the items slightly under their group */
.sb-group .sb-nav-btn {
  padding-left: 1.4rem;
}

/* Active state on group header when a child is active */
.sb-group-header.has-active .sb-group-label { color: var(--saffron-d); }
.sb-group-header.has-active .sb-group-chevron { color: var(--saffron); }

/* Colour-coded left accent per group */
.sb-group:nth-child(1) .sb-group-header.has-active { border-left: 2px solid #0284C7; }
.sb-group:nth-child(2) .sb-group-header.has-active { border-left: 2px solid var(--jade); }
.sb-group:nth-child(3) .sb-group-header.has-active { border-left: 2px solid var(--saffron); }
.sb-group:nth-child(4) .sb-group-header.has-active { border-left: 2px solid #7C3AED; }

/* ══════════════════════════════════════════════════════════════
   PWA / MOBILE APP — Complete mobile-first styles
   Safe areas · Bottom tab bar · Touch optimised · Install banner
══════════════════════════════════════════════════════════════ */

/* ── Safe area insets for notch / home indicator ─────────────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --tab-h:       60px;
}

/* ── MOBILE BOTTOM TAB BAR ────────────────────────────────────── */
.mobile-tab-bar {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tab-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 200;
  box-shadow: 0 -4px 20px rgba(13,13,11,.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* hide on desktop */
}

.mob-tab {
  flex: 1; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 10px 4px 0;
  background: transparent; border: none;
  color: var(--dim); cursor: pointer;
  font-family: var(--ff); font-size: .58rem; font-weight: 500;
  letter-spacing: .02em;
  transition: color .18s, transform .15s;
  min-height: 44px; /* touch target */
  -webkit-tap-highlight-color: transparent;
}
.mob-tab svg { transition: transform .2s var(--spring); }
.mob-tab.active { color: var(--saffron); }
.mob-tab.active svg { transform: translateY(-2px); }
.mob-tab:active { transform: scale(.9); }

/* Centre "ARIA" button */
.mob-tab-center {
  position: relative;
  flex: 1.2;
  color: var(--saffron-d);
  font-weight: 600;
}
.mob-tab-center-ring {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-d));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(249,115,22,.4);
  margin-top: -16px;
  transition: transform .2s var(--spring), box-shadow .2s;
}
.mob-tab-center:active .mob-tab-center-ring {
  transform: scale(.92);
  box-shadow: 0 2px 10px rgba(249,115,22,.35);
}
.mob-tab-center.active .mob-tab-center-ring {
  box-shadow: 0 6px 24px rgba(249,115,22,.5);
}

/* Active indicator dot */
.mob-tab::after {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--saffron);
  opacity: 0; transition: opacity .2s;
  margin-top: 2px;
}
.mob-tab.active::after { opacity: 1; }
.mob-tab-center::after { display: none; }

/* ── MORE SHEET ───────────────────────────────────────────────── */
.mob-more-backdrop {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(13,13,11,.35);
  backdrop-filter: blur(2px);
  animation: fade-in .2s ease;
}
.mob-more-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px calc(20px + var(--safe-bottom));
  box-shadow: 0 -8px 40px rgba(13,13,11,.12);
  animation: sheet-up .28s var(--ease) both;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mob-more-handle {
  width: 36px; height: 4px;
  background: var(--border-2); border-radius: 2px;
  margin: 0 auto 20px;
}
.mob-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mob-more-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; cursor: pointer;
  font-family: var(--ff); font-size: .72rem; font-weight: 500;
  color: var(--text-2);
  transition: all .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.mob-more-item:active { transform: scale(.95); background: var(--saffron-l); }
.mob-more-icon {
  width: 44px; height: 44px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--saffron-d);
}
.mob-more-item:active .mob-more-icon { background: var(--saffron-l); border-color: var(--saffron); }

/* ── PWA INSTALL BANNER ───────────────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: 12px; right: 12px;
  z-index: 400;
  background: var(--surface);
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(249,115,22,.15), 0 2px 8px rgba(13,13,11,.08);
  animation: banner-drop .35s var(--spring) both;
}
@keyframes banner-drop {
  from { transform: translateY(-80px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.pwa-banner-icon { flex-shrink: 0; }
.pwa-banner-text {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
}
.pwa-banner-text strong { font-size: .8rem; color: var(--ink); font-weight: 600; }
.pwa-banner-text span   { font-size: .68rem; color: var(--dim); }
.pwa-install-btn {
  padding: .38rem .9rem; background: var(--saffron);
  border: none; color: white; border-radius: 100px;
  font-family: var(--ff); font-size: .75rem; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  transition: all .18s;
}
.pwa-install-btn:active { transform: scale(.95); }
.pwa-dismiss-btn {
  background: none; border: none; color: var(--dim);
  cursor: pointer; font-size: .85rem; padding: 4px;
  flex-shrink: 0; line-height: 1;
}

/* ── MOBILE-ONLY OVERRIDES ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Push content above bottom tab bar */
  #app {
    padding-bottom: calc(var(--tab-h) + var(--safe-bottom));
  }

  /* Topbar: account for notch/status bar */
  .topbar {
    padding-top: var(--safe-top);
    height: calc(52px + var(--safe-top));
  }
  .main-col {
    grid-template-rows: calc(52px + var(--safe-top)) 1fr auto;
  }

  /* Show mobile tab bar */
  .mobile-tab-bar {
    display: flex;
  }

  /* Hide desktop sidebar completely on mobile */
  .sidebar { display: none !important; }
  .sb-overlay { display: none !important; }
  .right-panel { display: none !important; }

  /* Hide hamburger (no longer needed) */
  .tb-menu-btn { display: none !important; }

  /* Input bar: account for bottom bar */
  .input-bar {
    padding-bottom: .5rem;
  }

  /* Make all interactive elements minimum 44px tall */
  button, .qpill, .action-btn, .mod-tab {
    min-height: 44px;
  }
  .qpill { min-height: 34px; }

  /* Chat input — larger on mobile */
  .chat-input { font-size: 16px; } /* prevent iOS zoom */

  /* Tap highlight off everywhere */
  * { -webkit-tap-highlight-color: transparent; }

  /* Module grid — 2 col on mobile */
  .module-grid { grid-template-columns: repeat(2, 1fr); }

  /* Welcome: tighten up */
  .welcome {
    padding: calc(1.4rem + var(--safe-top)) 1rem 1rem;
    align-items: flex-start;
  }

  /* Messages: more horizontal room */
  .msg-user { max-width: 85%; }
  .msg-ai   { max-width: 96%; }

  /* Modals: sheet from bottom */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    width: 100% !important;
    padding-bottom: var(--safe-bottom);
  }

  /* Game modal: full screen */
  .game-panel {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: var(--safe-bottom);
  }
  .game-panel-body { flex-direction: column; }
  .game-iframe {
    width: 100%;
    height: 56vw !important;
    min-height: 200px;
  }
  .game-side { display: none; } /* hide sidebar in game on mobile */

  /* Video modal: full height */
  .video-modal-card { max-height: 100vh; border-radius: 0 !important; }
  .vid-embed-wrap { aspect-ratio: 16/9; }

  /* Action buttons: full width on mobile */
  .action-btns { flex-direction: column; gap: .4rem; }
  .action-btn { width: 100%; justify-content: center; font-size: .82rem; }

  /* Overscroll behaviour */
  .chat-area { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .messages  { -webkit-overflow-scrolling: touch; }
}

/* ── PHONE SPECIFIC (< 480px) ──────────────────────────────── */
@media (max-width: 480px) {

  :root { --tab-h: 56px; }

  .mob-tab-center-ring { width: 48px; height: 48px; margin-top: -14px; }
  .mob-tab { font-size: .55rem; }

  /* Welcome screen: tighter */
  .welcome-title { font-size: 2rem; }
  .welcome-sub { font-size: .8rem; }

  /* Module grid: 2-col compact */
  .module-card { padding: .8rem .65rem; }
  .mc-label { font-size: .74rem; }
  .mc-desc  { display: none; } /* hide on smallest screens */

  /* Input: bigger tap target */
  .send-btn { width: 44px; height: 44px; }
  .voice-btn, .input-icon-btn { width: 38px; height: 38px; }

  /* Quick pills: scrollable row */
  .quick-pills { flex-wrap: nowrap; overflow-x: auto; }
  .qpill { flex-shrink: 0; }
}

/* ── iOS-specific ──────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* Prevent rubber-band scroll on iOS */
  body { overscroll-behavior: none; }
  #app  { overscroll-behavior: none; }

  /* Fix 100vh on iOS (use dvh when available) */
  #app {
    height: 100vh;
    height: 100dvh;
  }
}

/* ── Desktop: hide mobile-only elements ─────────────────────── */
@media (min-width: 769px) {
  .mobile-tab-bar  { display: none !important; }
  .mob-more-sheet  { display: none !important; }
  .mob-more-backdrop { display: none !important; }
  #app { padding-bottom: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   ARIA VOICE AGENT — On-brand modal
   ══════════════════════════════════════════════════════════════ */

/* Launch button */
.va-agent-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--border-2);
  background: var(--surface); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.va-agent-btn:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); box-shadow: 0 2px 12px var(--saffron-glow); transform: scale(1.05); }
.va-agent-btn:active { transform: scale(.94); }

/* Overlay */
.va-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(250,250,248,.97);
  backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  animation: vaModalIn .3s ease;
}
.va-modal-overlay.hidden { display: none !important; }
@keyframes vaModalIn { from { opacity: 0; } to { opacity: 1; } }

/* Modal panel */
.va-modal {
  width: 100%; max-width: 420px; height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem;
  position: relative; padding: 1.5rem 2rem;
  font-family: var(--ff);
}

/* Top bar */
.va-modal-top {
  position: absolute; top: 1rem; left: 1.5rem; right: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.va-modal-brand { display: flex; align-items: center; gap: .45rem; }
.va-modal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 8px var(--saffron-glow); animation: vaDotPulse 2s ease-in-out infinite; }
@keyframes vaDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.va-modal-title { font-family: var(--ff-serif); font-size: 1.4rem; font-style: italic; color: var(--ink); letter-spacing: .02em; }
.va-modal-tag { font-family: var(--ff-mono); font-size: .5rem; letter-spacing: .16em; color: var(--saffron-d); background: var(--saffron-l); padding: .12rem .45rem; border-radius: var(--r-pill); border: 1px solid rgba(249,115,22,.15); }
.va-modal-close {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--dim); transition: all .2s;
}
.va-modal-close:hover { border-color: var(--saffron); color: var(--saffron-d); background: var(--saffron-l); }

/* Status */
.va-modal-status {
  font-family: var(--ff-mono); font-size: .68rem;
  letter-spacing: .1em; color: var(--dim);
  text-transform: uppercase; min-height: 1rem;
  margin-bottom: .5rem;
}

/* ─── MIC AREA ─── */
.va-modal-mic-area {
  position: relative; width: 180px; height: 180px;
  display: grid; place-items: center;
}

/* Pulse rings */
.va-pulse-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(249,115,22,.05);
  transition: all .4s var(--ease);
}
.va-pulse-ring.r1 { inset: 0; }
.va-pulse-ring.r2 { inset: 18px; }
.va-pulse-ring.r3 { inset: 36px; }

/* Mic circle */
.va-mic-circle {
  position: relative; z-index: 2;
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--border);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  transition: all .35s var(--ease);
}

/* Audio bars (hidden by default) */
.va-audio-bars {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  opacity: 0; transition: opacity .3s;
}
.va-audio-bars span {
  width: 5px; border-radius: 3px;
  background: white; height: 8px;
}

/* ─── LISTENING ─── */
.va-modal.listening .va-mic-circle {
  border-color: var(--saffron);
  box-shadow: 0 0 0 5px var(--saffron-glow), var(--shadow-lg);
}
.va-modal.listening .va-mic-svg { stroke: var(--saffron); }
.va-modal.listening .va-pulse-ring {
  border-color: rgba(249,115,22,.15);
  animation: vaRingPulse 2s ease-in-out infinite;
}
.va-modal.listening .va-pulse-ring.r2 { animation-delay: .25s; }
.va-modal.listening .va-pulse-ring.r3 { animation-delay: .5s; }

/* ─── SPEAKING ─── */
.va-modal.speaking .va-mic-circle {
  border-color: var(--saffron);
  background: var(--saffron);
  box-shadow: 0 0 0 8px var(--saffron-glow), 0 0 50px rgba(249,115,22,.12), var(--shadow-lg);
}
.va-modal.speaking .va-mic-svg { display: none; }
.va-modal.speaking .va-audio-bars { opacity: 1; }
.va-modal.speaking .va-audio-bars span {
  animation: vaBarsAnim .45s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
.va-modal.speaking .va-audio-bars span:nth-child(1) { --h: 14px; }
.va-modal.speaking .va-audio-bars span:nth-child(2) { --h: 26px; }
.va-modal.speaking .va-audio-bars span:nth-child(3) { --h: 34px; }
.va-modal.speaking .va-audio-bars span:nth-child(4) { --h: 26px; }
.va-modal.speaking .va-audio-bars span:nth-child(5) { --h: 14px; }
.va-modal.speaking .va-pulse-ring {
  border-color: rgba(249,115,22,.22);
  animation: vaRingSpeaking .65s ease-in-out infinite;
}

/* ─── CONNECTING ─── */
.va-modal.connecting .va-mic-circle {
  border-color: var(--dim-2);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04), var(--shadow);
}
.va-modal.connecting .va-mic-svg { stroke: var(--dim); animation: vaPulseIcon 1s ease-in-out infinite; }
.va-modal.connecting .va-pulse-ring { animation: vaRingPulse 1s ease-in-out infinite; border-color: rgba(0,0,0,.05); }

@keyframes vaRingPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .3; } }
@keyframes vaRingSpeaking { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes vaBarsAnim { 0% { height: 6px; } 100% { height: var(--h, 28px); } }
@keyframes vaPulseIcon { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Transcript */
.va-modal-transcript {
  width: 100%; max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: .35rem;
  padding: 0 .3rem; margin-top: .5rem;
}
.va-modal-transcript::-webkit-scrollbar { width: 2px; }
.va-modal-transcript::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
.va-bubble {
  padding: .5rem .75rem; border-radius: var(--r);
  font-size: .76rem; line-height: 1.5;
  animation: vaFadeUp .25s ease; text-align: left; max-width: 88%;
}
@keyframes vaFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.va-bubble.agent { align-self: flex-start; background: var(--saffron-l); border: 1px solid rgba(249,115,22,.1); color: var(--ink-2); }
.va-bubble.user { align-self: flex-end; background: var(--bg-3); border: 1px solid var(--border); color: var(--ink-2); }
.va-bubble.sys { align-self: center; background: none; color: var(--dim); font-size: .65rem; font-family: var(--ff-mono); letter-spacing: .04em; }
.va-who { font-family: var(--ff-mono); font-size: .52rem; letter-spacing: .1em; color: var(--saffron-d); margin-bottom: .1rem; text-transform: uppercase; }
.va-bubble.user .va-who { color: var(--dim); text-align: right; }

/* End session */
.va-modal-end {
  font-family: var(--ff); font-size: .74rem; font-weight: 600;
  padding: .45rem 1.2rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-2); background: var(--surface);
  color: var(--dim); cursor: pointer; transition: all .2s;
  display: flex; align-items: center; gap: .4rem;
  margin-top: .5rem;
}
.va-modal-end:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-l); }

@media (max-width: 520px) { .va-modal { max-width: 100%; padding: 1.2rem; } }
@media (max-height: 680px) {
  .va-modal-mic-area { width: 140px; height: 140px; }
  .va-mic-circle { width: 80px; height: 80px; }
}