/* ============================================================
   Splash — full-bleed editorial
   ============================================================ */

#view-splash{
  background:linear-gradient(170deg,#3e4a2f 0%,#4f5536 55%,#5b6840 100%);
  color:var(--ink-on-olive);
  overflow:hidden;
  /* keep .view's position:absolute / inset:0 so the gradient fills the viewport */
}
#view-splash::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/static/images/splash-bg.png');
  background-size:cover;
  background-position:center;
  opacity:.34;
  mix-blend-mode:soft-light;
}

/* Brand lockup — ring + wordmark + tagline as one unit, like the brand sheet.
   Width is fit-content so align-items:center centres the ring (and tagline)
   relative to the WORDMARK width, not the whole grid column. */

/* Wider, softer dark halo behind the lockup so the rose/cream text pops over
   the leafy bg. Generous negative offsets and a broad blur produce an
   atmosphere rather than a visible rectangle. */

.splash-hero{font-family:'Cal Sans',serif;font-weight:500;font-size:clamp(68px,10.2vw,128px);line-height:.92;letter-spacing:-.035em;color:#f4ecd6;margin:0;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.splash-hero i{
  font-style:italic;
  font-weight:500;
  background:linear-gradient(180deg,#ecb6b6 0%,#c97a7a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.splash-sub{font-family:'Inter';font-size:16.5px;font-weight:400;color:rgba(245,238,216,.82);letter-spacing:.015em;margin-top:32px;line-height:1.65;max-width:520px}

.splash-cta{
  align-self:end;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:460px;
  width:100%;
}
#view-splash .btn.primary{background:var(--ink-on-olive);color:var(--olive-deep)}
#view-splash .btn.primary:hover{background:#fff7e2}
#view-splash .btn.light{background:rgba(255,255,255,.08);color:var(--ink-on-olive);border:1px solid rgba(245,238,216,.32);backdrop-filter:blur(6px)}

/* Right-side aside (portrait + CTAs). On mobile we hide the portrait so the
   .splash-side wrapper effectively only contains the buttons; on desktop the
   wrapper becomes a flex column with the portrait on top and the CTAs below. */

@keyframes breathe-glow{
  0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes breathe{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.03) rotate(.6deg)}
}
/* 22.5s cycle / 9 frames / 2.5s per slot.
   Fade in 0–2.2% (0.5s), hold 2.2–11.1% (2s with Ken Burns zoom),
   fade out 11.1–13.3% (0.5s), invisible the rest. Adjacent slots overlap by
   the 0.5s fade so neighbouring frames true-crossfade. */
@keyframes splash-portrait-cycle{
  0%   {opacity:0;transform:scale(1)}
  2.2% {opacity:1;transform:scale(1)}
  11.1%{opacity:1;transform:scale(1.05)}
  13.3%{opacity:0;transform:scale(1.05)}
  100% {opacity:0;transform:scale(1)}
}

/* Faint grain over the splash for editorial-print depth */
#view-splash::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .82 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.05;mix-blend-mode:overlay;
}
@media (max-width:899px){

  
  
  .splash-sub{font-size:15.5px;margin-top:24px}
}
@media (max-width:520px){

  
  
  .splash-hero{font-size:60px}

  .splash-sub{font-size:15px;margin-top:22px}
}
/* Desktop ≥ 900px — split layout. Brand + hero on the left, portrait + CTAs
   stacked on the right. The portrait fills most of the right column with
   editorial framing; buttons anchor below so nothing gets clipped on short
   widescreens (1080p / 21:9). */
@media (min-width:900px){

  

  /* Stack of all 9 preset portraits — one fades in at a time on a 22.5s loop,
     producing a "your companion can be anyone" vibe instead of a 3×3 chooser
     grid. Each frame: 0.5s fade in → 2s hold (with Ken Burns zoom) → 0.5s fade
     out → invisible until the cycle wraps. Frames are spaced 2.5s apart so
     the fade-in of N+1 overlaps with the fade-out of N (true crossfade). */

  

  

  

  /* Subtle bottom-fade so the caption + page bottom blend into the splash bg */
  
  /* Soft rose glow accent at the top-left of the portrait — ties to the ring's
     pearl + the wordmark's rose. Keeps it from feeling like a stock photo. */
  
  /* "9 of ∞" pill — frames the portrait as one of countless possibilities,
     reinforcing the create-your-own message without screaming it. */

  
  .splash-cta{
    align-self:stretch;
    max-width:none;
    width:100%;
    flex:none;
  }
  /* Slightly tighter cap so 3 hero lines fit even on 1080p widescreens */
  .splash-hero{font-size:clamp(72px,8.6vw,120px)}
}

/* ============================================================
   Home
   ============================================================ */

