/* Companion: Mochi the desk cat, break ritual card, "Your night" popover, recap postcard, drift bubble. */

/* ---------- shared bits ---------- */
.comp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.comp-iconbtn {
  width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; color: var(--text-dim);
  transition: background var(--t-fast) var(--ease), color var(--t-fast), border-color var(--t-fast);
}
.comp-iconbtn:hover { background: rgba(243, 233, 216, 0.08); color: var(--text); }
.comp-iconbtn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.comp-iconbtn svg { width: 18px; height: 18px; }
.comp-linkbtn {
  background: none; border: 0; padding: 4px 2px; color: var(--text-faint); font-size: var(--fs-xs);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--glass-line-strong);
}
.comp-linkbtn:hover { color: var(--lamp-soft); }

/* =====================================================================
 * Mochi
 * ===================================================================== */
.comp-perch {
  /* Just under the popovers, so a portaled dock panel (radio, ambience) always paints over the cat. */
  position: fixed; z-index: calc(var(--z-overlay) - 1);
  left: calc(var(--s-3) * 2 + var(--left-w) + var(--s-4));
  bottom: calc(var(--s-3) + var(--dock-h) - 5px);
  width: 96px; display: none;
  transition: opacity var(--t-med) var(--ease);
}
body[data-view='room'] .comp-perch { display: block; }
/* Step aside when any dock panel opens (status/reactions in the dock; radio, ambience, devices, night in overlays). */
body:has(.popover.open) .comp-perch { opacity: 0; pointer-events: none; }
/* Keep the bottom row of desks (and their name chips) clear of the cat. */
body[data-view='room']:has(.comp-perch:not(.is-away)) .rtc-stage { padding-bottom: 72px; }

.comp-cat {
  display: block; width: 96px; padding: 0; margin: 0; border: 0; background: none;
  border-radius: var(--r-md); color: inherit; -webkit-tap-highlight-color: transparent;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), visibility 0s;
}
.comp-cat-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 12px var(--lamp-glow)); transition: filter var(--t-slow) var(--ease); }
.comp-cat[data-pose='sleep'] .comp-cat-svg { filter: drop-shadow(0 0 7px rgba(255, 179, 92, 0.18)); }
.comp-cat:hover .comp-cat-svg { filter: drop-shadow(0 0 16px var(--lamp-glow)); }
.comp-perch.is-away .comp-cat {
  opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s var(--t-med);
}

/* paint */
.comp-fur { fill: var(--ink-600); stroke: color-mix(in srgb, var(--lamp-soft) 38%, transparent); stroke-width: 1; }
.comp-tail path, .comp-tail-curl { fill: none; stroke: var(--ink-600); stroke-width: 7; stroke-linecap: round; }
.comp-cream { fill: color-mix(in srgb, var(--text) 86%, var(--ink-600)); }
.comp-ear-in { fill: var(--rose); opacity: 0.55; }
.comp-blush { fill: var(--rose); opacity: 0.38; }
.comp-eye { fill: var(--lamp); }
.comp-pupil { fill: var(--ink-950); }
.comp-glint { fill: var(--text); }
.comp-nose { fill: var(--rose); }
.comp-mouth { fill: none; stroke: var(--ink-800); stroke-width: 1.1; stroke-linecap: round; }
.comp-yawn { fill: var(--ink-900); opacity: 0; }
.comp-whiskers { fill: none; stroke: var(--text-faint); stroke-width: 0.8; stroke-linecap: round; }
.comp-closed, .comp-eyes-happy path { fill: none; stroke: var(--text-dim); stroke-width: 1.4; stroke-linecap: round; }
.comp-eyes-happy { opacity: 0; }
.comp-shadow { fill: var(--ink-950); opacity: 0.55; }
.comp-z { font: 600 9px var(--font-mono); fill: var(--lamp-soft); opacity: 0.75; }

