/* Joseph Loya brand restyle (2026-07-07) — tokens mirror website/roamia-site/app/globals.css.
   Visual-only: class names, layout mechanics, and the mobile keyboard fix are untouched. */
:root{
  --ink:#16161A; --body:#33373D; --muted:#6B7280;
  --night:#070F1E; --paper:#F6F3EE; --card:#FFFFFF; --sand:#E9DFCF;
  /* Brand blue, from Joseph's Canva gradient (#5DE0E6 → #004AAD). Rebranded 2026-08-04 with
     the website — Eva is iframed INTO the site, so if these drift the drawer opens off-brand.
     --accentOnDark is the aqua stop: --accent is only 2.4:1 on --night, so anything sitting on
     a dark surface (the plan card) must use --accentOnDark instead. */
  --accent:#004AAD; --accent2:#003B8A; --accentSoft:#E8F1FB; --accentOnDark:#5DE0E6;
  --error:#C92F2F;
  --line:#E6E9EE;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter Tight",Inter,system-ui,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans);background:var(--night);color:var(--body);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.chat{
  width:100%;max-width:480px;height:100dvh;max-height:760px;background:var(--card);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;box-shadow:0 18px 60px rgba(0,0,0,.45);
}
@media (max-width:520px){ .chat{height:100dvh;max-height:none;border-radius:0} }

/* Header styles — DEFAULT is V5 "The Byline" (Josiel's pick 2026-07-07): white header, "Eva."
   set like the site's "Joseph Loya." wordmark (brand period), no avatar — the quiet header gives every
   brand element in the chat its punch back. `?style=v3|v4` previews the runner-up looks
   (html[data-eva-style] is set by the inline head script in index.html); no param = default. */
.chat__head{
  display:flex;align-items:center;gap:12px;padding:16px;
  background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);
  position:relative;
}
.chat__avatar{display:none;
  width:40px;height:40px;border-radius:50%;
  font-family:var(--serif);font-weight:600;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;
}
.chat__id{flex:1;min-width:0}
.chat__name{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.1;letter-spacing:.01em}
.chat__namedot{color:var(--accent)}
.chat__sub{font-size:12px;color:var(--muted);margin-top:2px}
.chat__status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.chat__status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:eva-pulse 2s infinite}
/* Degraded: Eva's last model call failed, so she cannot actually answer. Amber + no pulse — the
   pulse reads as "alive and listening", which is exactly the wrong signal here. Wins over every
   style-variant override below via the is-degraded scope. */
.chat__status.is-degraded .dot,
html[data-eva-style="v3"] .chat__status.is-degraded .dot,
html[data-eva-style="v4"] .chat__status.is-degraded .dot{background:#e0a03a;animation:none}
.chat__status.is-degraded{opacity:.85}
@keyframes eva-pulse-w{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}
  70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@keyframes eva-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,74,173,.5)}
  70%{box-shadow:0 0 0 7px rgba(0,74,173,0)}
  100%{box-shadow:0 0 0 0 rgba(0,74,173,0)}
}