.home-inner{display:flex;flex-direction:column;gap:24px}
.greeting{display:flex;justify-content:space-between;align-items:center;gap:16px}
.greeting .hi{font-family:'Cal Sans',serif;font-weight:500;font-size:34px;line-height:1;letter-spacing:-.02em}
.greeting .hi i{font-style:italic;color:var(--rose)}
.greeting .sub{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

/* Editorial home hero — split layout on desktop, overlay-on-photo on mobile.
   Desktop: portrait fills the left half, the whisper sits in a cream panel on
   the right where the type can breathe and the face stays clearly visible. */
.home-hero{position:relative;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(40,46,20,.18);cursor:pointer;transition:transform .35s ease,box-shadow .35s ease;display:grid;grid-template-columns:1fr;min-height:280px}
.home-hero:hover{transform:translateY(-2px);box-shadow:0 30px 70px rgba(40,46,20,.24)}
.home-hero .portrait-bg{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(160deg,#5b6840,#3e4a2f);overflow:hidden}
.home-hero .portrait-bg img,.home-hero .portrait-bg svg{width:100%;height:100%;display:block;object-fit:cover;object-position:center 30%}
.home-hero .ov{display:none}
.home-hero .txt{position:relative;padding:28px 28px 26px;background:linear-gradient(180deg,#f7f1de 0%,#efe6c9 100%);color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:10px}
.home-hero .txt::before{content:"";position:absolute;left:28px;top:28px;width:30px;height:1px;background:var(--olive);opacity:.55}
.home-hero .txt .k{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--olive);font-weight:600;display:inline-flex;align-items:center;gap:7px;padding-top:14px}
.home-hero .txt h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.35;letter-spacing:-.005em;color:var(--ink);font-style:italic}
.home-hero .txt h2 i{font-style:italic;color:var(--rose);font-weight:500}
.home-hero .txt p{font-size:12px;color:var(--ink-mute);letter-spacing:.06em;margin-top:4px}
.home-hero .action{position:absolute;right:18px;top:18px;background:rgba(255,255,255,.94);color:var(--ink);padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(8px);z-index:3;transition:all .2s ease;box-shadow:0 4px 12px rgba(40,46,20,.18)}
.home-hero:hover .action{background:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.18)}

@media (min-width:768px){
  .home-hero{grid-template-columns:minmax(280px,46%) 1fr;min-height:360px}
  .home-hero .portrait-bg{aspect-ratio:auto;height:100%}
  .home-hero .portrait-bg img,.home-hero .portrait-bg svg{object-position:center 25%}
  .home-hero .txt{padding:36px 36px 32px;gap:14px}
  .home-hero .txt h2{font-size:clamp(22px,1.7vw,28px);line-height:1.4}
  /* Soft seam between photo and text panel */
  .home-hero .portrait-bg::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:48px;background:linear-gradient(90deg,transparent,rgba(247,241,222,.55));pointer-events:none}
}
@media (min-width:1100px){
  .home-hero{min-height:420px}
  .home-hero .txt h2{font-size:clamp(24px,1.8vw,30px)}
}

.home-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.home-grid{grid-template-columns:1fr 1fr;gap:24px}}

.home-section{display:flex;flex-direction:column}
.row-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.row-hdr h3{font-family:'Cal Sans',serif;font-weight:500;font-size:22px;letter-spacing:-.01em}
.row-hdr a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;text-decoration:none}

