:root {
  /* Woodland: bark and walnut browns, with moss green as the second accent. */
  --bg: #e3d6c1;
  --surface: #f1e8d9;
  --surface-2: #d8c8ae;
  --ink: #22170e;
  --muted: #5a4938;
  --line: #c4b194;
  --accent: #6b4226;
  --accent-ink: #fbf4e8;
  --moss: #3f6130;
  --moss-ink: #f3f6ea;
  --bark: #2e1f13;
  --bark-ink: #efe2cd;
  --bark-muted: #bba68b;
  --member: #82510b;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(42 29 20 / .06), 0 8px 24px rgb(42 29 20 / .06);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

/* Dark colors: the device's setting, unless the visitor picked light or dark with the switch in
   the top bar (saved in their browser; app.js sets <html data-theme>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b130c;
    --surface: #261b11;
    --surface-2: #332518;
    --ink: #efe3d1;
    --muted: #ab977f;
    --line: #45321f;
    --accent: #b27546;
    --accent-ink: #150e08;
    --moss: #8db86f;
    --moss-ink: #10170c;
    --bark: #120c07;
    --bark-ink: #efe3d1;
    --bark-muted: #a18c73;
    --member: #d9a441;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  }
}
:root[data-theme="dark"] {
  --bg: #1b130c;
  --surface: #261b11;
  --surface-2: #332518;
  --ink: #efe3d1;
  --muted: #ab977f;
  --line: #45321f;
  --accent: #b27546;
  --accent-ink: #150e08;
  --moss: #8db86f;
  --moss-ink: #10170c;
  --bark: #120c07;
  --bark-ink: #efe3d1;
  --bark-muted: #a18c73;
  --member: #d9a441;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
/* Pictures carry their size in the HTML so the page doesn't jump as they load; CSS sets the width. */
:where(img[width][height]) { height: auto; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--moss); }
code { font-size: .9em; background: var(--surface-2); padding: .1em .35em; border-radius: 6px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px;
  background: var(--bark);
  border-bottom: 3px solid var(--moss);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 1.15rem; color: var(--bark-ink); text-decoration: none; letter-spacing: -.01em;
  flex: none; white-space: nowrap;
}
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--bark-muted);
  border: 1px solid color-mix(in srgb, var(--bark-muted) 45%, transparent); border-radius: 999px; padding: 4px 12px;
  min-width: 0;
}
/* A long guest name gets cut short with "…" so the title keeps its one line. */
#status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The top bar's right side: the light/dark switch, then who's logged in. */
.topbar-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.theme-toggle {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bark-muted) 45%, transparent);
  background: transparent; color: var(--bark-muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--bark-ink); border-color: var(--bark-muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.theme-toggle .icon-sun, .theme-toggle[data-current="dark"] .icon-moon { display: none; }
.theme-toggle[data-current="dark"] .icon-sun { display: block; }
.status .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bark-muted); }
.status.is-member { color: var(--bark-ink); border-color: var(--moss); }
.status.is-member .dot { background: var(--moss); }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- assistant ---------- */
.assistant {
  position: sticky; top: 24px;
  align-self: start;
  display: flex; flex-direction: column; gap: 16px;
}
.beaver-wrap { display: flex; align-items: flex-start; gap: 12px; }
.beaver-wrap > .bubble { margin-top: 16px; } /* level with his face; the mood meter hangs below him */
.perch { position: relative; flex: none; width: 128px; }
.beaver { position: relative; z-index: 1; transform-origin: 50% 100%; animation: idle 4s ease-in-out infinite; }
.beaver img { width: 100%; height: auto; display: block; }
/* Bopper is a button: tap him to pet him. */
button.beaver { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.beaver:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 4px; border-radius: 8px; }
/* The petted squish lives on the picture (and his outfit), so it plays alongside whatever mood he's in. */
.beaver-body { position: relative; display: block; transform-origin: 50% 100%; }
.beaver-body.is-petted { animation: petted .45s ease-out; }
/* Dress-up (public/outfit.js): outfit layers share the picture's pixel grid, with room above for hats. */
.beaver-body > img { display: block; width: 100%; height: auto; }
.beaver-body.is-dressed > img { -webkit-mask: url(/assets/outfit/knot-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/outfit/knot-mask.svg) 0 0 / 100% 100% no-repeat; }
.outfit { position: absolute; left: 0; width: 100%; top: -12.658%; height: 112.658%; pointer-events: none; }
.outfit img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.hearts { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.hearts .px-heart { position: absolute; bottom: 60%; width: 21px; animation: heart-float 1.1s ease-out forwards; }

/* Mood meter under Bopper (app.js): five hearts, his mood, and everyone's pets. */
.mood { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; line-height: 1.25; }
.mood-hearts { display: flex; gap: 3px; }
.mood-heart { width: 14px; height: 14px; }
.mood-heart.is-empty { filter: grayscale(1); opacity: .35; }
.mood-label { font-size: .8rem; font-weight: 700; color: var(--ink); }
.mood-count { font-size: .72rem; color: var(--muted); }
/* Napping: slow breathing and a few z's. Hiding: he ducks down into the pond. */
.perch.is-napping .beaver { animation: nap 3.2s ease-in-out infinite; }
.perch.is-napping::after {
  content: "z Z z"; position: absolute; z-index: 2; right: 0; top: -6px; font: 700 .95rem/1 ui-monospace, monospace;
  color: var(--muted); letter-spacing: .15em; animation: zzz 2.4s ease-in-out infinite; pointer-events: none;
}
.perch.is-hiding .beaver-body { transform: translateY(45%) scale(.9); opacity: 0; }
.perch.is-hiding::after { content: "~ splash ~"; position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font: 700 .8rem/1 ui-monospace, monospace; color: #3f7f8f; }
/* Leaning toward the text box while someone types (app.js), and reading the paper when left alone. */
.perch .beaver-body { transition: transform .35s ease, opacity .5s ease-in; }
.perch.is-listening .beaver-body { transform: rotate(6deg) translate(4px, 2px); }
.perch.is-reading .beaver { animation-duration: 7s; } /* calmer while he reads */
@keyframes nap { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.02, .98) } }
@keyframes zzz { 0% { opacity: 0; transform: translateY(6px) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(-10px) } }

@keyframes petted { 0% { transform: none } 30% { transform: scale(1.06, .9) } 60% { transform: scale(.97, 1.04) rotate(-2deg) } 100% { transform: none } }
@keyframes heart-fade { 0% { opacity: 1 } 100% { opacity: 0 } }
@keyframes heart-float { 0% { opacity: 0; transform: translate(0, 0) scale(.6) } 15% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--drift, 0px), -70px) scale(1) } }
.beaver.is-talking { animation: talk .28s ease-in-out infinite alternate; }
.beaver.is-thinking { animation: think 1.2s ease-in-out infinite; }
.beaver.is-happy { animation: hop .5s ease-out 2; }
.beaver.is-sad { animation: droop .6s ease-out forwards; }

