/* Bloom: Tidepool colors and the people-first hangout card (the design Elliott chose
   in the bloom study, 2026-09-27). Loaded last; it restyles existing surfaces rather
   than replacing their markup, so ids and behavior stay the same.
   Tokens come from the Tidepool palette (theme-palettes.js), with fallbacks for the
   first paint before scripts run. */
:root {
  --bloom-canvas: var(--companion-canvas, #fbfbf7);
  --bloom-surface: var(--companion-surface, #efeee9);
  --bloom-surface-border: var(--companion-surface-border, #e2e0d9);
  --bloom-control: var(--companion-control, #efeee9);
  --bloom-line: var(--companion-line, #e8e6e0);
  --bloom-live: var(--companion-live, #ff5a36);
  --bloom-live-text: var(--companion-live-text, #c2361b);
  --bloom-ink: var(--companion-ink, #111111);
  --bloom-muted: var(--companion-muted, #66665f);
}
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/chillin/fonts/nunito-latin.woff2") format("woff2"); }
/* One screen color, the canvas; the system face for text, Nunito for the wordmark. */
:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* No double-tap zoom anywhere (taps land right away); pinch-to-zoom still works. */
html, body { touch-action: manipulation; }
body, html:has(#home:not([hidden])), :root body:has(#home:not([hidden])) { background: var(--bloom-canvas) !important; background-image: none !important; color: var(--bloom-ink); }
.topbar { height: calc(76px + env(safe-area-inset-top)); padding-inline: 20px; }
.wordmark { font-family: "Nunito", ui-rounded, system-ui, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 36px; }
.brand-dot { width: 8px; height: 8px; margin-left: 2px; }
.profile-button { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; background: none; }
#profile-initial { position: absolute; inset: 0; width: auto; height: auto; font-size: 15px; }
.wordmark { color: var(--bloom-ink); }
.brand-dot { background: var(--bloom-ink); }
.profile-button { background: var(--bloom-surface); }

/* The hangout card. On a signed-in home the whole start section is one card that
   reads top to bottom: status, the people (you, and a place for whoever comes),
   who and how long, then the action nearest the thumb, then mic and camera. */
#home:not(.unregistered) #composer-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  grid-template-areas: "info info info info" ". you spot ." "card card card card" "live live live live" "media media media media" "end end end end";
  column-gap: 16px;
  padding: 20px 20px 12px;
  border-radius: 28px;
  /* Ink on cream: a white card with a hairline, so people's circles and the
     coral "live" are the only color on the screen. */
  background: #fff;
  box-shadow: 0 0 0 1px var(--bloom-line), 0 14px 30px -20px #0000004d;
}
#home.unregistered .composer-info, #home.unregistered .composer-open-spot { display: none; }
.composer-info {
  grid-area: info; display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; font-size: 14px; line-height: 22px; color: var(--bloom-muted);
}
.composer-info.is-live { color: var(--bloom-live-text); font-weight: 600; }
.composer-info.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bloom-live); }
#home:not(.unregistered) #home-heading { display: none; }

/* You: your initials in your circle color; tap to pick the color. Creatures are
   retired (circles.js), so their art and motion stay hidden everywhere. */
.person-circle {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--circle-tint, #3cc8c0); color: var(--circle-ink, #06302d);
  font-weight: 700; letter-spacing: -.02em; line-height: 1; user-select: none;
}
#home:not(.unregistered) .home-companion {
  grid-area: you; align-self: start; justify-self: center; position: relative;
  display: grid; justify-items: center; gap: 8px; width: 76px; height: auto; min-height: 0;
  margin: 20px 0 22px; padding: 0; background: none; border: 0; pointer-events: auto; cursor: pointer;
}
#home:not(.unregistered) .you-circle {
  width: 72px; height: 72px; font-size: 26px; border: 3px solid var(--bloom-canvas);
  box-shadow: 0 6px 14px -8px #0006; box-sizing: border-box;
}
#home:not(.unregistered) .home-companion::after { content: "You"; display: block; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--bloom-ink); }
/* The circle stays in place while its colors are open, as in the design. */
#home:not(.unregistered) .home-companion:focus-visible { outline: none; }
html.keys #home:not(.unregistered) .home-companion:focus-visible .you-circle { outline: 3px solid var(--bloom-ink); outline-offset: 3px; }
.home-companion :is(img, .home-creature-motion), #profile-art, #identity-creature,
.next-time-art[data-own-creature], #collection-settings { display: none !important; }
.home.unregistered .you-circle { display: none; }
#profile-initial.person-circle { position: absolute; inset: 0; width: auto; height: auto; font-size: 15px; visibility: visible !important; background: var(--circle-tint); color: var(--circle-ink); }
#home:not(.unregistered) :is(.companion-halo, .companion-note, .collection-hint) { display: none; }
#home.has-owned-hangout .you-circle { box-shadow: 0 0 0 2px var(--bloom-live), 0 6px 14px -8px #0006; }
.composer-open-spot {
  grid-area: spot; align-self: start; display: grid; justify-items: center; gap: 8px;
  width: 76px; margin: 20px 0 22px;
}
.composer-open-spot .open-circle {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px dashed #b9b6ad;
}
.composer-open-spot .open-label { font-size: 14px; line-height: 20px; color: var(--bloom-muted); }

/* The start card sits inside the card now: no second border or gradient. */
#home:not(.unregistered) .composer {
  grid-area: card; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  display: flex; flex-direction: column;
}
#home:not(.unregistered) .composer:focus-within { box-shadow: none; }
/* Who and how long: two pills side by side above the action. */
#home .composer-summary { order: 1; display: flex; gap: 8px; margin: 0 0 12px; }
#home .composer-summary > button, #home .composer-summary > #audience-toggle, #home .composer-summary > #duration-toggle {
  flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 14px; background: var(--bloom-canvas); color: var(--bloom-ink);
  font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
#home .composer-summary > button strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home .composer-summary > button[aria-expanded="true"] { visibility: hidden; }
#home .composer-launch { order: 2; }
#home .composer-options { order: 3; margin: 0; }
#home .composer-topic { order: 4; }
#home .composer .edit-status { order: 5; }
/* The action: one ink button. Your Live card uses the same place to go back in. */
#home:not(.unregistered) .composer .start-button {
  min-height: 54px; padding: 10px 18px; gap: 10px;
  border-radius: 16px; background: var(--bloom-ink); color: var(--bloom-canvas);
  box-shadow: none; text-align: center; justify-content: center; animation: none;
}
#home:not(.unregistered) .composer .start-button:disabled { opacity: .4; }
#home:not(.unregistered) .start-copy > span { font-size: 16px; font-weight: 600; line-height: 22px; }
#home:not(.unregistered) .start-copy > small { color: inherit; opacity: .8; font-size: 13px; }
#home:not(.unregistered) #start-audience { display: none; }
#home:not(.unregistered) .start-arrow { display: none; }
#home:not(.unregistered) .composer .start-button:focus-visible { outline: 3px solid var(--bloom-ink); outline-offset: 3px; }
#home .composer.has-hangout .start-button { min-height: 54px; padding: 10px 18px; }
#home .composer.has-hangout .start-copy > span { font-size: 16px; }
#home #add-note { min-height: 44px; margin-top: 4px; background: none; border: 0; color: var(--bloom-muted); font: inherit; font-size: 14px; }
#home:not(.unregistered) .composer textarea { color: var(--bloom-ink); background: var(--bloom-canvas); border-radius: 14px; }
/* Mic and camera: one quiet line under the card's action. */
#home:not(.unregistered) #prejoin-settings { grid-area: media; }
#home:not(.unregistered) .prejoin { margin: 8px 0 0; }
#home:not(.unregistered) .small-control { background: var(--bloom-canvas); color: var(--bloom-ink); border-color: transparent; }
#home:not(.unregistered) .small-control[aria-pressed="false"] { background: transparent; color: var(--bloom-muted); }
#home:not(.unregistered) .privacy-note { color: var(--bloom-muted); }

/* Islands: the pill's choices, floating over home (island.js). */
.island-away { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--bloom-canvas) 60%, transparent); }
.island {
  position: fixed; z-index: 61; margin: 0; padding: 8px; overflow: hidden;
  background: var(--bloom-canvas); color: var(--bloom-ink);
  box-shadow: 0 18px 40px -18px #0000005c, 0 0 0 1px var(--bloom-line);
}
.island.scrolls { overflow-y: auto; overscroll-behavior: contain; }
.island.duration-label { display: block; }
.island .duration-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; }
.island :is([data-minutes], .minutes-custom) {
  min-height: 56px; padding: 8px 12px; display: grid; justify-items: start; gap: 2px;
  border: 0; border-radius: 14px; background: var(--bloom-control); color: var(--bloom-ink);
  font: inherit; font-size: 16px; font-weight: 600; text-align: left;
}
.island :is([data-minutes], .minutes-custom) small { font-size: 13px; font-weight: 400; color: var(--bloom-muted); font-variant-numeric: tabular-nums; }
.island :is([data-minutes], .minutes-custom)[aria-pressed="true"] { background: var(--bloom-ink); color: var(--bloom-canvas); }
.island :is([data-minutes], .minutes-custom)[aria-pressed="true"] small { color: inherit; opacity: .8; }
.island .audience-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.island .audience-strip > button, .island #hangout-audience-tags button {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px;
  background: var(--bloom-control); color: var(--bloom-ink);
  font: inherit; font-size: 15px; font-weight: 600;
}
.island .audience-strip > button[aria-pressed="true"], .island #hangout-audience-tags button[aria-pressed="true"] {
  background: var(--bloom-ink); color: var(--bloom-canvas);
}
.island #hangout-audience-tags:not([hidden]) { display: contents; }
.island #audience-picker { margin-top: 10px; }
.island #audience-picker-done { min-height: 44px; border-radius: 14px; background: var(--bloom-ink); color: var(--bloom-canvas); border: 0; font-weight: 600; }
.island #hangout-audience-people { margin: 8px 4px 2px; font-size: 13px; color: var(--bloom-muted); }
@media (prefers-reduced-motion: reduce) { .island-away { transition: none; } }

/* Your circle's color: a live preview and eight dots, in an island. */
.island.circle-colors { display: grid; gap: 10px; padding: 14px; }
.circle-colors-preview { display: flex; align-items: center; gap: 12px; }
.circle-colors-preview .person-circle { width: 52px; height: 52px; font-size: 19px; }
.circle-colors-preview strong { font-size: 16px; }
/* Done closes the picker (2026-09-30, Elliott: tapping outside to finish was confusing). */
.circle-colors-done { margin-left: auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--bloom-ink); color: var(--bloom-canvas); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.circle-colors-done:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.circle-colors-dots { display: grid; grid-template-columns: repeat(4, 44px); justify-content: space-between; gap: 10px 0; }
.circle-color {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--circle-tint); box-shadow: inset 0 0 0 1px #0000001a; cursor: pointer;
}
.circle-color[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bloom-canvas), 0 0 0 5px var(--bloom-ink); }
.circle-color:focus-visible { outline: 3px solid var(--bloom-ink); outline-offset: 3px; }
.circle-colors-note { margin: 0; font-size: 13px; color: var(--bloom-muted); }
/* Your friends under the home card, awake and in full color: each one is
   there to hold for a voice note. Hidden on the Friends tab like the card. */
.home-dozing { margin: 28px 0 0; text-align: center; }
.home-dozing[hidden] { display: none; }
.home-dozing h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--bloom-ink); }
.home-dozing p { margin: 4px 0 0; font-size: 14px; color: var(--bloom-muted); }
.home-dozing-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin: 18px 0 14px; padding: 0; list-style: none; }
.dozing-friend { position: relative; display: grid; justify-items: center; gap: 4px; width: 58px; }
.dozing-face { display: block; width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; color: transparent; font-size: 0; }
.dozing-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--bloom-muted); }
.dozing-more { align-self: start; display: grid; justify-items: center; width: 58px; }
.dozing-more button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--bloom-surface); font: inherit; font-size: 14px; font-weight: 700; color: var(--bloom-ink); cursor: pointer; }
.dozing-more button:focus-visible { outline: 3px solid var(--bloom-ink); outline-offset: 3px; }
/* Eyes: your own circle wearing each style, four to a row like the colors. */
.circle-eyes { display: grid; gap: 8px; }
.circle-eyes[hidden] { display: none; }
.circle-eyes-title { font-size: 13px; font-weight: 600; color: var(--bloom-muted); }
.circle-eyes-choices { display: grid; grid-template-columns: repeat(4, 44px); justify-content: space-between; gap: 10px 6px; }
.circle-eyes-choice { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background-size: cover; color: transparent; font-size: 0; cursor: pointer; }
.circle-eyes-choice[aria-checked="true"] { box-shadow: 0 0 0 2.5px var(--bloom-canvas), 0 0 0 5px var(--bloom-ink); }
.circle-eyes-choice:focus-visible { outline: 3px solid var(--bloom-ink); outline-offset: 3px; }
/* Spheres (2026-09-30): plain and four specials fit one row of five. */
.circle-spheres-choices { grid-template-columns: repeat(5, 38px); gap: 10px 4px; }
.circle-spheres-choices .circle-eyes-choice { width: 38px; height: 38px; }
.circle-spheres-choices .circle-eyes-choice[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bloom-canvas), 0 0 0 4px var(--bloom-ink); }
.circle-colors-error:empty { display: none; }
.circle-colors-error { margin: 0; font-size: 13px; color: #9a3d29; }
@media (max-width: 359px) {
  #home:not(.unregistered) #composer-section { padding: 16px 12px 8px; column-gap: 12px; }
  #home:not(.unregistered) .home-companion, .composer-open-spot { width: 66px; }
  #home:not(.unregistered) .you-circle, .composer-open-spot .open-circle { width: 62px; height: 62px; }
  #home:not(.unregistered) .you-circle { font-size: 22px; }
}

/* Your people: a quiet list of circles, names and tags. */
#home .friend-avatar, #home .open-hangout-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; }

/* The table (table-layout.js): three or more people, each the same size circle on
   a light Tidepool stage. The layout sets each circle's size and transform. */
.call.table-mode .stage, .call.table-mode.has-remote[data-companion-theme] .stage { background: var(--bloom-canvas); }
.call.table-mode .pucks {
  position: absolute; z-index: 6; inset: auto; height: auto;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  top: var(--call-heading-height, 90px);
  bottom: calc(var(--call-controls-height, 96px) + 12px);
  display: block; overflow: hidden; padding: 0; border-radius: 28px; scrollbar-width: none;
  background: radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--bloom-surface) 60%, #fff), var(--bloom-surface));
}
/* Hiding the controls keeps the room exactly where it is (2026-09-29): the room
   used to grow into the freed space, so a tap made every picture jump. The room's
   edges use the measured toolbar height, which stays the same while it hides. */
