/* ============================================================
   Headspace · Ebb AI-native prototype
   Builds on Headspace Design System tokens (colors_and_type.css)
   ============================================================ */

html, body { margin: 0; padding: 0; height: 100%; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  background: #100f0f;
  font-family: var(--hs-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#root { width: 100vw; height: 100vh; }

.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% -10%, #2b2730 0%, #131113 60%, #0c0b0c 100%);
}

/* ---------- Phone shell (393 × 852) ---------- */
.phone {
  position: relative;
  width: 393px; height: 852px;
  background: #F9F4F2;
  border-radius: 56px;
  overflow: hidden;
  box-shadow: 0 0 0 11px #19181a, 0 0 0 13px #2c2a2d;
  transform-origin: center center;
}

/* dynamic island */
.island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 33px; background: #0a0909; border-radius: 20px; z-index: 60;
}

/* status bar */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 55;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 30px 7px; pointer-events: none;
  font: 600 16px/1 -apple-system, "SF Pro Text", system-ui;
  color: var(--hs-warm-grey-800);
}
.statusbar.light { color: #fff; }
.statusbar .sb-icons { display: flex; gap: 7px; align-items: center; }
.statusbar svg { display: block; }

.home-bar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 999px; background: var(--hs-warm-grey-800);
  opacity: .85; z-index: 58;
}
.home-bar.light { background: #fff; opacity: .6; }

/* icon helper */
.ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; display: block; }
/* Icon container with built-in inset \u2014 24px box, 22px visible glyph, centered */
.ic-inset svg { width: 20px; height: 20px; }

/* ============================================================
   Clouds background (warm daytime)
   ============================================================ */
.clouds {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    linear-gradient(180deg,
      #FFCE99 0%,
      #FFDCAD 11%,
      #FCE8C7 23%,
      #FAEFDB 35%,
      #F9F4F2 50%,
      #F9F4F2 100%);
}
.clouds::before {  /* soft golden sun glow */
  content: ""; position: absolute; top: -90px; right: -50px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,168,56,.55), rgba(255,168,56,0) 70%);
}
.clouds::after {  /* warm glow behind the dock */
  content: ""; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,72,.30), rgba(255,176,72,0) 70%);
}
.cloud {
  position: absolute; background: #fff; border-radius: 50%;
  filter: blur(14px); opacity: .55;
}

/* --- Afternoon sky: brighter, cooler blue with a faint pink low --- */
.phone.afternoon .clouds {
  background: linear-gradient(180deg,
    #7FC0FF 0%,
    #A6D4FF 14%,
    #D2E7FB 28%,
    #ECF1F1 40%,
    #F9F4F2 52%,
    #F9F4F2 100%);
}
.phone.afternoon .clouds::before { background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%); }
.phone.afternoon .clouds::after { background: radial-gradient(circle, rgba(255,150,195,.22), rgba(255,150,195,0) 70%); }
.phone.afternoon .cloud { opacity: .7; }
.phone.afternoon .top-fade {
  background: linear-gradient(180deg, #7FC0FF 0%, rgba(166,212,255,.82) 52%, rgba(166,212,255,0) 100%);
}

/* ============================================================
   App scroll surface
   ============================================================ */
.screen { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; }
.scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; z-index: 2;
}
.scroll::-webkit-scrollbar { display: none; }

/* ---------- Top chrome buttons ---------- */
.chrome {
  position: absolute; top: 60px; left: 0; right: 0; z-index: 70;
  display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
  pointer-events: none;
}
.chrome-right { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
/* Icon Button — Style=Secondary, Size=M-Large (48), Icon only=True (Headspace DS) */
.chrome-btn {
  pointer-events: auto;
  width: 48px; height: 48px; border-radius: 999px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.8);
  color: #63605D;
  transition: transform .15s var(--hs-ease-standard);
}
.chrome-btn:active { transform: translateY(1px); }
.chrome-btn.ai { background: rgba(255,255,255,.8); color: #63605D; }

/* streak pill */

/* ============================================================
   Home greeting + content
   ============================================================ */
.home-pad { padding: 116px 24px 150px; }

.greeting {
  margin-bottom: 30px;
  position: relative;
}
.greeting-h1 {
  font: 500 30px/1.12 var(--hs-font-sans); letter-spacing: -.03em;
  color: var(--hs-warm-grey-800); margin: 0;
}
.greeting-h1 .g-light { font-weight: 500; }
.tod-word { font-weight: 700; }
.tod-toggle {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  border: none; background: none; cursor: pointer; padding: 0; margin: -6px 0 0 8px;
  color: var(--hs-warm-grey-700);
}
.tod-caret { display: inline-flex; }

/* time-of-day dropdown */
.tod-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; }
.tod-menu {
  position: absolute; top: 42px; left: 2px; z-index: 61;
  min-width: 208px; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20,19,19,.05);
  padding: 6px;
  animation: todIn .18s var(--hs-ease-standard) both;
}
@keyframes todIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tod-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; border: none; background: none; cursor: pointer; text-align: left;
  padding: 13px 14px; border-radius: 12px;
  font: 500 19px/1 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800);
  transition: background .15s;
}
.tod-item:hover { background: rgba(20,19,19,.05); }
.tod-item.active { font-weight: 700; }
.tod-check { display: inline-flex; color: var(--hs-green-200, #02873E); flex-shrink: 0; }
.greeting-sub {
  font: 400 17px/1.4 var(--hs-font-sans); letter-spacing: -.01em;
  color: var(--hs-warm-grey-700); margin: 14px 0 0; text-wrap: pretty;
}
.greeting-meta {
  font: 400 12px/1.5 var(--hs-font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--hs-warm-grey-500); margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* Apple Health attribution badge */
.hs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(8px) saturate(160%); -webkit-backdrop-filter: blur(8px) saturate(160%);
  color: var(--hs-warm-grey-700);
  font: 700 13px/1 var(--hs-font-sans); letter-spacing: -.02em; text-transform: none;
  border-radius: 999px; white-space: nowrap;
}
.hs-badge-ic { display: inline-flex; align-items: center; color: var(--hs-warm-grey-800); }

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 14px;
}
.sec-head h2 {
  font: 700 20px/1.2 var(--hs-font-sans); letter-spacing: -.03em;
  color: var(--hs-warm-grey-800); margin: 0; max-width: 250px;
}
.rate { display: flex; gap: 2px; }
.rate button {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--hs-warm-grey-600); border-radius: 999px;
  transition: background .15s, color .15s, transform .15s;
}
.rate button:hover { background: rgba(20,19,19,.05); }
.rate button.on { color: var(--hs-blue-200); }
.rate button:active { transform: scale(.9); }

