/* Familiar layout, different atmosphere. Buddy keeps the original palette. */
:root[data-companion-theme]:not([data-companion-theme="moss"]) {
  --paper: var(--companion-paper);
  --ink: var(--companion-ink);
  --muted: var(--companion-muted);
}
:root[data-companion-theme]:not([data-companion-theme="moss"]) body {
  background: var(--paper);
}
body { transition: background-color 420ms ease; }
/* Keep the home canvas beneath the opening surface until home retires. A dark
   room palette must not paint the uncovered part of home during the dissolve. */
html:has(body.in-call #home[hidden]),
:root[data-companion-theme] body.in-call:has(#home[hidden]) {
  background: var(--call-canvas, #111612);
  background-image: none;
}
body.in-call, :root:has(.hangout-motion) body { transition: none; }
:root[data-companion-theme]:not([data-companion-theme="moss"]) .home #home-heading h1 { color: var(--companion-ink); }
:root[data-companion-theme]:not([data-companion-theme="moss"]) .home #home-heading h1::before { background: var(--companion-brush); }
:root[data-companion-theme]:not([data-companion-theme="moss"]) .home .companion-halo { background: var(--companion-halo); }
:root[data-companion-theme]:not([data-companion-theme="moss"]) .composer .start-button {
  background: var(--companion-start);
  color: var(--companion-start-ink);
  box-shadow: 0 3px 12px #302d3018;
  animation: none;
}
:root[data-companion-theme]:not([data-companion-theme="moss"]) .start-copy > small { color: inherit; opacity: .85; }
:root[data-companion-theme]:not([data-companion-theme="moss"]) .collection-hint { background: var(--companion-paper); color: var(--companion-ink); }
/* A faint printed-paper grain, drawn with CSS; no texture download or animation. */
:root[data-companion-theme="riff"] body {
  background-image: radial-gradient(#302d3010 .6px, transparent .8px);
  background-size: 5px 7px;
}
:root[data-companion-theme="riff"] .home .companion-halo {
  border-radius: 35% 47% 39% 42%;
  transform: rotate(-9deg);
}
.collection-feature[data-companion-theme]:not([data-companion-theme="moss"]) {
  border-radius: 18px;
  background: radial-gradient(ellipse at 23% 50%, var(--companion-halo), transparent 65%);
}
.call[data-companion-theme] {
  /* Call text stays readable even when the guest's home palette is different. */
  --ink: var(--companion-room-ink);
  --muted: var(--companion-room-muted);
  color: var(--companion-room-ink);
}
.call[data-companion-theme]:not([data-companion-theme="moss"]) { color: var(--companion-room-ink); }
.call[data-companion-theme]:not([data-companion-theme="moss"]) .stage,
.call[data-companion-theme]:not([data-companion-theme="moss"]) .tile {
  background: var(--companion-room);
}
/* Keep group-camera gutters and the toolbar surround on the call canvas. */
.call.has-remote[data-companion-theme] .stage { background: #111612; }
.call[data-companion-theme]:not([data-companion-theme="moss"]) .tile .buddy {
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--companion-glow) 35%, transparent), transparent 70%);
}
.call[data-companion-theme]:not([data-companion-theme="moss"]) .waiting-glow {
  background: radial-gradient(ellipse, color-mix(in srgb, var(--companion-glow) 55%, transparent), transparent 65%);
}
.call[data-companion-theme]:not([data-companion-theme="moss"]) :is(.waiting-copy .eyebrow, .waiting p) { color: var(--companion-room-muted); }
.call[data-companion-theme]:not([data-companion-theme="moss"]) .waiting .soft-button {
  background: transparent;
  color: var(--companion-room-ink);
  border-color: var(--companion-room-muted);
}
.call[data-companion-theme] :is(.call-controls, .chat) { --ink: #383e32; --muted: #77796c; color: var(--ink); }
.call[data-companion-theme]:not([data-companion-theme="moss"]) .control:is(#mic-button, #camera-button)[data-media-state="on"] {
  background: var(--companion-accent);
  color: var(--companion-accent-ink);
}
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* The picker owns its palette instead of inheriting the guest's home colors.
   Sticky surfaces use the same paper, avoiding cream bands on colored themes. */
.collection.modal[data-companion-theme] {
  --collection-paper: var(--companion-paper);
  --ink: var(--companion-ink);
  --muted: var(--companion-muted);
  color: var(--ink);
  background: var(--collection-paper);
}
.collection[data-companion-theme] .collection-feature { background: none; }
.collection[data-companion-theme] :is(.collection-intro p, .collection-detail p) { color: var(--muted); }