/* poses: cross-fade like a dimmer */
.comp-pose { transition: opacity var(--t-slow) var(--ease); }
.comp-cat[data-pose='sit'] .comp-pose-sleep,
.comp-cat[data-pose='sleep'] .comp-pose-sit { opacity: 0; }

/* transform origins (viewBox units) */
.comp-pose-sit, .comp-body { transform-origin: 60px 88px; }
.comp-head { transform-origin: 60px 50px; transition: transform var(--t-med) var(--ease); }
.comp-tail { transform-origin: 76px 84px; }
.comp-eyes-open { transform-origin: 60px 36px; }
.comp-pose-sit .comp-ear-l { transform-origin: 49px 30px; }
.comp-pose-sit .comp-ear-r { transform-origin: 71px 30px; }
.comp-pose-sleep .comp-ear-l { transform-origin: 34px 64px; }
.comp-pose-sleep .comp-ear-r { transform-origin: 51px 62px; }
.comp-breath { transform-origin: 62px 89px; }
.comp-z { transform-box: fill-box; transform-origin: center; }

/* idle life */
.comp-cat[data-pose='sit'] .comp-tail { animation: comp-sway 6s var(--ease-in-out) infinite; }
.comp-cat[data-pose='sit'] .comp-eyes-open { animation: comp-blink 5.6s infinite; }
.comp-cat[data-pose='sleep'] .comp-breath { animation: comp-breathe 4.6s var(--ease-in-out) infinite; }
.comp-cat[data-pose='sleep'] .comp-z { animation: comp-z 4.8s var(--ease) infinite; opacity: 0; }
.comp-cat[data-pose='sleep'] .comp-z:nth-child(2) { animation-delay: 1.6s; }
.comp-cat[data-pose='sleep'] .comp-z:nth-child(3) { animation-delay: 3.2s; }

/* reactions */
.comp-cat.is-flick .comp-tail { animation: comp-flick 0.95s var(--ease); }
.comp-cat.is-swish .comp-tail { animation: comp-flick 1.4s var(--ease-in-out) 3; }
.comp-cat.is-twitch .comp-ear-r { animation: comp-twitch 0.5s var(--ease) 2; }
.comp-cat.is-lookup .comp-head { transform: rotate(-7deg) translateY(-1.5px); }
.comp-cat.is-stretch .comp-pose-sit { animation: comp-stretch 2.2s var(--ease-in-out); }
.comp-cat.is-stretch .comp-yawn { animation: comp-yawn 2.2s var(--ease-in-out); }
.comp-cat.is-stretch .comp-mouth { animation: comp-hide 2.2s var(--ease-in-out); }
.comp-cat.is-stretch .comp-eyes-open { animation: comp-squint 2.2s var(--ease-in-out); }
.comp-cat.is-walk { animation: comp-walk 7s var(--ease-in-out); }
.comp-cat.is-walk .comp-body, .comp-cat.is-walk .comp-head { animation: comp-bob 0.5s var(--ease-in-out) 14; }
.comp-cat.is-purr .comp-pose-sit .comp-body,
.comp-cat.is-purr .comp-breath { animation: comp-purr 0.11s linear 14; }
.comp-cat.is-purr .comp-head { transform: rotate(6deg); }
.comp-cat.is-purr .comp-eyes-open { opacity: 0; animation: none; }
.comp-cat.is-purr .comp-eyes-happy { opacity: 1; }

