/* DocSite — shared design tokens + components. Mock prototype, no backend. */
:root{
  --bg:#fafaf9; --surface:#ffffff; --border:#eceae6;
  --ink:#161513; --ink-soft:#6b6862; --ink-faint:#b7b3ab;
  --accent:#0b7c6e; --accent-soft:#e9f3f1;
  --radius:18px; --radius-sm:12px;
  --sidebar-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  animation:pageFade .25s ease both; /* trivial page-to-page fade, not a real transition system */
}
@keyframes pageFade{ from{ opacity:0; } to{ opacity:1; } }
a{ color:inherit; text-decoration:none; }
.hidden{ display:none !important; }
.center{ text-align:center; }

/* ---- auth pages (landing/signup/activate/password/login) ---- */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:6vh 20px;
}
.auth-stage{ width:100%; max-width:400px; margin:0 auto; text-align:center; }
.auth-stage.wide{ max-width:640px; }

.badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--accent); background:var(--accent-soft);
  padding:.45em .9em; border-radius:999px; margin:0 auto 2rem;
}
h1{
  font-size:clamp(1.9rem, 5vw, 2.8rem); line-height:1.1; letter-spacing:-.02em;
  font-weight:650; margin:0 0 .9rem;
}
h1.small{ font-size:1.5rem; }
.sub{
  font-size:1rem; color:var(--ink-soft); line-height:1.5;
  max-width:420px; margin:0 auto 2.2rem;
}
.stack{ display:flex; flex-direction:column; gap:.7rem; max-width:340px; margin:0 auto; }

.cta{
  width:100%; padding:1rem; border:none; border-radius:14px;
  background:var(--ink); color:#fff; font-size:.96rem; font-weight:600;
  cursor:pointer; transition:opacity .15s, transform .1s;
}
.cta:hover{ opacity:.88; }
.cta:active{ transform:scale(.99); }
.cta:disabled{ opacity:.45; cursor:not-allowed; }
.cta-ghost{
  width:100%; padding:.9rem; border-radius:14px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:.9rem; font-weight:600; cursor:pointer;
}
.cta-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); }

