/* augh yahh! -- the room, round two: chat sheet, reactions, the host's menu.
   Loaded after style.css and leans on its tokens. Same house style: dark
   ground, neon glow, phone first. Violet is the chat, amber is the one thing
   the host cannot take back, the brand pink is the count of lines not read
   yet (round nine). */

/* ---- the tiles and the sheet share one box ---- */
.tiles {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Round sixteen: the seats take the room they need and the chat takes the
   rest. The .sheet-open squeeze went with the floating sheet, and the whole
   .ctrl row (Mute / Chat / Leave, three outline colours) went with the three
   buttons: mute is the mic on your own seat, leave is the back arrow, and
   the chat is always on the screen. */
.tiles > .grid { flex: 0 0 auto; }

/* ---- the chat, under the seats (round sixteen, 2026-08-20) ----
   It was a floating violet-outlined box that slid up over the tiles when you
   pressed a Chat button, and the box was mostly empty space. Martin's picture
   has the chat simply on the screen under the seats, and that is what this is
   now: no border, no glow, no animation, no z-index, just the rest of the
   room. The bubbles inside it come from lobby.css, the same as everywhere. */
.sheet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .2rem 0 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* The reactions: behind the smiley in the send bar, not a permanent row. */
.reactions { flex: 0 0 auto; min-width: 0; display: flex; gap: .3rem; padding-bottom: .1rem; }
.react-open {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.react-open svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.react-open[aria-expanded="true"] { color: var(--brand); border-color: rgba(240,41,108,.5); }
.reaction {
  flex: 1 1 0;
  min-width: 0;
  max-width: 5.5rem;
  padding: .3rem 0;
  font-size: 1.25rem;
  line-height: 1;
  border: 1px solid rgba(138,43,226,.3);
  border-radius: var(--r-sm);
  background: rgba(138,43,226,.06);
  cursor: pointer;
}
.reaction:hover { background: rgba(138,43,226,.14); }
.reaction:active { transform: translateY(1px); }
/* The lines are the app's lines. Four rules used to repaint them in here: a
   violet name, a green name for yours, smaller words, and a square violet
   Send. All four are why this chat read as a different app, and all four are
   gone. .sheet-close and .btn.violet went with the Chat button. */
.sheet .lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .1rem; }

/* ---- a reaction, in the corner of the tile of whoever sent it ---- */
.tile .react {
  position: absolute;
  top: .3rem;
  right: .35rem;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px) scale(.8);
  transition: opacity .18s ease-out, transform .18s ease-out;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.9));
}
.tile .react.show { opacity: 1; transform: none; }

/* only the host's tiles do anything when tapped */
.tile.tappable { cursor: pointer; }
.tile.tappable:hover { border-color: rgba(240,41,108,.5); }

/* The menu sheet (.menu, .menu-card, .menu-btn) moved to style.css in round
   seventeen: it is shared chrome (the person card lives on five pages) and
   it wears the house-style sheet look now, not the old neon outline. */

/* "connecting" used to sit dead centre, on top of the letter of somebody
   with no camera (tester, 2026-08-18). It now sits at the top left. */
.tile .connecting {
  top: .35rem;
  left: .35rem;
  background: rgba(0,0,0,.7);
  padding: .1rem .35rem;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Round fourteen (2026-08-20), Martin's call: a private room is voice and
   chat, not video. So a tile is a SEAT, the way his picture has it: the
   person's letter in the middle, their name under it, a crown on whoever made
   the room and a mic button top left. An empty seat is a dashed box with a
   plus in it. No cameras, so no video anywhere.
   ========================================================================== */
/* ==========================================================================
   Round eighteen (2026-08-21), to the voice-live screen on Martin's page:
   LIVE and Voice pills with the count and an X out, the room's name centred,
   the seats as round faces in a row (ring while the mic is really on, crown
   on the host, a mic dot), dashed circles for the empty seats, the chat as
   small plain lines, and a Mic button with Share at the bottom. The old
   square-tile rules went with the old screen.
   ========================================================================== */

/* ---- the top row ---- */
.room .vtop { display: flex; align-items: center; gap: .45rem; padding: .2rem 0 .5rem; }
.room .vlive {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem; border-radius: 999px;
  background: var(--brand); color: #FFFFFF;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  box-shadow: 0 0 16px -3px var(--brand);
}
.room .vlive i { width: .42rem; height: .42rem; border-radius: 50%; background: #FFFFFF; animation: vlive-beat 1.4s ease-in-out infinite; }
@keyframes vlive-beat { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .room .vlive i { animation: none; } }
.room .vtag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--text-2);
  font-size: .66rem; font-weight: 700;
}
.room .vtag svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 2; }
.room .veye {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.16); color: #FFFFFF;
  font-size: .68rem; font-weight: 700;
}
.room .veye svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.room .vx {
  margin-left: auto;
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.room .vx svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.room .vx:active { transform: scale(.92); }

/* ---- the name, centred like his page ---- */
.room .vtitle { text-align: center; padding: .1rem 0 .6rem; display: flex; flex-direction: column; gap: .15rem; }
.room .vtitle b {
  font-family: var(--round); font-weight: 800; font-size: 1.05rem; color: #FFFFFF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.room .vtitle .cnt {
  font-family: var(--sans); font-size: .7rem; font-weight: 400;
  color: var(--text-2); letter-spacing: 0; text-shadow: none;
}

/* ---- the seats: round faces in a row ---- */
/* Ten seats, five to a row (Martin's call): a grid, so the rows line up
   whatever the screen, and the circles shrink a touch to fit five at 390px. */
.room .grid {
  display: grid !important; grid-template-columns: repeat(5, 1fr) !important;
  gap: .8rem .35rem; justify-items: center;
  /* headroom for the crown and the glow above the first row */
  padding: .55rem 0 .4rem;
}
.room .tile {
  position: relative; width: 100%; max-width: 4.2rem;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: none; border: 0; box-shadow: none;
  aspect-ratio: auto;
  /* style.css's square tile clips at its edge; here the crown and the
     talking glow live OUTSIDE the circle and were being cut off at the top
     (Martin's phone, 2026-08-21). */
  overflow: visible;
}
/* style.css still glows your own tile pink for the video rooms; here the
   ring belongs to the mic, not to being you */
.room .tile.me { border: 0; box-shadow: none; background: none; }
.room .tile video { display: none; }            /* voice and chat: nothing to show */
.room .tile .initial {
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--round); font-weight: 800; font-size: 1.35rem; color: #FFFFFF;
}
/* The circle lights while they are actually talking: the meter reads the
   sound itself (Martin's ask 2026-08-21), not the mute flag. */