@keyframes comp-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes comp-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(0.1); } }
@keyframes comp-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 1.05); } }
@keyframes comp-z {
  0% { opacity: 0; transform: translate(-2px, 4px) scale(0.8); }
  25% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(6px, -10px) scale(1.1); }
}
@keyframes comp-flick { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 65% { transform: rotate(9deg); } }
@keyframes comp-twitch { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(14deg); } }
@keyframes comp-stretch {
  0%, 100% { transform: scale(1, 1); }
  35% { transform: scale(1.14, 0.84); }
  65% { transform: scale(0.96, 1.07); }
}
@keyframes comp-yawn { 0%, 25%, 75%, 100% { opacity: 0; } 35%, 60% { opacity: 1; } }
@keyframes comp-hide { 0%, 25%, 75%, 100% { opacity: 1; } 35%, 60% { opacity: 0; } }
@keyframes comp-squint { 0%, 25%, 75%, 100% { transform: scaleY(1); } 35%, 60% { transform: scaleY(0.15); } }
@keyframes comp-walk {
  0% { transform: translateX(0) scaleX(1); }
  44% { transform: translateX(92px) scaleX(1); }
  50% { transform: translateX(92px) scaleX(-1); }
  94% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes comp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.4px; } }
@keyframes comp-purr { 0%, 100% { translate: 0 0; } 50% { translate: 0.45px 0; } }

/* heart */
.comp-heart {
  position: absolute; left: 50%; bottom: 62%; width: 18px; height: 18px; margin-left: -9px; pointer-events: none;
  animation: comp-heart 1.4s var(--ease) forwards;
}
.comp-heart svg { width: 100%; height: 100%; fill: var(--rose); filter: drop-shadow(0 0 6px var(--rose-glow)); }
@keyframes comp-heart {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.6); }
  20% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--comp-drift, 0), -40px) scale(1.1); }
}

/* speech bubble (drift nudge) */
.comp-bubble {
  position: absolute; left: 4px; bottom: calc(100% + 6px);
  width: max-content; max-width: min(270px, calc(100vw - 48px));
  display: flex; align-items: flex-start; gap: var(--s-1);
  padding: 10px 6px 10px 14px; border-radius: var(--r-md);
  background: var(--glass-strong); border: 1px solid var(--glass-line-strong);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text);
  opacity: 0; transform: translateY(6px); filter: blur(4px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), filter var(--t-med) var(--ease), box-shadow var(--t-slow);
}
.comp-bubble::after {
  content: ''; position: absolute; left: 30px; bottom: -6px; width: 11px; height: 11px;
  background: inherit; border-right: 1px solid var(--glass-line-strong); border-bottom: 1px solid var(--glass-line-strong);
  transform: rotate(45deg);
}
.comp-bubble.is-in { opacity: 1; transform: none; filter: none; box-shadow: var(--shadow), 0 0 36px var(--lamp-glow); transition-duration: var(--t-slow); }
.comp-bubble[hidden] { display: none; }
.comp-bubble-text { padding-top: 2px; }
.comp-bubble-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-faint); }
.comp-bubble-x:hover { color: var(--text); background: rgba(243, 233, 216, 0.08); }
.comp-bubble-x svg { width: 14px; height: 14px; }

/* =====================================================================
 * Break ritual card
 * ===================================================================== */
.comp-ritual {
  position: fixed; z-index: var(--z-overlay);
  left: 50%; margin-left: calc((var(--left-w) - var(--right-w)) / 2);
  bottom: calc(var(--s-3) + var(--dock-h) + var(--s-4));
  width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - var(--dock-h) - 120px); overflow: auto;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--glass-strong);
  opacity: 0; transform: translate(-50%, 16px); filter: blur(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), filter var(--t-med) var(--ease), box-shadow var(--t-med);
}
.comp-ritual.is-in {
  opacity: 1; transform: translate(-50%, 0); filter: none;
  box-shadow: var(--shadow), 0 0 70px var(--lamp-glow);
  transition-duration: var(--t-slow);
}
/* A dock panel opened during a break (status, reactions, radio…) must not sit under the card. */
body:has(.popover.open) .comp-ritual.is-in { opacity: 0; visibility: hidden; pointer-events: none; }
.comp-ritual[hidden] { display: none; }
.comp-ritual-head { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); }
.comp-ritual-head .comp-iconbtn:first-child:not(.comp-ritual-x) { margin-left: -10px; }
.comp-ritual-title { flex: 1; }
.comp-ritual-x { margin-right: -6px; }
.comp-ritual-body { display: flex; flex-direction: column; gap: var(--s-3); }
.comp-ritual-foot { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; }

