/* 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;
}
.tiles > .grid { flex: 1 1 auto; min-height: 0; }
/* With the sheet up, the tiles squeeze into the top part instead of hiding
   behind it, so every letter and name stays in view. */
.tiles.sheet-open > .grid { flex: 0 0 auto; height: calc(38% - .45rem); }

/* ---- the control row: four buttons have to fit a 390px phone ---- */
.ctrl {
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
  position: relative;
}
@media (max-width: 420px) {
  .ctrl { font-size: .6rem; letter-spacing: .04em; padding: .65rem .2rem; }
}

.ctrl.chat {
  border-color: rgba(157,107,255,.5);
  color: var(--violet);
  text-shadow: 0 0 10px rgba(157,107,255,.5);
}
.ctrl.chat:hover, .ctrl.chat[aria-expanded="true"] { background: rgba(157,107,255,.1); }

/* lines said while the sheet was closed (the unread pip on the Chat button;
   scoped to .ctrl since round five so it never touches the avatar .badge in
   card.css, which now shares pages with this file) */
.ctrl .badge {
  position: absolute;
  top: -.45rem;
  right: -.3rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #1A0010;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(248,8,120,.75);
  text-shadow: none;
}

/* ---- the chat sheet, up over the bottom of the tiles ---- */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  max-height: 62%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .5rem .6rem .6rem;
  border: 1px solid rgba(157,107,255,.45);
  border-radius: 10px;
  background: rgba(10,15,23,.97);
  box-shadow: 0 0 26px -6px rgba(157,107,255,.6);
  animation: sheet-up .18s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sheet-top { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.reactions { flex: 1 1 auto; min-width: 0; display: flex; gap: .3rem; }
.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(157,107,255,.3);
  border-radius: 6px;
  background: rgba(157,107,255,.06);
  cursor: pointer;
}
.reaction:hover { background: rgba(157,107,255,.14); }
.reaction:active { transform: translateY(1px); }
.sheet-close {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet);
  text-shadow: 0 0 10px rgba(157,107,255,.5);
  background: none;
  border: 1px solid rgba(157,107,255,.35);
  border-radius: 5px;
  padding: .45rem .55rem;
  cursor: pointer;
}
.sheet-close:hover { background: rgba(157,107,255,.1); }

.sheet .lines { padding: .1rem .1rem; }
.sheet .line-who { color: var(--violet); text-shadow: 0 0 10px rgba(157,107,255,.45); }
.sheet .line.mine .line-who { color: var(--green); text-shadow: 0 0 10px rgba(59,255,158,.45); }
.sheet .line-text { font-size: .86rem; }
.sheet .say .btn { padding: .7rem .9rem; }

.btn.violet {
  color: #0B0618;
  border-color: rgba(157,107,255,.6);
  background: linear-gradient(180deg, #B48CFF, #8B5CF6);
  box-shadow: 0 0 20px -4px rgba(157,107,255,.75);
}

/* ---- 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(5,7,12,.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(248,8,120,.5); }

/* ---- the host's menu ---- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem 1rem calc(4.4rem + env(safe-area-inset-bottom));
  background: rgba(5,7,12,.72);
}
.menu-card {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .9rem .9rem 1rem;
  border: 1px solid rgba(248,8,120,.32);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 28px -8px rgba(248,8,120,.5);
}
.menu-name {
  margin: 0 0 .2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  text-shadow: 0 0 12px rgba(248,8,120,.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-btn {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .03em;
  /* Names are shown as typed, not shouted. */
  color: var(--brand);
  background: transparent;
  border: 1px solid rgba(248,8,120,.45);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-btn:hover { background: rgba(248,8,120,.07); }
.menu-btn.amber {
  color: var(--amber);
  border-color: rgba(255,154,60,.5);
  text-shadow: 0 0 10px rgba(255,154,60,.5);
}
.menu-btn.amber:hover { background: rgba(255,154,60,.08); }
.menu-btn.plain { color: var(--text-2); border-color: var(--line); }
.menu-note {
  margin: -.2rem 0 .3rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* "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(5,7,12,.7);
  padding: .1rem .35rem;
  border-radius: 3px;
}