/* Ceniza — site/styles.css
   Dark Minimal palette anchors (AgenticStackOrchestration/specs/2026-07-19_ceniza-sprites.md §3) --
   the same token roles the sprite sheet itself is drawn from, so the page and the cat
   share one palette. Raw CSS, no build step, no framework, no preprocessor.
   Loaded by both site/index.html (EN) and site/es/index.html (ES). */

:root {
  color-scheme: dark;

  /* Dark Minimal ramp */
  --bg:               #0a0a0b;
  --surface:          #111113;
  --surface-hover:    #19191d;
  --surface-elevated: #161618;
  --surface-active:   #1f1f24;
  --border:           #27272a;
  --text-muted:       #71717a;
  --text-secondary:   #a1a1aa;
  --text:             #ececef;

  /* accent + status -- shared with the sprite's own eye palette */
  --accent:       #6366f1;
  --accent-hover: #818cf8;
  --error:        #f87171;
  --warning:      #fbbf24;
  --success:      #34d399;

  --radius: 10px;
  --max-width: 720px;

  /* sprite render scale -- integer only (sprite spec §1). 6 = hero placement. */
  --ceniza-scale: 6;
}

@media (max-width: 480px) {
  :root { --ceniza-scale: 4; }
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  line-height: 1.6;
}

header { display: flex; justify-content: flex-end; }

.lang-flip { display: flex; }
.lang-flip a {
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: 0.5rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}
.lang-flip a:hover { background: var(--surface); color: var(--text); }
.lang-flip a[aria-current="page"] { color: var(--text); font-weight: 600; background: var(--surface); }

h1 { color: var(--text); margin-bottom: 0.25rem; }
h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 2.5rem 0 0.85rem;
}
.chat h2, .meters h2 { margin-top: 0; }

.blurb { color: var(--text-secondary); font-size: 1.05rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- sprite stage ---------- */

.stage { margin: 1.5rem 0 0.25rem; }

.room {
  position: relative;
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
}

/* ── mood canvas (p5.js, behind sprite) ── */

#mood-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#mood-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Room props stay above the mood canvas */
.room-prop-terminal,
.room-prop-plant {
  z-index: 3;
  position: relative;
}

.ceniza-sprite {
  position: relative;
  z-index: 2;
  background-color: var(--surface-elevated); /* neutral fallback while the sheet loads */
  border-radius: 4px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;

  /* Grid geometry -- overridden by ceniza.js once sprites/atlas.json loads.
     Defaults match the frozen atlas contract (48x48, 6 cols x 9 rows) so the
     box is correctly sized even before the first fetch resolves. */
  width:  calc(var(--ceniza-frame, 48px) * var(--ceniza-scale));
  height: calc(var(--ceniza-frame, 48px) * var(--ceniza-scale));
  background-size:
    calc(var(--ceniza-frame, 48px) * var(--ceniza-cols, 6) * var(--ceniza-scale))
    calc(var(--ceniza-frame, 48px) * var(--ceniza-rows, 9) * var(--ceniza-scale));
  background-position-x: 0px;
  background-position-y: calc(var(--row, 0) * var(--ceniza-frame, 48px) * var(--ceniza-scale) * -1);
  animation-fill-mode: forwards; /* loop:false states settle on their last frame, not frame 0 */
}

/* CSS steps() render contract -- v1 spec §7 / sprite spec §5.
   X is stepped across `--frames` columns; Y jumps straight to `--row`. */
@keyframes ceniza-play {
  from { background-position-x: 0px; }
  to   { background-position-x: calc(var(--frames, 1) * var(--ceniza-frame, 48px) * var(--ceniza-scale) * -1); }
}

.ceniza-sprite[data-playing="true"] {
  animation-name: ceniza-play;
  animation-duration: calc(var(--frames, 1) * 1s / var(--fps, 1));
  animation-timing-function: steps(var(--frames, 1));
  animation-iteration-count: var(--loop-count, infinite);
}

.connection-status {
  min-height: 1.2em;
  margin: 0.6rem 0 0;
  color: var(--error);
  font-size: 0.875rem;
  text-align: center;
}
.connection-status:empty { display: none; }

body.degraded .ceniza-sprite { filter: saturate(0.55); }

/* ---------- care controls ---------- */

.care-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

button { font: inherit; cursor: pointer; }

.care-controls button {
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 1.15rem;
  font-weight: 600;
}
.care-controls button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); }
.care-controls button:disabled { opacity: 0.5; cursor: default; }

.care-status {
  color: var(--text-muted);
  font-size: 0.875rem;
  min-height: 1.2em;
}

/* ---------- needs meters ---------- */

.meters { display: grid; gap: 0.85rem; margin-bottom: 1.5rem; }

.meter-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

.meter-value { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.meter-track {
  height: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.meter[data-need="mischief"] .meter-fill { background: var(--warning); }

/* ---------- chat ---------- */

.chat { margin-bottom: 1.5rem; }

.chat-log {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.chat-hint { color: var(--text-muted); font-style: italic; margin: auto 0; text-align: center; }

.chat-msg {
  max-width: 85%;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--bg); }
.chat-msg.assistant { align-self: flex-start; background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border); }
.chat-msg.assistant.chat-error { border-color: var(--error); color: var(--error); }
.chat-msg.assistant[data-pending="true"]::after { content: "…"; opacity: 0.6; }

#chat-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
#chat-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font: inherit;
}
#chat-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#chat-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.15rem;
  font-weight: 600;
}
#chat-form button:hover:not(:disabled) { background: var(--accent-hover); }
#chat-form button:disabled { opacity: 0.5; cursor: default; }

/* ---------- story + worklog ---------- */

.worklog-link { margin-top: 2rem; }
.worklog-link a { color: var(--accent-hover); }

a { color: var(--accent-hover); }

/* ── speak button (per-chat-message TTS) ── */

.speak-btn {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.3rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.6;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.speak-btn:hover { opacity: 1; border-color: var(--accent); }

/* ── communal space ── */

.communal { margin: 2rem 0; }

.communal-intro { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }

#communal-items {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.communal-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color 0.2s;
}
.communal-item:hover { border-color: var(--accent); }

.communal-item-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.communal-item-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.communal-item-body {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.communal-item-body p {
  margin: 0;
}

/* edit indicator */
.edit-indicator {
  animation: edit-pulse 1s ease-in-out infinite;
}
@keyframes edit-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}