.call.table-mode .pucks > .tile {
  position: absolute !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; flex: none !important; max-width: none !important; max-height: none !important;
  border-radius: 50% !important; overflow: hidden !important; transform-origin: 50% 50%;
  background: var(--bloom-surface) !important; will-change: transform;
  /* No drift (2026-09-29): even as a CSS animation it recalculated style every
     frame, 60 ms/s on a slowed phone; the faces carry the room's life. */
  animation: none !important;
  box-shadow: 0 0 0 3px var(--bloom-canvas), 0 8px 18px -12px #0006 !important;
  transition: box-shadow .4s ease;
}
.call.table-mode .pucks > .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.call.table-mode .pucks > .tile.local video { transform: scaleX(-1); }
.call.table-mode .pucks > .tile .buddy { position: absolute; inset: 0 !important; transform: none !important; width: auto !important; height: auto !important; margin: 0; display: grid; place-items: center; background: none !important; box-shadow: none !important; border-radius: 50%; }
.call.table-mode .pucks > .tile .buddy::after { display: none; }
.call.table-mode .pucks > .tile .buddy img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 50%; animation: none !important; transform: none !important; filter: none; }
.call.table-mode .pucks > .tile.has-video .buddy { visibility: hidden; }
.call.table-mode .pucks > .tile .tile-label { position: absolute; left: 50%; bottom: 8%; top: auto; right: auto; translate: -50% 0; max-width: 90%; padding: 3px 9px; border-radius: 10px; background: #00000066; color: #fff; font-size: max(11px, calc(var(--circle-size, 100px) * .11)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.call.table-mode .pucks > .tile :is(.attention, .puck-voice) { display: none; }
.call.table-mode .pucks > .tile.named .tile-label { opacity: 1; }
/* Talking: a warm glow (the circle also grows a little, in the layout). */
.call.table-mode .pucks > .tile.speaking { box-shadow: 0 0 0 3px var(--bloom-live), 0 0 24px color-mix(in srgb, var(--bloom-live) 55%, transparent) !important; }
.call.table-mode .pucks > .tile.local { z-index: 2; }
.call.table-mode .pucks > .tile.mic-off::after {
  content: ""; position: absolute; right: 9%; bottom: 9%; width: 22%; height: 22%; min-width: 18px; min-height: 18px;
  border-radius: 50%; background: var(--bloom-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 9v3a3 3 0 0 0 5 2M15 9V5a3 3 0 0 0-6 0M5 10v2a7 7 0 0 0 12 5M19 10v2M12 19v3M3 3l18 18'/%3E%3C/svg%3E") center / 60% no-repeat;
}
@media (prefers-reduced-motion: reduce) { .call.table-mode .pucks > .tile { transition: none; } }
/* Feeling alive (2026-09-29, Elliott): camera-off faces breathe, each at its own
   pace (--breath from media.js), and bounce while talking. Only the separate
   `scale` property animates, which runs off the main thread and composes with
   the layout's transform: measured with no style recalculation per frame,
   unlike the old drift. Cameras stay still; the picture is lively enough. */
.call.table-mode .pucks > .tile.puck { animation: face-breathe var(--breath, 4.6s) ease-in-out var(--breath-delay, 0s) infinite !important; }
.call.table-mode .pucks > .tile.puck.speaking { animation: face-talk 1.35s linear infinite !important; }
@keyframes face-breathe { 0%, 100% { scale: 1; } 45% { scale: 1.025 1.035; } }
/* Uneven beats, like syllables, squashing from the bottom of the ball. */
@keyframes face-talk {
  0%, 100% { scale: 1; } 9% { scale: 1.035 .96; } 18% { scale: .98 1.045; } 30% { scale: 1.01 .99; }
  41% { scale: 1.04 .955; } 50% { scale: .985 1.03; } 63% { scale: 1; } 72% { scale: 1.03 .965; } 84% { scale: .99 1.025; }
}
/* Swiped out: after a moment the face rolls around to the back of the ball
   (their own color with a shine), and a "brb" swings on it. Coming back, the
   face rolls in from the other side with a squash and a "back!". */
.call.table-mode .pucks > .tile.puck.elsewhere, .call.table-mode .pucks > .tile.puck.back { background: var(--ball, var(--bloom-surface)) !important; }
.call.table-mode .pucks > .tile.puck.elsewhere .buddy { background: radial-gradient(circle at 34% 30%, #ffffff80, #fff0 42%), radial-gradient(circle at 70% 78%, #0000 55%, #00000026) !important; }
.call.table-mode .pucks > .tile.puck.elsewhere .buddy img { animation: face-roll-away .8s cubic-bezier(.5, 0, .6, 1) 1.2s both !important; }
.call.table-mode .pucks > .tile.puck.back .buddy img { animation: face-roll-back .75s cubic-bezier(.2, .9, .3, 1.25) both !important; }
.call.table-mode .pucks > .tile.puck.elsewhere { animation: face-breathe calc(var(--breath, 4.6s) * 1.4) ease-in-out var(--breath-delay, 0s) infinite !important; }
.call.table-mode .pucks > .tile.puck.back { animation: face-squash .6s ease .5s !important; }
@keyframes face-roll-away { 0% { translate: 0; scale: 1; opacity: 1; } 35% { translate: -18% 2%; scale: .92 1; } 100% { translate: -120% 6%; scale: .55 1; rotate: -14deg; opacity: 0; } }
@keyframes face-roll-back { 0% { translate: 120% 6%; scale: .55 1; rotate: 14deg; opacity: 0; } 70% { translate: -6% 0; scale: 1; rotate: 0deg; opacity: 1; } 100% { translate: 0; } }
@keyframes face-squash { 0%, 100% { scale: 1; } 35% { scale: 1.08 .9; } 65% { scale: .96 1.05; } }
.call .away-tag { display: none; }
.call.table-mode .pucks > .tile.puck .away-tag {
  display: block; position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;
  padding: .18em .6em .22em; border-radius: 999px; background: var(--bloom-ink); color: var(--bloom-canvas);
  font-size: max(12px, calc(var(--circle-size, 100px) * .15)); font-weight: 800; letter-spacing: .01em; line-height: 1.1;
  opacity: 0; scale: .3; pointer-events: none; transform-origin: 50% 0;
}
.call.table-mode .pucks > .tile.puck.elsewhere .away-tag::before { content: "brb"; }
.call.table-mode .pucks > .tile.puck.back .away-tag::before { content: "back!"; }
.call.table-mode .pucks > .tile.puck.elsewhere .away-tag { animation: away-tag-in .35s cubic-bezier(.3, 1.6, .5, 1) 1.65s both, away-tag-swing 2.6s ease-in-out 2s infinite; }
/* "back!" sits low, under the face rolling back in. */
.call.table-mode .pucks > .tile.puck.back .away-tag { top: 80%; animation: away-tag-back 1.5s ease both; }
@keyframes away-tag-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes away-tag-swing { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes away-tag-back { 0% { opacity: 0; scale: .3; } 20%, 70% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.2; } }
/* The chat strip's faces are too small for words: the rolled-away ball says it. */
.call.table-mode .pucks.strip > .tile .away-tag { display: none; }
@media (prefers-reduced-motion: reduce) {
  .call.table-mode .pucks > .tile.puck, .call.table-mode .pucks > .tile.puck.speaking, .call.table-mode .pucks > .tile.puck.back { animation: none !important; }
  .call.table-mode .pucks > .tile.puck.elsewhere .buddy img { animation: none !important; opacity: 0; }
  .call.table-mode .pucks > .tile.puck.back .buddy img { animation: none !important; }
  .call.table-mode .pucks > .tile.puck.elsewhere .away-tag { animation: none; opacity: 1; scale: 1; }
  .call.table-mode .pucks > .tile.puck.back .away-tag { animation: none; opacity: 0; }
}

/* The table's heading sits on the light room like the camera-off gathering. */
.call.table-mode .call-heading {
  --heading-surface: var(--bloom-canvas);
  --heading-ink: var(--bloom-ink);
  --heading-muted: var(--bloom-muted);
}
.call.table-mode .call-heading .soft-button { background: var(--bloom-control); color: var(--bloom-ink); border-color: transparent; backdrop-filter: none; }

/* Quiet for me (room-volume.js): a ring, a name and one speaker button on the
   person's circle, over the room. Only the button takes taps. */
.call .vol-layer { position: absolute; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .15s; }
.call .vol-layer.on { opacity: 1; }
/* Put away, nothing in it takes a tap or focus (it sat over the Live pill and
   where you tap someone). Visibility waits for the fade. */
.call .vol-layer:not(.on) { visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.call .vol-layer:not(.on) > * { pointer-events: none !important; }
.call .vol-layer > * { position: absolute; left: 0; top: 0; }
.call .vol-ring { overflow: visible; }
.call .vol-ring path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.call .vol-track { stroke: color-mix(in srgb, var(--bloom-ink) 16%, transparent); }
.call .vol-fill { stroke: var(--bloom-ink); transition: stroke-dasharray .12s; }
.call.has-remote:not(.table-mode):not(.audio-only) .vol-fill { stroke: #fff; }
.call.has-remote:not(.table-mode):not(.audio-only) .vol-track { stroke: #ffffff40; }
.call .vol-label { display: grid; justify-items: center; gap: 2px; padding: 5px 11px; border-radius: 12px; background: var(--bloom-ink); color: var(--bloom-canvas); font-size: 13px; white-space: nowrap; box-shadow: 0 6px 16px -8px #0007; }
.call .vol-label b { font-weight: 700; }
.call .vol-hint { font-size: 11px; opacity: .85; }
.call .vol-hint[hidden] { display: none; }
.call .vol-speaker {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px;
  border: 0; border-radius: 22px; background: var(--bloom-canvas); color: var(--bloom-ink);
  font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px -8px #0007, 0 0 0 1px var(--bloom-line); cursor: pointer;
}
.call .vol-speaker svg { width: 18px; height: 18px; flex: none; }
.call .vol-speaker .spk { fill: currentColor; }
.call .vol-speaker .off { display: none; }
.call .vol-speaker.quiet { background: var(--bloom-ink); color: var(--bloom-canvas); }
.call .vol-speaker.quiet .on { display: none; }
.call .vol-speaker.quiet .off { display: inline; }
.call .vol-speaker span:empty { display: none; }
.call .vol-speaker:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.call .vol-readout { padding: 4px 10px; border-radius: 12px; background: #000000a6; color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .25s; }
.call .vol-readout.shown { opacity: 1; }
.call.picking .stage { touch-action: none; }
/* Someone you've quieted: a small speaker-off badge; they still glow when talking. */
.call .tile.quiet-for-me::before {
  content: ""; position: absolute; z-index: 3; right: 9%; top: 9%; width: 22%; height: 22%; min-width: 20px; min-height: 20px; max-width: 32px; max-height: 32px;
  border-radius: 50%; background: var(--bloom-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h2.5L8 3v10L4.5 10H2z' fill='white'/%3E%3Cpath d='m10.5 6 4 4m0-4-4 4' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.call.table-mode .pucks > .tile.quiet-for-me.speaking { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bloom-live) 40%, var(--bloom-canvas)), 0 0 10px color-mix(in srgb, var(--bloom-live) 22%, transparent) !important; }
.call .tile[role="button"]:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 3px; }

/* ── Bloom parity: the home card, exactly as the design ─────────────────────── */
#home { padding-inline: 20px; }
#home:not(.unregistered) .composer-topic, #home:not(.unregistered) #prejoin-settings { display: none; }
/* Who first, then how long. */
#home .composer-summary > #audience-toggle { order: 1; }
#home .composer-summary > #duration-toggle { order: 2; }
#home .composer-summary > button, #home .composer-summary > #audience-toggle, #home .composer-summary > #duration-toggle {
  justify-content: space-between; padding: 10px 12px; border-radius: 13px; font-size: 14px; font-weight: 600; text-align: left;
}
#home .composer-summary strong::first-letter { text-transform: uppercase; }
#home .composer-summary > button > span[aria-hidden] { font-size: 0; }
#home .composer-summary > button > span[aria-hidden]::after {
  content: ""; display: block; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%235c6663' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#home:not(.unregistered) .composer .start-button { min-height: 52px; }
/* The setup line and its island. */
#home .media-edit {
  grid-area: media; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px;
  width: 100%; min-height: 44px; margin: 8px 0 0; padding: 4px 0; border: 0; background: none;
  color: var(--bloom-muted); font: inherit; font-size: 14px; line-height: 20px;
}
#home .media-edit svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none; }
#home .media-edit .middot { margin: 0 3px; color: #a3a3aa; }
#home .media-edit .edit-label { margin-left: 4px; color: var(--bloom-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#home.unregistered .media-edit { display: none; }
.island .inplace-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 0; border-radius: 16px; background: transparent; color: var(--bloom-ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left;
}
.island .inplace-item[aria-pressed="true"] { background: var(--bloom-surface); }
.island .inplace-state { font-weight: 600; color: var(--bloom-muted); }
.island .inplace-item[aria-pressed="true"] .inplace-state { color: var(--bloom-live-text); }
.island.media-panel { display: grid; gap: 4px; padding: 6px; }
/* Your Live card on home. */
#home .own-live { grid-area: live; }
#home .own-live .waiting-line { margin: 0 0 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--bloom-muted); }
#home .own-live .waiting-line small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; }
#home .own-live .waiting-actions { display: flex; gap: 8px; }
#home .own-live .action { flex: 1; min-height: 52px; border: 0; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 600; }
#home .own-live .action.secondary { background: var(--bloom-control); color: var(--bloom-ink); }
#home .own-live .plus15 { flex: 0 0 auto; min-width: 72px; }
#home .own-live .back-in { display: block; width: 100%; margin-top: 8px; min-height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--bloom-ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#home .end-link { grid-area: end; display: block; margin: 6px auto 0; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--bloom-muted); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#home.has-owned-hangout .composer-launch { display: none; }
#home.has-owned-hangout #composer-section { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bloom-live) 22%, transparent), 0 14px 34px -16px color-mix(in srgb, var(--bloom-surface-border) 60%, #000 40%); }
/* A friend is live (2026-10-01, Elliott): their hangout is a slim bar at the
   top, as in the "Friends around" mockup, and your own card stays whole below
   it, with who's invited and how long. */
/* Pickers: the length choices sit in one pill; who's invited is a list. */
.island.duration-label { padding: 6px; border-radius: 999px !important; }
.island .duration-choices { display: flex !important; gap: 2px; justify-content: space-between; }
.island :is([data-minutes], .minutes-custom) { flex: 0 1 auto; min-height: 64px; min-width: 0; padding: 6px 4px; justify-items: center; place-content: center; border-radius: 999px; background: transparent; text-align: center; font-size: 16px; font-weight: 700; }
.island :is([data-minutes], .minutes-custom) small { font-size: 11px; font-weight: 600; }
.island :is([data-minutes], .minutes-custom)[aria-pressed="true"] { aspect-ratio: 1; flex: 0 0 auto; min-width: 64px; }
/* "Other": the pill turns into − length + Done, same height (2026-10-03). */
.island .duration-choices[hidden], .island .duration-stepper[hidden] { display: none !important; }
.island .duration-stepper { display: flex; align-items: center; gap: 4px; min-height: 64px; }
.island .duration-stepper .stepper-step { flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-size: 26px; font-weight: 600; line-height: 1; }
.island .duration-stepper .stepper-step:disabled { opacity: .35; }
.island .duration-stepper output { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 1px; color: var(--bloom-ink); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.island .duration-stepper output small { font-size: 12px; font-weight: 600; color: var(--bloom-muted); }
.island .duration-stepper .stepper-set { flex: 0 0 auto; height: 52px; padding: 0 14px; margin-left: 2px; border: 0; border-radius: 999px; background: var(--bloom-ink); color: var(--bloom-canvas); font: inherit; font-size: 16px; font-weight: 700; }
.island#hangout-audience-panel { padding: 6px; }
.island .audience-strip { display: flex; flex-direction: column; gap: 2px; flex-wrap: nowrap; }
.island .audience-strip > button, .island #hangout-audience-tags button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 10px 14px;
  border-radius: 16px; background: transparent; font-size: 15px; font-weight: 600; text-align: left; color: var(--bloom-ink);
}
.island #hangout-audience-tags:not([hidden]) { display: flex; flex-direction: column; gap: 2px; order: 2; padding: 3px 0; border-block: 1px solid var(--bloom-line); margin: 3px 10px; }
.island #hangout-audience-tags button { margin: 0 -10px; width: calc(100% + 20px); }
.island [data-audience-mode="all"] { order: 1; }
.island [data-audience-mode="people"] { order: 3; }
.island [data-audience-mode="link"] { order: 5; border-top: 1px solid var(--bloom-line) !important; border-radius: 0 0 16px 16px !important; }
.island .audience-strip > button[aria-pressed="true"], .island #hangout-audience-tags button[aria-pressed="true"] { background: var(--bloom-surface); color: var(--bloom-ink); }
.island [data-audience-mode="all"][aria-pressed="true"]::after, .island [data-audience-mode="link"][aria-pressed="true"]::after { content: "✓"; font-weight: 700; color: var(--bloom-live-text); }
.island #hangout-audience-tags button::after { content: ""; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bloom-line); flex: none; }
.island #hangout-audience-tags button[aria-pressed="true"]::after { background: var(--bloom-ink) radial-gradient(circle, #fff 3px, transparent 3.5px); box-shadow: none; }
.island [data-audience-mode="people"]::after { content: "›"; color: var(--bloom-muted); font-weight: 600; }
.wordmark .brand-dot { display: inline-block; margin-left: 1px; vertical-align: baseline; background: var(--bloom-ink); border-radius: 50%; }
.composer-info.is-live { font-weight: 400; }
/* Before you have a name there are no initials yet: an empty circle. */
#home:not(.unregistered) .you-circle { display: inline-grid; place-items: center; border-radius: 50%; background: var(--circle-tint, var(--bloom-surface-border)); color: var(--circle-ink, var(--bloom-ink)); font-weight: 700; }
#profile-initial { border-radius: 50%; background: var(--circle-tint, var(--bloom-surface)); color: var(--circle-ink, var(--bloom-muted)); display: grid; place-items: center; }
.profile-button { border-radius: 50%; overflow: hidden; }
.wordmark { display: inline-flex; gap: 0; letter-spacing: -.6px; }

/* ── Tabs: Hangout, Groups and Friends (Elliott, 2026-10-24), moving the way CarbideList's do:
   a floating bar with a chip that slides, tabs you swipe between (home-tabs.js), and a bar that
   shrinks as you scroll. ─────────────────────────────────────────────────────────────────── */
#home:not(.unregistered):not(.has-invite) { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
#home .home-footer { display: none; }

/* Each tab is its own view, and only the one picked shows. An invitation, or Home before you
   have a name, is always Hangout. */
#home > .tab-view { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
#home:is(.unregistered, .has-invite) > .tab-view:not(#view-hangout),
#home:not(.unregistered):not(.has-invite):not([data-tab="hangout"]) > #view-hangout:not(.tab-peek),
#home:not(.unregistered):not(.has-invite):not([data-tab="groups"]) > #view-groups:not(.tab-peek),
#home:not(.unregistered):not(.has-invite):not([data-tab="friends"]) > #view-friends:not(.tab-peek) { display: none; }
/* Mid-swipe, the tab beside comes in where you left it on that tab. */
#home > .tab-view.tab-peek { position: fixed; z-index: 1; margin: 0; pointer-events: none; }
html.tab-swiping, html.tab-swiping body { overflow-x: clip; }
html.tab-settling #home > .tab-view { transition: transform 220ms cubic-bezier(.2, 0, 0, 1); }

/* The bar: a floating pill. */
#home .bottom-nav {
  --tabs-width: min(calc(100% - 32px), 420px);
  position: fixed; z-index: 30; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  width: var(--tabs-width); padding: 5px; box-sizing: border-box; transform: translateX(-50%);
  border: 1px solid #1717170f; border-radius: 30px; background: #efeee9d9;
  box-shadow: 0 10px 28px #1e140a2e, inset 0 1px 0 #ffffffb3;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: width 260ms cubic-bezier(.2, .8, .2, 1), padding 260ms ease;
}
#home:is(.unregistered, .has-invite) .bottom-nav { display: none; }
/* While you type, the bar is out of the way, so the box you're in sits on the keyboard. */
html.keyboard-up #home .bottom-nav { display: none; }
#home .bottom-nav button {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 50px; padding: 0; border: 0; border-radius: 24px; background: none; color: var(--bloom-muted);
  font: inherit; font-size: 11px; font-weight: 800; line-height: 1.1; letter-spacing: .01em; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: min-height 260ms ease, color 160ms;
}
#home .bottom-nav svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: width 260ms ease, height 260ms ease;
}
#home .bottom-nav button[aria-current="page"] { color: var(--bloom-ink); }
#home .bottom-nav button[aria-current="page"] svg { stroke-width: 2.3; }
#home .bottom-nav button:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: -3px; }
#home .tab-chip {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 24px;
  background: #fff; box-shadow: 0 2px 8px #0000001a; pointer-events: none;
  transition: transform 220ms cubic-bezier(.2, 0, 0, 1), width 220ms, top 260ms ease, bottom 260ms ease;
}
html.tab-swiping:not(.tab-settling) #home .tab-chip { transition: none; }
/* What's new in your groups, and a friend request waiting, sit on the tab's icon. */
#home .tab-badge, #home [data-home-tab="friends"].fl-has-requests::after {
  position: absolute; top: 4px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--bloom-live); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px #f4f3ef;
}
#home .tab-badge[hidden] { display: none; }
/* A count of new messages says more than the request dot, which waits until they're read. */
#home [data-home-tab="friends"].fl-has-requests:has(.tab-badge:not([hidden]))::after { content: none; }
#home [data-home-tab="friends"].fl-has-requests::after { right: auto; min-width: 9px; width: 9px; height: 9px; padding: 0; top: 7px; left: calc(50% + 9px); }

/* Scrolled down, the bar shrinks; back up, it's full size again. */
html.bars-tucked #home .bottom-nav {
  --tabs-width: min(calc(100% - 32px), max(calc(min(calc(100% - 32px), 420px) * .75), calc(9.6rem + 42px)));
  padding: 3px;
}
html.bars-tucked #home .bottom-nav button { min-height: 44px; gap: 0; }
html.bars-tucked #home .bottom-nav svg { width: 20px; height: 20px; }
html.bars-tucked #home .tab-chip { top: 3px; bottom: 3px; }

@media (prefers-reduced-motion: reduce) {
  #home .bottom-nav, #home .bottom-nav button, #home .bottom-nav svg, #home .tab-chip,
  html.tab-settling #home > .tab-view { transition: none; }
}
/* Friends: a title, your tags to filter by, and one quiet row per person. */
#home .friends-section .section-heading { padding: 0; border: 0; margin: 0 0 16px; }
#home #friends-title { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
#home #friends-title:focus { outline: none; }
#home #friends-count { display: none; }
#home .tag-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 6px; padding: 2px 20px 6px; }
#home .tag-bar[hidden] { display: none; }
#home .tag-bar::-webkit-scrollbar { display: none; }
#home .tag-bar .tag-chip { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; -webkit-touch-callout: none; user-select: none; }
#home .tag-bar .tag-chip[aria-pressed="true"] { background: var(--bloom-ink); color: #fff; }
#home .tag-bar .tag-chip.add { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bloom-line); }
#home .tag-bar .tag-chip:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: 2px; }
#home .tag-hint { margin: 2px 0 8px; font-size: 12px; color: var(--bloom-muted); }
#home .tag-hint[hidden] { display: none; }
#home .tag-island { margin: 4px 0 12px; padding: 14px; border-radius: 22px; background: var(--bloom-canvas); box-shadow: 0 18px 40px -18px #0000005c, 0 0 0 1px var(--bloom-line); display: grid; gap: 10px; }
#home .tag-island[hidden] { display: none; }
#home .tag-island-line { font-size: 15px; color: var(--bloom-muted); }
#home .tag-island-line strong { color: var(--bloom-ink); }
#home .tag-island-actions { display: flex; justify-content: flex-end; gap: 6px; }
#home .tag-island-actions button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-size: 14px; font-weight: 600; }
#home .tag-island-actions .tag-done { background: var(--bloom-ink); color: #fff; }
#home .tag-island-actions .danger { color: #a8321b; }
#home .tag-form { display: flex; flex-wrap: wrap; gap: 8px; }
#home .tag-form input { flex: 1 1 160px; width: 0; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-size: 16px; }
#home .tag-form-buttons { display: flex; gap: 8px; margin-left: auto; }
#home .tag-form-buttons [data-tag-action] { min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-weight: 600; }
/* A field in a tag island shows focus inside its own edge; the page's offset
   ring ran into the button beside it. */
:is(#home .tag-form, .island .inplace-form) input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--bloom-ink); }
#home .tag-form button { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--bloom-ink); color: #fff; font: inherit; font-weight: 600; }
#home .friends { gap: 0; padding: 0; }
#home .friend-entry[hidden] { display: none; }
#home .friend-entry + .friend-entry { border-top: 1px solid var(--bloom-line); }
#home .friend-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border: 0; background: none; cursor: pointer; }
#home .friend-row::after { content: "›"; color: var(--bloom-muted); font-size: 20px; margin-left: auto; }
#home .friend-row.available::after { content: none; }
/* What's new in your chat with them, in red, where the › was (Elliott, 2026-10-25 mockup). */
#home .friend-row.has-new::after { content: none; }
#home .friend-chat-new { flex: none; min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px; border-radius: 11px; background: var(--bloom-live, #e5484d); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
#home .friend-chat-new[hidden] { display: none; }
#home .friend-subtitle.fresh { color: var(--bloom-ink); font-weight: 600; }
#home .friend-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home .friend-copy { flex: 1; min-width: 0; display: grid; }
#home .friend-heading { display: block; }
#home .friend-details { padding: 0; border: 0; background: none; color: var(--bloom-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 22px; text-align: left; }
#home .friend-details strong { font-weight: 600; }
#home :is(.friend-tags-summary, .friend-add-tags, .friend-guest-note) { display: none !important; }
#home .friend-activity { display: flex; align-items: center; gap: 8px; }
#home .friend-subtitle { font-size: 14px; line-height: 20px; color: var(--bloom-muted); }
#home .friend-drop { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 0; border: 0; background: none; font: inherit; text-align: left; }
#home .friend-join-label { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 18px; background: var(--bloom-ink); color: #fff; font-size: 14px; font-weight: 600; }
/* Editing a tag: each row becomes a round check. */
#home .friend-entry.picking .friend-row::after { content: ""; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bloom-line); }
#home .friend-entry.picking .friend-row[aria-checked="true"]::after { background: var(--bloom-ink) radial-gradient(circle, #fff 4px, transparent 4.5px); box-shadow: none; }
#home .friend-entry.picking .friend-row:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: 2px; border-radius: 14px; }
#home .empty-note { color: var(--bloom-muted); }
#home .friend-copy { gap: 0; }
#home .friend-activity, #home .friend-heading { margin: 0; padding: 0; }

/* A friend's live hangout: the same card, their circles with a live ring. */
#home .open-hangouts > :is(h2, p) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#home .open-hangout-list { display: grid; gap: 10px; }
#home .friend-hangout {
  padding: 20px; border-radius: 28px;
  /* Ink on cream: a white card with a hairline, so people's circles and the
     coral "live" are the only color on the screen. */
  background: #fff;
  box-shadow: 0 0 0 1px var(--bloom-line), 0 14px 30px -20px #0000004d;
  text-align: center;
}
#home .friend-hangout .group-info { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 14px; line-height: 22px; color: var(--bloom-live-text); }
#home .friend-hangout .group-info::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bloom-live); }
#home .people-row { display: flex; justify-content: center; gap: 16px; margin: 24px 0; }
#home .person { width: 76px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#home .person-face { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--bloom-canvas); box-shadow: 0 0 0 2px var(--bloom-live), 0 6px 14px -8px #0006; box-sizing: border-box; }
#home .person-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--bloom-ink); }
#home .person-seat { position: relative; display: block; width: 72px; height: 72px; }
/* Host stepped away: their face steps out of a little door (below). */
#home .away-person .person-face { box-shadow: 0 0 0 2px #c9c6bd, 0 6px 14px -8px #0004; filter: saturate(.35); opacity: .7; }
#home .friend-hangout.host-away .group-info { color: var(--bloom-muted); }
#home .friend-hangout.host-away .group-info::before { background: #c9c6bd; }
#home .open-person .person-name { font-weight: 400; color: var(--bloom-muted); }
#home .open-person .open-circle { width: 72px; height: 72px; border-radius: 50%; border: 1.5px dashed #b9b6ad; box-sizing: border-box; }
#home .friend-hangout .action { width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 600; }
#home .friend-hangout .action:disabled { opacity: .4; }
#home.friends-live #composer-section { margin-top: 0; }
@media (max-width: 359px) {
  #home .friend-hangout { padding: 16px; }
  #home .people-row { gap: 12px; }
  #home .person { width: 64px; }
  #home .person-seat { width: 64px; height: 64px; }
  #home :is(.person-face, .open-person .open-circle) { width: 64px; height: 64px; }
}
#home .friend-hangout .open-hangout { display: flex; align-items: center; justify-content: center; text-align: center; }
#home:not(.unregistered) #composer-section { margin-inline: 0; border: 0; }
/* You were with: people from your last hangout who aren't friends yet. */
#home .met-section { margin: 0; }
#home .met-section .section-heading { padding: 0; margin: 0 0 6px; border: 0; }
#home #met-title { font-size: 16px; font-weight: 600; letter-spacing: 0; }
#home .met-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0; border: 0; cursor: default; }
#home .met-row::after { content: none !important; }
#home .met-copy { flex: 1; min-width: 0; display: grid; }
#home .met-copy strong { font-size: 16px; font-weight: 600; }
#home .met-copy small { color: var(--bloom-muted); font-size: 13px; }
#home .met-row .soft-button { min-height: 44px; min-width: 76px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--bloom-ink); color: #fff; font: inherit; font-weight: 600; }
#home .met-row .soft-button.added { background: var(--bloom-surface); color: var(--bloom-ink); }
#home .met-row .met-hide { flex: none; width: 28px; height: 44px; margin: 0 0 0 -6px; padding: 0; border: 0; background: none; color: var(--bloom-muted); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
#home .met-row .met-hide:disabled { opacity: .4; }
#home .met-note { margin: 6px 0 0; font-size: 12px; color: var(--bloom-muted); }

/* ── Bloom parity: the room ──────────────────────────────────────────────────── */
.call, .call .stage, .call.has-remote .stage, .call.has-remote[data-companion-theme] .stage, .call.audio-only.has-remote .stage { background: var(--bloom-canvas) !important; }
.call .call-heading { --heading-surface: var(--bloom-canvas); --heading-ink: var(--bloom-ink); --heading-muted: var(--bloom-muted); padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); justify-content: flex-start; }
.call .call-heading > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.call .call-heading-actions { display: none; }
.call .room-live {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: calc(100% - 8px); padding: 0 16px;
  border: 0; border-radius: 22px; background: var(--bloom-control); color: var(--bloom-live-text);
  font: inherit; font-size: 15px !important; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.call .room-live .live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--bloom-live); }
