/* Cats skin — port of Design/UI-Prototype/skin-cats.jsx to the v1 contract.
   Six poses ship as separate inline <svg>s in index.html (sleep, sit, beg, think, play, hiss);
   this stylesheet hides all but the one matching `body[data-mood]`. The fur colour comes from
   `session.colorHue` bucketed into a 6-entry palette by cats.js, exposed as --fur with
   derived --fur-dark, --fur-light, --fur-stripe via HSL adjustments inside JS.

   Theme handling: --caption, --caption-dim, --stage-bg, --stage-border, --floor-line are all
   written from cats.js on every init/theme message based on theme.isDark + theme.foreground.
   The defaults below are the dark-mode values so a skin previewed without a host message
   (authoring tool, raw browser) still looks reasonable. */
:root {
  --fur: #d9b48a;
  --fur-dark: #b08f6a;
  --fur-light: #ecd9bc;
  --fur-stripe: #8a7150;
  --stage-bg: rgba(255, 255, 255, 0.04);
  --stage-border: rgba(255, 255, 255, 0.06);
  --floor-line: rgba(255, 255, 255, 0.08);
  --caption: #ffffff;
  --caption-dim: rgba(230, 236, 242, 0.5);
  --status-color: rgba(230, 236, 242, 0.5);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--caption);
  font-family: Poppins, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}

.cats {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 6px 4px 6px;
  box-sizing: border-box;
}

.bubble {
  position: absolute;
  top: 0;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
  text-transform: uppercase;
  white-space: nowrap;
}

.bubble[hidden] { display: none; }

/* The beg bubble's contrast is theme-flipped: in dark mode a white pill on dark stage is
   striking; in light mode the same pill disappears, so we invert it via [data-theme="light"]. */
body[data-mood="beg"]  .bubble { background: #ffffff; color: #123456; }
body[data-mood="hiss"] .bubble { background: #cc1f1f; color: #ffffff; }
body[data-theme="light"][data-mood="beg"] .bubble { background: #1a1a1a; color: #ffffff; }

.stage {
  position: relative;
  flex: 1 1 auto;
  background: var(--stage-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--stage-border);
  min-height: 0;
}

.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 1px;
  background: var(--floor-line);
}

.cat {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 90px;
  height: 70px;
}

.pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: visible;
}

body[data-mood="sleep"] .pose-sleep { display: block; }
body[data-mood="sit"]   .pose-sit   { display: block; }
body[data-mood="beg"]   .pose-beg   { display: block; }
body[data-mood="think"] .pose-think { display: block; }
body[data-mood="play"]  .pose-play  { display: block; }
body[data-mood="hiss"]  .pose-hiss  { display: block; }

/* Per-mood motion */
body[data-mood="play"]  .pose-play  { animation: cats-bob   0.6s ease-in-out infinite; }
body[data-mood="think"] .pose-think { animation: cats-tilt  3.0s ease-in-out infinite; }
body[data-mood="beg"]   .pose-beg   { animation: cats-sway  2.2s ease-in-out infinite; }
body[data-mood="hiss"]  .cat        { animation: cats-vibrate 0.18s ease-in-out 2; }

@keyframes cats-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes cats-tilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-2deg); }
}
@keyframes cats-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1deg); }
}
@keyframes cats-vibrate {
  0%, 100% { transform: translateX(-50%); }
  25%      { transform: translateX(calc(-50% - 1px)); }
  75%      { transform: translateX(calc(-50% + 1px)); }
}

/* Sleep Z's — three floating letters above the curled cat. */
.zzz { position: absolute; top: 10px; right: 30px; display: none; }
body[data-mood="sleep"] .zzz { display: block; }

.z {
  position: absolute;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #40b4e6;
  opacity: 0;
  animation: cats-float 2.4s ease-out infinite;
}
.z1 { top:  0; left:  0; animation-delay: 0s;   }
.z2 { top: 10px; left: 10px; animation-delay: 0.6s; }
.z3 { top: 20px; left: 20px; animation-delay: 1.2s; font-size: 15px; }

@keyframes cats-float {
  0%   { opacity: 0; transform: translateY(0); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}

/* Thinking dots — three dots near the head, only visible in think mood. */
.thinking-dots {
  position: absolute;
  top: 18px;
  right: 28px;
  display: none;
  gap: 3px;
}
body[data-mood="think"] .thinking-dots { display: flex; }
.td {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #40b4e6;
  animation: cats-thinkdot 1.2s ease-in-out infinite;
}
.td:nth-child(2) { animation-delay: 0.18s; }
.td:nth-child(3) { animation-delay: 0.36s; }

@keyframes cats-thinkdot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1.0; transform: translateY(-2px); }
}

.caption {
  flex: 0 0 auto;
  margin-top: 4px;
  text-align: center;
  /* Reserve space on the right for the host's bell + close cluster. */
  padding-right: 24px;
}

.name {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  color: var(--caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 1px;
}

.state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-color);
}

.status-label {
  font-size: 10px;
  color: var(--caption-dim);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

/* pulse-finish keeps the legacy SessionCard's brief opacity flicker. */
.pulsing .cats { animation: cats-pulse-finish 0.7s ease-out 1; }
@keyframes cats-pulse-finish {
  0%, 100% { opacity: 1.0; }
  25%      { opacity: 0.55; }
  50%      { opacity: 1.0; }
  75%      { opacity: 0.7; }
}