.mood-card{background:#fff;border-radius:22px;padding:18px;border:1px solid var(--line);position:relative;overflow:hidden}
.mood-card::before{content:"";position:absolute;left:18px;right:18px;bottom:34px;height:1px;background:var(--line);opacity:.7;pointer-events:none}
.mood-card .mh{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.mood-card .mh span{font-size:12px;color:var(--ink-mute);letter-spacing:.12em;text-transform:uppercase}
.mood-card .mh b{font-family:'Cal Sans',serif;font-weight:500;font-size:26px;letter-spacing:-.01em;color:var(--olive-deep)}
.mood-chart{display:flex;align-items:flex-end;gap:8px;height:84px;margin-top:16px;position:relative;z-index:1}
.mood-chart .bar{flex:1;background:linear-gradient(180deg,var(--moss),var(--olive-deep));border-radius:8px 8px 4px 4px;transition:height .5s cubic-bezier(.4,1.4,.6,1);min-height:6px;position:relative;box-shadow:0 2px 4px rgba(40,46,20,.08)}
.mood-chart .bar.empty{background:transparent;border:1px dashed var(--line);box-shadow:none;min-height:8px}
.mood-chart .bar.today{background:linear-gradient(180deg,var(--blush-strong),var(--rose));box-shadow:0 4px 10px rgba(166,114,75,.22)}
.mood-chart-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--ink-mute);letter-spacing:.16em;font-weight:600}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick{background:#fff;border-radius:22px;padding:18px;cursor:pointer;border:1px solid var(--line);transition:all .25s ease;position:relative;overflow:hidden}
.quick::after{content:"";position:absolute;inset:0;border-radius:22px;border:1.5px solid transparent;transition:border-color .2s ease;pointer-events:none}
.quick:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(40,46,20,.10)}
.quick:hover::after{border-color:var(--olive-tint)}
.quick .ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--olive-tint);margin-bottom:12px;color:var(--olive-deep)}
.quick .ico .i{width:22px;height:22px}
.quick h4{font-size:14.5px;font-weight:600;letter-spacing:.01em}
.quick p{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.quick.b1 .ico{background:linear-gradient(140deg,#cfd5b1,#b8c293)}
.quick.b2 .ico{background:linear-gradient(140deg,#d4ddc4,#bccaa0)}
.quick.b3 .ico{background:linear-gradient(140deg,#e6d4b8,#d4b78a);color:var(--cocoa)}
.quick.b4 .ico{background:linear-gradient(140deg,#d8d2bd,#c2b894)}

/* ============================================================
   Avatar grid + summary card
   ============================================================ */

.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media (min-width:600px){.avatar-grid{grid-template-columns:repeat(3,1fr)}}
.avatar{aspect-ratio:1/1.2;border-radius:18px;overflow:hidden;cursor:pointer;position:relative;border:2px solid transparent;transition:transform .25s cubic-bezier(.4,1.4,.6,1),box-shadow .25s ease,border-color .2s ease;background:var(--olive-tint)}
.avatar:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(40,46,20,.22)}
.avatar.active{border-color:var(--olive);transform:translateY(-2px) scale(.99);box-shadow:0 0 0 4px rgba(62,74,47,.18),0 16px 36px rgba(40,46,20,.28)}
.avatar img,.avatar svg{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s ease}
.avatar:hover img,.avatar:hover svg{transform:scale(1.04)}
.avatar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.34));opacity:0;transition:opacity .2s ease;pointer-events:none}
.avatar.active::after{opacity:1}
.avatar .name{position:absolute;left:10px;bottom:8px;font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:#fff;font-weight:500;letter-spacing:.01em;opacity:0;transition:opacity .2s ease}
.avatar.active .name{opacity:1}
.avatar .gen-badge{position:absolute;top:8px;right:8px;background:#fff;color:var(--rose);font-size:10px;font-weight:700;padding:4px 9px 4px 7px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;box-shadow:var(--shadow-sm)}
.avatar .gen-badge::before{content:"✦";font-size:11px;color:var(--rose)}

/* AI portrait tile — Gemini outputs 1024×1024 squares so the tile is square
   too; cropping to 1.5:1 (the old preset-tile shape) chopped off the upper
   chest and made it look like a tight headshot. Spans all 3 grid columns and
   uses a soft shadow + olive border to feel like the hero of the page. */
.avatar.your-one-tile{
  grid-column:1/-1;
  aspect-ratio:1/1;
  border-radius:22px;
  border-color:var(--olive);
  box-shadow:0 0 0 4px rgba(62,74,47,.18),0 24px 48px rgba(40,46,20,.28);
}
.avatar.your-one-tile img{object-fit:cover;object-position:center top}
.avatar.your-one-tile .gen-badge{
  top:14px;right:14px;font-size:11px;padding:5px 12px 5px 9px;
}

/* Preset-toggle link — the escape hatch when the user wants a stock photo
   after generating an AI one. Sits below the refine panel. */

/* The UA [hidden]{display:none} is at specificity 0,1,0 — same as a class —
   so site rules like .btn{display:inline-flex} win and the attribute stops
   working. Force it back with !important to keep hidden semantic. */
[hidden]{display:none!important}

/* Refine panel — appears under the 'your one' tile after generation. Lets
   the user type a tweak ('shorter hair, soft smile') and re-render with the
   prior portrait as conditioning so the face stays consistent. */

.refine-input{
  width:100%;
  font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.55;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(166,140,90,.28);
  border-radius:12px;
  padding:11px 14px;
  resize:vertical;min-height:74px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.refine-input:focus{
  outline:none;
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(201,122,122,.15);
}
.refine-input::placeholder{color:var(--ink-mute)}
.refine-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;
}
.refine-chips .chip{
  font-size:12px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(166,140,90,.28);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.refine-chips .chip:hover{
  background:#fff;color:var(--ink);border-color:var(--rose);
}
.refine-actions{
  display:flex;gap:10px;justify-content:flex-end;
}
.refine-actions .btn{flex:0 0 auto;padding:11px 22px;min-width:0;width:auto}
@media (max-width:480px){
  .refine-actions{flex-direction:column-reverse}
  .refine-actions .btn{width:100%}
}

.tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--bg-deep);color:var(--ink-soft)}

/* ============================================================
   Review — cinematic portrait-led "introducing them"
   ============================================================ */

.rev-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.16);color:#f5eed8;backdrop-filter:blur(6px);border:1px solid rgba(245,238,216,.22)}

/* ============================================================
   Chat — fluid container with sticky header + footer
   ============================================================ */

#view-chat{padding:0}

.chat-head{padding:14px 22px;display:flex;align-items:center;gap:12px;background:rgba(241,234,215,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.chat-head .back{width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:all .15s ease}
.chat-head .back:hover{color:var(--ink);border-color:var(--ink-soft)}
.chat-head .back .i{width:18px;height:18px}
.chat-head .face{width:44px;height:44px;border-radius:999px;overflow:hidden;background:var(--olive-tint);box-shadow:var(--shadow-sm)}
.chat-head .face img,.chat-head .face svg{width:100%;height:100%;object-fit:cover}
.chat-head .name{flex:1;min-width:0}
.chat-head .name b{font-family:'Cal Sans',serif;font-weight:500;font-size:20px;letter-spacing:-.01em;display:block;line-height:1}
.chat-head .name i{font-style:italic;color:var(--rose);font-weight:500}
.chat-head .name span{font-size:10.5px;color:var(--ink-mute);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:5px;align-items:center;margin-top:4px}
.chat-head .name span .dot{width:6px;height:6px;border-radius:999px;background:#55a66a;box-shadow:0 0 0 3px rgba(85,166,106,.18)}
.chat-head .acts{display:flex;gap:6px}
.chat-head .acts button{width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:all .15s ease}
.chat-head .acts button:hover{color:var(--ink);border-color:var(--ink-soft);box-shadow:var(--shadow-sm)}

.chat-head .acts button .i{width:18px;height:18px}

.chat-body{flex:1;overflow-y:auto;padding:18px 22px 16px;display:flex;flex-direction:column;gap:10px}
.chat-body.empty{justify-content:center;align-items:center}
.chat-empty-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:560px;width:100%;padding:0 6px;animation:emptyIn .4s ease}
@keyframes emptyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-empty-wrap .msg{align-self:auto;max-width:100%;text-align:left}
.chat-starters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.chat-starter{font:500 13px 'Inter',sans-serif;background:#fff;border:1px solid var(--line);color:var(--ink-soft);padding:9px 14px;border-radius:999px;cursor:pointer;transition:all .18s ease;letter-spacing:.01em}
.chat-starter:hover{background:var(--olive-tint);color:var(--olive-deep);border-color:var(--olive-tint);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.chat-body::-webkit-scrollbar{width:0}
.day-divider{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:6px 0 8px;font-weight:600}
.day-divider::before,.day-divider::after{content:"";flex:1;height:1px;background:var(--line);opacity:.65}
.msg{max-width:min(78%,580px);padding:14px 17px;border-radius:18px;font-size:14.5px;line-height:1.55;box-shadow:var(--shadow-sm);white-space:pre-wrap;word-wrap:break-word;letter-spacing:.005em}
.msg.me{align-self:flex-end;background:linear-gradient(160deg,var(--olive-light),var(--olive));color:var(--ink-on-olive);border-bottom-right-radius:6px;box-shadow:0 4px 14px rgba(40,46,20,.18),inset 0 0 0 1px rgba(255,255,255,.06)}
.msg.her{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;border:1px solid var(--line)}
.msg.her.rich{background:linear-gradient(160deg,#fff,#efe9d3);border:1px solid #d6cdb1}
.msg .quote{font-family:'Playfair Display',serif;font-style:italic;font-size:15.5px;color:var(--rose);display:block;margin-top:8px;line-height:1.5}
/* Group of consecutive same-sender bubbles (multi-bubble assistant replies).
   Tighter gap than the 10px between separate exchanges + tighter corner
   radii on the inner edges so the bubbles read as a continuing thread. */
.chat-bubble-group{display:flex;flex-direction:column;align-items:flex-start;gap:5px;align-self:flex-start;max-width:100%}
.chat-bubble-group .msg.her{border-bottom-left-radius:18px}
.chat-bubble-group .msg.her:last-of-type{border-bottom-left-radius:6px}
.chat-bubble-group .msg.her:only-of-type{border-bottom-left-radius:6px}
.msg-feedback{display:flex;gap:6px;margin-top:6px;align-self:flex-start}
.msg-feedback button{width:30px;height:30px;border-radius:999px;background:#fff;border:1px solid var(--line);cursor:pointer;color:var(--ink-mute);display:inline-flex;align-items:center;justify-content:center;transition:all .18s ease;padding:0}
.msg-feedback button .i{width:14px;height:14px}
.msg-feedback button:hover{color:var(--ink-soft);border-color:var(--ink-soft);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.msg-feedback button[data-feedback="like"].on{background:var(--lip);border-color:var(--lip);color:#fff;box-shadow:0 4px 12px rgba(162,58,42,.30)}
.msg-feedback button[data-feedback="dislike"].on{background:var(--bg-deep);border-color:var(--blush-strong);color:var(--ink-soft)}
.typing{display:flex;gap:4px;align-self:flex-start;padding:13px 18px;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.typing span{width:7px;height:7px;border-radius:999px;background:var(--ink-mute);animation:bob 1.1s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.typing.inline{display:inline-flex;background:transparent;border:0;box-shadow:none;padding:2px 0;align-self:auto}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* === Markdown body inside chat bubbles === */
.msg .md-body{white-space:normal}
.md-body > *:first-child{margin-top:0}
.md-body > *:last-child{margin-bottom:0}
.md-body p{margin:0 0 .55em;line-height:1.55}
.md-body strong{color:var(--olive-deep);font-weight:600}
.md-body em{font-family:'Playfair Display',serif;font-style:italic;color:var(--rose)}
.md-body a{color:var(--lip);text-decoration:none;border-bottom:1px dashed rgba(162,58,42,.45);padding-bottom:1px;transition:color .15s ease,border-color .15s ease,background .15s ease;word-break:break-word}
.md-body a:hover{color:var(--lip);border-bottom-color:var(--lip);background:rgba(162,58,42,.06)}
.md-body ul,.md-body ol{margin:.4em 0 .6em;padding-left:1.4em}
.md-body ul{list-style:none;padding-left:1.1em}
.md-body ul li{position:relative;padding-left:.4em;margin:.18em 0;line-height:1.55}
.md-body ul li::before{content:"";position:absolute;left:-.85em;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--rose);opacity:.78}
.md-body ol li{margin:.18em 0;line-height:1.55}
.md-body ol li::marker{color:var(--olive-deep);font-weight:600;font-family:'Cal Sans',serif}
.md-body ul ul,.md-body ol ol,.md-body ul ol,.md-body ol ul{margin:.2em 0;padding-left:1.1em}
.md-body h3,.md-body h4,.md-body h5,.md-body h6{font-family:'Cal Sans',serif;font-weight:600;color:var(--ink);margin:.6em 0 .3em;line-height:1.25;letter-spacing:-.005em}
.md-body h3{font-size:17px}
.md-body h4{font-size:15.5px}
.md-body h5,.md-body h6{font-size:14.5px;font-style:italic;color:var(--ink-soft)}
.md-body blockquote{margin:.45em 0;padding:8px 14px;border-left:3px solid var(--rose);background:rgba(200,205,179,.35);border-radius:0 10px 10px 0;color:var(--ink-soft);font-family:'Playfair Display',serif;font-style:italic;font-size:14.5px;line-height:1.5}
.md-body blockquote p{margin:0}
.md-body code{font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace;font-size:.92em;background:var(--bg-deep);padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--olive-deep)}
.md-body pre{margin:.5em 0;padding:11px 14px;background:var(--bg-deep);border:1px solid var(--line);border-radius:12px;overflow-x:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.md-body pre code{background:transparent;border:0;padding:0;color:var(--ink-soft);font-size:.9em;line-height:1.55;white-space:pre}
.md-body hr{border:0;border-top:1px solid var(--line);margin:.8em 0}
/* Tables — GitHub-flavoured. Wrap scrolls horizontally on narrow screens so
   a wide comparison doesn't overflow the bubble. */
.md-table-wrap{margin:.55em -4px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.md-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;line-height:1.45;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.md-table thead th{background:linear-gradient(180deg,#fdf7e8,#f5ecd2);color:var(--olive-deep);font-family:'Cal Sans',serif;font-weight:600;text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);letter-spacing:.005em}
.md-table tbody td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.md-table tbody tr:last-child td{border-bottom:0}
.md-table tbody tr:nth-child(even) td{background:rgba(200,205,179,.18)}
.md-table tbody td strong{color:var(--olive-deep)}
.md-table tbody td em{color:var(--rose)}

/* Narration bubbles — when an entire assistant bubble is wrapped in italic,
   it's roleplay scene description (e.g. "*she walks over and sits beside you*").
   Style the whole bubble like a soft novel-page aside so dialogue and scene
   read visually apart. Class is applied by Views.markNarrationBubbles(). */
.msg.her.narration{background:linear-gradient(160deg,#fbf3df,#f4ead0);border:1px solid #d6cdb1;box-shadow:0 4px 14px rgba(166,114,75,.10)}
.msg.her.narration .md-body{font-family:'Playfair Display',serif;font-style:italic;color:var(--rose);font-size:14.8px;line-height:1.55}
.msg.her.narration .md-body p{margin:0}
.msg.her.narration .md-body em{font-style:normal;color:var(--olive-deep)}  /* nested emphasis inside narration flips back so it still pops */

/* User bubble — emphasis on the olive ground reads better in light tones. */
.msg.me .md-body strong{color:#fff}
.msg.me .md-body em{color:#f3e7d6}
.msg.me .md-body a{color:#f3e7d6;border-bottom-color:rgba(243,231,214,.55)}
.msg.me .md-body a:hover{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.08)}
.msg.me .md-body ul li::before{background:#f3e7d6}
.msg.me .md-body ol li::marker{color:#f3e7d6}
.msg.me .md-body code,.msg.me .md-body pre{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.12);color:#f3e7d6}
.msg.me .md-body pre code{color:#f3e7d6}
.msg.me .md-body blockquote{border-left-color:#f3e7d6;background:rgba(255,255,255,.08);color:#f3e7d6}

/* Streaming bubble — soft rose ring + blinking caret */
.msg.her.streaming{box-shadow:0 6px 18px rgba(162,58,42,.10),inset 0 0 0 1px rgba(162,58,42,.10);animation:streamGlow 2.2s ease-in-out infinite}
.stream-caret{display:inline-block;width:7px;height:15px;margin-left:3px;background:var(--rose);vertical-align:-2px;border-radius:1px;animation:caretBlink .85s steps(2,start) infinite;opacity:.85}
@keyframes caretBlink{50%{opacity:0}}
@keyframes streamGlow{0%,100%{box-shadow:0 6px 18px rgba(162,58,42,.10),inset 0 0 0 1px rgba(162,58,42,.10)}50%{box-shadow:0 8px 22px rgba(162,58,42,.16),inset 0 0 0 1px rgba(162,58,42,.18)}}
.chat-input{padding:14px 22px 16px;background:rgba(241,234,215,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0;position:sticky;bottom:0;z-index:5}
.chat-input .pill{flex:1;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;gap:8px;transition:border-color .2s ease,box-shadow .2s ease}
.chat-input .pill:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px rgba(62,74,47,.10)}
.chat-input .pill input{flex:1;border:0;outline:0;font:500 14.5px 'Inter',sans-serif;background:transparent;padding:11px 0}
.chat-input .send{width:44px;height:44px;border-radius:999px;background:var(--olive);color:var(--ink-on-olive);display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;transition:background .15s ease,transform .15s ease}
.chat-input .send:hover{background:var(--olive-deep)}
.chat-input .send:active{transform:scale(.94)}
.chat-input .send .i{width:20px;height:20px}
.chat-input .mic{width:44px;height:44px;border-radius:999px;background:var(--blush);color:var(--ink);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:all .15s ease}
.chat-input .mic:hover{background:var(--blush-strong);color:#fff}
.chat-input .mic .i{width:20px;height:20px}
.chat-input .mic.recording{background:var(--lip);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* On mobile, account for tabbar height under the chat input */
@media (max-width:1023px){
  .chat-input{padding-bottom:calc(16px + var(--tabbar-h))}
}

/* ============================================================
   Mood / Memory / Profile
   ============================================================ */

.mood-hero{border-radius:24px;background:linear-gradient(160deg,#5b6840,#3e4a2f);padding:24px;color:var(--ink-on-olive);position:relative;overflow:hidden;margin:8px 0 20px}
.mood-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent 70%);opacity:.4}
.mood-hero .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.mood-hero h2{font-family:'Cal Sans',serif;font-weight:500;font-size:32px;line-height:1.02;letter-spacing:-.02em;margin-top:6px}
.mood-hero h2 i{font-style:italic}
.mood-emojis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0 6px}
.mood-emoji{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .25s cubic-bezier(.4,1.4,.6,1);color:var(--ink-soft);padding:8px 4px;position:relative;overflow:hidden}
.mood-emoji .face{width:36px;height:36px;display:block;position:relative;z-index:2;transition:transform .3s ease}
.mood-emoji span{font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-mute);text-transform:uppercase;position:relative;z-index:2}
.mood-emoji::before{content:"";position:absolute;inset:0;border-radius:20px;background:radial-gradient(80% 80% at 50% 30%,var(--halo,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:1}
.mood-emoji:hover{border-color:var(--olive-tint);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.mood-emoji:hover::before{opacity:.7}
.mood-emoji[data-key="low"]{--halo:rgba(166,114,75,.20)}
.mood-emoji[data-key="meh"]{--halo:rgba(138,141,118,.22)}
.mood-emoji[data-key="okay"]{--halo:rgba(122,136,97,.24)}
.mood-emoji[data-key="good"]{--halo:rgba(91,104,64,.30)}
.mood-emoji[data-key="bright"]{--halo:rgba(212,183,138,.40)}
.mood-emoji.active{border-color:transparent;color:var(--ink-on-olive);transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,46,20,.24)}
.mood-emoji.active::before{opacity:1;background:linear-gradient(160deg,var(--olive-light),var(--olive-deep))}
.mood-emoji.active[data-key="bright"]::before{background:linear-gradient(160deg,#c8a47e,#8d5a3c)}
.mood-emoji.active .face{transform:scale(1.08)}
.mood-emoji.active span{color:rgba(245,238,216,.92)}

.mem-filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.mem-filters .chip{font-size:12.5px;padding:8px 12px}
.memory-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.memory-card{background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;transition:all .25s ease;position:relative;overflow:hidden}
.memory-card:hover{border-color:var(--olive-tint);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
/* Faint icon watermark inside the card — visual texture, not chrome */
.memory-card .memory-watermark{position:absolute;right:-8px;bottom:-8px;width:88px;height:88px;color:var(--olive-deep);opacity:.05;pointer-events:none}
.memory-card > *{position:relative;z-index:1}
.memory-card .ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--olive-tint);color:var(--olive-deep)}
.memory-card .ic .i{width:20px;height:20px}
.memory-card .ic.c2{background:#d4ddc4;color:var(--olive-deep)}.memory-card .ic.c3{background:#e6d4b8;color:var(--cocoa)}.memory-card .ic.c4{background:#d8d2bd;color:var(--olive-deep)}
.memory-card .c{flex:1;min-width:0}
.memory-card .c .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.memory-card .c .v{font-size:14.5px;color:var(--ink);margin-top:4px;line-height:1.5}
.memory-card .c .d{font-size:11px;color:var(--ink-mute);margin-top:6px}
.memory-card .x{background:transparent;border:0;color:var(--ink-mute);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}
.memory-card .x:hover{background:#f6d5cf;color:var(--lip)}
.memory-card .x .i{width:14px;height:14px}
.memory-empty{text-align:center;padding:32px 8px;color:var(--ink-mute);display:flex;flex-direction:column;align-items:center;gap:14px}
.memory-empty-art{width:120px;height:80px;opacity:.85}
.memory-empty-text{font-size:13.5px;line-height:1.6;font-family:'Playfair Display',serif;font-style:italic;color:var(--ink-soft);max-width:300px}

.profile-head{text-align:center;padding:18px 0 8px}
.profile-hero{position:relative;width:132px;height:132px;margin:0 auto 14px}
.profile-head .pic{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--olive-tint);box-shadow:0 14px 32px rgba(40,46,20,.20);border:4px solid #fff;position:relative;z-index:1}
.profile-head .pic img,.profile-head .pic svg{width:100%;height:100%;object-fit:cover;display:block}
.profile-head .pic .initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:54px;color:var(--olive-deep);background:linear-gradient(160deg,var(--blush),#d8c2a0)}
.profile-head .hero-cam{position:absolute;right:-2px;bottom:-2px;width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:var(--olive);color:var(--ink-on-olive);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 14px rgba(40,46,20,.30);z-index:3;transition:transform .15s ease,background .2s ease}
.profile-head .hero-cam:hover{background:var(--olive-deep);transform:scale(1.05)}
.profile-head .hero-cam:active{transform:scale(.95)}
.profile-head .hero-cam .i{width:16px;height:16px}
.profile-head .hero-comp-chip{position:absolute;left:-6px;top:6px;width:42px;height:42px;border-radius:50%;border:3px solid #fff;overflow:hidden;background:var(--olive-tint);box-shadow:0 4px 10px rgba(40,46,20,.18);z-index:2}
.profile-head .hero-comp-chip .pic{width:100%;height:100%;border:0;box-shadow:none}
.profile-head h2{font-family:'Cal Sans',serif;font-weight:500;font-size:28px;margin-top:6px;letter-spacing:-.01em}
.profile-head h2 i{font-style:italic;color:var(--rose)}
.profile-head p{font-size:12px;color:var(--ink-mute);letter-spacing:.08em;margin-top:4px}
.edit-info-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);font:500 12.5px 'Inter',sans-serif;cursor:pointer;transition:all .18s ease}
.edit-info-btn:hover{border-color:var(--olive);color:var(--olive);box-shadow:var(--shadow-sm)}
.edit-info-btn .i{width:13px;height:13px}
.profile-hero.uploading .pic{opacity:.6}
.profile-hero.uploading::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:hero-spin .9s linear infinite;pointer-events:none}
@keyframes hero-spin{to{transform:rotate(360deg)}}

/* edit-info modal */
.edit-modal{position:fixed;inset:0;background:rgba(28,32,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1100;opacity:0;pointer-events:none;transition:opacity .18s ease;backdrop-filter:blur(2px)}
.edit-modal.show{opacity:1;pointer-events:auto}
.edit-modal.hidden{display:none}
.edit-modal-card{background:var(--bg);border-radius:24px;padding:22px 22px 18px;width:min(420px,100%);max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px rgba(20,24,12,.42);transform:translateY(8px);transition:transform .2s ease}
.edit-modal.show .edit-modal-card{transform:translateY(0)}
.edit-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.edit-modal-head h3{font-family:'Cal Sans',serif;font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-.01em}
.edit-modal-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
.edit-modal-close:hover{color:var(--ink);border-color:var(--ink-soft)}
.edit-modal-close .i{width:14px;height:14px}
.edit-modal-body{display:flex;flex-direction:column;gap:14px}
.edit-field{display:flex;flex-direction:column;gap:6px}
.edit-field>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.edit-field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:500 15px 'Inter',sans-serif;color:var(--ink);outline:none;transition:border .2s ease,box-shadow .2s ease}
.edit-field input:focus{border-color:var(--olive);box-shadow:0 0 0 3px rgba(62,74,47,.10)}
.edit-field .row{display:flex;flex-wrap:wrap;gap:8px}
.edit-modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.edit-modal-foot .btn{height:44px;padding:0 18px;font-size:14px}
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:20px 0 4px}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 12px;text-align:center;transition:all .2s ease}
.stat:hover{border-color:var(--olive-tint);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.stat b{font-family:'Cal Sans',serif;font-weight:500;font-size:28px;letter-spacing:-.02em;display:block;color:var(--rose);line-height:1}
.stat span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px;display:block;font-weight:600}
/* Section kickers in profile pages get a small icon prefix */
.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-top:18px}
.section-kicker .i{width:13px;height:13px;color:var(--rose);opacity:.85}

/* ----- Current-plan banner on the profile screen -----
   Visual changes per tier so the user can tell Free vs paid at a glance. */
.tier-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.tier-banner.is-paid{background:linear-gradient(135deg,#fff 0%,#fbf3ec 100%);border-color:var(--blush-strong)}
.tier-banner.is-canceled{background:#f7eee7;border-color:var(--line)}
.tier-banner.is-past-due{background:#fbe7df;border-color:#e8b3a0}
.tier-banner-left{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.tier-banner-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tier-banner-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.tier-banner-pill{display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--rose);color:#fff}
.tier-banner.is-canceled .tier-banner-pill{background:var(--ink-mute)}
.tier-banner.is-past-due .tier-banner-pill{background:var(--lip)}
.tier-banner-name{font-family:'Playfair Display',serif;font-style:italic;font-size:24px;color:var(--ink);line-height:1.1}
.tier-banner-renew{font-size:12.5px;color:var(--ink-soft)}
.tier-banner-cta{padding:10px 18px;border-radius:14px;background:var(--ink);color:#fff;border:0;font-size:13.5px;font-weight:600;cursor:pointer;flex-shrink:0;transition:transform .15s ease,background .15s ease}
.tier-banner-cta:hover{background:var(--cocoa);transform:translateY(-1px)}
.tier-banner.is-paid .tier-banner-cta{background:var(--rose)}
.tier-banner.is-paid .tier-banner-cta:hover{background:var(--cocoa)}

/* ----- Post-payment success modal — full-screen overlay with centered card. ----- */
.pay-success{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,46,20,.45);backdrop-filter:blur(6px);animation:pay-fade .22s ease both}
.pay-success-card{max-width:420px;width:100%;background:#fff;border-radius:24px;padding:36px 28px 26px;text-align:center;box-shadow:0 30px 60px rgba(40,46,20,.25);animation:pay-pop .35s cubic-bezier(.18,1.2,.4,1) both}
.pay-success-tick{width:64px;height:64px;border-radius:50%;background:#dde9c5;color:#3e4a2f;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;animation:pay-tick .5s cubic-bezier(.18,1.4,.4,1) .12s both}
.pay-success-tick svg{width:34px;height:34px}
.pay-success-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);font-weight:600;margin-bottom:8px}
.pay-success-title{font-family:'Cal Sans',serif;font-size:30px;font-weight:500;color:var(--ink);margin:0 0 6px;line-height:1.15}
.pay-success-title i{color:var(--rose);font-style:italic;font-weight:500}
.pay-success-sub{font-size:14px;color:var(--ink-soft);margin:0 0 22px;line-height:1.5;min-height:21px}
.pay-success-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pay-success-row .btn{flex:1;min-width:140px}
@keyframes pay-fade{from{opacity:0}to{opacity:1}}
@keyframes pay-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pay-tick{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.menu{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:8px}
.menu-item{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500;transition:background .15s ease}
.menu-item:hover{background:rgba(62,74,47,.04)}
.menu-item:last-child{border-bottom:0}
.menu-item .ic{width:36px;height:36px;border-radius:11px;background:var(--bg-deep);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-item .ic .i{width:18px;height:18px}
.menu-item .ic.ic-alert{background:#f5e3d6;color:var(--lip)}
.menu-item .ic.ic-danger{background:#f6d5cf;color:var(--lip)}
.menu-item .arr{margin-left:auto;color:var(--ink-mute);font-size:13px}
svg.arr.i{width:16px;height:16px;margin-left:auto;color:var(--ink-mute);flex-shrink:0}
.menu-item .toggle{margin-left:auto;width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:all .2s ease;flex-shrink:0;cursor:pointer}
.menu-item .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.menu-item .toggle.on{background:var(--olive)}
.menu-item .toggle.on::after{left:20px}
.menu-item.danger-text{color:var(--lip)}
.menu-item.danger-text .ic{color:var(--lip)}

/* ============================================================
   Mobile tabbar + toast
   ============================================================ */

.tabbar{position:fixed;bottom:0;left:0;right:0;height:var(--tabbar-h);background:rgba(241,234,215,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;padding:4px 10px max(18px,env(safe-area-inset-bottom));z-index:30}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:0;cursor:pointer;color:var(--ink-mute);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.tabbar .tab.active{color:var(--ink)}
.tabbar .tab svg{width:22px;height:22px}
.tabbar .tab.fab{background:var(--olive);color:var(--ink-on-olive);width:54px;height:54px;border-radius:999px;margin-top:-18px;font-size:0;flex:0 0 auto}
.tabbar .tab.fab svg{width:22px;height:22px}

.toast{position:fixed;bottom:max(96px,calc(var(--tabbar-h) + 24px));left:50%;transform:translate(-50%,40px);background:var(--olive);color:var(--ink-on-olive);padding:12px 20px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.01em;opacity:0;pointer-events:none;transition:all .3s ease;z-index:1000;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.error{background:var(--lip)}
@media (min-width:1024px){.toast{bottom:36px}}

.hidden{display:none!important}

/* Busy overlay */
.busy-shade{position:fixed;inset:0;background:rgba(244,236,227,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:1500;backdrop-filter:blur(6px)}
.busy-shade .spinner{width:54px;height:54px;border:3px solid rgba(168,99,76,.18);border-top-color:var(--lip);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.busy-shade .label{font-family:'Cal Sans',serif;font-size:22px;font-weight:500;color:var(--ink);text-align:center;max-width:380px;line-height:1.3;letter-spacing:-.01em}

/* ============================================================
   Voice mode overlay (Realtime) — full-screen
   ============================================================ */

.voice-overlay{position:fixed;inset:0;z-index:2000;background:radial-gradient(900px 700px at 50% 20%,#5b6840 0%,#3e4a2f 50%,#2a3320 100%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(48px,env(safe-area-inset-top)) 28px max(36px,env(safe-area-inset-bottom));opacity:0;pointer-events:none;transition:opacity .35s ease;color:var(--ink-on-olive)}
.voice-overlay.show{opacity:1;pointer-events:auto}
.voice-overlay.hidden{display:none}
.voice-top{text-align:center}
.voice-name{font-family:'Playfair Display',serif;font-weight:500;font-style:italic;font-size:36px;color:#e6d4b8;letter-spacing:-.01em}
.voice-status{margin-top:12px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,238,216,.78);display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(245,238,216,.18);backdrop-filter:blur(8px)}
.voice-status::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(245,238,216,.42);transition:background .25s ease,box-shadow .25s ease}
.voice-overlay.listening .voice-status::before{background:#7bc28e;box-shadow:0 0 0 3px rgba(123,194,142,.25)}
.voice-overlay.speaking .voice-status::before{background:#f0c97a;box-shadow:0 0 0 3px rgba(240,201,122,.30)}
.voice-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
.voice-orb-wrap{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}
.voice-orb{width:240px;height:240px;border-radius:50%;background-image:url('/static/images/logo.png');background-size:cover;background-position:center;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;transition:transform .3s ease;border:3px solid rgba(245,238,216,.18)}
.voice-orb img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.voice-overlay.speaking .voice-orb{transform:scale(1.05)}
.voice-rings{position:absolute;inset:0}
.voice-rings .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(230,212,184,.45);opacity:0;transform:scale(.8)}
.voice-overlay.speaking .voice-rings .ring{animation:voice-pulse 1.8s ease-out infinite}
.voice-rings .r2{animation-delay:.3s !important}
.voice-rings .r3{animation-delay:.6s !important}
.voice-overlay.listening .voice-rings .ring{animation:voice-listen 2.4s ease-in-out infinite}
@keyframes voice-pulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes voice-listen{0%,100%{transform:scale(.95);opacity:.3}50%{transform:scale(1.1);opacity:.55}}
.voice-caption{min-height:56px;max-height:140px;overflow:hidden;text-align:center;font-size:15px;line-height:1.55;color:rgba(245,238,216,.82);max-width:560px;padding:0 12px;transition:opacity .25s ease,transform .35s ease;letter-spacing:.005em}
.voice-caption b{color:#fff;font-weight:600}
.voice-caption.crossfade{opacity:.0;transform:translateY(4px)}
.voice-controls{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:14px}
.voice-btn{width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--olive-deep);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .2s ease,color .2s ease}
.voice-btn .i{width:24px;height:24px}
.voice-btn:active{transform:scale(.96)}
.voice-btn.muted{background:var(--olive-deep);color:var(--ink-on-olive)}
.voice-end{background:var(--lip);color:#fff;width:74px;height:74px}
.voice-end .i{width:24px;height:24px}
.voice-end:hover{background:#9b2818}
.voice-overlay audio{display:none}

@media (max-width:600px){
  .voice-orb-wrap{width:220px;height:220px}
  .voice-orb{width:188px;height:188px}
}

/* ============================================================
   Mobile-first refinements
   ============================================================ */

@media (max-width:768px){
  .page,.page-wide{padding:24px 20px 32px}
  .card{padding:24px 22px;border-radius:20px}
  
  .q-title{font-size:30px}
  .greeting .hi{font-size:30px}
  .grid-2{grid-template-columns:1fr}
}

/* === Tier banner duplicate block removed — see the canonical rules
   ~140 lines above (.tier-banner / .tier-banner-cta etc). The duplicate
   here was overriding the white CTA text with --olive-deep, leaving a
   dark-on-dark "See plans" button that was unreadable. === */

/* Upgrade view */
.upgrade-page .upgrade-card{padding:28px 28px 36px}
.upgrade-hero{text-align:center;margin:6px 0 22px}
.upgrade-hero .q-kicker{margin-bottom:8px}
.upgrade-title{font-family:'Cal Sans',serif;font-size:34px;line-height:1.08;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin:0 0 10px}
.upgrade-title i{color:var(--rose);font-style:italic;font-weight:500}
.upgrade-sub{font-size:14px;color:var(--ink-soft);max-width:520px;margin:0 auto;line-height:1.55}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;transition:transform .15s ease,box-shadow .2s ease,border-color .15s ease}
.plan-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(40,46,20,.12);border-color:var(--blush-strong)}
.plan-card.is-featured{border-color:var(--olive);box-shadow:0 12px 32px rgba(40,46,20,.18);background:linear-gradient(165deg,#fff,#fbf5e7)}
.plan-card.is-current{border-color:var(--rose);background:linear-gradient(165deg,#fff,var(--blush))}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--olive);color:var(--ink-on-olive);padding:4px 12px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;box-shadow:var(--shadow-sm)}
.plan-head{display:flex;flex-direction:column;gap:4px}
.plan-kicker{font:600 10.5px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute)}
.plan-name{margin:0;font-family:'Cal Sans',serif;font-size:18px;font-weight:500;line-height:1.25;color:var(--ink-soft)}
.plan-name i{font-style:italic;color:var(--ink)}
.plan-price{margin-top:6px;display:flex;align-items:baseline;gap:6px}
.plan-price .amt{font-family:'Cal Sans',serif;font-size:32px;font-weight:600;color:var(--olive-deep);letter-spacing:-.02em;line-height:1}
.plan-price .int{font-size:13px;color:var(--ink-mute)}
.plan-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink);line-height:1.5}
.plan-tick{width:14px;height:14px;flex:0 0 14px;color:var(--rose);margin-top:3px}
.plan-action{margin-top:auto}
.plan-cta{width:100%;border:0;border-radius:12px;padding:12px 14px;cursor:pointer;font:600 14px 'Inter',sans-serif;background:var(--olive);color:var(--ink-on-olive);box-shadow:0 6px 16px rgba(40,46,20,.18);transition:background .2s ease,transform .12s ease}
.plan-cta:hover:not([disabled]){background:var(--olive-deep);transform:translateY(-1px)}
.plan-cta[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.plan-cta.is-current{background:var(--rose);color:#fff}
.plan-cta.is-secondary{background:#fff;color:var(--ink-soft);border:1px solid var(--line)}

.plan-loading,.plan-empty{padding:24px;text-align:center;color:var(--ink-mute);font-size:14px}

.upgrade-foot{margin-top:18px;text-align:center}
.upgrade-foot .small{font-size:12px;color:var(--ink-mute)}

@media (max-width:600px){
  .upgrade-title{font-size:28px}
  .plan-grid{grid-template-columns:1fr}
}

/* === Current-plan panel (shown on /upgrade for paid users) === */
.current-plan-panel{position:relative;background:linear-gradient(165deg,#fff,#f7eedf);border:1px solid var(--blush-strong);border-radius:20px;padding:22px 22px 18px;margin-bottom:22px;box-shadow:0 8px 24px rgba(40,46,20,.08)}

.current-plan-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.current-plan-left .q-kicker{margin-bottom:4px}
.current-plan-name{margin:0;font-family:'Cal Sans',serif;font-size:30px;font-weight:600;color:var(--olive-deep);letter-spacing:-.015em;line-height:1.1}
.current-plan-tagline{margin:4px 0 0;font-style:italic;color:var(--ink-soft);font-family:'Playfair Display',serif;font-size:14.5px}
.current-plan-right{text-align:right;flex-shrink:0}
.current-plan-price{font-family:'Cal Sans',serif;font-size:30px;font-weight:600;color:var(--rose);line-height:1}
.current-plan-price span{font-size:13px;color:var(--ink-mute);font-weight:500;font-family:'Inter',sans-serif;margin-left:2px}
.current-plan-renew{margin:4px 0 0;font-size:12px;color:var(--ink-mute)}
.current-plan-features{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 14px}
.current-plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink);line-height:1.5}
.current-plan-actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.current-plan-actions .btn{padding:9px 16px;font-size:13px;border-radius:10px}

.upgrade-compare-head{font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--ink-soft);margin:6px 0 12px;font-weight:500}

@media (max-width:600px){
  .current-plan-row{flex-direction:column;align-items:flex-start}
  .current-plan-right{text-align:left}
  .current-plan-features{grid-template-columns:1fr}
}