.call .room-live[aria-expanded="true"] { visibility: hidden; }
.island.room-live-panel { display: grid; gap: 2px; padding: 6px; }
.island.room-live-panel .inplace-state { color: var(--bloom-muted); }
.island #room-audience:not(.can-change) { pointer-events: none; }
/* Controls: mic, camera and chat as circles, and Hold to end as one coral pill. */
.call:has(.speech-fallback:not([hidden])) .call-bottom { flex-direction: column; gap: 8px; }
.call .speech-fallback {
  pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px;
  align-self: center; max-width: 100%; min-height: 44px; padding: 8px 14px;
  border: 0; border-radius: 22px; background: var(--bloom-control); color: var(--bloom-ink);
  font: inherit; font-size: 13px; line-height: 1.3;
}
.call .speech-fallback strong { font-weight: 700; white-space: nowrap; }
.call .call-controls { gap: 14px; padding: 0; background: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
.call :is(#lock-button, #flip-button, .control-divider), .call .bell-wrap { display: none !important; }
.call .control:is(#mic-button, #camera-button, #chat-button, #share-button) {
  width: 56px; height: 56px; min-width: 56px; min-height: 56px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--bloom-control); color: var(--bloom-ink); box-shadow: none;
}
.call .control:is(#mic-button, #camera-button, #chat-button, #share-button) .control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.call .control:is(#mic-button, #camera-button)[data-media-state="on"], .call #chat-button[aria-expanded="true"] { background: var(--bloom-ink) !important; color: #fff !important; }
.call .control svg { width: 22px; height: 22px; }
.call #leave-button.leave {
  min-width: 138px; height: 56px; min-height: 56px; padding: 0 22px; border: 0; border-radius: 28px;
  background: #c8402b !important; color: #fff !important; box-shadow: none;
}
.call #leave-button.leave .control-icon { display: none; }
.call #leave-button .control-label, .call #leave-label { position: static; width: auto; height: auto; clip-path: none; font-size: 16px !important; font-weight: 700; color: inherit; }
/* One on one: their camera in a rounded frame on the light room, you a circle. */
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] {
  position: absolute; inset: auto; left: 12px; right: 12px;
  top: calc(var(--call-heading-height, 72px) + 4px); bottom: calc(var(--call-controls-height, 96px) + 12px);
  padding: 8px; border-radius: 28px; background: color-mix(in srgb, var(--bloom-ink) 8%, var(--bloom-canvas));
}
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile { border-radius: 22px !important; overflow: hidden; background: var(--bloom-surface); }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile.speaking { box-shadow: inset 0 0 0 4px var(--bloom-live) !important; }
.call .self-view { --self-width: clamp(76px, 20vw, 128px); --self-border: 3px; border-radius: 18px; border: 3px solid var(--bloom-canvas); box-shadow: 0 10px 24px -8px #0008; }
.call .self-view .tile { border-radius: 15px; }
/* Alone: you in the middle, and when friends can come. */
.call .waiting { position: absolute; inset: auto; left: 12px; right: 12px; top: calc(var(--call-heading-height, 72px) + 4px); bottom: calc(var(--call-controls-height, 96px) + 12px);
  display: grid; place-items: center; padding: 20px; border-radius: 28px;
  background: radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--bloom-surface) 60%, #fff), var(--bloom-surface)); }
.call .waiting-glow, .call .waiting .eyebrow, .call .waiting-away { display: none !important; }
.call .waiting-copy { display: grid; justify-items: center; gap: 6px; max-width: 320px; text-align: center; }
.call .waiting-you { width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--bloom-canvas); font-size: 44px; font-weight: 700; display: grid; place-items: center; }
.call .waiting-you-name { font-size: 16px; font-weight: 700; margin-top: 6px; }
.call .waiting-you-state { font-size: 13px; color: var(--bloom-muted); }
.call .waiting h2 { margin: 18px 0 6px; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.call #waiting-invite { min-height: 48px; padding: 0 24px; border: 0; border-radius: 24px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 700; }
.call #waiting-note { order: 10; margin: 10px 0 0; font-size: 14px; color: var(--bloom-muted); }
.call.table-mode .waiting { display: none; }
/* Chat: the faces make a strip at the top; the conversation fills the rest. */
.call.chat-open { --chat-strip-height: 96px; }
/* A sound warning belongs with its friend even after opening chat. Reserve its
   wrapped lines instead of clipping them below the narrow strip of faces. */
.call.chat-open:has(.pucks > .tile.has-audio-status) { --chat-strip-height: 136px; }
.call.chat-open.table-mode .pucks { bottom: auto; height: var(--chat-strip-height); }
.call.chat-open .chat.open {
  inset: auto !important; left: 12px !important; right: 12px !important; width: auto !important; max-height: none !important;
  top: calc(var(--call-heading-height, 72px) + var(--chat-strip-height) + 16px) !important; bottom: calc(var(--call-controls-height, 96px) + 12px) !important;
  border-radius: 22px; background: var(--bloom-canvas); border: 1px solid var(--bloom-line); box-shadow: none; color: var(--bloom-ink);
}
.call.chat-open .self-view, .call.chat-open .tiles { visibility: hidden; }
/* Alone: your camera is your movable picture too; with it off, the waiting card's
   circle is you, so the corner stays empty. */
.call:not(.has-remote) .self-view.puck-preview { display: none !important; }
.call .waiting-copy > * { position: static !important; margin-inline: auto; transform: none !important; }
.call #waiting-invite { order: 9; margin-top: 4px; }
.call .waiting-copy h2 { order: 8; }
.call .waiting-copy > :is(.waiting-couch-wrap, .waiting-you-seat, .waiting-you-name, .waiting-you-state) { order: 1; }
/* A guest waiting for a host who stepped away: ring them, or leave a note in chat. */
.call .waiting-guest { order: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.call .waiting-guest[hidden] { display: none; }
/* A long host name wraps in the title and stops short on Ring. */
.call :is(#waiting-title, #waiting-note) { overflow-wrap: anywhere; }
.call #waiting-guest { min-width: 0; max-width: 100%; }
.call #waiting-guest #waiting-ring { display: block; max-width: 100%; line-height: 48px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Still connecting, nobody else can be seen yet: no "Waiting for Maya", no Ring,
   and no host's line ("A little company is on its way") flashing at a guest. */
.call.joining :is(#waiting-title, #waiting-note, #waiting-guest) { visibility: hidden; }
.call #waiting-guest .soft-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 24px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 700; }
.call #waiting-guest .soft-button.secondary { background: var(--bloom-control); color: var(--bloom-ink); }
.call #waiting-guest .soft-button:disabled { opacity: .55; }
/* The host's own card: who stopped by while they were away. */
.call .waiting-visits { order: 8; list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.call .waiting-visits[hidden] { display: none; }

.call .self-view .tile-label, .call .self-view .attention { display: none !important; }
.call .call-controls { border: 0 !important; outline: 0; width: min(100%, 420px); justify-content: center; }
.call #leave-button.leave { flex: 1 1 auto; max-width: 180px; white-space: nowrap; }
.call .control:is(#mic-button, #camera-button)[data-media-state="off"], .call .control:is(#mic-button, #camera-button)[data-media-state="pending"] { background: var(--bloom-control) !important; color: var(--bloom-ink) !important; }
.call #waiting-note { display: block !important; }
.call .waiting-copy { align-self: center; justify-self: center; }
.call #leave-button.leave { display: inline-flex; align-items: center; justify-content: center; }
.call #leave-button .control-label { margin: 0 !important; line-height: 1; }
.call, .call .call-body { background: var(--bloom-canvas) !important; background-image: none !important; }
.call::before, .call::after, .call .call-body::before, .call .call-body::after { display: none !important; }
.call .self-view .tile, .call .self-view .tile.puck { width: 100% !important; height: 100% !important; background: var(--bloom-surface) !important; }
.call .self-view .buddy { inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; border-radius: 15px; background: none !important; box-shadow: none !important; }
.call .self-view .buddy img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; animation: none !important; }
.call #leave-button.leave { flex-direction: row; gap: 0; }
.call #leave-button .control-label { display: block; transform: none !important; padding: 0; }
/* Your own view: a rounded picture in your camera's shape (call-layout.js follows
   it), bigger than a circle, dragged anywhere. With your camera off it is your
   circle. */
.call .self-view { overflow: hidden !important; padding: 0 !important; }
.call .self-view.puck-preview { width: 104px !important; height: 104px !important; border-radius: 50% !important; }
.call .self-view.puck-preview :is(.tile, .buddy, .buddy img) { border-radius: 50% !important; }
.call #leave-button .control-label { white-space: nowrap; }
/* With your camera showing, your initials circle under it is hidden: iOS
   anti-aliases the rounded, mirrored video's edge and let a hairline of the
   circle's colour show along the sides (Elliott, 2026-09-29). */
.call .self-view .tile.has-video .buddy { visibility: hidden; }
.call .self-view .buddy img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }

/* Tag rows in the audience island: plain rows, not the old bordered chips. */
.island #hangout-audience-tags .friend-tag { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 48px; }
.island #hangout-audience-tags .friend-tag::before { content: none !important; display: none !important; }
.island #hangout-audience-tags .friend-tag[aria-pressed="true"] { background: var(--bloom-surface); }

/* Your circle color: just the dots, as chips. */
.island.circle-colors { gap: 12px; padding: 16px; }
.island.circle-colors .circle-colors-preview { gap: 0; }
.island.circle-colors .circle-colors-dots { grid-template-columns: repeat(4, 44px); gap: 6px; justify-content: start; }
.island .circle-color { box-shadow: 0 0 0 6px var(--bloom-surface); margin: 6px; width: 28px; height: 28px; }
.island .circle-color[aria-checked="true"] { box-shadow: 0 0 0 6px var(--bloom-surface), 0 0 0 8px var(--bloom-ink); }
/* A friend's tags: their chips, in an island. */
.island.friend-tags-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
.friend-tags-title { font-size: 15px; padding: 2px 4px; }
.island .inplace-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.island .inplace-chips .tag-chip { min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 14px; font-weight: 600; }
.island .inplace-chips .tag-chip[aria-pressed="true"] { background: var(--bloom-ink); color: #fff; }
.island .inplace-chips .tag-chip.add { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bloom-line); }
.island .inplace-form { display: flex; gap: 6px; }
.island .inplace-form input { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-size: 16px; }
.island .inplace-form button { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--bloom-ink); color: #fff; font: inherit; font-weight: 600; }
/* Friends rows: name over one line of detail, 64px tall. */
#home .friend-heading, #home .friend-details, #home .friend-activity, #home .friend-drop { min-height: 0 !important; }
#home .friend-row { min-height: 64px; padding: 8px 0; }
#home .friend-subtitle { margin: 0; }
/* The row is the tap target, so the name sits on its own line height. */
#home .friend-heading, #home .friend-details { height: auto !important; }
#home .friend-details { padding: 0 !important; max-width: 100% !important; }
#home .friend-details strong { line-height: 22px; }
/* Audience tag rows: a round check on the right, not the old tag glyph. */
.island #hangout-audience-tags .friend-tag { padding: 8px 14px !important; color: var(--bloom-ink); }
.island #hangout-audience-tags .friend-tag::after { position: static; opacity: 1; -webkit-mask: none; mask: none; margin-left: auto; }
.island #hangout-audience-tags .friend-tag:not([aria-pressed="true"])::after { background: transparent; }
/* You were with: its own quiet card under the hangout, as in the design. */
#home .met-section { margin-top: 16px; padding: 16px; border-radius: 24px; background: var(--bloom-canvas); box-shadow: 0 0 0 1px var(--bloom-line); }
#home .met-row :is(img, .friend-avatar) { width: 44px; height: 44px; flex: none; }
/* Editing your mic and camera: the summary line steps aside like the other toggles. */
#home #media-edit[aria-expanded="true"] { visibility: hidden; }
/* Chat panel as in the design: a note and close along the top, the conversation in
   the middle, and the composer (a round field and a Send pill) at the bottom. */
.call.chat-open .chat.open { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 !important; overflow: hidden; }
.call.chat-open .chat.open .chat-compose-row { display: contents; }
.call.chat-open .chat.open #chat-history { display: none !important; }
.call.chat-open .chat.open .chat-footnote { grid-area: 1 / 1; align-self: center; position: static; margin: 0; padding: 8px 0 8px 14px; font-size: 12px; color: var(--bloom-muted); text-align: left; }
.call.chat-open .chat.open #close-chat { grid-area: 1 / 2; width: 36px; height: 36px; min-width: 36px; min-height: 36px; margin: 8px 8px 8px 0; border: 0; border-radius: 50%; background: var(--bloom-control); color: var(--bloom-ink); font-size: 18px; }
.call.chat-open .chat.open #chat-history-panel { grid-area: 2 / 1 / 3 / 3; display: flex !important; flex-direction: column; min-height: 0; margin: 0; padding: 0; position: static; max-height: none; border: 0; border-top: 1px solid var(--bloom-line); border-radius: 0; background: none; box-shadow: none; animation: none; }
.call.chat-open .chat.open .chat-heading { display: none; }
.call.chat-open .chat.open #messages { flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding: 10px 12px; }
.call.chat-open .chat.open .chat-empty { margin: auto; color: var(--bloom-muted); font-size: 13px; text-align: center; }
.call.chat-open .chat.open #chat-form { grid-area: 3 / 1 / 4 / 3; display: flex; gap: 6px; align-items: flex-end; margin: 0; padding: 8px; border: 0; border-top: 1px solid var(--bloom-line); border-radius: 0; background: none; box-shadow: none; }
.call.chat-open .chat.open #message { flex: 1; min-width: 0; min-height: 44px; max-height: 110px; padding: 11px 14px; border: 0; border-radius: 22px; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-size: 16px; resize: none; }
.call.chat-open .chat.open #send-message { flex: none; width: auto; min-width: 0; height: 44px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 700; }
.call.chat-open .chat.open #send-message:disabled { opacity: .5; }
/* One on one with both cameras off: two circles side by side, names beneath. */
.call.table-mode .pucks.pair > .tile { overflow: visible; }
.call.table-mode .pucks.pair > .tile .tile-label { opacity: 1; top: 100%; bottom: auto; translate: -50% 10px; padding: 0; background: none; color: var(--bloom-ink); font-size: 20px; font-weight: 700; white-space: nowrap; max-width: none; text-align: center; }
.call.table-mode .pucks.pair > .tile .tile-label::after { content: "Camera off"; display: block; margin-top: 2px; font-size: 16px; font-weight: 400; color: var(--bloom-muted); }
.call.table-mode .pucks.pair > .tile.mic-off .tile-label::after { content: "Mic off · Camera off"; }
.call.table-mode .pucks.pair > .tile.local .tile-label::after { content: "Mic on · Camera off"; }
.call.table-mode .pucks.pair > .tile.local.mic-off .tile-label::after { content: "Mic off · Camera off"; }
.call .tile .audio-status { display: block; font-size: 12px; line-height: 1.3; font-weight: 600; white-space: normal; text-wrap: balance; }
.call .tile .audio-status[hidden] { display: none; }
.call .tile:not(.puck) .audio-status:not([hidden]) { color: #fff; background: #17251feb; border-radius: 8px; padding: 3px 6px; margin-top: 3px; }
.call.table-mode .pucks > .tile.has-audio-status .tile-label { opacity: 1; }
.call.table-mode .pucks.pair > .tile.has-audio-status .tile-label::after { display: none; }
.call.table-mode .pucks.pair > .tile .audio-status { width: 145px; max-width: calc(50vw - 30px); margin-top: 4px; color: var(--bloom-muted); font-size: 14px; font-weight: 400; }
.call.table-mode .pucks.pair > .tile .tile-label .name { display: block; }
.call.table-mode .pucks.pair > .tile .tile-label :is(.attention, .puck-muted) { display: none; }
/* Names beneath the circles in the pair and in the chat strip. */
.call.table-mode .pucks:is(.pair, .strip) > .tile { overflow: visible !important; }
.call.table-mode .pucks.strip > .tile .tile-label { opacity: 1; top: 100%; bottom: auto; translate: -50% 4px; padding: 0; background: none; color: var(--bloom-ink); font-size: 15px; font-weight: 700; white-space: nowrap; max-width: none; }
.call.table-mode .pucks.strip > .tile .tile-label :is(.attention, .puck-muted) { display: none; }
/* Pair labels stack: name, then state. */
.call.table-mode .pucks:is(.pair, .strip) > .tile .tile-label { display: flex; flex-direction: column; align-items: center; gap: 0; }
/* A long name stops short instead of running into the next person's label. */
.call.table-mode .pucks:is(.pair, .strip) > .tile .tile-label .name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
/* Narrow phones: smaller control circles and a Hold to end pill that may wrap. */
@media (max-width: 359px) {
  .call .call-controls { gap: 10px; }
  .call .control:is(#mic-button, #camera-button, #chat-button) { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
  .call #leave-button.leave { min-width: 0; flex: 1 1 auto; padding: 0 14px; white-space: normal; line-height: 1.1; }
}
/* Their name on the one-on-one picture and beneath every face in the chat strip. */
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile .tile-label { left: 16px; right: auto; bottom: 16px; }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile .name { display: block; max-width: 100%; padding: 6px 12px; border-radius: 16px; background: #1a1d1ccc; color: #fff; font-size: 15px; font-weight: 700; }
.call.table-mode .pucks.strip > .tile .name { display: block !important; padding: 0; background: none; color: var(--bloom-ink); backdrop-filter: none; }
.call.table-mode .pucks.pair > .tile .tile-label { line-height: 1.25; }
.call.table-mode .pucks.pair > .tile .tile-label::after { margin-top: 4px; line-height: 1.25; }
.call.chat-open .chat.open .chat-empty { display: none; }
.call .pucks:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: -2px; border-radius: 22px; }
/* Short screens (landscape phones): the alone card shrinks to fit between the
   Live pill and the controls. */
@media (max-height: 480px) {
  .call .waiting-copy { gap: 2px; }
  .call .waiting-you { width: 64px; height: 64px; font-size: 26px; border-width: 3px; }
  .call .waiting-you-name { margin-top: 2px; font-size: 15px; }
  .call .waiting h2 { margin: 6px 0 2px; font-size: 16px; }
  .call #waiting-invite { min-height: 44px; }
  .call #waiting-note { margin-top: 4px; font-size: 13px; }
}
/* Alone with your camera on: your own picture fills your circle (mirrored, like
   the self-view). The camera tile moves here; its video element is not copied. */
.call .waiting-you-seat { position: relative; display: grid; place-items: center; }
.call .waiting-camera { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 4px solid var(--bloom-canvas); background: var(--bloom-surface); }
.call .waiting-camera[hidden] { display: none; }
.call .waiting-camera > .tile { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50% !important; transform: none !important; }
.call .waiting-camera > .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; opacity: 1; }
.call .waiting-camera > .tile.mirrored video { transform: scaleX(-1); }
.call .waiting-camera > .tile :is(.tile-label, .attention, .buddy, .connection-note) { display: none !important; }
@media (max-height: 480px) { .call .waiting-camera { border-width: 3px; } }
.call .waiting-copy > .waiting-you-seat { position: relative !important; width: 112px; height: 112px; }
@media (max-height: 480px) { .call .waiting-copy > .waiting-you-seat { width: 64px; height: 64px; } }
/* Your own picture stays visible when your connection is only weak or a friend has
   paused it for their end: the note beside it says so. The set-top static covered
   your camera on phones, so you never saw yourself. Reconnecting still shows it. */
.call .recovery-tv.is-self.weak { display: none !important; }
/* Circles are always filled: a camera covers its circle whatever its shape, and
   an initials image fills it too (a camera that couldn't start included). */
.call.table-mode .pucks > .tile video, .call .self-view video { object-fit: cover !important; }
/* Pinned to fill the circle: as a grid item WebKit squeezed it into an oval. */
.call.table-mode .pucks > .tile .buddy img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; border-radius: 50% !important; }
.call.table-mode .pucks > .tile .connection-note { display: none !important; }
/* Share sits in the bottom row once someone else is here; alone, the waiting
   card's Share invite is the big button. */
.call:not(.has-remote) #share-button { display: none; }
@media (max-width: 359px) { .call .control#share-button { width: 46px; height: 46px; min-width: 46px; min-height: 46px; } }
/* Chat on phones: the panel is fully there the moment it opens (the field is
   focused inside the tap); only the conversation fades in. */
.call.chat-open .chat.open, .call.chat-open .chat.open.arriving { opacity: 1 !important; translate: none !important; animation: none !important; transition: top 240ms cubic-bezier(.22, .8, .22, 1), bottom 240ms cubic-bezier(.22, .8, .22, 1), height 240ms ease-out !important; }
.call.chat-open .chat.open #messages { animation: bloom-chat-list 220ms ease-out; }
@keyframes bloom-chat-list { from { opacity: 0; translate: 0 8px; } }
/* While typing, the keyboard's top is the floor: the composer and the newest
   messages sit just above it (call-layout measures the visual viewport), and the
   Live line and the controls tuck away. The faces strip keeps its place. */
.call.chat-open.keyboard-open .call-heading, .call.chat-open.keyboard-open .call-bottom { display: none !important; }
.call.chat-open.keyboard-open .chat.open {
  top: auto !important; bottom: var(--chat-bottom, 8px) !important;
  height: max(150px, calc(var(--chat-max-height, 300px) - 104px)) !important; max-height: var(--chat-max-height, 300px) !important;
}
.call.chat-open.keyboard-open .pucks { top: calc(var(--keyboard-top, 0px) + 8px) !important; }
@media (prefers-reduced-motion: reduce) { .call.chat-open .chat.open #messages { animation: none; } .call.chat-open .chat.open { transition: none !important; } }
/* The newest messages sit at the bottom, next to the field. */
.call.chat-open .chat.open #messages { display: flex; flex-direction: column; }
.call.chat-open .chat.open #messages > :first-child { margin-top: auto; }
/* With Share in the row (someone else is here) five controls must fit a phone. */
.call.has-remote .call-controls { gap: 10px; }
.call.has-remote .control:is(#mic-button, #camera-button, #chat-button, #share-button) { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
.call.has-remote #leave-button.leave { min-width: 88px; height: 52px; min-height: 52px; flex: 1 1 auto; }
@media (max-width: 359px) {
  .call.has-remote .call-controls { gap: 8px; }
  .call.has-remote .control:is(#mic-button, #camera-button, #chat-button, #share-button) { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
  .call.has-remote #leave-button.leave { min-width: 0; height: 46px; min-height: 46px; padding: 0 8px; }
  .call #leave-button .control-label { max-width: 100%; white-space: normal; line-height: 1.1; }
}
/* Hold to end, as in the mockup: holding darkens the pill from the left over the
   hold time; letting go early empties it. Touch holds must reach the button on
   iOS: no scrolling, text selection or long-press callout may take the gesture. */
.call #leave-button.leave { position: relative; overflow: hidden; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.call #leave-button .hold-fill { position: absolute; inset: 0; background: #0000004d; transform: scaleX(0.001); transform-origin: left; pointer-events: none; }
.call #leave-button.holding .hold-fill, .call #leave-button.held .hold-fill { transform: scaleX(1); transition: transform var(--hold-ms, 900ms) linear; }
.call #leave-button > :not(.hold-fill) { position: relative; }
@media (prefers-reduced-motion: reduce) { .call #leave-button.holding .hold-fill { transition-timing-function: steps(3, end); } }
/* Typing on a phone: the faces shrink into their strip at the top of what the
   keyboard leaves visible, and the chat fills the rest down to the keyboard
   (app.js followKeyboard); the Live line and controls tuck away (Elliott,
   2026-09-29: you still see everyone while you type). Both start below the
   status bar, which a Home Screen app draws over the page. On a screen too short
   for both (a phone on its side), the chat takes the whole space. */
.call.chat-open.typing .call-heading, .call.chat-open.typing .call-bottom { display: none !important; }
.call.chat-open.typing {
  --typing-top: max(var(--vv-top, 0px), var(--call-safe-top, 0px));
  --typing-strip: calc(var(--chat-strip-height) + 8px);
}
.call.chat-open.typing.typing-tight { --typing-strip: 0px; }
.call.chat-open.typing .chat.open {
  position: fixed !important; inset: auto !important;
  top: calc(var(--typing-top) + var(--typing-strip) + 8px) !important; left: calc(var(--vv-left, 0px) + 8px) !important;
  width: calc(var(--vv-width, 100vw) - 16px) !important;
  height: calc(var(--vv-top, 0px) + var(--vv-height, 100dvh) - var(--typing-top) - var(--typing-strip) - 16px) !important;
  max-height: none !important; bottom: auto !important;
}
.call.chat-open.typing .pucks { top: calc(var(--typing-top) + 8px) !important; }
.call.chat-open.typing.typing-tight .pucks { visibility: hidden; }
/* Pinned while typing means pinned at once: an animated move would leave the
   focused field briefly off-screen, where iOS tries to scroll it into view. */
.call.chat-open.typing .chat.open { transition: none !important; }
/* One fill only: the earlier bottom-to-top fill and its text colour change are off. */
.call #leave-button.leave::before { display: none !important; }
.call #leave-button.leave:is(.holding, .held) { color: #fff !important; }
/* The room's Live line reads in ink (Elliott, 2026-09-28); only the small dot
   keeps the live colour. */
.call .room-live { color: var(--bloom-ink) !important; }
/* Someone joined your hangout: for two minutes the pill asks who else can join, in ink (Elliott,
   2026-10-15). A long name ends in an ellipsis; the question always shows. */
.call .room-live.asking { background: #111; color: #fff !important; }
.call .room-live.asking #room-live-text { display: flex; min-width: 0; }
.call .room-live.asking .ask-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.call .room-live.asking .ask-question { flex: none; white-space: pre; }
/* The Dot: the wordmark's dot is Chillin's host. Just two eyes, no mouth; it blinks
   now and then and hops when a friend's hangout opens (app.js). */
/* Bigger (2026-09-29, Elliott chose the bigger Dot): about twice the old 13px. */
.wordmark .brand-dot { position: relative; width: 24px; height: 24px; margin-left: 3px; margin-bottom: -1px; background: #ff6a4d; box-shadow: inset 0 0 0 2.8px var(--bloom-ink); }
.wordmark .brand-dot::before, .wordmark .brand-dot::after { content: ""; position: absolute; top: 6.4px; width: 3.4px; height: 7px; border-radius: 2px; background: var(--bloom-ink); animation: dot-blink 5.2s infinite; }
.wordmark .brand-dot::before { left: 6.4px; } .wordmark .brand-dot::after { right: 6.4px; }
@keyframes dot-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
@media (prefers-reduced-motion: reduce) { .wordmark .brand-dot::before, .wordmark .brand-dot::after { animation: none; } }
/* On a quiet home, Dot leaves the wordmark and hosts the hangout card: big, peeking
   over its top edge with two little hands on the rim. The face is clipped at the
   card's edge, so it reads as behind the card without a stacking context. When a friend's hangout leads, Dot goes back to the wordmark to hop. */
.host-dot { display: none; }
#home:not(.unregistered):not(.friends-live) #composer-section { position: relative; margin-top: 58px; }
#home:not(.unregistered):not(.friends-live) .host-dot { display: block; position: absolute; left: 50%; top: -64px; width: 92px; height: 64px; margin-left: -46px; pointer-events: none; }
.host-dot-peek { position: absolute; inset: 0; overflow: hidden; }
.host-dot-face { position: absolute; top: 4px; left: 0; width: 92px; height: 92px; border-radius: 50%; background: #ff6a4d; box-shadow: inset 0 0 0 11px var(--bloom-ink); animation: host-dot-bob 3.4s ease-in-out infinite; }
.host-dot-face::before, .host-dot-face::after { content: ""; position: absolute; top: 26px; width: 12px; height: 25px; border-radius: 99px; background: var(--bloom-ink); animation: dot-blink 4.6s infinite, host-dot-look 14s ease-in-out infinite; }
.host-dot-face::before { left: 26px; } .host-dot-face::after { right: 26px; }
.host-dot-hands::before, .host-dot-hands::after { content: ""; position: absolute; bottom: -8px; width: 24px; height: 16px; border-radius: 12px 12px 7px 7px; background: #ff6a4d; box-shadow: inset 0 0 0 3px var(--bloom-ink); }
.host-dot-hands::before { left: 0; } .host-dot-hands::after { right: 0; }
/* On Home, Dot sits on the card instead of the logo; its spot keeps its space. */
body:has(#home:not(.unregistered):not(.friends-live):is([data-tab="hangout"], .has-invite):not([hidden])) .wordmark .brand-dot { visibility: hidden; }
.wordmark { translate: calc(var(--tilt, 0) * 8px) 0; }
.host-dot-peek { translate: calc(var(--tilt, 0) * 5px) 0; translate: round(calc(var(--tilt, 0) * 5px), 1px) 0; }
/* Installed on a phone, the top bar and status strip share the page's colour
   (2026-09-29, Elliott): the older paper tone read as a darker band under the logo. */
@media (display-mode: standalone) { html::before, body:not(.in-call) .topbar { background: var(--bloom-canvas); } }
/* The second i's dot is Dot's orange (moved from the first i 2026-09-30, one orange only): a dotless i
   in the markup with its own round dot. */
.wordmark-i { position: relative; }
.wordmark-i::after { content: ""; position: absolute; left: 50%; top: .2em; width: .2em; height: .2em; transform: translateX(-50%); border-radius: 50%; background: #ff6a4d; }
@keyframes host-dot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes host-dot-look { 0%, 12%, 100% { translate: 0 0; } 16%, 30% { translate: 7px 2px; } 36%, 48% { translate: 0 0; } 52%, 64% { translate: 1px -9px; } 70%, 80% { translate: 0 0; } 84%, 94% { translate: -7px 1px; } }
@media (prefers-reduced-motion: reduce) { .host-dot-face, .host-dot-face::before, .host-dot-face::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .call.table-mode .pucks > .tile.speaking .buddy img { animation: none; } }
/* Character pictures (their SVG carries class="body") are never cut to a disc. */
/* Flip camera, on your own picture (media.js): only with a second camera and
   your camera on. A small frosted-glass button tucked in the corner (2026-09-30,
   Elliott: the old dark disc sat in the middle of your picture and hid most of
   it on a phone, and a plain smaller one didn't look slick). */
.call .tile-flip { display: none; }
.call.can-flip .tile.local.has-video .tile-flip {
  display: grid; place-items: center; position: absolute; right: 6px; bottom: 6px; z-index: 4;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: #ffffff38; -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px #ffffff70, 0 2px 8px #0003;
  -webkit-tap-highlight-color: transparent; transition: scale .15s ease;
}
.call.can-flip .tile.local.has-video .tile-flip:active { scale: .9; }
/* On a round picture the corner is outside the circle: sit just inside its
   lower right edge instead, sized with the circle. The chat strip's faces are
   too small for it. */
.call.can-flip .pucks > .tile.local.has-video .tile-flip {
  right: 19%; bottom: 19%; width: clamp(24px, calc(var(--circle-size, 100px) * .2), 32px); height: auto; aspect-ratio: 1;
}
.call.can-flip .pucks.strip > .tile.local .tile-flip { display: none; }
.call .tile-flip svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.call .tile-flip:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
/* Bigger, beside the volume button when that person's camera is on. */
.call .vol-bigger {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
  border: 0; border-radius: 22px; background: var(--bloom-canvas); color: var(--bloom-ink);
  font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px -8px #0007, 0 0 0 1px var(--bloom-line); cursor: pointer;
}
.call .vol-bigger[hidden] { display: none; }
.call .vol-bigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call .vol-bigger:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
/* Confetti, beside the volume button: toss a burst at them (confetti.js). */
.call .vol-confetti {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
  border: 0; border-radius: 22px; background: var(--bloom-canvas); color: var(--bloom-ink);
  font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px -8px #0007, 0 0 0 1px var(--bloom-line); cursor: pointer;
}
.call .vol-confetti svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call .vol-confetti svg path:first-child { fill: var(--bloom-live); stroke: var(--bloom-live); }
.call .vol-confetti:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.confetti { position: fixed; z-index: 1000; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; will-change: transform, opacity; }
/* One camera, big (spotlight.js): over the whole stage, the picture uncropped. */
/* It sits in the room's card, under the Live line and above the controls, so
   Mic, Camera and End stay where they always are. */
.call .spotlight { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top) + 62px); bottom: calc(env(safe-area-inset-bottom) + 88px); left: 12px; right: 12px; display: grid; place-items: center; container-type: size; border-radius: 24px; overflow: hidden; background: var(--bloom-canvas); }
.call.controls-hidden .spotlight { top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; }
.call .spotlight[hidden] { display: none; }
.call .spotlight video { width: min(100cqw, 100cqh * var(--video-ratio, .5625)); height: min(100cqh, 100cqw / var(--video-ratio, .5625)); object-fit: cover; border-radius: 24px; background: #0b0b0c; }
.call .spotlight video.mirrored { transform: scaleX(-1); }
.call .spotlight-bar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.call .spotlight-name { padding: 6px 12px; border-radius: 16px; background: #000000a6; color: #fff; font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.call .spotlight-bar button { pointer-events: auto; height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: #fff; color: #111; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.call .spotlight-bar button[hidden] { display: none; }
.call .spotlight-close { font-size: 24px !important; line-height: 1; padding: 0 !important; width: 44px; }
.call .spotlight-bar button:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.call.spotlit .self-view { visibility: hidden; }
/* Every circle is its face image (circles.js: eyes over initials); the letters
   stay in the text for screen readers and are not drawn twice. */
.person-circle { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; }
/* Photos (circles.js): square pictures drawn round wherever a circle is an image. */
img[src^="/v1/chillin/photos/"] { border-radius: 50%; object-fit: cover; }
.circle-photo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.circle-photo-add { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--bloom-ink); color: var(--bloom-canvas); font-size: 14px; font-weight: 700; cursor: pointer; }
.circle-photo-add:focus-within { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.circle-photo-remove { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--bloom-muted); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.circle-photo-remove[hidden] { display: none; }
/* One on one: the frame takes their camera's shape (--video-ratio from media.js),
   centred in the room, so a portrait phone in a wide window, or a wide camera on a
   phone, has no black bars. A portrait face on a portrait phone still fills it. */
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"]:has(> .tile.has-video) { display: grid; place-items: center; container-type: size; background: none; padding: 0; }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile.has-video { width: min(100cqw, 100cqh * var(--video-ratio, 1.3333)); height: min(100cqh, 100cqw / var(--video-ratio, 1.3333)); }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile.has-video video { object-fit: cover; }
@media (max-width: 600px) and (orientation: portrait) {
  .call.has-remote:not(.table-mode) .tiles[data-remote-count="1"] > .tile.has-video.portrait-camera { width: 100cqw; height: 100cqh; }
}
/* Showing something (a back camera, spotlight.js): that circle grows a little
   for everyone, above its neighbours, and settles back when they flip back.
   Nobody's screen is taken over; tap them and Bigger to see it big. */
.call.table-mode .pucks > .tile.showing { z-index: 4 !important; }
.call .self-view { transition: width .5s cubic-bezier(.2,.75,.2,1), height .5s cubic-bezier(.2,.75,.2,1); }
.call .self-view:has(> .tile.showing) { --self-width: clamp(120px, 32vw, 200px); }
@media (prefers-reduced-motion: reduce) { .call.table-mode .pucks > .tile, .call .self-view { transition: none; } }
/* Your own view shows when you're talking too: the same coral ring as everyone
   else, on the corner circle, the waiting seat and your camera there. */
.call .self-view:has(> .tile.speaking), .call .waiting-you-seat.speaking .waiting-you, .call .waiting-camera:has(> .tile.speaking) {
  box-shadow: 0 0 0 3px var(--bloom-live), 0 0 22px color-mix(in srgb, var(--bloom-live) 55%, transparent) !important;
}
.call .waiting-you { transition: box-shadow .2s ease; }
/* Two or three cameras: rounded pictures stacked to fill the room (circles are
   for crowds, 4 or more others: media.js). One column on a portrait phone, the
   first across the top with three; side by side when the screen is wide. */
.call.has-remote:not(.table-mode) .tiles:is([data-remote-count="2"], [data-remote-count="3"]) {
  position: absolute; inset: auto; left: 12px; right: 12px; padding: 0; background: none;
  top: calc(var(--call-heading-height, 72px) + 4px); bottom: calc(var(--call-controls-height, 96px) + 12px);
  display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
}
.call.has-remote:not(.table-mode) .tiles[data-remote-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="3"] > .tile.first-remote { grid-column: 1 / -1; }
@media (min-aspect-ratio: 1/1) {
  .call.has-remote:not(.table-mode) .tiles[data-remote-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call.has-remote:not(.table-mode) .tiles[data-remote-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .call.has-remote:not(.table-mode) .tiles[data-remote-count="3"] > .tile.first-remote { grid-column: auto; }
}
.call.has-remote:not(.table-mode) .tiles:is([data-remote-count="2"], [data-remote-count="3"]) > .tile { border-radius: 22px !important; overflow: hidden; background: var(--bloom-surface); }
.call.has-remote:not(.table-mode) .tiles:is([data-remote-count="2"], [data-remote-count="3"]) > .tile video { object-fit: cover; }
.call.has-remote:not(.table-mode) .tiles:is([data-remote-count="2"], [data-remote-count="3"]) > .tile.speaking { box-shadow: inset 0 0 0 4px var(--bloom-live) !important; }
/* Circles frame a little lower on the picture, so a face sits naturally in them. */
.call.table-mode .pucks > .tile video, .call .waiting-camera > .tile video { object-position: 50% 62%; }
/* Showing something with two or three cameras: that picture takes the bigger
   share of the room (first, and across the top), others stay in view. */
.call.has-remote:not(.table-mode) .tiles:is([data-remote-count="2"], [data-remote-count="3"]) > .tile.showing { order: -1; }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="2"]:has(> .tile.showing) { grid-template-rows: 2fr 1fr; }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="3"]:has(> .tile.showing) { grid-template-rows: 2fr 1fr; }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="3"]:has(> .tile.showing) > .tile { grid-column: auto; }
.call.has-remote:not(.table-mode) .tiles[data-remote-count="3"]:has(> .tile.showing) > .tile.showing { grid-column: 1 / -1; }
@media (min-aspect-ratio: 1/1) {
  .call.has-remote:not(.table-mode) .tiles[data-remote-count="2"]:has(> .tile.showing) { grid-template-rows: none; grid-template-columns: 2fr 1fr; }
}
.call .tile.sliding .tile-label { opacity: 0; transition: none; }
.call .tile .tile-label { transition: opacity .18s ease-out; }
/* Microphone and speaker choice (computers only, app.js). */
.island .device-row { cursor: default; }
.island .device-row > span { flex: none; }
.island .device-row select { flex: 1 1 auto; width: 0; min-width: 0; max-width: 150px; padding: 6px 8px; border: 0; border-radius: 10px; background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 13px; font-weight: 600; text-overflow: ellipsis; }
.island .device-row select:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: 2px; }
.island .device-row[hidden] { display: none; }
/* Press and hold a friend's picture: no phone text selection or callout. */
.call .stage .tile[data-identity] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Hiding the controls keeps the room where it is (bloom), so the row of people
   outside table mode stays put too. */
.call.controls-hidden:not(.audio-only):not(.table-mode) .pucks { bottom: calc(var(--call-controls-height, 140px) + 4px); }
/* Make your own face (face-maker.js): a full-screen pad over the page, with the
   same canvas, ink and pills as the rest of bloom. */
button.circle-photo-add { border: 0; font: inherit; font-size: 14px; font-weight: 700; }
button.circle-photo-add:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.circle-photo[hidden] { display: none; }
.face-maker { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--bloom-canvas); color: var(--bloom-ink); padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 12px; overscroll-behavior: contain; }
.face-maker > * { width: 100%; max-width: 420px; }
.face-maker [hidden] { display: none !important; }
.face-maker button { font: inherit; color: inherit; cursor: pointer; }
.face-maker button:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.face-maker-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.face-maker-cancel { min-height: 40px; border: 0; background: none; font-weight: 600 !important; color: var(--bloom-muted) !important; }
.face-maker-save { min-height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--bloom-ink); color: var(--bloom-canvas) !important; font-weight: 700 !important; }
.face-maker-modes { display: flex; padding: 3px; border-radius: 999px; background: var(--bloom-control); }
.face-maker-modes button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-weight: 800 !important; color: var(--bloom-muted) !important; }
.face-maker-modes button[aria-pressed="true"] { background: var(--bloom-canvas); color: var(--bloom-ink) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.face-maker-title { margin: 6px 0 0; font-family: "Nunito", system-ui, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.face-maker-hint { margin: -6px 0 0; color: var(--bloom-muted); font-size: 14px; }
.face-maker-pad { display: flex; justify-content: center; }
.face-maker-pad canvas { width: min(300px, 78vw); aspect-ratio: 1; max-width: 100%; border-radius: 50%; touch-action: none; box-shadow: 0 0 0 3px var(--bloom-ink); }
.face-maker-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.face-maker-tools > button:not(.face-maker-paint) { min-height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: var(--bloom-control); font-size: 14px !important; font-weight: 700 !important; }
.face-maker-tools > button[aria-pressed="true"]:not(.face-maker-paint) { background: var(--bloom-ink); color: var(--bloom-canvas) !important; }
.face-maker-paint { width: 34px; height: 34px; padding: 0; border: 2px solid rgba(0, 0, 0, .16); border-radius: 8px; }
.face-maker-paint[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bloom-canvas), 0 0 0 5px var(--bloom-ink); }
.face-maker-paint.erase { background: repeating-conic-gradient(#d9d8d2 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.face-maker-starters-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bloom-muted); }
.face-maker-starters { display: flex; gap: 12px; overflow-x: auto; margin-top: -4px; }
.face-maker-starters button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font-size: 12px !important; color: var(--bloom-muted) !important; }
.face-maker-starters canvas { width: 52px; height: 52px; }
.face-maker-error { min-height: 1.2em; margin: 0; color: var(--bloom-live-text); font-size: 14px; text-align: center; }

/* ── No mascot (2026-09-30, Elliott) ─────────────────────────────────────────
   Dot is gone: the only faces in the app are the ones people make. The logo is
   the word with one orange dot on the i, and now and then the i and n lean in
   toward each other and rest there, chillin'. */
#home:not(.unregistered):not(.friends-live) #composer-section { margin-top: 8px; }
.wordmark-i, .wordmark-n { display: inline-block; }
.wordmark.leaning .wordmark-i { transform-origin: 50% 100%; animation: wordmark-i-lean 4.2s cubic-bezier(.45, 0, .3, 1); }
.wordmark.leaning .wordmark-n { transform-origin: 15% 100%; animation: wordmark-n-lean 4.2s cubic-bezier(.45, 0, .3, 1); }
@keyframes wordmark-i-lean { 0% { transform: none; } 18%, 76% { transform: rotate(4deg); } 100% { transform: none; } }
@keyframes wordmark-n-lean { 0%, 3% { transform: none; } 21%, 76% { transform: rotate(-4deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wordmark.leaning :is(.wordmark-i, .wordmark-n) { animation: none; } }

/* The couch: the hangout card's people sit on a couch in your color. It is as
   wide as its cushions (--couch-cushions, set by app.js), from a loveseat up to
   four seats; beanbags take anyone past that. */
#home:not(.unregistered) #composer-section {
  grid-template-areas: "info info info info" "couch couch couch couch" "beans beans beans beans" "card card card card" "live live live live" "media media media media" "end end end end";
}
.couch { display: none; }
#home:not(.unregistered) .couch {
  --couch-cushions: 2; --fab: var(--couch-fabric, #2f7dff); --fab-dark: color-mix(in srgb, var(--fab) 80%, #000);
  grid-area: couch; justify-self: center; position: relative; display: block;
  width: calc(var(--couch-cushions) * 56px + 30px + 80px); height: 148px; margin: 4px 0 6px;
  transition: width .35s cubic-bezier(.3, 1.3, .5, 1);
}
#home:not(.unregistered) .couch::before {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 30px; border-radius: 50%;
  background: repeating-linear-gradient(90deg, #f4e7d2 0 12px, #efdcc0 12px 24px);
}
.couch-sofa { position: absolute; left: 40px; bottom: 16px; width: calc(var(--couch-cushions) * 56px + 30px); height: 104px; transition: width .35s cubic-bezier(.3, 1.3, .5, 1); }
.couch-sofa::before, .couch-sofa::after { content: ""; position: absolute; top: 40px; width: 26px; height: 54px; border-radius: 13px 13px 9px 9px; background: var(--fab-dark); z-index: 1; }
.couch-sofa::before { left: 0; } .couch-sofa::after { right: 0; }
.couch-back { position: absolute; left: 9px; right: 9px; top: 4px; height: 62px; border-radius: 26px 26px 12px 12px; background: var(--fab-dark); }
.couch-cushions { position: absolute; left: 15px; right: 15px; top: 54px; height: 30px; border-radius: 11px; background: repeating-linear-gradient(90deg, var(--fab) 0 53px, var(--fab-dark) 53px 56px); }
.couch-base { position: absolute; left: 12px; right: 12px; top: 80px; height: 14px; border-radius: 0 0 8px 8px; background: var(--fab-dark); }
.couch-base::before, .couch-base::after { content: ""; position: absolute; top: 14px; width: 7px; height: 8px; border-radius: 0 0 3px 3px; background: #3b2a22; }
.couch-base::before { left: 16px; } .couch-base::after { right: 16px; }
.couch-lamp { position: absolute; left: 6px; bottom: 26px; width: 22px; height: 98px; background: linear-gradient(#3b2a22, #3b2a22) center 18px / 3px 80px no-repeat; }
.couch-lamp::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 20px; background: #ffc21a; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.couch-lamp::after { content: ""; position: absolute; top: 8px; left: -20px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(#ffe7a0aa, transparent 70%); animation: couch-glow 5s ease-in-out infinite; }
@keyframes couch-glow { 50% { opacity: .55; } }
.couch-plant { position: absolute; right: 2px; bottom: 22px; font-size: 28px; line-height: 1; }
.couch-seats { position: absolute; left: 55px; top: 42px; display: flex; align-items: flex-end; z-index: 2; }
.couch-seats > * { flex: none; width: 56px; display: grid; place-items: center; }
#home:not(.unregistered) .couch .home-companion { grid-area: auto; width: 56px; margin: 0; gap: 0; }
#home:not(.unregistered) .couch .home-companion::after { content: none; }
#home:not(.unregistered) .couch .you-circle { width: 50px; height: 50px; font-size: 18px; border-width: 2px; }
.couch .couch-seat { width: 50px; height: 50px; font-size: 18px; justify-self: center; box-sizing: border-box; border: 2px solid var(--bloom-canvas); background-size: cover; }
.couch-seats > .couch-seat { width: 50px; margin: 0 3px; }
.couch-plus {
  border: 0; padding: 0; cursor: pointer; font: 900 20px/1 system-ui, sans-serif; color: #0000007a;
  background: #ffc21a; box-shadow: inset 0 -3px 0 #00000014;
}
.couch-seats > .couch-plus { width: 44px; height: 38px; margin: 0 6px 0; border-radius: 12px; animation: couch-squish 3s ease-in-out infinite; }
.couch-plus:focus-visible { outline: 3px solid var(--bloom-ink); outline-offset: 3px; }
@keyframes couch-squish { 50% { transform: scale(1.07, .93) translateY(2px); } }
.couch-beanbags { grid-area: beans; display: flex; justify-content: center; gap: 12px; margin: 0 0 10px; }
.couch-beanbags[hidden] { display: none; }
.couch-bean { width: 40px; height: 40px; font-size: 15px; border-radius: 50%; box-shadow: 0 12px 0 -1px #e8e4da; background-size: cover; }
.couch-beanbags .couch-plus { border-radius: 50%; background: #efeee9; color: #9d9a91; animation: none; }
.couch-arrive { animation: couch-arrive .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes couch-arrive { from { transform: translateY(-36px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .couch-plus, .couch-arrive, .couch-lamp::after { animation: none !important; } .couch, .couch-sofa { transition: none; } }
@media (max-width: 359px) { #home:not(.unregistered) .couch { transform: scale(.9); } }
/* The people picker opens in an island, outside #home, where door.css's rows
   never reached it; the couch's + opens it too, so it gets the same rows here. */
.island .audience-picker-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 4px 6px; }
.island .audience-picker-heading span { font-size: 12px; color: var(--bloom-muted); }
.island #audience-picker-list { display: grid; max-height: 256px; overflow-y: auto; overscroll-behavior: contain; }
.island .audience-person { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px; border-radius: 12px; cursor: pointer; }
.island .audience-person:has(input:checked) { background: var(--bloom-surface); }
.island .audience-person img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; }
.island .audience-person span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.island .audience-person input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0 4px; accent-color: var(--bloom-ink); }
.island #audience-picker-done { width: 100%; margin-top: 8px; }
.island #audience-picker-done:disabled { opacity: .45; }
.couch-plus { background: var(--couch-pillow, #ffc21a); }

/* Nobody starts blank (face-intro.js): a face is already picked the first time. */
.face-intro { position: fixed; inset: 0; z-index: 68; overflow-y: auto; overscroll-behavior: contain; background: var(--bloom-canvas); color: var(--bloom-ink); padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
.face-intro-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.face-intro-you { width: 96px; height: 96px; border-radius: 50%; animation: face-intro-bob 2.6s ease-in-out infinite; }
@keyframes face-intro-bob { 50% { transform: translateY(-3px); } }
.face-intro h2 { margin: 2px 0 0; font-family: "Nunito", ui-rounded, system-ui, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -.3px; }
.face-intro-hint { margin: -6px 0 4px; color: var(--bloom-muted); font-size: 14px; text-align: center; }
.face-intro-label { align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bloom-muted); }
.face-intro-colors { width: 100%; display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px 10px; padding: 0 4px; }
.face-intro-color { aspect-ratio: 1; width: 100%; border: 0; padding: 0; border-radius: 50%; background: var(--circle-tint); cursor: pointer; }
.face-intro-faces { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.face-intro-face { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 2px 0; font: 700 11px/1.2 system-ui, sans-serif; color: var(--bloom-muted); cursor: pointer; }
.face-intro-face img { width: 48px; height: 48px; border-radius: 50%; }
.face-intro [aria-checked="true"]:is(.face-intro-color), .face-intro-face[aria-checked="true"] img { outline: 3px solid var(--bloom-ink); outline-offset: 2px; }
.face-intro-face[aria-checked="true"] { color: var(--bloom-ink); }
.face-intro button:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.face-intro-error:empty { display: none; }
.face-intro-error { margin: 0; font-size: 13px; color: #9a3d29; }
.face-intro-go { width: 100%; margin-top: 8px; min-height: 50px; border: 0; border-radius: 16px; background: var(--bloom-ink); color: var(--bloom-canvas); font: 800 16px system-ui, sans-serif; cursor: pointer; }
.face-intro-own { margin: 0; font-size: 14px; color: var(--bloom-muted); }
.face-intro-own button { border: 0; background: none; padding: 4px 2px; font: 700 14px system-ui, sans-serif; color: var(--bloom-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.face-intro button:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .face-intro-you { animation: none; } }

/* A friend who hasn't saved an account: a small Guest mark beside the name on the
   Friends tab (the older Guest note stays hidden there); settings rows keep the note. */
.friend-guest-pill { display: none; }
#home .friend-details:has(.friend-guest-pill:not([hidden])) { display: flex; align-items: center; gap: 8px; }
#home .friend-details:has(.friend-guest-pill:not([hidden])) strong { min-width: 0; }
#home .friend-guest-pill:not([hidden]) { display: inline-block; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--bloom-surface); color: var(--bloom-muted); font-size: 12px; font-weight: 600; line-height: 18px; }
.friend-tags-guest { margin: 2px 0 10px; max-width: 34ch; color: var(--bloom-muted); font-size: 13px; line-height: 18px; }

/* Change your face mid-hangout (face-tray.js): a small sheet over the call,
   two scrolling rows (colors, then faces with Draw and Paint at the end). */
.face-tray-layer { position: fixed; inset: 0; z-index: 66; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bloom-ink) 12%, transparent); animation: face-tray-fade .18s ease-out; }
.face-tray { width: 100%; max-width: 440px; box-sizing: border-box; background: var(--bloom-canvas); color: var(--bloom-ink); border-radius: 26px; padding: 12px 0 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); display: grid; gap: 8px; animation: face-tray-rise .26s cubic-bezier(.3, 1.3, .5, 1); }
.face-tray-layer.leaving { animation: face-tray-fade .16s ease-in reverse forwards; }
.face-tray-layer.leaving .face-tray { animation: face-tray-rise .16s ease-in reverse forwards; }
@keyframes face-tray-fade { from { opacity: 0; } }
@keyframes face-tray-rise { from { transform: translateY(40px) scale(.96); opacity: 0; } }
.face-tray button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.face-tray button:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
.face-tray-top { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.face-tray-top strong { flex: 1; font: 800 17px/1.2 var(--bloom-display, "Nunito", system-ui, sans-serif); }
.face-tray-you { width: 44px; height: 44px; border-radius: 50%; }
.face-tray-done { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--bloom-ink); color: var(--bloom-canvas) !important; font-weight: 800 !important; }
.face-tray-note, .face-tray-error { margin: 0; padding: 0 14px; font-size: 13px; color: var(--bloom-muted); }
.face-tray-error { color: #9a3d29; }
.face-tray-error:empty { display: none; }
.face-tray-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px; scroll-padding: 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.face-tray-row::-webkit-scrollbar { display: none; }
.face-tray-color { flex: none; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: var(--circle-tint); }
.face-tray-face { flex: none; border: 0; padding: 0; background: none; border-radius: 50%; }
.face-tray-face img { display: block; width: 52px; height: 52px; border-radius: 50%; transition: transform .15s; }
.face-tray-face:active img { transform: scale(.9); }
:is(.face-tray-color, .face-tray-face)[aria-checked="true"] { outline: 3px solid var(--bloom-ink); outline-offset: 2px; }
.face-tray-own { flex: none; width: 52px; height: 52px; border: 2px dashed var(--bloom-surface-border); border-radius: 50%; background: var(--bloom-surface); display: grid; place-content: center; justify-items: center; gap: 0; padding: 0; font-size: 10px !important; font-weight: 800 !important; line-height: 1.1; }
.face-tray-own span:first-child { font-size: 18px; }
.call .waiting-you[role="button"], .call .room-self { cursor: pointer; }
.call .waiting-you[role="button"]:focus-visible, .call .room-self:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 3px; }

/* A friend drawing a new face: a pencil scribbles on their face until they're done. */
.call .tile .face-pencil { position: absolute; z-index: 3; right: 0; bottom: 4%; font-size: 26px; line-height: 1; pointer-events: none; animation: face-pencil .7s ease-in-out infinite alternate; transform-origin: 20% 90%; }
.call .tile:not(.puck) .face-pencil { display: none; }
@keyframes face-pencil { from { transform: translate(-10%, 0) rotate(-12deg); } to { transform: translate(12%, -14%) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .face-tray-layer, .face-tray, .call .tile .face-pencil { animation: none !important; } }
.call #waiting-invite[hidden] { display: none !important; }

/* A friend's hangout as a slim bar (2026-10-01): faces, "Eric's hanging out",
   when it runs till, and Join. Your mic and camera are set on your own card. */
#home .friend-hangout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "faces title join" "faces info join";
  align-items: center; column-gap: 12px; padding: 12px 12px 12px 14px; border-radius: 22px; text-align: left; }
#home .friend-hangout .people-row { grid-area: faces; display: flex; gap: 0; margin: 0; }
#home .friend-hangout .person { width: auto; gap: 0; }
#home .friend-hangout .person + .person { margin-left: -14px; }
#home .friend-hangout :is(.person-name, .open-person) { display: none; }
#home .friend-hangout :is(.person-seat, .person-face) { width: 46px; height: 46px; }
#home .friend-hangout .person-face { border-width: 2px; box-shadow: 0 0 0 2px var(--bloom-live); }
#home .friend-hangout .away-person .person-face { box-shadow: 0 0 0 2px #c9c6bd; }
#home .friend-hangout .friend-hangout-title { grid-area: title; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; line-height: 21px; color: var(--bloom-ink); }
#home .friend-hangout .group-info { grid-area: info; justify-content: flex-start; font-size: 13px; line-height: 19px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .friend-hangout .action { grid-area: join; width: auto; min-width: 72px; min-height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; }
#home .friend-hangout .friend-media { display: none !important; }
/* Who stopped by wears their own face. */
.visit-face { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; }
#home .own-live .waiting-line .visit-face { display: block; width: 52px; height: 52px; margin: 0 auto 8px; font-size: 20px; }
/* Stepped away (2026-10-01, Elliott): a little open door, the host's face
   stepping out of it to the right. It walks out once; reduced motion skips it. */
#home .friend-hangout .away-person .person-seat { width: 66px; }
#home .friend-hangout .away-door { left: 10px; top: 2px; }
/* The doorway is dark; the yellow door has swung open against its left side. */
.away-door { position: absolute; width: 26px; height: 42px; border-radius: 13px 13px 2px 2px;
  background: #3a3833; box-shadow: 0 0 0 2px #d9cdb4; }
.away-door-panel { position: absolute; left: -10px; top: 3px; width: 10px; height: 40px; border-radius: 6px 2px 2px 4px; background: #f2c14e;
  box-shadow: inset 0 0 0 1.5px #c99a2e; transform: skewY(-12deg); transform-origin: 100% 0; }
.away-door-panel::after { content: ""; position: absolute; left: 2px; top: 20px; width: 3px; height: 3px; border-radius: 50%; background: #8a6514; }
#home .friend-hangout .away-person .person-face { position: absolute; left: 26px; bottom: 0; width: 40px; height: 40px; filter: none; opacity: 1;
  box-shadow: 0 0 0 2px #fff; animation: step-out .9s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes step-out { from { transform: translateX(-14px) scale(.8); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #home .friend-hangout .away-person .person-face { animation: none; } }

/* The couch in the room (2026-10-01, Elliott): waiting alone, you sit on the
   host's couch instead of floating as a big circle. Your circle is the same
   button and camera seat as before. The other cushion is a + for the host;
   for a guest it is the host's empty spot, and if they stepped away, a little
   door beside the couch has them stepping out. */
.call .waiting-copy > .waiting-couch-wrap { --room-couch-scale: 1.5; width: 100%; height: calc(148px * var(--room-couch-scale)); display: grid; justify-items: center; }
.call .room-couch {
  --couch-cushions: 2; --fab: var(--couch-fabric, #2f7dff); --fab-dark: color-mix(in srgb, var(--fab) 80%, #000);
  position: relative; display: block; width: calc(var(--couch-cushions) * 56px + 30px + 80px); height: 148px;
  transform: scale(var(--room-couch-scale)); transform-origin: 50% 0;
}
.call .room-couch::before { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 30px; border-radius: 50%;
  background: repeating-linear-gradient(90deg, #f4e7d2 0 12px, #efdcc0 12px 24px); }
.call .room-couch .couch-seats > * { flex: none; width: 50px; height: 50px; margin: 0 3px; }
.call .room-couch .waiting-you-seat { position: relative; width: 50px; height: 50px; }
.call .room-couch .waiting-you { width: 50px; height: 50px; font-size: 18px; border-width: 2px; }
.call .room-couch .waiting-camera { border-width: 2px; }
.call .room-couch .waiting-other-seat:empty { visibility: hidden; }
.call .room-couch .waiting-other-seat .couch-plus { width: 44px; height: 38px; margin: 6px 3px 0; border-radius: 12px; animation: couch-squish 3s ease-in-out infinite; }
.call .room-couch .couch-side-door { position: absolute; right: -10px; bottom: 20px; width: 40px; height: 44px; }
.call .room-couch .couch-side-door .away-door { left: 10px; top: 0; }
.call .room-couch .couch-side-door .step-face { position: absolute; left: 22px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #fff; font-size: 9px;
  animation: step-out .9s cubic-bezier(.3, .7, .4, 1) both; }
@media (max-height: 760px) { .call .waiting-copy > .waiting-couch-wrap { --room-couch-scale: 1.2; } }
@media (max-height: 620px) { .call .waiting-copy > .waiting-couch-wrap { --room-couch-scale: 1; } }
@media (prefers-reduced-motion: reduce) { .call .room-couch .couch-side-door .step-face, .call .room-couch .couch-plus { animation: none; } }
@media (max-height: 480px) {
  .call .waiting-copy > .waiting-couch-wrap { --room-couch-scale: .55; }
  /* Sideways phones: the buttons say it; the explaining line would sit under the controls. */
  .call .waiting-copy:has(#waiting-guest:not([hidden])) #waiting-note { display: none !important; }
  .call #waiting-guest .soft-button { min-height: 44px; }
}
@media (max-height: 620px) { .call .waiting-copy:has(#waiting-guest:not([hidden])) #waiting-note { display: none !important; } }
@media (max-width: 359px) { .call #waiting-guest { flex-wrap: nowrap; gap: 6px; } .call #waiting-guest .soft-button { padding: 0 14px; font-size: 15px; } }
/* Who stopped by, as a card of its own: their face, when, and their note. */
.call .waiting-visits li { display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: var(--bloom-canvas); box-shadow: 0 0 0 1px var(--bloom-line); text-align: left; }
.call .visit-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.call .visit-head .visit-face { width: 48px; height: 48px; font-size: 17px; }
.call .visit-head strong { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; line-height: 22px; }
.call .visit-time { flex: none; font-size: 14px; color: var(--bloom-muted); }
.call .visit-note { position: relative; margin: 0 0 0 60px !important; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--bloom-surface); color: var(--bloom-ink) !important;
  font-size: 15px !important; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.call .visit-reply { justify-self: start; margin-left: 60px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--bloom-control); color: var(--bloom-ink); font: inherit; font-size: 14px; font-weight: 700; }
#waiting-title[hidden] { display: none !important; }

/* Your face at the top of your profile (top-right button); tapping it opens the face picker. */
.settings-face { display: grid; justify-items: center; gap: 12px; margin: 4px 0 18px; }
.settings-face-open { padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.settings-face-open:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 3px; }
.settings-face-you.person-circle { display: block; width: 96px; height: 96px; border-radius: 50%; background-color: var(--circle-tint); }
/* Report someone in a call, or remove them as host (docs/CHILLIN-SAFETY.md). */
.call .vol-more {
  pointer-events: auto; display: flex; align-items: center; height: 44px; padding: 0 14px;
  border: 0; border-radius: 22px; background: var(--bloom-canvas); color: var(--bloom-ink);
  font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px -8px #0007, 0 0 0 1px var(--bloom-line); cursor: pointer;
}
.call .vol-more[hidden] { display: none; }
.call .vol-more:focus-visible { outline: 3px solid var(--bloom-live); outline-offset: 2px; }
/* The host changing who can join mid-hangout: the same choices, with a heading. */
.island #room-audience-heading { margin: 6px 10px 8px; }
#room-audience-heading[hidden] { display: none; }

/* What you're up to (2026-10-18, Elliott chose the bubble): a speech bubble on
   your face on the couch. Dashed "what's up?" until you say something; tap to
   write, ✓ and it pops into place. While you're live it sits by your face. */
.couch-say { display: none; }
#home:not(.unregistered) .couch { margin-top: calc(4px + var(--say-room, 0px)); }
#home:not(.unregistered) .couch-say:not([hidden]) { display: block; position: absolute; z-index: 3; left: 62px; bottom: calc(100% - 18px); }
#home:not(.unregistered) .couch-say.live { left: 88px; bottom: calc(100% - 40px); }
#home:not(.unregistered):not(.has-owned-hangout) .composer-info { visibility: hidden; }
#home:not(.unregistered) #start-subtitle { display: none !important; }
.couch-say-bubble {
  position: relative; display: block; box-sizing: border-box; width: max-content; max-width: 200px; margin: 0;
  padding: 9px 14px; border: 0; border-radius: 20px; background: #fff; color: var(--bloom-ink, #1a1d1c);
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: left; overflow-wrap: anywhere;
  box-shadow: 0 6px 18px #0000001f, 0 1px 0 #0000000a; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.couch-say-bubble::after {
  content: ""; position: absolute; left: 18px; bottom: -8px; width: 16px; height: 16px; background: inherit;
  transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 6px #0000000d;
}
#couch-say-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.couch-say.live .couch-say-bubble:not(form) { max-width: 220px; }
.couch-say.empty .couch-say-bubble:not(form) {
  background: #fffdf7; color: #8b877d; font-weight: 600; border: 2px dashed #d9d4c7; box-shadow: none;
  animation: say-bob 3.2s ease-in-out infinite;
}
.couch-say.empty .couch-say-bubble:not(form)::after { background: #fffdf7; border-right: 2px dashed #d9d4c7; border-bottom: 2px dashed #d9d4c7; bottom: -9px; box-shadow: none; }
.couch-say.empty #couch-say-text::after { content: " ✎"; font-weight: 400; }
.couch-say-bubble:disabled { cursor: default; }
.couch-say-bubble:focus-visible { outline: 3px solid var(--bloom-ink, #1a1d1c); outline-offset: 3px; }
/* Writing: an orange edge that runs on round the tail, as one outline. The
   tail's white half covers the edge where it joins, and its own two orange
   sides carry the line down to the point. */
form.couch-say-bubble {
  display: flex; align-items: center; gap: 8px; max-width: none; width: 200px;
  padding: 3px 3px 3px 11px; border: 3px solid #ff5a36; cursor: text;
}
form.couch-say-bubble::after {
  box-sizing: border-box; left: 15px; bottom: -9.5px; width: 16px; height: 16px; background: #fff;
  border-right: 3px solid #ff5a36; border-bottom: 3px solid #ff5a36; box-shadow: none;
}
form.couch-say-bubble[hidden] { display: none; }
#couch-say-input {
  flex: 1; min-width: 0; height: 22px; margin: 0; padding: 0; border: 0; outline: 0; resize: none; background: none;
  font: inherit; color: inherit; line-height: 1.25; caret-color: #ff5a36; position: relative; z-index: 1;
}
#couch-say-input::placeholder { color: #8b877d; font-weight: 600; }
.couch-say-ok {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; background: #ff5a36; color: #fff;
  font: 800 18px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center;
}
.couch-say.pop .couch-say-bubble { animation: say-pop .5s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 26px 100%; }
#couch:has(.couch-say.pop) #you-circle { animation: say-nod .5s ease-in-out; }
@keyframes say-pop { from { transform: scale(.55); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes say-nod { 40% { transform: translateY(3px) rotate(-6deg); } }
@keyframes say-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .couch-say-bubble, #couch:has(.couch-say.pop) #you-circle { animation: none !important; } }
/* A friend's words float from their face above their bar (2026-10-18). */
#home .friend-hangout { position: relative; }
#home .friend-hangout.has-say { margin-top: calc(var(--say-height, 56px) + 2px); }
#home .friend-hangout-say {
  position: absolute; left: 44px; bottom: calc(100% - 6px); z-index: 1; box-sizing: border-box; max-width: min(250px, calc(100% - 56px));
  margin: 0; padding: 9px 14px; border-radius: 20px; background: #fff; color: var(--bloom-ink, #1a1d1c);
  font-size: 15px; font-weight: 700; line-height: 1.25; text-align: left; overflow-wrap: anywhere; box-shadow: 0 6px 18px #0000001f, 0 1px 0 #0000000a;
  animation: say-pop .5s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 26px 100%;
}
#home .friend-hangout-say[hidden] { display: none; }
#home .friend-hangout-say > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#home .friend-hangout-say::after {
  content: ""; position: absolute; left: 18px; bottom: -8px; width: 16px; height: 16px; background: inherit;
  transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 6px #0000000d;
}
@media (prefers-reduced-motion: reduce) { #home .friend-hangout-say { animation: none; } }