/* V3 preview (?style=v3) — deep brand-blue gradient header */
html[data-eva-style="v3"] .chat__head{
  background:linear-gradient(135deg,#004AAD 0%,#00306E 100%);color:#fff;border-bottom:none;padding:14px 16px;
}
html[data-eva-style="v3"] .chat__avatar{display:flex;background:rgba(255,255,255,.92);color:#00306E}
html[data-eva-style="v3"] .chat__name{font-size:17px}
html[data-eva-style="v3"] .chat__namedot{display:none}
html[data-eva-style="v3"] .chat__sub{color:rgba(255,255,255,.68)}
html[data-eva-style="v3"] .chat__status{color:rgba(255,255,255,.8)}
html[data-eva-style="v3"] .chat__status .dot{background:#fff;animation-name:eva-pulse-w}
html[data-eva-style="v3"] .langbtn{border-color:rgba(255,255,255,.4);color:#fff}
html[data-eva-style="v3"] .langbtn.is-active{background:rgba(255,255,255,.2);border-color:transparent}

/* V4 preview (?style=v4) — blue-black gradient + film grain + sand type */
html[data-eva-style="v4"] .chat__head{
  background:linear-gradient(150deg,#101C2E 0%,#0A1220 55%,#070F1E 100%);color:var(--sand);border-bottom:none;padding:14px 16px;
}
html[data-eva-style="v4"] .chat__head::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-eva-style="v4"] .chat__avatar{display:flex;background:var(--sand);color:var(--ink)}
html[data-eva-style="v4"] .chat__name{font-size:17px}
html[data-eva-style="v4"] .chat__namedot{display:none}
html[data-eva-style="v4"] .chat__sub{color:rgba(233,223,207,.55)}
html[data-eva-style="v4"] .chat__status{color:rgba(233,223,207,.72)}
html[data-eva-style="v4"] .chat__status .dot{background:var(--accentOnDark);animation-name:eva-pulse}
html[data-eva-style="v4"] .langbtn{border-color:rgba(233,223,207,.4);color:var(--sand)}
html[data-eva-style="v4"] .langbtn.is-active{background:rgba(233,223,207,.18);border-color:transparent}

.chat__log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg--eva{align-self:flex-start;background:var(--card);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg--me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.msg--note{align-self:center;background:var(--accentSoft);color:var(--accent2);font-size:12.5px;border-radius:999px;padding:6px 14px}

.pdf{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:var(--card);color:var(--accent);border:1px solid var(--accent);
  border-radius:14px;padding:10px 14px;text-decoration:none;font-size:14px;font-weight:600;
}
.pdf:hover{background:var(--accentSoft)}

/* Tap-reply suggestion chips — wrap so any length fits; the site’s brand pill CTA style. */
.suggest{display:flex;flex-wrap:wrap;gap:8px;padding:2px 4px 4px;align-self:stretch}
.chip{
  border:none;color:#fff;background:var(--accent);
  border-radius:999px;padding:9px 16px;font-size:13.5px;line-height:1.25;font-weight:600;
  cursor:pointer;max-width:100%;text-align:left;font-family:inherit;
  transition:background .15s;
}
.chip:hover{background:var(--accent2)}
.chip:active{background:var(--accent2)}

/* Typing indicator: her name as a sender label ABOVE the dots bubble (iMessage pattern) —
   visitors see who's composing without the name crowding the animation. */
.typing-wrap{align-self:flex-start;display:flex;flex-direction:column;gap:4px}
.typing__label{font-family:var(--serif);font-weight:600;font-size:12.5px;color:var(--ink);padding-left:8px;line-height:1}
.typing__label .namedot{color:var(--accent)}
.typing{align-self:flex-start;display:flex;align-items:center;gap:4px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:18px;border-bottom-left-radius:6px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:.9}}

.chat__form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card)}
.chat__input{
  flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;outline:none;
  background:var(--card);color:var(--ink);font-family:inherit;
  font-size:16px; /* >=16px stops iOS Safari from auto-zooming when the field is tapped */
}
.chat__input::placeholder{color:var(--muted)}
.chat__input:focus{border-color:var(--accent)}
.chat__send{
  width:44px;height:44px;border:none;border-radius:50%;background:var(--accent);color:#fff;
  font-size:20px;cursor:pointer;flex:0 0 auto;transition:background .15s;
}
.chat__send:hover{background:var(--accent2)}
.chat__send:disabled{background:#D9D3C9;cursor:default}

/* --- Bilingual first-impression: EN|ES toggle + wave greeting (i18n) --- */
.chat__lang{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.langbtn{
  font:600 10.5px/1 var(--sans);padding:3px 7px;border-radius:999px;
  border:1px solid rgba(22,22,26,.28);background:transparent;color:var(--ink);cursor:pointer;
  opacity:.72;transition:opacity .15s,background .15s,border-color .15s;
}
.langbtn:hover{opacity:1}
.langbtn.is-active{opacity:1;background:rgba(22,22,26,.08);border-color:transparent}
.greet-wave{transition:opacity .18s ease}
.wave-emoji{display:inline-block;transform-origin:70% 70%;animation:eva-wave 2.4s ease-in-out infinite}
@keyframes eva-wave{
  0%,55%,100%{transform:rotate(0)}
  8%{transform:rotate(14deg)}16%{transform:rotate(-8deg)}24%{transform:rotate(14deg)}
  32%{transform:rotate(-4deg)}40%{transform:rotate(10deg)}
}
@media (prefers-reduced-motion: reduce){
  .wave-emoji{animation:none} .greet-wave{transition:none}
  .chat__status .dot{animation:none}
}

/* ═══ The Plan Card v2 (spec 105) — inline in the chat stream · two beats ═══
   Appended into #log by plan-card.js at the email ask (beat 1, locked) and unlocked at capture
   (beat 2). It scrolls with the transcript like a message — never an overlay, never occludes.
   Progressive enhancement: no JS → no card, classic PDF button, chat unchanged. */
.plancard{
  position:relative;margin:2px 0 4px;padding:12px 14px 13px;border-radius:14px;overflow:hidden;
  /* #log is an overflowing flex column — without flex:0 0 auto the card gets CRUSHED to its first
     row (live bug 2026-07-17: rendered as a thin bar, button unreachable). Never remove this. */
  flex:0 0 auto;align-self:stretch;
  background:linear-gradient(180deg,rgba(93,224,230,.07),rgba(0,74,173,0) 60%),var(--night);
  color:var(--sand);
  box-shadow:0 5px 20px rgba(11,11,15,.28);
}
.plancard::before{ /* faint blueprint grid — the "drafted for you" texture */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(233,223,207,.055) 0 1px,transparent 1px 17px),
             repeating-linear-gradient(90deg,rgba(233,223,207,.055) 0 1px,transparent 1px 17px);
}
.plancard.is-in{animation:pc-in .5s ease-out}
@keyframes pc-in{0%{opacity:0;transform:translateY(8px)}100%{transform:none}}

/* ── Locked state (Board ruling 2026-07-20) ──────────────────────────────────────────────────
   Beat 1 has no button and never did, but it glowed and animated, so leads read it as tappable,
   tapped it, got nothing, and were confused (Josiel field report 07-20). The fix is to SAY locked:
   no tap highlight, no pointer cursor, slightly receded, and an explicit lock line. The card still
   accepts the tap (plan-card.js listens on the card itself) purely to answer it with the ask — so
   `pointer-events` stays on the card while every child is inert. */
.plancard.is-locked{opacity:.9;box-shadow:0 3px 14px rgba(11,11,15,.22);cursor:default;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.plancard.is-locked > *{pointer-events:none}
.plancard__lock{margin:7px 0 0;font-size:11.5px;letter-spacing:.01em;color:rgba(233,223,207,.62);
  text-align:center;transition:color .18s ease}
.plancard.is-nudge{animation:pc-nudge .28s ease-in-out}
.plancard.is-nudge .plancard__lock{color:var(--accentOnDark)}
@keyframes pc-nudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.plancard.is-nudge{animation:none}}

.plancard__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.plancard__eyebrow{font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(233,223,207,.6)}
.plancard__count{font:600 10.5px/1 var(--sans);color:rgba(233,223,207,.75);white-space:nowrap}
.plancard__count.is-ready{color:var(--accent)}

.plancard__slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.plancard__slots--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:355px){.plancard__slots{grid-template-columns:repeat(2,1fr)}}
.pcslot{position:relative;border-radius:7px;min-width:0}
.pcslot__label{display:flex;align-items:center;gap:4px;font:600 8.5px/1 var(--sans);
               letter-spacing:.11em;text-transform:uppercase;color:rgba(233,223,207,.5)}
.pcslot__dot{width:5px;height:5px;border-radius:50%;background:rgba(233,223,207,.3);flex:0 0 auto;transition:background .3s,box-shadow .3s}
.pcslot.is-filled .pcslot__dot{background:var(--accentOnDark);box-shadow:0 0 6px rgba(93,224,230,.55)}
.pcslot__value{position:relative;display:block;margin-top:5px;height:16px}
.pcslot__ghost{position:absolute;left:0;top:3px;width:80%;height:9px;border-radius:4px;
               background:rgba(233,223,207,.15);filter:blur(2px);animation:pc-ghost 3.2s ease-in-out infinite}
@keyframes pc-ghost{0%,100%{opacity:.55}50%{opacity:.95}}
.pcslot__real{position:absolute;left:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
              font:600 12.5px/1.25 var(--sans);color:#fff;opacity:0;filter:blur(5px);transform:translateY(3px)}
.pcslot.is-filled .pcslot__ghost{opacity:0;transition:opacity .3s}
.pcslot.is-filled .pcslot__real{opacity:1;filter:blur(0);transform:none;
  animation:pc-matz .38s cubic-bezier(.2,.9,.3,1.18)} /* materialize: rise + settle */
@keyframes pc-matz{0%{opacity:0;transform:translateY(9px) scale(.88);filter:blur(5px)}
                   70%{opacity:1;transform:translateY(-1px) scale(1.03);filter:blur(0)}
                   100%{opacity:1;transform:none;filter:blur(0)}}
.pcslot.is-filled{animation:pc-glow .55s ease-out} /* red glow ring on fill */
@keyframes pc-glow{0%{box-shadow:0 0 0 0 rgba(0,74,173,0)}
                   35%{box-shadow:0 0 0 3px rgba(93,224,230,.3)}
                   100%{box-shadow:0 0 0 0 rgba(0,74,173,0)}}

.plancard__range{display:flex;align-items:baseline;gap:8px;margin-top:0;padding-top:0;max-height:0;overflow:hidden;
                 border-top:1px dashed rgba(233,223,207,0);opacity:0;transform:translateY(4px);
                 transition:max-height .4s ease,opacity .4s ease,transform .4s ease,margin-top .4s,padding-top .4s,border-color .4s}
.plancard__range.is-on{max-height:44px;margin-top:10px;padding-top:9px;opacity:1;transform:none;
                       border-top-color:rgba(233,223,207,.2)}
.plancard__range .rlabel{font:600 8.5px/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:rgba(233,223,207,.5)}
.plancard__range .rval{font-family:var(--serif);font-weight:600;font-size:16.5px;color:#fff}

/* Finale row is visible from beat 1 — locked shape shows "Prepared for ____" (ghost blank, no
   button); beat 2 stamps the name and raises the button. */
.plancard__finale{display:flex;align-items:center;justify-content:space-between;gap:10px;
                  margin-top:10px;padding-top:10px;border-top:1px solid rgba(233,223,207,.18)}
.pcname{font-family:var(--serif);font-weight:600;font-size:15.5px;color:#fff;min-width:0}
.pcname .dot{color:var(--accent)}
.pcname__blank{display:inline-block;width:64px;height:10px;margin-left:2px;border-radius:5px;
               vertical-align:baseline;background:rgba(233,223,207,.18);filter:blur(1px);
               animation:pc-ghost 3.2s ease-in-out infinite}
.plancard.is-done .pcname{animation:pc-stamp .34s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes pc-stamp{0%{opacity:0;transform:scale(1.28)}100%{opacity:1;transform:scale(1)}}
.pcopen{background:var(--accent);color:#fff;border-radius:999px;padding:9px 14px;font:600 12.5px/1 var(--sans);
        text-decoration:none;white-space:nowrap}
.pcopen:hover{background:var(--accent2)}
.plancard.is-done .pcopen{animation:pc-rise .32s .18s ease-out backwards}
@keyframes pc-rise{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:none}}
.plancard.is-snap .plancard__slots{animation:pc-converge .38s ease} /* snap-together finale beat */
@keyframes pc-converge{0%{transform:scale(1)}45%{transform:scale(.965)}100%{transform:scale(1)}}
.plancard__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .plancard,.pcslot__real,.plancard__range,.pcslot__dot{transition:none;animation:none}
  .plancard.is-in,.pcslot.is-filled,.pcslot.is-filled .pcslot__real,
  .plancard.is-snap .plancard__slots,.plancard.is-done .pcname,.plancard.is-done .pcopen{animation:none}
  .pcslot__ghost,.pcname__blank{animation:none}
}