/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --bg-overlay:        rgba(5, 8, 14, 0.48);
  --panel:             rgba(16, 24, 36, 0.58);
  --panel-border:      rgba(255, 255, 255, 0.22);
  --panel-border-h:    rgba(255, 255, 255, 0.36);
  --text:              #f0f4fc;
  --muted:             #b8cce4;
  --accent:            #ffc96b;
  --accent-glow:       rgba(255, 201, 107, 0.35);
  --user-bubble:       rgba(255, 201, 107, 0.22);
  --user-border:       rgba(255, 218, 160, 0.5);
  --assistant-bubble:  rgba(220, 235, 255, 0.10);
  --assistant-border:  rgba(200, 220, 255, 0.18);
  --shadow:            0 16px 48px rgba(0,0,0,0.44), 0 2px 8px rgba(0,0,0,0.22);
  --shadow-sm:         0 4px 16px rgba(0,0,0,0.28);
  --radius-xl:         24px;
  --radius-lg:         20px;
  --radius-md:         16px;
  --radius-sm:         12px;
  --fur-light:         #f9e2c2;
  --fur-mid:           #ebca9a;
  --fur-dark:          #d9b07e;
  --fur-deep:          #c89868;
  --font-display:      "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body:         "Quicksand", "Segoe UI", sans-serif;
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:          cubic-bezier(0.25, 0.8, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: radial-gradient(140% 110% at 0% 0%, #2e4260 0%, #151f2e 48%, #0c1520 100%);
  overflow: hidden;
}

/* ── Background ──────────────────────────────────────────────── */
.app-bg { position: fixed; inset: 0; z-index: -2; }

.bg-image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(1.1) contrast(1.05) brightness(1.06);
}

.bg-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(165deg, rgba(8,12,20,0.42), var(--bg-overlay)),
    radial-gradient(90% 88% at 50% 4%, rgba(28,42,58,0.14), rgba(12,18,28,0.7));
}

.bg-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.028;
  pointer-events: none;
}

.light-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(3px);
  mix-blend-mode: screen;
}
.orb-a {
  width: min(62vw,480px); height: min(62vw,480px);
  left: -14%; top: -12%; opacity: 0.46;
  background: radial-gradient(circle, rgba(255,195,90,0.46) 0%, transparent 68%);
  animation: driftA 18s ease-in-out infinite alternate;
}
.orb-b {
  width: min(56vw,440px); height: min(56vw,440px);
  right: -16%; bottom: -16%; opacity: 0.38;
  background: radial-gradient(circle, rgba(100,170,255,0.38) 0%, transparent 72%);
  animation: driftB 22s ease-in-out infinite alternate;
}
body.no-bg-image .bg-image { display: none; }

/* ── Shell ───────────────────────────────────────────────────── */
.app-shell {
  max-width: 900px;
  height: 100dvh;
  margin-inline: auto;
  padding: calc(0.65rem + env(safe-area-inset-top)) 0.75rem calc(0.7rem + env(safe-area-inset-bottom));
  display: grid;
  gap: 0.65rem;
  grid-template-rows: auto 1fr auto auto;
  animation: shellIn 480ms cubic-bezier(0.2, 0.86, 0.3, 1) both;
}

.glass {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow);
  transition: border-color 160ms var(--ease-out);
}
.glass:hover { border-color: var(--panel-border-h); }

/* ── Top bar ─────────────────────────────────────────────────── */
.top-bar {
  border-radius: var(--radius-lg);
  min-height: 60px;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand-wrap h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #ffe8b0 0%, var(--accent) 55%, #ffaa55 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-wrap p {
  margin: 0.14rem 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 500;
}

.top-bar-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.status-badge {
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(160,255,180,0.35);
  background: rgba(140,255,170,0.13);
  color: #d8fff0;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  letter-spacing: 0.02em;
}
.status-badge::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6effa0;
  box-shadow: 0 0 6px #6effa0;
  animation: pulseDot 2.4s ease-in-out infinite;
}