.comp-choices { display: grid; gap: var(--s-2); }
.comp-choice {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(243, 233, 216, 0.04); border: 1px solid var(--glass-line); color: var(--text);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast), box-shadow var(--t-med);
}
.comp-choice:hover { background: rgba(255, 179, 92, 0.08); border-color: color-mix(in srgb, var(--lamp) 45%, transparent); box-shadow: 0 0 24px rgba(255, 179, 92, 0.12); }
.comp-choice-icon {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
  background: rgba(255, 179, 92, 0.12); color: var(--lamp-soft);
}
.comp-choice-icon svg { width: 20px; height: 20px; }
.comp-choice-text { display: flex; flex-direction: column; min-width: 0; }
.comp-choice-label { font-weight: 500; }
.comp-choice-sub { font-size: var(--fs-xs); color: var(--text-dim); }

/* breathe */
.comp-breathe { align-items: center; text-align: center; padding-bottom: var(--s-1); }
.comp-orb-wrap { padding: var(--s-2) 0; }
.comp-orb { position: relative; width: 148px; height: 148px; --comp-orb-scale: 0.5; }
.comp-orb::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--lamp-soft) 30%, transparent);
}
.comp-orb-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--lamp-soft), var(--lamp) 52%, var(--lamp-deep));
  box-shadow: 0 0 34px var(--lamp-glow), 0 0 90px var(--lamp-glow);
  transform: scale(var(--comp-orb-scale));
  transition: transform 4s var(--ease-in-out), opacity var(--t-slow);
}
.comp-orb.is-hold .comp-orb-core { animation: comp-hold 4s var(--ease-in-out); }
.comp-orb.is-done .comp-orb-core { transform: scale(0.72); transition-duration: var(--t-slow); }
@keyframes comp-hold { 50% { box-shadow: 0 0 44px var(--lamp-glow), 0 0 120px var(--lamp-glow); } }
.comp-breath-cue {
  margin: 0; font-family: var(--font-display); font-variation-settings: 'SOFT' 100;
  font-size: var(--fs-xl); line-height: 1.2; min-height: 1.2em;
}
.comp-breath-count { margin: -6px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--lamp-soft); min-height: 1.5em; }
.comp-breath-cycle { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: 0.04em; }

/* stretch */
.comp-stretch .eyebrow { margin: 0; }
.comp-stretch-name { margin: -4px 0 0; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 500; font-size: var(--fs-xl); line-height: 1.2; }
.comp-stretch-how { margin: 0; color: var(--text-dim); min-height: 4.5em; }
.comp-stretch-nav { display: flex; align-items: center; justify-content: space-between; }
.comp-stretch-nav .comp-iconbtn { border-color: var(--glass-line-strong); }
.comp-dots { display: flex; gap: 6px; }
.comp-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--glass-line-strong); transition: background var(--t-med), box-shadow var(--t-med); }
.comp-dots span.is-on { background: var(--lamp); box-shadow: 0 0 8px var(--lamp-glow); }
.comp-stretch .comp-linkbtn { align-self: center; }