/* Featured "last check-in" card — yellow Playlist Card */
.feature {
  position: relative; width: 100%; height: 150px; border-radius: 16px;
  overflow: hidden; cursor: pointer; margin-bottom: 0;
  background: var(--hs-yellow-200);
  transition: transform .15s var(--hs-ease-standard);
}
.feature:active { transform: translateY(1px); }
.feature-img {
  position: absolute; top: 0; right: 0; height: 100%; width: 66%;
  object-fit: cover; object-position: 58% center; z-index: 0;
}
.feature-fade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #FFCE00 30%, rgba(255,206,0,.86) 46%, rgba(255,206,0,0) 72%); }
.feature-over {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--hs-warm-grey-700);
}
.feature-content {
  position: absolute; inset: 0; z-index: 2; padding: 18px;
  display: flex; flex-direction: column; gap: 9px; justify-content: center; align-items: flex-start;
}
.feature-content h3 { font: 700 19px/1.18 var(--hs-font-sans); letter-spacing: -.03em; color: var(--hs-warm-grey-700); margin: 0; max-width: 175px; }
.avatar-counter { display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px 4px 8px; border-radius: 999px; }
.avatar-counter .avs { display: flex; }
.avatar-counter .avs i { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--hs-yellow-200); margin-left: -6px; display: block; }
.avatar-counter .avs i:first-child { margin-left: 0; }
.avatar-counter .avs i:nth-child(1) { background: linear-gradient(135deg,#FF9A6B,#F26BA4); }
.avatar-counter .avs i:nth-child(2) { background: linear-gradient(135deg,#7CA9F0,#5F2B89); }
.avatar-counter .avs i:nth-child(3) { background: linear-gradient(135deg,#5FC489,#2C9668); }
.avatar-counter .cnt { font: 700 13px/1 var(--hs-font-sans); color: var(--hs-warm-grey-700); }
.feature .meta { display: flex; flex-direction: column; gap: 3px; }
.feature .meta span { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.4 var(--hs-font-sans); color: var(--hs-warm-grey-700); }
.feature .meta .ic { color: var(--hs-warm-grey-700); }

/* ---------- Your daily essentials — timeline ---------- */
.essentials { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.ess-item { display: flex; align-items: stretch; gap: 12px; }
.ess-marker { position: relative; flex: 0 0 18px; }
/* dashed connector — top half and bottom half of each marker cell */
.ess-marker::before, .ess-marker::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 2px dashed rgba(20,19,19,.20);
}
.ess-marker::before { top: 0; height: 50%; }
.ess-marker::after { top: 50%; bottom: 0; }
.ess-item:first-child .ess-marker::before { display: none; }
.ess-item.last .ess-marker::after { display: none; }
.ess-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 999px; z-index: 1;
  background: #fff; box-shadow: inset 0 0 0 2px rgba(20,19,19,.22);
}
.ess-dot.active { width: 17px; height: 17px; background: var(--hs-orange-200, #FF7300); box-shadow: 0 0 0 4px rgba(255,115,0,.14); }
.ess-item .feature { flex: 1; }

.ess-bar {
  flex: 1; display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer;
  min-height: 52px; padding: 12px 18px; border-radius: 16px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(20,19,19,.06);
  transition: transform .15s var(--hs-ease-standard), background .15s;
}
.ess-bar:active { transform: translateY(1px); background: rgba(255,255,255,.72); }
.ess-bar-t { font: 500 15px/1.25 var(--hs-font-sans); letter-spacing: -.01em; color: var(--hs-warm-grey-800); }
.ess-bar-sep, .ess-bar-m { font: 400 15px/1.25 var(--hs-font-sans); color: var(--hs-warm-grey-500); }

/* ---------- Card Stack — vertical overlapping carousel ---------- */
.cstack { position: relative; margin-top: -6px; margin-bottom: 34px; }
/* top-anchored viewport — height is set inline; the top card is always at y=0
   and the active card expands in place, so the module stays anchored up top */
.cstack-vp { position: relative; box-sizing: border-box; }
/* rail — position indicator on the right, centred on the module */
.cstack-rail {
  position: absolute; top: 50%; transform: translateY(-50%); right: -14px; z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.rail-dot { width: 5px; height: 5px; border-radius: 999px; background: rgba(20,19,19,.20); transition: all .3s var(--hs-ease-standard); }
.rail-dot.on { height: 22px; background: rgba(20,19,19,.42); }

/* Each card is a single element that eases between "peek" and "active"
   states — geometry (top/height/inset/radius) and the layered content
   crossfade all transition, so tapping morphs rather than swapping.
   Position/size come from inline styles (top-anchored accordion layout). */
.stack-card {
  position: absolute; overflow: hidden; border: none; cursor: pointer; text-align: left;
  color: #fff; background-size: cover; background-position: center; touch-action: none;
  transition: top .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1),
              left .42s cubic-bezier(.4,0,.2,1), right .42s cubic-bezier(.4,0,.2,1),
              border-radius .42s cubic-bezier(.4,0,.2,1), box-shadow .42s cubic-bezier(.4,0,.2,1);
}
.stack-card.is-active { cursor: grab; border-radius: 24px; box-shadow: 0 4px 0 rgba(20,19,19,.06), 0 14px 26px rgba(20,19,19,.14); }
.stack-card.is-active.dragging { cursor: grabbing; transition: none; }
/* collapsed cards round only their visible edge — the tucked edge is square so
   nothing rounded peeks out from under the card in front (physical-stack look) */
.stack-card.is-collapsed { box-shadow: 0 3px 0 rgba(20,19,19,.06); }
.stack-card.is-collapsed.is-below { border-radius: 0 0 20px 20px; }
.stack-card.is-collapsed.is-above { border-radius: 20px 20px 0 0; }

/* --- layered content, crossfaded between states --- */
.sc-grey { position: absolute; inset: 0; z-index: 1; background: #ECE6E0; opacity: 0; transition: opacity .38s cubic-bezier(.4,0,.2,1); }
.stack-card.is-collapsed .sc-grey { opacity: 1; }
.sc-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 1;
  background: linear-gradient(0deg, rgba(20,19,19,.72) 0%, rgba(20,19,19,.34) 34%, rgba(20,19,19,0) 62%);
  transition: opacity .38s cubic-bezier(.4,0,.2,1);
}
.stack-card.is-collapsed .sc-scrim { opacity: 0; }
.sc-dot {
  position: absolute; top: 18px; left: 18px; z-index: 4;
  width: 14px; height: 14px; border-radius: 999px; background: var(--hs-orange-200, #FF7300);
  box-shadow: 0 0 0 4px rgba(255,255,255,.16); opacity: 1; transition: opacity .3s;
}
.stack-card.is-collapsed .sc-dot { opacity: 0; }
.sc-full {
  position: absolute; inset: 0; z-index: 3; padding: 20px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  opacity: 1; transition: opacity .34s cubic-bezier(.4,0,.2,1);
}
.stack-card.is-collapsed .sc-full { opacity: 0; }
.stack-pill {
  display: inline-flex; margin-bottom: 10px; padding: 6px 10px; border-radius: 8px;
  background: rgba(20,19,19,.34); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; white-space: nowrap;
}
.stack-title { color: #fff; }
.stack-desc { margin-top: 6px; max-width: 300px; color: rgba(255,255,255,.94); text-wrap: pretty; }
.stack-meta { display: flex; align-items: center; gap: 7px; margin-top: 13px; white-space: nowrap; }
.stack-meta .hs-label-sm { color: #fff; font-weight: 500; }
.stack-meta .ic { opacity: .96; }
/* peek content — dot + title, sitting in each card's visible band */
.sc-peek {
  position: absolute; left: 0; right: 0; height: 44px; z-index: 3; padding: 0 18px;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: opacity .34s cubic-bezier(.4,0,.2,1);
}
.stack-card.is-above .sc-peek { top: 0; }      /* visible band is at the top */
.stack-card.is-below .sc-peek { bottom: 0; top: auto; }  /* visible band is at the bottom */
.stack-card.is-collapsed .sc-peek { opacity: 1; }
.peek-dot { width: 13px; height: 13px; border-radius: 999px; flex: 0 0 auto; background: var(--hs-warm-grey-300, #D6CFC8); }
.peek-t { color: var(--hs-warm-grey-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sparkle accent beside the "Based on your needs" heading */
.needs-head { gap: 8px; justify-content: flex-start; }
.needs-spark { display: inline-flex; align-items: center; color: var(--hs-warm-grey-800); }
@media (prefers-reduced-motion: reduce) {
  .stack-card, .sc-grey, .sc-scrim, .sc-dot, .sc-full, .sc-peek { transition: none; }
}

/* ---------- Based on your needs — tonal horizontal cards ---------- */
.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.need-card {
  display: flex; align-items: center; gap: 0; cursor: pointer; overflow: hidden;
  height: 72px; border-radius: 12px; border: none;
  background: var(--hs-color-background-strong, #F9F4F2); padding: 0; text-align: left;
  transition: transform .15s var(--hs-ease-standard), background .15s;
}
.need-card:active { transform: translateY(1px); }
.need-art { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px 0 0 12px; overflow: hidden; }
.need-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.need-title {
  flex: 1; padding-left: 18px; padding-right: 12px; color: var(--hs-warm-grey-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 2-up content tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tile {
  background: rgba(255,255,255,.85); border-radius: 20px; overflow: hidden; cursor: pointer;
  transition: transform .15s var(--hs-ease-standard);
  display: flex; flex-direction: column;
}
.tile:active { transform: translateY(1px); }
.tile-art { position: relative; height: 116px; overflow: hidden; }
.tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--hs-warm-grey-800); color: #fff;
  font: 700 10px/1 var(--hs-font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
}
.tile-over {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; z-index: 2;
  border: none; background: rgba(255,255,255,.7); border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--hs-warm-grey-700);
  backdrop-filter: blur(6px);
}
.tile-body { padding: 12px 14px 16px; }
.tile-body .t-title { font: 700 15px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); margin: 0 0 6px; }
.tile-body .t-meta { font: 400 12px/1.3 var(--hs-font-sans); color: var(--hs-warm-grey-500); }

/* ============================================================
   Input dock (shared home + chat)
   ============================================================ */
.dock {
  position: absolute; left: 9px; right: 9px; bottom: 18px; z-index: 45;
  background: var(--hs-color-background);
  border-radius: 30px; padding: 14px 14px 12px; box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "field field field" "avatar sp actions";
  align-items: center; column-gap: 8px; row-gap: 10px;
  box-shadow: none;
}
.dock-avatar {
  grid-area: avatar;
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
  background: url("assets/ebb-avatar.png") center/cover no-repeat, conic-gradient(from 30deg,#FFB87C,#FF7A4E,#F26BA4,#FFB87C);
}
.dock-field {
  grid-area: field; align-self: stretch; min-width: 0; overflow: hidden;
  transition: opacity .18s ease .05s;
}
.dock-field textarea {
  width: 100%; height: 100%; border: none; outline: none; background: transparent; resize: none;
  font: 400 16px/1.35 var(--hs-font-sans); color: var(--hs-warm-grey-800);
  padding: 2px 4px;
}
.dock-field textarea::placeholder { color: var(--hs-warm-grey-400); }
.dock-actions {
  grid-area: actions; display: flex; align-items: center; gap: 10px;
  transition: opacity .18s ease .05s;
}
.dock-btn {
  width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--hs-warm-grey-700);
  transition: transform .15s, background .15s;
}
.dock-btn:active { transform: scale(.9); }
/* mic — soft grey circle */
.dock-btn.mic { background: rgba(20,19,19,.05); }
/* black voice button — the "stamp" CTA when the field is empty */
.dock-btn.voice {
  background: var(--hs-warm-grey-800); color: #fff;
}
.dock-btn.voice:active { transform: translateY(1px); }

/* it morphs to the blue Send button once there's text */
.dock-btn.send {
  background: var(--hs-blue-200); color: #fff;
}
.dock-btn.send:active { transform: translateY(1px); }
/* ---- Ebb FAB → input choreography ----
   Staged with per-phase transitions so the motion reads as three distinct beats:
   rest (invisible circle parked at the FAB) → lift (rises as a circle)
   → unfurl (slides left + widens into the pill) → up (rides above the keyboard). */
.dock {
  transition: bottom .32s cubic-bezier(0.32,0.72,0,1),
              width .3s cubic-bezier(0.32,0.72,0,1),
              left .3s cubic-bezier(0.32,0.72,0,1),
              height .3s cubic-bezier(0.32,0.72,0,1),
              border-radius .3s cubic-bezier(0.32,0.72,0,1),
              opacity .18s ease;
}
/* 0 — at rest the FAB stands in; the dock waits, invisible, at the FAB's spot */
.dock.dock--rest {
  left: calc(50% - 73px); right: auto; bottom: 58px;
  width: 60px; height: 60px; min-height: 0; border-radius: 999px;
  padding: 4px; overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
/* 1 — lift straight up to the resting height, still a circle (keyboard rises with it) */
.dock.dock--lift {
  left: calc(50% - 73px); right: auto; bottom: 288px;
  width: 60px; height: 60px; min-height: 0; border-radius: 999px;
  padding: 4px; overflow: hidden; opacity: 1;
  transition: bottom .26s cubic-bezier(0.22,0.66,0.28,1), opacity .12s ease;
}
/* 2 — unfurl in place: the pill widens into the input card */
.dock.dock--unfurl {
  left: 9px; right: auto; bottom: 288px;
  width: calc(100% - 18px); height: 124px; border-radius: 30px;
  padding: 14px 14px 12px; overflow: hidden; opacity: 1;
}
/* 3 — ride up above the rising keyboard and settle */
.dock.dock--up {
  left: 9px; right: auto; bottom: 288px;
  width: calc(100% - 18px); height: 124px; border-radius: 30px;
  padding: 14px 14px 12px; overflow: visible;
}
/* docked — after sending, the composer rests at the bottom with the keyboard down */
.dock.dock--docked {
  left: 9px; right: auto; bottom: 18px;
  width: calc(100% - 18px); height: 124px; border-radius: 30px;
  padding: 14px 14px 12px; overflow: visible; opacity: 1;
}
/* circle phases: hide the card content, let the avatar fill the disc */
.dock--rest .dock-field, .dock--lift .dock-field,
.dock--rest .dock-actions, .dock--lift .dock-actions { opacity: 0; pointer-events: none; }
.dock--rest .dock-avatar, .dock--lift .dock-avatar {
  position: absolute; inset: 4px; width: auto; height: auto; z-index: 2;
}

/* ============================================================
   Bottom navigation pill + floating Ebb button
   ============================================================ */
.nav {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 40;
  padding: 0 14px; pointer-events: none;
  display: flex; align-items: stretch; gap: 10px;
  transition: opacity .34s var(--hs-ease-standard), transform .34s var(--hs-ease-standard);
}
.nav.detaching { opacity: 0; transform: translateY(22px); pointer-events: none; }
@keyframes nav-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nav-main {
  pointer-events: auto;
  flex: 1 1 auto; min-width: 0;
  height: 60px; box-sizing: border-box;
  display: flex; align-items: stretch; gap: 4px;
  background: rgba(255,255,255,.38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 999px; padding: 6px;
  box-shadow: var(--hs-shadow-navigation-bottom, 0 0 8px rgba(20,19,19,.08));
  animation: nav-in .3s var(--hs-ease-standard) both;
}
/* center column holds only the "Ebb" label — the FAB rides elevated above it */
.nav-ebb-slot {
  flex: 1 1 0; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 9px;
  color: var(--hs-warm-grey-700); font: 500 12px/1 var(--hs-font-sans);
}
.nav-ebb-slot > span { letter-spacing: -.01em; }
/* Explore — split off into its own pill on the right */
.nav-explore {
  pointer-events: auto; cursor: pointer; border: none;
  flex: 0 0 auto; width: 76px; height: 60px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(255,255,255,.38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: var(--hs-shadow-navigation-bottom, 0 0 8px rgba(20,19,19,.08));
  color: var(--hs-warm-grey-700); font: 500 12px/1 var(--hs-font-sans);
  animation: nav-in .3s var(--hs-ease-standard) both;
  transition: transform .15s var(--hs-ease-standard), background .2s;
}
.nav-explore > span { letter-spacing: -.01em; }
.nav-explore:active { transform: translateY(1px); }
.nav-tab {
  flex: 1 1 0; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: transparent; cursor: pointer;
  padding: 0; border-radius: 999px;
  color: var(--hs-warm-grey-700);
  font: 500 12px/1 var(--hs-font-sans);
  transition: flex-grow .26s var(--hs-ease-standard), background .2s, color .2s;
}
.nav-tab > span { letter-spacing: -.01em; }
.nav-tab.is-active {
  background: #fff; color: var(--hs-blue-200);
  box-shadow: 0 2px 0 rgba(20,19,19,.06);
}
.nav-tab:active { transform: translateY(1px); }

.ebb-fab {
  position: absolute; left: calc(50% - 43px); bottom: 58px; z-index: 46; padding: 4px;
  transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 999px; border: none; cursor: pointer;
  background: #fff;
  box-shadow: 0 6px 18px rgba(242,107,164,.28), 0 2px 6px rgba(20,19,19,.12);
  animation: fab-in .32s var(--hs-ease-standard) both;
  transition: transform .15s var(--hs-ease-standard);
}
.ebb-fab::before {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 999px;
  background: url("assets/ebb-avatar.png") center/cover no-repeat;
}
@keyframes fab-in { from { opacity: 0; transform: translateX(-50%) scale(.5); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.ebb-fab:active { transform: translateX(-50%) scale(.93); }

/* ---------- Quick actions (fresh Ebb session) ---------- */
.quick-actions {
  position: absolute; left: 9px; right: 9px; bottom: 428px; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  transition: opacity .22s var(--hs-ease-standard), transform .22s var(--hs-ease-standard);
}
.quick-actions.is-typing { opacity: 0; transform: translateY(10px); pointer-events: none; }
.qa-card {
  background: #fff; border: none; cursor: pointer; text-align: left;
  border-radius: 22px; padding: 18px 18px; min-height: 92px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  box-shadow: 0 2px 0 rgba(20,19,19,.08);
  animation: qa-in .34s var(--hs-ease-standard) both;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s var(--hs-ease-standard);
}
.qa-card:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(20,19,19,.08); }
@keyframes qa-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.qa-label {
  align-self: flex-start;
  font: 700 19px/1.15 var(--hs-font-sans); letter-spacing: -.02em;
  color: var(--hs-warm-grey-800);
}
.qa-ic { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; }

/* dark (night) variants */
.phone.dark .nav-main,
.phone.dark .nav-explore { background: rgba(20,19,19,.5); }
.phone.dark .nav-tab,
.phone.dark .nav-explore,
.phone.dark .nav-ebb-slot { color: rgba(255,255,255,.7); }
.phone.dark .ebb-fab { background: rgba(22,20,42,.72); box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.phone.dark .nav-tab.is-active { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }

/* ============================================================
   iOS-style on-screen keyboard
   ============================================================ */
/* Tap-away scrim — dark translucent + blur over the home content (per Figma:
   rgba(20,19,19,.2) / blur 16). The dock, quick actions and keyboard sit above it. */
.kb-backdrop {
  position: absolute; inset: 0; z-index: 42;
  background: rgba(20,19,19,.2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: scrim-in .4s var(--hs-ease-standard) both;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.keyboard {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 44;
  background: #D1D4DB; padding: 7px 3px 4px;
  transform: translateY(105%); transition: transform .4s cubic-bezier(0.22, 0.66, 0.28, 1);
  -webkit-user-select: none; user-select: none;
}
.keyboard.open { transform: none; }
/* Peek: rises during the Ebb-input reveal (overlapping the tab bar) and lands
   with its top edge at the input bar's bottom, ready to bump it up. */
.keyboard.peek { transform: translateY(60%); transition: transform .5s var(--hs-ease-standard); }
.kb-rows { display: flex; flex-direction: column; gap: 11px; }
.kb-row { display: flex; gap: 6px; justify-content: center; }
.kb-row-2 { padding: 0 19px; }
.key {
  flex: 1 1 0; min-width: 0; height: 42px; border: none; cursor: pointer;
  background: #fff; border-radius: 5px;
  font: 400 22px/1 -apple-system, "SF Pro Text", system-ui; color: #1c1c1e;
  display: flex; align-items: center; justify-content: center;
  transition: background .08s;
}
.key:active { background: #c5c9d1; }
.key-mod { flex: 1.42 1 0; background: #ABB0BB; color: #1c1c1e; }
.key-mod:active { background: #fff; }
.key-mod.active { background: #fff; }
.kb-row-3 { gap: 6px; }
.kb-row-4 { gap: 6px; align-items: stretch; }
.key-wide { flex: 0 0 84px; }
.key-alt { background: #ABB0BB; font-size: 16px; font-weight: 500; }
.key-space { flex: 1 1 auto; font-size: 16px; font-weight: 400; color: #1c1c1e; }
.key-return { background: var(--hs-blue-200); color: #fff; }
.key-return:active { background: var(--hs-blue-300, #0052cc); }
.kb-ic { display: inline-flex; align-items: center; justify-content: center; }
.kb-util {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 14px;
}
.kb-util-btn {
  border: none; background: none; cursor: pointer; color: #1c1c1e;
  display: flex; align-items: center; justify-content: center; padding: 4px;
}

/* top fade — content slides up under the floating chrome and softens into the sky */
.top-fade {
  position: absolute; top: 0; left: 0; right: 0; height: 108px; z-index: 35;
  pointer-events: none;
  background: linear-gradient(180deg, #FFCE99 0%, rgba(255,220,173,.82) 52%, rgba(255,220,173,0) 100%);
}

/* ============================================================
   Chat conversation (inline, below the home content)
   ============================================================ */
.chat-inline { margin-top: 40px; }
.chat-head-inline { margin-bottom: 18px; }
.chat-date { font: 400 13px/1.4 var(--hs-font-sans); color: var(--hs-warm-grey-500); margin-bottom: 2px; }
.chat-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-q h2 { font: 700 22px/1.2 var(--hs-font-sans); letter-spacing: -.03em; color: var(--hs-warm-grey-800); margin: 0; }
.chat-q .spark {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  background: conic-gradient(from 30deg,#FFB87C,#FF7A4E,#F26BA4,#FFB87C);
  display: flex; align-items: center; justify-content: center; color: #fff;
}

.thread {
  display: flex; flex-direction: column; gap: 18px;
}
.msg { max-width: 86%; }
.msg.me { align-self: flex-end; text-align: right; }
.msg.me .bubble {
  display: inline-block; background: rgba(255,255,255,.75);
  border-radius: 20px 20px 6px 20px; padding: 12px 16px;
  font: 400 16px/1.45 var(--hs-font-sans); color: var(--hs-warm-grey-800);
  box-shadow: none; text-align: left;
}
.msg.ebb { align-self: flex-start; }
.msg.ebb .bubble {
  font: 400 16px/1.5 var(--hs-font-sans); color: var(--hs-warm-grey-700);
}
.msg-actions {
  display: flex; gap: 4px; margin-top: 10px;
}
.msg-actions button {
  width: 30px; height: 30px; border: none; background: none; cursor: pointer; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; color: var(--hs-warm-grey-500);
  transition: background .15s, color .15s, transform .15s;
}
.msg-actions button:hover { background: rgba(20,19,19,.05); }
.msg-actions button.on { color: var(--hs-blue-200); }
.msg-actions button:active { transform: scale(.9); }

/* typing indicator */
.typing { display: inline-flex; gap: 6px; padding: 6px 2px; }
.typing i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--hs-warm-grey-400);
  animation: blink 1.3s infinite both;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.25;transform:translateY(0);} 40%{opacity:1;transform:translateY(-3px);} }

/* inline content card in chat */
.rec-card {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: 18px; padding: 12px; cursor: pointer; margin-top: 2px;
  max-width: 300px;
  transition: transform .15s;
}
.rec-card:active { transform: translateY(1px); }
.rec-art { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden; }
.rec-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-info { flex: 1; min-width: 0; }
.rec-info .r-title { font: 700 15px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); margin: 0 0 3px; }
.rec-info .r-meta { font: 400 12px/1.3 var(--hs-font-sans); color: var(--hs-warm-grey-500); }
.rec-play { width: 36px; height: 36px; border-radius: 999px; background: var(--hs-blue-200); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s; }
.rec-play .ic { transform: translateX(1.5px); }
.rec-play:active { transform: scale(.94); }
.show-more {
  align-self: flex-start; background: none; border: none; cursor: pointer; padding: 4px 2px;
  font: 700 14px/1.2 var(--hs-font-sans); color: var(--hs-warm-grey-600);
  display: flex; align-items: center; gap: 4px;
}
.show-more:hover { color: var(--hs-warm-grey-800); }

/* entrance for new messages */
.enter { animation: enterUp .42s var(--hs-ease-entrance) both; }
@keyframes enterUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Your journey drawer (side menu) — sits static underneath; the
   screen-push wrapper below slides away to reveal it, so no dark
   overlay is needed here anymore.
   ============================================================ */
.drawer {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 20;
  width: 325px; background: var(--hs-color-background-strong);
  border-radius: 0;
  transform: translateX(-100%);
  transition: transform .38s var(--hs-ease-standard);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }

/* ---------- Screen push wrapper (Menu button pushes this right) ---------- */
.screen-push {
  position: absolute; inset: 0; z-index: 50;
  transition: transform .38s var(--hs-ease-standard), border-radius .38s var(--hs-ease-standard), box-shadow .38s var(--hs-ease-standard);
}
.screen-push.pushed {
  transform: translateX(325px);
  border-radius: 32px 0 0 32px;
}

/* Scrim + gaussian blur that animates in over the pushed screen */
.push-scrim {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(20,19,19,.28);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none;
  transition: opacity .34s var(--hs-ease-standard);
}
.push-scrim.open { opacity: 1; pointer-events: auto; }

/* round heart / clock toggles */
.jd-tabs { display: flex; align-items: center; gap: 12px; padding: 62px 24px 4px; }
.jd-round {
  width: 40px; height: 40px; border-radius: 999px; border: none;
  background: #fff; color: var(--hs-color-foreground);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s var(--hs-ease-standard);
}
.jd-round:active { transform: translateY(2px); }

/* streak pill, moved here from the Today header */
.streak-pill {
  margin-left: auto;
  cursor: pointer; border: none;
  display: inline-flex; align-items: flex-end; gap: 6px;
  height: 40px; padding: 4px 14px 0 8px; border-radius: 999px;
  background: #fff; overflow: hidden;
  transition: transform .15s var(--hs-ease-standard);
}
.streak-pill span { font: 700 16px/1 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-color-foreground); align-self: center; }
.streak-pill:active { transform: translateY(2px); }

.drawer-head { padding: 14px 24px 10px; }
.drawer-head h2 { font: 700 27px/1.1 var(--hs-font-sans); letter-spacing: -.03em; color: var(--hs-warm-grey-800); margin: 0; }
.drawer-scroll { flex: 1; overflow-y: auto; padding: 8px 20px 12px; display: flex; flex-direction: column; gap: 14px; }
.drawer-scroll::-webkit-scrollbar { display: none; }

/* entry + history cards */
.jd-card {
  display: flex; align-items: stretch; background: #fff;
  border-radius: 20px; overflow: hidden; min-height: 96px;
}
.jd-info { flex: 1; padding: 16px 8px 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.jd-meta { display: flex; align-items: center; gap: 6px; color: var(--hs-warm-grey-500); }
.jd-meta > span { font: 500 13px/1 var(--hs-font-sans); letter-spacing: -.01em; }
.jd-meta svg { color: var(--hs-warm-grey-700); }
.jd-title { font: 700 17px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }

.jd-thumbs {
  flex-shrink: 0; width: 108px; align-self: stretch;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0;
}
.jd-thumb { border: none; padding: 0; cursor: pointer; overflow: hidden; background: none; transition: opacity .15s; }
.jd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-thumb:active { opacity: .8; }

/* "find a new path" feature card */
.jd-path {
  position: relative; display: block; width: 100%; border: none; cursor: pointer;
  height: 168px; border-radius: 24px; overflow: hidden; padding: 0;
  background-size: cover; background-position: center;
  box-shadow: 0 2px 0 rgba(20,19,19,.10);
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s var(--hs-ease-standard);
}
.jd-path::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,19,19,.55) 0%, rgba(20,19,19,.06) 46%, rgba(20,19,19,0) 70%);
}
.jd-path:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(20,19,19,.10); }
.jd-path-t {
  position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 1; text-align: left;
  font: 700 21px/1.15 var(--hs-font-sans); letter-spacing: -.03em; color: #fff;
}

.drawer-foot {
  display: flex; align-items: center; gap: 12px; padding: 12px 24px 30px;
}
.drawer-foot .avatar {
  width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  background: #fff url("assets/headspace-dot.png") center/30px no-repeat;
}
.drawer-foot .who .n { font: 700 16px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }
.drawer-foot .who .s { font: 400 13px/1.3 var(--hs-font-sans); color: var(--hs-warm-grey-500); margin-top: 2px; }



/* ============================================================
   Player (color-sampled)
   ============================================================ */
.player {
  position: absolute; inset: 0; z-index: 80; color: #fff;
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .4s var(--hs-ease-standard);
}
.player.open { transform: none; }
.player-grain { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 4px 4px; mix-blend-mode: overlay; }
.player-top {
  position: relative; z-index: 2; padding: 60px 20px 0;
  display: flex; justify-content: flex-end;
}
.player-x {
  width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s; 
}
.player-x:active { transform: scale(.9); }
.player-mid {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  padding: 0 32px;
}
.breath {
  width: 132px; height: 132px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.22); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.4);
}
.breath.playing { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(.86); box-shadow: 0 0 40px 6px rgba(255,255,255,.18);} 50% { transform: scale(1.06); box-shadow: 0 0 70px 14px rgba(255,255,255,.30);} }
.breath .play-tri { width: 0; height: 0; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.player-title { text-align: center; }
.player-title .cat { font: 400 13px/1 var(--hs-font-sans); color: #fff; opacity: .9; margin-bottom: 8px; }
.player-title h2 { font: 700 34px/1.08 var(--hs-font-sans); letter-spacing: -.03em; margin: 0; color: #fff; text-shadow: 0 1px 18px rgba(20,19,19,.18); }
.player-pills { display: flex; gap: 10px; }
.player-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(8px);
  padding: 9px 16px; border-radius: 999px; font: 700 14px/1 var(--hs-font-sans); color: #fff;
}
.player-pill .swatch { width: 18px; height: 18px; border-radius: 999px; background: #fff; }
.player-bottom { position: relative; z-index: 2; padding: 0 32px 40px; }
.scrubber { margin-bottom: 6px; }
.scrub-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.3); cursor: pointer; }
.scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #fff; }
.scrub-handle { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); }
.scrub-time { display: flex; justify-content: space-between; margin-top: 8px; font: 400 14px/1 var(--hs-font-sans); opacity: .85; }
.player-controls {
  display: flex; align-items: center; justify-content: center; gap: 36px;
}
.pc-skip { background: none; border: none; cursor: pointer; color: #fff; opacity: .9; }
.pc-play {
  width: 76px; height: 76px; border-radius: 999px; border: none; cursor: pointer;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.pc-play:active { transform: scale(.94); }
.pc-play .ic { transform: translateX(2px); }
.pc-play .play-tri { width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }
.actionbar {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  border-radius: 999px; padding: 12px 0;
}
.actionbar button { background: none; border: none; cursor: pointer; color: #fff; opacity: .92; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.actionbar button:active { transform: scale(.85); }
.actionbar button.on { color: #fff; opacity: 1; }

/* ============================================================
   ONBOARDING — first-run conversation (warm daytime sky)
   ============================================================ */
.ob {
  position: absolute; inset: 0; z-index: 2;
  background: #fff;
}
/* faint blue glow — a translucent scrim sitting behind the nav only,
   so content scrolling up fades beneath it at the very top */
.ob::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 148px; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(122,182,255,.90) 0%,
      rgba(150,201,255,.72) 46%,
      rgba(200,227,255,.34) 80%,
      rgba(255,255,255,0) 100%);
}

/* Top nav — Ebb pinned left, close on the right, floating over the thread */
.ob-topnav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 62px 24px 6px;
}
.ob-topnav .ob-orb {
  width: 46px; height: 46px;
  box-shadow: 0 0 0 4px #fff, 0 2px 10px rgba(20,19,19,.10);
}
.ob-close {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: var(--hs-warm-grey-800);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(20,19,19,.10);
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s;
}
.ob-close:hover { background: var(--hs-warm-grey-100, #F9F4F2); }
.ob-close:active { transform: translateY(1px); box-shadow: none; }

/* Ebb's presence at the top */
.ob-presence {
  flex: 0 0 auto;
  padding: 64px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.ob-orb {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  box-shadow: none;
  animation: ob-breathe 5.5s ease-in-out infinite;
  will-change: transform;
}
.ob-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-orb.react { animation: ob-breathe 5.5s ease-in-out infinite, ob-react .85s ease-out; }
@keyframes ob-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes ob-react { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ob-presence-label {
  font: 700 13px/1 var(--hs-font-sans); letter-spacing: -.01em;
  color: var(--hs-warm-grey-700);
}

/* Scroll surface for the thread */
.ob-scroll {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 118px 24px 158px;
}
.ob-scroll::-webkit-scrollbar { display: none; }
.ob-thread { padding-top: 6px; }

/* closing "Anything else?" beat — the Ebb input dock rides above the keyboard */
.ob-foot {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 45;
  padding: 12px 20px 16px;
  transition: bottom .42s cubic-bezier(0.22,0.66,0.28,1);
}
.ob.kb .ob-foot { bottom: 290px; padding-bottom: 0; }
.ob.kb .ob-scroll { padding-bottom: 500px; }

/* quick-reply chips — right aligned, like suggested user replies */
.ob-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end; margin-top: 6px;
}
.ob-chip {
  border: 1.5px solid rgba(20,19,19,.16);
  background: #fff;
  color: var(--hs-warm-grey-800);
  font: 700 16px/1 var(--hs-font-sans); letter-spacing: -.02em;
  padding: 14px 18px; border-radius: 15px; cursor: pointer;
  box-shadow: 0 1px 0 rgba(20,19,19,.05);
  transition: transform .15s var(--hs-ease-standard), border-color .15s, box-shadow .15s;
  animation: enterUp .42s var(--hs-ease-entrance) both;
}
.ob-chip:hover { border-color: rgba(20,19,19,.28); }
.ob-chip:active { transform: translateY(1px); box-shadow: none; }

/* ---- Primary "enter" pill (handoff + interstitial) ---- */
.enter-btn {
  font: 700 16px/1 var(--hs-font-sans); letter-spacing: -.01em;
  color: #fff; border: none; cursor: pointer; border-radius: 999px;
  padding: 16px 30px; background: var(--hs-blue-200);
  box-shadow: none;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s, background .15s, opacity .4s ease;
}
.enter-btn:hover { background: var(--hs-blue-300); transform: translateY(-1px); box-shadow: none; }
.enter-btn:active { transform: translateY(2px); box-shadow: none; }
.enter-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.ob-handoff { display: flex; justify-content: center; padding: 18px 0 8px; }
/* submitted answers get the tonal surface (surfaceStrong) against the white sheet */
.ob .msg.me .bubble { background: var(--hs-color-background-strong, #F9F4F2); }


/* ============================================================
   BREATHING PRACTICE (inline card)
   ============================================================ */
.session {
  width: 100%;
  background: #fff; border: 1px solid rgba(20,19,19,.06);
  border-radius: 24px; padding: 26px 20px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: none;
  animation: enterUp .55s var(--hs-ease-entrance) both;
}
.session-eyebrow {
  font: 400 10px/1 var(--hs-font-mono); letter-spacing: .20em; text-transform: uppercase;
  color: var(--hs-warm-grey-500);
}
.session-title {
  font: 700 16px/1.2 var(--hs-font-sans); letter-spacing: -.02em;
  color: var(--hs-warm-grey-800); text-align: center; margin-top: -4px;
}
.breath-stage {
  position: relative; width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center; margin: 4px 0;
}
.breath-ring {
  position: absolute; width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #FFB87C, #FF7300);
}
.breath-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.breath-ring.running { animation: ob-breathe-circle 14s ease-in-out infinite; }
.breath-halo {
  position: absolute; width: 130px; height: 130px; border-radius: 50%;
  border: 1.5px solid rgba(255,115,0,.3);
}
.breath-halo.running { animation: ob-breathe-halo 14s ease-in-out infinite; }
@keyframes ob-breathe-circle { 0% { transform: scale(.65); } 28.5% { transform: scale(1); } 57% { transform: scale(1); } 100% { transform: scale(.65); } }
@keyframes ob-breathe-halo { 0% { transform: scale(.72); opacity: .2; } 28.5% { transform: scale(1.2); opacity: .6; } 57% { transform: scale(1.2); opacity: .6; } 100% { transform: scale(.72); opacity: .2; } }
.breath-cue {
  font: 500 19px/1.3 var(--hs-font-sans); letter-spacing: -.01em;
  color: var(--hs-warm-grey-800); min-height: 26px; text-align: center;
  transition: opacity .6s ease;
}
.breath-count {
  font: 400 10px/1 var(--hs-font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--hs-warm-grey-500);
}
.session-controls {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 4px;
}
.pill-btn {
  font: 700 14px/1 var(--hs-font-sans); letter-spacing: -.01em;
  border-radius: 999px; padding: 13px 22px; cursor: pointer; border: none;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s, background .15s;
}
.pill-btn.primary { background: var(--hs-blue-200); color: #fff; box-shadow: none; }
.pill-btn.primary:hover { background: var(--hs-blue-300); }
.pill-btn.primary:active { transform: translateY(2px); box-shadow: none; }
.pill-btn.ghost { background: #fff; border: 1px solid rgba(20,19,19,.12); color: var(--hs-warm-grey-800); box-shadow: none; }
.pill-btn.ghost:active { transform: translateY(2px); box-shadow: none; }
.sound-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--hs-font-sans); color: var(--hs-warm-grey-500);
  background: #fff; border: 1px solid rgba(20,19,19,.12); border-radius: 999px;
  padding: 9px 14px 9px 12px; cursor: pointer; box-shadow: none;
  transition: color .15s, border-color .15s;
}
.sound-toggle.on { color: var(--hs-blue-200); border-color: var(--hs-blue-200); }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-bars i { width: 2.5px; background: currentColor; border-radius: 2px; height: 40%; }
.sound-toggle.on .sound-bars i { animation: ob-eq .9s ease-in-out infinite; }
.sound-toggle.on .sound-bars i:nth-child(2) { animation-delay: .15s; }
.sound-toggle.on .sound-bars i:nth-child(3) { animation-delay: .30s; }
.sound-toggle.on .sound-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes ob-eq { 0%,100% { height: 35%; } 50% { height: 100%; } }

/* disabled dock during Ebb speaking / breathing */
.dock.disabled { opacity: .55; }
.dock.disabled .dock-field { background: rgba(20,19,19,.04); }

/* ============================================================
   CRISIS / SOS — "Mental health resources" card (inline in onboarding)
   ============================================================ */
.crisis-card {
  width: 100%; text-align: center;
  background: #fff; border: 1px solid rgba(20,19,19,.05);
  border-radius: 28px; padding: 30px 24px 26px;
  box-shadow: none;
  animation: enterUp .55s var(--hs-ease-entrance) both;
}
.crisis-mark { display: flex; justify-content: center; margin-bottom: 18px; }
.crisis-mark .ic { width: 84px; height: 84px; }
.crisis-title {
  font: 700 24px/1.18 var(--hs-font-sans); letter-spacing: -.025em;
  color: var(--hs-warm-grey-800); margin-bottom: 12px;
}
.crisis-body {
  font: 400 15px/1.45 var(--hs-font-sans); color: var(--hs-warm-grey-700);
  margin-bottom: 22px; text-wrap: pretty;
}
.crisis-body strong { font-weight: 700; color: var(--hs-warm-grey-800); }
.crisis-btns { display: flex; flex-direction: column; gap: 12px; }
.crisis-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 62px; border-radius: 999px; text-decoration: none;
  font: 700 17px/1 var(--hs-font-sans); letter-spacing: -.01em; cursor: pointer;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s, background .15s;
}
.crisis-btn .cb-ic { display: flex; align-items: center; }
.crisis-btn.primary { background: var(--hs-blue-200); color: #fff; box-shadow: none; }
.crisis-btn.primary:hover { background: var(--hs-blue-300); transform: translateY(-1px); box-shadow: none; }
.crisis-btn.primary:active { transform: translateY(3px); box-shadow: none; }
.crisis-btn.cream { background: var(--hs-warm-grey-100); color: var(--hs-warm-grey-800); box-shadow: none; }
.crisis-btn.cream:hover { background: #F1EAE6; transform: translateY(-1px); box-shadow: none; }
.crisis-btn.cream:active { transform: translateY(3px); box-shadow: none; }
.crisis-foot {
  font: 400 13px/1.5 var(--hs-font-sans); color: var(--hs-warm-grey-700);
  margin-top: 20px; text-wrap: pretty;
}
.crisis-foot strong { font-weight: 700; color: var(--hs-warm-grey-800); }
.crisis-foot a { color: var(--hs-warm-grey-800); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   INTERSTITIAL — Ebb sets up the space
   ============================================================ */
.ob-transition {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 40px 34px;
}
.ob-trans-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; text-align: center;
}
.ob-trans-orb {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  box-shadow: none;
  animation: ob-breathe 4.6s ease-in-out infinite; will-change: transform;
}
.ob-trans-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-trans-lines { display: flex; flex-direction: column; gap: 16px; max-width: 300px; }
.ob-trans-line {
  margin: 0; font: 400 19px/1.5 var(--hs-font-sans); letter-spacing: -.01em;
  color: var(--hs-warm-grey-700); text-wrap: pretty;
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.1s ease, transform 1.1s var(--hs-ease-standard);
}
.ob-trans-line.in { opacity: 1; transform: none; }
.ob-trans-line:first-child { font-weight: 700; font-size: 23px; color: var(--hs-warm-grey-800); }
.ob-transition .enter-btn { opacity: 0; pointer-events: none; }
.ob-transition .enter-btn.in { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .ob-orb, .ob-trans-orb, .breath-ring.running, .breath-halo.running,
  .sound-toggle.on .sound-bars i { animation: none !important; }
  .ob-trans-line { transition-duration: .01ms !important; }
}

/* ============================================================
   Search overlay (discovery sheet)
   ============================================================ */
.search-ov { position: absolute; inset: 0; z-index: 65; pointer-events: none; }

.search-scrim {
  position: absolute; inset: 0; background: rgba(36,32,30,.18);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--hs-ease-standard);
}
.search-ov.open .search-scrim { opacity: 1; pointer-events: auto; }

.search-sheet {
  position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
  border-radius: 36px;
  background: rgba(249,244,242,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 22px 30px;
  opacity: 0; transform: translateY(14px) scale(.985); transform-origin: 90% 8%;
  pointer-events: none;
  transition: opacity .32s var(--hs-ease-standard), transform .32s var(--hs-ease-standard);
}
.search-sheet::-webkit-scrollbar { display: none; }
.search-ov.open .search-sheet { opacity: 1; transform: none; pointer-events: auto; }

/* close button row */
.search-head { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.search-x {
  width: 42px; height: 42px; border-radius: 999px; border: none; cursor: pointer;
  background: #fff; color: var(--hs-warm-grey-800);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s var(--hs-ease-standard);
}
.search-x:active { transform: translateY(1px); }

/* search bar */
.search-bar {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.92);
  border-radius: 999px; padding: 10px 14px;
  box-shadow: none;
  margin-bottom: 18px;
}
.search-bar-ic {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  background: var(--hs-warm-grey-100);
  display: flex; align-items: center; justify-content: center;
}
.search-bar input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: 400 18px/1.4 var(--hs-font-sans); letter-spacing: -.01em;
  color: var(--hs-warm-grey-800); padding-right: 10px;
}
.search-bar input::placeholder { color: var(--hs-warm-grey-500); }

/* prompt pills */
.search-prompts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.search-prompt {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.92); border: none; cursor: pointer;
  border-radius: 999px; padding: 11px 16px;
  font: 700 15px/1 var(--hs-font-sans); letter-spacing: -.01em; color: var(--hs-warm-grey-800);
  box-shadow: none;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s, background .15s;
}
.search-prompt:hover { background: #fff; }
.search-prompt:active { transform: translateY(2px); box-shadow: none; }
.prompt-dot { width: 18px; height: 18px; border-radius: 999px; background: var(--hs-orange-200, #FF7300); flex-shrink: 0; }
.prompt-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prompt-ic.moon { width: 20px; height: 20px; border-radius: 999px; color: #6E5BD6; }
.prompt-ic.spark { color: #8A7DEB; }

/* section heads */
.search-sec {
  font: 700 24px/1.15 var(--hs-font-sans); letter-spacing: -.03em;
  color: var(--hs-warm-grey-800); margin: 0 0 16px;
}

/* 1 minute resets */
.reset-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 34px; }
.reset-card {
  background: rgba(255,255,255,.92); border: none; cursor: pointer;
  border-radius: 20px; padding: 14px 10px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: none;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s;
}
.reset-card:active { transform: translateY(2px); box-shadow: none; }
.reset-tile {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.reset-label { font: 700 16px/1 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }

/* what's helping others */
.trend-list { display: flex; flex-direction: column; gap: 14px; }
.trend-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.trend-num {
  flex-shrink: 0; width: 18px; text-align: right;
  font: 700 17px/1 var(--hs-font-sans); color: var(--hs-warm-grey-800);
}
.trend-card {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.92); border-radius: 18px; padding: 12px 14px 12px 12px;
  box-shadow: none;
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s;
}
.trend-row:active .trend-card { transform: translateY(2px); box-shadow: none; }
.trend-thumb { width: 60px; height: 46px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.trend-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trend-info { flex: 1; min-width: 0; }
.trend-title {
  font: 700 16px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trend-meta { display: flex; align-items: center; gap: 6px; font: 400 13px/1.3 var(--hs-font-sans); color: var(--hs-warm-grey-600); }
.trend-meta .ic { flex-shrink: 0; }

/* ============================================================
   NIGHT — dark mode (period === 'night')
   ============================================================ */
.phone.dark { background: #1A1640; }

.phone.dark .clouds {
  background: linear-gradient(180deg,
    #211A4D 0%, #2E2068 22%, #4A36A0 52%, #392A82 78%, #241C54 100%);
}
.phone.dark .clouds::before { background: radial-gradient(circle, rgba(150,120,255,.34), rgba(150,120,255,0) 70%); }
.phone.dark .clouds::after { background: radial-gradient(circle, rgba(120,90,230,.30), rgba(120,90,230,0) 70%); }
.phone.dark .cloud { background: #7A63D4; opacity: .22; }

.phone.dark .statusbar { color: #fff; }
.phone.dark .home-bar { background: #fff; opacity: .6; }

.phone.dark .top-fade {
  background: linear-gradient(180deg, #211A4D 0%, rgba(33,26,77,.82) 52%, rgba(33,26,77,0) 100%);
}

/* chrome */
.phone.dark .chrome-btn { background: rgba(255,255,255,.14); color: #fff; }
.phone.dark .chrome-btn.ai { background: rgba(255,255,255,.20); color: #fff; }
.phone.dark .streak-pill { background: rgba(255,255,255,.16); box-shadow: none; }
.phone.dark .streak-pill span { color: #fff; }

/* daily essentials + needs */
.phone.dark .ess-dot { background: #1A1640; box-shadow: inset 0 0 0 2px rgba(255,255,255,.32); }
.phone.dark .ess-dot.active { background: var(--hs-orange-200, #FF7300); box-shadow: 0 0 0 4px rgba(255,115,0,.22); }
.phone.dark .ess-marker::before, .phone.dark .ess-marker::after { border-color: rgba(255,255,255,.22); }
.phone.dark .ess-bar { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.phone.dark .ess-bar-t { color: #fff; }
.phone.dark .ess-bar-sep, .phone.dark .ess-bar-m { color: rgba(255,255,255,.55); }
.phone.dark .need-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.phone.dark .need-title { color: #fff; }
.phone.dark .rail-dot { background: rgba(255,255,255,.28); }
.phone.dark .rail-dot.on { background: rgba(255,255,255,.6); }
.phone.dark .sc-grey, .phone.night .sc-grey { background: #2B2752; }
.phone.dark .stack-card.is-active, .phone.night .stack-card.is-active { box-shadow: 0 6px 24px rgba(157,165,184,.08); }
.phone.dark .stack-card.is-collapsed, .phone.night .stack-card.is-collapsed { box-shadow: 0 3px 14px rgba(157,165,184,.08); }
.phone.dark .peek-t, .phone.night .peek-t { color: rgba(255,255,255,.9); }
.phone.dark .peek-dot, .phone.night .peek-dot { background: rgba(255,255,255,.42); }
.phone.dark .needs-spark { color: #fff; }


/* greeting + headings */
.phone.dark .greeting-h1 { color: #fff; }
.phone.dark .tod-toggle { color: rgba(255,255,255,.85); }
.phone.dark .greeting-sub { color: rgba(255,255,255,.82); }
.phone.dark .greeting-meta { color: rgba(255,255,255,.5); }
.phone.dark .hs-badge { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.phone.dark .hs-badge-ic { color: #fff; }
.phone.dark .sec-head h2 { color: #fff; }
.phone.dark .rate button { color: rgba(255,255,255,.72); }
.phone.dark .rate button:hover { background: rgba(255,255,255,.08); }
.phone.dark .rate button.on { color: #9B8CFF; }

/* content tiles — dark body, art stays */
.phone.dark .tile { background: rgba(16,13,38,.82); }
.phone.dark .tile-body .t-title { color: #fff; }
.phone.dark .tile-body .t-meta { color: rgba(255,255,255,.55); }
.phone.dark .tile-over { background: rgba(20,16,44,.7); color: #fff; }

/* dropdown menu */
.phone.dark .tod-menu { background: #15121F; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.phone.dark .tod-item { color: rgba(255,255,255,.92); }
.phone.dark .tod-item:hover { background: rgba(255,255,255,.07); }
.phone.dark .tod-check { color: #2ED573; }

/* input dock */
.phone.dark .dock { background: rgba(22,18,48,.74); box-shadow: none; }
.phone.dark .dock-field { background: rgba(255,255,255,.10); }
.phone.dark .dock-field input { color: #fff; }
.phone.dark .dock-field input::placeholder { color: rgba(255,255,255,.55); }
.phone.dark .dock-btn { color: rgba(255,255,255,.85); }
.phone.dark .dock-btn.voice { background: #fff; color: var(--hs-warm-grey-800); }

/* inline chat */
.phone.dark .chat-q h2 { color: #fff; }
.phone.dark .chat-date { color: rgba(255,255,255,.5); }
.phone.dark .msg.me .bubble { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.phone.dark .msg.ebb .bubble { color: rgba(255,255,255,.85); }
.phone.dark .rec-card { background: rgba(255,255,255,.10); }
.phone.dark .rec-info .r-title { color: #fff; }
.phone.dark .rec-info .r-meta { color: rgba(255,255,255,.55); }
.phone.dark .msg-actions button { color: rgba(255,255,255,.55); }
.phone.dark .msg-actions button:hover { background: rgba(255,255,255,.08); }
.phone.dark .show-more { color: rgba(255,255,255,.7); }
.phone.dark .chip-row button { border-color: rgba(255,255,255,.16) !important; background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.85) !important; }

/* search overlay at night */
.phone.dark .search-scrim { background: rgba(10,8,24,.5); }
.phone.dark .search-sheet { background: rgba(28,23,58,.84); box-shadow: none; }
.phone.dark .search-x { background: rgba(255,255,255,.16); color: #fff; }
.phone.dark .search-bar { background: rgba(255,255,255,.10); box-shadow: none; }
.phone.dark .search-bar-ic { background: rgba(255,255,255,.12); }
.phone.dark .search-bar input { color: #fff; }
.phone.dark .search-bar input::placeholder { color: rgba(255,255,255,.55); }
.phone.dark .search-prompt { background: rgba(255,255,255,.10); color: #fff; box-shadow: none; }
.phone.dark .search-prompt:hover { background: rgba(255,255,255,.16); }
.phone.dark .search-sec { color: #fff; }
.phone.dark .reset-card { background: rgba(255,255,255,.08); box-shadow: none; }
.phone.dark .reset-label { color: #fff; }
.phone.dark .trend-num { color: #fff; }
.phone.dark .trend-card { background: rgba(255,255,255,.08); box-shadow: none; }
.phone.dark .trend-title { color: #fff; }
.phone.dark .trend-meta { color: rgba(255,255,255,.6); }

/* ============================================================
   EBB CHAT — overlay sheet above the Today tab (blurred scrim)
   ============================================================ */
.ebb-sheet {
  position: absolute; inset: 0; z-index: 66;
  pointer-events: none;
}
.ebb-sheet.open { pointer-events: auto; }

/* blurred scrim — the Today tab shows through, softened */
.ebb-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(249,244,242,.46);
  -webkit-backdrop-filter: blur(28px) saturate(118%);
  backdrop-filter: blur(28px) saturate(118%);
  opacity: 0; transition: opacity .34s var(--hs-ease-standard);
}
.ebb-sheet.open .ebb-scrim { opacity: 1; }

/* content shell — header / thread / foot stacked; padding-bottom reserves
   room for the keyboard when it's raised so the dock rides above it */
.ebb-shell {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding-bottom: 26px;
  transition: padding-bottom .42s cubic-bezier(0.22,0.66,0.28,1);
}
.ebb-sheet.kb .ebb-shell { padding-bottom: 290px; }

/* header — × close (top-left menu is the chrome Explore button, above the scrim) */
.ebb-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 60px 20px 4px; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--hs-ease-standard) .05s;
}
.ebb-header .ebb-nav-btn.ghost { display: none; }
.ebb-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(249,244,242,.72) 0%, rgba(249,244,242,0) 100%);
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
  -webkit-mask: linear-gradient(to bottom, #000 52%, transparent 100%);
  mask: linear-gradient(to bottom, #000 52%, transparent 100%);
}
.ebb-header .ebb-nav-btn { pointer-events: auto; }
.ebb-sheet.open .ebb-header { opacity: 1; }
.ebb-nav-btn {
  width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82); color: var(--hs-warm-grey-800);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .15s var(--hs-ease-standard), background .15s;
}
.ebb-nav-btn.ghost { background: rgba(255,255,255,.58); color: var(--hs-warm-grey-700); }
.ebb-nav-btn:active { transform: translateY(1px); }

/* thread — bottom-anchored; top padding clears the overlay header so content
   scrolls under it */
.ebb-thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 104px 20px 0;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .3s var(--hs-ease-standard) .05s;
}
.ebb-sheet.open .ebb-thread { opacity: 1; }
.ebb-thread::-webkit-scrollbar { display: none; }
.ebb-thread-inner {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding-bottom: 12px;
}

/* conversation container — greeting + thread live inside one elevated white card */
.ebb-convo {
  background: #fff; border-radius: 24px; padding: 20px 20px 16px;
  box-shadow: 0 2px 0 rgba(20,19,19,.05);
  display: flex; flex-direction: column; gap: 16px;
}
.ebb-convo .ebb-greet { padding: 0; }
.ebb-convo .msg.enter { animation: enterUp .42s var(--hs-ease-entrance) both; }

/* opening prompt — elevated card when empty, plain header once talking.
   Date + title top-left (2px gap); Ebb mark top-right; optional chips below. */
.ebb-greet { padding: 2px 2px; display: flex; flex-direction: column; }
.ebb-greet.card {
  background: #fff; border-radius: 24px; padding: 18px 18px 18px;
  box-shadow: 0 2px 0 rgba(20,19,19,.05);
}
.ebb-greet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ebb-greet-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ebb-greet-date { font: 400 13px/1.4 var(--hs-font-sans); color: var(--hs-warm-grey-500); }
.ebb-greet-q {
  font: 700 22px/1.25 var(--hs-font-sans); letter-spacing: -.03em;
  color: var(--hs-warm-grey-800); margin: 0; text-wrap: pretty;
}
.ebb-greet-orb { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.ebb-greet-badge {
  align-self: flex-start; margin-bottom: 12px;
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,97,239,.07);
  font: 600 13px/1 var(--hs-font-sans); letter-spacing: -.01em;
  color: var(--hs-blue-300, #0061EF); white-space: nowrap;
}
.phone.dark .ebb-greet-badge { background: rgba(120,170,255,.14); color: #9db8ff; }

/* invitation quick actions inside the greeting card */
.ebb-greet-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.ebb-greet-chips .ebb-chip { box-shadow: none; border: 1.5px solid rgba(20,19,19,.10); }
.phone.dark .ebb-greet-chips .ebb-chip { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }

/* muted trailing dots after Ebb's latest reply */
.ebb-tail { display: flex; gap: 5px; padding: 12px 2px 2px; }
.ebb-tail i { width: 6px; height: 6px; border-radius: 50%; background: var(--hs-warm-grey-400); }

/* user + Ebb messages reuse .msg/.bubble; inside the white convo container */
.ebb-thread .msg.me { max-width: 82%; }
.ebb-thread .msg.me .bubble {
  background: var(--hs-color-background-strong, #F9F4F2); color: var(--hs-warm-grey-800);
  border-radius: 18px; padding: 14px 18px; font: 400 16px/1.5 var(--hs-font-sans);
}
.ebb-thread .msg.ebb .bubble { color: var(--hs-warm-grey-800); }

/* footer — chips + dock. No background — just the input UI itself. */
.ebb-foot {
  flex: 0 0 auto; padding: 12px 20px 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity .3s var(--hs-ease-standard) .06s, transform .36s var(--hs-ease-standard) .06s;
}
.ebb-sheet.open .ebb-foot { opacity: 1; transform: none; }

/* quick-reply chips — Action Tile layout: title top-left, icon top-right,
   content pinned to the top with a little more room below */
.ebb-chips {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
  max-height: 200px; overflow: visible;
  transition: opacity .15s var(--hs-ease-exit),
              transform .15s var(--hs-ease-exit),
              max-height .15s var(--hs-ease-exit),
              margin-bottom .15s var(--hs-ease-exit);
}
.ebb-chips.hidden {
  opacity: 0; transform: translateY(6px);
  max-height: 0; margin-bottom: 0; overflow: hidden; pointer-events: none;
}
.ebb-chip {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  background: #fff; border: none; cursor: pointer; text-align: left;
  border-radius: 16px; padding: 14px 16px 16px; min-height: 74px;
  box-shadow: 0 2px 4px rgba(20,19,19,.14);
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s var(--hs-ease-standard);
}
.ebb-chip:active { transform: translateY(2px); box-shadow: 0 1px 2px rgba(20,19,19,.14); }
.ebb-chip-t { font: 700 18px/1.2 var(--hs-font-sans); letter-spacing: -.03em; color: var(--hs-warm-grey-800); }
.ebb-chip-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

/* care chips rendered inline in the thread (not the footer) — break out of
   the convo padding so the tiles fill the card within its margins */
.ebb-chips.inline { margin: 14px -12px 0; }
.ebb-chips.inline .ebb-chip { min-height: 86px; padding: 16px 18px; }
.ebb-chips.appear { animation: ebbChipsIn .34s var(--hs-ease-entrance) both; }
@keyframes ebbChipsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ebb-chips.appear { animation: none; } }

/* dock — orb (eyes close while listening) · field · mic · voice/send */
.ebb-dock {
  background: #fff; border-radius: 26px; padding: 15px 15px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 0 8px 0 rgba(20,19,19,.08);
}
.ebb-dock-field { min-width: 0; }
.ebb-dock-field textarea {
  width: 100%; border: none; outline: none; background: transparent; resize: none;
  font: 400 16px/1.4 var(--hs-font-sans); color: var(--hs-warm-grey-800);
  padding: 4px 4px 2px; max-height: 74px; display: block;
  caret-color: var(--hs-blue-200);
  overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(20,19,19,.24) transparent;
}
.ebb-dock-field textarea::placeholder { color: var(--hs-warm-grey-400); }
.ebb-dock-field textarea::-webkit-scrollbar { width: 5px; }
.ebb-dock-field textarea::-webkit-scrollbar-track { background: transparent; }
.ebb-dock-field textarea::-webkit-scrollbar-thumb { background: rgba(20,19,19,.22); border-radius: 999px; }
.ebb-dock-row { display: flex; align-items: center; justify-content: space-between; }
.ebb-dock-face {
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
  background: url("assets/ebb-avatar.png") center/cover no-repeat,
              conic-gradient(from 30deg, #FFB87C, #FF7A4E, #F26BA4, #FFB87C);
}
.ebb-dock-actions { display: flex; align-items: center; gap: 10px; }
.ebb-dock-btn {
  width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--hs-warm-grey-700);
  transition: transform .15s, background .15s;
}
.ebb-dock-btn:active { transform: scale(.9); }
.ebb-dock-btn.mic { background: rgba(20,19,19,.05); }
.ebb-dock-btn.voice { background: var(--hs-warm-grey-800); color: #fff; }
.ebb-dock-btn.voice:active { transform: translateY(1px); }
.ebb-dock-btn.send { background: var(--hs-blue-200); color: #fff; }
.ebb-dock-btn.send:active { transform: translateY(1px); }

/* keyboard rides above the sheet content */
.ebb-sheet .keyboard { z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .ebb-scrim, .ebb-header, .ebb-thread, .ebb-foot, .ebb-shell { transition: none; }
}

/* ---- night variants ---- */
.phone.dark .ebb-scrim { background: rgba(18,15,42,.5); }
.phone.dark .ebb-header::before { background: linear-gradient(to bottom, rgba(18,15,42,.82) 0%, rgba(18,15,42,0) 100%); }
.phone.dark .ebb-nav-btn { background: rgba(255,255,255,.16); color: #fff; }
.phone.dark .ebb-nav-btn.ghost { background: rgba(255,255,255,.10); color: rgba(255,255,255,.85); }
.phone.dark .ebb-greet.card { background: rgba(22,18,48,.86); box-shadow: none; }
.phone.dark .ebb-greet-date { color: rgba(255,255,255,.55); }
.phone.dark .ebb-greet-q { color: #fff; }
.phone.dark .ebb-greet-orb { background: rgba(255,255,255,.12); }
.phone.dark .ebb-convo { background: rgba(22,18,48,.86); box-shadow: none; }
.phone.dark .ebb-schedule { background: rgba(22,18,48,.9); box-shadow: none; }
.phone.dark .ebb-sum-card { background: rgba(255,255,255,.08); }
.phone.dark .ebb-sum-date, .phone.dark .ebb-sched-head h3, .phone.dark .ebb-sched-q { color: #fff; }
.phone.dark .ebb-sum-cont { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.2); }
.phone.dark .state-dd-field { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.phone.dark .state-dd-val { color: #fff; }
.phone.dark .ebb-greet-orb .ic { color: rgba(255,255,255,.9) !important; }
.phone.dark .ebb-thread .msg.me .bubble { background: rgba(255,255,255,.12); color: #fff; }
.phone.dark .ebb-chip { background: rgba(22,18,48,.86); box-shadow: none; }
.phone.dark .ebb-chip-t { color: #fff; }
.phone.dark .ebb-dock { background: rgba(22,18,48,.9); box-shadow: none; }
.phone.dark .ebb-dock-field textarea { color: #fff; }
.phone.dark .ebb-dock-field textarea::placeholder { color: rgba(255,255,255,.5); }
.phone.dark .ebb-dock-field textarea { scrollbar-color: rgba(255,255,255,.3) transparent; }
.phone.dark .ebb-dock-field textarea::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
.phone.dark .ebb-dock-btn { color: rgba(255,255,255,.85); }
.phone.dark .ebb-dock-btn.mic { background: rgba(255,255,255,.10); }
.phone.dark .ebb-dock-btn.voice { background: #fff; color: var(--hs-warm-grey-800); }
.phone.dark .ebb-tail i { background: rgba(255,255,255,.4); }

/* ============================================================
   FLOWS v2.3 — flow picker, lock screen, notif dialog,
   personalizing interstitial, care escalation, side-menu redesign
   ============================================================ */
:root { --hs-ease-exit: cubic-bezier(0.4, 0, 0.6, 0.24); }

/* ---------- Floating flow picker (left of the phone) ---------- */
.flow-select {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 6px; width: 176px;
}
.flow-select-h {
  font: 700 11px/1 var(--hs-font-mono, ui-monospace); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.42); padding: 0 10px 6px;
}

/*
 * Narrow viewports: phone is centered at 393px, so a left-rail Flows list
 * overlaps once width drops below ~phone + 2×(rail + gutter). Stack Flows
 * under the phone and let the stage scroll.
 */
@media (max-width: 920px) {
  body { overflow: auto; }
  .stage {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 28px 16px 40px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .phone {
    order: 1;
    flex-shrink: 0;
    transform-origin: top center;
  }
  .flow-select {
    position: static;
    transform: none;
    order: 2;
    width: min(280px, 100%);
    margin: 0 auto;
  }
}
.flow-link {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  background: none; border: none; padding: 9px 10px; border-radius: 12px;
  transition: background .15s var(--hs-ease-standard);
}
.flow-link:hover { background: rgba(255,255,255,.06); }
.flow-link.on { background: rgba(255,255,255,.10); }
.flow-num {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--hs-font-sans); color: rgba(255,255,255,.55);
  border: 1.5px solid rgba(255,255,255,.22);
}
.flow-link.on .flow-num { background: #fff; color: #141313; border-color: #fff; }
.flow-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow-lab { font: 600 14px/1.15 var(--hs-font-sans); letter-spacing: -.01em; color: rgba(255,255,255,.55); }
.flow-link.on .flow-lab { color: #fff; }
.flow-sub { font: 400 11px/1.2 var(--hs-font-sans); color: rgba(255,255,255,.34); }

/* ---------- Ebb care: sent action chip + multi-paragraph bubble ---------- */
.bubble-p { margin: 0; }
.bubble-p + .bubble-p { margin-top: 12px; }
.action-bubble {
  display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
  min-width: 190px; border-radius: 18px !important;
  font-weight: 700 !important; letter-spacing: -.01em;
}
.action-bubble .action-ic { display: inline-flex; flex-shrink: 0; }

/* ---------- Care Scheduling panel (replaces thread) ---------- */
/* Care Scheduling stays bottom-anchored above the dock (like the conversation),
   hugging its own content, and eases in when the thread collapses into it. */
.ebb-schedule {
  display: flex; flex-direction: column; margin: 0 2px;
  background: #fff; border-radius: 24px; padding: 16px 16px 20px;
  box-shadow: 0 2px 0 rgba(20,19,19,.05);
  animation: schedIn .62s var(--hs-ease-standard) both;
}
@keyframes schedIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ebb-sum-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--hs-color-background-strong, #F9F4F2); border-radius: 16px;
  padding: 15px 15px 15px;
}
.ebb-sum-top { display: flex; align-items: flex-start; gap: 12px; }
.ebb-sum-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ebb-sum-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ebb-sum-label { font: 400 13px/1 var(--hs-font-sans); color: var(--hs-warm-grey-500); }
.ebb-sum-date { font: 700 15px/1.1 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); white-space: nowrap; }
.ebb-sum-cont {
  align-self: flex-end;
  border: 1.5px solid rgba(20,19,19,.16); background: #fff; cursor: pointer;
  font: 700 14px/1 var(--hs-font-sans); color: var(--hs-warm-grey-800);
  padding: 10px 15px; border-radius: 999px; box-shadow: 0 1px 0 rgba(20,19,19,.05);
  transition: transform .15s var(--hs-ease-standard);
}
.ebb-sum-cont:active { transform: translateY(1px); }
.ebb-keyline { border-top: 2px dashed rgba(20,19,19,.14); margin: 18px 0; }
.ebb-sched { padding: 0; }
.ebb-sched-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ebb-sched-head h3 { font: 700 20px/1.1 var(--hs-font-sans); letter-spacing: -.03em; color: var(--hs-warm-grey-800); margin: 0; }
.ebb-sched-more { border: none; background: none; cursor: pointer; color: var(--hs-warm-grey-600); display: flex; padding: 4px; }
.ebb-sched-q { font: 400 17px/1.4 var(--hs-font-sans); color: var(--hs-warm-grey-800); margin: 0 0 16px; text-wrap: pretty; }

/* floating-label state dropdown */
.state-dd { position: relative; }
.state-dd-field {
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(20,19,19,.16); border-radius: 14px;
  padding: 12px 16px 10px; position: relative;
  transition: border-color .15s var(--hs-ease-standard);
}
.state-dd.open .state-dd-field { border-color: var(--hs-blue-200); }
.state-dd-label {
  display: block; font: 500 12px/1 var(--hs-font-sans); color: var(--hs-warm-grey-500);
  margin-bottom: 4px;
}
.state-dd-val { display: block; font: 500 17px/1.2 var(--hs-font-sans); color: var(--hs-warm-grey-800); }
.state-dd-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--hs-warm-grey-600); display: flex; }
.state-dd-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6;
  background: #fff; border-radius: 14px; padding: 6px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(20,19,19,.16); border: 1px solid rgba(20,19,19,.06);
  max-height: 220px; overflow-y: auto;
  animation: todIn .18s var(--hs-ease-standard) both;
}
.state-dd-opt {
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px;
  font: 500 16px/1 var(--hs-font-sans); color: var(--hs-warm-grey-800);
  transition: background .12s;
}
.state-dd-opt:hover { background: rgba(20,19,19,.04); }
.state-dd-opt.on { color: var(--hs-blue-200); }
.state-dd-opt .ic { color: var(--hs-blue-200); }

/* ---------- Personalized feed: primary-blue "what changed" dots ---------- */
.sc-newdot {
  position: absolute; top: 13px; right: 15px; z-index: 42;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--hs-blue-200); box-shadow: 0 0 0 3px rgba(255,255,255,.55);
  animation: needDotPulse 3.6s var(--hs-easing-standard) .5s 2 both;
}
.stack-card.is-collapsed .sc-newdot { top: 50%; right: 16px; animation: newDotPulseY 3.6s var(--hs-easing-standard) .5s 2 both; }
@keyframes newDotPulseY {
  0%   { transform: translateY(-50%) scale(1); }
  25%  { transform: translateY(-50%) scale(1.55); }
  50%  { transform: translateY(-50%) scale(1); }
  75%  { transform: translateY(-50%) scale(1.55); }
  100% { transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sc-newdot, .stack-card.is-collapsed .sc-newdot { animation: none; } }
.need-card { position: relative; }
.need-newdot {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--hs-blue-200); box-shadow: 0 0 0 3px var(--hs-color-background-strong, #F9F4F2);
  animation: needDotPulse 3.6s var(--hs-easing-standard) .5s 2 both;
}
@media (prefers-reduced-motion: reduce) { .need-newdot { animation: none; } }
@keyframes needDotPulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.55); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* ---------- Side menu redesign (Your Journey) ---------- */
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.jd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 60px 22px 6px; }
.jd-topbar-l { display: flex; align-items: center; gap: 12px; }
.jd-streak {
  position: relative; box-sizing: border-box; height: 42px;
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border-radius: 999px; padding: 0 18px 0 46px;
  box-shadow: 0 2px 0 rgba(20,19,19,.06); overflow: hidden;
}
.jd-streak .ic { position: absolute; left: 10px; bottom: -8px; }
.jd-streak span { font: 700 17px/1 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }
.jd-streak.zero { background: rgba(255,255,255,.55); box-shadow: none; }
.jd-streak.zero .ic { filter: grayscale(1) opacity(.68); }
.jd-streak.zero span { color: var(--hs-warm-grey-500); }

/* active streak orb — grey base with a colour fill that wipes up on open */
.jd-streak-orb { position: absolute; left: 10px; bottom: -8px; width: 30px; height: 52px; transform-origin: 50% 100%; }
.jd-streak-orb .ic { position: absolute !important; left: 0 !important; bottom: 0 !important; }
.jd-streak-orb .s-base { filter: grayscale(1) opacity(.55); }
.jd-streak-orb .s-fill { clip-path: inset(0 0 0 0); will-change: clip-path; }
.jd-streak-num { display: inline-flex; transform-origin: 50% 60%; }
.jd-streak-orb.filling { animation: streakGrow .72s cubic-bezier(.34,1.56,.64,1) .18s both; }
.jd-streak-orb.filling .s-fill { animation: streakFill .62s cubic-bezier(.42,0,.2,1) .2s both; }
.jd-streak-num.pop { animation: streakPop .5s cubic-bezier(.34,1.56,.64,1) .52s both; }
@keyframes streakFill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes streakGrow { 0% { transform: scale(.82); } 60% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes streakPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .jd-streak-orb.filling, .jd-streak-orb.filling .s-fill, .jd-streak-num.pop { animation: none; }
}
.jd-journey-h { font: 700 27px/1.1 var(--hs-font-sans); letter-spacing: -.03em; color: var(--hs-warm-grey-800); margin: 2px 0 4px; }
.jd-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer; text-align: left;
  background: #fff; border: none; border-radius: 18px; padding: 16px 16px 16px 18px;
  box-shadow: 0 2px 0 rgba(20,19,19,.06);
  transition: transform .15s var(--hs-ease-standard);
}
.jd-summary:active { transform: translateY(1px); }
.jd-summary-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jd-summary-meta { display: flex; align-items: center; gap: 7px; font: 500 13px/1 var(--hs-font-sans); color: var(--hs-warm-grey-600); }
.jd-summary-title { font: 700 18px/1.25 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }
.jd-summary-arrow { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; background: rgba(20,19,19,.05); display: flex; align-items: center; justify-content: center; }

.jd-cal {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 14px 22px 8px;
}
.jd-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.jd-day-wk { font: 500 13px/1 var(--hs-font-sans); color: var(--hs-warm-grey-600); }
.jd-day-cell {
  width: 46px; height: 46px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 500 16px/1 var(--hs-font-sans); color: var(--hs-warm-grey-700);
}
.jd-day-cell.num { border: 1.6px solid rgba(20,19,19,.14); }
.jd-day.today::before {
  content: ''; position: absolute; z-index: 0;
  left: 50%; transform: translateX(-50%);
  top: -9px; bottom: -7px; width: 56px;
  background: color-mix(in srgb, var(--hs-orange-200, #FF7300) 45%, #fff);
  border-radius: 999px;
}
.jd-day.today .jd-day-wk { position: relative; z-index: 1; color: var(--hs-warm-grey-800); font-weight: 700; }
.jd-day.today .jd-day-cell { position: relative; z-index: 1; }
.jd-day-cell.num.today { background: #fff; border: none; color: var(--hs-warm-grey-800); font-weight: 700; }
.jd-day-cell.sleep { background: var(--hs-blue-200); color: #fff; }
.jd-day-cell.care { border: 1.6px solid rgba(20,19,19,.14); background: transparent; }
.jd-day-cell.care img { display: block; width: 20px; height: 20px; }
.jd-day-cell.award { overflow: visible; background: #fff; box-shadow: 0 1px 4px rgba(20,19,19,.06); }

.drawer-scroll { padding: 12px 22px 12px; gap: 16px; }

/* upcoming Care appointment row */
.jd-care {
  display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer; text-align: left;
  background: #fff; border: none; border-radius: 18px; padding: 14px 14px 14px 16px;
  box-shadow: 0 2px 0 rgba(20,19,19,.06);
  transition: transform .15s var(--hs-ease-standard);
}
.jd-care:active { transform: translateY(1px); }
.jd-care-av {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  object-fit: cover; background: var(--hs-warm-grey-200, #EDE7DF);
}
.jd-care-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jd-care-t { font: 700 16px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }
.jd-care-sub { font: 400 13px/1.3 var(--hs-font-sans); color: var(--hs-warm-grey-600); }
.jd-care-link { color: var(--hs-blue-200); font-weight: 500; }
.jd-care-caret { flex-shrink: 0; display: flex; }

/* dark coach-mark tooltip pointing at the Care row */
.jd-tip {
  position: relative; margin-top: 2px;
  background: #141a3d; border-radius: 16px; padding: 16px 16px 17px;
  animation: enterUp .4s var(--hs-ease-entrance) both;
}
.jd-tip::before {
  content: ""; position: absolute; top: -7px; right: 46px;
  width: 15px; height: 15px; background: #141a3d; transform: rotate(45deg); border-radius: 3px;
}
.jd-tip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.jd-tip-title { font: 700 16px/1.2 var(--hs-font-sans); letter-spacing: -.02em; color: #fff; }
.jd-tip-x { border: none; background: none; cursor: pointer; padding: 2px; display: flex; flex-shrink: 0; }
.jd-tip-body { font: 400 14px/1.45 var(--hs-font-sans); color: rgba(255,255,255,.82); margin: 0; text-wrap: pretty; }

/* "Find a new path forward" */
.jd-path2 {
  position: relative; display: block; width: 100%; border: none; cursor: pointer;
  height: 132px; border-radius: 22px; overflow: hidden; padding: 0;
  background: #2E7D46;
  box-shadow: 0 2px 0 rgba(20,19,19,.10);
  transition: transform .15s var(--hs-ease-standard), box-shadow .15s var(--hs-ease-standard);
}
.jd-path2-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-path2:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(20,19,19,.10); }
.jd-path2-t {
  position: absolute; left: 20px; bottom: 18px; z-index: 1; text-align: left;
  font: 700 21px/1.12 var(--hs-font-sans); letter-spacing: -.03em; color: #fff;
}

/* Chat history shortcut */
.jd-hist {
  display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer;
  background: #fff; border: none; border-radius: 18px; padding: 16px 18px; min-height: 78px;
  box-shadow: 0 2px 0 rgba(20,19,19,.06);
  transition: transform .15s var(--hs-ease-standard);
}
.jd-hist:active { transform: translateY(1px); }
.jd-hist-l { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.jd-hist-ic { color: var(--hs-warm-grey-700); display: flex; }
.jd-hist-t { font: 700 18px/1 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); }
.jd-hist-av { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.jd-hist-av img { width: 100%; height: 100%; object-fit: contain; display: block; }

.drawer-foot .avatar2 {
  width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.drawer-foot .avatar2 img { width: 52px; height: 52px; object-fit: contain; }

/* ---------- Lock screen ---------- */
.lock {
  position: absolute; inset: 0; z-index: 70; overflow: hidden;
  display: flex; flex-direction: column; color: #fff;
}
.lock-wall { position: absolute; inset: 0; z-index: 0; }
.lock-wall img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lock .statusbar { position: relative; z-index: 2; }
.lock-clock {
  position: relative; z-index: 2; text-align: center; margin-top: 32px;
  text-shadow: 0 2px 18px rgba(0,0,0,.24);
  font-family: "SF Pro Display","SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.lock-date { font-weight: 500; font-size: 22px; line-height: 1; color: rgba(255,255,255,.85); margin-bottom: 4px; }
.lock-time { font-weight: 500; font-size: 82px; line-height: 1; letter-spacing: -.03em; color: #fff; }
.lock-notifs { position: relative; z-index: 2; margin-top: auto; padding: 0 14px 150px; display: flex; flex-direction: column; gap: 10px; }
.lock-notif {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: rgba(120,120,128,.24); border: none; border-radius: 22px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  animation: lockNotif .5s var(--hs-ease-entrance) both .3s;
  transition: transform .15s var(--hs-ease-standard);
  font-family: "SF Pro Text","SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.lock-notif:active { transform: scale(.985); }
@keyframes lockNotif { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lock-app-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; align-self: center;
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lock-app-icon img { width: 34px; height: 34px; object-fit: contain; display: block; }
.lock-notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; align-self: flex-start; }
.lock-notif-title { font-weight: 600; font-size: 15px; line-height: 18px; letter-spacing: -.23px; color: #fff; }
.lock-notif-text { font-weight: 400; font-size: 15px; line-height: 18px; letter-spacing: -.23px; color: rgba(255,255,255,.96); text-wrap: pretty; }
.lock-notif-time { font-weight: 400; font-size: 13px; line-height: 18px; color: rgba(255,255,255,.72); flex-shrink: 0; align-self: flex-start; }

/* ---------- iOS notification opt-in dialog ---------- */
.notif-layer { position: absolute; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; }
.notif-scrim {
  position: absolute; inset: 0; background: rgba(249,244,242,.34);
  -webkit-backdrop-filter: blur(26px) saturate(112%); backdrop-filter: blur(26px) saturate(112%);
  animation: scrim-in .3s var(--hs-ease-standard) both;
}
.notif-dialog {
  position: relative; z-index: 1; width: 272px;
  background: #F4F1EE; border-radius: 22px; padding: 24px 22px 18px;
  box-shadow: 0 20px 60px rgba(20,19,19,.22);
  animation: ndPop .32s var(--hs-ease-entrance) both;
}
@keyframes ndPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.nd-title { font: 700 18px/1.28 var(--hs-font-sans); letter-spacing: -.02em; color: var(--hs-warm-grey-800); margin-bottom: 8px; }
.nd-body { font: 400 15px/1.4 var(--hs-font-sans); color: var(--hs-warm-grey-700); margin-bottom: 20px; }
.nd-btns { display: flex; flex-direction: column; gap: 10px; }
.nd-btn { border: none; cursor: pointer; border-radius: 999px; padding: 15px; font: 700 17px/1 var(--hs-font-sans); letter-spacing: -.01em; transition: transform .15s var(--hs-ease-standard), background .15s; }
.nd-btn.allow { background: var(--hs-blue-200); color: #fff; }
.nd-btn.allow:active { transform: translateY(1px); background: var(--hs-blue-300, #0052cc); }
.nd-btn.deny { background: rgba(20,19,19,.06); color: var(--hs-warm-grey-800); }
.nd-btn.deny:active { transform: translateY(1px); background: rgba(20,19,19,.10); }

/* ---------- Personalizing interstitial ---------- */
.pz-layer { position: absolute; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; }
.pz-scrim {
  position: absolute; inset: 0; background: rgba(20,19,19,.5);
  -webkit-backdrop-filter: blur(18px) saturate(108%); backdrop-filter: blur(18px) saturate(108%);
  animation: scrim-in .34s var(--hs-ease-standard) both;
}
.pz-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 230px; padding: 30px 26px; border-radius: 22px; text-align: center;
  background: rgba(18,17,26,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(20,19,19,.3);
  animation: ndPop .34s var(--hs-ease-entrance) both;
}
.pz-spinner {
  width: 34px; height: 34px; border-radius: 999px;
  border: 3px solid rgba(255,255,255,.22); border-top-color: #fff;
  animation: pzSpin .8s linear infinite;
}
@keyframes pzSpin { to { transform: rotate(360deg); } }
.pz-label { font: 500 15px/1.4 var(--hs-font-sans); color: rgba(255,255,255,.92); text-wrap: pretty; }

/* Light variant — used for the post-Ebb "Adjusting your plan…" interstitial */
.pz-card.light {
  background: linear-gradient(180deg, rgba(224,240,229,.72) 0%, rgba(255,255,255,.78) 58%);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(20,19,19,.14);
}
.pz-card.light .pz-label { color: #2B2A28; }
.pz-card.light .pz-spinner { border: 3px solid rgba(20,19,19,.13); border-top-color: #2B2A28; }
/* Flow 1 "Adjusting" dialog keeps a bright, lightly-veiled feed behind it */
.pz-layer:has(.pz-card.light) .pz-scrim { background: rgba(240,244,239,.22); }

@media (prefers-reduced-motion: reduce) {
  .lock-notif, .notif-dialog, .pz-card, .jd-tip { animation: none; }
  .pz-spinner { animation-duration: 1.6s; }
}