/* 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, pink is the count of lines not read yet. */

/* ---- 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: #1A0410;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255,61,166,.7);
  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(33,230,255,.45); }

/* ---- 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(33,230,255,.3);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 28px -8px rgba(33,230,255,.5);
}
.menu-name {
  margin: 0 0 .2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(33,230,255,.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(--cyan);
  background: transparent;
  border: 1px solid rgba(33,230,255,.4);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-btn:hover { background: rgba(33,230,255,.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;
}