/* Klaus Dashboard — style.css v3.0  (landscape, design-matched) */

/* ── HIDDEN INTEGRATIONS ──────────────────────────────────────────────────── */
[data-integration="clock"], #panel-clock { display: none !important; }

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --bg:           #111113;
  --surface:      #1C1C20;
  --surface-2:    #26262B;
  --surface-3:    #323238;
  --text:         #F2F2F7;
  --text-2:       #8E8E93;
  --text-3:       #48484A;
  --border:       rgba(255,255,255,0.07);
  --border-2:     rgba(255,255,255,0.12);
  --green:        #34C759;
  --green-glow:   rgba(52,199,89,0.3);
  --amber:        #FFD60A;
  --red:          #FF3B30;
  --blue:         #0A84FF;
  --accent:       #0A84FF;
  --accent-dim:   rgba(10,132,255,0.12);
  --radius-xl:    20px;
  --radius-lg:    16px;
  --radius-md:    12px;
  --radius-sm:    9px;
  --radius-pill:  100px;
  --left-w:       390px;
  --header-h:     50px;
}

/* ── SPEECH BUBBLE ─────────────────────────────────────────────────────────── */
#speech-bubble {
  position: fixed;
  /* left/top/max-width set dynamically by JS from avatar rect */
  left: 200px;
  /* No right: — width is content-driven, not stretched to edge */
  max-width: 780px;   /* JS overrides this too */
  /* top set by JS — bubble sits below his mouth */
  z-index: 2000;
  background: linear-gradient(160deg, #5ab4ff 0%, #0A84FF 45%, #0060cc 100%);
  border: none;
  border-radius: 18px;  /* fully rounded — no pinched corner */
  padding: 14px 20px 14px 18px;
  box-shadow:
    0 6px 18px rgba(0, 80, 200, 0.55),
    0 2px 5px  rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 5px rgba(0, 0, 0, 0.18);
  pointer-events: none;   /* bubble itself non-interactive… */
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-flex;   /* shrink-wraps to text width */
  align-items: flex-start;
  gap: 10px;
}
/* Thought-bubble dots — three circles trailing up toward Klaus */
#speech-bubble::before {
  content: '';
  position: absolute;
  top: -13px; left: 20px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #0A84FF;
  /* Two smaller circles further up via box-shadow */
  box-shadow:
    -5px -11px 0 -1.5px #0A84FF,
    -10px -21px 0 -3px   #0A84FF;
}
#speech-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#speech-bubble p {
  margin: 0; flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 19px; font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
}
/* Close button — always tappable even though bubble is pointer-events:none */
#speech-bubble-close {
  pointer-events: auto;
  flex-shrink: 0;
  background: rgba(255,255,255,0.22);
  border: none; border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff; font-size: 13px; line-height: 1;
  margin-top: 2px;
  transition: background 0.15s;
}
#speech-bubble-close:hover  { background: rgba(255,255,255,0.35); }
#speech-bubble-close:active { background: rgba(255,255,255,0.45); }

/* ── RESET ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── UNLOCK / WELCOME SCREEN ──────────────────────────────────────────────
   Brand-aligned with klausinthehouse.lovable.app:
   - Blue oklch(60% .2 250), near-black bg, cream text
   - Bold system sans at weight 900
   - Adaptive: greeting + avatar change with time of day + season
   - Scales cleanly on iPad Air (portrait + landscape) via clamp + vmin
────────────────────────────────────────────────────────────────────────── */
@keyframes unlock-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes unlock-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes unlock-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes unlock-breathe {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}

#unlock-overlay {
  position: fixed; inset: 0;
  height: 100dvh;
  background: oklch(10% .015 280);
  z-index: 1000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  padding: clamp(16px, 4vh, 40px) 24px;
  gap: clamp(8px, 1.6vh, 18px);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", 'Inter', sans-serif;
}
/* Blue ambient bloom from top */
#unlock-overlay::before {
  content: '';
  position: absolute;
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 120vmin; height: 120vmin; border-radius: 50%;
  background: radial-gradient(circle,
    oklch(60% .2 250 / 0.22) 0%,
    oklch(60% .2 250 / 0.08) 34%,
    oklch(60% .2 250 / 0.02) 56%,
    transparent 72%);
  pointer-events: none;
  animation: unlock-breathe 9s ease-in-out infinite;
}
/* Corner vignette */
#unlock-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, oklch(6% .02 280) 100%);
  pointer-events: none;
}

/* Top nav chip ("Klaus · Södermalm")
   Centered via left:0/right:0/margin:auto instead of translateX(-50%) —
   the transform approach drifted in Safari when combined with the flex
   parent + viewport-fit=cover safe areas. */
.unlock-chip {
  position: absolute; top: clamp(14px, 2.5vh, 28px);
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
  width: fit-content;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  background: oklch(15% .015 280);
  border: 1px solid oklch(100% 0 0 / .08);
  border-radius: 100px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em;
  color: oklch(55% .015 280);
  z-index: 3;
  animation: unlock-fade-in 0.8s ease 0.1s both;
}
.unlock-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(75% .18 145);
  box-shadow: 0 0 8px oklch(75% .18 145 / .7);
}
.unlock-chip strong { color: oklch(95% .005 80); font-weight: 600; }

/* Hero block — avatar above greeting above subhead above CTA */
.unlock-hero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  max-width: 1100px; width: 100%;
  text-align: center;
  animation: unlock-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Avatar — scales down on short viewports */
.unlock-avatar-wrap {
  position: relative;
  width:  clamp(120px, 22vh, 200px);
  height: clamp(120px, 22vh, 200px);
  margin-bottom: clamp(10px, 2vh, 20px);
  animation: unlock-float 7s ease-in-out infinite;
}
/* Halo sits BEHIND Klaus and provides the blue glow + soft shadow.
   Keeping the glow on a separate wrapper (not the <img>) avoids a Safari
   bug where filter:drop-shadow + mask-image on an <img> rasterizes the
   shadow as a rectangle around the image's bounding box. */
.unlock-avatar-halo {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle,
    oklch(60% .2 250 / 0.32) 0%,
    oklch(60% .2 250 / 0.12) 42%,
    oklch(60% .2 250 / 0.03) 64%,
    transparent 78%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}
.unlock-avatar-img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  /* mix-blend-mode: screen lifts any dark baked-in backdrop on the PNG
     (e.g. weekendcozy) against the near-black overlay. Because Klaus's
     lit pixels are already bright, screen-blend leaves the character
     intact while dark backdrop pixels fall away to transparent.
     No filter/mask on the <img> itself — Safari rasterises those as a
     rectangle around the img box, which caused the dark-square artefact. */
  mix-blend-mode: screen;
  user-select: none; pointer-events: none;
}

/* Greeting — bold system sans, scales to whichever viewport dimension is smaller */
.unlock-greeting {
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(44px, min(6.5vw, 11vh), 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: oklch(95% .005 80);
  margin: 0;
  max-width: 95vw;
}
.unlock-greeting .accent {
  color: oklch(60% .2 250);
  text-shadow: 0 0 36px oklch(60% .2 250 / .25);
}

/* Subhead / rotating tagline */
.unlock-subhead {
  font-family: inherit;
  font-size: clamp(16px, min(1.8vw, 2.6vh), 22px);
  font-weight: 400;
  line-height: 1.4;
  color: oklch(78% .01 280);
  letter-spacing: -0.005em;
  max-width: 620px;
  margin: clamp(12px, 2vh, 22px) 0 0 0;
  min-height: 1.4em;
  transition: opacity 0.35s ease;
}
.unlock-subhead .em { color: oklch(95% .005 80); font-weight: 500; }

/* Presence line (shown only when someone else is home) */
.unlock-presence {
  font-size: 13px;
  color: oklch(55% .015 280);
  margin-top: clamp(8px, 1.4vh, 16px);
  letter-spacing: 0.02em;
}
.unlock-presence .who { color: oklch(78% .01 280); font-weight: 500; }

/* CTA row */
.unlock-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  margin-top: clamp(20px, 3.5vh, 36px);
}
.unlock-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: oklch(60% .2 250);
  border: 1px solid oklch(65% .2 250 / .6);
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  color: #fff;
  font-family: inherit;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.25s;
  box-shadow:
    0 10px 28px oklch(60% .2 250 / .4),
    0 1px 0 oklch(75% .2 250 / .4) inset;
  animation: unlock-fade-in 0.75s ease 0.35s both;
  position: relative; z-index: 1;
}
.unlock-btn:hover {
  background: oklch(68% .2 250);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px oklch(60% .2 250 / .55), 0 1px 0 oklch(75% .2 250 / .5) inset;
}
.unlock-btn:active { transform: translateY(0); }
.unlock-btn-label { position: relative; }
.unlock-btn-arrow {
  width: 15px; height: 15px;
  transition: transform 0.2s; flex-shrink: 0;
}
.unlock-btn:hover .unlock-btn-arrow { transform: translateX(3px); }

.unlock-whisper { font-size: 13px; color: oklch(55% .015 280); }
.unlock-whisper kbd {
  padding: 3px 7px; border-radius: 5px;
  background: oklch(15% .015 280);
  border: 1px solid oklch(100% 0 0 / .08);
  font-family: inherit; font-size: 11px;
  color: oklch(78% .01 280);
}

/* Footer signature */
.unlock-footer {
  position: absolute;
  bottom: clamp(12px, 2.2vh, 22px); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(55% .015 280);
  opacity: 0.65;
  animation: unlock-fade-in 0.8s ease 0.5s both;
}
.unlock-footer .sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}

/* ── GLOBAL HEADER ─────────────────────────────────────────────────────────── */
header {
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  background: #0A0A0C;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 10;
  overflow: visible;
}

/* Vertical divider removed — left panel border stops at the header */

/* Left: status pill + avatars */
.header-left {
  display: flex; align-items: center; gap: 14px;
  width: var(--left-w); padding-right: 16px; flex-shrink: 0;
}

/* Presence avatars in header — sits right after the status pill */
.header-avatars {
  display: flex; align-items: center; gap: 8px;
}
.presence-avatar {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.08);
  overflow: visible; flex-shrink: 0;
}
.presence-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  display: block; overflow: hidden;
  filter: grayscale(1) brightness(0.55);
  transition: filter 0.3s;
}
/* Online dot — bottom-right corner like messaging apps */
.presence-avatar::after {
  content: '';
  position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
  border: 1.5px solid #0A0A0C;
}
.presence-avatar.home .presence-avatar-img {
  filter: none;
}
.presence-avatar.home::after {
  background: var(--green);
  box-shadow: 0 0 5px var(--green-glow);
}

.header-clock {
  display: none; /* iPad already shows system time — no need to duplicate */
}

/* Center: next-up event — left-aligned at the right panel boundary */
.header-center {
  flex: 1; display: flex; align-items: center; justify-content: flex-start;
  padding: 0 0 0 24px;
  min-width: 0;
}

.header-next-up {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.next-up-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 17px; font-weight: 400; color: var(--text-3);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.next-up-label i { font-size: 16px; }
#next-up-text {
  font-size: 17px; font-weight: 400; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.3s ease;
}

.header-right {
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}

/* Spotify quick-play button in header */
.header-sp-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;        /* iPad/desktop size — scales up on phone media queries */
  border-radius: 50%;
  background: #1DB954;
  border: none;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29,185,84,0.35);
}
.header-sp-btn:hover  { background: #1ed760; }
.header-sp-btn:active { background: #17a648; transform: scale(0.92); }
.header-sp-btn i {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Volume button next to play */
.header-sp-vol-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #1DB954;
  font-size: 22px;
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
  padding: 0;
  margin-right: 4px;
}
.header-sp-vol-btn:hover { color: #1DB954; }

/* Volume popup wrapper */
.header-sp-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vertical volume slider popup */
.header-sp-vol-popup {
  position: fixed;
  background: oklch(18% 0.01 250 / 0.95);
  border: 1px solid oklch(40% 0.05 250 / 0.4);
  border-radius: 20px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 200;
  animation: sp-vol-in 0.15s ease;
}
@keyframes sp-vol-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Label inside volume popup */
.header-sp-vol-label {
  font-size: 10px;
  color: oklch(55% 0.05 250);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* Vertical range slider */
.header-sp-vol-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  -webkit-appearance: slider-vertical;
  width: 6px;
  height: 100px;
  cursor: pointer;
  accent-color: #1DB954;
}

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 5px 13px;
  font-size: 14px; color: var(--text-2);
}

/* Dots */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.green  { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.dot.amber  { background: var(--amber); }
.dot.muted  { background: var(--text-3); }
.dot.red    { background: var(--red); }

/* Clock — horizontal layout in header-left */
.clock-time { font-size: 22px; font-weight: 300; letter-spacing: 0.04em; color: var(--text); }
.clock-date { font-size: 16px; color: var(--text-3); letter-spacing: 0.01em; font-weight: 300; }

/* Presence in header */
.presence-person {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; color: var(--text-3); transition: color 0.25s;
}
.presence-person.home { color: var(--text-2); }

/* Bell in global header */
.bell-btn {
  position: relative; background: none; border: none;
  color: var(--text-3); font-size: 19px; cursor: pointer;
  padding: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.bell-btn:hover { color: var(--text-2); background: var(--surface); }
.bell-badge {
  position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--bg);
  display: none;
}

/* ── MAIN GRID ─────────────────────────────────────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: var(--left-w) 1fr;
  flex: 1; min-height: 0;
  overflow: hidden;
  /* Grid rows fill remaining height exactly */
  grid-template-rows: 1fr;
}

/* ══════════════════════════════════════════════════════
   LEFT PANEL
══════════════════════════════════════════════════════ */
.left-panel {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: #0A0A0C;
  overflow: hidden;
  /* Always fill the grid cell height exactly */
  height: 100%;
  min-height: 0;
}

/* ── Panel nav row: [☰]  [Talk to Klaus ✦]  [🔔] ── */
.panel-nav-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 22px 16px 14px;
  flex-shrink: 0;
  gap: 10px;
}

.panel-nav-icon {
  width: 42px; height: 42px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-3); font-size: 19px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
  transition: background 0.15s, color 0.15s;
}
.panel-nav-icon:hover { background: var(--surface-2); color: var(--text-2); }

/* Bell badge inside panel nav icon */
.bell-badge-panel {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--bg);
  display: none;
}

/* Talk to Klaus — 3D dark pill, same structure as tiles */
.talk-btn {
  /* No flex:1 — content-width, centered between the two nav icons */
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #18181D;
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  border-right:  1px solid rgba(0,0,0,0.35);
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  color: var(--text-2);
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 400;
  cursor: pointer; letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  white-space: nowrap;
  transition: color 0.2s, box-shadow 0.15s, transform 0.1s;
}
.talk-btn .bi-mic-fill { font-size: 17px; transition: color 0.2s; }
.talk-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
}
.talk-btn:active { transform: scale(0.97); }

/* State: ONLY text + icon color changes — background never moves */
.talk-btn.listening     { color: var(--green); }
.talk-btn.listening .bi { color: var(--green); }
.talk-btn.auto-listen     { color: var(--accent); }
.talk-btn.auto-listen .bi { color: var(--accent); }
.talk-btn.thinking     { color: var(--text-3); }
.talk-btn.thinking .bi { color: var(--text-3); }
.talk-btn.speaking     { color: #0A84FF; }
.talk-btn.speaking .bi { color: #0A84FF; }

/* Fast-forward button — appears next to talk-btn when Klaus is speaking */
.talk-btn-group {
  display: flex; align-items: center; gap: 8px;
}
.ff-btn {
  display: none;
  width: 42px; height: 42px;
  background: #e8834a;
  border: none; border-radius: 50%;
  color: #fff; font-size: 18px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.ff-btn:hover  { background: #d97340; }
.ff-btn:active { transform: scale(0.95); }
#talk-btn.speaking ~ .ff-btn { display: flex; }

/* ── Status strip — slides in below Talk button when there is something to show ── */
.status-strip {
  flex-shrink: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  display: flex; justify-content: center; align-items: center;
  padding: 0 20px;
  transition: max-height 0.2s ease, opacity 0.18s ease, padding 0.2s ease;
  pointer-events: none;
}
.status-strip.has-content {
  max-height: 44px;
  opacity: 1;
  padding: 5px 20px 5px;
  pointer-events: auto;
}
.status-strip .greeting-status {
  font-size: 15px; font-weight: 400; color: var(--text-3);
  text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.status-strip .greeting-status.status-preview { color: var(--text-2); font-style: italic; }
.status-strip .greeting-status.status-tool    { color: var(--text-3); }
.status-strip .greeting-status.status-error   { color: var(--red); opacity: 0.8; }

/* Auto-listen bar — draining progress bar under the avatar.
   Beefed up from 2px → 6px with full opacity so the user can actually
   see how much speaking time is left. Sits directly under the
   listen-countdown pill for a clear "how long do I have" signal. */
#auto-listen-bar {
  width: calc(100% - 32px); margin: 6px 16px 0;
  height: 6px; border-radius: 3px;
  background: var(--accent); opacity: 1;
  box-shadow: 0 0 10px rgba(120, 170, 255, 0.55);
  transition: width 0.1s linear;
  flex-shrink: 0;
}

/* Listening countdown lives inside the Talk button's text span — see
   app.js startCountdown(). The seconds number is wrapped in a <span> so we
   can style just the number in amber (and red in the last 5 seconds)
   without repainting the whole label. */
#talk-btn .talk-btn-secs {
  font-variant-numeric: tabular-nums;
  color: #ffd85a;   /* amber — draws the eye */
  margin-left: 4px;
  font-weight: 700;
}
#talk-btn.ending .talk-btn-secs {
  color: #ff7070;
  animation: talk-btn-secs-pulse 0.8s ease-in-out infinite;
}
@keyframes talk-btn-secs-pulse {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.55; }
}

/* ── Avatar — full width, no clip, screen-blend ── */
.avatar-zone {
  position: relative;
  flex-shrink: 0;
  background: #0A0A0C;
  overflow: hidden;
  cursor: pointer;  /* Clickable — triggers tickle / "feeling lucky" mode */
  padding-top: 15px;
  margin-bottom: 10px;
}

/* Avatar image wrapper */
.avatar-parallax {
  position: relative; /* needed for blink overlay positioning */
  width: 100%; height: 100%;
  display: flex; align-items: flex-start;
}

/* BLINK: remove this block + img#avatar-blink-img in index.html + JS blink block to disable */
.avatar-blink-img {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  animation: none; /* no breathe/sway — prevents out-of-phase screen-blend brightness spike */
}

.avatar-img {
  display: block;
  width: 100%;
  /* ~15% smaller than original — keeps body visible while giving tiles more room */
  height: clamp(185px, 37vh, 315px);
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: screen;
  pointer-events: none; user-select: none;
  transform-origin: center 40%;
  will-change: transform, filter;
  animation: avatar-breathe 5s ease-in-out infinite, avatar-sway 9s ease-in-out infinite;
}

/* Multi-layer fade: top (dark edge blend) + bottom (into panel bg) */
.avatar-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, #0A0A0C 0%, transparent 18%),
    linear-gradient(to top,    #0A0A0C 0%, transparent 40%);
  pointer-events: none;
}

/* Speaking / listening state — override idle animations */
#avatar-wrap.speaking .avatar-img,
.avatar-img.speaking  { animation: avatar-speak 2.2s ease-in-out infinite; }
.avatar-img.listening { animation: avatar-listen 1.6s ease-in-out infinite; }

/* Attention nudge — triggered by JS adding .attention class briefly */
.avatar-img.attention { animation: avatar-attention 0.8s ease-out forwards; }

/* Tickle reaction — triggered when user taps Klaus's portrait */
.avatar-img.tickle { animation: avatar-tickle 0.75s ease-out forwards; }
@keyframes avatar-tickle {
  0%   { transform: scale(1.00) rotate(0deg)   translateY(0px); }
  12%  { transform: scale(1.05) rotate(-4deg)  translateY(-7px); }
  28%  { transform: scale(1.06) rotate(4deg)   translateY(-10px); }
  44%  { transform: scale(1.05) rotate(-3deg)  translateY(-7px); }
  60%  { transform: scale(1.03) rotate(2deg)   translateY(-4px); }
  78%  { transform: scale(1.01) rotate(-1deg)  translateY(-2px); }
  100% { transform: scale(1.00) rotate(0deg)   translateY(0px); }
}

@keyframes avatar-breathe {
  0%   { transform: scale(1.000) translateY(0px); }
  40%  { transform: scale(1.012) translateY(-3px); }
  100% { transform: scale(1.000) translateY(0px); }
}
@keyframes avatar-sway {
  0%   { transform: rotate(0deg) translateX(0px); }
  25%  { transform: rotate(-0.4deg) translateX(-2px); }
  75%  { transform: rotate(0.4deg)  translateX(2px); }
  100% { transform: rotate(0deg) translateX(0px); }
}
@keyframes avatar-listen {
  /* Subtle green glow for listening — Klaus "hears" you */
  0%, 100% { filter: brightness(1.04) drop-shadow(0 0 10px rgba(100,200,255,0.25)); }
  50%       { filter: brightness(1.10) drop-shadow(0 0 20px rgba(100,200,255,0.45)); transform: scale(1.015) translateY(-1px); }
}
@keyframes avatar-speak {
  /* Soft white-blue glow when speaking — warm and calm, not jarring */
  0%   { filter: brightness(1.02) drop-shadow(0 0 6px  rgba(200,220,255,0.20)); transform: scale(1.000); }
  30%  { filter: brightness(1.08) drop-shadow(0 0 18px rgba(200,220,255,0.38)); transform: scale(1.010); }
  60%  { filter: brightness(1.04) drop-shadow(0 0 10px rgba(200,220,255,0.25)); transform: scale(1.004); }
  100% { filter: brightness(1.02) drop-shadow(0 0 6px  rgba(200,220,255,0.20)); transform: scale(1.000); }
}
@keyframes avatar-attention {
  0%   { transform: scale(1.00) translateY(0px); }
  15%  { transform: scale(1.03) translateY(-6px); }
  35%  { transform: scale(1.01) translateY(-2px); }
  55%  { transform: scale(1.02) translateY(-4px); }
  100% { transform: scale(1.00) translateY(0px); }
}

/* ── Greeting area — now empty, kept for compat ── */
.greeting-area {
  flex-shrink: 0;
}
/* Original greeting text no longer used */
.greeting-main { display: none; }

/* ── Thought-bubble float animation ── */
@keyframes thought-bubble-float {
  0%   { transform: translateX(0px)  translateY(0px);  }
  40%  { transform: translateX(2px)  translateY(-5px); }
  100% { transform: translateX(0px)  translateY(0px);  }
}
@keyframes thought-dot-pulse {
  0%   { opacity: 1;    }
  50%  { opacity: 0.40; }
  100% { opacity: 1;    }
}

/* Comic-style thinking bubble — off to the right, dots trail down-left toward Klaus */
.emotion-subtitle {
  display: inline-block;
  /* 3D bubbly look: gradient top-highlight → main blue → deeper blue at bottom */
  background: linear-gradient(160deg, #5ab4ff 0%, #0A84FF 45%, #0060cc 100%);
  border: none;
  border-radius: 18px;
  padding: 7px 16px;
  font-size: 14px; font-weight: 400; font-style: italic;
  color: #ffffff;
  line-height: 1.45;
  text-align: center;
  transition: opacity 0.4s ease;
  max-width: 75%;
  position: relative;
  z-index: 10;
  margin: 0 32px -18px auto;
  align-self: flex-end;
  overflow: visible; /* dots sit outside the bubble bounds */
  animation: thought-bubble-float 3.8s ease-in-out infinite;
  /* depth: outer drop-shadow + subtle inner top-shine */
  box-shadow:
    0 6px 18px rgba(0, 80, 200, 0.55),
    0 2px 5px  rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 5px rgba(0, 0, 0, 0.18);
}
.emotion-subtitle.bubble-hidden {
  opacity: 0;
  pointer-events: none;
  animation: none;
}
/* Individual thought dots — subtle spheres, each sways gently */
.thought-dot {
  position: absolute;
  border-radius: 50%;
  background: #0A84FF;
  box-shadow: 0 1px 3px rgba(0, 60, 160, 0.4);
}
.thought-dot--1 { width: 8px; height: 8px; bottom: -12px; left: 72%; animation: dot-sway-1 6.5s ease-in-out infinite; }
.thought-dot--2 { width: 6px; height: 6px; bottom: -19px; left: 65%; animation: dot-sway-2 7.8s ease-in-out infinite 1s; }
.thought-dot--3 { width: 4px; height: 4px; bottom: -24px; left: 59%; animation: dot-sway-3 5.9s ease-in-out infinite 2s; }

@keyframes dot-sway-1 {
  0%,100% { transform: translateX(0px);  }
  40%     { transform: translateX(1px);  }
  70%     { transform: translateX(-1px); }
}
@keyframes dot-sway-2 {
  0%,100% { transform: translateX(0px);  }
  35%     { transform: translateX(-1px); }
  70%     { transform: translateX(0.8px);}
}
@keyframes dot-sway-3 {
  0%,100% { transform: translateX(0px);  }
  45%     { transform: translateX(0.8px);}
  75%     { transform: translateX(-1px); }
}
/* .greeting-status base styles used by the status-strip child */
.greeting-status {
  font-size: 15px; font-weight: 400; color: var(--text-3);
  line-height: 1.4; text-align: center;
  max-width: 100%; padding: 0 4px;
  transition: color 0.3s ease;
}

/* ── Klaus panel hide/show (grid toggle) ── */
/* When .left-panel has .hide-Klaus, collapse avatar + greeting; tiles get extra room */
.left-panel.hide-Klaus .avatar-zone,
.left-panel.hide-Klaus .greeting-area,
.left-panel.hide-Klaus .status-strip,
.left-panel.hide-Klaus #emotion-subtitle {
  display: none;
}
.left-panel.hide-Klaus .integrations-section {
  flex: 1;  /* fills freed space */
}
/* Highlight the grid icon when active */
.left-panel.hide-Klaus .panel-nav-icon[data-action="toggle-Klaus"] {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border-2);
}

/* ── Integration tiles 2×2 ── */
.integrations-section {
  flex: 1;
  min-height: 0;          /* Critical: lets flexbox shrink below content size */
  padding: 36px 16px 12px;
  display: flex; flex-direction: column;
  overflow-y: auto;       /* Tiles scroll as more integrations are added */
  /* Fade tiles as they scroll up toward Klaus — applied at GPU mask level,
     no compositing bleed on any platform */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 52px);
  mask-image:         linear-gradient(to bottom, transparent 0px, black 52px);
}
.integrations-section::-webkit-scrollbar { width: 3px; }
.integrations-section::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 2px; }

.integrations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  /* No flex: 1 — grid is auto-height, section scrolls */
}

.k-int-tile {
  display: flex; flex-direction: row;
  align-items: center; gap: 12px;
  /* 3D surface: lighter on top-left edge, darker on bottom-right */
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.11);
  border-left:   1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  border-right:  1px solid rgba(0,0,0,0.25);
  border-radius: var(--radius-lg);
  padding: 9px 14px;
  color: var(--text-2);
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400;
  cursor: pointer; text-align: left;
  min-height: 45px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