.clear-btn {
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: var(--muted);
  font: 600 0.78rem var(--font-body);
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
  letter-spacing: 0.02em;
}
.clear-btn:hover {
  background: rgba(255,100,100,0.18);
  border-color: rgba(255,100,100,0.4);
  color: #ffcccc;
}
.clear-btn:active { transform: scale(0.97); }

/* ── Chat panel ──────────────────────────────────────────────── */
.chat-panel {
  position: relative;
  border-radius: var(--radius-lg);
  min-height: 0;
  overflow: hidden;
}

.chat-panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 35% at 50% 0%, rgba(255,200,100,0.06), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Messages ────────────────────────────────────────────────── */
.messages {
  height: 100%;
  overflow-y: auto;
  padding: 1rem 0.9rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  scroll-behavior: smooth;
}
.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; }

.message {
  position: relative;
  max-width: 86%;
  width: fit-content;
  border-radius: var(--radius-md);
  padding: 0.64rem 0.82rem 0.52rem;
  line-height: 1.44;
  font-size: 0.95rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  animation: bubbleIn 280ms var(--ease-spring) both;
  animation-delay: var(--delay, 0ms);
}
.message p { margin: 0; white-space: pre-wrap; }

.message.assistant {
  align-self: flex-start;
  background: var(--assistant-bubble);
  border: 1px solid var(--assistant-border);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
}
.message.user {
  align-self: flex-end;
  background: var(--user-bubble);
  border: 1px solid var(--user-border);
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
  box-shadow: 0 2px 12px rgba(255,190,80,0.12);
}

.msg-time {
  display: block;
  margin-top: 0.26rem;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 200ms ease;
  user-select: none;
}
.message:hover .msg-time { opacity: 1; }
.message.user .msg-time { text-align: right; }

/* ── Typing indicator ────────────────────────────────────────── */
.typing-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.72rem 1rem;
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  background: var(--assistant-bubble);
  border: 1px solid var(--assistant-border);
  animation: bubbleIn 200ms ease both;
}
.typing-indicator span {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
  animation: typingDot 1.1s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.32s; }

/* ═══════════════════════════════════════════════════════════════
   FULL BODY CAT + MOOD SYSTEM
═══════════════════════════════════════════════════════════════ */

.peek-cat {
  --pupil-x: 0px;
  --pupil-y: 0px;
  position: absolute;
  right: 1.1rem;
  bottom: 0;
  width: 128px;
  z-index: 4;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.42));
}

.peek-cat.touching {
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.5)) saturate(1.08) brightness(1.06);
}

/* Floating mood emoji badge */
.mood-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.25rem;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.mood-badge.animating {
  animation: badgeFloat 2.2s ease-out forwards;
}

/* ── cat-figure: the whole body as one animated unit ── */
.cat-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ── Tail ── */
.cat-tail {
  position: absolute;
  right: 4px;
  bottom: 12px;
  width: 14px;
  height: 78px;
  background: linear-gradient(180deg, var(--fur-mid) 0%, var(--fur-deep) 100%);
  border-radius: 7px 7px 5px 5px;
  transform-origin: bottom center;
  z-index: 0;
}
/* Fluffy tail tip */
.cat-tail::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 16px;
  border-radius: 50%;
  background: var(--fur-deep);
}

/* ── Head wrap (ears + head) ── */
.cat-head-wrap {
  position: relative;
  width: 104px;
  flex-shrink: 0;
  z-index: 2;
}

.cat-ear {
  position: absolute;
  top: 2px;
  width: 27px; height: 31px;
  border-radius: 6px 20px 4px 18px;
  background: linear-gradient(145deg, #eac59a 0%, #c89668 100%);
  border: 1px solid rgba(255,240,215,0.42);
}
.cat-ear::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 4px 12px 3px 12px;
  background: rgba(254,212,201,0.58);
}
.ear-left  { left: 10px;  transform-origin: bottom center; transform: rotate(-16deg); }
.ear-right { right: 10px; transform-origin: bottom center; transform: rotate(14deg) scaleX(-1); }