.btn-oauth{
  width:100%; padding:.85rem 1.1rem; border-radius:12px;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
  font-size:.95rem; font-weight:560; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.btn-oauth:hover{ border-color:#d6d2c9; background:#fcfbfa; }
.btn-oauth .oauth-ico{ width:18px; height:18px; flex-shrink:0; }

.divider{
  display:flex; align-items:center; gap:.8rem; color:var(--ink-soft);
  font-size:.75rem; margin:.6rem 0; text-transform:uppercase; letter-spacing:.04em;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border); }

.field{
  width:100%; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:.4rem .2rem; transition:border-color .15s;
}
.field:focus-within{ border-color:var(--accent); }
.field input, .field textarea{
  width:100%; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:.95rem; color:var(--ink); padding:.7rem .9rem;
}
input[type=email], input[type=password], input[type=text], input[type=tel], input[type=url]{
  width:100%; padding:.85rem 1.1rem; border-radius:12px;
  border:1.5px solid var(--border); font-size:.95rem; background:var(--surface);
  font-family:inherit; color:var(--ink);
}
input:focus{ outline:none; border-color:var(--accent); }
label{ display:block; font-size:.78rem; color:var(--ink-soft); text-align:left; margin:.2rem 0 .35rem; }

.link-btn{
  background:none; border:none; padding:.4rem; font-size:.86rem;
  color:var(--ink-soft); cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.link-btn:hover{ color:var(--ink); }
.note{ font-size:.78rem; color:var(--ink-soft); margin-top:.9rem; }
.legal{ font-size:.74rem; color:var(--ink-faint); margin-top:1.6rem; line-height:1.5; }

/* ---- entrance cascade ---- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.fade-in{ animation:riseIn .5s cubic-bezier(.16,1,.3,1) both; }
.auth-stage > *{ animation:riseIn .55s cubic-bezier(.16,1,.3,1) both; }
.auth-stage > *:nth-child(1){ animation-delay:.02s }
.auth-stage > *:nth-child(2){ animation-delay:.08s }
.auth-stage > *:nth-child(3){ animation-delay:.14s }
.auth-stage > *:nth-child(4){ animation-delay:.20s }
.auth-stage > *:nth-child(5){ animation-delay:.26s }

/* ---- app shell, used on every logged-in page. Quiet navigation that
   never competes with Bob: warm off-white rail, icon + label, the user
   chip and language picker at the bottom. Compact top bar on mobile. ---- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--sidebar-w); flex:none; background:#f5f4f1;
  border-right:1px solid rgba(22,21,19,.06);
  padding:1.15rem .8rem 1rem; display:flex; flex-direction:column; gap:1.4rem;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{ display:flex; align-items:center; justify-content:space-between; padding:.25rem .55rem; }
.wordmark{ font-size:1.02rem; font-weight:720; letter-spacing:-.03em; color:var(--ink); }
.wordmark em{ font-style:normal; color:var(--accent); }
.sidebar-nav{ display:flex; flex-direction:column; gap:.1rem; }
.sidebar-nav a, .sidebar-nav button{
  display:flex; align-items:center; gap:.65rem; padding:.55rem .6rem; border-radius:10px;
  font-size:.875rem; font-weight:500; color:#4a4843; background:none; border:none; cursor:pointer;
  text-align:left; width:100%; font-family:inherit; transition:background .15s, color .15s;
}
.sidebar-nav svg{ width:16px; height:16px; flex:none; color:#8a877f; }
.sidebar-nav a:hover, .sidebar-nav button:hover{ background:rgba(22,21,19,.045); color:var(--ink); }
.sidebar-nav a.active{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(22,21,19,.06), 0 0 0 1px rgba(22,21,19,.04); }
.sidebar-nav a.active svg{ color:var(--accent); }
.sidebar-nav .nav-new{ color:var(--ink); font-weight:600; margin-bottom:.35rem; }
.sidebar-nav .nav-new svg{ color:var(--ink); }
.nav-soon{ margin-left:auto; font-size:.64rem; font-weight:600; letter-spacing:.02em; color:#9a968d; border:1px solid rgba(22,21,19,.1); border-radius:999px; padding:.1em .55em; }
.sidebar-footer{ margin-top:auto; display:flex; flex-direction:column; gap:.6rem; }
.user-menu-wrap{ position:relative; }
.user-chip{
  display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem; border-radius:12px; min-width:0; width:100%;
  background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; transition:background .15s;
}
.user-chip:hover, .user-chip[aria-expanded="true"]{ background:rgba(22,21,19,.045); }
.user-meta .user-name, .user-meta .user-email{ display:block; }
.user-menu{
  position:absolute; bottom:calc(100% + 6px); left:0; right:0; z-index:30; list-style:none; margin:0; padding:.3rem;
  background:#fff; border-radius:12px; box-shadow:0 12px 32px -8px rgba(22,21,19,.18), 0 0 0 1px rgba(22,21,19,.06);
  animation:riseIn .18s cubic-bezier(.16,1,.3,1) both;
}
.user-menu li{ display:flex; align-items:center; gap:.55rem; font-size:.85rem; padding:.55rem .65rem; border-radius:8px; cursor:pointer; color:#4a4843; }
.user-menu li svg{ width:15px; height:15px; color:#8a877f; }
.user-menu li:hover{ background:rgba(22,21,19,.045); color:var(--ink); }
.user-avatar{
  width:30px; height:30px; border-radius:50%; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:650; color:#fff;
  background:linear-gradient(140deg,#2a2926,#55524b);
}
.user-avatar img{ width:100%; height:100%; object-fit:cover; }
.user-meta{ min-width:0; line-height:1.25; }
.user-name{ font-size:.82rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-email{ font-size:.72rem; color:#9a968d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* language picker — small and secondary */
.lang-picker{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:.76rem; color:#8a877f; padding:.35rem .55rem; border-radius:8px;
}
.lang-btn svg{ width:13px; height:13px; }
.lang-btn:hover{ color:var(--ink); background:rgba(22,21,19,.045); }
.lang-menu{
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:30; list-style:none; margin:0; padding:.3rem;
  min-width:150px; background:#fff; border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(22,21,19,.18), 0 0 0 1px rgba(22,21,19,.06);
  animation:riseIn .18s cubic-bezier(.16,1,.3,1) both;
}
.lang-menu li{ font-size:.82rem; padding:.45rem .65rem; border-radius:8px; cursor:pointer; color:#4a4843; }
.lang-menu li:hover{ background:rgba(22,21,19,.045); color:var(--ink); }
.lang-menu li[aria-selected="true"]{ color:var(--accent); font-weight:600; }

.main{ flex:1; min-width:0; padding:2.4rem 3rem; }
.main.narrow{ max-width:760px; margin:0 auto; }

@media (max-width:760px){
  .app-shell{ flex-direction:column; }
  .sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:20; flex-direction:row; align-items:center;
    padding:.55rem .8rem; gap:.4rem; border-right:none; border-bottom:1px solid rgba(22,21,19,.06);
    background:rgba(245,244,241,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  }
  .sidebar-brand{ padding:0 .3rem; margin-right:auto; }
  .sidebar-nav{ flex-direction:row; gap:.1rem; }
  .sidebar-nav a, .sidebar-nav button{ width:auto; padding:.5rem; }
  .sidebar-nav .nav-label, .nav-soon{ display:none; }
  .sidebar-nav .nav-new{ margin-bottom:0; }
  .sidebar-footer{ margin-top:0; flex-direction:row; align-items:center; gap:.2rem; }
  .user-meta{ display:none; }
  .user-chip{ padding:.2rem; }
  .user-avatar{ width:28px; height:28px; }
  .lang-menu{ bottom:auto; top:calc(100% + 6px); left:auto; right:0; }
  .user-menu{ bottom:auto; top:calc(100% + 6px); left:auto; right:0; min-width:170px; }
  .main{ padding:1.6rem 1.2rem; }
}

/* ---- Bob thread (shared across core/build/preview/editor) ---- */
.bob-mark{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.85rem; font-weight:650; color:var(--accent); margin-bottom:1.1rem;
}
.greeting{ font-size:.92rem; color:var(--ink-soft); margin-bottom:.6rem; }
.thread{ width:100%; display:flex; flex-direction:column; gap:1.1rem; text-align:left; }
.msg{ max-width:100%; animation:riseIn .5s cubic-bezier(.16,1,.3,1) both; }
.msg-bob .who{ font-size:.78rem; font-weight:650; color:var(--accent); margin-bottom:.3rem; }
.msg-bob .text{ font-size:1rem; line-height:1.55; white-space:pre-line; }
.msg-user{ display:flex; justify-content:flex-end; width:100%; }
.msg-user .text{
  background:var(--ink); color:#fff; padding:.75rem 1.05rem;
  border-radius:14px 14px 3px 14px; font-size:.95rem; line-height:1.45; max-width:82%;
}
.quick-replies{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.quick-replies .qr{
  padding:.55rem 1rem; border-radius:999px; font-size:.85rem;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
  cursor:pointer; transition:.15s; font-family:inherit;
}
.quick-replies .qr:hover{ border-color:var(--accent); background:var(--accent-soft); }
.quick-hint{ font-size:.8rem; color:var(--ink-soft); margin-top:.6rem; }
.msg-cta{
  margin-top:.9rem; padding:.8rem 1.2rem; border:none; border-radius:12px;
  background:var(--ink); color:#fff; font-size:.9rem; font-weight:600; cursor:pointer;
}
.msg-cta:hover{ opacity:.88; }
.composer{ width:100%; margin-top:1rem; }
.composer .field{ display:flex; align-items:flex-end; gap:.5rem; padding:.5rem .5rem .5rem 1rem; }
.composer textarea{ min-height:1.4rem; max-height:6rem; resize:none; padding:.5rem 0; }
.composer .send-btn{
  flex:none; width:38px; height:38px; border-radius:10px; border:none;
  background:var(--ink); color:#fff; font-size:1rem; cursor:pointer;
}
.composer .send-btn:hover{ opacity:.88; }
.composer .send-btn:disabled{ opacity:.4; cursor:not-allowed; }
.composer textarea:disabled{ color:var(--ink-faint); }

/* ---- Bob "working" state — real feedback for the real ~10s LLM call,
   shared by core.html/preview.html/editor.html via app/bob-working.js.
   No fake percentages, no fake steps — just an honest working state. ---- */
.working-row{ display:flex; align-items:center; gap:.7rem; }
.working-dot{ display:flex; gap:.28em; flex:none; }
.working-dot span{
  width:.4rem; height:.4rem; border-radius:50%; background:var(--accent);
  animation:workingPulse 1.1s ease-in-out infinite both;
}
.working-dot span:nth-child(2){ animation-delay:.15s; }
.working-dot span:nth-child(3){ animation-delay:.3s; }
@keyframes workingPulse{ 0%,80%,100%{ opacity:.25; transform:scale(.8); } 40%{ opacity:1; transform:scale(1); } }
.working-copy .working-main{ font-size:.95rem; }
.text-sub{ font-size:.82rem; color:var(--ink-soft); margin-top:.15rem; }
.msg-bob-error .text{ color:var(--ink-soft); }
.msg-retry{
  margin-top:.7rem; padding:.55rem 1.1rem; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
  font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.msg-retry:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* ---- status pills ---- */
.pill{ display:inline-flex; align-items:center; gap:.4em; font-size:.76rem; font-weight:650; padding:.3em .8em; border-radius:999px; }
.pill-draft{ background:#fdf6e3; color:#8a6d1f; }
.pill-published{ background:var(--accent-soft); color:var(--accent); }
.pill-dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }

/* ---- cards ---- */
.card{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.4rem; }
.card + .card{ margin-top:1rem; }

/* ---- checklist ---- */
.checklist{ display:flex; flex-direction:column; gap:.7rem; text-align:left; max-width:340px; margin:0 auto; }
.checklist-item{ display:flex; align-items:center; gap:.7rem; font-size:.92rem; color:var(--ink-soft); }
.checklist-item .mark{ width:1.1rem; text-align:center; flex:none; }
.checklist-item.done{ color:var(--ink); }
.checklist-item.active{ color:var(--ink); font-weight:600; }

/* ---- split editor (preview/editor pages) ---- */
.split{ display:grid; grid-template-columns:360px 1fr; gap:0; min-height:calc(100vh - 4.8rem); border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.split-bob{ border-right:1.5px solid var(--border); padding:1.6rem; display:flex; flex-direction:column; background:var(--surface); min-height:0; }
.split-bob .thread{ flex:1; overflow-y:auto; margin-bottom:1rem; }

/* ---- editor.html: Talk to Bob (left) + click-to-edit phone mockup
   (right) — both always available at once, no tab switching (Milestone
   5.2 replaced the old "Edit fields" form tab with direct click-to-edit
   on the real preview). ---- */
.editor-mode-label{ font-size:.78rem; font-weight:650; color:var(--ink-soft); margin-bottom:1rem; flex:none; }
.editor-pane{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* Reused by the Milestone 5.2 click-to-edit panel (app/click-to-edit.js) —
   same thumbnail/upload pattern Milestone 5.1 already established. */
.visual-add-btn{ align-self:flex-start; font-size:.82rem; padding:.55rem .9rem; }
.visual-save-note{ font-size:.7rem; color:var(--ink-faint); }
.visual-image-preview{
  width:100%; height:120px; border-radius:10px; overflow:hidden;
  background:var(--bg); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.visual-image-preview img{ width:100%; height:100%; object-fit:cover; }
.visual-image-empty{ font-size:.78rem; color:var(--ink-faint); }
input[type=color]{ width:46px; height:38px; padding:2px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; }
.split-preview{ background:#f3f2ef; display:flex; flex-direction:column; }
.split-preview .preview-toolbar{
  padding:.7rem 1.2rem; border-bottom:1px solid var(--border); font-size:.78rem;
  color:var(--ink-soft); background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex:none;
}
.settings-btn{
  background:none; border:1.5px solid var(--border); border-radius:8px;
  width:28px; height:28px; font-size:.85rem; cursor:pointer; flex:none; line-height:1;
}
.settings-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }
.split-preview .preview-frame{ flex:1; overflow-y:auto; padding:2rem; }

/* ---- Milestone 5.2: phone mockup + click-to-edit panel ---- */
.phone-stage{
  flex:1; overflow-y:auto; padding:2.4rem 1rem; display:flex;
  align-items:flex-start; justify-content:center; position:relative;
}
.phone-mockup{
  width:min(390px, 100%); flex:none; aspect-ratio:390/844;
  background:#111; border-radius:44px; padding:14px;
  box-shadow:0 30px 60px rgba(0,0,0,.22), 0 0 0 2px rgba(0,0,0,.05);
  position:relative;
}
.phone-mockup .phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:24px; background:#111; border-radius:0 0 14px 14px; z-index:2;
}
.phone-mockup .phone-screen{
  width:100%; height:100%; flex:none; padding:0; border:none;
  border-radius:30px; background:#fff; display:block; overflow-y:auto;
}
.edit-panel{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  width:min(390px, calc(100% - 2rem)); background:var(--surface);
  border:1.5px solid var(--border); border-radius:18px;
  box-shadow:0 -8px 32px rgba(0,0,0,.14); padding:1rem 1.2rem 1.2rem; z-index:10;
  animation:riseIn .25s cubic-bezier(.16,1,.3,1) both;
}
.edit-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.edit-panel-head span{ font-size:.8rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.edit-panel-close{ background:none; border:none; font-size:1rem; color:var(--ink-faint); cursor:pointer; line-height:1; padding:.2rem; }
.edit-panel-close:hover{ color:var(--ink); }
.edit-panel-body textarea{ min-height:5rem; resize:vertical; }
@media (max-width:900px){
  .phone-mockup{ width:min(340px, 100%); }
}
/* Real engine preview runs in an isolated iframe (engine/website-renderer.js
   takes over document.body — it must not fight the dashboard shell for it).
   No padding here: the real site should render edge-to-edge like it will
   when published, not boxed like the old mock preview. */
iframe.preview-frame{ padding:0; border:0; background:#fff; }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split-bob{ border-right:none; border-bottom:1.5px solid var(--border); }
}

/* ---- toast ---- */
.toast{
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:.8rem 1.3rem; border-radius:12px;
  font-size:.85rem; opacity:0; pointer-events:none; transition:.25s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }


/* ═════════════════════════════════════════════════════════════════════
   Bob — identity. Bob's mark is his own (NOT Vera's sphere): two stacked
   blocks, graphite base + DocSite-teal block on top, right sides rounded
   — an abstract "B" and building blocks at once. Bob is a builder.
   Pure CSS on the same empty <span class="bob-orb">: ::after = base,
   ::before = top block, so each can move on its own.
     rest      → the top block floats a hair
     thinking  → it lifts, slides and sets back down (placing a piece)
     listening → it leans toward the doctor
     done      → it drops into place with a small settle
   ═════════════════════════════════════════════════════════════════════ */
.bob-orb{
  --orb:26px;
  position:relative; display:inline-block; flex:none; width:var(--orb); height:var(--orb);
}
.bob-orb::before, .bob-orb::after{
  content:""; position:absolute; left:8%;
  border-radius:calc(var(--orb) * .1) calc(var(--orb) * .24) calc(var(--orb) * .24) calc(var(--orb) * .1);
}
.bob-orb::after{ /* base — graphite */
  bottom:7%; width:84%; height:44%;
  background:linear-gradient(165deg, #45423c 0%, #22211e 55%, #151412 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 calc(var(--orb) * .08) calc(var(--orb) * .22) calc(var(--orb) * -.08) rgba(22,21,19,.45);
}
.bob-orb::before{ /* top block — DocSite teal */
  top:9%; width:66%; height:38%; z-index:1;
  background:linear-gradient(160deg, #4cc2ad 0%, #149280 52%, #0b7c6e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 calc(var(--orb) * .05) calc(var(--orb) * .14) calc(var(--orb) * -.05) rgba(11,124,110,.5);
  transform-origin:20% 100%;
  animation:bobFloat 5.5s ease-in-out infinite;
  transition:rotate .6s cubic-bezier(.16,1,.3,1), filter .6s;
}
.bob-orb.lg{ --orb:52px; }
.bob-orb.is-working::before{ animation:bobPlace 1.7s cubic-bezier(.65,0,.35,1) infinite; }
.bob-orb.is-working::after{ animation:bobBase 1.7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes bobFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5%); } }
@keyframes bobPlace{
  0%{ transform:translate(0,0); }
  30%{ transform:translate(6%,-26%); }
  60%{ transform:translate(14%,-8%); }
  78%{ transform:translate(0,2%); }
  100%{ transform:translate(0,0); }
}
@keyframes bobBase{ 0%,70%,100%{ transform:scaleY(1); } 80%{ transform:scaleY(.9); } }
@keyframes bobDrop{ 0%{ transform:translateY(-30%); } 55%{ transform:translateY(4%); } 75%{ transform:translateY(-2%); } 100%{ transform:translateY(0); } }
@keyframes bobRise{ from{ opacity:0; transform:translateY(40%); } to{ opacity:1; transform:none; } }
@keyframes bobFall{ 0%{ opacity:0; transform:translateY(-120%); } 60%{ opacity:1; transform:translateY(5%); } 80%{ transform:translateY(-2%); } 100%{ transform:none; } }
@keyframes orbNod{ 0%{ transform:scale(1); } 40%{ transform:scale(.9); } 100%{ transform:scale(1); } }
@keyframes orbWake{ 0%{ transform:scale(.92); } 45%{ transform:scale(1.1); } 100%{ transform:scale(1); } }

/* Shared Bob surfaces (editor/preview threads too): orb + name header,
   orb-led working state with a soft shimmer across the copy. */
.msg-bob .who{ display:flex; align-items:center; gap:.5rem; color:var(--ink); }
.msg-bob .who .bob-orb{ --orb:20px; }
.msg-bob .who-name{ font-size:.82rem; font-weight:650; letter-spacing:-.01em; }
.working-row{ display:flex; align-items:center; gap:.8rem; }
.working-copy .working-main{ font-size:.95rem; }
.shimmer{
  background:linear-gradient(100deg, var(--ink-soft) 0%, var(--ink-soft) 40%, var(--ink) 50%, var(--ink-soft) 60%, var(--ink-soft) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 2.6s linear infinite;
}
@keyframes shimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* ═════════════════════════════════════════════════════════════════════
   core.html — the conversation IS the product. A centered editorial
   column, Bob speaking openly on the canvas (no cards), the doctor in a
   quiet bubble, a floating composer docked at the bottom. When Bob has
   something real to show, the live preview joins on the right as part of
   the same space.
   ═════════════════════════════════════════════════════════════════════ */
body[data-page="core"] .main{ padding:0; height:100vh; overflow:hidden; }
body[data-page="core"]{ background:#fbfaf8; }
.core-shell{ height:100%; display:flex; max-width:none; margin:0; }
.core-shell .split-bob{
  flex:1; min-width:0; display:flex; flex-direction:column; position:relative;
  padding:0; border:none; background:transparent;
}
.conv-scroll{
  flex:1; overflow-y:auto; scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 28px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 28px);
}
.conv-column{ width:100%; max-width:720px; margin:0 auto; padding:3.2rem 1.5rem 2rem; }
.core-shell .thread{ gap:0; flex:none; overflow:visible; margin-bottom:0; }

/* Bob — editorial, open on the canvas */
.core-shell .msg{ animation:convIn .45s cubic-bezier(.16,1,.3,1) both; }
.core-shell .msg-bob{ margin-top:2.1rem; }
.core-shell .msg-bob:first-child{ margin-top:0; }
.core-shell .msg-bob.cont{ margin-top:1.1rem; }
.core-shell .msg-bob.cont .who{ display:none; }
.core-shell .msg-bob .who{ margin-bottom:.7rem; }
.core-shell .msg-bob .who .bob-orb{ --orb:22px; }
.core-shell .msg-bob .who-name{ font-size:.86rem; }
.core-shell .msg-bob .text{
  font-size:1.0625rem; line-height:1.72; color:#22211e; letter-spacing:-.003em; white-space:normal;
}
.core-shell .msg-bob .text p{ margin:0 0 .85em; }
.core-shell .msg-bob .text p:last-child{ margin-bottom:0; }
.core-shell .msg-bob .text h4{ font-size:1.02rem; font-weight:650; margin:1.3em 0 .45em; letter-spacing:-.01em; }
.core-shell .msg-bob .text ul, .core-shell .msg-bob .text ol{ margin:.2em 0 .9em; padding-left:1.3em; }
.core-shell .msg-bob .text li{ margin:.3em 0; padding-left:.2em; }
.core-shell .msg-bob .text li::marker{ color:var(--accent); }
.core-shell .msg-bob .text strong{ font-weight:640; color:var(--ink); }

/* The welcome: Bob's first message, as the page's focal point */
.core-shell .msg-intro{ padding-top:min(14vh, 7rem); }
.core-shell .msg-intro .who{ flex-direction:column; align-items:flex-start; gap:1.1rem; margin-bottom:1.3rem; }
.core-shell .msg-intro .who .bob-orb{ --orb:52px; }
.core-shell .msg-intro .who-name{ display:none; }
.core-shell .msg-intro .text p:first-child{
  font-size:clamp(1.65rem, 3.4vw, 2.15rem); line-height:1.18; font-weight:620; letter-spacing:-.028em;
  color:var(--ink); margin-bottom:.7em;
}
.core-shell .msg-intro .text p:not(:first-child){ font-size:1.09rem; color:#55534d; max-width:34em; }

/* The doctor — a quiet, differentiated block */
.core-shell .msg-user{ margin-top:2.1rem; flex-direction:column; align-items:flex-end; }
.core-shell .msg-user .who-user{ font-size:.78rem; font-weight:600; color:#8a877f; margin:0 .35rem .4rem 0; }
.core-shell .msg-user .text{
  background:#efede8; color:var(--ink); border-radius:20px 20px 6px 20px;
  padding:.8rem 1.1rem; font-size:1rem; line-height:1.6; max-width:78%; white-space:pre-wrap;
}
.core-shell .msg-user.cont{ margin-top:.5rem; }
.core-shell .msg-user.cont .who-user{ display:none; }

/* Working state inside the conversation */
.core-shell .msg-bob-working{ margin-top:2.1rem; }
.core-shell .msg-bob-working .bob-orb{ --orb:22px; }
.core-shell .msg-bob-working .working-main{ font-size:1rem; }

/* Bob introduces the action inside the conversation */
.conv-action{ margin-top:1.3rem; display:flex; align-items:center; flex-wrap:wrap; gap:.9rem 1.1rem; animation:convIn .5s .1s cubic-bezier(.16,1,.3,1) both; }
.conv-action-text{ font-size:.95rem; color:#55534d; }
.core-shell .msg-cta{
  margin:0; display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.15rem .72rem 1.25rem; border-radius:999px; border:none; cursor:pointer;
  background:var(--ink); color:#fff; font-family:inherit; font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(22,21,19,.12), 0 8px 20px -10px rgba(22,21,19,.45);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, opacity .15s;
}
.core-shell .msg-cta svg{ width:15px; height:15px; transition:transform .18s; }
.core-shell .msg-cta:hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(22,21,19,.12), 0 12px 26px -10px rgba(22,21,19,.5); opacity:1; }
.core-shell .msg-cta:hover svg{ transform:translateX(2px); }

/* Composer — a floating conversation bar */
.conv-composer{ flex:none; padding:0 1.5rem 1.1rem; position:relative; }
.conv-composer::before{ /* the conversation fades under the bar */
  content:""; position:absolute; left:0; right:0; bottom:100%; height:28px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(251,250,248,0), #fbfaf8);
}
.composer-bar{
  max-width:720px; margin:0 auto; display:flex; align-items:flex-end; gap:.6rem;
  background:#fff; border:1px solid rgba(22,21,19,.09); border-radius:26px;
  padding:.55rem .55rem .55rem 1.2rem;
  box-shadow:0 1px 2px rgba(22,21,19,.04), 0 14px 36px -16px rgba(22,21,19,.16);
  transition:border-color .2s, box-shadow .2s;
}
.composer-bar:focus-within{
  border-color:rgba(11,124,110,.32);
  box-shadow:0 1px 2px rgba(22,21,19,.04), 0 14px 36px -16px rgba(22,21,19,.18), 0 0 0 4px rgba(11,124,110,.07);
}
.composer-bar textarea{
  flex:1; border:none; outline:none; background:transparent; resize:none;
  font-family:inherit; font-size:1rem; line-height:1.55; color:var(--ink);
  padding:.48rem 0; max-height:12rem; min-height:1.55em;
}
.composer-bar textarea::placeholder{ color:#a8a49b; }
.composer-bar textarea:disabled{ color:var(--ink-faint); }
.composer-bar .send-btn{
  flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; transition:background .18s, color .18s, transform .12s;
}
.composer-bar .send-btn svg{ width:17px; height:17px; }
.composer-bar .send-btn:active{ transform:scale(.94); }
.composer-bar .send-btn.is-empty, .composer-bar .send-btn:disabled{ background:#ebe9e4; color:#b3afa6; cursor:default; }
.composer-hint{ max-width:720px; margin:.55rem auto 0; text-align:center; font-size:.72rem; color:#a8a49b; }

/* Live preview, joining the same space */
.core-shell .split-preview{
  flex:none; width:min(54%, 860px); display:flex; flex-direction:column;
  margin:.9rem .9rem .9rem 0; border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(22,21,19,.06), 0 24px 60px -28px rgba(22,21,19,.28);
  animation:previewIn .7s cubic-bezier(.16,1,.3,1) both;
}
.core-shell .split-preview .preview-toolbar{
  display:flex; align-items:center; gap:.6rem; justify-content:flex-start;
  padding:.75rem 1rem; border-bottom:1px solid rgba(22,21,19,.06); background:#fff;
  font-size:.82rem; color:var(--ink); font-weight:600;
}
.core-shell .split-preview .preview-toolbar .bob-orb{ --orb:16px; }
.preview-live{ margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:500; color:#8a877f; }
.preview-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#1fa38f; box-shadow:0 0 0 3px rgba(31,163,143,.15); }
.core-shell.revealed .conv-column{ max-width:640px; }
@keyframes previewIn{ from{ opacity:0; transform:translateX(24px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes convIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:1100px){
  .core-shell.revealed{ flex-direction:column; }
  .core-shell.revealed .split-bob{ flex:none; height:55%; }
  .core-shell .split-preview{ width:auto; flex:1; margin:0 .8rem .8rem; }
}
@media (max-width:760px){
  body[data-page="core"] .main{ height:calc(100vh - 53px); height:calc(100dvh - 53px); }
  .conv-column{ padding:1.8rem 1.1rem 1.4rem; }
  .core-shell .msg-intro{ padding-top:4vh; }
  .core-shell .msg-user .text{ max-width:88%; }
  .conv-composer{ padding:0 .8rem calc(.8rem + env(safe-area-inset-bottom)); }
  .composer-hint{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .bob-orb, .bob-orb::before, .bob-orb::after, .shimmer{ animation:none !important; }
  .bob-orb::before{ transition:none; }
  .shimmer{ color:var(--ink-soft); background:none; }
  .core-shell .msg, .conv-action, .core-shell .split-preview, .lang-menu, .fade-in, .msg{ animation:none !important; }
  .conv-scroll{ scroll-behavior:auto; }
}

/* ═════════════════════════════════════════════════════════════════════
   Bob's space + presence. The conversation lives in its own panel — the
   place where Bob works with the doctor. Its ambient light and Bob's
   current orb follow ONE state machine (.core-shell[data-bob]):
     idle → calm · listening → attention · thinking → activity ·
     speaking → wakes, then settles · building → the site really changed ·
     done → a small satisfied expansion, back to rest.
   Every movement maps to a real state; nothing is decorative.
   ═════════════════════════════════════════════════════════════════════ */
.core-shell{ padding:.9rem; gap:.9rem; }
.core-shell .split-bob{
  border-radius:22px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, #ffffff 0%, #fdfcfa 100%);
  box-shadow:0 0 0 1px rgba(22,21,19,.055), 0 1px 2px rgba(22,21,19,.03), 0 30px 70px -48px rgba(22,21,19,.22);
}
.bob-space-light{ /* ambient light — almost imperceptible, reacts to Bob */
  position:absolute; z-index:-1; pointer-events:none; left:50%; top:-38%; width:120%; height:80%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(23,149,131,.075), rgba(23,149,131,0));
  opacity:.45; transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.core-shell[data-bob="listening"] .bob-space-light{ opacity:.7; }
.core-shell[data-bob="thinking"] .bob-space-light{ opacity:1; animation:spaceDrift 3.2s ease-in-out infinite; }
.core-shell[data-bob="building"] .bob-space-light{ opacity:1; transform:translateX(-50%) scale(1.08); }
.core-shell[data-bob="done"] .bob-space-light{ opacity:.8; }
@keyframes spaceDrift{ 0%,100%{ transform:translateX(-52%) scale(1); } 50%{ transform:translateX(-48%) scale(1.06); } }
.conv-composer::before{ background:linear-gradient(to bottom, rgba(253,252,250,0), #fdfcfa); }

/* Bob's current orb (latest message) carries his state */
.core-shell .msg-bob .who .bob-orb{ transition:scale .7s cubic-bezier(.16,1,.3,1); }
.core-shell[data-bob="listening"] .msg-bob.is-current .who .bob-orb{ scale:1.06; }
.core-shell[data-bob="listening"] .msg-bob.is-current .who .bob-orb::before{ rotate:-9deg; filter:brightness(1.06); }
.core-shell .msg-bob.is-current.wake .who .bob-orb{ animation:orbWake .9s cubic-bezier(.16,1,.3,1) both; }
.core-shell .msg-bob.is-current.nod .who .bob-orb{ animation:orbNod .5s cubic-bezier(.16,1,.3,1) both; }
.core-shell[data-bob="done"] .msg-bob.is-current .who .bob-orb::before{ animation:bobDrop .9s cubic-bezier(.16,1,.3,1) both, bobFloat 5.5s .9s ease-in-out infinite; }
.core-shell .msg-bob.anticipate .who .bob-orb{ scale:1.08; }
.core-shell .msg-bob.anticipate .who .bob-orb::before{ rotate:-6deg; }
@keyframes orbWake{ 0%{ transform:scale(.9); filter:brightness(1.18); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); filter:none; } }
@keyframes orbNod{ 0%{ transform:scale(1); } 40%{ transform:scale(.92); } 100%{ transform:scale(1); } }

/* Thinking: the working orb expands/contracts with a slower, deeper rhythm than a spinner */

/* Bob's reply arrives in an editorial stagger: the first block sets his
   presence, the following ones follow a beat behind. */
.core-shell .msg-bob.stagger .text > *{ animation:convIn .55s cubic-bezier(.16,1,.3,1) both; }

/* Arrival — first visit only: space → Bob arrives → greeting → first
   sentence → composer. One sequence, not seven separate animations. */
.core-shell.arriving .split-bob{ animation:spaceIn .7s cubic-bezier(.16,1,.3,1) both; }
.core-shell.arriving .msg-intro{ animation:none; }
.core-shell.arriving .msg-intro .who .bob-orb::after{ animation:bobRise .6s .2s cubic-bezier(.16,1,.3,1) both; }
.core-shell.arriving .msg-intro .who .bob-orb::before{ animation:bobFall .8s .5s cubic-bezier(.16,1,.3,1) both, bobFloat 5.5s 1.3s ease-in-out infinite; }
.core-shell.arriving .msg-intro .text > *{ animation:convIn .7s cubic-bezier(.16,1,.3,1) both; }
.core-shell.arriving .msg-intro .text > :nth-child(1){ animation-delay:.85s; }
.core-shell.arriving .msg-intro .text > :nth-child(2){ animation-delay:1.1s; }
.core-shell.arriving .msg-intro .text > :nth-child(n+3){ animation-delay:1.25s; }
.core-shell.arriving .conv-composer{ animation:convIn .7s 1.45s cubic-bezier(.16,1,.3,1) both; }
@keyframes spaceIn{ from{ opacity:0; transform:scale(.992); } to{ opacity:1; transform:none; } }

/* Conversation → site: the preview materializes the first time, and every
   REAL change Bob makes passes a soft light across it. */
.core-shell .split-preview{ position:relative; }
.core-shell .split-preview.materialize .pv-device{ animation:materialize 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes materialize{ from{ opacity:0; filter:blur(10px) saturate(.6); transform:scale(.985); } to{ opacity:1; filter:none; transform:none; } }
.core-shell .split-preview::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(214,242,236,.55) 48%, rgba(255,255,255,0) 66%);
  background-size:250% 100%;
}
.core-shell .split-preview.touched::after{ animation:touch 1.3s cubic-bezier(.4,0,.2,1) both; }
@keyframes touch{ 0%{ opacity:0; background-position:110% 0; } 15%{ opacity:1; } 100%{ opacity:0; background-position:-60% 0; } }
.preview-live.updated{ color:var(--accent); }
.core-shell[data-bob="building"] .split-preview .preview-toolbar .bob-orb::before{ animation:bobPlace 1.2s cubic-bezier(.65,0,.35,1) infinite; }

@media (max-width:760px){
  .core-shell{ padding:.5rem; gap:.5rem; }
  .core-shell .split-bob{ border-radius:18px; }
}
@media (prefers-reduced-motion: reduce){
  .bob-space-light{ animation:none !important; transition:none; }
  .core-shell *, .core-shell .split-preview::after{ animation:none !important; }
}

/* ── voice: messages to Bob + Bob's voice ── */
.is-hidden{ display:none !important; }
.composer-bar .mic-btn{
  flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:#6b6862; transition:background .18s, color .18s, transform .12s;
}
.composer-bar .mic-btn svg{ width:18px; height:18px; }
.composer-bar .mic-btn .ico-send{ display:none; }
.composer-bar .mic-btn:hover{ background:rgba(22,21,19,.05); color:var(--ink); }
.composer-bar .mic-btn:active{ transform:scale(.94); }
.composer-bar .mic-btn.is-recording{ background:var(--ink); color:#fff; }
.composer-bar .mic-btn.is-recording .ico-mic{ display:none; }
.composer-bar .mic-btn.is-recording .ico-send{ display:block; }
.composer-bar.is-recording{ border-color:rgba(214,69,65,.28); box-shadow:0 1px 2px rgba(22,21,19,.04), 0 14px 36px -16px rgba(22,21,19,.16), 0 0 0 4px rgba(214,69,65,.06); }
.composer-bar.is-recording textarea{ color:#55534d; }
.rec-cancel{
  flex:none; width:32px; height:32px; margin:3px 0 3px -.5rem; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(22,21,19,.05); color:#6b6862;
}
.rec-cancel svg{ width:14px; height:14px; }
.rec-cancel:hover{ background:rgba(22,21,19,.09); color:var(--ink); }
.rec-indicator{ flex:none; display:flex; align-items:center; gap:.4rem; align-self:center; font-size:.8rem; font-variant-numeric:tabular-nums; color:#b4423e; }
.rec-dot{ width:8px; height:8px; border-radius:50%; background:#d64541; animation:recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.8); } }
.voice-tag{ display:flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; color:#8a877f; margin-bottom:.25rem; }
.voice-tag svg{ width:12px; height:12px; }
@media (prefers-reduced-motion: reduce){ .rec-dot{ animation:none; } }

/* claims filter notice — quiet, factual, inside Bob's turn */
.claims-notice{
  margin-top:.9rem; display:flex; gap:.5rem; align-items:flex-start;
  font-size:.82rem; line-height:1.5; color:#7a6a3a; background:#fbf6e9; border:1px solid #efe3c2;
  border-radius:12px; padding:.6rem .8rem; animation:convIn .45s .2s cubic-bezier(.16,1,.3,1) both;
}
.claims-notice::before{ content:"!"; flex:none; width:16px; height:16px; border-radius:50%; background:#e6cf8f; color:#5c4a17; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:.1rem; }

/* Account preference "Reduced motion" (user_preferences.reduced_motion) —
   same effect as the system setting, applied app-wide via shell.js. */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
html.reduce-motion .shimmer{ color:var(--ink-soft); background:none; }

/* ═════════════════════════════════════════════════════════════════════
   Preview Studio (core.html) — the real-engine iframe at a real device
   viewport (app/preview-studio.js): a phone (390 CSS px) or a computer
   (1280), scaled to fit. Same renderer as the published site.
   ═════════════════════════════════════════════════════════════════════ */
.core-shell .split-preview{ background:#f4f3f0; }
.core-shell .split-preview .preview-toolbar{ flex-wrap:wrap; row-gap:.5rem; }
.pv-heading{ display:flex; flex-direction:column; line-height:1.25; }
.pv-caption{ font-size:.72rem; font-weight:500; color:#8a877f; }
.core-shell .preview-live{ margin-left:auto; }
.pv-seg{ display:inline-flex; background:#f1efeb; border-radius:999px; padding:3px; gap:2px; }
.pv-seg button{
  display:inline-flex; align-items:center; gap:.38rem; border:none; background:transparent; cursor:pointer;
  font:inherit; font-size:.76rem; font-weight:600; color:#77736b; padding:.38rem .8rem; border-radius:999px;
  transition:background .2s, color .2s, box-shadow .2s;
}
.pv-seg button svg{ width:14px; height:14px; }
.pv-seg button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(22,21,19,.1), 0 2px 8px -2px rgba(22,21,19,.12); }
.pv-stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.pv-device{ position:relative; flex:none; transition:opacity .25s; }
.pv-viewport{ overflow:hidden; position:relative; background:#fff; }
.pv-viewport .preview-frame{ display:block; position:absolute; left:0; top:0; border:0; transform-origin:0 0; background:#fff; }
.pv-chrome{ display:none; }
/* phone */
.pv-device[data-device="mobile"]{
  background:#121212; border-radius:46px; padding:12px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08), 0 30px 70px -24px rgba(22,21,19,.45);
}
.pv-device[data-device="mobile"]::before{ /* the island */
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:3;
  width:86px; height:22px; border-radius:20px; background:#121212; pointer-events:none;
}
.pv-device[data-device="mobile"] .pv-viewport{ border-radius:35px; }
.pv-device[data-device="mobile"].bare{ background:none; padding:0; border-radius:0; box-shadow:none; }
.pv-device[data-device="mobile"].bare::before{ display:none; }
.pv-device[data-device="mobile"].bare .pv-viewport{ border-radius:0; }
/* computer */
.pv-device[data-device="web"]{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(22,21,19,.1), 0 24px 60px -26px rgba(22,21,19,.38);
}
.pv-device[data-device="web"] .pv-chrome{
  display:flex; align-items:center; height:34px; padding:0 12px; position:relative;
  background:#f6f5f2; border-bottom:1px solid rgba(22,21,19,.07);
}
.pv-dots{ display:flex; gap:6px; }
.pv-dots i{ width:10px; height:10px; border-radius:50%; background:#e2dfd8; }
.pv-url{
  position:absolute; left:50%; transform:translateX(-50%); font-size:.72rem; color:#8a877f;
  background:#fff; border-radius:7px; padding:.2rem 1.4rem; box-shadow:0 0 0 1px rgba(22,21,19,.06);
}
@media (max-width:480px){
  .pv-device[data-device="web"]{ border-radius:0; box-shadow:none; }
}

/* After the build: see → refine → activate */
.postbuild{
  flex:none; display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap;
  padding:1rem 1.2rem; background:#fff; border-top:1px solid rgba(22,21,19,.07);
}
.postbuild.arrive{ animation:convIn .6s .15s cubic-bezier(.16,1,.3,1) both; }
.pb-text{ flex:1 1 220px; min-width:0; }
.pb-title{ font-size:.95rem; font-weight:650; color:var(--ink); letter-spacing:-.01em; }
.pb-body{ font-size:.82rem; color:#77736b; margin-top:.15rem; line-height:1.45; }
.postbuild[data-state="active"] .pb-title{ color:var(--accent); }
.pb-actions{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.pb-btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
  font:inherit; font-size:.84rem; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  padding:.62rem 1.05rem; border-radius:999px; border:1px solid rgba(22,21,19,.12);
  background:#fff; color:var(--ink); transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, background .18s;
}
.pb-btn:hover{ background:#f7f6f3; transform:translateY(-1px); }
.pb-btn.solid{
  background:var(--ink); color:#fff; border-color:var(--ink); padding:.7rem 1.25rem;
  box-shadow:0 1px 2px rgba(22,21,19,.12), 0 10px 24px -12px rgba(22,21,19,.55);
}
.pb-btn.solid:hover{ background:#000; }
.pb-btn.soft{ background:var(--accent-soft, #e7f4f1); color:var(--accent); border-color:transparent; }

@media (max-width:1100px){
  .core-shell.revealed .split-bob{ height:46%; }
}
@media (max-width:760px){
  .core-shell .split-preview .preview-toolbar{ padding:.55rem .7rem; }
  .core-shell .split-preview .preview-toolbar > .bob-orb, .pv-caption, .core-shell .preview-live{ display:none; }
  .pv-seg{ margin-left:auto; }
  .postbuild{ padding:.7rem; gap:.55rem; }
  .pb-text{ flex-basis:100%; }
  .pb-body{ display:none; }
  .pb-actions{ width:100%; }
  .pb-btn{ flex:1 1 auto; padding:.55rem .7rem; font-size:.8rem; }
  .pb-btn.solid, .pb-btn.soft{ flex-basis:100%; order:-1; }
}
@media (prefers-reduced-motion: reduce){ .postbuild.arrive{ animation:none; } }
/* The real site renders edge to edge: the old mock-preview padding
   (.split-preview .preview-frame) out-specifies iframe.preview-frame and
   shrank the engine's viewport by 4rem — part of the "squashed" preview. */
.core-shell .pv-viewport .preview-frame{ padding:0; }

/* Phones/tablets: [Bob | Tu sitio] take turns on the screen once the site exists */
.core-tabs{ display:none; }
@media (max-width:760px){
  /* main is a flex item here, so height:100% doesn't resolve — same height main uses */
  body[data-page="core"] .core-shell{ height:calc(100vh - 53px); height:calc(100dvh - 53px); }
}
/* phones and tablets: the site gets the whole screen when it's its turn */
@media (max-width:1100px){
  .core-shell.revealed{ flex-direction:column; }
  .core-shell.revealed .core-tabs{
    display:flex; flex:none; gap:3px; padding:3px; margin:0 auto; border-radius:999px; background:#efede8;
  }
  .core-tabs button{
    position:relative; display:inline-flex; align-items:center; gap:.45rem; border:none; background:transparent; cursor:pointer;
    font:inherit; font-size:.84rem; font-weight:600; color:#77736b; padding:.48rem 1.1rem; border-radius:999px;
  }
  .core-tabs button .bob-orb{ --orb:15px; }
  .core-tabs button[aria-selected="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(22,21,19,.1), 0 2px 8px -2px rgba(22,21,19,.12); }
  .tab-dot{ display:none; width:7px; height:7px; border-radius:50%; background:var(--accent); }
  .core-tabs.has-update .tab-dot{ display:inline-block; }
  .core-shell.revealed .split-bob{ flex:1; height:auto; min-height:0; }
  .core-shell.revealed .split-preview{ flex:1; min-height:0; margin:0; width:auto; }
  .core-shell.revealed[data-view="chat"] .split-preview{ display:none; }
  .core-shell.revealed[data-view="site"] .split-bob{ display:none; }
}
@media (min-width:761px) and (max-height:800px){
  .postbuild{ padding:.75rem 1rem; }
}

/* Post-build v2 — the site is the protagonist; the card reads as the
   natural next step after seeing it. */
@media (min-width:1101px){
  .core-shell.is-built .split-preview{ width:min(62%, 1180px); }
  .core-shell.is-built .split-bob{ min-width:340px; }
  .core-shell.is-built .conv-column{ max-width:600px; }
}
.pv-heading #previewTitle{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.pv-full{
  display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; font-size:.76rem; font-weight:600;
  color:#77736b; padding:.38rem .6rem; border-radius:999px; transition:background .2s, color .2s;
}
.pv-full svg{ width:13px; height:13px; }
.pv-full:hover{ background:#f1efeb; color:var(--ink); }
.pv-full.hidden{ display:none; }
.postbuild{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"text actions" "text note";
  align-items:center; gap:.35rem 1.4rem; padding:1.05rem 1.3rem;
}
.postbuild .pb-text{ grid-area:text; }
.postbuild .pb-actions{ grid-area:actions; justify-content:flex-end; }
.pb-note{ grid-area:note; font-size:.72rem; color:#8a877f; text-align:right; }
.pb-note:empty{ display:none; }
.postbuild .pb-title{ font-size:1.02rem; }
.pb-body:empty{ display:none; }
@media (max-width:1300px){
  .postbuild{ grid-template-columns:1fr; grid-template-areas:"text" "actions" "note"; }
  .postbuild .pb-actions{ justify-content:flex-start; }
  .pb-note{ text-align:left; }
}
@media (max-width:760px){
  .pv-full span{ display:none; }
  .pv-full{ margin-left:auto; }
  .pv-seg{ margin-left:0; }
  .postbuild{ gap:.5rem; }
  .pb-body:not(:empty){ display:block; }
}

/* Post-build secondary links + "Empezar de cero" confirmation */
.pb-links{ grid-column:1/-1; display:flex; gap:.4rem 1.4rem; flex-wrap:wrap; justify-content:flex-end; margin-top:.7rem; padding-top:.8rem; border-top:1px solid rgba(0,0,0,.07); }
.pb-links:empty{ display:none; }
.pb-link{ background:none; border:none; padding:.35rem .15rem; min-height:36px; display:inline-flex; align-items:center; cursor:pointer; font:inherit; font-size:.84rem; font-weight:600; color:#55534d; text-decoration:none; }
.pb-link:hover{ color:var(--ink); text-decoration:underline; }
@media (max-width:1300px){ .pb-links{ justify-content:flex-start; } }
.pb-btn.danger{ background:#b3261e; color:#fff; border-color:#b3261e; }
.pb-btn.danger:hover{ background:#8f1d17; }
.pb-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.ds-dialog-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(22,21,19,.42); display:flex; align-items:center; justify-content:center; padding:16px; animation:convIn .2s ease both; }
.ds-dialog{ background:#fff; border-radius:18px; max-width:420px; width:100%; padding:1.4rem 1.4rem 1.2rem; box-shadow:0 30px 80px -20px rgba(22,21,19,.45); }
.ds-dialog h3{ margin:0 0 .5rem; font-size:1.05rem; letter-spacing:-.01em; }
.ds-dialog p{ margin:0 0 1.2rem; font-size:.9rem; line-height:1.5; color:#55534d; }
.ds-dialog-actions{ display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; }

/* ═════════════════════════════════════════════════════════════════════
   editor.html — the MANUAL editor (Bob has his own space in core.html).
   The real site at a real viewport (Mobile/Web, app/preview-studio.js) on
   the left, the edit panel always open on the right.
   ═════════════════════════════════════════════════════════════════════ */
body[data-page="editor"] .main{ height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.ed-head{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.ed-head h1{ margin:0; }
.ed-head-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ed-head-btn{ width:auto !important; padding:.6rem 1.1rem !important; }
.ed-link{ background:none; border:none; padding:.4rem .2rem; cursor:pointer; font:inherit; font-size:.82rem; font-weight:600; color:#77736b; }
.ed-link:hover{ color:#b3261e; text-decoration:underline; }
.ed-layout{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:1rem; }
.ed-preview{ min-width:0; min-height:0; display:flex; flex-direction:column; background:#f4f3f0; border-radius:18px; overflow:hidden; box-shadow:0 0 0 1px rgba(22,21,19,.06); }
.ed-toolbar{ flex:none; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.7rem 1rem; background:#fff; border-bottom:1px solid rgba(22,21,19,.06); }
.ed-hint{ font-size:.78rem; color:#77736b; margin-right:auto; }
.ed-identity-btn{ border:1px solid rgba(22,21,19,.12); background:#fff; border-radius:999px; padding:.38rem .9rem; font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; }
.ed-identity-btn:hover{ background:#f7f6f3; }
.pv-viewport .preview-frame{ padding:0 !important; }
.ed-side{ min-height:0; overflow-y:auto; }
.ed-panel{ position:static !important; transform:none !important; left:auto; bottom:auto; width:auto !important; box-shadow:0 0 0 1px rgba(22,21,19,.06) !important; animation:none !important; }
.ed-panel.hidden{ display:block !important; }
.visual-image-preview.is-clickable{ cursor:pointer; transition:border-color .15s, background .15s; }
.visual-image-preview.is-clickable:hover{ border-color:var(--accent); background:var(--accent-soft); }
.visual-image-preview.is-clickable:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:1000px){
  body[data-page="editor"] .main{ height:auto; overflow:visible; }
  .ed-layout{ grid-template-columns:1fr; }
  .ed-preview{ height:72vh; }
}
/* editor: the 5 Cinema templates */
.ed-tpl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.ed-tpl{ display:flex; align-items:center; gap:.5rem; text-align:left; border:1.5px solid var(--border); background:#fff; border-radius:12px; padding:.45rem .55rem; cursor:pointer; font:inherit; font-size:.74rem; font-weight:600; color:var(--ink); transition:border-color .15s, background .15s; }
.ed-tpl:hover{ border-color:rgba(22,21,19,.3); }
.ed-tpl.is-on{ border-color:var(--accent); background:var(--accent-soft); }
.ed-tpl.is-auto{ border-style:dashed; border-color:var(--accent); }
.ed-tpl-sw{ flex:none; width:26px; height:26px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.ed-tpl-name{ line-height:1.25; }
.ed-tpl-auto{ grid-column:1/-1; justify-content:center; }
/* editor: photo framing */
.visual-image-preview.is-framing{ height:220px; cursor:grab; touch-action:none; position:relative; }
.visual-image-preview.is-framing.is-dragging{ cursor:grabbing; }
.visual-image-preview.is-framing img{ pointer-events:none; user-select:none; -webkit-user-drag:none; }
.ed-frame-ctl{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.55rem; }
.ed-frame-ctl .visual-save-note{ flex-basis:100%; }
.ed-zoom{ display:flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:600; color:var(--ink-soft); }
.ed-zoom input[type=range]{ width:130px; accent-color:var(--accent); }
/* editor: Content panel */
.ed-sec-head{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:1.3rem 0 .6rem; padding-top:1rem; border-top:1px solid var(--border); }
.ed-sec-head:first-child{ margin-top:0; padding-top:0; border-top:none; }
.ed-field{ display:block; margin-bottom:.7rem; }
.ed-field > span{ display:block; font-size:.76rem; font-weight:650; margin-bottom:.3rem; }
.ed-field input, .ed-field textarea, .ed-list-row input{ width:100%; }
.ed-field textarea{ min-height:4.5rem; resize:vertical; }
.ed-item{ border:1.5px solid var(--border); border-radius:14px; padding:.7rem .75rem .2rem; margin-bottom:.6rem; background:#fff; }
.ed-item.is-focus, .ed-list-row.is-focus input{ border-color:var(--accent); }
.ed-item-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; }
.ed-item-n{ font-size:.72rem; font-weight:700; color:var(--ink-faint); }
.ed-item-tools{ margin-left:auto; display:flex; gap:.25rem; }
.ed-mini{ border:1px solid var(--border); background:#fff; border-radius:8px; min-width:28px; height:28px; padding:0 .45rem; cursor:pointer; font:inherit; font-size:.8rem; }
.ed-mini:hover{ border-color:var(--accent); color:var(--accent); }
.ed-icon-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 .5rem; border-radius:11px; border:1.5px dashed var(--border); background:var(--accent-soft); color:var(--accent); cursor:pointer; }
.ed-icon-btn svg{ width:20px; height:20px; }
.ed-icon-auto{ font-size:.7rem; font-weight:650; }
.ed-icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:.35rem; margin:0 0 .7rem; }
.ed-icon-grid.hidden{ display:none; }
.ed-icon-opt{ height:38px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ed-icon-opt svg{ width:19px; height:19px; }
.ed-icon-opt.is-on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.ed-icon-opt-auto{ grid-column:span 3; font:inherit; font-size:.72rem; font-weight:650; }
.ed-add{ width:100%; border:1.5px dashed var(--border); background:transparent; border-radius:12px; padding:.6rem; cursor:pointer; font:inherit; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:.4rem; }
.ed-add:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.ed-add:disabled{ opacity:.45; cursor:default; }
.ed-list-row{ display:flex; gap:.4rem; margin-bottom:.45rem; }
/* editor: gallery */
.ed-gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-top:.5rem; }
.ed-gal-cell{ position:relative; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--bg); border:1px solid var(--border); }
.ed-gal-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-gal-bar{ position:absolute; left:4px; right:4px; bottom:4px; display:flex; gap:3px; justify-content:center; }
.ed-gal-bar button{ border:none; border-radius:7px; background:rgba(255,255,255,.92); width:26px; height:24px; cursor:pointer; font-size:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.ed-gal-add{ aspect-ratio:4/5; border:1.5px dashed var(--border); border-radius:10px; background:transparent; cursor:pointer; font:inherit; font-size:.74rem; font-weight:650; color:var(--ink-soft); padding:.4rem; }
.ed-gal-add:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* editor v3: [Editar con Bob | Editar manual] + one panel */
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#resetSiteBtn{ display:none !important; }
.ed-head{ align-items:center; }
.ed-mode{ display:inline-flex; gap:3px; padding:4px; border-radius:999px; background:#efede8; }
.ed-mode-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.05rem; border-radius:999px; font-size:.86rem; font-weight:600; color:#6f6b63; text-decoration:none; transition:background .2s, color .2s; }
.ed-mode-btn svg{ width:16px; height:16px; }
.ed-mode-btn .bob-orb{ --orb:16px; }
a.ed-mode-btn:hover{ color:var(--ink); background:rgba(255,255,255,.6); }
.ed-mode-btn.is-on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(22,21,19,.1), 0 2px 8px -2px rgba(22,21,19,.14); }
.ed-hint{ display:inline-flex; align-items:center; gap:.6rem; font-size:.8rem; font-weight:500; color:var(--ink-soft); }
.ed-hint-ico{ width:30px; height:30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--accent-soft), #fff); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(11,124,110,.18), 0 4px 10px -6px rgba(11,124,110,.5); }
.ed-hint-ico svg{ width:16px; height:16px; }
.ed-panel .edit-panel-close{ display:none; }
.ed-panel .edit-panel-head span{ font-size:.86rem; letter-spacing:.02em; text-transform:none; color:var(--ink); font-weight:700; }
.ed-danger{ margin-top:1.6rem; padding:1rem; border-radius:14px; background:#fbf3f2; border:1px solid #f1d6d3; }
.ed-danger .ed-sec-head{ margin:0 0 .4rem; padding:0; border:none; color:#9a3a32; }
.ed-danger p{ font-size:.8rem; color:#7a5550; margin:0 0 .8rem; line-height:1.5; }
.ed-danger-btn{ border:1px solid #e3b5b0; background:#fff; color:#b3261e; border-radius:999px; padding:.5rem 1rem; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.ed-danger-btn:hover{ background:#b3261e; color:#fff; border-color:#b3261e; }
/* Mis sitios → Editar: two ways to edit */
.ds-choice h3{ margin-bottom:1rem; }
.ds-choice-opt{ display:flex; align-items:center; gap:.9rem; padding:.95rem 1rem; margin-bottom:.6rem; border-radius:14px; border:1.5px solid rgba(22,21,19,.1); text-decoration:none; color:var(--ink); transition:border-color .15s, background .15s, transform .15s; }
.ds-choice-opt:hover{ border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }
.ds-choice-opt strong{ display:block; font-size:.95rem; }
.ds-choice-opt small{ display:block; font-size:.8rem; color:#77736b; margin-top:.15rem; line-height:1.4; }
.ds-choice-ico{ flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); }
.ds-choice-ico svg{ width:20px; height:20px; }
.ds-choice-bob .bob-orb{ --orb:22px; }

/* editor: publish changes (live sites) */
.ed-publish{ display:flex; align-items:center; gap:.7rem; margin-left:auto; }
.ed-pub-state{ font-size:.78rem; font-weight:600; color:#77736b; display:inline-flex; align-items:center; gap:.4rem; }
.ed-pub-state::before{ content:""; width:7px; height:7px; border-radius:50%; background:#1fa38f; }
.ed-pub-state.is-dirty{ color:#9a6a00; }
.ed-pub-state.is-dirty::before{ background:#e0a100; }
.ed-pub-view{ font-size:.8rem; font-weight:600; color:var(--accent); text-decoration:none; }
.ed-pub-view:hover{ text-decoration:underline; }
.ed-pub-btn{ border:none; border-radius:999px; padding:.6rem 1.1rem; background:var(--ink); color:#fff; font:inherit; font-size:.84rem; font-weight:650; cursor:pointer; }
.ed-pub-btn:disabled{ background:#e7e4de; color:#8a877f; cursor:default; }

/* ---- phones: bottom tab bar [Mis sitios] [Bob] [Ajustes] ----
   The top bar keeps only the wordmark, language and account menu. */
.tabbar{ display:none; }
.user-menu .menu-settings{ display:none; }
@media (max-width:760px){
  :root{ --tabbar-h:calc(64px + env(safe-area-inset-bottom, 0px)); }
  .sidebar-nav{ display:none; }
  .user-menu .menu-settings{ display:flex; }
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
    height:var(--tabbar-h); padding:0 1.4rem env(safe-area-inset-bottom, 0px);
    background:rgba(250,249,246,.94); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid rgba(22,21,19,.07);
  }
  .tab-item{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.28rem; height:64px; padding-bottom:.6rem;
    background:none; border:none; font:inherit; font-size:.68rem; font-weight:600; letter-spacing:.01em; color:#8a877f; cursor:pointer;
    -webkit-tap-highlight-color:transparent; text-decoration:none;
  }
  .tab-item svg{ width:22px; height:22px; }
  .tab-item.active{ color:var(--ink); }
  .tab-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; }
  .tab-item:first-child{ justify-self:start; min-width:64px; }
  .tab-item:last-child{ justify-self:end; min-width:64px; }
  .tab-bob{ padding-bottom:.6rem; }
  .tab-bob-btn{
    width:58px; height:58px; margin-top:-26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#fff; box-shadow:0 0 0 1px rgba(22,21,19,.07), 0 10px 26px -10px rgba(22,21,19,.45), 0 2px 6px rgba(22,21,19,.08);
    transition:transform .18s cubic-bezier(.16,1,.3,1);
  }
  .tab-bob-btn .bob-orb{ --orb:28px; }
  .tab-bob:active .tab-bob-btn{ transform:scale(.94); }
  .tab-bob.active .tab-bob-btn{ box-shadow:0 0 0 2px var(--accent), 0 10px 26px -10px rgba(22,21,19,.45); }
  .tab-avatar{
    width:24px; height:24px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
    font-size:.62rem; font-weight:700; color:#fff; background:linear-gradient(140deg,#2a2926,#55524b);
  }
  .tab-avatar img{ width:100%; height:100%; object-fit:cover; }
  .tab-item.active .tab-avatar{ box-shadow:0 0 0 2px var(--bg, #fff), 0 0 0 3.5px var(--ink); }

  /* room for the bar */
  body.has-tabbar .main{ padding-bottom:calc(var(--tabbar-h) + 1.6rem); }
  body.has-tabbar[data-page="core"] .main{ padding-bottom:0; height:calc(100dvh - 53px - var(--tabbar-h)); }
  body.has-tabbar[data-page="core"] .core-shell{ height:calc(100dvh - 53px - var(--tabbar-h)); }
  body.has-tabbar .conv-composer{ padding-bottom:1.25rem; }
  body.has-tabbar .toast{ bottom:calc(var(--tabbar-h) + 1rem); }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){ .tab-bob-btn{ transition:none; } }

/* Mis sitios: monthly maintenance renewal */
.ws-renew{ margin-top:.45rem; font-size:.78rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ws-renew.overdue{ color:#b4561d; font-weight:600; }

/* Bob asks for photos in the conversation: photo · logo · carousel */
.up-card .text{ margin-bottom:.85rem; }
.up-slots{ display:flex; gap:.9rem; margin-bottom:.9rem; }
.up-slot{ display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.up-btn, .up-gal-add{
  width:76px; height:76px; border-radius:16px; border:1.5px dashed rgba(22,21,19,.22); background:#faf9f6;
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; padding:0;
  transition:border-color .15s, background .15s;
}
.up-btn:hover, .up-gal-add:hover{ border-color:var(--accent); background:#f1f8f6; }
.up-btn.has{ border-style:solid; border-color:rgba(22,21,19,.08); }
.up-btn img{ width:100%; height:100%; object-fit:cover; }
.up-btn.busy, .up-gal-add.busy{ opacity:.5; cursor:progress; }
.up-btn:focus-visible, .up-gal-add:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.up-plus{ font-size:1.5rem; font-weight:300; color:#8a877f; line-height:1; }
/* line icons (core.html IC): in Bob's text, the voice chip and the photo slots */
.bi-wrap{ display:inline-flex; vertical-align:-.16em; margin:0 .08em; color:var(--accent); }
.bi{ width:1.05em; height:1.05em; }
.bi-chip{ width:1.05rem; height:1.05rem; flex-shrink:0; }
.up-btn, .up-gal-add{ position:relative; }
.up-ico{ width:26px; height:26px; color:#8a877f; transition:color .2s; }
.up-btn:hover .up-ico, .up-gal-add:hover .up-ico{ color:var(--accent); }
.up-add{ position:absolute; right:7px; bottom:6px; width:16px; height:16px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px #fff; }
.up-label{ font-size:.74rem; font-weight:600; color:var(--ink-soft); }
.up-gal-head{ font-size:.78rem; font-weight:650; color:var(--ink); margin-bottom:.45rem; font-variant-numeric:tabular-nums; }
.up-gal-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.up-gal-row img{ width:58px; height:58px; border-radius:12px; object-fit:cover; }
.up-gal-row .up-gal-add{ width:58px; height:58px; border-radius:12px; }
.up-foot{ margin-top:.9rem; font-size:.76rem; color:#9a968d; display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.up-skip{ font:inherit; font-size:.8rem; font-weight:600; color:var(--ink-soft); background:transparent; border:1px solid var(--line, #e4e1da); border-radius:999px; padding:.45rem .9rem; cursor:pointer; }
.up-skip:hover{ color:var(--ink); border-color:var(--ink-soft); }
/* under Bob's greeting: tell it by voice */
.voice-offer{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; font:inherit; font-size:.86rem; font-weight:600; color:var(--accent); background:var(--accent-soft); border:0; border-radius:999px; padding:.6rem 1rem; cursor:pointer; transition:transform .15s ease, background .2s; }
.voice-offer:hover{ transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){ .voice-offer{ transition:none; } .voice-offer:hover{ transform:none; } }

/* photos attached in the conversation */
.composer-bar .attach-btn{ margin-right:-.2rem; }
.att-user{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end; }
.att-user img{ width:64px; height:64px; border-radius:12px; object-fit:cover; }
.att-place{ margin-top:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.att-hint{ font-size:.76rem; color:#9a968d; }
.att-row{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.att-row img{ width:44px; height:44px; border-radius:10px; object-fit:cover; margin-right:.2rem; }
.att-chip{
  font:inherit; font-size:.74rem; font-weight:600; color:#6b6862; background:#fff; cursor:pointer;
  border:1px solid rgba(22,21,19,.12); border-radius:999px; padding:.3rem .7rem; transition:border-color .15s, color .15s, background .15s;
}
.att-chip:hover{ border-color:var(--accent); color:var(--ink); }
.att-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.att-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Bob asks for contact: WhatsApp · Instagram · email */
.ct-card .text{ margin-bottom:.8rem; }
.ct-fields{ display:grid; gap:.55rem; max-width:420px; }
.ct-field{ display:grid; gap:.25rem; }
.ct-field span{ font-size:.74rem; font-weight:650; color:var(--ink-soft); }
.ct-field input{ width:100%; }
.ct-hint{ font-size:.74rem; color:#9a968d; }
.ct-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; }

.nav-ext{ border:none; padding:0; font-size:.8rem; }
/* editor: Sections (app/modules.js) */
.ed-mod-row{ display:flex; align-items:center; gap:.5rem; padding:.5rem .1rem; border-bottom:1px solid var(--border); min-height:44px; }
.ed-mod-row:last-of-type{ border-bottom:none; }
.ed-mod-name{ font-size:.86rem; font-weight:600; }
.ed-mod-row.is-off .ed-mod-name{ opacity:.45; text-decoration:line-through; }
.ed-mod-tag{ font-size:.68rem; font-weight:600; color:var(--ink-faint); background:var(--accent-soft); border-radius:999px; padding:.15rem .5rem; white-space:nowrap; }
.ed-mod-row .ed-item-tools .ed-mini{ height:32px; }
/* editor: module forms + gallery captions + office photo (new layouts) */
.ed-mod-form{ margin-bottom:.4rem; }
.ed-gal-cap{ width:100%; font:inherit; font-size:.76rem; padding:.3rem .45rem; border:1px solid var(--border); border-radius:8px; margin-top:.3rem; background:#fff; }
.ed-office{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.9rem; }
.ed-office .ed-sec-sub{ flex-basis:100%; font-size:.76rem; font-weight:650; }
.ed-office-img{ width:84px; height:84px; object-fit:cover; border-radius:10px; }
.ed-gal-cell.has-cap{ aspect-ratio:auto; overflow:visible; border:none; background:transparent; }
.ed-gal-cell.has-cap img{ aspect-ratio:4/3; height:auto; border-radius:10px; }
.mod-ask-form{ max-width:460px; }
button.ed-mod-name{ border:none; background:none; padding:0; font:inherit; font-size:.86rem; font-weight:600; color:inherit; cursor:pointer; text-align:left; }
button.ed-mod-name:hover{ color:var(--accent); }
/* Bob: quick-reply chips (trato, typos) */
.chip-card .chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; }
.chip{ font:inherit; font-size:.86rem; font-weight:600; padding:.55rem 1rem; min-height:40px; border-radius:999px; border:1.5px solid var(--border); background:#fff; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s, opacity .2s; }
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip.pri:hover{ color:#fff; filter:brightness(1.05); }
.chips.done .chip{ cursor:default; opacity:.45; }
.chips.done .chip.picked{ opacity:1; }
.chip-card > .text + .text{ margin-top:.6rem; }
@media (prefers-reduced-motion: reduce){ .chip{ transition:none; } }
.ed-select{ width:100%; font:inherit; font-size:.95rem; padding:.7rem .9rem; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); }
.typo-note{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.4rem; font-size:.8rem; color:var(--ink-soft); }
.typo-note .typo-yes{ border-color:var(--accent); color:var(--accent); }

/* ==== Shell motion (panel del médico, demo 7 oct 2026) ====
   Sidebar: a white pill sits behind the active section and slides to the
   next one (spring). Page changes: the old page blurs out, the new one
   rises (cross-document view transitions; plain fade where unsupported).
   Phones: bottom bar [Mis sitios] (Bob) [Panel]. Reduced motion: fades only. */
:root{ --ds-ease:cubic-bezier(.2,.8,.2,1); --ds-spring:cubic-bezier(.3,1.35,.5,1); }
.sidebar-nav{ position:relative; isolation:isolate; }
.nav-pill{
  position:absolute; top:0; left:0; right:0; height:0; border-radius:10px; background:#fff; z-index:-1; pointer-events:none; opacity:0;
  box-shadow:0 1px 2px rgba(22,21,19,.06), 0 0 0 1px rgba(22,21,19,.04), 0 6px 16px -10px rgba(22,21,19,.15);
  transition:transform .5s var(--ds-spring), height .3s, opacity .3s;
}
.nav-pill.on{ opacity:1; }
.sidebar-nav a.active{ background:none; box-shadow:none; }
.sidebar-nav a{ transition:color .25s; }
.sidebar-nav a svg{ transition:color .25s; }

@view-transition{ navigation:auto; }
html.vt body{ animation:none; }
/* names are set by shell.js only while a page change runs (pageswap /
   pagereveal), so they never trap overlays in a stacking context */
::view-transition-old(root), ::view-transition-new(root){ animation:none; }
::view-transition-old(*.ds-static){ display:none; }
::view-transition-new(*.ds-static){ animation:none; }
::view-transition-group(*.ds-static){ animation:none; }
::view-transition-group(ds-main){ animation:none; }
::view-transition-old(ds-main){ animation:dsVout .28s ease both; }
::view-transition-new(ds-main){ animation:dsVin .6s var(--ds-ease) .12s both; }
::view-transition-group(ds-navpill){ animation-duration:.5s; animation-timing-function:var(--ds-spring); }
@keyframes dsVin{ from{ opacity:0; transform:translateY(14px) scale(.99); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes dsVout{ to{ opacity:0; transform:scale(.985); filter:blur(4px); } }
@media (prefers-reduced-motion: reduce){
  .nav-pill{ transition:opacity .12s; }
  ::view-transition-group(*){ animation-duration:.01ms !important; }
  ::view-transition-old(ds-main){ animation:dsFadeOut .12s both; }
  ::view-transition-new(ds-main){ animation:pageFade .12s both; }
}
html.reduce-motion .nav-pill{ transition:opacity .12s; }
html.reduce-motion::view-transition-group(*){ animation-duration:.01ms !important; }
html.reduce-motion::view-transition-old(ds-main){ animation:dsFadeOut .12s both; }
html.reduce-motion::view-transition-new(ds-main){ animation:pageFade .12s both; }
@keyframes dsFadeOut{ to{ opacity:0; } }

/* phones: three buttons; the active one in the accent with a short line
   under it; Bob raised in a white circle with a green ring */
@media (max-width:760px){
  .tabbar{ padding:0 1.6rem env(safe-area-inset-bottom, 0px); }
  .tab-item{ position:relative; min-width:72px; }
  .tab-item.active{ color:var(--accent); }
  .tab-item::after{
    content:""; position:absolute; left:50%; bottom:.3rem; width:16px; height:2.5px; margin-left:-8px; border-radius:2px;
    background:var(--accent); transform:scaleX(0); opacity:0; transition:transform .35s var(--ds-spring), opacity .2s;
  }
  .tab-item.active::after{ transform:none; opacity:1; }
  .tab-bob{ min-width:0; }
  .tab-bob-btn{
    width:60px; height:60px; margin-top:-28px;
    box-shadow:0 0 0 2px var(--accent), 0 10px 26px -10px rgba(22,21,19,.45), 0 2px 6px rgba(22,21,19,.08);
    transition:transform .35s var(--ds-spring), box-shadow .35s var(--ds-ease);
  }
  .tab-bob.active .tab-bob-btn{ box-shadow:0 0 0 2px var(--accent), 0 10px 26px -10px rgba(22,21,19,.45), 0 2px 6px rgba(22,21,19,.08); }
  .tab-bob.lift .tab-bob-btn, .tab-bob:active .tab-bob-btn{
    transform:translateY(-5px) scale(1.04);
    box-shadow:0 0 0 2px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 14%, transparent), 0 16px 30px -12px rgba(22,21,19,.45);
  }
  .tab-item svg{ transition:color .25s; }
  .bob-resume{
    position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + 46px); z-index:45;
    background:#fff; border-radius:18px; padding:1rem 1.1rem;
    box-shadow:0 0 0 1px rgba(22,21,19,.06), 0 24px 48px -20px rgba(22,21,19,.35);
    animation:dsVin .4s var(--ds-ease) both;
  }
  .bob-resume.out{ animation:dsFadeOut .2s both; }
  .bob-resume p{ margin:0 0 .8rem; font-size:.92rem; font-weight:560; color:var(--ink); }
  .bob-resume-acts{ display:flex; gap:.5rem; justify-content:flex-end; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .tab-bob-btn, .tab-item::after{ transition:none; }
  .tab-bob.lift .tab-bob-btn, .tab-bob:active .tab-bob-btn{ transform:none; }
  .bob-resume{ animation:pageFade .12s both; }
}
html.reduce-motion .tab-bob.lift .tab-bob-btn{ transform:none; }