/* Tile-top is now just an icon container — no extra spacing needed */
.k-int-tile-top {
  display: contents; /* Let icon participate directly in tile's flex row */
}

/* Icon bubble — small frosted circle */
.k-int-icon-bubble {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-3);
  border-top:  1px solid rgba(255,255,255,0.12);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  border-right:  1px solid rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: background 0.15s, box-shadow 0.15s;
}
.k-int-icon-bubble .bi { font-size: 18px; color: var(--text-3); transition: color 0.15s; }

/* Arrow hidden in horizontal layout */
.k-int-arrow { display: none; }

.k-int-tile span {
  font-size: 14px; font-weight: 400; color: var(--text-2);
  transition: color 0.15s;
}

.k-int-tile:hover {
  background: var(--surface-2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.k-int-tile:hover .k-int-icon-bubble .bi { color: var(--text-2); }
.k-int-tile:hover span { color: var(--text); }
.k-int-tile:hover .k-int-arrow { opacity: 0.8; }
.k-int-tile:active { transform: scale(0.975); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* Active (selected) tile — base treatment */
.k-int-tile.active {
  background: var(--surface-2);
  border-top:  1px solid rgba(255,255,255,0.15);
  border-left: 1px solid rgba(255,255,255,0.12);
}
.k-int-tile.active .k-int-icon-bubble {
  background: var(--surface-3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}
.k-int-tile.active .k-int-icon-bubble .bi { color: var(--text-2); }
.k-int-tile.active span { color: var(--text); font-weight: 500; }
.k-int-tile.active .k-int-arrow { color: var(--text-2); opacity: 0.9; }

/* Per-integration active colors */
[data-integration="weather"].active .k-int-icon-bubble { background: rgba(74,144,226,0.2); }
[data-integration="weather"].active .k-int-icon-bubble .bi { color: #4A90E2; }

[data-integration="calendar"].active .k-int-icon-bubble { background: rgba(175,82,222,0.2); }
[data-integration="calendar"].active .k-int-icon-bubble .bi { color: #AF52DE; }

[data-integration="log"].active .k-int-icon-bubble { background: rgba(90,200,250,0.2); }
[data-integration="log"].active .k-int-icon-bubble .bi { color: #5AC8FA; }

[data-integration="clock"].active .k-int-icon-bubble { background: rgba(255,149,0,0.2); }
[data-integration="clock"].active .k-int-icon-bubble .bi { color: #FF9500; }

[data-integration="learning"].active .k-int-icon-bubble { background: rgba(88,204,2,0.2); }
[data-integration="learning"].active .k-int-icon-bubble .bi { color: #58CC02; }

[data-integration="meditation"].active .k-int-icon-bubble { background: rgba(255,140,66,0.22); }
[data-integration="meditation"].active .k-int-icon-bubble .bi { color: #FF8C42; }

[data-integration="lights"].active .k-int-icon-bubble { background: rgba(255,214,10,0.18); }
[data-integration="lights"].active .k-int-icon-bubble .bi {
  color: #FFD60A;
  animation: lights-shimmer 2s ease-in-out infinite;
}
@keyframes lights-shimmer {
  0%, 100% { color: #FFD60A; filter: drop-shadow(0 0 4px rgba(255,214,10,0.8)); }
  50%       { color: #FFF176; filter: drop-shadow(0 0 10px rgba(255,214,10,1)); }
}

/* ── Quick Actions — compact strip at bottom ── */
.quick-actions-strip {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 16px 16px;
  gap: 6px; flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.qa-pill {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none;
  border-radius: var(--radius-md);
  padding: 10px 4px;
  color: var(--text-3);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em;
  flex: 1; min-width: 0;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}
.qa-pill span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.qa-pill .bi { font-size: 24px; }
.qa-pill:hover { background: var(--surface); color: var(--text-2); }
.qa-pill:active { background: var(--surface-2); transform: scale(0.96); }
.qa-pill.vacation-on { color: var(--amber); }
.qa-pill.silence-on  { color: var(--amber); }
.qa-pill.loading { opacity: 0.45; pointer-events: none; }
.qa-pill.loading .bi { animation: spin 0.75s linear infinite; }

/* action-btn is the JS class — maps onto qa-pill */
.action-btn { /* handled by qa-pill above */ }

/* Legacy k-tile compat — not rendered, JS may reference */
.k-tile { display: none; }
.k-nav-item { display: none; }

/* ══════════════════════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════════════════════ */
.right-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Integration panels */
.integration-panel {
  display: none; flex-direction: column;
  flex: 1; overflow: hidden;
  padding: 28px 36px 24px;
  position: relative;
  isolation: isolate;
}
.integration-panel.active { display: flex; }

/* Panel header */
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-title { font-size: 17px; font-weight: 400; color: var(--text); letter-spacing: 0.02em; display: flex; align-items: center; gap: 9px; }
.panel-title-icon { font-size: 17px; color: var(--text-2); }
.panel-location { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; }
.panel-meta { font-size: 13px; color: var(--text-3); }

/* Panel scrollable content */
.panel-content {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 24px;
}
.panel-content::-webkit-scrollbar { width: 3px; }
.panel-content::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 2px; }

/* ── WEATHER PANEL ────────────────────────────────────────────────────────── */

/* Hero — compact: emoji + temp side by side */
.weather-hero {
  display: flex; align-items: center; gap: 24px;
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  border-right:  1px solid rgba(0,0,0,0.22);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 28px 32px;
  flex-shrink: 0;
}
.weather-emoji-main {
  font-size: 72px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.weather-hero-info { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.weather-temp-big {
  font-size: 80px; font-weight: 200; line-height: 1;
  letter-spacing: -0.04em; color: var(--text); flex-shrink: 0;
}
.weather-hero-side { display: flex; flex-direction: column; gap: 6px; }
.weather-desc  { font-size: 22px; color: var(--text-2); font-weight: 300; }
.weather-feels { font-size: 19px; color: var(--text-3); }

/* 4 metric cards grid */
.weather-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  flex-shrink: 0;
}
.weather-metric-card {
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  border-right:  1px solid rgba(0,0,0,0.22);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 20px 16px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.weather-metric-icon-wrap {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2);
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.30);
  border-right:  1px solid rgba(0,0,0,0.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--accent);
  margin-bottom: 2px;
}
.weather-metric-label {
  font-size: 15px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.10em;
}
.weather-metric-value { font-size: 28px; font-weight: 300; color: var(--text); }
.weather-metric-sub   { font-size: 16px; color: var(--text-3); }

/* Section cards (hourly + 7-day) */
.weather-section-card {
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  border-right:  1px solid rgba(0,0,0,0.22);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 22px 24px;
  flex-shrink: 0;
}
.weather-section-label {
  font-size: 15px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.10em;
  margin-bottom: 18px;
}
.weather-section-empty { font-size: 16px; color: var(--text-3); padding: 8px 0; }

/* Hourly strip */
.weather-hourly-strip {
  display: flex; gap: 0;
}
.weather-hourly-slot {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 4px 0;
}
.weather-hourly-slot + .weather-hourly-slot {
  border-left: 1px solid var(--border);
}
.weather-hourly-time  { font-size: 16px; font-weight: 500; color: var(--text-3); }
.weather-hourly-emoji { font-size: 40px; line-height: 1; }
.weather-hourly-temp  { font-size: 24px; font-weight: 400; color: var(--text); }

/* 7-day forecast rows */
.weather-daily-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.weather-daily-row:last-child { border-bottom: none; }

/* Day label — "Today" or "Mon" */
.weather-daily-day {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-2);
  width: 46px;
  flex-shrink: 0;
}

/* Condition emoji */
.weather-daily-emoji {
  font-size: 28px;
  flex-shrink: 0;
  width: 34px;
  text-align: center;
}

/* Low temp */
.weather-daily-lo {
  font-size: 18px;
  color: var(--text-3);
  width: 30px;
  flex-shrink: 0;
  text-align: right;
}

/* Gradient temperature bar */
.weather-daily-bar-wrap {
  flex: 1;
  min-width: 50px;
  height: 7px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.weather-daily-bar-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, #0A84FF, #FF9F0A);
}

/* High temp */
.weather-daily-hi {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  width: 30px;
  flex-shrink: 0;
  text-align: left;
}

/* Wind: arrow + dir + m/s [+ gust] */
.weather-daily-wind {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 130px;
  flex-shrink: 0;
  justify-content: flex-end;
}
.wd-arrow {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1;
}
.wd-label {
  font-size: 15px;
  color: var(--text-2);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.wd-gust {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

/* ── CALENDAR PANEL — Week View ───────────────────────────────────────────── */
#panel-calendar {
  overflow: hidden;
  /* display controlled by .integration-panel / .integration-panel.active */
  flex-direction: column;
  padding: 0;
}

/* Calendar panel-header override: match side padding, reduce bottom gap */
#panel-calendar .panel-header {
  padding: 28px 36px 18px;
  margin-bottom: 0;
}

/* ── Navigation bar ── */
.cal-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 36px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.cal-nav-left  { display: flex; align-items: center; gap: 6px; }
.cal-nav-right { display: flex; align-items: center; gap: 8px; }

.cal-nav-arrow {
  background: none; border: none; color: var(--text-2); cursor: pointer;
  font-size: 28px; line-height: 1; padding: 2px 8px; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.cal-nav-arrow:hover { background: var(--border); color: var(--text); }

.cal-today-btn {
  background: none; border: 1px solid var(--border); color: var(--text-2);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 14px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cal-today-btn:hover { background: var(--border); color: var(--text); }

.cal-week-range {
  font-size: 16px; font-weight: 500; color: var(--text-2);
  margin-left: 6px; white-space: nowrap;
}

.cal-month-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cal-month-toggle-btn:hover,
.cal-month-toggle-btn.active {
  background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent);
}

.cal-add-btn {
  background: var(--accent); color: #fff; border: none;
  font-size: 22px; line-height: 1; font-weight: 300;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
  padding-bottom: 1px;
}
.cal-add-btn:hover  { opacity: 0.85; }
.cal-add-btn:active { transform: scale(0.92); }

/* ── Mini month panel ── */
.cal-mini-month-panel {
  display: none; flex-direction: column;
  padding: 12px 36px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.cal-mini-month-panel.open { display: flex; }

.cal-mini-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.cal-mini-month-label { font-size: 13px; font-weight: 600; color: var(--text); }
.cal-mini-nav {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: 18px; padding: 2px 6px; border-radius: 5px;
  transition: background 0.15s;
}
.cal-mini-nav:hover { background: var(--border); color: var(--text-2); }

.cal-mini-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.cal-mini-weekdays span {
  text-align: center; font-size: 12px; font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
}

.cal-mini-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.mini-blank { }

/* Outer cell: handles in-week row tint + click */
.mini-day {
  display: flex; align-items: center; justify-content: center;
  height: 34px; cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.mini-day:hover { background: var(--border); }
.mini-day.mini-in-week { background: var(--accent-dim); }
.mini-day:hover .mini-day-num { color: var(--text); }

/* Inner number: carries the circle so it's always round */
.mini-day-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 5px;
  font-size: 14px; color: var(--text-2);
}
.mini-day.mini-in-week .mini-day-num { color: var(--accent); font-weight: 500; }
#panel-calendar .mini-day-num.mini-today {
  background: var(--accent); color: #fff;
  font-weight: 700; border-radius: 50%;
}

/* ── Day header row ── */
.cal-week-header-row {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 36px;
}
.cal-time-gutter-header {
  width: 52px; flex-shrink: 0;
}
.cal-day-headers {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-day-header {
  text-align: center; padding: 6px 4px;
  border-left: 1px solid var(--border);
}
.cal-day-name-label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
}
.cal-day-num-label {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300; color: var(--text-2);
  width: 38px; height: 38px; margin-top: 3px;
}
.cal-day-num-label.today-circle {
  background: var(--accent); color: #fff;
  border-radius: 50%; font-weight: 500;
}
.cal-day-header.today .cal-day-name-label { color: var(--accent); }

/* ── All-day row ── */
.cal-allday-row {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  min-height: 28px;
  max-height: 96px;
  overflow: hidden;
  padding: 0 36px;
}
.cal-time-gutter-allday {
  width: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
}
.cal-allday-label {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1; text-align: right;
}
.cal-allday-cells {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 4px 0;
}
.cal-allday-cell {
  min-height: 26px; padding: 1px 3px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; min-width: 0;
}
.cal-allday-event {
  font-size: 12px; font-weight: 500;
  padding: 3px 6px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-allday-more {
  font-size: 11px; color: var(--text-3);
  padding: 1px 4px; cursor: default;
}

/* ── Scrollable time grid ── */
.cal-time-scroll {
  flex: 1; overflow-y: scroll; overflow-x: hidden;
  padding: 8px 36px 24px;
  scrollbar-gutter: stable;  /* always reserves scrollbar space so columns stay aligned with header */
}
.cal-time-scroll::-webkit-scrollbar       { width: 4px; }
.cal-time-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cal-time-inner {
  display: flex; position: relative;
}

.cal-time-labels {
  width: 52px; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.cal-time-label {
  font-size: 12px; color: var(--text-3); text-align: right;
  padding-right: 10px; display: flex; align-items: flex-start;
  margin-top: -7px; box-sizing: border-box;
}

.cal-day-columns {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-day-col {
  position: relative;
  border-left: 1px solid var(--border);
}

/* Hour lines */
.cal-hour-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid var(--border); pointer-events: none;
}

/* Current time indicator */
.cal-now-line {
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--accent);
  pointer-events: none; z-index: 2;
}
.cal-now-line::before {
  content: ''; position: absolute; left: -4px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
}

/* ── Event blocks ── */
.cal-event-block {
  position: absolute;
  border-radius: 6px;
  padding: 5px 7px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 1;
  transition: opacity 0.12s, filter 0.12s;
}
.cal-event-block:hover { opacity: 0.88; filter: brightness(1.1); }

.cal-block-title {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}
.cal-block-time {
  font-size: 12px; opacity: 0.75; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

/* ── Avatars ── */
.cal-avatars {
  display: flex; gap: -4px; margin-top: 3px;
  position: absolute; bottom: 3px; right: 3px;
}
.cal-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0,0,0,0.3);
  margin-left: -4px;
}
.cal-avatars .cal-avatar:first-child { margin-left: 0; }

/* ── Event popup ─────────────────────────────────────────────────────────── */
.cal-event-popup {
  position: fixed;
  z-index: 9999;
  width: 270px;
  background: var(--bg-2, #1c1c1e);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  padding: 16px 18px 14px;
  pointer-events: all;
}

.cal-popup-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 8px;
}
.cal-popup-title {
  font-size: 17px; font-weight: 600; color: var(--text);
  line-height: 1.3; flex: 1;
}
.cal-popup-close {
  background: none; border: none; color: var(--text-3);
  font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1;
  flex-shrink: 0; transition: color 0.15s;
}
.cal-popup-close:hover { color: var(--text); }

.cal-popup-meta {
  font-size: 13px; color: var(--text-2); margin-bottom: 4px;
}
.cal-popup-who {
  font-size: 13px; color: var(--text-3); margin-bottom: 6px;
}
.cal-popup-desc {
  font-size: 13px; color: var(--text-2);
  line-height: 1.5; margin-bottom: 12px;
  word-break: break-word;
}
.cal-popup-link {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all;
}
.cal-popup-link:hover { opacity: 0.8; }

.cal-popup-actions {
  border-top: 1px solid var(--border); padding-top: 12px;
}
.cal-popup-delete {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,69,58,0.12); border: 1px solid rgba(255,69,58,0.25);
  color: #ff6961; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  justify-content: center;
}
.cal-popup-delete:hover {
  background: rgba(255,69,58,0.22); border-color: rgba(255,69,58,0.5);
}
.cal-popup-delete:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.cal-popup-edit {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 8px 12px; border-radius: 8px;
  background: rgba(10,132,255,0.1); border: 1px solid rgba(10,132,255,0.25);
  color: var(--accent, #0a84ff); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  justify-content: center; margin-bottom: 8px;
}
.cal-popup-edit:hover {
  background: rgba(10,132,255,0.2); border-color: rgba(10,132,255,0.5);
}

/* ── Calendar create/edit form modal ─────────────────────────────────────── */
.cal-form-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.45);
}
.cal-form-modal {
  position: fixed; z-index: 10001;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, 92vw);
  background: var(--bg-2, #1c1c1e);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
  padding: 20px 22px 18px;
}
.cal-form-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.cal-form-title {
  font-size: 17px; font-weight: 600; color: var(--text);
}
.cal-form-field {
  margin-bottom: 12px;
}
.cal-form-row {
  display: flex; gap: 12px; margin-bottom: 12px;
}
.cal-form-row .cal-form-field {
  flex: 1; margin-bottom: 0;
}
.cal-form-label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 5px;
}
.cal-form-allday-label {
  display: flex; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-size: 14px;
  color: var(--text-2); cursor: pointer; font-weight: 400;
}
.cal-form-allday-label input[type=checkbox] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #0a84ff);
}
.cal-form-input {
  width: 100%; padding: 9px 11px; border-radius: 8px;
  background: var(--bg-3, #2c2c2e); border: 1px solid var(--border);
  color: var(--text); font-size: 14px;
  outline: none; transition: border-color 0.15s;
  box-sizing: border-box;
  color-scheme: dark;
}
.cal-form-input:focus { border-color: var(--accent, #0a84ff); }
.cal-form-textarea {
  resize: none; min-height: 54px; line-height: 1.45;
}
.cal-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px;
}
.cal-form-btn-cancel {
  padding: 9px 18px; border-radius: 9px;
  background: none; border: 1px solid var(--border);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.15s;
}
.cal-form-btn-cancel:hover { background: var(--border); }
.cal-form-btn-save {
  padding: 9px 22px; border-radius: 9px;
  background: var(--accent, #0a84ff); border: none;
  color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
}
.cal-form-btn-save:hover { opacity: 0.85; }
.cal-form-btn-save:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Drag and drop ───────────────────────────────────────────────────────── */

/* Dragged event block: faded while in flight */
.cal-event-block.dragging,
.cal-allday-event.dragging {
  opacity: 0.35;
}

/* Column highlighted as valid drop target */
.cal-day-col.drag-over {
  background: rgba(10,132,255,0.06);
}
.cal-allday-cell.drag-over {
  background: rgba(10,132,255,0.1);
  border-left-color: var(--accent);
}

/* Drop position indicator line */
.cal-drop-indicator {
  position: fixed;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 0 6px rgba(10,132,255,0.6);
}
.cal-drop-indicator::before {
  content: '';
  position: absolute;
  left: -5px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── LOG PANEL ────────────────────────────────────────────────────────────── */
/* Only override padding — let .integration-panel/.integration-panel.active
   handle display so the panel still hides/shows correctly */
#panel-log { padding: 0; }

/* Log panel header */
#panel-log .panel-header {
  padding: 28px 36px 20px;
  flex-shrink: 0;
}

/* Scrollable list area */
#panel-log .log-scroll {
  flex: 1; overflow-y: auto;
  padding: 0 36px 24px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.log-scroll::-webkit-scrollbar       { width: 3px; }
.log-scroll::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 2px; }

/* ── Announcement entry — 3D surface card ── */
.log-entry {
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;       /* never compress — scroll instead */
  padding: 18px 20px;
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  border-right:  1px solid rgba(0,0,0,0.22);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: log-appear 0.35s cubic-bezier(0.34, 1.1, 0.64, 1);
  overflow: hidden;
}
.log-entry.latest {
  border-top-color: rgba(255,255,255,0.14);
  box-shadow: 0 4px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}

@keyframes log-appear {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Entry header row: source badge + timestamp */
.log-entry-header {
  display: flex; align-items: center; justify-content: space-between;
}

/* Source badge */
.log-source {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.10em;
}

/* Timestamp — now at top-right of card */
.log-time {
  font-size: 15px; font-weight: 300; color: var(--text-3);
  white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Message body — full width below header */
.log-body { display: block; width: 100%; }

.log-text {
  font-size: 20px; font-weight: 300; color: var(--text-2);
  line-height: 1.65;
}
.log-entry.latest .log-text { color: var(--text); font-weight: 400; }
.log-text strong { font-weight: 600; color: var(--text); }
.log-text em     { font-style: italic; }
.log-text code   { font-family: monospace; font-size: 14px; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; }

/* Summary text appended below rich card content — smaller, muted */
.log-text-summary {
  margin-top: 12px;
  font-size: 18px; font-weight: 300; color: var(--text-3); line-height: 1.55;
}

/* From-user label pill (for iMessage entries) */
.log-from-pill {
  display: inline-block;
  font-size: 14px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px; margin-top: 2px;
}

/* User-sent message body — right-aligned bubble */
.log-body-user {
  display: flex;
  justify-content: flex-end;
}
.log-body-user .log-text {
  background: rgba(10,132,255,0.10);
  border: 1px solid rgba(10,132,255,0.18);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 90%;
  color: var(--text);
  font-weight: 400;
}

/* ── Talk-to-Klaus conversation card ── */
.log-conversation {
  flex-shrink: 0;       /* never compress — scroll instead */
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.10);
  border-left:   1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  border-right:  1px solid rgba(0,0,0,0.22);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  animation: log-appear 0.35s cubic-bezier(0.34, 1.1, 0.64, 1);
}
.log-conversation.latest {
  border-top-color: rgba(255,255,255,0.14);
}

/* Conversation card header */
.log-conv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.log-conv-header .log-source { /* reuse badge style */ }
.log-conv-time {
  font-size: 15px; font-weight: 300; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Q&A exchange row */
.conv-exchange {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: 10px;
}
.conv-exchange:last-child { border-bottom: none; }

/* User question — subtle bubble on right */
.conv-q {
  display: flex; justify-content: flex-end;
}
.conv-q::before { /* pill wrapper using CSS */
  content: none; /* JS provides the text, we style differently */
}

/* Actually conv-q is just a div with text — restyle as right-aligned bubble */
.conv-q {
  font-size: 19px; color: var(--text-2); font-style: italic;
  font-weight: 300; line-height: 1.5;
  padding: 9px 14px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  align-self: flex-end;
  max-width: 85%;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Klaus response — left-aligned, slightly brighter */
.conv-a {
  font-size: 20px; color: var(--text-2); line-height: 1.65; font-weight: 300;
  padding: 9px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  align-self: flex-start;
  max-width: 90%;
  border: 1px solid rgba(255,255,255,0.05);
}
.conv-exchange.latest .conv-a {
  color: var(--text); font-weight: 400;
  background: rgba(255,255,255,0.05);
}
.conv-a strong { font-weight: 600; color: var(--text); }
.conv-a em     { font-style: italic; }
.conv-a code   { font-family: monospace; font-size: 14px; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; }

/* Hide old conv-time (timestamp is in the header now) */
.conv-time { display: none; }
/* conv-body is just a passthrough — flex column for q+a */
.conv-body { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* Empty state */
.log-empty {
  padding: 60px 0; text-align: center;
  font-size: 18px; color: var(--text-3); font-style: italic;
  font-weight: 300;
}

/* ── RICH CARDS ───────────────────────────────────────────────────────────── */
/* Scoped to .log-entry (panel-log) and .result-card (activity-feed) to
   prevent these styles from leaking into other integration panels.       */
.log-entry .card-label,
.result-card .card-label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 10px; flex-shrink: 0; }
.log-entry .card-title,
.result-card .card-title { font-size: 22px; font-weight: 500; color: var(--text); margin-bottom: 14px; line-height: 1.3; }
.log-entry .card-section,
.result-card .card-section { margin-top: 14px; }
.log-entry .card-section-heading,
.result-card .card-section-heading { font-size: 14px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.log-entry .card-section-items,
.result-card .card-section-items { display: flex; flex-direction: column; gap: 8px; }
.log-entry .card-section-item,
.result-card .card-section-item { font-size: 18px; color: var(--text-2); line-height: 1.5; padding: 6px 12px; border-left: 2px solid var(--border); border-radius: 0 4px 4px 0; }
.log-entry .card-section-item.event-item,
.result-card .card-section-item.event-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; }
.log-entry .card-event-time,
.result-card .card-event-time  { font-size: 17px; color: var(--accent); font-weight: 500; white-space: nowrap; min-width: 48px; }
.log-entry .card-event-title,
.result-card .card-event-title { font-size: 19px; color: var(--text-2); }
.log-entry .card-weather,
.result-card .card-weather { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin-top: 6px; }
.log-entry .card-weather-icon,
.result-card .card-weather-icon { font-size: 24px; color: var(--accent); }
.log-entry .card-weather-temp,
.result-card .card-weather-temp { font-size: 19px; font-weight: 500; color: var(--text); }
.log-entry .card-weather-desc,
.result-card .card-weather-desc { font-size: 13px; color: var(--text-2); }
.log-entry .card-deals,
.result-card .card-deals { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.log-entry .card-deal,
.result-card .card-deal { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.log-entry .card-deal-img,
.result-card .card-deal-img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--surface); flex-shrink: 0; }
.log-entry .card-deal-info,
.result-card .card-deal-info { flex: 1; min-width: 0; }
.log-entry .card-deal-item,
.result-card .card-deal-item { font-size: 14px; font-weight: 500; color: var(--text); }
.log-entry .card-deal-price,
.result-card .card-deal-price { font-size: 13px; color: var(--accent); font-weight: 600; }
.log-entry .card-deal-store,
.result-card .card-deal-store { font-size: 12px; color: var(--text-3); }
.log-entry .card-deal-discount,
.result-card .card-deal-discount { font-size: 12px; font-weight: 700; color: var(--green); background: rgba(52,199,89,0.12); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.log-entry .card-imessage-images,
.result-card .card-imessage-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.log-entry .card-imessage-img,
.result-card .card-imessage-img { max-width: 100%; max-height: 220px; border-radius: 10px; object-fit: cover; cursor: zoom-in; transition: max-height 0.3s ease; }
.log-entry .card-imessage-img.expanded,
.result-card .card-imessage-img.expanded { max-height: 600px; cursor: zoom-out; border-radius: 12px; }
/* Email (sent by Klaus) */
.log-entry .card-email,
.result-card .card-email { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.log-entry .card-email-meta,
.result-card .card-email-meta { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.log-entry .card-email-to,
.result-card .card-email-to { display: inline-flex; align-items: center; gap: 5px; }
.log-entry .card-email-to .bi,
.result-card .card-email-to .bi { font-size: 13px; color: var(--accent); }
.log-entry .card-email-subject,
.result-card .card-email-subject { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.3; }
.log-entry .card-email-body-wrap,
.result-card .card-email-body-wrap { font-size: 13px; color: var(--text-2); }
.log-entry .card-email-preview,
.result-card .card-email-preview { cursor: pointer; list-style: none; padding: 4px 0; color: var(--text-2); line-height: 1.4; }
.log-entry .card-email-preview::-webkit-details-marker,
.result-card .card-email-preview::-webkit-details-marker { display: none; }
.log-entry .card-email-preview::before,
.result-card .card-email-preview::before { content: "▸ "; color: var(--text-3); margin-right: 2px; }
.log-entry details[open] .card-email-preview::before,
.result-card details[open] .card-email-preview::before { content: "▾ "; }
.log-entry .card-email-body,
.result-card .card-email-body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-2); background: var(--surface); border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.log-entry .card-links,
.result-card .card-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.log-entry .card-link,
.result-card .card-link { font-size: 13px; color: var(--accent); text-decoration: none; background: var(--accent-dim); border-radius: 6px; padding: 4px 10px; border: 1px solid rgba(10,132,255,0.15); display: inline-flex; align-items: center; gap: 4px; }
.log-entry .card-link .bi,
.result-card .card-link .bi { font-size: 13px; }
.log-entry .card-actions,
.result-card .card-actions { display: flex; gap: 6px; margin-top: 8px; }
.log-entry .card-send-btn,
.result-card .card-send-btn { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.log-entry .card-send-btn .bi,
.result-card .card-send-btn .bi { font-size: 14px; }
.log-entry .card-send-btn.sent,
.result-card .card-send-btn.sent { color: var(--green); border-color: rgba(52,199,89,0.3); }
.log-entry .card-draft,
.result-card .card-draft { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; margin-top: 10px; font-size: 16px; color: var(--text-2); line-height: 1.5; font-style: italic; border-left: 3px solid var(--accent); }
/* ── ACTIVITY FEED (result cards as live overlay) ───────────────────────── */
#activity-feed {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.result-card {
  background: rgba(20,20,26,0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 18px;
  padding: 20px 22px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.06);
  pointer-events: all;
  animation: rc-slide-in 0.38s cubic-bezier(0.22,1,0.36,1) both;
  position: relative;
  overflow: hidden;
}
.result-card.rc-dismissing {
  animation: rc-slide-out 0.3s ease-in forwards;
}
@keyframes rc-slide-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes rc-slide-out {
  from { opacity: 1; transform: translateY(0)    scale(1); max-height: 200px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateY(-12px) scale(0.96); max-height: 0; margin-bottom: -10px; padding: 0; }
}
/* Auto-dismiss progress bar */
.result-card__timer {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 18px 18px;
  animation: rc-timer linear forwards;
  transform-origin: left;
}
@keyframes rc-timer {
  from { width: 100%; }
  to   { width: 0%; }
}
.result-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.result-card__source {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.result-card__close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.result-card__close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.result-card__title {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.25;
}
.result-card__snippet {
  font-size: 16px;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
  margin-bottom: 14px;
  font-weight: 300;
}
.result-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  background: rgba(10,132,255,0.12);
  border: 1px solid rgba(10,132,255,0.3);
  border-radius: 8px;
  padding: 7px 14px;
  transition: background 0.15s;
}
.result-card__link:hover { background: rgba(10,132,255,0.2); }

/* ── CLOCK PANEL ──────────────────────────────────────────────────────────── */
.clock-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 0 20px 20px;
  gap: 18px;
}

/* Flip-clock hero */
.clock-flip-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}

/* Row holding the two flip panels + colon + seconds */
.clock-flip-display {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Each HH / MM card */
.flip-panel {
  position: relative;
  width: 192px;
  height: 168px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.7),
    0 2px 6px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Top half — slightly warmer dark, shows digit's upper portion */
.flip-upper {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, #242424, #1e1e1e);
  border-radius: 12px 12px 0 0;
}
.flip-upper::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.45));
  pointer-events: none;
}

/* Bottom half — slightly cooler dark, shows digit's lower portion */
.flip-lower {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, #161616, #1a1a1a);
  border-radius: 0 0 12px 12px;
}
.flip-lower::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to top, transparent, rgba(0,0,0,0.35));
  pointer-events: none;
}

/* The digit — renders at full panel height inside both halves */
/* In flip-upper: anchored top → shows upper half of digit */
.flip-upper .flip-num {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 200%;   /* extends to full panel height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 138px;
  font-weight: 900;
  color: #f5f5f5;
  font-variant-numeric: tabular-nums;
  letter-spacing: -4px;
  line-height: 1;
  user-select: none;
}
/* In flip-lower: anchored bottom → shows lower half of digit */
.flip-lower .flip-num {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 138px;
  font-weight: 900;
  color: #f5f5f5;
  font-variant-numeric: tabular-nums;
  letter-spacing: -4px;
  line-height: 1;
  user-select: none;
}

/* The fold/crease line */
.flip-crease {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 3px;
  background: #000;
  transform: translateY(-50%);
  z-index: 10;
}

/* Colon between HH and MM */
.flip-colon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 44px;
  height: 168px;
}
.flip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

/* Date row below the flip display */
.clock-flip-date {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Dot world map */
.clock-map-wrap {
  flex: 1;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b13;
  min-height: 200px;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.35);
}
#clock-map-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.clock-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-3);
  pointer-events: none;
}

/* City time cards */
.clock-cities {
  display: flex;
  gap: 8px;
}
.clock-city-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.28);
}
/* home card — no special colour, same as others */
.clock-city-name {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clock-city-time {
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.clock-city-region {
  font-size: 13px;
  color: var(--text-3);
}

/* ── NOTIFICATION POPUP ───────────────────────────────────────────────────── */
#queue-section { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notif-popup {
  /* Drop below the panel-nav-row bell, aligned within the left panel */
  position: fixed;
  top: calc(var(--header-h) + 76px);     /* header (50px) + nav-row (70px) + gap (6px) */
  right: calc(100vw - var(--left-w) + 14px); /* right edge lines up with bell button */
  width: 340px; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7); z-index: 500;
  overflow: hidden; animation: slide-down 0.2s ease;
}
.notif-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.notif-popup-title { font-size: 14px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; }
.notif-close { background: none; border: none; color: var(--text-3); font-size: 19px; cursor: pointer; line-height: 1; transition: color 0.15s; }
.notif-popup-body { max-height: 280px; overflow-y: auto; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.notif-empty { text-align: center; padding: 20px; font-size: 16px; color: var(--text-3); font-style: italic; }
.queue-item { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; animation: fade-in 0.3s ease; }
.queue-reason { font-size: 12px; font-weight: 600; color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; }
.queue-text   { font-size: 14px; color: var(--text-2); line-height: 1.45; font-weight: 300; }
.queue-sub    { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.queue-empty  { text-align: center; padding: 12px; font-size: 14px; color: var(--text-3); font-style: italic; }

/* ── NOT-NOW BANNER ───────────────────────────────────────────────────────── */
#not-now-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900; display: flex; justify-content: center;
  animation: slide-down 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.not-now-inner {
  display: flex; align-items: center; gap: 14px;
  /* Same dark-glass pill as tiles/button */
  background: #18181D;
  border-top: none;
  border-left:   1px solid rgba(255,255,255,0.10);
  border-right:  1px solid rgba(0,0,0,0.30);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: 12px 22px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  min-width: 320px; max-width: 520px;
}

/* Bell icon bubble */
.not-now-icon-wrap {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3);
  border-top:  1px solid rgba(255,255,255,0.12);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  border-right:  1px solid rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.not-now-icon-wrap .bi {
  font-size: 17px; color: var(--amber);
}

.not-now-msg {
  flex: 1;
  font-size: 17px; font-weight: 300; color: var(--text);
  white-space: nowrap; letter-spacing: 0.01em;
}

/* Right side: button + countdown */
.not-now-right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

.not-now-btn {
  /* 3D dark pill — same family as Talk to Klaus */
  background: #13131A;
  border-top:    1px solid rgba(255,255,255,0.09);
  border-left:   1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  border-right:  1px solid rgba(0,0,0,0.30);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400;
  padding: 8px 18px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  letter-spacing: 0.02em;
  transition: color 0.15s, box-shadow 0.15s;
}
.not-now-btn:hover { color: var(--text); box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.not-now-btn:active { transform: scale(0.97); }

.not-now-count {
  font-size: 16px; font-weight: 300; color: var(--text-3);
  min-width: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── STATE VALS ───────────────────────────────────────────────────────────── */
.state-val.amber { color: var(--amber); }
.state-val.green { color: var(--green); }

/* ── SECTION LABELS ───────────────────────────────────────────────────────── */
.k-section-label {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 12px;
}

/* ── ANIMATIONS ───────────────────────────────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 2px; }

/* ── SPOTIFY INTEGRATION ─────────────────────────────────────────────────── */

/* Spotify tile — gray when inactive, green when active */
.k-int-icon-bubble--spotify { background: var(--surface-3); color: var(--text-3); }
.k-int-tile--spotify.active .k-int-icon-bubble--spotify { background: rgba(29,185,84,0.2); color: #1DB954; }

/* Spotify panel — header sits above the full-bleed canvas */
#panel-spotify {
  padding: 0;
  background: #080808;
  position: relative;
}
#panel-spotify > .panel-header {
  padding: 28px 36px 18px;
  margin-bottom: 0;
  flex-shrink: 0;
  background: #080808;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative; z-index: 10;
}

/* ── No-device banner (iOS explanation) ── */
#sp-no-device-banner {
  position: absolute; left: 16px; right: 16px; bottom: 90px; z-index: 20;
  animation: sp-slide-up 0.25s ease;
}
@keyframes sp-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-ndb-body {
  background: rgba(22,22,22,0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.sp-ndb-icon { font-size: 20px; }
.sp-ndb-text { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.sp-ndb-text strong { color: #fff; }
.sp-ndb-actions { display: flex; gap: 8px; }
.sp-ndb-btn {
  flex: 1; background: #1DB954; color: #000; font-weight: 700;
  border: none; border-radius: 20px; padding: 9px 12px;
  font-size: 12px; cursor: pointer;
  transition: background 0.15s;
}
.sp-ndb-btn:hover { background: #1ed760; }
.sp-ndb-dismiss {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
  border: none; border-radius: 20px; padding: 9px 12px;
  font-size: 12px; cursor: pointer;
  transition: background 0.15s;
}
.sp-ndb-dismiss:hover { background: rgba(255,255,255,0.18); }

/* ── Spotify panel (full-bleed layout) ── */
#panel-spotify {
  padding: 0;
  background: #080808;
  position: relative;
}

/* Connect prompt — flex child below the header */
.sp-connect-prompt {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  padding: 40px; text-align: center;
}
.sp-connect-icon { opacity: 0.95; }
.sp-connect-text { color: rgba(255,255,255,0.55); font-size: 14px; max-width: 260px; line-height: 1.5; }
.sp-connect-btn {
  background: #1DB954; color: #000; font-weight: 700;
  border: none; border-radius: 24px;
  padding: 8px 18px; font-size: 13px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.sp-connect-btn:hover:not(.sp-connect-btn--disconnect) { background: #1ed760; transform: scale(1.03); }
.sp-connect-btn--disconnect {
  background: rgba(255,59,48,0.12); color: #ff3b30;
  border: 1px solid rgba(255,59,48,0.25);
}
#panel-spotify .sp-connect-btn--disconnect:hover { background: rgba(255,59,48,0.22); transform: none; }

/* Per-user connect rows */
.sp-user-connect-list {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 260px;
}
.sp-user-connect-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.06); border-radius: 12px;
  padding: 10px 14px;
}
.sp-user-connect-info { display: flex; align-items: center; gap: 9px; }
.sp-user-connect-name { color: #fff; font-size: 14px; font-weight: 500; }
.sp-user-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2); flex-shrink: 0;
  transition: background 0.25s;
}
.sp-user-dot.connected { background: #1DB954; }

/* User switcher pill (panel header) */
.sp-user-switcher {
  display: flex; gap: 3px;
  background: rgba(255,255,255,0.08); border-radius: 20px; padding: 3px;
}
.sp-user-pill {
  background: transparent; border: none;
  color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 600;
  padding: 5px 14px 5px 8px; border-radius: 20px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap; display: flex; align-items: center;
}
.sp-user-pill.active { background: rgba(255,255,255,0.18); color: #fff; }
.sp-user-pill:hover:not(.active) { color: rgba(255,255,255,0.78); }
.sp-pill-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; margin-right: 7px;
  opacity: 0; transition: opacity 0.2s;
}
.sp-pill-avatar.loaded { opacity: 1; }

/* Gear button in panel header */
.sp-header-gear {
  background: transparent; border: none;
  color: var(--text-3); font-size: 15px;
  padding: 4px 2px; cursor: pointer; line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}
.sp-header-gear:hover { color: var(--text); }

/* Settings overlay */
.sp-settings-overlay {
  position: absolute; inset: 0; z-index: 25;
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 16px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.sp-settings-overlay.open { display: flex; }
.sp-settings-card {
  background: #1c1c1e; border-radius: 16px;
  width: calc(100% - 32px); max-width: 320px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.sp-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sp-settings-title {
  color: #fff; font-size: 14px; font-weight: 600;
}
.sp-settings-close {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.sp-settings-close:hover { background: rgba(255,255,255,0.18); }
.sp-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sp-settings-row:last-child { border-bottom: none; }
.sp-settings-row-actions { display: flex; gap: 8px; align-items: center; }
.sp-settings-disconnect-btn {
  background: rgba(255,59,48,0.12); color: #ff3b30;
  border: 1px solid rgba(255,59,48,0.25); border-radius: 14px;
  font-size: 12px; font-weight: 600; padding: 4px 12px; cursor: pointer;
  transition: background 0.15s;
}
.sp-settings-disconnect-btn:hover { background: rgba(255,59,48,0.22); }
.sp-settings-connect-btn {
  background: rgba(29,185,84,0.12); color: #1DB954;
  border: 1px solid rgba(29,185,84,0.25); border-radius: 14px;
  font-size: 12px; font-weight: 600; padding: 4px 12px; cursor: pointer;
  transition: background 0.15s;
}
.sp-settings-connect-btn:hover { background: rgba(29,185,84,0.22); }

/* Main canvas — flex child below the header */
.sp-body {
  flex: 1; position: relative;
  overflow: hidden; background: #080808;
}

/* Full-bleed album art */
.sp-art-wrap {
  position: absolute; inset: 0;
}
.sp-art {
  width: 100%; height: 100%; object-fit: cover;
  display: none; transition: opacity 0.6s;
}
.sp-art.loaded { display: block; }
.sp-art-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.08); font-size: 96px;
}
.sp-art-placeholder.hidden { display: none; }

/* Top bar: just device label floating over canvas */
.sp-top-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 18px 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
  pointer-events: none;
}
.sp-top-bar * { pointer-events: auto; }
.sp-device-label {
  font-size: 11px; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.sp-device-label:not(:empty)::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #1DB954; flex-shrink: 0;
}

/* Bottom controls overlay */
.sp-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.45) 20%,
    rgba(0,0,0,0.82) 52%,
    rgba(0,0,0,0.96) 80%,
    #000 100%
  );
  padding: 52px 24px 28px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Track info */
.sp-track-info { display: flex; flex-direction: column; gap: 4px; }
.sp-track-name {
  font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sp-track-artist {
  font-size: 14px; color: rgba(255,255,255,0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-device-hint {
  font-size: 10px; color: rgba(255,255,255,0.38);
  text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px;
}

/* Progress bar */
.sp-progress-wrap {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.sp-time {
  font-size: 10px; color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums; min-width: 28px;
}
.sp-progress-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.2);
  border-radius: 2px; position: relative; cursor: pointer;
  transition: height 0.15s, margin-top 0.15s;
}
.sp-progress-bar:hover { height: 5px; margin-top: -1px; }
.sp-progress-fill {
  height: 100%; background: #fff; border-radius: 2px;
  width: 0%; transition: width 1s linear;
}
.sp-progress-bar:hover .sp-progress-fill { background: #1DB954; }
.sp-progress-thumb {
  position: absolute; top: 50%;
  width: 12px; height: 12px; background: #fff;
  border-radius: 50%; transform: translate(-50%,-50%);
  opacity: 0; transition: opacity 0.15s;
  left: calc(var(--progress, 0) * 1%);
}
.sp-progress-bar:hover .sp-progress-thumb { opacity: 1; }

/* Controls */
.sp-controls {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sp-ctrl-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.65); font-size: 20px;
  cursor: pointer; padding: 0;
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s, transform 0.1s;
}
.sp-ctrl-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sp-ctrl-btn.active { color: #1DB954; }
.sp-ctrl-sm { font-size: 16px; color: rgba(255,255,255,0.5); }
#panel-spotify .sp-ctrl-play {
  background: #fff; color: #000;
  width: 52px; height: 52px; font-size: 24px; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#panel-spotify .sp-ctrl-play:hover { background: rgba(255,255,255,0.88); transform: scale(1.06); }

/* Volume */
.sp-volume-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.sp-vol-icon { font-size: 13px; color: rgba(255,255,255,0.35); }
.sp-volume-slider {
  flex: 1; appearance: none; height: 3px;
  background: rgba(255,255,255,0.2); border-radius: 2px;
  cursor: pointer; outline: none;
}
.sp-volume-slider::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px;
  background: #fff; border-radius: 50%; cursor: pointer;
}

/* Browse pills */
.sp-browse-btns { display: flex; gap: 8px; width: 100%; }
.sp-browse-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 20px; color: rgba(255,255,255,0.82);
  font-size: 12px; font-weight: 600; padding: 10px 4px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.sp-browse-btn:hover { background: rgba(255,255,255,0.19); border-color: rgba(255,255,255,0.28); }
.sp-browse-btn:active { transform: scale(0.97); }

/* Browse overlay (slides up) */
.sp-browse-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(12,12,12,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(101%);
  transition: transform 0.34s cubic-bezier(0.32,0.72,0,1);
}
.sp-browse-overlay.open { transform: translateY(0); }

.sp-browse-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.sp-back-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.sp-back-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sp-browse-title { font-size: 15px; font-weight: 600; color: #fff; }

.sp-tab-content { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
.sp-tab-content.active { display: flex; }
.sp-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.sp-list-loading, .sp-list-empty {
  padding: 24px 20px; color: rgba(255,255,255,0.3); font-size: 13px; text-align: center;
}

/* Playlist rows */
.sp-playlist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; cursor: pointer;
  border-radius: 8px; margin: 0 8px;
  transition: background 0.12s;
}
.sp-playlist-row:hover { background: rgba(255,255,255,0.07); }
.sp-playlist-row.sp-active { background: rgba(29,185,84,0.12); }
.sp-playlist-art {
  width: 42px; height: 42px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06);
}
.sp-playlist-art-placeholder {
  width: 42px; height: 42px; border-radius: 6px;
  background: rgba(255,255,255,0.06); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25); font-size: 16px;
}
.sp-row-info { flex: 1; min-width: 0; }
.sp-row-name {
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-row-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.sp-row-play { color: rgba(255,255,255,0.3); font-size: 18px; opacity: 0; transition: opacity 0.12s; }
.sp-playlist-row:hover .sp-row-play { opacity: 1; }
.sp-playlist-row.sp-active .sp-row-play { opacity: 1; color: #1DB954; }

/* Track rows */
.sp-track-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px; cursor: pointer;
  border-radius: 8px; margin: 0 8px;
  transition: background 0.12s;
}
.sp-track-row:hover { background: rgba(255,255,255,0.07); }
.sp-track-row.sp-active { background: rgba(29,185,84,0.12); }
.sp-track-art {
  width: 38px; height: 38px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06);
}
.sp-track-art-placeholder {
  width: 38px; height: 38px; border-radius: 4px;
  background: rgba(255,255,255,0.06); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25); font-size: 13px;
}
.sp-track-duration {
  font-size: 12px; color: rgba(255,255,255,0.3);
  font-variant-numeric: tabular-nums; margin-left: auto; flex-shrink: 0;
}

/* Search bar */
/* Search bar */
.sp-search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sp-search-icon { color: var(--text-3); font-size: 14px; }
.sp-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.sp-search-input::placeholder { color: var(--text-3); }

/* Search result section headers */
.sp-search-section-label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 10px 20px 4px;
}

/* ── Language Learning Panel ─────────────────────────────────────────── */

/* Panel wrapper — needs relative for confetti canvas */
/* ll-panel: only adds positioning context — display controlled by .integration-panel rules */
.ll-panel { position: relative; overflow: hidden; }
.ll-panel.active { display: flex; flex-direction: column; }

/* Scrollable inner body */
.ll-scroll-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

/* ── Session Progress Bar (top of panel, only when session active) ────── */
.ll-session-progress-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px 14px;
  margin: -20px -20px 20px;          /* bleed to panel edges */
  display: flex; align-items: center; gap: 14px;
}
.ll-sp-label {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap; min-width: 80px;
}
.ll-sp-track { flex: 1; }
.ll-sp-nodes {
  display: flex; align-items: center; gap: 6px;
}
.ll-sp-node {
  flex: 1; height: 8px; border-radius: 100px;
  background: var(--surface-3);
  transition: background 0.4s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.4s ease;
}
.ll-sp-node.done {
  background: #58CC02;
  box-shadow: 0 0 8px rgba(88,204,2,0.5);
}
.ll-sp-node.current {
  background: linear-gradient(90deg, #58CC02 0%, #89E219 100%);
  box-shadow: 0 0 10px rgba(88,204,2,0.6);
  animation: ll-pulse 1.4s ease-in-out infinite;
}
@keyframes ll-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 8px rgba(88,204,2,0.4); }
  50%      { opacity: 0.85; box-shadow: 0 0 16px rgba(88,204,2,0.7); }
}
.ll-sp-lang { font-size: 18px; }

/* ── Hero Streak Cards ────────────────────────────────────────────────── */
.ll-heroes {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.ll-hero {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; flex-direction: row; align-items: center;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ll-hero:hover { border-color: var(--border-2); }
.ll-hero.ll-hero--active {
  border-color: rgba(88,204,2,0.4);
  box-shadow: 0 0 20px rgba(88,204,2,0.1);
}

/* Left column: avatar */
.ll-hero-left { flex-shrink: 0; }

/* Right column: all text + bar + button */
.ll-hero-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}

/* Name + lang flag row */
.ll-hero-identity {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 1px;
}

/* Streak row: big number + label inline */
.ll-hero-streak-row {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px;
}

/* Avatar photo ring (replaces fire emoji ring) */
.ll-hero-avatar-wrap {
  width: 68px; height: 68px; border-radius: 50%;
  border: 3px solid var(--surface-3);
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.ll-hero-avatar-wrap.active {
  border-color: #FF9500;
  box-shadow: 0 0 0 4px rgba(255,149,0,0.2), 0 0 22px rgba(255,149,0,0.3);
  animation: ll-ring-pulse 2s ease-in-out infinite;
}
.ll-hero-avatar-wrap--bina.active {
  border-color: #1CB0F6;
  box-shadow: 0 0 0 4px rgba(28,176,246,0.2), 0 0 22px rgba(28,176,246,0.25);
  animation: ll-ring-pulse-bina 2s ease-in-out infinite;
}
@keyframes ll-ring-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,149,0,0.15), 0 0 20px rgba(255,149,0,0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(255,149,0,0.25), 0 0 28px rgba(255,149,0,0.4); }
}
@keyframes ll-ring-pulse-bina {
  0%,100% { box-shadow: 0 0 0 4px rgba(28,176,246,0.15), 0 0 20px rgba(28,176,246,0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(28,176,246,0.25), 0 0 28px rgba(28,176,246,0.35); }
}
.ll-hero-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fire badge — bottom-right corner of avatar */
.ll-hero-fire-badge {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 18px; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  pointer-events: none;
}
/* Name label */
.ll-hero-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: 0.01em;
}

/* Streak number — count-up animation ready */
.ll-hero-num {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 900;
  color: var(--text); line-height: 1;
  letter-spacing: -0.5px;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ll-hero-num.bump { animation: ll-bump 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes ll-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.ll-hero-label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ll-hero-lang { font-size: 13px; color: var(--text-2); }

/* XP bar inside hero */
.ll-xp-wrap { width: 100%; margin-bottom: 6px; }
.ll-xp-track {
  width: 100%; height: 8px; border-radius: 100px;
  background: var(--surface-3);
  overflow: hidden; position: relative;
}
.ll-xp-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #58CC02, #89E219);
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
/* Shimmer sweep on XP fill */
.ll-xp-fill::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: ll-shimmer 2.2s ease-in-out infinite;
}
.ll-xp-fill--bina {
  background: linear-gradient(90deg, #1CB0F6, #5CC8FF);
}
@keyframes ll-shimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}
.ll-xp-label { font-size: 12px; color: var(--text-2); text-align: right; margin-top: 3px; }

/* Play button — Duolingo 3D pill style */
.ll-play-btn {
  width: 100%;
  background: #58CC02;
  border: none;
  border-bottom: 4px solid #46A302;
  border-radius: 100px;
  color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 10px 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 0.1s, border-bottom-width 0.1s, background 0.15s;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ll-play-btn:hover  { background: #61D900; }
.ll-play-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}
.ll-play-btn--bina  { background: #1CB0F6; border-bottom-color: #15A0DC; }
.ll-play-btn--bina:hover { background: #30BBF8; }
.ll-play-btn.disabled {
  background: var(--surface-3); border-bottom-color: var(--surface-3);
  color: var(--text-3); cursor: not-allowed;
}

/* ── Stats Row ────────────────────────────────────────────────────────── */
.ll-stats-row {
  display: flex; gap: 10px; margin-bottom: 20px;
}
.ll-stat-pill {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ll-stat-icon { font-size: 16px; margin-bottom: 2px; }
.ll-stat-icon--xp   { color: #FFD700; }
.ll-stat-icon--sess { color: #1CB0F6; }
.ll-stat-icon--best { color: #FF9500; }
.ll-stat-val {
  font-size: 22px; font-weight: 800; color: var(--text); line-height: 1;
}
.ll-stat-label { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Section headers ──────────────────────────────────────────────────── */
.ll-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ll-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.ll-empty {
  font-size: 14px; color: var(--text-2); padding: 10px 0;
  text-align: center; font-style: italic;
}

/* ── Session cards ────────────────────────────────────────────────────── */
.ll-sessions-list, .ll-mistakes-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 22px;
}
.ll-session-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex; gap: 12px;
  transition: border-color 0.15s;
  animation: ll-fade-in 0.3s ease forwards;
}
.ll-session-row:hover { border-color: var(--border-2); }
@keyframes ll-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Left strip — colored by language */
.ll-session-strip {
  width: 4px; border-radius: 100px; flex-shrink: 0;
  background: #58CC02;
}
.ll-session-strip--bina { background: #1CB0F6; }

.ll-session-body { flex: 1; min-width: 0; }
.ll-session-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px; gap: 8px;
}
.ll-session-who {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.ll-session-date { font-size: 13px; color: var(--text-2); flex-shrink: 0; }
.ll-session-tags { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.ll-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 3px 10px; border-radius: 100px;
}
.ll-tag--lang  { background: rgba(88,204,2,0.15);  color: #58CC02; }
.ll-tag--bina  { background: rgba(28,176,246,0.15); color: #1CB0F6; }
.ll-tag--count { background: var(--surface-3); color: var(--text); }
.ll-tag--xp    { background: rgba(255,215,0,0.12); color: #FFD700; }
.ll-session-summary {
  font-size: 13px; color: var(--text); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Shared small row avatar (sessions + mistakes) ────────────────────── */
.ll-row-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid #58CC02;
  display: inline-block; vertical-align: middle;
}
.ll-row-avatar--bina { border-color: #1CB0F6; }
.ll-session-flag { font-size: 14px; }

/* ── Klaus Coach Callout (Lily-style) ─────────────────────────────────── */
.ll-coach-card {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  animation: ll-fade-in 0.4s ease forwards;
}
.ll-coach-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--border-2);
}
.ll-coach-bubble {
  flex: 1;
  background: var(--surface-3);
  border-radius: 0 12px 12px 12px;
  padding: 9px 12px;
  position: relative;
}
.ll-coach-bubble::before {
  content: '';
  position: absolute; top: 10px; left: -7px;
  border: 7px solid transparent;
  border-right-color: var(--surface-3);
  border-left: 0;
}
.ll-coach-text {
  font-size: 14px; color: var(--text); line-height: 1.5;
}

/* ── Mistake cards (redesigned — clean flex layout) ───────────────────── */
.ll-mistake-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  display: flex; flex-direction: column; gap: 7px;
  animation: ll-fade-in 0.3s ease forwards;
}
.ll-mistake-header {
  display: flex; align-items: center; gap: 7px;
}
.ll-mistake-user-label {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.ll-mistake-correction {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
/* Inline icon badges (replace old full-height icons) */
.ll-mistake-icon-inline {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}
.ll-mistake-icon--wrong  { background: rgba(255,75,75,0.15); color: #FF4B4B; }
.ll-mistake-icon--right  { background: rgba(88,204,2,0.15);  color: #58CC02; }
.ll-mistake-wrong  { font-size: 15px; color: #FF4B4B; font-weight: 500; }
.ll-mistake-right  { font-size: 15px; color: #58CC02; font-weight: 600; }
.ll-mistake-arrow  { font-size: 14px; color: var(--text-2); margin: 0 4px; }
.ll-mistake-tip    { font-size: 13px; color: var(--text-2); line-height: 1.5; padding-top: 6px; border-top: 1px solid var(--border); }

/* ── Mistakes filter toggles ─────────────────────────────────────────── */
.ll-filter-btns {
  display: flex; gap: 5px;
}
.ll-filter-btn {
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.07em;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ll-filter-btn:hover { border-color: var(--border-2); color: var(--text); }
.ll-filter-btn.ll-filter-btn--active {
  background: rgba(88,204,2,0.15); border-color: rgba(88,204,2,0.4);
  color: #58CC02;
}
.ll-filter-btn--bina.ll-filter-btn--active {
  background: rgba(28,176,246,0.15); border-color: rgba(28,176,246,0.4);
  color: #1CB0F6;
}

/* ── Mistake delete button ───────────────────────────────────────────── */
.ll-mistake-delete {
  margin-left: auto; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); font-size: 13px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: 'Inter', sans-serif;
  pointer-events: auto; /* ensure clicks register even in animated parent */
  -webkit-tap-highlight-color: transparent;
}
.ll-mistake-delete:hover {
  background: rgba(255,75,75,0.12); border-color: #FF4B4B; color: #FF4B4B;
}
.ll-mistake-delete:active {
  background: rgba(255,75,75,0.22); transform: scale(0.9);
}

/* ══════════════════════════════════════════════════════
   LOCAL DEALS PANEL
════════════════════════════════════════════════════════ */

/* Active-tile accent color for the Local Deals integration tile */
[data-integration="local-deals"].active .k-int-icon-bubble { background: rgba(255,159,10,0.18); }
[data-integration="local-deals"].active .k-int-icon-bubble .bi { color: #FF9F0A; }

.ld-panel {
  padding: 0;
  position: relative;
}
.ld-panel > .panel-header {
  padding: 28px 36px 18px;
  margin-bottom: 0;
}

/* Small stats line rendered inside the filter bar (replaces the old H1 hero) */
.ld-stats-line {
  font-size: 12px; color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Filter bar — sticky below hero */
.ld-filter-bar {
  position: sticky; top: 0;
  z-index: 5;
  padding: 14px 36px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
}
.ld-filter-search {
  position: relative;
}
.ld-filter-search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; color: var(--text-3);
  pointer-events: none;
}
.ld-search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 12px 14px 12px 40px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.ld-search-input::placeholder { color: var(--text-3); }
.ld-search-input:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}

.ld-filter-controls {
  display: flex; gap: 14px; align-items: flex-end;
  flex-wrap: wrap;
}
.ld-filter-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3);
  font-weight: 500;
  flex: 1 1 140px;
}
.ld-filter-label span { user-select: none; }
.ld-filter-label select {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238E8E93' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ld-filter-label select:focus { border-color: var(--accent); }

/* Scrollable grid */
.ld-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 36px 36px;
}
.ld-scroll::-webkit-scrollbar { width: 6px; }
.ld-scroll::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 3px;
}
.ld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.ld-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-size: 16px;
  font-weight: 400;
}

/* Deal card */
.ld-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-top:    1px solid rgba(255,255,255,0.08);
  border-left:   1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  border-right:  1px solid rgba(0,0,0,0.30);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ld-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
}

.ld-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #2a2a30 0%, #1f1f23 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ld-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* Fallback category image — slightly dimmed so it reads as generic, and a
   faint "stock" tag in the bottom-right so users know it's not the real one. */
.ld-card-img--fallback {
  opacity: 0.62;
  filter: saturate(0.85);
}
.ld-card-image:has(.ld-card-img--fallback)::after {
  content: "stock";
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 2px 7px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(20,20,24,0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.ld-placeholder {
  color: var(--text-2);
  font-size: 17px; font-weight: 500;
  text-align: center;
  padding: 24px 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Tiny store logo overlay — top-left of the card image. Transparent,
   no pill, no background. Just the logo. The extra `.ld-card-image` in
   the selector is required to out-specific `.ld-card-image img` (which
   sets width/height to 100% for product photos) — without it the logo
   stretches to fill the whole card. */
.ld-card-image img.ld-store-logo-overlay {
  position: absolute;
  top: 6px; left: 6px;
  width: 20px; height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7))
          drop-shadow(0 0 2px rgba(0,0,0,0.5));
  pointer-events: none;
  z-index: 2;
}
/* Text fallback used only when we don't have a logo file for the store */
.ld-store-logo-overlay--text {
  position: absolute;
  top: 6px; left: 6px;
  padding: 3px 7px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20,20,24,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  z-index: 2;
}
/* Inline logo used in the meta row next to the store address */
.ld-store-logo-inline {
  width: 16px; height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Discount badge (top-right of image) */
.ld-discount-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: #FF3B30;
  box-shadow: 0 2px 8px rgba(255,59,48,0.4);
}
.ld-discount-badge--super {
  background: #FF9500;
  box-shadow: 0 2px 10px rgba(255,149,0,0.55), 0 0 0 2px rgba(255,149,0,0.25);
  font-size: 14px;
}

/* Card body */
.ld-card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
}
.ld-item-name {
  font-size: 17px; font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* clamp to 2 lines */
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  min-height: 44px;
}

.ld-price-row {
  display: flex; align-items: baseline;
  gap: 10px;
}
.ld-price {
  font-size: 28px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ld-price-unit {
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  margin-left: 2px;
}
.ld-original-price {
  font-size: 14px; font-weight: 500;
  color: var(--text-3);
  text-decoration: line-through;
}

.ld-meta {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ld-meta-store-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
  font-weight: 500;
  line-height: 1.3;
}
.ld-meta-store-row .ld-meta-addr {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-meta-date {
  font-size: 11px; color: var(--text-3);
}
.ld-meta-link {
  font-size: 12px; font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.ld-meta-link:hover { text-decoration: underline; }

/* Add-to-shopping-list button — sits at bottom-right of the card body */
.ld-add-to-sl {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 36px; height: 36px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10,132,255,0.45);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink: 0;
}
.ld-add-to-sl:hover {
  background: #1a8fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(10,132,255,0.6);
}
.ld-add-to-sl--adding {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
.ld-add-to-sl--done {
  background: #34c759;
  box-shadow: 0 2px 8px rgba(52,199,89,0.45);
  cursor: default;
}
.ld-add-to-sl--error {
  background: #ff453a;
  box-shadow: 0 2px 8px rgba(255,69,58,0.45);
}


/* ══════════════════════════════════════════════════════════════════════════
   FAMILY COOKBOOK
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Panel shell ─────────────────────────────────────────────────────────── */
.cb-panel {
  /* display: none/flex controlled by .integration-panel / .integration-panel.active */
  overflow: hidden;
}

.cb-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cb-subnav {
  display: flex;
  gap: 6px;
}

.cb-subnav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.cb-subnav-btn.active,
.cb-subnav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Views ───────────────────────────────────────────────────────────────── */
.cb-view {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.cb-view.active { display: flex; flex-direction: column; }
/* Builder needs overflow:hidden so BOTH columns scroll independently, not the view */
.cb-view.active:has(.cb-builder-layout) { overflow: hidden; }

/* ══ COOKBOOK VIEW ══════════════════════════════════════════════════════════ */

/* ── Search bar ──────────────────────────────────────────────────────────── */
.cb-search-bar-row {
  padding: 14px 16px 4px;
  flex-shrink: 0;
}
.cb-search-wrap {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.cb-search-wrap:focus-within {
  border-color: #3B82F6;
  background: rgba(59,130,246,0.06);
}
.cb-search-icon { color: rgba(255,255,255,0.4); font-size: 13px; flex-shrink: 0; }
.cb-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 14px; color: #fff;
}
.cb-search-input::placeholder { color: rgba(255,255,255,0.35); }

/* ── Recipe grid ─────────────────────────────────────────────────────────── */
.cb-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  padding: 14px 16px 24px;
  align-content: start;
}

.cb-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-3);
  grid-column: 1 / -1;
}
.cb-empty-icon { font-size: 48px; margin-bottom: 8px; }
.cb-empty-title { font-size: 16px; font-weight: 600; color: var(--text-2); }
.cb-empty-sub   { font-size: 13px; }

/* ── Recipe card ─────────────────────────────────────────────────────────── */
.cb-recipe-card {
  background: var(--surface-2);
  border-radius: 20px;
  border: 1px solid var(--border);
  border-bottom: 4px solid rgba(0,0,0,0.5);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, border-bottom-width 0.08s;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.cb-recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.cb-recipe-card:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cb-card-photo {
  width: 100%; aspect-ratio: 4/3;
  background: #23202e;
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.cb-card-placeholder {
  font-size: 56px;
  opacity: 0.5;
}
.cb-card-body {
  padding: 16px 16px 14px;
  flex: 1;
  display: flex; flex-direction: column; gap: 7px;
}
.cb-card-name {
  font-size: 17px; font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cb-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  flex: 1;
}
.cb-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}
.cb-card-icons {
  display: flex; flex-wrap: nowrap; gap: 5px;
}
.cb-card-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; overflow: hidden; flex-shrink: 0;
}
.cb-card-icon img {
  width: 28px; height: 28px; object-fit: contain;
}
.cb-card-badge-wrap {
  position: absolute; top: 10px; left: 10px;
}

/* ══ BUILDER VIEW ═══════════════════════════════════════════════════════════ */

.cb-builder-layout {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* ── Ingredient palette (defined in full below in SHELF section) ─────────── */

/* ── Floating drag ghost ─────────────────────────────────────────────────── */
#cb-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 56px; height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 2px solid var(--accent);
  border-radius: 12px;
  font-size: 26px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%) scale(1.15);
  transition: none;
}
#cb-drag-ghost img { width: 36px; height: 36px; object-fit: contain; }

/* ── Bowl area ───────────────────────────────────────────────────────────── */
.cb-bowl-panel {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 10px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 6px;
  min-width: 0;
}

.cb-recipe-name-row {
  width: 100%;
}
.cb-recipe-name-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 16px; font-weight: 700;
  color: #fff;
  outline: none;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.cb-recipe-name-input::placeholder { color: rgba(255,255,255,0.35); font-weight: 400; }
.cb-recipe-name-input:focus { border-color: var(--accent); background: rgba(255,255,255,0.1); }

/* ── Pot image bowl ───────────────────────────────────────────────────────── */
.cb-bowl-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;   /* bigger pot */
  flex-shrink: 0;
  cursor: copy;       /* shows the drop affordance */
}

/* The actual pot PNG — must be visible */
.cb-pot-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 10px 32px rgba(0,0,0,0.7));
}

/* Ingredient chips — cover the full pot area as the drop zone */
.cb-bowl-contents {
  position: absolute;
  top: 8%;
  left: 10%;
  right: 10%;
  height: 55%;      /* full pot opening + body */
  display: flex; flex-wrap: wrap; gap: 6px;
  align-content: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 8px 10px;
}
.cb-bowl-hint {
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  padding-top: 10px;
  pointer-events: none;
}

/* Warm glow from pot */
.cb-bowl-glow {
  position: absolute;
  top: 5%; left: 10%; right: 10%; height: 55%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,200,80,0.22) 0%,
    transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.cb-bowl-glow.active { opacity: 1; }

/* Drop zone highlight */
.cb-bowl-wrap.drop-over .cb-bowl-glow { opacity: 0.9; }

/* Bowl chips — bigger and more visible inside the pot */
#panel-cookbook .cb-bowl-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px 4px 5px;
  gap: 5px;
  color: #fff;
  background: rgba(80,70,140,0.75);
  border: 1px solid rgba(160,140,255,0.4);
  backdrop-filter: blur(4px);
  max-width: 100px;
}
#panel-cookbook .cb-bowl-chip img { width: 22px; height: 22px; }

/* ── Bowl ingredient chip ─────────────────────────────────────────────────── */
.cb-bowl-chip {
  display: flex; align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-3, #2A2730));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
  padding: 2px 6px 2px 3px;
  font-size: 11px; font-weight: 500; color: var(--text-1);
  animation: chipDrop 0.3s cubic-bezier(.17,.67,.35,1.35) both;
  cursor: default;
  max-width: 80px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-bowl-chip img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.cb-bowl-chip-remove {
  background: none; border: none; color: var(--text-3);
  font-size: 11px; cursor: pointer; padding: 0 0 0 2px; line-height: 1;
}
@keyframes chipDrop {
  from { transform: translateY(-18px) scale(0.7); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes bowlBounce {
  0%   { transform: scaleY(1); }
  25%  { transform: scaleY(0.92) scaleX(1.04); }
  55%  { transform: scaleY(1.04) scaleX(0.97); }
  80%  { transform: scaleY(0.98); }
  100% { transform: scaleY(1); }
}
.cb-bowl-bounce { animation: bowlBounce 0.45s ease; }

/* ── Added ingredient list (amounts) ─────────────────────────────────────── */
.cb-added-list {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 4px;
}
.cb-added-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
}
.cb-added-row-icon { width: 24px; height: 24px; font-size: 16px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cb-added-row-icon img { width: 22px; height: 22px; object-fit: contain; }
.cb-added-row-name { flex: 1; color: #fff; font-weight: 600; }
.cb-added-row-amount {
  display: flex; align-items: center; gap: 4px;
}
.cb-added-row-amount input {
  width: 44px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 5px;
  font-size: 11px; color: var(--text-1); text-align: center; outline: none;
}
.cb-added-row-amount select {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 4px;
  font-size: 11px; color: var(--text-1); outline: none;
}
.cb-added-row-remove {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 13px; padding: 0;
}

/* ── Builder action buttons ──────────────────────────────────────────────── */
.cb-builder-actions {
  display: flex; gap: 8px; align-items: center;
  width: 100%; max-width: 480px;
}
.cb-voice-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  background: var(--accent);
  color: #fff;
  border: none; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s;
}
.cb-voice-btn:hover { opacity: 0.88; transform: scale(0.985); }
.cb-voice-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cb-clear-bowl-btn {
  padding: 11px 14px;
  background: var(--surface-3, #2A2730);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-3);
  font-size: 15px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cb-clear-bowl-btn:hover { color: #e05050; border-color: #e05050; }

.cb-builder-status {
  font-size: 13px; font-weight: 500;
  color: #a89fff;
  text-align: center; min-height: 20px;
}

/* ══ RECIPE DETAIL VIEW ════════════════════════════════════════════════════ */

.cb-detail-back-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  flex-shrink: 0;
}
.cb-back-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-2); cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cb-back-btn:hover { background: var(--surface-3); color: var(--text); }
.cb-detail-actions { display: flex; gap: 10px; align-items: center; }

.cb-cook-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  background: #58CC02; color: #fff;
  border: none;
  border-bottom: 4px solid #46A302;
  border-radius: 100px;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s, border-bottom-width 0.08s;
}
.cb-cook-btn:hover { background: #61D900; }
.cb-cook-btn:active { transform: translateY(2px); border-bottom-width: 2px; }

.cb-sl-btn {
  width: 40px; height: 40px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10,132,255,0.45);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink: 0;
}
.cb-sl-btn:hover { background: #1a8fff; transform: scale(1.1); box-shadow: 0 4px 14px rgba(10,132,255,0.6); }
.cb-sl-btn--loading { opacity: 0.55; cursor: default; pointer-events: none; }
.cb-sl-btn--done { background: #34c759; box-shadow: 0 2px 8px rgba(52,199,89,0.45); cursor: default; }
.cb-sl-btn--error { background: #ff453a; box-shadow: 0 2px 8px rgba(255,69,58,0.45); }

.cb-delete-recipe-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cb-delete-recipe-btn:hover { color: #e05050; border-color: #e05050; }

.cb-detail-header {
  padding: 16px 20px 14px;
  flex-shrink: 0;
}
.cb-detail-title {
  font-size: 26px; font-weight: 800;
  color: var(--text);
  font-family: 'Playfair Display', serif;
  line-height: 1.2;
  margin-bottom: 8px;
}
.cb-detail-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.cb-detail-meta span {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-3);
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.cb-detail-meta-estimating { color: var(--text-3) !important; font-style: italic; font-weight: 400 !important; }
.cb-detail-description {
  font-size: 14px; color: var(--text-2);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.6;
}
.cb-detail-badge {
  margin-top: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cb-badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(88,204,2,0.3);
  color: #58CC02;
  backdrop-filter: blur(4px);
}

.cb-detail-section {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.cb-section-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: 8px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

/* ── Ingredient list ─────────────────────────────────────────────────────── */
.cb-ingredient-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cb-ingredient-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 13px;
}
.cb-ingredient-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.cb-ingredient-icon img { width: 24px; height: 24px; object-fit: contain; }
.cb-ingredient-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-ingredient-amount {
  font-size: 12px; color: var(--text-3);
  font-weight: 500; flex-shrink: 0;
}

/* ── Steps list ──────────────────────────────────────────────────────────── */
.cb-steps-list {
  display: flex; flex-direction: column; gap: 8px;
}
.cb-step-row {
  display: flex; gap: 12px; align-items: flex-start;
}
.cb-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.cb-step-instruction {
  flex: 1;
  font-size: 14px; line-height: 1.6; color: var(--text-1);
  padding-top: 2px;
}
.cb-step-thumb {
  display: block;
  width: 100%; max-width: 300px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* ══ COOKING MODE OVERLAY ══════════════════════════════════════════════════ */

.cb-cooking-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: stretch;
}
.cb-cooking-inner {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 16px 20px 20px;
  gap: 10px;
  position: relative;
}

.cb-cooking-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cb-cooking-recipe-name {
  font-size: 17px; font-weight: 800;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.cb-cooking-close-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: background 0.15s;
}
.cb-cooking-close-btn:hover { background: var(--surface-3); }

/* Progress */
.cb-cooking-progress-wrap {
  height: 8px;
  background: var(--surface-3);
  border-radius: 100px; overflow: hidden;
  flex-shrink: 0;
}
.cb-cooking-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #40B8FF);
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
  width: 0%;
  position: relative; overflow: hidden;
}
.cb-cooking-progress-bar::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: cb-shimmer 2s ease-in-out infinite;
}
@keyframes cb-shimmer {
  0%   { left: -80%; }
  100% { left: 140%; }
}
.cb-cooking-progress-label {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  text-align: center;
  text-transform: uppercase; letter-spacing: 0.08em;
  flex-shrink: 0;
}

/* Step card */
.cb-step-card-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.cb-step-card {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 0;
  max-width: 680px;
  width: 100%;
  text-align: left;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  max-height: 100%;
  display: flex; flex-direction: column;
}
.cb-step-number {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent);
  background: rgba(10,132,255,0.12);
  border-radius: 100px;
  display: inline-block;
  padding: 5px 14px;
  margin: 20px 24px 0;
  align-self: flex-start;
}
.cb-step-text {
  font-size: 17px; line-height: 1.7;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  padding: 12px 24px 24px;
  overflow-y: auto;
}

/* Navigation */
.cb-cooking-nav {
  display: flex; gap: 10px; align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cb-step-prev-btn,
.cb-step-next-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 13px 26px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-bottom: 4px solid rgba(255,255,255,0.06);
  border-radius: 100px;
  font-size: 15px; font-weight: 700;
  color: var(--text); cursor: pointer;
  transition: background 0.12s, transform 0.08s, border-bottom-width 0.08s;
  min-width: 110px; justify-content: center;
}
.cb-step-prev-btn:hover, .cb-step-next-btn:hover { background: var(--surface-3); }
.cb-step-prev-btn:active, .cb-step-next-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.cb-step-prev-btn:disabled, .cb-step-next-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.cb-step-check-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 32px;
  background: #58CC02; color: #fff;
  border: none;
  border-bottom: 4px solid #46A302;
  border-radius: 100px;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s, border-bottom-width 0.08s;
  min-width: 130px; justify-content: center;
}
.cb-step-check-btn:hover { background: #61D900; }
.cb-step-check-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.cb-step-check-btn.checked {
  background: var(--accent);
  border-bottom-color: #0065CC;
}

/* ── Finish / celebration overlay ──────────────────────────────────────── */
.cb-cooking-finish {
  position: absolute; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0; z-index: 10;
  padding: 24px 20px;
}

/* Staggered entrance animations */
.cb-cooking-finish > * { animation: cb-slide-up 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.cb-cooking-finish > *:nth-child(1) { animation-delay: 0s; }
.cb-cooking-finish > *:nth-child(2) { animation-delay: 0.08s; }
.cb-cooking-finish > *:nth-child(3) { animation-delay: 0.14s; }
.cb-cooking-finish > *:nth-child(4) { animation-delay: 0.22s; }
.cb-cooking-finish > *:nth-child(5) { animation-delay: 0.30s; }
@keyframes cb-slide-up {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cb-finish-emoji {
  font-size: 80px; line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 20px rgba(255,200,0,0.35));
}
.cb-finish-title {
  font-size: 34px; font-weight: 900;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.cb-finish-subtitle {
  font-size: 14px; font-weight: 600;
  color: var(--text-2);
  margin-bottom: 22px;
  text-align: center;
}

/* Stats row */
.cb-finish-stats {
  display: flex; gap: 10px;
  width: 100%; max-width: 420px;
  margin-bottom: 22px;
}
.cb-finish-stat {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: 4px solid rgba(0,0,0,0.4);
  border-radius: 18px;
  padding: 16px 10px 14px;
}
.cb-finish-stat--accent {
  border-color: rgba(10,132,255,0.3);
  border-bottom-color: rgba(10,132,255,0.5);
  background: rgba(10,132,255,0.07);
}
.cb-finish-stat-icon { font-size: 26px; line-height: 1; }
.cb-finish-stat-val {
  font-size: 26px; font-weight: 900;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1;
}
.cb-finish-stat--accent .cb-finish-stat-val { color: #40B8FF; }
.cb-finish-stat-label {
  font-size: 10px; font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Buttons row */
.cb-finish-btns {
  display: flex; gap: 10px;
  width: 100%; max-width: 420px;
}

/* "Rate with Klaus" button */
.cb-finish-feedback-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-bottom: 4px solid rgba(255,255,255,0.06);
  border-radius: 100px;
  font-size: 14px; font-weight: 700;
  color: var(--text); cursor: pointer;
  transition: background 0.12s, transform 0.08s, border-bottom-width 0.08s;
}
.cb-finish-feedback-btn:hover { background: var(--surface-3); }
.cb-finish-feedback-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.cb-finish-feedback-avatar {
  width: 26px; height: 26px;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-2);
}

/* Close / main CTA */
.cb-finish-close-btn {
  flex: 1.2;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 20px;
  background: #58CC02; color: #fff;
  border: none;
  border-bottom: 4px solid #46A302;
  border-radius: 100px;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s, border-bottom-width 0.08s;
}
.cb-finish-close-btn:hover { background: #61D900; }
.cb-finish-close-btn:active { transform: translateY(2px); border-bottom-width: 2px; }

/* Drop zone highlight on bowl */
.cb-bowl-wrap.drop-over .cb-bowl-graphic ellipse:first-child {
  stroke: var(--accent);
  transition: stroke 0.2s;
}
.cb-bowl-wrap.drop-over .cb-bowl-glow { opacity: 0.6; }

/* ── Cookbook toolbar ─────────────────────────────────────────────────────── */
.cb-cookbook-toolbar {
  padding: 8px 16px 0;
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.cb-import-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--surface-3, #2A2730);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cb-import-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ══ INGREDIENT SHELF ════════════════════════════════════════════════════════ */

.cb-palette-panel {
  width: 300px;
  flex-shrink: 0;
  background: #16131e;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* override any previous rules */
}

/* Search row */
.cb-palette-search-row {
  padding: 10px 12px;
  background: #111018;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.cb-palette-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 13px;
  transition: border-color 0.15s, background 0.15s;
}
.cb-palette-search-wrap:focus-within {
  border-color: #3B82F6;
  background: rgba(59,130,246,0.06);
}
.cb-palette-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: #fff;
  min-width: 0;
}
.cb-palette-search::placeholder { color: rgba(255,255,255,0.35); }
.cb-palette-search-icon { color: rgba(255,255,255,0.4); font-size: 13px; flex-shrink: 0; }

/* Loading state */
.cb-palette-loading {
  grid-column: 1 / -1;
  font-size: 12px; color: rgba(255,255,255,0.4);
  padding: 20px 0; text-align: center;
}

/* Shelf grid — 4 columns, rows sized to content (icon + label) */
.cb-palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 110px;   /* fixed row height: icon 64px + label + padding */
  gap: 0;
  padding: 0;
  overflow: hidden;  /* never scroll — always exactly 12 slots */
  flex-shrink: 0;
}

/* Row shelf-plank background alternation */
.cb-palette-item:nth-child(-n+4)        { background: rgba(255,255,255,0.03); }
.cb-palette-item:nth-child(n+5):nth-child(-n+8)  { background: rgba(0,0,0,0.18); }
.cb-palette-item:nth-child(n+9)         { background: rgba(255,255,255,0.03); }

/* Shelf plank line at base of rows 1 and 2 */
.cb-palette-item:nth-child(-n+4)::after,
.cb-palette-item:nth-child(n+5):nth-child(-n+8)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(180,160,255,0.2) 30%, rgba(200,180,255,0.3) 50%,
    rgba(180,160,255,0.2) 70%, transparent);
  pointer-events: none;
}

/* Each ingredient tile */
.cb-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px 12px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s, transform 0.12s;
  position: relative;
  border: none;
  border-radius: 0;
}
#panel-cookbook .cb-palette-item:hover { background: rgba(120,100,220,0.18); transform: scale(1.06); }
.cb-palette-item:active { cursor: grabbing; }
.cb-palette-item.dragging { opacity: 0.4; }

/* Icon — big and visible */
.cb-palette-item-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
}
.cb-palette-item-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}

/* Name label — high contrast, readable */
.cb-palette-item-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-align: center;
  line-height: 1.2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

/* Empty filler slot */
.cb-palette-empty {
  background: transparent;
}

/* "Generate X" tile */
.cb-palette-generate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  border: 2px dashed rgba(120,100,220,0.45);
  margin: 8px; border-radius: 12px;
  background: rgba(100,80,200,0.08);
  transition: background 0.15s, border-color 0.15s;
}
#panel-cookbook .cb-palette-generate:hover {
  background: rgba(100,80,200,0.2);
  border-color: rgba(150,130,255,0.7);
}
.cb-palette-generate-icon { font-size: 22px; }
.cb-palette-generate-label {
  font-size: 10px; font-weight: 700;
  color: #a89fff;
  text-align: center; line-height: 1.3;
  max-width: 62px;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* Generating spinner tile */
.cb-palette-generating {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; opacity: 0.75;
}
.cb-palette-generating-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(255,255,255,0.12);
  border-top-color: #a89fff;
  border-radius: 50%;
  animation: cbSpin 0.75s linear infinite;
}
@keyframes cbSpin { to { transform: rotate(360deg); } }
.cb-palette-generating-label {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6);
  text-align: center; max-width: 62px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Builder description + photo row ─────────────────────────────────────── */
.cb-builder-desc-row {
  width: 100%;
}
.cb-builder-desc-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px; color: #fff;
  outline: none; resize: vertical;
  font-family: inherit; line-height: 1.5;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cb-builder-desc-input:focus { border-color: var(--accent); }
.cb-builder-desc-input::placeholder { color: rgba(255,255,255,0.3); }

.cb-builder-photo-row {
  width: 100%; max-width: 480px;
  display: flex; align-items: center; gap: 10px;
}
.cb-builder-photo-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--surface-3, #2A2730);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  font-size: 13px; color: var(--text-3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cb-builder-photo-label:hover { border-color: var(--accent); color: var(--accent); }
.cb-builder-photo-preview {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 8px;
}

/* ── Detail hero photo ────────────────────────────────────────────────────── */
.cb-detail-hero {
  position: relative;
  margin: 0 20px 4px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.cb-detail-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.cb-detail-hero-upload {
  position: absolute; bottom: 10px; right: 10px;
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ── Edit button in detail ────────────────────────────────────────────────── */
.cb-edit-recipe-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cb-edit-recipe-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Cooking mode: step image ─────────────────────────────────────────────── */
.cb-step-image-wrap {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  height: 220px;
}
.cb-step-image {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* ── Cook counter badge on card ───────────────────────────────────────────── */
.cb-card-cook-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 6px; padding: 2px 7px;
  margin-top: 4px;
}

/* ── Modal backdrop + shell ───────────────────────────────────────────────── */
.cb-modal-backdrop {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.cb-modal {
  background: var(--surface-2, #1F1D26);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%; max-width: 480px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.cb-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cb-modal-title {
  font-size: 15px; font-weight: 700; color: var(--text-1);
  display: flex; align-items: center; gap: 8px;
}
.cb-modal-close {
  background: none; border: none; color: var(--text-3);
  font-size: 16px; cursor: pointer; padding: 4px;
}
.cb-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.cb-modal-label {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cb-modal-hint {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); font-size: 11px;
}
.cb-modal-input {
  width: 100%;
  background: var(--surface-3, #2A2730);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px; color: var(--text-1);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cb-modal-input:focus { border-color: var(--accent); }
.cb-modal-input-sm { width: 100%; }
.cb-modal-row3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.cb-modal-textarea {
  width: 100%;
  background: var(--surface-3, #2A2730);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px; color: var(--text-1);
  font-family: inherit; line-height: 1.5;
  outline: none; resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cb-modal-textarea:focus { border-color: var(--accent); }
.cb-modal-textarea-tall { min-height: 100px; }
.cb-modal-desc {
  font-size: 13px; color: var(--text-2);
  line-height: 1.5; margin: 0;
}
.cb-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cb-modal-cancel-btn {
  padding: 9px 18px;
  background: var(--surface-3, #2A2730);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer;
}
.cb-modal-save-btn {
  padding: 9px 18px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: opacity 0.18s;
}
.cb-modal-save-btn:hover { opacity: 0.88; }

/* ── Import modal extras ──────────────────────────────────────────────────── */
.cb-import-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-3); font-size: 12px;
}
.cb-import-or::before, .cb-import-or::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
}
.cb-import-photo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface-3, #2A2730);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  font-size: 13px; color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  width: 100%; box-sizing: border-box;
  justify-content: center;
}
.cb-import-photo-btn:hover { border-color: var(--accent); color: var(--accent); }
.cb-import-photo-name {
  font-size: 12px; color: var(--accent);
  min-height: 18px;
}

/* ── Flying ingredient animation ─────────────────────────────────────────── */
.cb-fly-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  border: 2px solid var(--accent);
  border-radius: 50%;
  font-size: 26px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: none;
}
.cb-fly-ghost img { width: 36px; height: 36px; object-fit: contain; }


/* ══════════════════════════════════════════════════════════════════════════════
   COOKBOOK REDESIGN v2
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Header buttons ──────────────────────────────────────────────────────── */
.cb-header-btns {
  display: flex; align-items: center; gap: 8px;
}
.cb-nav-cookbook-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cb-nav-cookbook-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2); }

/* New Recipe dropdown */
.cb-new-recipe-wrap { position: relative; }
.cb-new-recipe-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: #3B82F6;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.cb-new-recipe-btn:hover { background: #2563EB; }
.cb-new-chevron { font-size: 11px; transition: transform 0.2s; }
.cb-new-chevron.open { transform: rotate(180deg); }
.cb-new-recipe-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 400;
  min-width: 200px;
}
.cb-new-recipe-dropdown button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: none; border: none;
  font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.cb-new-recipe-dropdown button i { font-size: 16px; color: var(--text-2); }
.cb-new-recipe-dropdown button:hover { background: rgba(255,255,255,0.06); }
.cb-new-recipe-dropdown button + button { border-top: 1px solid var(--border); }

/* ── Step headers (builder wizard steps 1/2/3) ───────────────────────────── */
.cb-step-header {
  display: flex; align-items: center; gap: 8px;
}
.cb-step-header--pad {
  padding: 12px 14px 8px;
}
/* Override: builder wizard step circles are #3B82F6 (blue), not var(--accent) */
.cb-step-header .cb-step-num {
  width: 22px; height: 22px;
  background: #3B82F6;
  margin-top: 0;
}
.cb-step-label {
  font-size: 13px; font-weight: 600;
  color: #3B82F6;
  letter-spacing: 0.01em;
}

/* ── Left panel: ingredient list ─────────────────────────────────────────── */
#panel-cookbook .cb-palette-panel {
  width: 290px;
  flex-shrink: 0;
  background: #111018;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
.cb-palette-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.cb-palette-list::-webkit-scrollbar { width: 3px; }
.cb-palette-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* List item row */
.cb-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
  user-select: none; -webkit-user-select: none;
}
.cb-list-item:hover { background: rgba(255,255,255,0.04); }
.cb-list-item.selected { background: rgba(59,130,246,0.09); }
.cb-list-item.dragging { opacity: 0.4; }

/* Icon square — LARGER */
.cb-list-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 11px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 28px;
}
.cb-list-icon-wrap img {
  width: 44px; height: 44px; object-fit: contain;
}

/* Name */
.cb-list-name {
  flex: 1;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.88);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Checkbox circle */
.cb-list-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
  font-size: 13px; font-weight: 700; color: transparent;
}
.cb-list-item.selected .cb-list-check {
  background: #22C55E;
  border-color: #22C55E;
  color: #fff;
}

/* Generate tile in list */
.cb-list-generate {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #3B82F6;
  font-size: 13px; font-weight: 500;
  transition: background 0.1s;
}
.cb-list-generate:hover { background: rgba(59,130,246,0.06); }
.cb-list-generate-icon { font-size: 22px; width: 52px; text-align: center; flex-shrink: 0; }

/* ── Right panel layout ───────────────────────────────────────────────────── */
#panel-cookbook .cb-bowl-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  padding: 0;
  gap: 0;
}
.cb-bowl-panel::-webkit-scrollbar { width: 3px; }
.cb-bowl-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Pot zone — scrolls with content */
.cb-bowl-pot-zone {
  background: #111018;
  flex-shrink: 0;
  padding: 12px 20px 0;
  /* overflow: hidden removed — the gradient glow needs to bleed through into the content below */
}

/* Header row inside sticky zone: step label + clear button */
.cb-bowl-pot-header {
  display: flex; align-items: center;
  margin-bottom: 8px;
}
.cb-bowl-pot-header .cb-step-header {
  flex: 1;
}
.cb-bowl-pot-header .cb-clear-bowl-btn {
  margin-left: 8px;
  flex-shrink: 0;
}

/* Gradient glow behind bowl — extends below the pot zone into content */
.cb-bowl-glow-bg {
  position: absolute;
  left: -20%; right: -20%;
  top: 10%; bottom: -80%;  /* bleed well into the ingredient rows below */
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(59,130,246,0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Recipe name (inside sticky zone) — top padding matches the left panel's
   cb-palette-search-row padding-top (10px) so both inputs sit at the same height */
.cb-recipe-name-row {
  width: 100%;
  position: relative; z-index: 1;
  margin-bottom: 6px;
  padding-top: 10px;
}
#panel-cookbook .cb-recipe-name-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px; font-weight: 600;
  color: #fff;
  outline: none;
  box-sizing: border-box;
}
#panel-cookbook .cb-recipe-name-input.invalid { border-color: #EF4444; }
#panel-cookbook .cb-recipe-name-input::placeholder { color: rgba(255,255,255,0.3); font-weight: 400; }
#panel-cookbook .cb-recipe-name-input:focus { border-color: #3B82F6; background: rgba(255,255,255,0.08); }

/* Step 3 header top margin */
.cb-step3-header { margin-top: 16px; text-align: left; }

/* ── Bowl area: pot + floating icons ────────────────────────────────────── */
.cb-bowl-area {
  position: relative;
  width: 100%;
  padding-top: 30px;   /* breathing room so icons float comfortably above pot rim */
  z-index: 1;
}
#panel-cookbook .cb-bowl-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  flex-shrink: 0;
  cursor: copy;
}
#panel-cookbook .cb-bowl-wrap.drop-over .cb-bowl-glow { opacity: 0.9; }

/* Floating icons — absolutely positioned in a 3D arc above the pot */
.cb-floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

/* Individual floating icon — JS sets left/bottom via arc math */
.cb-floating-icon {
  position: absolute;
  width: var(--fi-size, 56px);
  height: var(--fi-size, 56px);
  transform: translate(-50%, 50%);
  animation: cbFloatAnim var(--fi-dur, 3s) var(--fi-delay, 0s) ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
  pointer-events: none;
}
.cb-floating-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.cb-floating-icon .cb-fi-icon {
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

@keyframes cbFloatAnim {
  0%   { transform: translate(-50%, 50%) translateY(0px) translateX(var(--fi-x0, 0px)) rotate(var(--fi-r0, -2deg)) scale(var(--fi-s0, 1)); }
  100% { transform: translate(-50%, 50%) translateY(var(--fi-y, -7px)) translateX(var(--fi-x1, 0px)) rotate(var(--fi-r1, 2deg)) scale(var(--fi-s1, 1)); }
}

/* Content below pot — full width, left aligned */
.cb-bowl-content {
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  align-items: stretch;
}

/* ── Added ingredients (quantity rows) ──────────────────────────────────── */
.cb-added-list {
  /* Bleed out of the parent's 20px horizontal padding so rows span full column width */
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  display: flex; flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
}
.cb-added-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.cb-added-row:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.cb-added-row + .cb-added-row { border-top: 1px solid rgba(255,255,255,0.08); }
.cb-added-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 8px; }
}

/* Icon box — matches left panel style */
.cb-added-row-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.cb-added-row-icon img { width: 28px; height: 28px; object-fit: contain; }

.cb-added-row-name {
  flex: 1;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.88);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-added-row-amount {
  display: flex; gap: 5px; align-items: center;
}

/* ── Quantity stepper (replaces drum) ───────────────────────────────────── */
.cb-qty-stepper {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
  height: 34px;
  flex-shrink: 0;
}
.cb-qty-step-btn {
  width: 28px; height: 34px;
  background: none; border: none;
  color: rgba(255,255,255,0.65);
  font-size: 17px; font-weight: 300;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.cb-qty-step-btn:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.cb-qty-step-btn:active { background: rgba(255,255,255,0.15); }
.cb-qty-val {
  width: 42px;
  padding: 0 2px;
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  border-left:  1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  height: 100%;
  outline: none;
  -webkit-appearance: none;
  cursor: text;
}
.cb-qty-val:focus {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Unit select */
.cb-added-row-unit {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 5px 6px;
  font-size: 12px; color: rgba(255,255,255,0.8);
  outline: none;
  -webkit-appearance: none; appearance: none;
  width: 56px; text-align: center;
  height: 34px;
}

.cb-added-row-remove {
  background: none; border: none;
  color: rgba(255,255,255,0.22);
  cursor: pointer; padding: 4px;
  font-size: 14px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.cb-added-row-remove:hover { color: #EF4444; }

/* ── Description section ────────────────────────────────────────────────── */
.cb-builder-desc-row {
  width: 100%;
  margin-top: 8px;
}
.cb-builder-desc-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px; color: rgba(255,255,255,0.9);
  resize: vertical;
  outline: none; line-height: 1.5;
  box-sizing: border-box;
}
.cb-builder-desc-input.invalid { border-color: #EF4444; }
.cb-builder-desc-input:focus { border-color: #3B82F6; }
.cb-builder-desc-input::placeholder { color: rgba(255,255,255,0.3); }

/* Tell Klaus + Add picture — stacked by default, side by side when there's room */
.cb-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cb-action-row .cb-tell-klaus-row,
.cb-action-row .cb-builder-photo-row {
  flex: 1 1 200px;  /* grow equally, wrap below ~200px each */
  margin: 0;
}
.cb-action-row .cb-builder-photo-row {
  display: flex; align-items: stretch;
}
.cb-action-row .cb-builder-photo-label {
  flex: 1;
  justify-content: center;
  width: 100%; box-sizing: border-box;
}

/* "or simply tell Klaus" — voice trigger */
.cb-tell-klaus-row { margin-top: 8px; }
.cb-tell-klaus-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500;
  color: #3B82F6;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid rgba(59,130,246,0.28);
  background: rgba(59,130,246,0.08);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.cb-tell-klaus-link:hover { background: rgba(59,130,246,0.15); }

/* Photo row */
.cb-builder-photo-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
}
/* Save row */
.cb-builder-save-row { margin-top: 12px; }
.cb-save-recipe-btn {
  width: 100%;
  padding: 14px;
  border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
  cursor: not-allowed;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.3);
}
.cb-save-recipe-btn:not([disabled]) {
  background: #3B82F6; color: #fff; cursor: pointer;
}
.cb-save-recipe-btn:not([disabled]):hover  { background: #2563EB; }
.cb-save-recipe-btn:not([disabled]):active { background: #1D4ED8; transform: scale(0.99); }

/* ── Toast notification ──────────────────────────────────────────────────── */
.cb-toast {
  position: fixed;
  bottom: 28px;
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1c192a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}
.cb-toast.cb-toast--error { border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
.cb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }



/* ══════════════════════════════════════════════════════════════════════════
   INSPIRATION TAB
   ══════════════════════════════════════════════════════════════════════════ */

/* Active state for cookbook nav buttons — matches accent token */
.cb-nav-cookbook-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Pinterest masonry grid ──────────────────────────────────────────────── */
/* JS distributes cards into .insp-col divs; columns handle variable heights */
.insp-grid {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 20px 24px;
}
.insp-col {
  flex: 1;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}

/* Pin card */
.insp-card {
  background: var(--surface-2);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  display: block; width: 100%;
}
.insp-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.55); opacity: 0.93; }
.insp-card:active { opacity: 0.8; }

/* Pinterest-style fade-in for new cards */
.insp-card--entering {
  opacity: 0;
}
.insp-card--visible {
  opacity: 1;
}

/* Image — natural height from src; vary aspect with .insp-pin--tall / --short */
.insp-card-img-wrap {
  position: relative; width: 100%;
  aspect-ratio: 4/3; /* reserve space before image loads — prevents layout shifts */
  background: #1c1928; overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.insp-card-img {
  display: block; width: 100%; height: auto; object-fit: cover;
}
/* Artificially vary image heights for masonry feel */
.insp-pin--tall  .insp-card-img { aspect-ratio: 3/4; object-fit: cover; width: 100%; height: auto; }
.insp-pin--short .insp-card-img { aspect-ratio: 5/3; object-fit: cover; width: 100%; height: auto; }
.insp-pin--tall  .insp-card-img-wrap,
.insp-pin--short .insp-card-img-wrap { overflow: hidden; }
/* tall/short: force image into aspect-ratio container */
.insp-pin--tall .insp-card-img-wrap  { aspect-ratio: 3/4; }
.insp-pin--short .insp-card-img-wrap { aspect-ratio: 5/3; }
.insp-pin--tall  .insp-card-img,
.insp-pin--short .insp-card-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.insp-pin--tall  .insp-card-img-wrap,
.insp-pin--short .insp-card-img-wrap { position: relative; }

.insp-card-img-placeholder {
  aspect-ratio: 4/3; width: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; opacity: 0.3;
}

/* Category badge */
.insp-pin-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Pin title */
.insp-pin-label {
  padding: 9px 12px 11px;
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Recipe detail modal (centered) ─────────────────────────────────────── */
.insp-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  display: flex; align-items: center; justify-content: center;
}
.insp-sheet-backdrop.open { opacity: 1; pointer-events: all; }

.insp-sheet {
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border-2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  z-index: 601;
  width: 900px; max-width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0; transform: scale(0.94) translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.insp-sheet-backdrop.open .insp-sheet {
  opacity: 1; transform: scale(1) translateY(0);
  pointer-events: all;
}

/* Close button */
.insp-sheet-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
  z-index: 2;
}
.insp-sheet-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

.insp-sheet-inner {
  display: flex; flex-direction: column;
}

/* Two-column layout: square image left, content right */
.insp-sheet-top {
  display: flex; gap: 0;
  position: relative;
}

.insp-sheet-img-col {
  flex: 0 0 380px;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}
.insp-sheet-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  min-height: 380px;
}

.insp-sheet-content-col {
  flex: 1; min-width: 0;
  padding: 26px 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow-y: auto;
  max-height: 540px;
}

.insp-sheet-title {
  font-size: 22px; font-weight: 800; color: var(--text);
  line-height: 1.2; letter-spacing: -0.02em;
  padding-right: 36px; /* space for close btn */
}

.insp-sheet-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.insp-sheet-tag {
  font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 100px;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border);
}
.insp-sheet-tag--cat {
  background: rgba(10,132,255,0.15); color: var(--accent);
  border-color: rgba(10,132,255,0.25);
}

.insp-sheet-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 7px;
}

.insp-sheet-ings {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.insp-sheet-ing {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  background: var(--surface-2); border-radius: 100px;
  padding: 4px 10px; border: 1px solid var(--border);
  white-space: nowrap;
}

.insp-sheet-desc {
  font-size: 13px; color: var(--text-2); line-height: 1.65;
}


/* ══════════════════════════════════════════════════════════════════════════
   CONTACTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Contacts (Apple-inspired) ───────────────────────────────────────────── */
.ct-panel {
  padding: 0;
  position: relative;
  flex-direction: column;
  overflow: hidden;
}

.ct-panel-header {
  flex-shrink: 0;
  padding: 28px 36px 18px;
}

/* Two-column body */
.ct-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

/* Left column */
.ct-left {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.ct-add-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.ct-add-btn:hover { background: var(--accent); color: #fff; }

/* Search */
.ct-search-row {
  padding: 4px 14px 10px;
  flex-shrink: 0;
}
.ct-search-wrap { position: relative; }
.ct-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px; color: var(--text-3);
  pointer-events: none;
}
.ct-search-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 10px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 9px 12px 9px 32px;
  outline: none;
  transition: background 0.15s;
}
.ct-search-input::placeholder { color: var(--text-3); }
.ct-search-input:focus { background: rgba(255,255,255,0.13); }

/* Contact list */
.ct-scroll {
  flex: 1;
  overflow-y: auto;
}
.ct-list {
  display: flex;
  flex-direction: column;
}
.ct-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}


/* Contact row */
.ct-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.ct-row:last-child { border-bottom: none; }
.ct-row:hover { background: rgba(255,255,255,0.05); }
.ct-row.ct-row--active { background: var(--accent-dim); }

.ct-row-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
}
.ct-row-body { flex: 1; min-width: 0; }
.ct-row-name {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-row-rel {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-row-contact {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-row-bday-soon {
  font-size: 11px; color: var(--amber); font-weight: 600; flex-shrink: 0;
}

/* Right column */
.ct-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ct-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: var(--text-3);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}
.ct-detail-empty i { font-size: 52px; opacity: 0.25; }

.ct-detail {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar */
/* Name + actions header row */
.ct-det-header {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
}
.ct-det-header-text { flex: 1; min-width: 0; }
.ct-det-name {
  font-size: 22px; font-weight: 700; color: var(--text);
  font-family: 'Inter', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-det-rel {
  font-size: 13px; color: var(--text-3);
  margin-top: 2px;
}

/* Quick action buttons — compact icon-only circles */
.ct-det-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.ct-det-action {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  text-decoration: none;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.ct-det-action:hover { background: var(--accent); color: #fff; }
.ct-det-action-label { display: none; }

/* Grouped info sections (iOS Settings style) */
.ct-det-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ct-det-section {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.ct-det-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.ct-det-row:last-child { border-bottom: none; }
.ct-det-row-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ct-det-row-icon--phone { background: #34c759; color: #fff; }
.ct-det-row-icon--mail  { background: #007aff; color: #fff; }
.ct-det-row-icon--bday  { background: #ff9500; color: #fff; }
.ct-det-row-icon--notes { background: #ffcc00; color: #1c1c1e; }
.ct-det-row-icon--gifts { background: #ff2d55; color: #fff; }
.ct-det-row-body { flex: 1; min-width: 0; }
.ct-det-row-label {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; margin-bottom: 2px;
}
.ct-det-row-value {
  font-size: 14px; color: var(--text);
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ct-det-row-value a { color: var(--accent); text-decoration: none; }
.ct-bday-soon-tag {
  display: inline-block; margin-left: 8px;
  font-size: 11px; color: var(--amber); font-weight: 600;
}

/* Edit / Delete buttons */
.ct-det-btns {
  display: flex; gap: 10px;
  margin-top: 22px; width: 100%;
}

/* Shared button styles */
.ct-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  border: none;
}
.ct-btn:hover { opacity: 0.8; }
.ct-btn-primary { background: var(--accent); color: #fff; }
.ct-btn-danger   { background: rgba(255,59,48,0.15); color: var(--red); border: 1px solid rgba(255,59,48,0.25); }
.ct-btn-ghost    { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-2); }

/* Modal */
.ct-modal-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.ct-modal-overlay.open { opacity: 1; pointer-events: all; }
.ct-modal {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  width: 100%; max-width: 480px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.ct-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 700; color: var(--text);
}
.ct-modal-close {
  background: none; border: none; color: var(--text-3);
  font-size: 16px; cursor: pointer; padding: 4px 6px;
  transition: color 0.15s;
}
.ct-modal-close:hover { color: var(--text); }
.ct-modal-body {
  flex: 1; overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.ct-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px;
}
.ct-modal-footer .ct-btn { flex: 1; }

/* ── Contact modal form (Apple-style) ───────────────────────────────────── */
.ct-mf-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 6px;
}
.ct-mf-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ct-mf-name-input {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--border-2);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  padding: 6px 0;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.ct-mf-name-input:focus { border-bottom-color: var(--accent); }
.ct-mf-name-input::placeholder { color: var(--text-3); font-weight: 400; }

.ct-mf-section {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.ct-mf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.ct-mf-row:last-child { border-bottom: none; }
.ct-mf-label {
  font-size: 13px;
  color: var(--text-3);
  width: 88px;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}
.ct-mf-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 0;
  outline: none;
  min-width: 0;
}
.ct-mf-input::placeholder { color: var(--text-3); opacity: 0.55; }
.ct-mf-area-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-mf-area-row:last-child { border-bottom: none; }
.ct-mf-area-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-mf-textarea {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  padding: 0 0 0 38px;
  min-height: 56px;
}
.ct-mf-textarea::placeholder { color: var(--text-3); opacity: 0.55; }

/* Ingredient amount label */
.insp-sheet-ing-amt {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  margin-right: 4px;
}

/* Steps list */
.insp-sheet-steps-wrap { }
.insp-sheet-steps {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.insp-sheet-step {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.insp-sheet-step::marker { color: var(--text-3); font-weight: 700; }

/* YouTube button */
.insp-sheet-yt-btn {
  flex: 0 0 auto; padding: 12px 18px;
  background: rgba(255,0,0,0.12); border: 1px solid rgba(255,60,60,0.25);
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: #ff6060;
  cursor: pointer; transition: background 0.15s;
  white-space: nowrap;
}
.insp-sheet-yt-btn:hover { background: rgba(255,0,0,0.22); color: #ff4444; }

/* Actions — full width below the two columns */
.insp-sheet-actions {
  display: flex; gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}
.insp-sheet-open-btn {
  flex: 1; padding: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8);
  cursor: pointer; transition: background 0.15s;
}
.insp-sheet-open-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.insp-sheet-save-btn {
  flex: 2; padding: 12px;
  background: var(--accent); border: none;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700; color: #fff;
  cursor: pointer; transition: opacity 0.15s;
}
.insp-sheet-save-btn:hover { opacity: 0.88; }
.insp-sheet-sl-btn {
  width: 44px; height: 44px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10,132,255,0.45);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.insp-sheet-sl-btn:hover { background: #1a8fff; transform: scale(1.08); box-shadow: 0 4px 14px rgba(10,132,255,0.6); }
.insp-sheet-sl-btn--loading { opacity: 0.55; cursor: default; pointer-events: none; }
.insp-sheet-sl-btn--done    { background: #34c759; box-shadow: 0 2px 8px rgba(52,199,89,0.45); cursor: default; }
.insp-sheet-sl-btn--home    { background: var(--accent); opacity: 0.6; cursor: default; }
.insp-sheet-sl-btn--error   { background: #ff453a; box-shadow: 0 2px 8px rgba(255,69,58,0.45); }

/* Legacy suppressed */
.insp-card-body, .insp-card-actions, .insp-card-title,
.insp-card-desc, .insp-ings, .insp-badges,
.insp-badge, .insp-ing, .insp-ing-more { display: none; }

/* ── New Ideas filter bar ─────────────────────────────────────────────────── */
.insp-filter-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px 14px;
}

/* Category dropdown trigger button */
.insp-dropdown-wrap { position: relative; }
.insp-dropdown-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.insp-dropdown-btn:hover { background: var(--surface-3); color: var(--text); }
.insp-dropdown-btn.has-selection { border-color: var(--accent); color: var(--accent); }
.insp-cat-chevron { font-size: 11px; transition: transform 0.2s; }

/* Dropdown panel */
.insp-cat-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 14px; min-width: 260px;
}
.insp-cat-panel.open { display: block; }

.insp-cat-group { margin-bottom: 12px; }
.insp-cat-group:last-of-type { margin-bottom: 8px; }
.insp-cat-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 7px;
}
.insp-cat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-cat-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.insp-cat-chip:hover { background: var(--surface-3); color: var(--text); }
.insp-cat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.insp-cat-footer { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.insp-cat-clear {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  background: none; border: none; cursor: pointer;
  padding: 2px 0;
}
.insp-cat-clear:hover { color: var(--text-2); }

/* Time chips row inside filter bar */
.insp-time-wrap {
  display: flex; align-items: center; gap: 6px;
}
.insp-filter-label-sm {
  font-size: 13px; color: var(--text-3);
  display: inline-flex; align-items: center;
}
.insp-time-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.insp-time-chip:hover { background: var(--surface-3); color: var(--text); }
.insp-time-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Load more — same pill style as the "cook" button family */
/* Infinite scroll auto-loader — three pulsing dots */
.insp-auto-loader {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  padding: 18px 0 28px;
  /* Don't shift layout height — sit below the grid naturally */
  transition: opacity 0.3s ease;
}
.insp-auto-loader[style*="none"] { opacity: 0; pointer-events: none; }
@keyframes insp-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.75); }
  40%            { opacity: 1;   transform: scale(1); }
}
.insp-loader-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
  animation: insp-dot-pulse 1.2s ease-in-out infinite;
}
.insp-loader-dot:nth-child(2) { animation-delay: 0.2s; }
.insp-loader-dot:nth-child(3) { animation-delay: 0.4s; }


/* ══════════════════════════════════════════════════════════════════════════
   RECOMMENDATION (DISCOVER) TAB
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Filter bar outer: non-overflowing wrapper so dropdown is never clipped */
.rec-filter-bar-outer {
  display: flex; align-items: center; gap: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative; z-index: 10;
}

/* ── Filter bar inner: scrollable chips only ─────────────────────────────── */
.rec-filter-bar {
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rec-filter-bar::-webkit-scrollbar { display: none; }
.rec-filter-all-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  min-width: max-content; /* prevent chips from wrapping */
}
.rec-filter-label {
  font-size: 13px; color: var(--text-3);
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
}
.rec-filter-sep {
  width: 1px; height: 20px; background: var(--border-2);
  flex-shrink: 0; margin: 0 4px;
}
.rec-time-chip, .rec-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.rec-time-chip:hover, .rec-filter-chip:hover {
  background: var(--surface-3); color: var(--text);
}
.rec-time-chip.active, .rec-filter-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* "At home" chip gets green when active */
.rec-filter-chip--home.active {
  background: #58CC02; border-color: #46A302; color: #fff;
}

/* ── Cook Now category dropdown ──────────────────────────────────────────── */
.rec-cat-wrap { position: relative; flex-shrink: 0; }
.rec-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.rec-cat-btn:hover { background: var(--surface-3); color: var(--text); }
.rec-cat-btn.has-selection { border-color: var(--accent); color: var(--accent); }
.rec-cat-chevron { font-size: 10px; transition: transform 0.2s; }

.rec-cat-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 500;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 14px; min-width: 240px;
}
.rec-cat-panel.open { display: block; }
.rec-cat-group { margin-bottom: 12px; }
.rec-cat-group:last-of-type { margin-bottom: 8px; }
.rec-cat-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 7px;
}
.rec-cat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-cat-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rec-cat-chip:hover { background: var(--surface-3); color: var(--text); }
.rec-cat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rec-cat-footer { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.rec-cat-clear {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  background: none; border: none; cursor: pointer; padding: 2px 0;
}
.rec-cat-clear:hover { color: var(--text-2); }

/* Scrollable body */
.rec-scroll {
  flex: 1; overflow-y: auto;
  padding: 14px 0 36px;
}
.rec-scroll::-webkit-scrollbar { width: 6px; }
.rec-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

/* Netflix section sits flush, other sections have normal padding */
.nfx-section { padding: 0 20px; }

/* Skeleton shimmer for loading state */
@keyframes nfx-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.nfx-skeleton-hero {
  background: linear-gradient(90deg, #2a2735 25%, #333045 50%, #2a2735 75%);
  background-size: 600px 100%;
  animation: nfx-shimmer 1.4s infinite;
}
.nfx-skeleton-body { gap: 10px; }
.nfx-skeleton-line {
  height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, #2a2735 25%, #333045 50%, #2a2735 75%);
  background-size: 600px 100%;
  animation: nfx-shimmer 1.4s infinite;
  width: 80%;
}
.nfx-skeleton-line-sm { width: 50%; }

/* Section headers — bold Netflix-style headings */
.rec-section { margin-top: 32px; padding: 0 20px; }
/* Recipe search — top of Discover section */
.rec-top-search-row { padding: 16px 20px 12px; }
.rec-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.rec-section-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--text);
}
.rec-deals-sub {
  font-size: 13px; color: var(--text-3); font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   NETFLIX-STYLE "COOK NOW" SLIDER
   ══════════════════════════════════════════════════════════════════════════ */
.nfx-section { margin-top: 28px; padding: 0 20px; }

/* "No cookbook match" note — sits between header and carousel */
.rec-no-match-note {
  font-size: 13px; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 0 2px;
}
.rec-no-match-note strong { color: var(--text-2); font-weight: 600; }

.nfx-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 0 2px;
}
.nfx-header .rec-deals-sub { flex: 1; }

/* Arrows sit inside the card, overlaid on the hero */
.nfx-arrows { display: none; } /* hidden — replaced by in-card arrows */

/* ── Carousel row: track fills full width, arrows overlay on top ──────── */
.nfx-carousel-row {
  position: relative;
}

/* ── Track: shows 3 cards at once, clips overflow ────────────────────── */
.nfx-track-wrap {
  overflow: hidden; position: relative;
}

.nfx-track {
  display: flex; gap: 16px;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Card — responsive width ─────────────────────────────────────────── */
.nfx-card {
  /* Default: 2 cards visible (iPad portrait / small screens) */
  flex: 0 0 calc((100% - 16px) / 2);
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: relative;
}
/* 3 cards only on very large screens (desktop external monitor) */
@media (min-width: 1400px) {
  .nfx-card { flex: 0 0 calc((100% - 32px) / 3); }
}

/* Hero image — compact banner */
.nfx-hero {
  position: relative; width: 100%; height: 190px;
  background: #23202e; background-size: cover; background-position: center;
  flex-shrink: 0;
}
.nfx-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.3; }

/* Gradient scrim */
.nfx-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.92) 100%
  );
}

/* Prev / Next arrows — flex siblings of track-wrap */
.nfx-hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text-2); font-size: 14px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nfx-hero-nav--prev { left: 0; }
.nfx-hero-nav--next { right: 0; }
.nfx-hero-nav:hover   { background: var(--surface-3); color: #fff; }
.nfx-hero-nav:disabled { opacity: 0.2; cursor: not-allowed; }

/* Dot indicators — below the track */
.nfx-dots {
  display: flex; gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.nfx-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s, transform 0.2s;
}
.nfx-dot.active { background: var(--accent); transform: scale(1.3); }

/* Stats row */
.nfx-stat-row {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.nfx-stat {
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.95); display: inline-flex; align-items: center; gap: 4px;
}
.nfx-stat-green        { color: #58CC02; border-color: rgba(88,204,2,0.3); }
.nfx-stat-idea         { color: var(--accent); border-color: rgba(10,132,255,0.3); }
.nfx-stat-home         { color: #58CC02; border-color: rgba(88,204,2,0.45); background: rgba(88,204,2,0.12); }
.nfx-stat-home-partial { color: #a8e063; border-color: rgba(168,224,99,0.35); }
.nfx-stat-estimating   { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.2); background: rgba(0,0,0,0.45); font-style: italic; }
.rec-sheet-time-estimating { color: var(--text-3); font-style: italic; }

/* "All at home" body badge */
.nfx-home-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(88,204,2,0.12); border: 1px solid rgba(88,204,2,0.35);
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 12px; font-weight: 700; color: #58CC02;
}

/* New Idea card — subtle blue accent border */
.nfx-card--idea { border-color: rgba(10,132,255,0.25); }
.nfx-card--idea .nfx-cook-btn {
  background: var(--accent); border-bottom-color: #0060cc;
}
.nfx-card--idea .nfx-cook-btn:hover { background: #2196f3; }

/* Title + cuisine at bottom of photo */
.nfx-photo-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 16px 16px;
}
.nfx-title {
  font-size: 20px; font-weight: 800; color: #fff;
  line-height: 1.2; letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nfx-cuisine {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6);
  margin-top: 4px; letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Card body — clear column: ingredients, then deal badge */
.nfx-body {
  padding: 16px 16px 10px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.nfx-ingredients {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.nfx-ing {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  background: var(--surface-3); border-radius: 100px;
  padding: 4px 10px; white-space: nowrap;
}
.nfx-ing-more { color: var(--text-3); font-style: italic; }

/* Deal row — always its own line */
.nfx-deal-row { min-height: 28px; display: flex; align-items: center; }
.nfx-deal-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(88,204,2,0.1); border: 1px solid rgba(88,204,2,0.35);
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 12px; font-weight: 700; color: #58CC02;
  cursor: pointer; transition: background 0.15s;
}
.nfx-deal-btn:hover { background: rgba(88,204,2,0.2); }

/* Action buttons */
.nfx-btns {
  display: flex; gap: 10px; padding: 0 16px 16px;
}
.nfx-cook-btn {
  flex: 1; padding: 11px 14px;
  background: #58CC02; border: none;
  border-bottom: 3px solid #46A302; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: #fff;
  cursor: pointer; transition: background 0.15s, transform 0.08s;
}
.nfx-cook-btn:hover  { background: #61D900; }
.nfx-cook-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.nfx-view-btn {
  padding: 11px 14px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.nfx-view-btn:hover { background: rgba(255,255,255,0.13); color: #fff; }

/* Shopping list button — square icon pill between Cook Now and View */
.nfx-sl-btn {
  width: 36px; height: 36px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10,132,255,0.45);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink: 0;
}
.nfx-sl-btn:hover {
  background: #1a8fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(10,132,255,0.6);
}
.nfx-sl-btn--loading {
  opacity: 0.55; cursor: default; pointer-events: none;
}
.nfx-sl-btn--done {
  background: #34c759;
  box-shadow: 0 2px 8px rgba(52,199,89,0.45);
  cursor: default;
}
.nfx-sl-btn--home {
  background: var(--accent);
  opacity: 0.6;
  cursor: default;
}
.nfx-sl-btn--error {
  background: #ff453a;
  box-shadow: 0 2px 8px rgba(255,69,58,0.45);
}

.rec-sheet-sl-btn {
  width: 36px; height: 36px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10,132,255,0.45);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink: 0;
}
.rec-sheet-sl-btn:hover {
  background: #1a8fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(10,132,255,0.6);
}
.rec-sheet-sl-btn--loading {
  opacity: 0.55; cursor: default; pointer-events: none;
}
.rec-sheet-sl-btn--done {
  background: #34c759;
  box-shadow: 0 2px 8px rgba(52,199,89,0.45);
  cursor: default;
}
.rec-sheet-sl-btn--home {
  background: var(--accent);
  opacity: 0.6;
  cursor: default;
}
.rec-sheet-sl-btn--error {
  background: #ff453a;
  box-shadow: 0 2px 8px rgba(255,69,58,0.45);
}

/* keep old classes around for deal badge / popover */
.rec-cb-placeholder { font-size: 52px; opacity: 0.5; }

/* Deal badge overlaid on photo — green tinted pill */
.rec-deal-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(20,20,24,0.88); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(88,204,2,0.4); border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: #58CC02;
  display: inline-flex; align-items: center; gap: 5px;
}
.rec-deal-badge-btn {
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.rec-deal-badge-btn:hover {
  background: rgba(88,204,2,0.2);
  border-color: rgba(88,204,2,0.7);
}

/* Deal popover */
.rec-deal-popover {
  position: fixed; z-index: 9999;
  background: #1e1c28; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 10px 0; min-width: 260px; max-width: 320px;
  font-size: 13px;
  /* Scrollable, contained — never leaks scroll to page */
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rdp-header {
  padding: 6px 14px 10px; font-size: 11px; font-weight: 700;
  color: #58CC02; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 6px;
}
.rdp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rdp-row:last-child { border-bottom: none; }
.rdp-row-link {
  cursor: pointer; transition: background 0.12s;
}
.rdp-row-link:hover { background: rgba(255,255,255,0.06); }
.rdp-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdp-item { font-weight: 600; color: var(--text); font-size: 13px; }
.rdp-store-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rdp-store { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.rdp-addr {
  font-size: 10px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.rdp-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.rdp-price { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.rdp-disc {
  font-size: 11px; font-weight: 700; color: #58CC02;
  background: rgba(88,204,2,0.15); border-radius: 20px;
  padding: 2px 6px; white-space: nowrap;
}


/* ── New Ideas card — external recipe, read-only ─────────────────────────── */
.rec-ext-card {
  background: var(--surface-2);
  border-radius: var(--radius-xl);   /* 20px */
  border: 1px solid var(--border);
  border-bottom: 4px solid rgba(0,0,0,0.5);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, border-bottom-width 0.08s;
}
.rec-ext-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.rec-ext-card:active { transform: translateY(2px); border-bottom-width: 1px; }

.rec-ext-img-wrap {
  position: relative; width: 100%;
  aspect-ratio: 4/3; overflow: hidden;
  background: #23202e;
}
.rec-ext-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.rec-ext-img-placeholder {
  width: 100%; height: 100%;
  background: #23202e;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; opacity: 0.5;
}
/* "New" badge — top-right of image, accent blue */
.rec-new-tag {
  position: absolute; top: 10px; right: 10px;
  background: var(--accent); border-radius: 8px;
  padding: 4px 10px; font-size: 11px; font-weight: 800; color: #fff;
  letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(10,132,255,0.4);
}

/* Body */
.rec-ext-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rec-ext-title {
  font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.2;
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-ext-source {
  font-size: 13px; color: var(--text-2); font-weight: 500;
}
/* CTA row */
.rec-ext-btns { padding: 0 18px 18px; }
.rec-view-save-btn {
  width: 100%; padding: 12px 16px;
  background: var(--accent-dim);
  border: 1px solid rgba(10,132,255,0.3); border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  cursor: pointer; transition: background 0.15s;
}
.rec-view-save-btn:hover { background: rgba(10,132,255,0.22); }

/* Shared empty/loading states */
.rec-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text-3); font-size: 15px; line-height: 1.6;
  grid-column: 1 / -1;
}
.rec-loading {
  text-align: center; padding: 40px 20px;
  color: var(--text-3); font-size: 13px;
  grid-column: 1 / -1;
}

/* ══ COOKBOOK RECIPE POPUP SHEET ════════════════════════════════════════════ */

.rec-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 700;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  display: flex; align-items: center; justify-content: center;
}
.rec-sheet-backdrop.open { opacity: 1; pointer-events: all; }

.rec-sheet {
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border-2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
  z-index: 701;
  width: 680px; max-width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0; transform: scale(0.94) translateY(14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  position: relative;
}
.rec-sheet-backdrop.open .rec-sheet {
  opacity: 1; transform: scale(1) translateY(0);
  pointer-events: all;
}

.rec-sheet-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
  z-index: 5;
}
.rec-sheet-close:hover { background: rgba(0,0,0,0.65); }

.rec-sheet-hero-wrap {
  position: relative; width: 100%; height: 260px;
  border-radius: 20px 20px 0 0; overflow: hidden;
  flex-shrink: 0;
}
.rec-sheet-hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.rec-sheet-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
}
.rec-sheet-hero-title {
  position: absolute; bottom: 18px; left: 22px; right: 50px;
  font-size: 22px; font-weight: 800; color: #fff;
  line-height: 1.2; letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.rec-sheet-body {
  padding: 22px 24px 12px;
  display: flex; flex-direction: column; gap: 14px;
}

.rec-sheet-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2);
}
.rec-sheet-meta span { display: flex; align-items: center; gap: 5px; }
.rec-sheet-cooked-badge {
  background: rgba(200,98,58,0.18); color: var(--coral, #C8623A);
  padding: 3px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 700;
}

.rec-sheet-desc {
  font-size: 14px; color: var(--text-2); line-height: 1.65;
}

.rec-sheet-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 8px;
}

.rec-sheet-ings {
  display: flex; flex-direction: column; gap: 6px;
}
.rec-sheet-ing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.rec-sheet-ing-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.rec-sheet-ing-icon img { width: 26px; height: 26px; object-fit: contain; }
.rec-sheet-ing-name {
  flex: 1; font-size: 14px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.rec-sheet-ing-amount {
  font-size: 13px; color: var(--text-3); white-space: nowrap;
}
.rec-sheet-sale-badge {
  font-size: 11px; color: #4cd964;
  background: rgba(76,217,100,0.15); border-radius: 100px;
  padding: 2px 7px; display: inline-flex; align-items: center; gap: 3px;
}
.rec-sheet-sale-badge--click {
  cursor: pointer;
  transition: background 0.14s;
}
.rec-sheet-sale-badge--click:hover { background: rgba(76,217,100,0.28); }
.rec-sheet-pantry-badge {
  font-size: 11px; color: var(--coral, #C8623A);
  background: rgba(200,98,58,0.15); border-radius: 100px;
  padding: 2px 7px; display: inline-flex; align-items: center; gap: 3px;
}

.rec-sheet-steps-wrap { padding-top: 4px; }
.rec-sheet-steps {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.rec-sheet-step {
  font-size: 14px; color: var(--text-2); line-height: 1.6;
  padding: 10px 12px; background: var(--surface-2);
  border-radius: 10px; border: 1px solid var(--border);
  list-style: decimal;
}

.rec-sheet-actions {
  display: flex; gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
  background: var(--surface);
}
.rec-sheet-cook-btn {
  flex: 1; padding: 13px;
  background: #58CC02;
  border: none; border-bottom: 3px solid #46A302;
  border-radius: var(--radius-pill, 100px);
  color: #fff; font-size: 15px; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 7px;
  transition: background 0.15s, transform 0.08s;
}
.rec-sheet-cook-btn:hover { background: #61D900; }
.rec-sheet-cook-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.rec-sheet-cook-btn:disabled { opacity: 0.6; cursor: default; }
.rec-sheet-view-full-btn {
  padding: 13px 18px;
  background: var(--surface-3);
  border: 1px solid var(--border-2); border-radius: var(--radius-pill, 100px);
  color: var(--text-2); font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  transition: background 0.15s;
  white-space: nowrap;
}
.rec-sheet-view-full-btn:hover { background: var(--surface-2); }
.rec-sheet-loading, .rec-sheet-error {
  text-align: center; padding: 30px; color: var(--text-3); font-size: 14px;
}

/* ══ CUSTOM CONFIRM DIALOG ══════════════════════════════════════════════════ */
.klconfirm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.klconfirm-backdrop.open {
  opacity: 1; pointer-events: all;
}
.klconfirm {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.75);
  padding: 32px 28px 24px;
  width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: scale(0.88) translateY(12px);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.klconfirm-backdrop.open .klconfirm {
  transform: scale(1) translateY(0);
}
.klconfirm-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,69,58,0.15);
  border: 1.5px solid rgba(255,69,58,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #ff453a;
}
.klconfirm-msg {
  font-size: 15px; font-weight: 600; color: var(--text);
  text-align: center; line-height: 1.4;
}
.klconfirm-actions {
  display: flex; gap: 10px; width: 100%; margin-top: 8px;
}
.klconfirm-cancel {
  flex: 1; padding: 12px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: background 0.15s;
}
.klconfirm-cancel:hover { background: var(--surface-2); color: var(--text); }
.klconfirm-ok {
  flex: 1; padding: 12px;
  background: #ff453a; border: none;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700; color: #fff;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.klconfirm-ok:hover  { opacity: 0.88; }
.klconfirm-ok:active { transform: scale(0.96); }

/* ══ PANTRY BAR ═════════════════════════════════════════════════════════════ */

/* ── Pantry pill button (lives in filter row) ────────────────────────────── */
.nfx-pantry-pill-wrap {
  position: relative; flex-shrink: 0;
}
.nfx-pantry-pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--coral, #C8623A);
  border: none; border-radius: 100px;
  min-width: 32px; height: 28px; padding: 0 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.nfx-pantry-pill-btn:hover { background: #d97044; }
.nfx-pantry-pill-btn .nfx-pantry-count {
  background: none; padding: 0;
  font-size: 13px; font-weight: 700; color: #fff;
}
.nfx-pantry-pill-icon {
  font-size: 13px; color: rgba(255,255,255,0.85);
}

/* ── Pantry popover ──────────────────────────────────────────────────────── */
.nfx-pantry-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 14px; width: 480px; max-width: calc(100vw - 32px);
}
.nfx-pantry-popover-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 10px;
}

.nfx-pantry-wrap {
  margin: 0 20px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  position: relative; z-index: 1;
}

/* Always-visible top row */
.nfx-pantry-wrap > .nfx-pantry-input-row {
  padding: 8px 10px 8px 8px;
  border-radius: 14px;
}

/* Toggle button (house icon + count + chevron) */
.nfx-pantry-toggle-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  background: none; border: none;
  color: var(--text-2); font-size: 15px;
  cursor: pointer; padding: 4px 6px; border-radius: 8px;
  transition: color 0.15s;
  white-space: nowrap;
}
.nfx-pantry-toggle-btn:hover { color: var(--text); }

.nfx-pantry-count {
  background: var(--coral, #C8623A); color: #fff;
  border-radius: 100px; font-size: 10px; font-weight: 700;
  padding: 1px 7px; min-width: 18px; text-align: center;
}
.nfx-pantry-chevron { font-size: 11px; transition: transform 0.2s; }

.nfx-pantry-body {
  padding: 10px 0 0;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nfx-pantry-chips {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 18px;
}
.nfx-pantry-empty { font-size: 12px; color: var(--text-3); }
.nfx-pantry-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: 100px; padding: 4px 10px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.nfx-pantry-chip--staple {
  opacity: 0.55;
  border-style: dashed;
}
.nfx-pantry-chip-remove {
  background: none; border: none; padding: 0;
  color: var(--text-3); cursor: pointer; font-size: 12px;
  display: flex; align-items: center;
  transition: color 0.15s;
}
.nfx-pantry-chip-remove:hover { color: var(--text); }

.nfx-pantry-input-row {
  display: flex; gap: 8px; align-items: center;
}
.nfx-pantry-input-wrap {
  flex: 1; position: relative;
}
.nfx-pantry-input-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 14px; pointer-events: none;
}
.nfx-pantry-input {
  width: 100%; padding: 8px 10px 8px 30px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; color: var(--text);
  font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.nfx-pantry-input:focus { border-color: var(--coral, #C8623A); }

.nfx-pantry-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: 10px; z-index: 200;
  display: none; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.nfx-pantry-sug {
  padding: 8px 12px; font-size: 13px; color: var(--text-2);
  cursor: pointer; transition: background 0.12s;
  display: flex; align-items: center; gap: 8px;
}
.nfx-pantry-sug:hover { background: var(--surface-2); color: var(--text); }
.nfx-pantry-sug--free { font-style: italic; color: var(--text-3); }
.nfx-pantry-sug-icon {
  width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; border-radius: 4px;
}
.nfx-pantry-sug-icon-fallback { font-size: 16px; flex-shrink: 0; }
.nfx-pantry-chip-icon {
  width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; border-radius: 3px;
}
.nfx-pantry-chip-icon-fallback { font-size: 14px; flex-shrink: 0; }

.nfx-pantry-photo-btn {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--border-2);
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: background 0.15s;
}
.nfx-pantry-photo-btn:hover { background: var(--surface-2); color: var(--text); }

.nfx-pantry-mic-btn {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent, #0A84FF); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: background 0.15s;
}
.nfx-pantry-mic-btn:hover { background: #0070e0; }

/* Photo confirmation */
.nfx-pantry-confirm-header {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.nfx-pantry-confirm-list {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.nfx-pantry-confirm-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 12px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}
.nfx-pantry-confirm-item input { accent-color: var(--coral, #C8623A); }
.nfx-pantry-confirm-actions { display: flex; gap: 8px; }
.nfx-pantry-confirm-add {
  flex: 1; padding: 9px; border-radius: 100px;
  background: var(--coral, #C8623A); border: none;
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.nfx-pantry-confirm-cancel {
  padding: 9px 16px; border-radius: 100px;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; cursor: pointer;
}

/* Add button next to pantry input */
.nfx-pantry-add-btn {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--coral, #C8623A); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; transition: background 0.15s;
}
.nfx-pantry-add-btn:hover { background: #d97044; }

/* ══ RESPONSIVE — iPad / small screens ═══════════════════════════════════════ */

/* Below 960px: 2-card layout, compact hero, tighter paddings */
@media (max-width: 959px) {

  /* Filter bar: smaller chips */
  .rec-time-chip, .rec-filter-chip {
    padding: 4px 10px; font-size: 12px;
  }
  .rec-cat-btn { padding: 4px 10px; font-size: 12px; }
  .rec-filter-bar-outer { padding: 8px 14px; }

  /* Section padding tighter */
  .nfx-section { padding: 0 14px; }

  /* Hero image shorter on 2-card layout — more content fits on screen */
  .nfx-hero { height: 160px; }

  /* Pantry popover */
  .nfx-pantry-popover { min-width: 280px; max-width: calc(100vw - 40px); right: -10px; }

  /* Cook Now header */
  .nfx-header { margin-bottom: 12px; }

  /* Arrow nav smaller */
  .nfx-hero-nav { width: 30px; height: 30px; font-size: 12px; }

  /* Recipe popup — full width on narrow screens */
  .rec-sheet { width: 96vw; max-width: 96vw; }
  .rec-sheet-hero-wrap { height: 200px; }

  /* Inspiration sheet — full width */
  .insp-sheet { width: 96vw; max-width: 96vw; }
  .insp-sheet-img-col { flex: 0 0 200px; }
  .insp-sheet-img { min-height: 200px; }
}

/* Below 700px: single column pantry chips */
@media (max-width: 700px) {
  .nfx-pantry-chips { gap: 4px; }
  .nfx-pantry-chip { font-size: 11px; padding: 3px 8px; }
}

/* ── YouTube overlay ─────────────────────────────────────────────────────── */
#yt-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
#yt-overlay.open { display: flex; }

#yt-overlay-box {
  position: relative;
  width: min(90vw, 900px);
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}

#yt-overlay-iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}

#yt-overlay-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; color: #fff;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
#yt-overlay-close:hover { background: rgba(255,255,255,0.15); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHOPPING LIST
   ══════════════════════════════════════════════════════════════════════════ */

/* Override only: padding reset so we control spacing ourselves.
   display is handled by .integration-panel / .integration-panel.active — do NOT set it here. */
.sl-panel { padding: 0; }

/* Header — reuse panel-header base, just adjust padding */
.sl-panel > .panel-header {
  padding: 28px 36px 18px;
  margin-bottom: 0;
}

.sl-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sl-clear-btn, .sl-sync-btn {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 12px;
  padding: 6px 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, color 0.15s;
}
.sl-clear-btn:hover, .sl-sync-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

@keyframes sl-spin { to { transform: rotate(360deg); } }
.sl-spinning i { animation: sl-spin 0.7s linear infinite; display: inline-block; }

/* Add row */
.sl-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.sl-add-circle {
  width: 26px; height: 26px;
  border: 2px solid rgba(255,165,0,0.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,165,0,0.65);
  font-size: 16px;
  flex-shrink: 0;
}

.sl-add-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.sl-add-input::placeholder { color: var(--text-3); }

.sl-add-btn {
  background: rgba(255,165,0,0.15);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: var(--radius-sm);
  color: rgba(255,165,0,0.9);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.sl-add-btn:hover { background: rgba(255,165,0,0.25); }

/* Scroll area */
.sl-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.sl-scroll::-webkit-scrollbar { width: 6px; }
.sl-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

/* List */
.sl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-empty {
  padding: 48px 36px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* Section headers — one per dish/list */
.sl-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px 8px 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}
.sl-section-header:first-child { margin-top: 0; }
.sl-section-header--main {
  color: var(--text-3);
}
.sl-section-header--recipe {
  color: var(--accent);
}
.sl-section-label { display: flex; align-items: center; gap: 6px; }
.sl-section-count {
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
}

/* Divider between uncompleted / completed */
.sl-divider {
  padding: 14px 36px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Item row */
.sl-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 28px 16px 36px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.sl-item:hover { background: var(--surface); }

/* Checkbox button */
.sl-check {
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  color: var(--text-3);
  font-size: 24px;
  transition: color 0.15s, transform 0.1s;
}
.sl-check:hover { color: rgba(255,165,0,0.8); transform: scale(1.1); }
.sl-check-icon--done { color: #f5a623; }

/* Item body (title + meta chips) */
.sl-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.sl-item-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.sl-item--done .sl-item-title {
  text-decoration: line-through;
  color: var(--text-3);
}

/* Meta chips row */
.sl-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-chip--store {
  background: rgba(10,132,255,0.13);
  color: var(--accent);
}
.sl-chip--price {
  background: rgba(88,204,2,0.15);
  color: #58CC02;
}
.sl-chip--recipe {
  background: var(--surface-2);
  color: var(--text-2);
}
.sl-chip--amount {
  background: var(--surface-2);
  color: var(--text-2);
}
.sl-chip--date {
  background: transparent;
  color: var(--text-3);
  padding-left: 2px;
  font-weight: 400;
}
.sl-item--done .sl-chip { opacity: 0.4; }

/* Highlight pulse (duplicate item already on list) */
@keyframes sl-pulse {
  0%   { background: rgba(10,132,255,0.18); }
  100% { background: transparent; }
}
.sl-item--highlight { animation: sl-pulse 1.2s ease-out; }

/* Delete button */
.sl-delete {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 16px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.sl-item:hover .sl-delete { opacity: 1; }
.sl-delete:hover { color: #ff453a; background: rgba(255,69,58,0.1); }

/* Footer */
.sl-footer {
  padding: 9px 36px;
  font-size: 11px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   MEDITATION PANEL — Headspace-inspired repaint
   Warm orange primary (#FF8C42) + peach glow (#FFB067) + cream accents.
   Duolingo-chunky buttons. No emojis. Generous spacing.
   ══════════════════════════════════════════════════════════════════════ */

/* Left-nav tile: GRAY when idle, colorful only when active.
   The per-integration [data-integration="meditation"].active rule handles the
   colored state (defined with the other .active overrides above). */
.k-int-tile--zen .k-int-icon-bubble--zen { background: var(--surface-3); color: var(--text-3); }
.k-int-tile--zen .k-int-icon-bubble--zen .bi { color: var(--text-3); }
.k-int-tile--zen.active .k-int-icon-bubble--zen { background: rgba(255,140,66,0.22); }
.k-int-tile--zen.active .k-int-icon-bubble--zen .bi { color: #FF8C42; }

/* Headspace palette (used throughout) */
/*   --hs-orange-1 #FF8C42  primary orange  */
/*   --hs-orange-2 #FFA963  warm highlight  */
/*   --hs-orange-3 #FFB067  peach           */
/*   --hs-orange-shadow #C95F1F  press shadow (Duolingo bottom) */
/*   --hs-cream    #FFE8CC  soft cream      */
/*   --hs-deep     #2B2D42  deep ink text   */

/* Give the meditation panel a bit more horizontal room so the hero card isn't cramped */
#panel-meditation { padding-left: 36px; padding-right: 36px; }

/* Panel scaffold — breathable Headspace rhythm */
.zen-panel { position: relative; overflow: hidden; }
.zen-panel.active { display: flex; flex-direction: column; }
.zen-scroll-body {
  flex: 1; overflow-y: scroll; min-height: 0;
  display: flex; flex-direction: column;
  padding: 4px 2px 40px; gap: 30px;
}
/* Hide the scrollbar visually but keep the space reserved — prevents the
   hero card from reflowing when the chooser opens and the panel gets tall */
.zen-scroll-body::-webkit-scrollbar { width: 0; background: transparent; }
.zen-empty {
  font-size: 13px; color: var(--text-3); padding: 10px 0;
  text-align: left; font-style: italic;
}

/* ── Stoic wisdom card (Klaus speech bubble) ─────────────────────────── */
.zen-stoic-card {
  display: flex; align-items: flex-start; gap: 10px;
}
.zen-stoic-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--border-2);
}
.zen-stoic-bubble {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 14px 14px 14px;
  padding: 10px 14px;
  position: relative;
}
.zen-stoic-bubble::before {
  content: '';
  position: absolute; top: 10px; left: -7px;
  border: 7px solid transparent;
  border-right-color: var(--border);
  border-left: 0;
}
.zen-stoic-bubble::after {
  content: '';
  position: absolute; top: 11px; left: -5px;
  border: 6px solid transparent;
  border-right-color: var(--surface-2);
  border-left: 0;
}
.zen-stoic-eyebrow {
  font-size: 9.5px; font-weight: 900; color: #FF8C42;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 5px;
}
.zen-stoic-text {
  font-size: 13.5px; color: var(--text); line-height: 1.52;
  font-style: italic;
}
.zen-stoic-attribution {
  font-size: 10.5px; color: var(--text-3); margin-top: 6px;
  font-style: normal; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Streak pills (top row) ───────────────────────────────────────────── */
.zen-streaks { display: flex; gap: 14px; }
.zen-streak-pill {
  flex: 1; display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 9px 20px 9px 9px;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.zen-streak-pill.on {
  background: linear-gradient(90deg, rgba(255,140,66,0.10), rgba(255,176,103,0.05));
  border-color: rgba(255,140,66,0.55);
  box-shadow: 0 0 0 3px rgba(255,140,66,0.10), 0 2px 10px rgba(201,95,31,0.10);
}
.zen-streak-pill--bina.on {
  background: linear-gradient(90deg, rgba(242,136,163,0.10), rgba(255,176,103,0.05));
  border-color: rgba(242,136,163,0.55);
  box-shadow: 0 0 0 3px rgba(242,136,163,0.10), 0 2px 10px rgba(180,70,100,0.10);
}
.zen-streak-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--surface);
}
.zen-streak-pill.on .zen-streak-avatar { border-color: #fff; box-shadow: 0 0 0 1.5px #FF8C42; }
.zen-streak-pill--bina.on .zen-streak-avatar { box-shadow: 0 0 0 1.5px #F288A3; }
.zen-streak-text { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.zen-streak-num {
  font-size: 24px; font-weight: 900; color: var(--text);
  letter-spacing: -0.6px; line-height: 1;
}
.zen-streak-lbl {
  font-size: 11px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.10em;
}
.zen-streak-dots { margin-left: auto; display: flex; gap: 5px; }
.zen-streak-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-3);
  transition: background 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
.zen-streak-dot.on {
  background: #FF8C42; transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(255,140,66,0.22);
}
.zen-streak-pill--bina .zen-streak-dot.on {
  background: #F288A3;
  box-shadow: 0 0 0 2px rgba(242,136,163,0.22);
}

/* ── Klaus hero card — the single big CTA ─────────────────────────────── */
/* ── Hero card — Headspace-inspired with per-type illustration ─────────── */
.zen-hero-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 0;
  border: none; border-radius: 28px;
  padding: 28px 26px;
  min-height: 180px;
  cursor: pointer;
  /* default colour — overridden per data-type below */
  background: #6B3CB8;
  box-shadow: 0 10px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.12s, box-shadow 0.3s;
}
.zen-hero-card[data-type="breathwork"] {
  /* bright saturated blue — matches illustration background */
  background: #1E9FE0;
  box-shadow: 0 10px 32px rgba(10,90,180,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.zen-hero-card[data-type="calming"] {
  /* deep violet — matches illustration background */
  background: #6B3CB8;
  box-shadow: 0 10px 32px rgba(50,20,120,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.zen-hero-card[data-type="gratitude"] {
  /* muted dusty mauve-rose — Headspace-inspired */
  background: #9B3A54;
  box-shadow: 0 10px 32px rgba(100,20,44,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.zen-hero-card[data-type="focus"] {
  /* muted terracotta-sienna — Headspace-inspired */
  background: #7A3F18;
  box-shadow: 0 10px 32px rgba(100,40,0,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.zen-hero-card:hover { transform: translateY(-2px); filter: brightness(1.06); }
.zen-hero-card:active { transform: translateY(2px); }
#zen-hero-card-2 { margin-top: 12px; }

/* Illustration — fills the right ~45% of the card, bleeds top/bottom */
.zen-hero-illustration {
  position: absolute;
  right: -8%; top: -12%;
  height: 124%; width: 52%;
  object-fit: cover;
  border-radius: 0;
  pointer-events: none;
  /* soft fade on the left edge so it blends into the card colour */
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 22%, black 55%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 22%, black 55%);
}

.zen-hero-body {
  /* only take the left ~55% so the illustration has room */
  width: 55%; flex-shrink: 0; min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.zen-hero-eyebrow {
  font-size: 10px; font-weight: 900; color: rgba(255,255,255,0.70);
  text-transform: uppercase; letter-spacing: 0.20em;
}
.zen-hero-title {
  font-size: 22px; font-weight: 800; color: #fff;
  line-height: 1.18; letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.zen-hero-reason {
  font-size: 13px; color: rgba(255,255,255,0.88); line-height: 1.45;
}
.zen-hero-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.zen-meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; color: rgba(0,0,0,0.55);
  text-transform: uppercase; letter-spacing: 0.09em;
  background: rgba(255,255,255,0.92);
  border-radius: 100px; padding: 4px 11px;
}
.zen-pill-avatar {
  width: 18px; height: 18px;
  border-radius: 50%; object-fit: cover;
  margin-left: -4px;
}

/* Play button — sits over the illustration on the right */
.zen-hero-play {
  position: absolute; right: 22px;
  flex-shrink: 0; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.96); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform 0.08s, box-shadow 0.15s;
  color: #333;
}
.zen-hero-play i { margin-left: 3px; }
.zen-hero-card:hover .zen-hero-play { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,0.30); }
.zen-hero-card:active .zen-hero-play { transform: translateY(2px); }

/* ── Chooser toggle (collapsed by default) ────────────────────────────── */
.zen-chooser-toggle {
  align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  padding: 10px 18px;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.08s;
}
.zen-chooser-toggle:hover {
  color: #FF8C42; border-color: rgba(255,140,66,0.5);
  background: rgba(255,140,66,0.06);
}
.zen-chooser-toggle i {
  font-size: 13px;
  transition: transform 0.25s;
}
.zen-chooser-toggle.open i { transform: rotate(180deg); }

/* ── Chooser sheet ───────────────────────────────────────────────────── */
.zen-chooser {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 32px 32px 36px;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04);
  animation: zen-slide-down 0.28s ease;
}
.zen-chooser-row {
  display: flex; flex-direction: column; gap: 12px;
}
@keyframes zen-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section label above each chooser row */
.zen-chooser-label {
  font-size: 10.5px; font-weight: 800; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 10px;
}

/* Type cards (4-across) — per-category color system */
.zen-chooser-types {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.zen-type-card {
  position: relative;
  background: var(--surface-3); border: 1.5px solid var(--border);
  border-bottom: 4px solid var(--border-2);
  border-radius: 18px;
  min-height: 96px;
  padding: 18px 8px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, border-color 0.15s;
}
.zen-type-card i {
  font-size: 26px; color: var(--text-3);
  transition: color 0.15s, transform 0.15s;
}
.zen-type-name {
  font-size: 11.5px; font-weight: 800; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.zen-type-card:active { transform: translateY(1px); border-bottom-width: 2px; }

/* Per-category colors (breathwork / gratitude / calming / focus) */
.zen-type-card[data-type="breathwork"]:hover { border-color: rgba(93,169,233,0.55); background: rgba(93,169,233,0.06); }
.zen-type-card[data-type="breathwork"]:hover i { color: #5DA9E9; }
.zen-type-card[data-type="breathwork"].active {
  background: linear-gradient(135deg, rgba(93,169,233,0.20), rgba(93,169,233,0.08));
  border-color: #5DA9E9; border-bottom-color: #3B7FBF;
}
.zen-type-card[data-type="breathwork"].active i { color: #3B7FBF; }

.zen-type-card[data-type="gratitude"]:hover { border-color: rgba(242,136,163,0.55); background: rgba(242,136,163,0.06); }
.zen-type-card[data-type="gratitude"]:hover i { color: #F288A3; }
.zen-type-card[data-type="gratitude"].active {
  background: linear-gradient(135deg, rgba(242,136,163,0.22), rgba(242,136,163,0.08));
  border-color: #F288A3; border-bottom-color: #C25879;
}
.zen-type-card[data-type="gratitude"].active i { color: #C25879; }

.zen-type-card[data-type="calming"]:hover { border-color: rgba(158,132,227,0.55); background: rgba(158,132,227,0.06); }
.zen-type-card[data-type="calming"]:hover i { color: #9E84E3; }
.zen-type-card[data-type="calming"].active {
  background: linear-gradient(135deg, rgba(158,132,227,0.20), rgba(158,132,227,0.08));
  border-color: #9E84E3; border-bottom-color: #6E56B5;
}
.zen-type-card[data-type="calming"].active i { color: #6E56B5; }

.zen-type-card[data-type="focus"]:hover { border-color: rgba(247,192,75,0.60); background: rgba(247,192,75,0.06); }
.zen-type-card[data-type="focus"]:hover i { color: #D99A1A; }
.zen-type-card[data-type="focus"].active {
  background: linear-gradient(135deg, rgba(247,192,75,0.22), rgba(247,192,75,0.08));
  border-color: #F7C04B; border-bottom-color: #B88415;
}
.zen-type-card[data-type="focus"].active i { color: #B88415; }

/* Duration pills (inline row) */
.zen-chooser-dur {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 0 22px; /* room for active pill lift + shadow */
}
.zen-dur-pill {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-3); border: 1.5px solid var(--border);
  font-size: 16px; font-weight: 900; color: var(--text);
  cursor: pointer; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.08s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.zen-dur-pill:hover {
  border-color: #FF8C42; color: #FF8C42;
  background: rgba(255,140,66,0.06);
}
.zen-dur-pill:active { transform: translateY(1px); }
.zen-dur-pill--active {
  background: linear-gradient(135deg, #FF8C42, #FFA963);
  color: #fff; border-color: #FF8C42;
  box-shadow: 0 3px 0 #C95F1F;
}
.zen-dur-pill--active:hover { color: #fff; background: linear-gradient(135deg, #FF8C42, #FFA963); }
.zen-dur-suffix {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-left: auto;
}

/* Participant tabs — readable always, glowing rail when active */
.zen-chooser-parts {
  display: flex; gap: 6px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 100px; padding: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.zen-part-pill {
  flex: 1; border: none; background: transparent;
  border-radius: 100px; padding: 12px 18px;
  font-size: 13.5px; font-weight: 700; color: var(--text);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.zen-part-pill:hover { background: rgba(255,140,66,0.08); color: #FF8C42; }
.zen-part-pill--active {
  background: linear-gradient(135deg, #FF8C42, #FFA963);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255,140,66,0.35), 0 0 0 0.5px rgba(201,95,31,0.35);
}
.zen-part-pill--active:hover {
  color: #fff;
  background: linear-gradient(135deg, #FF8C42, #FFA963);
}

/* Begin button — full width, chunky but not bleeding */
.zen-chooser-begin {
  width: 100%;
  background: linear-gradient(135deg, #FF8C42, #FFA963);
  color: #fff; border: none;
  border-radius: 18px; padding: 18px;
  font-size: 16px; font-weight: 800;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 #C95F1F;
  transition: transform 0.08s, box-shadow 0.15s, filter 0.15s;
  letter-spacing: 0.03em;
  margin-top: 22px;
}
.zen-chooser-begin:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 5px 0 #C95F1F;
}
.zen-chooser-begin:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #C95F1F;
}
.zen-chooser-begin i { font-size: 20px; }

/* ── History strip ───────────────────────────────────────────────────── */
.zen-history-wrap { display: flex; flex-direction: column; gap: 12px; }
.zen-history-hdr {
  font-size: 10.5px; font-weight: 800; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.zen-history-strip {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 2px 0;
}
.zen-hist-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 8px 14px;
  font-size: 12px; color: var(--text);
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}
.zen-hist-chip:hover {
  border-color: rgba(255,140,66,0.5);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(201,95,31,0.08);
}
.zen-hist-type {
  font-weight: 800; color: #FF8C42;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px;
}
.zen-hist-dur  { font-weight: 700; color: var(--text); }
.zen-hist-when { color: var(--text-3); font-size: 11px; }

/* ── Gratitude jar (warm cream card) ─────────────────────────────────── */
.zen-jar-wrap { display: flex; flex-direction: column; gap: 10px; }
.zen-jar-hdr {
  font-size: 11px; font-weight: 800; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.zen-jar { display: flex; flex-direction: column; gap: 10px; }
.zen-jar-entry {
  background: linear-gradient(135deg, rgba(255,232,204,0.14), rgba(255,176,103,0.08));
  border: 1px solid rgba(255,176,103,0.25);
  border-radius: 14px;
  padding: 12px 16px;
}
.zen-jar-text { font-size: 14px; color: var(--text); line-height: 1.45; margin-bottom: 4px; }
.zen-jar-meta { font-size: 10px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════════════
   FULL-SCREEN SESSION OVERLAY — Headspace-style parallax scene
   Warm illustration base, breathing halo, drifting clouds, glass-morph UI.
   ══════════════════════════════════════════════════════════════════════ */
.zen-overlay {
  position: fixed; inset: 0;
  background: #F7C87A;
  z-index: 9000;
  overflow: hidden;
  animation: zen-fade-in 0.6s ease forwards;
  touch-action: manipulation;
  --zen-ink:       #2A1108;
  --zen-ink-soft:  rgba(42,17,8,0.55);
  --zen-glass:     rgba(255,255,255,0.30);
  --zen-glass-bd:  rgba(255,255,255,0.55);
  --zen-halo:      rgba(255,230,170,0.55);
}
.zen-overlay[data-type="breathwork"] { background: #B9DFEA; --zen-halo: rgba(255,245,205,0.55); }
.zen-overlay[data-type="calming"]    {
  background: #3B2C6E;
  --zen-ink:      #FDF5E6;
  --zen-ink-soft: rgba(253,245,230,0.65);
  --zen-glass:    rgba(20,10,40,0.30);
  --zen-glass-bd: rgba(255,255,255,0.22);
  --zen-halo:     rgba(220,200,255,0.45);
}
.zen-overlay[data-type="gratitude"]  { background: #9B3A54; --zen-halo: rgba(255,180,200,0.50); }
.zen-overlay[data-type="focus"]      { background: #7A3F18; --zen-halo: rgba(255,200,150,0.50); }

@keyframes zen-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Layer 0a: scene-bob wrapper (gentle vertical float) ── */
.zen-scene-wrap {
  position: absolute; inset: 0;
  animation: zen-float 14s ease-in-out infinite;
  will-change: transform;
}
@keyframes zen-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.6%); }
}

/* ── Layer 0b: generated scene with slow ken-burns ── */
.zen-scene {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  animation: zen-kenburns 40s ease-in-out infinite alternate;
  transform-origin: 50% 55%;
  will-change: transform;
}
.zen-overlay[data-type="breathwork"] .zen-scene { background-image: url("/meditation_illustrations/scene_breathwork.png"); }
.zen-overlay[data-type="calming"]    .zen-scene { background-image: url("/meditation_illustrations/scene_calming.png"); }
.zen-overlay[data-type="gratitude"]  .zen-scene { background-image: url("/meditation_illustrations/scene_gratitude.png"); }
.zen-overlay[data-type="focus"]      .zen-scene { background-image: url("/meditation_illustrations/scene_focus.png"); }
@keyframes zen-kenburns {
  0%   { transform: scale(1.00) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.2%, -1.0%); }
}

/* ── Layer 0c: slowly rotating sun-ray aura, behind halo ── */
.zen-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 1400px; height: 1400px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg, var(--zen-halo) 4deg, transparent 12deg,
    transparent 30deg, var(--zen-halo) 34deg, transparent 42deg,
    transparent 60deg, var(--zen-halo) 64deg, transparent 72deg,
    transparent 90deg, var(--zen-halo) 94deg, transparent 102deg,
    transparent 120deg, var(--zen-halo) 124deg, transparent 132deg,
    transparent 150deg, var(--zen-halo) 154deg, transparent 162deg,
    transparent 180deg, var(--zen-halo) 184deg, transparent 192deg,
    transparent 210deg, var(--zen-halo) 214deg, transparent 222deg,
    transparent 240deg, var(--zen-halo) 244deg, transparent 252deg,
    transparent 270deg, var(--zen-halo) 274deg, transparent 282deg,
    transparent 300deg, var(--zen-halo) 304deg, transparent 312deg,
    transparent 330deg, var(--zen-halo) 334deg, transparent 342deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, black 5%, transparent 55%);
          mask-image: radial-gradient(circle, black 5%, transparent 55%);
  opacity: 0.32;
  mix-blend-mode: screen;
  animation: zen-rays-spin 110s linear infinite;
  pointer-events: none;
  filter: blur(2px);
  will-change: transform;
}
.zen-overlay[data-type="calming"] .zen-rays { opacity: 0.16; mix-blend-mode: soft-light; }
@keyframes zen-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Layer 1: breathing halo over the mascot, 8s rhythm ── */
.zen-breath-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--zen-halo) 0%, transparent 62%);
  filter: blur(6px);
  animation: zen-breathe 8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.zen-overlay[data-type="calming"] .zen-breath-halo { mix-blend-mode: soft-light; }
@keyframes zen-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1.00; }
}

/* ── Layer 2: parallax clouds (five depths, staggered speeds) ── */
.zen-cloud {
  position: absolute;
  fill: rgba(255,255,255,0.55);
  filter: blur(0.3px) drop-shadow(0 6px 14px rgba(0,0,0,0.06));
  pointer-events: none;
  will-change: transform;
}
.zen-overlay[data-type="calming"] .zen-cloud { fill: rgba(255,245,230,0.22); }
.zen-cloud-upper { top:  6%;  left: -20%; width: 140px; height:  58px; opacity: 0.40; filter: blur(1.2px); animation: zen-drift-right 120s linear infinite; animation-delay: -35s; }
.zen-cloud-far   { top: 16%;  left: -20%; width: 180px; height:  75px; opacity: 0.55; animation: zen-drift-right  90s linear infinite; }
.zen-cloud-mid   { top: 32%;  left: -30%; width: 280px; height: 112px; opacity: 0.70; animation: zen-drift-right  60s linear infinite; animation-delay: -20s; }
.zen-cloud-near  { bottom:18%; left: -40%; width: 420px; height: 160px; opacity: 0.85; animation: zen-drift-left   45s linear infinite; animation-delay: -10s; }
.zen-cloud-fore  { bottom: 4%; left: -50%; width: 560px; height: 210px; opacity: 0.55; filter: blur(2px); animation: zen-drift-left  30s linear infinite; animation-delay: -5s; }
@keyframes zen-drift-right { from { transform: translateX(0); } to { transform: translateX(180vw); } }
@keyframes zen-drift-left  { from { transform: translateX(180vw); } to { transform: translateX(0); } }

/* ── Layer 2b: Klaus companion bubble — parked in the top-left corner, drifts calmly in place ── */
.zen-klaus-bubble {
  position: absolute;
  top: 32px; left: 32px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.24) 0%, rgba(22,14,36,0.62) 55%, rgba(22,14,36,0.82) 100%);
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22), 0 0 0 8px rgba(255,255,255,0.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: zen-bubble-flow 14s ease-in-out infinite;
  pointer-events: none; overflow: hidden;
  z-index: 9;
  will-change: transform;
}
.zen-klaus-bubble-inner {
  position: absolute; inset: 0;
  animation: zen-klaus-alive 7s ease-in-out infinite;
  transform-origin: 50% 62%;
  will-change: transform;
}
.zen-klaus-img {
  position: absolute;
  top: -4%; left: 50%;
  width: 116%; height: auto;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  pointer-events: none; user-select: none;
  transition: opacity 0.08s linear;
}
.zen-klaus-blink { opacity: 0; }
/* Bubble gently drifts in 2D in place — never leaves its corner */
@keyframes zen-bubble-flow {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(8px, -5px); }
  40%  { transform: translate(4px, -11px); }
  60%  { transform: translate(-6px, -6px); }
  80%  { transform: translate(-4px, 3px); }
  100% { transform: translate(0, 0); }
}
/* Klaus subtly sways + breathes inside the bubble so he looks alive */
@keyframes zen-klaus-alive {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1.00); }
  25%  { transform: translate(-2px, -2px) rotate(-1.4deg) scale(1.02); }
  50%  { transform: translate(1px, 1px) rotate(0.6deg) scale(1.04); }
  75%  { transform: translate(2px, -1px) rotate(1.6deg) scale(1.02); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.00); }
}

/* ── Layer 3: UI — glass-morph pills readable on both light & dark scenes ── */
.zen-overlay-end {
  position: absolute; bottom: 40px; right: 40px;
  background: var(--zen-glass);
  border: 1px solid var(--zen-glass-bd);
  color: var(--zen-ink);
  border-radius: 100px; padding: 11px 22px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; font-family: 'Inter', sans-serif;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.15s, background 0.15s;
  z-index: 10;
}
.zen-overlay-end:hover { background: rgba(255,255,255,0.45); transform: translateY(-1px); }

.zen-overlay-text {
  position: absolute;
  left: 50%; bottom: 22%;
  transform: translateX(-50%);
  max-width: 640px; width: calc(100% - 80px);
  text-align: center;
  font-size: 20px; font-weight: 600; color: var(--zen-ink);
  line-height: 1.55; letter-spacing: -0.005em;
  min-height: 60px; padding: 14px 28px;
  background: var(--zen-glass);
  border: 1px solid var(--zen-glass-bd);
  border-radius: 20px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  transition: opacity 0.5s;
  z-index: 10;
}
/* Gratitude mascot sits bottom-centre — move the text pill into the upper sky so it doesn't cover the mascot's face */
.zen-overlay[data-type="gratitude"] .zen-overlay-text { top: 9%; bottom: auto; }
.zen-overlay-text:empty { background: transparent; border-color: transparent; backdrop-filter: none; }
.zen-overlay-text.preparing {
  font-style: italic;
  color: var(--zen-ink-soft);
  animation: zen-prep-pulse 2.4s ease-in-out infinite;
}
@keyframes zen-prep-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.00; }
}

.zen-overlay-timer {
  position: absolute; bottom: 40px; left: 40px;
  font-size: 13px; color: var(--zen-ink-soft);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums; font-weight: 700;
  padding: 9px 16px;
  background: var(--zen-glass);
  border: 1px solid var(--zen-glass-bd);
  border-radius: 100px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  z-index: 10;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zen-scene, .zen-scene-wrap, .zen-breath-halo, .zen-cloud, .zen-rays,
  .zen-klaus-bubble, .zen-klaus-bubble-inner { animation: none; }
}

/* Mobile tuning */
@media (max-width: 640px) {
  .header-sp-vol-btn {
    width: 72px !important;
    height: 72px !important;
    font-size: 42px !important;
    margin-right: 14px !important;
  }
  .header-sp-vol-popup {
    padding: 24px 20px !important;
    border-radius: 32px !important;
  }
  .header-sp-vol-label {
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }
  .header-sp-vol-slider {
    height: 260px !important;
    width: 44px !important;
  }

  .zen-breath-halo  { width: 380px; height: 380px; }
  .zen-rays         { width: 900px; height: 900px; opacity: 0.22; }
  .zen-cloud-upper  { width:  95px; height: 40px; }
  .zen-cloud-far    { width: 130px; height: 55px; }
  .zen-cloud-mid    { width: 200px; height: 80px; }
  .zen-cloud-near   { width: 300px; height: 115px; }
  .zen-cloud-fore   { width: 380px; height: 145px; }
  .zen-klaus-bubble { width: 88px; height: 88px; top: 20px; left: 20px; }
  .zen-overlay-text { font-size: 17px; bottom: 18%; padding: 12px 22px; }
  .zen-overlay[data-type="gratitude"] .zen-overlay-text { top: 6%; bottom: auto; }
  .zen-overlay-end  { bottom: 24px; right: 20px; }
  .zen-overlay-timer{ bottom: 24px; left: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FEEDBACK MODAL — no emojis, soft
   ══════════════════════════════════════════════════════════════════════ */
.zen-feedback-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  animation: zen-fade-in 0.25s ease forwards;
}
.zen-feedback {
  width: min(440px, 92vw);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
}
.zen-feedback-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.zen-feedback-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(255,140,66,0.55);
}
.zen-feedback-title { font-size: 18px; font-weight: 800; color: var(--text); }
.zen-feedback-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.zen-feedback-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.zen-fb-chip {
  flex: 1; min-width: 28%;
  background: var(--surface-3); border: 1px solid var(--border);
  border-bottom: 2px solid var(--border-2);
  border-radius: 14px; padding: 11px 6px;
  font-size: 13px; font-weight: 700; color: var(--text);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.zen-fb-chip:active { transform: translateY(1px); border-bottom-width: 1px; }
.zen-fb-chip.active {
  background: linear-gradient(135deg, rgba(255,140,66,0.25), rgba(255,176,103,0.18));
  border-color: #FF8C42; color: var(--text);
}
.zen-feedback-gratitude { margin-bottom: 14px; }
.zen-fb-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.zen-fb-textarea {
  width: 100%; min-height: 78px; resize: vertical;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; color: var(--text); font-size: 14px;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}
.zen-feedback-footer {
  display: flex; justify-content: flex-end; gap: 10px;
}
.zen-fb-skip, .zen-fb-save {
  border: none; border-radius: 100px; padding: 10px 22px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.zen-fb-skip { background: var(--surface-3); color: var(--text-2); }
.zen-fb-save {
  background: linear-gradient(135deg, #FF8C42, #FFA963); color: #fff;
  box-shadow: 0 3px 0 #C95F1F;
}


/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE / IPHONE NODE LAYOUT
   Target: phones in landscape (max-height 480px) and small portrait (max-width 480px).
   iPad (768px+ portrait, 1024px+ landscape) is completely unaffected.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Landscape phone (iPhone rotated) ───────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {

  /* Lock full-screen, no scroll anywhere */
  html, body {
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Hero header — left-padded so Active pill breathes, Up Next centered.
     Right padding respects safe-area-inset-right so the Spotify button
     doesn't tuck behind the notch / rounded corner in landscape. */
  header {
    height: 52px !important;
    padding: 0 calc(14px + env(safe-area-inset-right, 0px)) 0 calc(52px + env(safe-area-inset-left, 0px)) !important;
    gap: 10px;
    background: #0A0A0C;
  }
  .header-left { width: auto !important; padding-right: 10px !important; gap: 10px !important; }
  .header-clock { display: none !important; }
  .header-center {
    padding: 0 !important;
    justify-content: center !important;
  }
  /* Smaller Spotify button on landscape phone so it doesn't dominate the bar */
  .header-sp-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .header-sp-vol-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 18px !important;
  }
  .pill { padding: 5px 12px !important; font-size: 14px !important; }
  .presence-avatar { width: 28px !important; height: 28px !important; }
  .presence-avatar::after { width: 8px !important; height: 8px !important; }
  .next-up-label { font-size: 14px !important; gap: 6px !important; }
  .next-up-label i { font-size: 14px !important; }
  #next-up-text { font-size: 14px !important; }

  /* Full width — no right panel */
  .main { grid-template-columns: 1fr !important; overflow: hidden !important; }
  .right-panel { display: none !important; }

  /* Left panel: avatar left, controls right. Thought bubble stacks over avatar. */
  .left-panel {
    display: grid !important;
    grid-template-columns: 45% 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "avatar  nav"
      "avatar  status"
      "avatar  actions";
    border-right: none;
    overflow: hidden !important;
    position: relative;
    height: 100%;
    min-height: 0;
  }

  /* Avatar fills its cell */
  .avatar-zone {
    grid-area: avatar;
    border-right: 1px solid var(--border);
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 0;
  }

  /* Thought bubble: sits UNDER Klaus's portrait with dots trailing UP toward him */
  .emotion-subtitle {
    grid-area: avatar;
    justify-self: center;
    align-self: end;
    margin: 0 8px 16px !important;
    padding: 9px 16px !important;
    max-width: calc(100% - 16px) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: center;
    position: relative;
    z-index: 15;
    pointer-events: auto;
    overflow: visible !important;
  }
  /* Flip thought dots UP, shifted far to the RIGHT side of the bubble */
  .emotion-subtitle .thought-dot--1 { top: -12px !important; bottom: auto !important; left: 78% !important; width: 8px; height: 8px; }
  .emotion-subtitle .thought-dot--2 { top: -20px !important; bottom: auto !important; left: 86% !important; width: 6px; height: 6px; }
  .emotion-subtitle .thought-dot--3 { top: -26px !important; bottom: auto !important; left: 92% !important; width: 4px; height: 4px; }

  .panel-nav-row {
    grid-area: nav;
    padding: 10px 12px 6px !important;
    gap: 8px;
  }
  /* Hide hamburger + bell — talk button gets the whole top row */
  .panel-nav-row > .panel-nav-icon { display: none !important; }
  .talk-btn-group { flex: 1; width: 100%; }

  /* Talk button fills the right column width — taller */
  .talk-btn {
    width: 100%;
    padding: 18px 16px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  /* Status strip — show below talk button so user sees transcription / thinking state */
  .status-strip {
    grid-area: status;
    display: flex !important;
    max-height: 0;
    padding: 0 12px !important;
    transition: max-height 0.2s ease, opacity 0.18s ease, padding 0.2s ease;
  }
  .status-strip.has-content {
    max-height: 40px;
    padding: 4px 12px 4px !important;
  }
  .status-strip .greeting-status {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Quick actions: 3-col grid, fills remaining right-column height.
     Smaller tiles but bigger icons/text inside them. */
  .quick-actions-strip {
    grid-area: actions;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
    padding: 4px 12px 10px !important;
    border-top: none !important;
    min-height: 0;
    align-items: stretch;
  }
  .qa-pill {
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 2px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    height: 100%;
    min-height: 0;
  }
  .qa-pill .bi { font-size: 26px !important; }
  .qa-pill span { display: inline !important; }

  .integrations-section { display: none !important; }
  .greeting-area        { display: none !important; }

  /* Avatar image fills its column */
  .avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .avatar-parallax { height: 100%; }

  /* ── Speech bubble ── Left-anchored so short texts sit near Klaus, not floating
     in the middle. Blocks clicks behind (pointer-events:auto) so close doesn't
     fall through to a quick-action button. */
  #speech-bubble {
    left: 14vw !important;
    top: 50% !important;
    right: auto !important;
    transform: translateY(calc(-50% - 4px)) scale(0.98);
    transform-origin: left center;
    max-width: min(72vw, 520px) !important;
    padding: 14px 44px 14px 18px !important;
    pointer-events: auto !important;
    cursor: pointer;
  }
  #speech-bubble.visible {
    transform: translateY(-50%) scale(1);
  }
  #speech-bubble::before { display: none; }
  #speech-bubble p { font-size: 17px; }
  /* Larger X button — easier to hit with a thumb */
  #speech-bubble-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    position: absolute;
    top: 6px; right: 6px;
  }
}

/* ── Portrait phone ────────────────────────────────────────────────────────────
   NOTE: Viewport is locked to width=1024 for iPad. On a phone held upright the
   viewport reports 1024 × (much taller), so we can't use max-width: 480px.
   Detect "phone in portrait" via aspect ratio instead: phones are narrower
   than 3:5 (≈0.60), iPads in portrait are ~3:4 (≈0.75). */
@media (orientation: portrait) and (max-aspect-ratio: 3/5) {

  /* Lock full-screen, no scroll */
  html, body {
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Hero header — two rows on portrait:
     row 1: Active pill + presence avatars
     row 2: Up Next (news feed) — full width so it doesn't get truncated */
  header {
    height: auto !important;
    min-height: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 56px) 28px 20px !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .header-left {
    width: 100% !important;
    padding-right: 0 !important;
    gap: 22px !important;
    justify-content: flex-start !important;
  }
  /* Spotify button: float into row 1, aligned with the pill / avatar row */
  .header-right {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    right: 28px !important;
  }
  .header-sp-btn {
    width: 72px !important;
    height: 72px !important;
    font-size: 34px !important;
  }
  .header-sp-vol-btn {
    width: 72px !important;
    height: 72px !important;
    font-size: 42px !important;
    margin-right: 14px !important;
  }
  .header-sp-vol-popup {
    padding: 24px 20px !important;
    border-radius: 32px !important;
  }
  .header-sp-vol-label {
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }
  .header-sp-vol-slider {
    height: 260px !important;
    width: 44px !important;
  }
  .header-clock { display: none !important; }
  /* Up Next — pulled out of the header and pinned above the quick actions,
     so it reads as "what's coming" right before the action row. Extra bottom
     offset gives breathing room between the ticker and the QA row. */
  .header-center {
    position: fixed !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 220px !important;
    top: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    width: auto !important;
    z-index: 18;
  }
  .header-next-up {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    gap: 14px !important;
    padding: 10px 4px !important;
  }
  #next-up-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 36px !important;
  }
  .pill { padding: 12px 26px !important; font-size: 38px !important; }
  .pill .dot { width: 20px !important; height: 20px !important; }
  .presence-avatar { width: 72px !important; height: 72px !important; border-width: 2px !important; }
  .presence-avatar::after { width: 18px !important; height: 18px !important; border-width: 3px !important; }
  .next-up-label { font-size: 36px !important; gap: 12px !important; }
  .next-up-label i { font-size: 36px !important; }

  .main { grid-template-columns: 1fr !important; overflow: hidden !important; }
  .right-panel { display: none !important; }
  .integrations-section { display: none !important; }
  .greeting-area { display: none !important; }

  /* Status strip — show below talk button; user needs to see transcription + thinking state */
  .status-strip {
    order: 2;
    flex: 0 0 auto !important;
    display: flex !important;
    max-height: 0;
    padding: 0 24px !important;
  }
  .status-strip.has-content {
    max-height: 120px;
    padding: 6px 24px 12px !important;
  }
  .status-strip .greeting-status {
    font-size: 34px !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.3;
  }

  /* Portrait vertical stack: header · avatar (hero) · talk btn · compact QA row */
  .left-panel {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
  }

  /* Klaus fills the middle — large, cropped, taking most of the screen.
     flex: 1 grows him to fill the vertical space between talk btn (top) and
     quick actions (bottom). */
  .avatar-zone {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: relative;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
  }
  .avatar-parallax {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Auto-listen progress bar — hidden on mobile. The "Listening · Ns" countdown
     in the Talk button already communicates the same state, so the bar is
     redundant here. It also previously squeezed Klaus off-screen when visible. */
  #auto-listen-bar {
    display: none !important;
  }
  .avatar-img  {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center 20% !important;    /* favor face, crop feet */
  }

  /* Thought bubble — stretched near-full-width so long text has room.
     Dots trail UP from the bubble toward Klaus's face directly above. */
  .emotion-subtitle {
    position: absolute !important;
    top: auto !important;
    bottom: 22vh !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
    z-index: 15;
    padding: 26px 40px !important;
    font-size: 48px !important;
    line-height: 1.3 !important;
    border-radius: 56px !important;
    white-space: normal !important;
    text-align: center;
    align-self: auto !important;
    overflow: visible !important;
  }
  /* Dots centered-ish — bubble is wide now so far-right dots would drift
     away from Klaus. Keep them near the center to trail straight up. */
  .emotion-subtitle .thought-dot--1 { top: -30px !important; bottom: auto !important; left: 54% !important; width: 24px !important; height: 24px !important; }
  .emotion-subtitle .thought-dot--2 { top: -56px !important; bottom: auto !important; left: 58% !important; width: 18px !important; height: 18px !important; }
  .emotion-subtitle .thought-dot--3 { top: -78px !important; bottom: auto !important; left: 62% !important; width: 13px !important; height: 13px !important; }

  /* Panel nav row — sticky to top with breathing room above the talk button */
  .panel-nav-row {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 36px 24px 16px !important;
    order: 1;
  }
  .panel-nav-row > .panel-nav-icon { display: none !important; }
  .talk-btn-group { flex: 1; width: 100%; gap: 16px !important; }
  .talk-btn {
    width: 100%;
    font-size: 46px !important;
    font-weight: 700 !important;
    padding: 42px 40px !important;
    border-radius: 32px !important;
    gap: 22px !important;
  }
  .talk-btn .bi-mic-fill { font-size: 46px !important; }
  .ff-btn {
    width: 100px !important; height: 100px !important;
    font-size: 42px !important;
  }

  /* Quick actions: ALL 5 in a single row, sticky at screen bottom */
  .quick-actions-strip {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    flex: 0 0 auto !important;
    gap: 12px;
    padding: 10px 18px 22px !important;
    border-top: none !important;
    align-items: stretch;
    min-height: 0;
    order: 4;
  }
  .qa-pill {
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 4px !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    gap: 12px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    min-height: 0;
    letter-spacing: 0.02em;
  }
  .qa-pill .bi { font-size: 56px !important; }

  /* Speech bubble — shrink-wraps to text (inline-flex) so short replies stay
     short, long replies grow up to near-full width. Centered horizontally so
     the trailing thought-dots on top-center point straight up at Klaus's face. */
  #speech-bubble {
    display: inline-flex !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 16vh !important;
    transform: translateX(-50%) !important;
    transform-origin: center bottom;
    width: 88% !important;
    max-width: calc(100% - 24px) !important;
    padding: 28px 92px 28px 36px !important;
    border-radius: 44px !important;
    pointer-events: none !important;   /* only capture taps when visible */
    cursor: pointer;
    z-index: 20;
    box-sizing: border-box !important;
    align-items: flex-start !important;
  }
  #speech-bubble.visible {
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }
  /* Thought-dots angle from upper-left of bubble toward Klaus's face. */
  #speech-bubble::before {
    display: block !important;
    content: '';
    position: absolute;
    top: -28px !important;
    left: 28% !important;
    margin-left: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50%;
    background: #0A84FF;
    box-shadow:
      20px -32px 0 -4px #0A84FF,
      42px -58px 0 -8px #0A84FF !important;
  }
  #speech-bubble p {
    font-size: 52px !important;
    line-height: 1.35 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    word-break: break-word !important;
  }
  /* Larger X button — easy thumb target on a phone */
  #speech-bubble-close {
    width: 70px !important;
    height: 70px !important;
    font-size: 32px !important;
    position: absolute;
    top: 14px; right: 14px;
  }
}

/* ── END MOBILE / IPHONE NODE LAYOUT ──────────────────────────────────────── */
.zen-fb-save:active { transform: translateY(1px); box-shadow: 0 1px 0 #C95F1F; }


/* ══════════════════════════════════════════════════════════════════════════════
   LIGHTS PANEL
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --lp-wall:        rgba(80,160,255,0.75);
  --lp-line:        rgba(80,160,255,0.50);
  --lp-fill:        rgba(0,100,220,0.22);
  --lp-fill-light:  rgba(80,160,255,0.30);
  --lp-fp-filter:   invert(0.50) opacity(0.28);
  --lp-amber:       #FFB830;
  --lp-amber-glow:  rgba(255,184,48,0.45);
  --lp-node-size:   44px;
}

/* ── Panel shell ── */
/* display controlled by .integration-panel / .integration-panel.active — do NOT set it here */
.lp-panel {
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* ── Header ── */
.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px 18px;
  flex-shrink: 0;
}

.lp-cog-btn, .lp-tv-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background 0.15s, color 0.15s, transform 0.3s;
  flex-shrink: 0;
}
.lp-cog-btn:hover, .lp-tv-btn:hover { background: var(--surface-3); color: var(--text); }
.lp-tv-btn.active {
  background: rgba(255,214,10,0.15);
  border-color: rgba(255,214,10,0.4);
  color: #FFD60A;
}
.lp-cog-btn.open {
  color: var(--accent);
  transform: rotate(60deg);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── Palette drawer ── */
.lp-palette {
  position: absolute;
  top: 50px;
  right: -240px;
  width: 220px;
  bottom: 72px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 14px 12px;
  overflow-y: auto;
  z-index: 20;
  transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-palette.open { right: 0; }

.lp-palette-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 4px;
}
.lp-palette-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 6px;
}
.lp-palette-lights,
.lp-palette-scenes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Palette chips */
.lp-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: grab;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.lp-chip:hover { background: var(--surface-3); border-color: var(--border-2); }
.lp-chip:active { cursor: grabbing; }
.lp-chip.placed { opacity: 0.35; pointer-events: none; }
.lp-chip i { font-size: 14px; color: var(--text-2); }
.lp-chip.scene-chip i { color: var(--amber); }

/* ── Floor plan ── */
.lp-floorplan {
  flex: 1;
  position: relative;
  overflow: hidden;
  margin: 0 16px;
  max-height: 62vh;
}
.lp-floorplan-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 4px;
  flex-shrink: 0;
}
.lp-refresh-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
  line-height: 1;
}
.lp-refresh-btn:hover { color: rgba(255,255,255,0.6); }
.lp-refresh-btn.spinning .bi {
  display: inline-block;
  animation: lp-spin 0.5s linear;
}
@keyframes lp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.lp-fp-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: var(--lp-fp-filter);
  pointer-events: none;
  user-select: none;
}

/* Room labels — absolutely positioned over the img */
.lp-label {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.lp-label--lg {
  font-size: 14px;
  color: rgba(255,255,255,0.28);
}

/* ── Light nodes (positioned absolute over floor plan) ── */
.lp-node {
  position: absolute;
  width: var(--lp-node-size);
  height: var(--lp-node-size);
  border-radius: 50%;
  background: var(--surface-2);
  border-top:    1px solid rgba(255,255,255,0.13);
  border-left:   1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(0,0,0,0.50);
  border-right:  1px solid rgba(0,0,0,0.35);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.15s, background 0.15s, transform 0.1s;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.lp-node:active:not(.dragging) {
  transform: translate(-50%, -50%) scale(0.91);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.lp-node i {
  font-size: 16px;
  color: var(--accent);
  transition: color 0.2s;
  pointer-events: none;
}
.lp-node .lp-node-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  pointer-events: none;
}

/* On state */
.lp-node.on {
  background: rgba(255, 184, 48, 0.10);
  border-top:    1px solid rgba(255,255,255,0.16);
  border-left:   1px solid rgba(255,255,255,0.11);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  border-right:  1px solid rgba(0,0,0,0.28);
  box-shadow: 0 0 16px 4px var(--lp-amber-glow), 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.09);
}
.lp-node.on:active:not(.dragging) {
  transform: translate(-50%, -50%) scale(0.91);
  box-shadow: 0 0 8px 2px var(--lp-amber-glow);
}
.lp-node.on i { color: var(--lp-amber); }

/* Scene node (in automation row) */
.lp-node.scene-node {
  border-radius: var(--radius-pill);
  width: auto;
  min-width: 80px;
  padding: 0 14px;
  height: 38px;
  transform: none;
  position: static;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  gap: 6px;
  flex-direction: row;
  cursor: pointer;
}
.lp-node.scene-node i { font-size: 13px; }
.lp-node.scene-node:active { transform: scale(0.96); }

/* Dragging state */
.lp-node.dragging {
  opacity: 0.5;
  cursor: grabbing;
  box-shadow: none;
}

/* Drag-over floor plan */
.lp-floorplan.drag-over { outline: 1.5px dashed rgba(10,132,255,0.35); border-radius: var(--radius-md); }

/* Dim ring */
.lp-dim-popup {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: auto;
}
.lp-dim-popup label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lp-dim-popup input[type=range] {
  width: 100%;
  accent-color: var(--lp-amber);
  cursor: pointer;
}

/* ── Automation row ── */
.lp-automation-row {
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.lp-automation-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  flex-shrink: 0;
}

.lp-automation-slots {
  display: flex;
  gap: 8px;
  flex: 1;
  align-items: center;
}

.lp-auto-slot {
  flex: 1;
  height: 40px;
  border: 1.5px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
  overflow: hidden;
}
.lp-auto-slot.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.lp-auto-slot.filled { border-style: solid; border-color: rgba(255,184,48,0.3); cursor: pointer; }
.lp-auto-slot.filled:active { transform: scale(0.96); }

.lp-slot-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* Scene buttons — always-visible in automation row */
/* Scene card — full-bleed illustration + left gradient for text */
.lp-scene-btn {
  flex: 1;
  height: 68px;
  display: flex;
  align-items: center;
  border: none;
  border-bottom: 4px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  /* background set via JS: gradient overlay + illustration */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.16);
  transition: transform 0.10s, filter 0.10s, border-bottom-width 0.10s;
  min-width: 0;
  padding: 0;
}
.lp-scene-btn:hover  { filter: brightness(1.10); }
.lp-scene-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.lp-scene-btn.firing {
  filter: brightness(1.30);
  box-shadow: 0 0 24px 6px var(--lp-amber-glow);
}
.lp-scene-btn.fire-error { filter: saturate(0) brightness(0.65); }

/* Active-scene indicator dot */
.lp-scene-btn { position: relative; }
.lp-scene-active-dot {
  position: absolute;
  top: 10px; right: 11px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px 2px var(--green-glow);
  animation: scene-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes scene-dot-pulse {
  0%, 100% { box-shadow: 0 0 5px 2px var(--green-glow); opacity: 1; }
  50%       { box-shadow: 0 0 10px 4px var(--green-glow); opacity: 0.75; }
}

/* Text body over illustration */
.lp-scene-card-body {
  position: relative;
  z-index: 1;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.lp-scene-eyebrow {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.65);
}
.lp-scene-label-text {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* img-wrap no longer used in full-bleed mode */
.lp-scene-img-wrap { display: none; }

.lp-scene-rename-input {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  padding: 2px 7px;
  width: 90px;
  outline: none;
}
.lp-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0.9;
}

/* ── Light usage stats ──────────────────────────────────────────────────── */
.lp-stats-toggle-row {
  display: flex;
  justify-content: flex-end;
  padding: 6px 14px 12px;
  position: relative;
}
.lp-stats-toggle-btn {
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 10px;
  border-bottom: 3px solid rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 12px 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s ease;
  user-select: none;
}
.lp-stats-toggle-btn:hover {
  background: rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.65);
  transform: translateY(-1px);
}
.lp-stats-toggle-btn:active,
.lp-stats-toggle-btn.active {
  border-bottom-width: 1px;
  transform: translateY(1px);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
}
.lp-stats-toggle-btn .bi { font-size: 12px; }

/* Popover */
.lp-stats-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 10px;
  width: 360px;
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  border-bottom: 4px solid rgba(0,0,0,0.5);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 18px 18px 20px;
  z-index: 200;
  animation: stats-pop-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes stats-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Header */
.lp-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lp-stats-header .lp-automation-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
.lp-stats-total {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
}

/* Bar rows */
.lp-stats-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lp-stats-bar-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  width: 100px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
/* 3D track */
.lp-stats-bar-track {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  border-bottom: 3px solid rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
}
/* 3D fill */
.lp-stats-bar-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    oklch(68% .22 250) 0%,
    oklch(55% .22 250) 60%,
    oklch(45% .22 250) 100%
  );
  position: relative;
  transition: width 0.5s cubic-bezier(0.34,1.2,0.64,1);
}
/* shine stripe */
.lp-stats-bar-fill::after {
  content: '';
  position: absolute;
  top: 2px; left: 6px; right: 6px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.28);
}
.lp-stats-bar-count {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  width: 26px;
  text-align: right;
  flex-shrink: 0;
}

/* Fact cards — Duolingo-style raised tiles */
.lp-stats-facts {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.lp-stats-fact {
  background: rgba(255,255,255,0.07);
  border-radius: 14px;
  border-bottom: 4px solid rgba(0,0,0,0.4);
  padding: 10px 12px 9px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  flex: 1;
  min-width: 0;
  transition: transform 0.1s ease;
}
.lp-stats-fact:active { transform: translateY(2px); border-bottom-width: 2px; }
.lp-stats-fact strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.lp-stats-loading {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 14px 0;
}