.room .tile.talking .initial {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand), 0 0 18px -2px var(--brand);
  animation: talk-glow 1.1s ease-in-out infinite;
}
@keyframes talk-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--brand), 0 0 12px -2px var(--brand); }
  50% { box-shadow: 0 0 0 3px var(--brand), 0 0 22px -1px var(--brand); }
}
@media (prefers-reduced-motion: reduce) { .room .tile.talking .initial { animation: none; } }
.room .tile .nm {
  position: static; width: 100%; max-width: 100%; text-align: center;
  font-size: .64rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; padding: 0;
}
/* whoever made the room */
.room .tile.host::before {
  content: "\1F451"; position: absolute; top: -.5rem; right: .1rem; font-size: .85rem; z-index: 2;
}
/* the mic dot, bottom right of the face */
.room .tile .mic {
  position: absolute; top: 2.1rem; right: calc(50% - 1.6rem); z-index: 2;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; padding: 0; border: 2px solid var(--void);
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.room .tile.me .mic { cursor: pointer; }
.room .tile.me .mic:active { transform: scale(.9); }
.room .tile .mic.off { color: var(--text-3); }
.room .tile .mic.asking { color: var(--amber); }
.room .tile .mic { font-size: 0; }
.room .tile .mic::after {
  content: ""; width: .62rem; height: .62rem; display: block;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 17v4"/></svg>');
  mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 17v4"/></svg>');
}
.room .tile .mic.off::after,
.room .tile .mic.hidden::after {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M3 3l18 18"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M3 3l18 18"/></svg>');
}
/* Your own mic dot is never hidden: it is a control too. Somebody else's
   hides while they are talking. */
.room .tile.me .mic.hidden { display: flex; }
.room .tile .connecting { top: .2rem; left: .2rem; }
.room .tile .react { top: -.3rem; left: -.2rem; }

/* an empty seat: a dashed circle, nothing to tap (a seat fills when somebody
   walks in through the link) */
.room .tile.free { border: 0; background: none; }
.room .tile.free .plus {
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.22); background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 1.1rem; line-height: 1;
}
.room .tile.free .free-w { font-size: .6rem; color: var(--text-3); }

.room .tiles > .grid { flex: 0 0 auto; align-content: start; }

/* The Mic / Share row is gone (Martin's call 2026-08-21): the mic dot on
   your own circle is the one control. */

/* One chat style everywhere (Martin's option 2, 2026-08-21): the room draws
   the Chat tab's bubbles; like the stage, it shows no timestamps. */
.room .lines .line-when { display: none; }

/* ---- the eye's capsule (round twenty: the same on both live screens) ---- */
.room .veye { font: inherit; cursor: pointer; }
.room .veye:active { background: rgba(0,0,0,.8); }
.room .lo-people {
  display: inline-flex; align-items: center; gap: .3rem;
  flex: 0 1 auto; min-width: 0;
}
.room .lo-people .veye { margin-left: 0; }
.room .lo-people.open {
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 0 .55rem 0 0;
}
.room .lo-people.open .veye { background: none; border-color: transparent; }
.room .lo-people .who { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; }
.room .lo-people .who.hidden { display: none; }
.room .lo-people .who ul {
  list-style: none; margin: 0; display: flex; flex-direction: row; align-items: center; gap: .3rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: .1rem 0;
}
.room .lo-people .who ul::-webkit-scrollbar { display: none; }
.room .lo-people .who li { flex: 0 0 auto; cursor: pointer; }
.room .lo-people.open .who:not(.hidden) ul { animation: who-out-r .22s ease-out; }
@keyframes who-out-r {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .room .lo-people.open .who:not(.hidden) ul { animation: none; } }

/* The seat wears the real avatar (round twenty): the badge fills the circle,
   and a framed badge may breathe past its edge, which is what frames do. */
.room .tile .initial .badge.md { width: 2.9rem; height: 2.9rem; font-size: 1.2rem; }
.room .tile .initial .badge.md.framed { width: 3.4rem; height: 3.4rem; }
.room .tile .initial:has(.badge) { background: none; border-color: transparent; }
.room .tile.talking .initial:has(.badge) { border-color: transparent; }