/* =============================================================
   pip v2 — Anonymous Avatar web UI
   Visual language inherits hello-stranger (MIT, The Pudding 2022).
   .asciiContainer block is ported from The Pudding — Hello, Stranger
   (https://pudding.cool/2025/06/hello-stranger/, MIT 2022),
   originally at src/components/hellostranger/HelloStranger.person.svelte
   lines 332-358.
   ============================================================= */

:root {
  --bg-page:       #1a1a1e;
  --bg-panel:      #222228;
  --bg-preview:    #2a2a30;
  --text-primary:  #e8e8ec;
  --text-muted:    #888892;
  --accent:        #7ec8e3;
  --border:        #3a3a42;

  /* Live values — overwritten by renderer.js per profile */
  --person-color:      #c9c1af;   /* derived from mood */
  --background-color:  #d0caa4;   /* from energy palette */
  --bg-color-soft:     #f0e8c8;   /* lightenColor(backgroundColor) */
  --darker-color:      #4a3a2a;   /* darkestColor(backgroundColor) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.4;
}

/* ──────────────────────────────────────────────
   LAYOUT — unified stacked composition across desktop + mobile.
   Preview card on top, options below. On wide screens the content
   column is centered and max-width-capped so it doesn't stretch
   across the entire monitor (keeps the "phone-app" feel).
   ────────────────────────────────────────────── */
.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 48px);   /* 48px status bar */
}

/* options in source order comes first → rendered on top (as requested).
   Preview card follows, scrolls with the rest of the page. */
#options {
  width: 100%;
  max-width: 820px;
  padding: 24px 24px 24px 24px;
}

#preview {
  width: 100%;
  max-width: 520px;
  padding: 8px 16px calc(48px + 32px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 640px) {
  #options {
    max-width: 520px;
    padding: 20px 20px 20px 20px;
  }
  #preview {
    padding: 8px 16px calc(48px + 32px) 16px;
  }
}

/* ──────────────────────────────────────────────
   OPTIONS PANEL
   ────────────────────────────────────────────── */
.title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 24px 0;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.qblock {
  border: none;
  padding: 0;
  margin: 0 0 28px 0;
}

.qblock legend {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}

.choice input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(126, 200, 227, 0.15);
  color: var(--text-primary);
}

.choice:hover {
  border-color: #555;
}

/* ──────────────────────────────────────────────
   Q_INTERESTS (v7) — multi-select tag picker, max 3.
   Visually inherits .choice (pill + accent-on-selected) with an
   added icon prefix and explicit .selected class (toggled by JS,
   not by a :has(input:checked) since these are buttons, not radios).
   ────────────────────────────────────────────── */
.interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.interest-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  color: inherit;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.interest-tag:hover {
  border-color: #555;
}

.interest-tag.selected {
  border-color: var(--accent);
  background: rgba(126, 200, 227, 0.15);
  color: var(--text-primary);
}

.interest-icon {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.9;
  /* Force text-style rendering — some single-color Unicode symbols
     (e.g. ⚽ ☕ ✈ ❤ ✏) get auto-upgraded to color emoji on macOS/iOS.
     We want a consistent single-color look matching the ASCII sprite. */
  font-variant-emoji: text;
}

.interest-tag.selected .interest-icon {
  opacity: 1;
}

.interest-hint {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
  min-height: 1.2em;
}

.interest-hint.visible {
  opacity: 1;
}

/* ──────────────────────────────────────────────
   Q_INTERESTS_DETAIL (v8) — second-level subtag picker.
   Reveals a row per selected primary. Pills inherit the .choice
   visual language so the form reads as a continuation of the
   primary grid rather than a new interaction pattern.
   These selections feed the collective-view similarity layout
   only — never rendered on any preview.
   ────────────────────────────────────────────── */
.subtag-group {
  margin-bottom: 14px;
}
.subtag-group:last-child {
  margin-bottom: 0;
}
.subtag-group-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}
.subtag-icon {
  font-variant-emoji: text;
  opacity: 0.85;
}
.subtag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.subtag-pill {
  padding: 5px 11px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s;
  font: inherit;
  font-size: 0.82rem;
}
.subtag-pill:hover {
  border-color: #555;
}
.subtag-pill.selected {
  border-color: var(--accent);
  background: rgba(126, 200, 227, 0.15);
}

/* ──────────────────────────────────────────────
   Submit button — sends the full state (incl. interest_details)
   to /submit. After success it stays disabled to avoid duplicate
   entries; sessionStorage gates a second submit too.
   ────────────────────────────────────────────── */
.submit-block {
  margin-top: 8px;
}
.submit-block button {
  width: 100%;
  padding: 14px 16px;
  background: var(--accent);
  color: var(--bg-page);
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  font-family: inherit;
}
.submit-block button:hover:not(:disabled) {
  background: #9bd6e8;
}
.submit-block button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.submit-status {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2em;
}
.submit-status.success { color: var(--accent); }
.submit-status.error   { color: #e87b7b; }

/* Preview-side inline badges — a single line of selected interests
   pinned to the bottom of #preview-frame (inside the tinted background),
   so it reads as "avatar + tags" on one card. */
.preview-interests {
  position: absolute;
  bottom: 40px;
  left: 16px;
  right: 16px;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--darker-color, var(--text-primary));
  line-height: 1.4;
  pointer-events: none;
}

.preview-interests.visible {
  display: flex;
}

.preview-interest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.preview-interest-icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.9;
  font-variant-emoji: text;
}

.preview-interest-sep {
  opacity: 0.4;
  user-select: none;
}

/* ──────────────────────────────────────────────
   Q_AVATAR gallery (v6) — 15 sprite thumbnails (5 × 3).
   Decoupled from --person-color: tiles stay a fixed grey
   so changing energy doesn't repaint the picker while the
   user is choosing a shape.
   ────────────────────────────────────────────── */
.avatar-gallery {
  display: grid;
  /* Desktop: 5 columns × 3 rows = exactly 15 tiles.
     Mobile: 3 columns × 5 rows (see media query below). */
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

@media (max-width: 640px) {
  .avatar-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.avatar-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  cursor: pointer;
  aspect-ratio: 10 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  color: inherit;
  font: inherit;
}

.avatar-tile:hover {
  border-color: #555;
}

.avatar-tile.selected {
  border-color: var(--accent);
  background: rgba(126, 200, 227, 0.15);
}

.tile-ascii {
  margin: 0;
  padding: 0;
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
  font-size: 7px;
  line-height: 0.55em;
  letter-spacing: -0.1em;
  font-weight: bold;
  color: var(--text-primary);
  white-space: pre;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 380px) {
  .tile-ascii { font-size: 6px; }
}

.hint {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  min-height: 1.2em;
}

.choice.toggle {
  gap: 8px;
}

.choice.toggle input {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px;
  height: 16px;
  position: static;
  opacity: 1;
  accent-color: var(--accent);
}

/* energy slider */
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.slider-label {
  min-width: 70px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Heart-rate readout sits below the slider. Goes muted-grey when there's
   no sensor signal (so demos without hardware look the same as before),
   and accent-colored + slightly larger when a BPM is being received. */
.hr-readout {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hr-readout.active {
  color: var(--accent);
  font-weight: 500;
}

/* quote input */
#input-quote {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
}
#input-quote:focus {
  outline: none;
  border-color: var(--accent);
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.suggestion-chip {
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.suggestion-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.attribution {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.attribution a { color: var(--text-muted); }

/* ──────────────────────────────────────────────
   PREVIEW PANEL
   ────────────────────────────────────────────── */
#preview-frame {
  position: relative;
  width: 420px;
  height: 420px;
  /* Keep the 1:1 square even when the surrounding container shrinks
     (mobile, or narrow viewport). aspect-ratio guarantees height
     follows width, so it never gets squashed into a rectangle. */
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color-soft);
  border: 1px solid var(--darker-color);
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.4s ease;
}

/* Mobile-specific sizing for #preview-frame is no longer needed —
   max-width: 100% + aspect-ratio: 1/1 handles shrinking automatically,
   and the container just flows in the scrollable document like desktop. */

/* quote bubble, hello-stranger style.
   Positioned in the upper third so it sits just above the sprite's head,
   not pinned to the frame's top edge. */
.quote-bubble {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  padding: 9px 14px;
  background: var(--bg-color-soft);
  border: 1px solid var(--person-color);
  border-radius: 6px;
  color: var(--person-color);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  z-index: 2;
}
.quote-tail {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--person-color);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 1.1rem;
  line-height: 0.5;
}

/* ──────────────────────────────────────────────
   THE ASCII CONTAINER — ported from
   HelloStranger.person.svelte lines 332-358.

   In the original, font-size is 2.9em and line-height is 0.2rem.
   We keep the *ratio* but express line-height in em (relative to
   the pre's own font-size) so the sprite stays coherent at any
   container size. If rows look too tight → bump line-height;
   if too loose → reduce it.
   ────────────────────────────────────────────── */
.asciiContainer {
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
  font-size: 22px;                /* baseline character size (v5: 18→22 for larger figure) */
  font-weight: bold;
  letter-spacing: -0.1em;
  color: var(--person-color);
  user-select: none;
  transition: color 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nudge vertical position. The whole avatar+bubble+tags stack should
     feel centered-slightly-high — tweak these two to shift the avatar
     itself. Positive padding-bottom lifts the avatar up; padding-top
     pushes it down. */
  padding-top: 0;
  padding-bottom: 6%;
}

/* Pixel-art squish: hello-stranger keeps line-height *much* smaller than
   font-size so rows overlap, producing the dense mosaic look instead of
   a loose grid. The aspect ratio of 18 rows should end up close to 18
   cols of character width. Character-cell width ≈ 0.55em, so target
   line-height ≈ 0.55em for square.  */
.asciiContainer pre {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1em;
  line-height: 0.55em;             /* KEY: rows overlap to match column width */
  letter-spacing: -0.1em;
  white-space: pre;
}

/* sprite-meta: debug-only label (e.g. "male_0_0").
   Hidden visually but kept in the DOM so applyToDOM's
   #sprite-key writes still succeed — inspect via devtools if needed. */
.sprite-meta {
  display: none;
}

/* ──────────────────────────────────────────────
   STATUS BAR (bottom)
   ────────────────────────────────────────────── */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  font-size: 0.85rem;
  z-index: 100;
}

#btn-connect {
  padding: 6px 14px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
#btn-connect:hover { background: #9fd5e8; }
#btn-connect[disabled] {
  background: #444;
  color: #999;
  cursor: not-allowed;
}

.status-text {
  color: var(--text-muted);
}
.status-text.ok { color: #80d080; }
.status-text.err { color: #e08080; }