/* hydrate */
.comp-hydrate { align-items: flex-start; }
.comp-hydrate-count { margin: 0; color: var(--text-dim); }
.comp-hydrate-count .comp-num { font-size: var(--fs-2xl); color: var(--lamp-soft); line-height: 1; margin-right: 2px; }
.comp-glasses { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.comp-glass { width: 26px; height: 26px; color: var(--text-faint); transition: color var(--t-med), filter var(--t-med); }
.comp-glass svg { width: 100%; height: 100%; }
.comp-glass.is-full { color: var(--lamp); filter: drop-shadow(0 0 5px var(--lamp-glow)); }
.comp-glass.is-full svg path:first-child { fill: color-mix(in srgb, var(--lamp) 22%, transparent); }
.comp-glass-more { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--lamp-soft); margin-left: 2px; }
.comp-hydrate-msg { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.comp-hydrate-add { align-self: stretch; }

/* =====================================================================
 * "Your night" popover (lives in overlays, anchored to the dock button)
 * ===================================================================== */
.comp-night-btn svg { width: 20px; height: 20px; }
.comp-pop { position: fixed; left: auto; min-width: 0; padding: var(--s-4) var(--s-4) var(--s-3); }
.comp-pop:focus { outline: none; }
.comp-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.comp-pop-date { font-size: var(--fs-xs); color: var(--text-faint); }
.comp-pop-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.comp-big {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); line-height: 1.1;
  color: var(--lamp-soft); text-shadow: 0 0 24px var(--lamp-glow);
}
.comp-sub { font-size: var(--fs-xs); color: var(--text-dim); }
.comp-streak {
  display: flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-line-strong); color: var(--text-faint); font-size: var(--fs-xs);
}
.comp-flame { width: 18px; height: 18px; display: grid; }
.comp-flame svg { width: 100%; height: 100%; }
.comp-streak-n { font-size: var(--fs-md); color: var(--text-dim); }
.comp-streak.is-lit { border-color: color-mix(in srgb, var(--lamp) 50%, transparent); color: var(--text-dim); box-shadow: 0 0 22px rgba(255, 179, 92, 0.14); }
.comp-streak.is-lit .comp-flame { color: var(--lamp); filter: drop-shadow(0 0 6px var(--lamp-glow)); }
.comp-streak.is-lit .comp-streak-n { color: var(--lamp-soft); }
.comp-hint { margin: var(--s-2) 0 var(--s-2); font-size: var(--fs-xs); color: var(--text-dim); }

.comp-chart { width: 100%; height: auto; margin: var(--s-1) 0 var(--s-2); overflow: visible; }
.comp-chart-base { stroke: var(--glass-line-strong); stroke-width: 1; }
.comp-chart-goal { stroke: color-mix(in srgb, var(--lamp-soft) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.comp-chart-goal-label { font: 500 8px var(--font-mono); fill: var(--text-faint); }
.comp-bar { fill: var(--lamp); opacity: 0.45; }
.comp-bar.is-met { opacity: 0.72; }
.comp-bar.is-today { opacity: 1; filter: drop-shadow(0 0 6px var(--lamp-glow)); }
.comp-bar-empty { fill: var(--glass-line-strong); }
.comp-chart-val { font: 500 9px var(--font-mono); font-variant-numeric: tabular-nums; fill: var(--text-dim); }
.comp-chart-day { font: 400 9px var(--font-ui); fill: var(--text-faint); }
.comp-chart-day.is-today { fill: var(--lamp-soft); font-weight: 600; }

.comp-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); border-top: 1px solid var(--glass-line); padding-top: var(--s-3); }
.comp-mini-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: relative; }
.comp-mini-stat .comp-num { font-size: var(--fs-lg); line-height: 1.2; }
.comp-mini-label { font-size: var(--fs-xs); color: var(--text-faint); }
.comp-plus {
  position: absolute; right: 0; top: 0; min-width: 32px; height: 26px; padding: 0 8px;
  border-radius: var(--r-pill); border: 1px solid var(--glass-line-strong); background: transparent; color: var(--lamp-soft);
  font: 500 var(--fs-xs) var(--font-mono);
}
.comp-plus:hover { background: rgba(255, 179, 92, 0.12); border-color: color-mix(in srgb, var(--lamp) 50%, transparent); }

/* =====================================================================
 * Recap postcard modal
 * ===================================================================== */