.cat-head {
  position: relative;
  margin: 20px auto 0;
  width: 90px; height: 76px;
  border-radius: 46% 46% 40% 40%;
  background:
    radial-gradient(130% 120% at 34% 16%, rgba(255,255,255,0.36), transparent),
    linear-gradient(155deg, var(--fur-light) 0%, var(--fur-mid) 48%, var(--fur-dark) 100%);
  border: 1px solid rgba(255,241,221,0.5);
  z-index: 2;
  transform-origin: top center;
}

.cat-eye {
  position: absolute;
  top: 25px;
  width: 17px; height: 15px;
  border-radius: 999px;
  background: #f8faff;
  overflow: hidden;
  animation: catBlink 6.5s ease-in-out infinite;
}
.eye-left  { left: 18px; }
.eye-right { right: 18px; }

.cat-pupil {
  position: absolute;
  top: 3px; left: 5px;
  width: 7px; height: 9px;
  border-radius: 50%;
  background: #1a2535;
  transform: translate(var(--pupil-x), var(--pupil-y));
  transition: transform 150ms ease-out;
}
.cat-pupil::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
}

.cat-nose {
  position: absolute;
  left: 50%; top: 39px;
  width: 11px; height: 9px;
  transform: translateX(-50%);
  border-radius: 70% 70% 85% 85%;
  background: linear-gradient(160deg, #efa0a0, #dd7777);
}

.cat-mouth {
  position: absolute;
  left: 50%; top: 47px;
  width: 18px; height: 10px;
  transform: translateX(-50%);
}
.cat-mouth::before, .cat-mouth::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px; height: 8px;
  border-bottom: 2px solid rgba(88,58,46,0.7);
  border-radius: 0 0 12px 12px;
}
.cat-mouth::before { left: 0; }
.cat-mouth::after  { right: 0; }

.cat-whiskers {
  position: absolute;
  top: 43px;
  width: 24px; height: 16px;
}
.cat-whiskers::before, .cat-whiskers::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid rgba(255,244,226,0.82);
}
.cat-whiskers::before { top: 4px; }
.cat-whiskers::after  { top: 10px; }
.whiskers-left  { left: -14px;  transform: rotate(-6deg); }
.whiskers-right { right: -14px; transform: rotate(6deg) scaleX(-1); }

/* ── Body ── */
.cat-body {
  position: relative;
  width: 80px; height: 86px;
  margin-top: -12px;
  border-radius: 44% 44% 42% 42%;
  background:
    radial-gradient(80% 60% at 38% 24%, rgba(255,255,255,0.26), transparent),
    linear-gradient(165deg, #f2daac 0%, #e8c38a 45%, var(--fur-dark) 100%);
  border: 1px solid rgba(255,240,210,0.4);
  z-index: 1;
  flex-shrink: 0;
  transform-origin: top center;
}

/* Belly lighter spot */
.cat-belly {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 42px;
  border-radius: 50%;
  background: rgba(255,248,234,0.42);
}

/* ── Paws ── */
.cat-paws {
  display: flex;
  gap: 10px;
  margin-top: -5px;
  z-index: 2;
}
.paw {
  width: 28px; height: 15px;
  border-radius: 50%;
  background: linear-gradient(165deg, #eac590 0%, #cfa060 100%);
  border: 1px solid rgba(255,238,208,0.45);
  position: relative;
}
/* Paw knuckle ridge */
.paw::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 7px;
  background: rgba(210,162,88,0.65);
  border-radius: 4px 4px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOOD SYSTEM — base defaults
═══════════════════════════════════════════════════════════════ */
.cat-figure  { animation: baseBob 4s ease-in-out infinite; }
.cat-tail    { animation: tailSway 2.5s ease-in-out infinite; }

/* ── LAZY mood 💤 ── */
/* Heavy, droopy, slow — eyes half-closed, head nods, tail barely moves */
.mood-lazy .cat-figure   { animation: lazyDroop 5.5s ease-in-out infinite; }
.mood-lazy .cat-tail     { animation: lazyTail 7s ease-in-out infinite; }
.mood-lazy .cat-head     { animation: lazyNod 5.5s ease-in-out infinite; }
.mood-lazy .cat-eye      { animation: lazyEye 4s ease-in-out infinite; transform-origin: center; }
.mood-lazy .ear-left     { animation: lazyEarL 6s ease-in-out infinite; }
.mood-lazy .ear-right    { animation: lazyEarR 6s ease-in-out infinite; }
.mood-lazy .cat-body     { animation: lazySag 5.5s ease-in-out infinite; }

/* ── HAPPY mood ✨ ── */
/* Bouncy, fast, energetic — tail wags, ears perk, whole body springs */
.mood-happy .cat-figure  { animation: happyBounce 0.7s cubic-bezier(0.36,0.07,0.19,0.97) infinite; }
.mood-happy .cat-tail    { animation: happyWag 0.28s ease-in-out infinite; }
.mood-happy .ear-left    { animation: happyEarL 0.7s ease-in-out infinite; }
.mood-happy .ear-right   { animation: happyEarR 0.7s ease-in-out infinite; }
.mood-happy .cat-eye     { animation: happyEye 2s ease-in-out infinite; }
.mood-happy .cat-body    { animation: happyBody 0.7s ease-in-out infinite; }

/* ── SITTING mood 🐾 ── */
/* Calm, composed, gentle breath — slow tail sweep, peaceful blink */
.mood-sitting .cat-figure { animation: sittingBreath 4.5s ease-in-out infinite; }
.mood-sitting .cat-tail   { animation: sittingTail 3.8s ease-in-out infinite; }
.mood-sitting .cat-eye    { animation: catBlink 5s ease-in-out infinite; }

/* ── CURIOUS mood 👀 ── */
/* Head tilts, tail points up stiffly, whole figure leans */
.mood-curious .cat-figure { animation: curiousFigure 3s ease-in-out infinite; }
.mood-curious .cat-head   { animation: curiousHead 3s ease-in-out infinite; }
.mood-curious .cat-tail   { animation: curiousTail 2s ease-in-out infinite; }
.mood-curious .cat-eye    { animation: curiousEye 3s ease-in-out infinite; }
.mood-curious .ear-left   { animation: curiousEarL 3s ease-in-out infinite; }

/* ── Message reaction (overrides mood temporarily) ── */
.peek-cat.cat-react .cat-figure { animation: reactPop 760ms var(--ease-spring) !important; }

.peek-cat.touching .cat-head  { animation: touchNod 170ms ease-in-out infinite !important; }
.peek-cat.touching .cat-tail  { animation: touchTailWag 220ms ease-in-out infinite !important; }
.peek-cat.petting .cat-body   { animation: petPurr 340ms ease-in-out infinite !important; }
.peek-cat.petting .cat-paws   { animation: pawShuffle 240ms ease-in-out infinite !important; }

.touch-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.14rem;
  line-height: 1;
  pointer-events: none;
  z-index: 12;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  animation: touchPop 900ms ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════
   MOOD KEYFRAMES
═══════════════════════════════════════════════════════════════ */

/* Base defaults */
@keyframes baseBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes tailSway {
  0%, 100% { transform: rotate(-14deg); }
  50%       { transform: rotate(14deg); }
}

/* ── LAZY ── */
@keyframes lazyDroop {
  0%          { transform: translateY(0) rotate(0deg); }
  20%         { transform: translateY(3px) rotate(-2deg); }
  50%         { transform: translateY(6px) rotate(-4deg); }
  80%         { transform: translateY(3px) rotate(-2deg); }
  100%        { transform: translateY(0) rotate(0deg); }
}
@keyframes lazyNod {
  0%, 100%    { transform: rotate(0deg) translateY(0); }
  30%         { transform: rotate(-8deg) translateY(5px); }
  60%         { transform: rotate(-5deg) translateY(4px); }
}
@keyframes lazyEye {
  /* Eyes stuck half-closed, occasional slow full blink */
  0%, 100%    { transform: scaleY(0.38); }
  45%, 55%    { transform: scaleY(0.06); }
  48%, 52%    { transform: scaleY(0.04); }
}
@keyframes lazyTail {
  0%, 100%    { transform: rotate(-5deg); }
  50%         { transform: rotate(8deg); }
}
@keyframes lazyEarL {
  0%, 100%    { transform: rotate(-16deg) translateY(0); }
  50%         { transform: rotate(-10deg) translateY(3px); }
}
@keyframes lazyEarR {
  0%, 100%    { transform: rotate(14deg) scaleX(-1) translateY(0); }
  50%         { transform: rotate(10deg) scaleX(-1) translateY(3px); }
}
@keyframes lazySag {
  0%, 100%    { transform: scaleY(1); }
  50%         { transform: scaleY(1.04) translateY(3px); }
}

/* ── HAPPY ── */
@keyframes happyBounce {
  0%, 100%    { transform: translateY(0) scaleY(1) scaleX(1); }
  30%         { transform: translateY(-20px) scaleY(1.08) scaleX(0.94); }
  55%         { transform: translateY(-10px) scaleY(1.04) scaleX(0.97); }
  70%         { transform: translateY(2px) scaleY(0.96) scaleX(1.03); }
}
@keyframes happyWag {
  0%, 100%    { transform: rotate(-35deg); }
  50%         { transform: rotate(35deg); }
}
@keyframes happyEarL {
  0%, 100%    { transform: rotate(-16deg) translateY(0); }
  40%         { transform: rotate(-28deg) translateY(-6px); }
}
@keyframes happyEarR {
  0%, 100%    { transform: rotate(14deg) scaleX(-1) translateY(0); }
  40%         { transform: rotate(26deg) scaleX(-1) translateY(-6px); }
}
@keyframes happyEye {
  /* Wide, bright, frequent happy blinks */
  0%, 85%, 100% { transform: scaleY(1.1); }
  88%, 92%      { transform: scaleY(0.08); }
}
@keyframes happyBody {
  0%, 100%    { transform: scaleX(1); }
  30%         { transform: scaleX(1.06); }
  70%         { transform: scaleX(0.97); }
}

/* ── SITTING ── */
@keyframes sittingBreath {
  0%, 100%    { transform: translateY(0) scaleY(1); }
  35%         { transform: translateY(-3px) scaleY(1.015); }
  65%         { transform: translateY(1px) scaleY(0.992); }
}
@keyframes sittingTail {
  0%          { transform: rotate(-22deg); }
  50%         { transform: rotate(-4deg); }
  100%        { transform: rotate(-22deg); }
}

/* ── CURIOUS ── */
@keyframes curiousFigure {
  0%, 100%    { transform: rotate(0deg) translateX(0); }
  25%         { transform: rotate(-5deg) translateX(-3px); }
  60%         { transform: rotate(4deg) translateX(2px); }
}
@keyframes curiousHead {
  0%, 60%, 100% { transform: rotate(0deg); }
  20%           { transform: rotate(-16deg); }
  40%           { transform: rotate(10deg); }
}
@keyframes curiousTail {
  /* Tail points up, quivers */
  0%, 100%    { transform: rotate(-70deg); }
  50%         { transform: rotate(-62deg); }
}
@keyframes curiousEye {
  /* Extra-wide, alert eyes */
  0%, 100%    { transform: scaleY(1.15) scaleX(1.08); }
  50%         { transform: scaleY(1.2) scaleX(1.1); }
}
@keyframes curiousEarL {
  0%, 100%    { transform: rotate(-16deg); }
  40%         { transform: rotate(-26deg) translateY(-5px); }
}

/* ── Message reaction ── */
@keyframes reactPop {
  0%          { transform: translateY(0) scale(1) rotate(0deg); }
  30%         { transform: translateY(-18px) scale(1.06) rotate(-3deg); }
  65%         { transform: translateY(-8px) scale(1.02) rotate(2deg); }
  100%        { transform: translateY(0) scale(1) rotate(0deg); }
}

/* ── Mood badge float ── */
@keyframes touchNod {
  0%, 100%    { transform: rotate(0deg) translateY(0); }
  50%         { transform: rotate(-7deg) translateY(1px); }
}

@keyframes touchTailWag {
  0%, 100%    { transform: rotate(-30deg); }
  50%         { transform: rotate(28deg); }
}

@keyframes petPurr {
  0%, 100%    { transform: scale(1) translateY(0); }
  50%         { transform: scale(1.03) translateY(-2px); }
}

@keyframes pawShuffle {
  0%, 100%    { transform: translateX(0); }
  50%         { transform: translateX(-3px); }
}

@keyframes touchPop {
  0%          { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  15%         { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  100%        { opacity: 0; transform: translate(-50%, -90%) scale(0.92); }
}

@keyframes badgeFloat {
  0%          { transform: translateX(-50%) translateY(0); opacity: 1; }
  70%         { transform: translateX(-50%) translateY(-32px); opacity: 1; }
  100%        { transform: translateX(-50%) translateY(-42px); opacity: 0; }
}

/* Cat blink (base) */
@keyframes catBlink {
  0%, 88%, 100%   { transform: scaleY(1); }
  90%, 95%        { transform: scaleY(0.10); }
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSER
═══════════════════════════════════════════════════════════════ */
.composer {
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.composer-row { display: flex; align-items: flex-end; gap: 0.5rem; }

#chat-input {
  flex: 1;
  min-height: 44px; max-height: 160px;
  resize: none;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  background: rgba(6,10,18,0.36);
  color: var(--text);
  padding: 0.6rem 0.72rem;
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.38;
  overflow-y: hidden;
  transition: border-color 160ms, box-shadow 160ms;
}
#chat-input::placeholder { color: rgba(180,204,232,0.7); }
#chat-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

#send-button {
  min-height: 44px; min-width: 72px;
  border: 1px solid rgba(255,210,128,0.7);
  border-radius: var(--radius-sm);
  background: rgba(255,200,100,0.2);
  color: #ffe8b0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 160ms, background 160ms, box-shadow 160ms;
  position: relative;
  overflow: hidden;
}
#send-button::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}
#send-button:hover {
  background: rgba(255,200,100,0.32);
  box-shadow: 0 0 14px var(--accent-glow);
}
#send-button:active { transform: scale(0.97) translateY(1px); }
#send-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes sendPulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  60%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.send-pulse { animation: sendPulse 400ms ease-out; }

.composer-meta { display: flex; justify-content: flex-end; padding-inline: 0.2rem; }
#char-count {
  font-size: 0.72rem; font-weight: 600;
  color: rgba(180,205,235,0.45);
  letter-spacing: 0.02em;
  transition: color 160ms;
}
#char-count.warn { color: rgba(255,160,60,0.85); }

/* ── Site meta ───────────────────────────────────────────────── */
.site-meta { text-align: center; padding-bottom: max(0.15rem, env(safe-area-inset-bottom)); }
.site-meta p {
  margin: 0;
  font-size: 0.76rem; font-weight: 600;
  color: rgba(244,247,251,0.7);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  letter-spacing: 0.02em;
}

.site-credit {
  margin-top: 0.22rem !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(255, 214, 150, 0.84) !important;
}

/* ── Accessibility ───────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.noscript-note {
  position: fixed; left: 50%; bottom: 0.8rem;
  transform: translateX(-50%);
  margin: 0; padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(10,13,18,0.85);
  color: #f7f9ff; font-size: 0.84rem;
}

/* ── Shell & bubble animations ───────────────────────────────── */
@keyframes shellIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
  40%           { transform: translateY(-5px); opacity: 1; }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px #6effa0; }
  50%      { opacity: 0.5; box-shadow: 0 0 2px #6effa0; }
}
@keyframes driftA {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(28px,22px,0); }
}
@keyframes driftB {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-22px,-26px,0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  .app-shell { padding-inline: 1rem; gap: 0.8rem; }
  .messages  { padding: 1rem 1.1rem 6rem; }
  .message   { max-width: 76%; font-size: 1rem; }
  .peek-cat  { width: 138px; right: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}