@keyframes idle { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes talk { from { transform: scaleY(1) } to { transform: scaleY(.965) translateY(1px) } }
@keyframes think { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@keyframes hop { 0% { transform: translateY(0) } 40% { transform: translateY(-14px) } 100% { transform: translateY(0) } }
@keyframes droop { to { transform: translateY(3px) rotate(-4deg) } }

.bubble {
  position: relative;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  min-height: 64px;
  margin-bottom: 36px;
  font-size: .98rem;
  display: flex; flex-direction: column; gap: 10px;
}
.bubble-text { margin: 0; }
.bubble::after {
  content: ""; position: absolute; left: -8px; bottom: 16px;
  width: 14px; height: 14px; background: var(--surface);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.reply-area { display: flex; flex-direction: column; gap: 10px; } /* right under Bopper */

/* Suggested replies: the visitor's options, right-aligned like their side of a conversation. */
.chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Before the buttons first arrive, hold about the room they'll take (two rows; three on narrow
   phones), so the chat box and page below don't jump down when they appear. */
.chips:empty { min-height: 85px; }
@media (max-width: 429px) { .chips:empty { min-height: 131px; } }
.chips.is-hushed { visibility: hidden; } /* while Bopper talks: hidden and unclickable, but still taking their space */
.chip {
  font: inherit; font-size: .9rem; font-weight: 500;
  border: 1.5px solid var(--moss); background: var(--surface); color: var(--moss);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: background .12s, color .12s;
  animation: chip-in .22s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes chip-in { from { opacity: 0; transform: translateY(4px) scale(.96) } }
.chip:hover { background: var(--moss); color: var(--moss-ink); }
.chip:focus-visible, .composer button:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.chip.member { border-color: var(--member); color: var(--member); }
.chip.member:hover { background: var(--member); color: var(--surface); }
/* A page switched off on the Admin page: only the admin sees its button, dashed. */
.chip.is-hidden { border-style: dashed; opacity: .75; }

.composer { display: flex; gap: 8px; }
.composer input {
  flex: 1; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; min-width: 0;
}
.composer input:focus { outline: 2px solid var(--moss); outline-offset: 1px; }
.composer button {
  flex: none; display: grid; place-items: center; width: 46px; padding: 0;
  border: 0; border-radius: 12px;
  background: var(--moss); color: var(--moss-ink); cursor: pointer;
}
.composer button svg { display: block; }

/* ---------- stage ---------- */
.stage-wrap { position: relative; min-width: 0; align-self: start; }
.stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 32px 104px; /* bottom room for the pond */
  min-height: max(520px, calc(100vh - 48px - 57px)); /* fills the window */
  display: flex; flex-direction: column;
  outline: none;
}
.stage-empty { flex: 1; display: grid; place-items: center; }
.px-lodge { width: min(220px, 70%); height: auto; }
.stage h2 { font-size: 1.8rem; letter-spacing: -.02em; margin: .15em 0 .6em; }
.stage .badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--member); border: 1px solid var(--member); border-radius: 999px; padding: 2px 8px;
}
.stage .badge.is-hidden { color: var(--muted); border-color: var(--muted); margin-left: 6px; }
.stage article.topic { animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.placeholder {
  font-size: .85rem; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px;
}
.links { list-style: none; padding: 0; }
.links li { padding: 8px 0; border-bottom: 1px solid var(--line); }
/* Admin: messages left with Bopper */
.messages { list-style: none; margin: 0; padding: 0; }
.message { padding: 12px 0; border-bottom: 1px solid var(--line); }
.message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.message-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message .badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; border-radius: 999px; padding: 1px 7px; }
.message .badge.new { color: var(--moss); border-color: var(--moss); }
.message-delete {
  font: inherit; font-size: .82rem; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink);
}
.message-delete[data-armed] { border-color: #b42318; color: #b42318; }
.message-delete:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.spam-box { margin-top: 12px; }
.spam-box summary { cursor: pointer; color: var(--muted); }
.spam-box > .message-delete { margin-top: 10px; }

/* Admin guest book */
.muted { color: var(--muted); }
.table-wrap { overflow-x: auto; }
/* The guest book sits near the top of the Admin page, so it scrolls on its own past a dozen rows. */
.table-wrap:has(.guest-book) { max-height: 420px; overflow-y: auto; border-bottom: 1px solid var(--line); }
.guest-book thead th { position: sticky; top: 0; background: var(--surface); }
.guest-book { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.guest-book th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); }
.guest-book td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.guest-book td:nth-child(2) { white-space: normal; font-weight: 600; }

/* Admin page */
.stage h3 { font-size: 1rem; margin: 1.6em 0 .6em; }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer;
}
.switch-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Admin page "Pages": one row per page, with its switches side by side. */
.page-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.page-row:last-of-type { border-bottom: 1px solid var(--line); }
.page-row-switches { display: flex; gap: 18px; flex-wrap: wrap; }
.mini-switch { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); cursor: pointer; }
/* Admin page buttons (Download a backup, Make a new upload key). */
.admin-button {
  display: inline-block; padding: 9px 16px; border-radius: 10px; font-weight: 600; text-decoration: none;
  background: var(--moss); color: var(--moss-ink);
}
.admin-button:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
button.admin-button { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.admin-button:disabled { opacity: .6; cursor: default; }
/* A new Bopper app upload key, shown once to copy. */
.app-key { width: 100%; max-width: 36rem; font-family: ui-monospace, monospace; font-size: .85rem; padding: 8px; }
.switch-label .muted { font-size: .85rem; }
.switch {
  appearance: none; flex: none; position: relative; margin: 0;
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: background .15s;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 45%, transparent);
}
.switch::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s;
}
.switch:checked { background: var(--moss); }
.switch:checked::before { transform: translateX(20px); }
.admin-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); max-width: 480px; }
.admin-form + .admin-form { margin-top: 4px; }
.admin-form label { display: flex; flex-direction: column; gap: 2px; }
.admin-form label .muted { font-size: .85rem; }
.admin-form-row { display: flex; gap: 8px; }
.admin-form input {
  flex: 1; min-width: 0; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.admin-form input:focus { outline: 2px solid var(--moss); outline-offset: 1px; }
.admin-form textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; min-height: 110px; }
.admin-form textarea:focus { outline: 2px solid var(--moss); outline-offset: 1px; }
.post-form { max-width: 640px; }
/* Secret Stuff posts (server/posts.php) */
.posts { display: flex; flex-direction: column; gap: 18px; }
.post { padding-bottom: 18px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.post:last-child { border-bottom: 0; padding-bottom: 0; }
.post p { margin: 0 0 10px; }
.post .post-date { font-size: .85rem; margin-bottom: 4px; }
.admin-form button {
  flex: none; font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 0 16px;
  background: var(--moss); color: var(--moss-ink); cursor: pointer; min-height: 40px;
}
.admin-form button:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.admin-form :disabled { opacity: .6; cursor: progress; }
.form-status { margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--muted); }
.switch:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.switch:disabled { opacity: .6; cursor: progress; }