.comp-recap { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-4); }
.comp-recap[hidden] { display: none; }
.comp-recap-scrim {
  position: absolute; inset: 0; background: rgba(7, 9, 15, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.comp-recap-card {
  position: relative; width: min(720px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: var(--s-5); background: var(--glass-strong);
  opacity: 0; transform: translateY(12px) scale(0.99); filter: blur(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), filter var(--t-med) var(--ease), box-shadow var(--t-slow);
}
.comp-recap.is-in .comp-recap-scrim { opacity: 1; transition-duration: var(--t-slow); }
.comp-recap.is-in .comp-recap-card {
  opacity: 1; transform: none; filter: none; transition-duration: var(--t-slow);
  box-shadow: var(--shadow), 0 0 90px rgba(255, 179, 92, 0.18);
}
.comp-recap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.comp-recap-head .eyebrow { margin: 0 0 2px; }
.comp-recap-title { font-size: var(--fs-xl); }
.comp-postcard-frame {
  border-radius: var(--r-md); overflow: hidden; background: var(--ink-850);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--glass-line-strong), 0 0 60px rgba(255, 179, 92, 0.12);
  transform: rotate(-0.8deg);
}
.comp-postcard { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.comp-recap-desc { margin: var(--s-4) 0 var(--s-3); color: var(--text-dim); font-size: var(--fs-sm); text-align: center; }
.comp-recap-desc .comp-num { color: var(--lamp-soft); }
.comp-recap-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; align-items: center; }
.comp-recap-actions .btn, .comp-recap-actions .btn-ghost { display: inline-flex; align-items: center; gap: var(--s-2); }
.comp-recap-actions svg { width: 18px; height: 18px; }
.comp-recap-actions .btn-ghost { padding: 10px 16px; font-size: var(--fs-md); }
.comp-recap-leave { color: var(--text-dim); }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 900px) {
  .comp-perch { left: var(--s-4); bottom: calc(var(--s-2) + var(--dock-h) - 5px); width: 76px; }
  .comp-cat { width: 76px; }
  /* Stacked layout scrolls under a fixed cat: only show Mochi while she has something to say. */
  body[data-view='room'] .comp-perch:not(:has(.comp-bubble:not([hidden]))) { opacity: 0; visibility: hidden; pointer-events: none; }
  body[data-view='room']:has(.comp-perch:not(.is-away)) .rtc-stage { padding-bottom: 2px; }
  /* Break card: a short sheet sitting right on the dock, clear of the timer ring and its controls. */
  .comp-ritual {
    margin-left: 0;
    bottom: calc(var(--s-2) + var(--dock-h) + var(--s-2));
    max-height: min(42dvh, 340px);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  }
  .comp-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comp-choice { flex-direction: column; text-align: center; gap: var(--s-1); padding: 8px 6px; }
  .comp-choice-sub { display: none; }
  .comp-ritual-foot { display: none; }
}
@media (max-width: 480px) {
  .comp-recap { padding: var(--s-2); }
  .comp-recap-desc { font-size: var(--fs-md); }
  .comp-recap-card { padding: var(--s-4); }
  .comp-recap-actions > * { flex: 1 1 100%; justify-content: center; }
  .comp-postcard-frame { transform: none; }
}

/* =====================================================================
 * Reduced motion: static poses, no drifting, no transitions
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .comp-root *, .comp-root *::before, .comp-root *::after,
  .comp-night-btn { animation: none !important; transition: none !important; }
  .comp-cat[data-pose='sleep'] .comp-z { opacity: 0.7; }
  .comp-ritual, .comp-bubble, .comp-recap-card { filter: none; transform: translateX(-50%); }
  .comp-bubble, .comp-recap-card { transform: none; }
  .comp-orb-core { transform: scale(0.8); opacity: calc(0.35 + var(--comp-orb-scale) * 0.65); }
  .comp-orb.is-done .comp-orb-core { transform: scale(0.8); }
  .comp-heart { opacity: 0.9; transform: translateY(-14px); }
}