/* S2 booth — thread + composer + cutting/pressed cards. Worker 2-owned. */

/* Booth room fills the visible viewport exactly (topbar excluded); the composer
   sits at the flex bottom, so it tracks --app-height and stays above the iOS
   keyboard (app.js keeps --app-height synced to visualViewport). */
#room-booth {
  display: flex;
  flex-direction: column;
  height: calc(var(--app-height) - 52px - env(safe-area-inset-top, 0px));
  min-height: calc(var(--app-height) - 52px - env(safe-area-inset-top, 0px));
  overflow: hidden;
}

/* thread */
#room-booth .thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.bub {
  max-width: 82%;
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 14px;
  background: var(--panel-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  overflow-wrap: break-word;
}
.bub.you {
  align-self: flex-end;
  background: var(--line);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.bub .who { margin-bottom: 3px; }
.bub.you .who { text-align: right; }

.chiprow { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.cmp-note { font-size: 11px; color: var(--muted); }

/* cutting card */
.cutcard {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: 430px;
  flex: none;
}
.bvinyl {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px #33333a;
  background: radial-gradient(circle, #0b0b0c 0 12%, #222227 12% 30%, #1a1a1e 30% 58%, #212126 58% 82%, #18181c 82% 100%);
}
.bvinyl::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--red);
}
.stages { display: flex; flex-direction: column; gap: 5px; font-size: 12px; flex: 1; min-width: 0; }
.stages .st { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.stages .st.done { color: var(--soft); }
.stages .st.now { color: #fff; }
.stages .tick { width: 13px; text-align: center; font-size: 10px; color: var(--ok); flex: none; }
.stages .st.now .tick { color: var(--red); }
.cc-right { text-align: right; flex: none; align-self: flex-start; }
.cc-rec { color: var(--red-dim); }
.cc-left { font-size: 11px; color: var(--muted); margin-top: 5px; }

@media (max-width: 429px) {
  .bvinyl { width: 52px; height: 52px; }
  .stages { font-size: 11.5px; }
}

/* pressed card */
.presscard {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 11px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 430px;
  flex: none;
}
.pc-art {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.pc-art::after {
  /* spindle hole — reads as a pressed disc, not a thumbnail */
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}
.pc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-meta b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sub { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pc-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pc-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  flex: none;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pc-play:active { transform: translateY(1px); }

/* composer — bottom of the booth room, keyboard-safe via --app-height */
#room-booth .composer {
  flex: none;
  border-top: 1px solid var(--line);
  background: #101013;
  padding: 10px 12px calc(10px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#room-booth .composer > * { width: 100%; max-width: 720px; margin: 0 auto; }
.cmp-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1px;
}
.cmp-chips::-webkit-scrollbar { display: none; }
.cmp-chips .chip { flex: none; }
.cmp-row { display: flex; align-items: center; gap: 8px; }
.cmp-input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* ≥16px: stops iOS focus-zoom, keeps the viewport stable */
  padding: 11px 14px;
  outline: none;
}
.cmp-input::placeholder { color: var(--muted); }
.cmp-input:focus { border-color: #3a3a40; }
.cmp-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cmp-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  flex: none;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.cmp-send:active { transform: translateY(1px); }

/* desktop: roomier thread, cards keep their max width */
@media (min-width: 1024px) {
  #room-booth .thread { padding: 26px 24px 18px; gap: 14px; }
  .bub { max-width: 560px; }
  #room-booth .composer { padding: 12px 24px calc(12px + var(--safe-b)); }
}