/* Embedded web apps (e.g. Nightscout) on the stage */
.embed { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.embed iframe { display: block; width: 100%; height: min(70vh, 640px); border: 0; }
.embed-link { font-size: .9rem; }
/* Carb Counter, right in its page: as tall as the screen allows, so it works like the app. */
.app-embed iframe { height: min(85vh, 860px); height: min(85dvh, 860px); min-height: 520px; }

/* ---------- woodland pixel art ---------- */
.px { display: block; image-rendering: pixelated; pointer-events: none; }

.scenery { position: absolute; inset: 0; pointer-events: none; }
.pond { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 80px; }
.water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: url(/assets/pixel/pond.svg) repeat-x left bottom / 64px 20px;
  image-rendering: pixelated;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
.px-cattail { position: absolute; left: 22px; bottom: 8px; width: 20px; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
.px-cattail.small { left: 44px; bottom: 6px; width: 15px; animation-delay: -2s; }
.px-lily { position: absolute; right: 72px; bottom: 4px; width: 48px; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }

/* ---------- Simple mode ----------
   Switched on from the Admin page. <html data-mode="simple"> hides the beaver site and shows a
   plain page in the browser's own colors and font; the Admin page's controls reuse the tokens
   below, so they turn plain too. */
.simple-site { display: none; }
:root[data-mode="simple"] {
  color-scheme: light dark;
  --bg: Canvas;
  --surface: Canvas;
  --surface-2: color-mix(in srgb, CanvasText 6%, Canvas);
  --ink: CanvasText;
  --muted: color-mix(in srgb, CanvasText 65%, Canvas);
  --line: color-mix(in srgb, CanvasText 22%, Canvas);
  --moss: CanvasText;
  --moss-ink: Canvas;
  --member: CanvasText;
  --radius: 4px;
  --shadow: none;
  font-family: system-ui, sans-serif;
}
:root[data-mode="simple"] body { background: Canvas; color: CanvasText; }
:root[data-mode="simple"] .topbar,
:root[data-mode="simple"] .layout { display: none; }
:root[data-mode="simple"] .simple-site { display: block; max-width: 900px; margin: 0 auto; padding: 16px; }

.s-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.s-title { font-weight: 700; font-size: 1.1rem; }
.s-account { display: flex; align-items: baseline; gap: 12px; }
.s-nav { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.s-nav a { color: LinkText; }
.s-nav a[aria-current="page"] { font-weight: 700; text-decoration: none; color: CanvasText; }
.s-message { margin: 8px 0 0; min-height: 1.2em; color: var(--muted); font-size: .9rem; }
.s-main h1 { font-size: 1.4rem; margin: .6em 0 .5em; }
.simple-site h3 { font-size: 1rem; margin: 1.6em 0 .6em; }
.simple-site button {
  font: inherit; padding: 4px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: CanvasText;
}
.s-empty { margin: 3em 0; text-align: center; color: var(--muted); }
.s-login { max-width: 360px; }
.s-login label { display: block; margin-bottom: 4px; }
.s-login input { font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: Canvas; color: CanvasText; }
.s-buttons { display: flex; gap: 8px; }
.s-error { color: #b42318; min-height: 1.2em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-error { color: #ff8a80; } }
:root[data-theme="dark"] .s-error { color: #ff8a80; }
.simple-site .admin-form button, .simple-site .admin-button { background: CanvasText; color: Canvas; border-color: CanvasText; }

/* ---------- Tail Slap (public/game.js) ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: start; }
.game-frame { position: relative; max-width: 640px; }
.game-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; border: 2px solid var(--bark); background: #bfe0dc; image-rendering: pixelated; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.game-canvas:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: rgb(20 14 8 / .35); border-radius: 12px; }
.game-overlay[hidden] { display: none; }
.game-over { background: var(--surface); color: var(--ink); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 20px; text-align: center; width: min(300px, 100%); display: flex; flex-direction: column; gap: 6px; }
.game-over p { margin: 0; }
.game-over-title { font-size: 1.4rem; font-weight: 800; }
.game-over-score { font-size: 1.1rem; font-weight: 700; }
.game-best { color: var(--moss); }
.initials-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.initials-form label { font-size: .9rem; }
.initials-row { display: flex; gap: 8px; justify-content: center; }
.initials-row input { width: 5.5ch; font: 700 1.3rem/1.2 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 6px 4px 6px 8px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.initials-row input:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; border-color: var(--moss); }
.game-button { font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--bark); background: var(--surface); color: var(--ink); cursor: pointer; }
.game-button.primary, .game-over > .game-button { background: var(--moss); border-color: var(--moss); color: var(--moss-ink); }
.game-button:disabled { opacity: .6; cursor: default; }
.game-button:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.game-status { font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.game-saved { font-weight: 700; color: var(--moss); }
.scoreboard-box h3 { margin: 0 0 8px; }
.scoreboard { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, monospace; }
.scoreboard li { display: grid; grid-template-columns: 3ch 1fr auto; gap: 8px; padding: 5px 8px; border-radius: 8px; }
.scoreboard li:nth-child(odd) { background: var(--surface-2); }
.scoreboard li.is-new { background: var(--moss); color: var(--moss-ink); font-weight: 700; }
.sb-rank { color: inherit; opacity: .7; }
.sb-initials { font-weight: 700; letter-spacing: .1em; }
.scoreboard-empty { margin: 0; }
@media (max-width: 980px) { .game { grid-template-columns: 1fr; } }
/* Phones: the game screen is too short for the score panel, so it sits just below instead. */
@media (max-width: 600px) {
  .game-overlay { position: static; padding: 12px 0 0; background: none; }
  .game-over { width: 100%; box-shadow: none; border: 2px solid var(--bark); }
}

/* ---------- Dress Up (public/outfit.js) ---------- */
.dressup { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
.dressup-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px 18px; border-radius: 12px; background: linear-gradient(var(--surface-2), var(--surface-2)) bottom / 100% 22px no-repeat, var(--bg); border: 2px solid var(--line); }
.dressup-preview { width: 100%; max-width: 200px; }
.dressup-preview .beaver-body img { image-rendering: pixelated; }
.dressup-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dressup-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dressup-tab { font: inherit; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.dressup-tab[aria-selected="true"] { background: var(--moss); border-color: var(--moss); color: var(--moss-ink); }
.dressup-tab:focus-visible, .dressup-item:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.dressup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.dressup-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; font: inherit; font-size: .85rem; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.dressup-item:hover { border-color: var(--muted); }
.dressup-item[aria-pressed="true"] { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 14%, var(--surface)); font-weight: 700; }
/* Each button zooms in on the part of Bopper the item goes on (--fx/--fy: that spot on the picture). */
.dressup-thumb { position: relative; display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: var(--bg); }
.dressup-thumb .beaver-body { position: absolute; width: 180px; left: calc(36px - 180px * var(--fx) / 100); top: calc(36px - 177.75px * var(--fy) / 100); }
.dressup-thumb img { image-rendering: pixelated; }
.dressup-name { text-align: center; line-height: 1.2; }
@media (max-width: 700px) {
  .dressup { grid-template-columns: 1fr; }
  .dressup-stage { padding-top: 36px; }
  .dressup-preview { max-width: 170px; }
}

/* ---------- "page not found" (server/not-found.html) ---------- */
.notfound { max-width: 560px; margin: 0 auto; padding: 48px 20px 64px; text-align: center; }
.notfound-art { position: relative; width: 220px; margin: 0 auto 20px; }
.notfound-bopper { display: block; width: 100%; image-rendering: pixelated; }
.notfound-page { position: absolute; width: 70px; left: 118px; top: 96px; transform: rotate(-12deg); }
.notfound-crumbs { position: absolute; width: 42px; left: 150px; top: 176px; }
.notfound h1 { font-size: 1.6rem; margin: 0 0 8px; }
.notfound p { color: var(--muted); margin: 0 0 18px; }
.notfound-home {
  display: inline-block; padding: 10px 20px; border-radius: 999px; font-weight: 700; text-decoration: none;
  background: var(--moss); color: var(--moss-ink);
}
.notfound-home:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .topbar { padding: 12px 16px; }
  .layout { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .assistant { position: static; }
  .perch { width: 96px; }
  .beaver-wrap > .bubble { margin-top: 8px; }
  .stage { padding: 20px 20px 96px; min-height: 0; }
  .stage-empty { padding-block: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .beaver, .beaver.is-talking, .beaver.is-thinking, .beaver.is-happy, .beaver-body.is-petted, .perch.is-napping .beaver, .perch.is-napping::after, .stage article.topic, .chip, .px-cattail { animation: none; }
  .hearts .px-heart { animation: heart-fade 1.1s linear forwards; }
  .switch, .switch::before { transition: none; }
  .perch.is-listening .beaver-body { transform: none; }
}

/* Read out by screen readers, not shown (a page heading when the page shows its own). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Beaver Valley (valley.js) ---------- */
.valley { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.valley-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.valley-status { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 600; font-size: .95rem; }
.valley-status .muted { font-weight: 400; }
.valley-when { color: var(--moss); }
.valley-short { color: #b3401f; }
.valley-speed, .valley-bottom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.valley-frame { position: relative; }
.valley-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; border: 2px solid var(--bark); background: #6ea653; image-rendering: pixelated; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; }
.valley-canvas:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
.valley-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.valley-tool, .valley-small { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; cursor: pointer; }
.valley-tool { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; min-height: 44px; }
.valley-tool-name { font-weight: 700; font-size: .9rem; }
.valley-tool-cost { font-size: .75rem; color: var(--muted); }
.valley-small { padding: 6px 12px; font-size: .9rem; min-height: 36px; }
.valley-tool[aria-pressed="true"], .valley-small[aria-pressed="true"] { background: var(--moss); color: var(--moss-ink); border-color: var(--moss); }
.valley-tool[aria-pressed="true"] .valley-tool-cost { color: var(--moss-ink); }
.valley-tool:focus-visible, .valley-small:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.valley-info { margin: 0; min-height: 1.5em; }
.valley-best { margin-left: auto; font-size: .9rem; }
.valley-howto summary { cursor: pointer; font-weight: 600; }
.valley-howto ul { margin: 6px 0 0; padding-left: 20px; }
.valley-log { margin: 0; padding-left: 0; list-style: none; font-size: .92rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.valley-log li:first-child { color: var(--ink); }
.valley-log .valley-good { color: var(--moss); }
.valley-log .valley-bad, .valley-log .valley-warn:first-child { color: #b3401f; }

/* ---------- Pond Wars (pondwars.js); shares Beaver Valley's layout ---------- */
.pw-canvas { display: block; width: 100%; aspect-ratio: 40 / 28; border-radius: 4px; border: 3px solid #4a2f18; box-shadow: 0 0 0 2px #c9a46a, 0 4px 14px rgb(0 0 0 / .35); background: #10140c; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.pw-canvas:focus-visible { outline: 3px solid var(--moss); outline-offset: 4px; }
/* a carved-wood resource bar, as in the old strategy games */
.pw-bar { padding: 5px 12px; border-radius: 6px; background: linear-gradient(#6b4526, #4a2f18); border: 1px solid #2c1a0c; box-shadow: inset 0 1px 0 rgb(255 220 170 / .25); color: #f6e7c8; align-items: center; text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
.pw-bar .muted, .pw-bar .valley-when { color: #e6cf9c; }
.pw-res { display: inline-flex; align-items: center; gap: 5px; }
.pw-res-icon { width: 22px; height: 22px; }
.pw-hud { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px; align-items: start; padding: 8px; border-radius: 6px; background: linear-gradient(#5a3a1f, #3e2814); border: 1px solid #2c1a0c; box-shadow: inset 0 1px 0 rgb(255 220 170 / .2); }
.pw-mini { display: block; width: 100%; aspect-ratio: 40 / 28; border: 2px solid #c9a46a; border-radius: 3px; background: #0b0e08; cursor: pointer; }
.pw-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; align-items: stretch; min-height: 44px; }
.pw-hud .valley-tool { background: linear-gradient(#f4e6c6, #dcc79a); border-color: #8a6a3a; color: #2c1a0c; }
.pw-hud .valley-tool .valley-tool-cost { color: #6b4526; }
.pw-hud .valley-tool[aria-pressed="true"] { background: linear-gradient(#9fd07a, #6ea653); border-color: #3e6b2a; color: #10220a; }
.pw-icon { width: 32px; height: 32px; }
.pw-what, .pw-queue { grid-column: 1 / -1; margin: 0; font-weight: 600; color: #f6e7c8; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-what.muted { color: #e6cf9c; font-weight: 400; }
.pw-portrait { width: 36px; height: 36px; background: rgb(0 0 0 / .25); border: 1px solid #c9a46a; border-radius: 4px; }
.pw-queue { font-weight: 400; font-size: .9rem; color: #e6cf9c; }
@media (max-width: 520px) { .pw-hud { grid-template-columns: 104px 1fr; gap: 8px; padding: 6px; } .pw-panel { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }
.valley-tool:disabled { opacity: .5; cursor: default; }
.pw-start .game-button { width: 100%; }

/* Jambo's picture on his app page (content/jambo-app.json). */
.app-art { display: block; width: 120px; height: auto; margin: 0 0 8px; image-rendering: pixelated; }

/* ---------- Admin page: the site style choice (Simple / Standard / Windows) ---------- */
.style-choices { border: 0; margin: 0; padding: 0; }
.style-choice { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.style-choice:last-child { border-bottom: 1px solid var(--line); }
.style-choice input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--moss); flex: none; }

/* ---------- The Windows style (public/xp.js): a Windows XP desktop ----------
   html[data-mode="windows"]. The stage becomes the desktop, pages open as windows on it, and
   Bopper sits in the bottom-right corner with a yellow balloon. */
:root:is([data-mode="windows"], [data-mode="win98"]) {
  --xp-bar: 30px;
  --xp-blue: #0a246a;
  color-scheme: light;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  /* The site's own colours, set light, for what's inside the windows. */
  --bg: #ece9d8; --surface: #ffffff; --surface-2: #f1efe2; --ink: #000000; --muted: #555555; --line: #c9c5b2;
  --moss: #2f6fcf; --moss-ink: #ffffff; --accent: #2f6fcf; --member: #9a5b00; --radius: 4px;
  --shadow: 0 1px 3px rgb(0 0 0 / .25);
}
:root:is([data-mode="windows"], [data-mode="win98"]) body {
  height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; font-size: 13px; line-height: 1.4; color: #000;
  /* public/assets/bliss.jpg if it's been added (not in the repository); otherwise the drawn hill below it. */
  background: url(/assets/bliss.jpg) center / cover no-repeat, #3a6ea5 url(/assets/xp-wallpaper.svg) center / cover no-repeat;
}
:root:is([data-mode="windows"], [data-mode="win98"]) .topbar, :root:is([data-mode="windows"], [data-mode="win98"]) .scenery, :root:is([data-mode="windows"], [data-mode="win98"]) .stage-empty { display: none; }
:root:is([data-mode="windows"], [data-mode="win98"]) .layout { display: block; padding: 0; max-width: none; }
:root:is([data-mode="windows"], [data-mode="win98"]) .stage-wrap { position: static; }
:root:is([data-mode="windows"], [data-mode="win98"]) .stage {
  position: fixed; inset: 0 0 var(--xp-bar) 0; z-index: 1; display: block; min-height: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: hidden;
}
:root:is([data-mode="windows"], [data-mode="win98"]) .stage h2 { font-size: 1.3rem; }

/* Desktop icons: a column down the left, white labels with a shadow. */
.xp-icons { list-style: none; margin: 0; padding: 10px 6px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 86px); gap: 4px 8px; height: 100%; width: max-content; }
.xp-icon {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 82px; padding: 4px 2px; border: 1px solid transparent; border-radius: 2px;
  background: none; color: #fff; font: 12px/1.2 Tahoma, "Segoe UI", sans-serif; text-align: center; cursor: default; text-shadow: 1px 1px 1px #000, 0 0 3px rgb(0 0 0 / .6);
}
.xp-icon img { filter: drop-shadow(1px 2px 1px rgb(0 0 0 / .35)); }
.xp-icon span { padding: 0 2px; overflow-wrap: anywhere; }
.xp-icon.is-selected span { background: #316ac5; text-shadow: none; }
.xp-icon.is-selected img { filter: drop-shadow(1px 2px 1px rgb(0 0 0 / .35)) sepia(1) hue-rotate(180deg) saturate(3) brightness(.8); }
.xp-icon:focus-visible { outline: 1px dotted #fff; }
.xp-icon.is-ghost { opacity: .55; }

/* Windows: Luna blue title bars, rounded top corners. */
.xp-window {
  position: absolute; display: flex; flex-direction: column; min-width: 200px;
  background: #ece9d8; border: 3px solid #0831d9; border-top: 0; border-radius: 8px 8px 0 0;
  box-shadow: 2px 3px 10px rgb(0 0 0 / .45);
}
.xp-window:not(.is-active) { border-color: #7a96df; }
.xp-window[hidden] { display: none; }
.xp-window.is-max { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; }
.xp-titlebar {
  flex: none; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 4px 0 6px; border-radius: 7px 7px 0 0;
  background: linear-gradient(#0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7);
  color: #fff; font: bold 13px Tahoma, "Trebuchet MS", sans-serif; text-shadow: 1px 1px #0f1089; user-select: none; touch-action: none; cursor: default;
}
.xp-window:not(.is-active) .xp-titlebar { background: linear-gradient(#a6caf0, #7fa6e4 10%, #7b9fe0 50%, #8eb2ee 90%, #7b99d9); color: #dbe5f8; text-shadow: none; }
.xp-window.is-max .xp-titlebar { border-radius: 0; }
.xp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-title-icon { flex: none; }
.xp-controls { display: flex; gap: 2px; }
.xp-controls button {
  position: relative; width: 21px; height: 21px; padding: 0; border: 1px solid #fff; border-radius: 3px; cursor: pointer;
  background: linear-gradient(135deg, #5f9cff, #2463e0 60%, #1847c4); box-shadow: inset -1px -1px 2px rgb(0 0 0 / .2);
}
.xp-controls button:hover { filter: brightness(1.15); }
.xp-controls .xp-close { background: linear-gradient(135deg, #f0a08a, #e0532f 55%, #c33a17); }
.xp-controls button::before, .xp-controls button::after { content: ""; position: absolute; background: #fff; }
.xp-min::before { left: 5px; bottom: 4px; width: 7px; height: 3px; }
.xp-max::before { left: 4px; top: 4px; width: 11px; height: 11px; background: none; border: 1px solid #fff; border-top-width: 3px; }
.xp-max.is-restore::before { left: 3px; top: 7px; width: 8px; height: 8px; }
.xp-max.is-restore::after { left: 7px; top: 3px; width: 8px; height: 8px; background: none; border: 1px solid #fff; border-top-width: 2px; }
.xp-close::before, .xp-close::after { left: 9px; top: 3px; width: 2px; height: 14px; }
.xp-close::before { transform: rotate(45deg); }
.xp-close::after { transform: rotate(-45deg); }
.xp-window:not(.is-active) .xp-controls button { opacity: .7; }
.xp-body { flex: 1; min-height: 0; overflow: auto; margin: 0 0 3px; padding: 14px 16px; background: #fff; border-top: 1px solid #919b9c; color: #000; }
.xp-body .topic > header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the title bar says it */
.xp-body .topic { animation: none; }
.xp-grip { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, #b5b19e 50%, #b5b19e 58%, transparent 58%, transparent 70%, #b5b19e 70%, #b5b19e 78%, transparent 78%); }
.xp-window.is-max .xp-grip { display: none; }
.xp-window.is-dragging { opacity: .96; }
.xp-window.is-dragging .xp-body { pointer-events: none; } /* frames inside don't swallow the drag */
.xp-plain { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; text-align: center; }
.xp-plain p { margin: 0; }

/* Buttons inside windows, in the XP style. */
:root:is([data-mode="windows"], [data-mode="win98"]) .xp-body :is(.game-button, .valley-small, .valley-tool, .message-delete, .admin-button, .dressup-tab, .dressup-item, .admin-form button, button.xp-cp-back) {
  font: 12px Tahoma, "Segoe UI", sans-serif; color: #000; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5); box-shadow: inset 0 -1px 0 rgb(0 0 0 / .06);
}
:root:is([data-mode="windows"], [data-mode="win98"]) .xp-body :is(.game-button, .valley-small, .valley-tool, .message-delete, .admin-button, .admin-form button):hover { box-shadow: inset 0 0 0 2px #f8b636; }
:root:is([data-mode="windows"], [data-mode="win98"]) .xp-body :is(.valley-tool, .valley-small, .dressup-tab, .dressup-item)[aria-pressed="true"],
:root:is([data-mode="windows"], [data-mode="win98"]) .xp-body .dressup-tab[aria-selected="true"] { background: linear-gradient(#e5e4dd, #f4f3ee); box-shadow: inset 1px 1px 2px rgb(0 0 0 / .25); color: #000; }
:root:is([data-mode="windows"], [data-mode="win98"]) .xp-body .game-button.primary { box-shadow: inset 0 0 0 1px #3c7fb1; }
:root:is([data-mode="windows"], [data-mode="win98"]) .xp-body :is(input[type="text"], input[type="password"], textarea) { font: 13px Tahoma, sans-serif; border: 1px solid #7f9db9; border-radius: 0; padding: 3px 4px; }

/* The taskbar. */
.xp-taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; height: var(--xp-bar); display: flex; align-items: stretch;
  background: linear-gradient(#1f2f86, #3168d5 3%, #4993e6 6%, #2157d7 10%, #2663e0 50%, #2a6be4 85%, #1941a5 100%);
  font: 12px Tahoma, "Segoe UI", sans-serif; color: #fff;
}
.xp-start-button {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 0 18px 0 8px; margin-right: 10px; border: 0; border-radius: 0 10px 10px 0; cursor: pointer;
  background: linear-gradient(#3c9a3c, #5cbe5c 10%, #3c9a3c 60%, #2f862f); color: #fff; box-shadow: 2px 0 3px rgb(0 0 0 / .35), inset 0 1px 1px rgb(255 255 255 / .4);
  font: italic bold 18px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 2px rgb(0 0 0 / .5);
}
.xp-start-button:hover, .xp-start-button.is-open { filter: brightness(1.1); }
.xp-start-button.is-open { box-shadow: inset 1px 1px 4px rgb(0 0 0 / .5); }
.xp-start-flag { filter: drop-shadow(1px 1px 1px rgb(0 0 0 / .4)); }
.xp-tasks { flex: 1; min-width: 0; display: flex; gap: 3px; align-items: center; padding: 0 4px; overflow: hidden; }
.xp-task {
  display: flex; align-items: center; gap: 5px; min-width: 0; width: 160px; height: 24px; padding: 0 8px; border: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(#3c81f3, #3077ec 50%, #2f6fe0); color: #fff; font: 12px Tahoma, sans-serif; text-align: left; box-shadow: inset 1px 1px 1px rgb(255 255 255 / .3), 1px 1px 1px rgb(0 0 0 / .3);
}
.xp-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-task.is-active { background: linear-gradient(#1e52b7, #1a4aa8); box-shadow: inset 1px 1px 3px rgb(0 0 0 / .5); }
.xp-tray { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-left: 1px solid #092e9e; box-shadow: inset 1px 0 1px #1ba0f4;
  background: linear-gradient(#0c59b9, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 20%, #0d8dea 60%, #0a71d4 90%, #0c59b9); }
.xp-tray-bopper { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.xp-tray-bopper img { width: 18px; height: 18px; image-rendering: pixelated; }
.xp-tray-user { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-clock { white-space: nowrap; }

/* The Start menu. */
.xp-start {
  position: fixed; left: 0; bottom: var(--xp-bar); z-index: 950; width: min(400px, 100vw); display: flex; flex-direction: column;
  background: #fff; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 3px -2px 10px rgb(0 0 0 / .4); font: 12px Tahoma, sans-serif;
}
.xp-start[hidden] { display: none; }
.xp-start-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #fff; font: bold 15px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 2px rgb(0 0 0 / .5);
  background: linear-gradient(#1868e6, #3a8cf0 10%, #1a64dc 40%, #1a5bd4); border-bottom: 2px solid #f59c2a; }
.xp-avatar { width: 42px; height: 42px; padding: 2px; border: 2px solid #fff; border-radius: 4px; background: #e8d9b8; image-rendering: pixelated; }
.xp-start-cols { display: grid; grid-template-columns: 1fr 1fr; }
.xp-start-cols ul { list-style: none; margin: 0; padding: 6px 4px; }
.xp-start-right { background: #d3e5fa; border-left: 1px solid #95bdee; }
.xp-start-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 2px; background: none; color: #000; font: 12px Tahoma, sans-serif; text-align: left; cursor: pointer; }
.xp-start-right .xp-start-item { color: #0a246a; }
.xp-start-item.is-bold { font-weight: bold; }
.xp-start-item:hover, .xp-start-item:focus-visible { background: #316ac5; color: #fff; outline: none; }
.xp-start-sep { height: 1px; margin: 4px 6px; background: linear-gradient(90deg, transparent, #c5c2b2, transparent); }
.xp-start-foot { display: flex; justify-content: flex-end; gap: 4px; padding: 4px 8px; background: linear-gradient(#1868e6, #1a5bd4); }
.xp-start-foot li { list-style: none; }
.xp-start-foot .xp-start-item { color: #fff; }
.xp-start-foot .xp-start-item img { width: 22px; height: 22px; }

/* Bopper in the corner, Clippy-style, with a yellow balloon above him. */
:root:is([data-mode="windows"], [data-mode="win98"]) .assistant {
  position: fixed; right: 12px; bottom: calc(var(--xp-bar) + 8px); top: auto; z-index: 800; display: block; width: 0; height: 0; gap: 0;
}
:root:is([data-mode="windows"], [data-mode="win98"]) .beaver-wrap { display: block; }
:root:is([data-mode="windows"], [data-mode="win98"]) .perch { position: absolute; right: 0; bottom: 0; width: 104px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .beaver img { filter: drop-shadow(2px 4px 3px rgb(0 0 0 / .35)); }
:root:is([data-mode="windows"], [data-mode="win98"]) .mood { margin-top: 2px; padding: 2px 6px; border-radius: 6px; background: rgb(255 255 225 / .9); border: 1px solid #b3a96b; }
:root:is([data-mode="windows"], [data-mode="win98"]) .mood-label { color: #000; font-size: 11px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .mood-count { color: #555; font-size: 10px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .bubble {
  position: absolute; right: 70px; bottom: 150px; width: min(330px, calc(100vw - 24px)); max-height: calc(100dvh - var(--xp-bar) - 190px); overflow: auto;
  margin: 0; padding: 10px 12px 12px; background: #ffffe1; border: 1px solid #000; border-radius: 10px; box-shadow: 3px 3px 6px rgb(0 0 0 / .35);
  font: 12px/1.45 Tahoma, sans-serif; color: #000; gap: 8px;
}
:root:is([data-mode="windows"], [data-mode="win98"]) .beaver-wrap > .bubble { margin-top: 0; }
:root:is([data-mode="windows"], [data-mode="win98"]) .bubble::after { left: auto; right: 28px; bottom: -8px; background: #ffffe1; border: 0; border-right: 1px solid #000; border-bottom: 1px solid #000; }
:root:is([data-mode="windows"], [data-mode="win98"]) .bubble-text { padding-right: 16px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .assistant.is-tucked .bubble { display: none; }
.xp-balloon-close { position: absolute; top: 4px; right: 5px; width: 16px; height: 16px; padding: 0; border: 1px solid #b3a96b; border-radius: 3px; background: #fff; color: #555; font: bold 12px/12px Tahoma, sans-serif; cursor: pointer; }
.xp-balloon-close:hover { background: #e2412e; border-color: #a22; color: #fff; }
:root:is([data-mode="windows"], [data-mode="win98"]) .reply-area { gap: 8px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .chips { justify-content: flex-start; gap: 4px 6px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .chips:empty { min-height: 0; }
:root:is([data-mode="windows"], [data-mode="win98"]) .chip[data-topic] { display: none; } /* the pages are on the desktop */
:root:is([data-mode="windows"], [data-mode="win98"]) .chip {
  padding: 1px 0; border: 0; border-radius: 0; background: none; color: #0033cc; font: 12px Tahoma, sans-serif; text-decoration: underline; animation: none;
}
:root:is([data-mode="windows"], [data-mode="win98"]) .chip::before { content: "● "; color: #2f6fcf; text-decoration: none; display: inline-block; margin-right: 2px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .chip:hover { background: none; color: #e2412e; }
:root:is([data-mode="windows"], [data-mode="win98"]) .composer input { font: 12px Tahoma, sans-serif; padding: 4px 6px; border: 1px solid #7f9db9; border-radius: 0; background: #fff; color: #000; }
:root:is([data-mode="windows"], [data-mode="win98"]) .composer button { width: auto; padding: 0 12px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5); color: #000; }
:root:is([data-mode="windows"], [data-mode="win98"]) .composer button svg { width: 16px; height: 16px; }
:root:is([data-mode="windows"], [data-mode="win98"]) .perch.is-hiding::after { bottom: 20px; color: #fff; text-shadow: 1px 1px 2px #000; }

/* The Control Panel (the Admin page). */
.xp-body:has(.xp-cp-article) { padding: 0; overflow: hidden; }
.xp-cp-article { height: 100%; }
.xp-cp-article > header { display: none; }
.xp-cp-article > div, .xp-cp { height: 100%; }
.xp-cp { display: flex; flex-direction: column; }
.xp-cp-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #ece9d8; border-bottom: 1px solid #c5c2b2; }
.xp-cp-back { padding: 2px 8px; cursor: pointer; }
.xp-cp-back:disabled { opacity: .5; cursor: default; }
.xp-cp-address { flex: 1; display: flex; align-items: center; gap: 6px; padding: 2px 6px; background: #fff; border: 1px solid #7f9db9; font-size: 12px; }
.xp-cp-split { flex: 1; min-height: 0; display: flex; }
.xp-cp-side { flex: none; width: 190px; padding: 12px 10px; overflow: auto; background: linear-gradient(#7ba2e7, #6375d6); }
.xp-cp-box { margin-bottom: 12px; border-radius: 4px 4px 0 0; overflow: hidden; background: #d6dff7; }
.xp-cp-box h3 { margin: 0 !important; padding: 5px 10px; font: bold 12px Tahoma, sans-serif; color: #215dc6; background: linear-gradient(90deg, #fff, #c6d3f7); }
.xp-cp-link { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 10px; border: 0; background: none; color: #215dc6; font: 12px Tahoma, sans-serif; text-align: left; cursor: pointer; }
.xp-cp-link:hover { text-decoration: underline; color: #428eff; }
.xp-cp-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px; background: #fff; }
.xp-cp-pick { margin: 0 0 6px !important; font: bold 18px "Trebuchet MS", Tahoma, sans-serif; color: #003399; border-bottom: 1px solid #9db9eb; padding-bottom: 4px; }
.xp-cp-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.xp-cp-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 3px; background: none; text-align: left; cursor: pointer; font: 12px Tahoma, sans-serif; color: #000; }
.xp-cp-cat:hover { border-color: #9db9eb; background: #eef3fd; }
.xp-cp-cat strong { display: block; color: #0b4cb4; font-size: 13px; }
.xp-cp-cat:hover strong { text-decoration: underline; }
.xp-cp-cat span span { color: #555; }
.xp-cp-pane > h3:first-child { margin-top: 0; font: bold 16px "Trebuchet MS", Tahoma, sans-serif; color: #003399; }

/* Phones: windows fill the screen; Bopper is smaller. */
@media (max-width: 700px) {
  :root:is([data-mode="windows"], [data-mode="win98"]) { --xp-bar: 40px; }
  .xp-start-button { font-size: 16px; padding-right: 12px; margin-right: 4px; }
  .xp-task { width: auto; max-width: 120px; height: 32px; }
  .xp-tray-user { display: none; }
  .xp-icons { grid-template-rows: repeat(auto-fill, 84px); }
  :root:is([data-mode="windows"], [data-mode="win98"]) .perch { width: 72px; }
  :root:is([data-mode="windows"], [data-mode="win98"]) .mood { display: none; }
  :root:is([data-mode="windows"], [data-mode="win98"]) .bubble { right: 0; bottom: 80px; }
  :root:is([data-mode="windows"], [data-mode="win98"]) .bubble::after { right: 26px; }
  .xp-cp-side { display: none; }
  .xp-start-cols { grid-template-columns: 1fr; }
  .xp-start-right { border-left: 0; border-top: 1px solid #95bdee; }
}

/* ---------- Windows 98 (html[data-mode="win98"]): the same desktop in classic grey ----------
   Raised and sunken bevels, navy title bars, the teal desktop. Overrides the XP look above. */
:root[data-mode="win98"] {
  --xp-bar: 28px;
  --w98-raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --w98-sunken: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --w98-window: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  --moss: #000080; --accent: #000080;
}
:root[data-mode="win98"] body { background: #008080; font-size: 12px; }
:root[data-mode="win98"] :is(.xp-icon, .xp-task, .xp-start-item, .xp-cp-cat, .xp-cp-link, .xp-titlebar, .xp-taskbar, .xp-start, .bubble, .composer input) { font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif; }

/* Desktop icons: white labels; picked ones get a navy label with a dotted edge. */
:root[data-mode="win98"] .xp-icon { text-shadow: none; font-size: 12px; }
:root[data-mode="win98"] .xp-icon img { filter: none; }
:root[data-mode="win98"] .xp-icon.is-selected span { background: #000080; outline: 1px dotted #ffff7f; }
:root[data-mode="win98"] .xp-icon.is-selected img { filter: sepia(1) hue-rotate(190deg) saturate(4) brightness(.6); }

/* Windows: a grey bevelled frame, navy-to-blue title bar, square buttons with black marks. */
:root[data-mode="win98"] .xp-window { background: #c0c0c0; border: 0; border-radius: 0; padding: 3px; box-shadow: var(--w98-window), 2px 2px 0 rgb(0 0 0 / .25); }
:root[data-mode="win98"] .xp-window.is-max { box-shadow: var(--w98-window); }
:root[data-mode="win98"] .xp-titlebar { height: 20px; padding: 0 2px 0 3px; border-radius: 0; gap: 4px; background: linear-gradient(90deg, #000080, #1084d0); font-size: 12px; text-shadow: none; }
:root[data-mode="win98"] .xp-window:not(.is-active) .xp-titlebar { background: linear-gradient(90deg, #808080, #b5b5b5); color: #c0c0c0; }
:root[data-mode="win98"] .xp-controls { gap: 0; }
:root[data-mode="win98"] .xp-controls button { width: 16px; height: 14px; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w98-raised); }
:root[data-mode="win98"] .xp-controls button:hover { filter: none; }
:root[data-mode="win98"] .xp-controls button:active { box-shadow: var(--w98-sunken); }
:root[data-mode="win98"] .xp-controls .xp-close { margin-left: 2px; background: #c0c0c0; }
:root[data-mode="win98"] .xp-controls button::before, :root[data-mode="win98"] .xp-controls button::after { background: #000; }
:root[data-mode="win98"] .xp-min::before { left: 4px; bottom: 3px; width: 6px; height: 2px; }
:root[data-mode="win98"] .xp-max::before { left: 3px; top: 2px; width: 9px; height: 8px; background: none; border: 1px solid #000; border-top-width: 2px; }
:root[data-mode="win98"] .xp-max.is-restore::before { left: 3px; top: 5px; width: 6px; height: 5px; }
:root[data-mode="win98"] .xp-max.is-restore::after { left: 5px; top: 2px; width: 6px; height: 5px; background: none; border: 1px solid #000; border-top-width: 2px; }
:root[data-mode="win98"] .xp-close::before, :root[data-mode="win98"] .xp-close::after { left: 7px; top: 2px; width: 2px; height: 10px; }
:root[data-mode="win98"] .xp-window:not(.is-active) .xp-controls button { opacity: 1; }
:root[data-mode="win98"] .xp-body { margin: 2px 0 0; border-top: 0; box-shadow: var(--w98-sunken); padding: 14px 16px; }
:root[data-mode="win98"] .xp-body:has(.xp-cp-article) { padding: 0; }
:root[data-mode="win98"] .xp-grip { right: 1px; bottom: 1px; background: linear-gradient(135deg, transparent 45%, #fff 45%, #fff 52%, #808080 52%, #808080 60%, transparent 60%, transparent 70%, #fff 70%, #fff 77%, #808080 77%, #808080 85%, transparent 85%); }

/* Buttons and boxes inside windows: bevelled grey, no rounded corners. */
:root[data-mode="win98"] .xp-body :is(.game-button, .valley-small, .valley-tool, .message-delete, .admin-button, .dressup-tab, .dressup-item, .admin-form button, button.xp-cp-back),
:root[data-mode="win98"] .xp-cp-back {
  font-family: inherit; color: #000; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w98-raised);
}
:root[data-mode="win98"] .xp-body :is(.game-button, .valley-small, .valley-tool, .message-delete, .admin-button, .admin-form button):hover { box-shadow: var(--w98-raised); }
:root[data-mode="win98"] .xp-body :is(.game-button, .valley-small, .valley-tool, .message-delete, .admin-button, .admin-form button):active,
:root[data-mode="win98"] .xp-body :is(.valley-tool, .valley-small, .dressup-tab, .dressup-item)[aria-pressed="true"],
:root[data-mode="win98"] .xp-body .dressup-tab[aria-selected="true"] { background: #c0c0c0; box-shadow: var(--w98-sunken); }
:root[data-mode="win98"] .xp-body .game-button.primary { box-shadow: 0 0 0 1px #000, var(--w98-raised); }
:root[data-mode="win98"] .xp-body :is(input[type="text"], input[type="password"], textarea) { border: 0; box-shadow: var(--w98-sunken); padding: 4px 5px; }

/* The taskbar: grey, with a bevelled Start button and a sunken tray. */
:root[data-mode="win98"] .xp-taskbar { background: #c0c0c0; color: #000; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; padding: 2px 2px 0; }
:root[data-mode="win98"] .xp-start-button { margin: 2px 4px 2px 0; padding: 0 6px 0 4px; border-radius: 0; background: #c0c0c0; color: #000; font: bold 12px "MS Sans Serif", Tahoma, sans-serif; text-shadow: none; box-shadow: var(--w98-raised); }
:root[data-mode="win98"] .xp-start-button:hover { filter: none; }
:root[data-mode="win98"] .xp-start-button.is-open { box-shadow: var(--w98-sunken); filter: none; }
:root[data-mode="win98"] .xp-start-flag { filter: none; width: 16px; height: 16px; }
:root[data-mode="win98"] .xp-tasks { gap: 3px; padding: 2px 0; }
:root[data-mode="win98"] .xp-task { height: 22px; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w98-raised); }
:root[data-mode="win98"] .xp-task.is-active { font-weight: bold; box-shadow: var(--w98-sunken); background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px; }
:root[data-mode="win98"] .xp-tray { margin: 2px 2px 2px 0; padding: 0 8px; border: 0; background: #c0c0c0; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; }

/* The Start menu: one column, with the "Windows 98" banner up the left side. */
:root[data-mode="win98"] .xp-start { flex-direction: row; width: min(250px, 100vw); padding: 3px; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w98-raised), 2px 2px 0 rgb(0 0 0 / .3); }
.w98-banner { flex: none; width: 24px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; background: linear-gradient(0deg, #000080, #1084d0); }
.w98-banner span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font: 18px Arial, sans-serif; letter-spacing: .02em; }
.w98-banner b { font-weight: 900; color: #c0c0c0; }
.w98-menu { flex: 1; list-style: none; margin: 0; padding: 2px 0; }
:root[data-mode="win98"] .xp-start-item { padding: 3px 18px 3px 6px; border-radius: 0; color: #000; font-size: 12px; }
:root[data-mode="win98"] .xp-start-item img { width: 24px; height: 24px; }
:root[data-mode="win98"] .xp-start-item:hover, :root[data-mode="win98"] .xp-start-item:focus-visible { background: #000080; color: #fff; }
:root[data-mode="win98"] .xp-start-sep { height: 0; margin: 3px 2px; background: none; border-top: 1px solid #808080; border-bottom: 1px solid #fff; }

/* Bopper's balloon: Office 97's yellow, with a squarer edge. */
:root[data-mode="win98"] .bubble { border-radius: 4px; box-shadow: 2px 2px 0 rgb(0 0 0 / .35); }
:root[data-mode="win98"] .composer input { border: 0; box-shadow: var(--w98-sunken); }
:root[data-mode="win98"] .composer button { border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w98-raised); }
:root[data-mode="win98"] .mood { border-radius: 0; }
:root[data-mode="win98"] .xp-balloon-close { border-radius: 0; border: 0; background: #c0c0c0; box-shadow: var(--w98-raised); color: #000; }
:root[data-mode="win98"] .xp-balloon-close:hover { background: #c0c0c0; color: #000; }

/* The Control Panel: a folder of large icons, with the "web view" pane on the left. */
:root[data-mode="win98"] .xp-cp-bar { background: #c0c0c0; border-bottom: 0; box-shadow: inset 0 -1px #808080, inset 0 -2px #fff; }
:root[data-mode="win98"] .xp-cp-address { border: 0; box-shadow: var(--w98-sunken); }
:root[data-mode="win98"] .xp-cp-side { width: 180px; background: #fff; border-right: 1px solid #c0c0c0; }
:root[data-mode="win98"] .xp-cp-box { background: none; border-radius: 0; }
:root[data-mode="win98"] .xp-cp-box h3 { padding: 0 0 4px; background: none; color: #000; font: bold 20px Arial, sans-serif; border-bottom: 3px solid; border-image: linear-gradient(90deg, #000080, #1084d0, transparent) 1; }
:root[data-mode="win98"] .xp-cp-box + .xp-cp-box h3 { font-size: 13px; border-bottom-width: 1px; }
:root[data-mode="win98"] .xp-cp-link { padding: 3px 0; color: #00f; }
:root[data-mode="win98"] .xp-cp-link span { text-decoration: underline; }
:root[data-mode="win98"] .xp-cp-pick { display: none; }
:root[data-mode="win98"] .xp-cp-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px 6px; }
:root[data-mode="win98"] .xp-cp-cat { flex-direction: column; gap: 4px; text-align: center; border: 0; border-radius: 0; }
:root[data-mode="win98"] .xp-cp-cat:hover { background: none; }
:root[data-mode="win98"] .xp-cp-cat strong { color: #000; font-weight: normal; font-size: 12px; padding: 0 2px; }
:root[data-mode="win98"] .xp-cp-cat:hover strong, :root[data-mode="win98"] .xp-cp-cat:focus-visible strong { background: #000080; color: #fff; text-decoration: none; }
:root[data-mode="win98"] .xp-cp-cat span span { display: none; }
:root[data-mode="win98"] .xp-cp-pane > h3:first-child { color: #000; font-family: Arial, sans-serif; }
@media (max-width: 700px) { :root[data-mode="win98"] { --xp-bar: 40px; } :root[data-mode="win98"] .xp-task { height: 30px; } }

/* ---------- the Assistant page: a chat with Bopper (public/household.js) ---------- */
.hh-chat { margin-bottom: 20px; }
.hh-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.hh-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.hh-msg.hh-you { align-self: flex-end; background: var(--moss); color: var(--moss-ink); }
.hh-msg.hh-you .muted { color: inherit; opacity: .8; }
.hh-msg.hh-note { align-self: center; background: none; border: 1px dashed var(--line); font-size: .9em; }
.hh-who { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hh-text { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hh-msg time { font-size: .75rem; }
.hh-typing { font-style: italic; }
.hh-form { display: grid; gap: 8px; margin-top: 12px; }
.hh-form textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; }
.hh-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }