/* ==========================================================================
   Backstage Lounge — posse comms, crew status, Scad storage
   ========================================================================== */

.screen-lounge .main { isolation: isolate; }

/* Neon lounge backdrop, faint behind everything, plus a fade to the abyss. */
.lounge__bg {
  position: fixed;
  top: var(--topbar-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: -1;
  width: calc(100% - var(--sidebar-w));
  height: calc(100% - var(--topbar-h));
  max-width: none;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: overlay;
  image-rendering: pixelated;
  pointer-events: none;
}
.screen-lounge .main::after {
  content: "";
  position: fixed;
  inset: var(--topbar-h) 0 0 var(--sidebar-w);
  z-index: -1;
  background: linear-gradient(to top, var(--bg), transparent 55%, rgb(18 18 29 / 0.5));
  pointer-events: none;
}

.lounge { display: grid; gap: 2rem; }

/* ---- Header ---------------------------------------------------------------- */
.lounge__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.lounge__titles { padding: 0.5rem 0 0.5rem 1.5rem; border-left: 8px solid var(--cyan); }
.lounge__title {
  color: var(--cyan);
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 1;
}
.lounge__sub {
  margin-top: 0.375rem;
  color: var(--peach);
  font: 500 0.875rem/1.3 var(--font-head);
  letter-spacing: 0.1em;
}
.pressure {
  padding: 1rem;
  background: var(--surface-highest);
  border: 4px solid var(--cyan-deep);
  box-shadow: 6px 6px 0 rgb(0 220 229 / 0.3);
}
.pressure__label {
  margin-bottom: 0.25rem;
  color: var(--cyan);
  font: 500 0.75rem var(--font-head);
  text-transform: uppercase;
}
.pressure__value {
  color: var(--cyan-muted);
  font: 700 1.5rem/1 var(--font-head);
  font-variant-numeric: tabular-nums;
}
.pressure__unit { font-size: 0.875rem; }

/* ---- Layout ---------------------------------------------------------------- */
.lounge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr);
  gap: 2rem;
  align-items: start;
}
.lounge__side { display: grid; gap: 2rem; min-width: 0; }

/* ---- Chat ------------------------------------------------------------------ */
.chat {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.5rem;
  background: rgb(13 13 24 / 0.9);
  border: 4px solid var(--surface-high);
}
.chat__log {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: clamp(320px, calc(100vh - 470px), 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-highest) transparent;
}
.chat__log:focus-visible { outline-offset: -3px; }
.chat__poller { display: none; }

.msg {
  --accent: var(--peach);
  display: flex;
  gap: 1.5rem;
  max-width: 42rem;
  animation: msg-in 0.2s steps(3) both;
}
.msg.accent-cyan   { --accent: var(--cyan); }
.msg.accent-violet { --accent: var(--violet); }
.msg__avatar {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border: 4px solid var(--accent);
  background: #000;
}
.msg__avatar--initials {
  display: grid;
  place-items: center;
  background: var(--on-surface-variant);
  color: var(--bg);
  font: 700 1.125rem var(--font-head);
}
.msg__bubble {
  min-width: 0;
  padding: 1rem;
  background: var(--surface-low);
  border-top: 4px solid var(--accent);
}
.msg__from {
  margin-bottom: 0.5rem;
  color: var(--accent);
  font: 700 0.75rem/1.2 var(--font-head);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.msg__badge {
  margin-left: 0.5rem;
  padding: 0.1rem 0.375rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}
.msg__text { color: var(--on-surface); font-weight: 500; line-height: 1.6; }
.msg--trade .msg__bubble {
  background-image: repeating-linear-gradient(-45deg, transparent 0 8px, rgb(255 181 153 / 0.05) 8px 16px);
}

.msg--you { flex-direction: row-reverse; margin-left: auto; }
.msg__avatar--you {
  display: grid;
  place-items: center;
  background: var(--cyan);
  border-color: var(--on-cyan);
  color: var(--on-cyan);
}
.msg__avatar--you .ms { font-size: 2.25rem; }
.msg--you .msg__bubble { background: var(--cyan-deep); border-top-color: var(--cyan); text-align: right; }
.msg--you .msg__from { color: var(--cyan); }
.msg--you .msg__text { color: var(--cyan-muted); }

/* Composer */
.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "field field" "flow trade";
  gap: 1rem;
}
.composer__field { grid-area: field; }
.composer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border: 0;
  font: 700 1.25rem/1 var(--font-head);
  text-transform: uppercase;
  transition: transform 60ms steps(2);
}
.composer__btn:hover { filter: brightness(1.1); }
.composer__btn:active { transform: translateY(4px); border-bottom-width: 4px; }
.composer__btn.htmx-request { cursor: progress; filter: brightness(0.85); }
.composer__btn--flow {
  grid-area: flow;
  background: var(--cyan);
  color: var(--cyan-ink);
  border-bottom: 8px solid #004f53;
}
.composer__btn--trade {
  grid-area: trade;
  background: var(--peach);
  color: var(--on-peach);
  border-bottom: 8px solid #7f2b00;
}

/* ---- Crew card ------------------------------------------------------------- */
.crew-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  background: var(--surface-high);
  border: 4px solid var(--cyan);
}
.crew-card__corner {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  background: var(--peach);
  color: var(--on-peach);
}
.crew-card__title {
  margin-bottom: 1rem;
  padding-right: 3.5rem;
  color: var(--cyan);
  font-size: 1.375rem;
  font-weight: 700;
}
.crew-card__list { display: grid; gap: 1rem; padding: 0; border: 0; min-width: 0; }
.mate {
  --accent: var(--peach);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--surface-container);
  border-left: 4px solid var(--accent);
  cursor: pointer;
}
.mate.accent-cyan   { --accent: var(--cyan); }
.mate.accent-violet { --accent: var(--violet); }
.mate:hover { background: var(--surface-highest); }
.mate:has(input:checked) { background: var(--surface-highest); }
.mate:has(input:focus-visible) { outline: 3px solid var(--cyan-bright); outline-offset: 2px; }
.mate__avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}
.mate__avatar--initials {
  display: grid;
  place-items: center;
  background: var(--on-surface-variant);
  color: var(--bg);
  font: 700 0.8125rem var(--font-head);
}
.mate__who { flex: 1; min-width: 0; display: grid; }
.mate__name { font-size: 0.875rem; font-weight: 700; }
.mate__status { color: var(--accent); font: 500 0.625rem/1.3 var(--font-head); letter-spacing: 0.04em; }
.mate__radio {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--outline);
  border-radius: 50%;
}
.mate:has(input:checked) .mate__radio {
  border-color: var(--cyan);
  background: radial-gradient(circle, var(--cyan) 0 4px, transparent 5px);
}

/* ---- Storage --------------------------------------------------------------- */
.storage {
  padding: 1.5rem;
  background: var(--surface-lowest);
  border: 4px solid var(--surface-highest);
}
.storage__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--on-surface-variant);
  font-size: 1.25rem;
  font-weight: 700;
}
.storage__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.slot {
  --accent: var(--cyan);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--surface-container);
  border: 4px solid var(--surface-highest);
  color: var(--on-surface-variant);
  text-decoration: none;
  cursor: pointer;
}
.slot.accent-peach  { --accent: var(--peach); }
.slot.accent-violet { --accent: var(--violet); }
.slot:hover { border-color: var(--cyan); }
.slot:has(input:checked) { border-color: var(--accent); background: var(--surface-high); box-shadow: 4px 4px 0 #000; }
.slot:has(input:focus-visible) { outline: 3px solid var(--cyan-bright); outline-offset: 2px; }
.slot__icon { color: var(--accent); margin-bottom: 0.5rem; }
.slot__icon .ms { font-size: 2.25rem; }
.slot:hover .slot__icon { transform: scale(1.1); }
.slot__name { font: 700 0.625rem var(--font-head); text-transform: uppercase; letter-spacing: 0.04em; }
.slot__count { color: var(--peach); font: 500 0.75rem var(--font-head); font-variant-numeric: tabular-nums; }
.slot--empty { border-style: dashed; opacity: 0.4; }
.slot--empty:hover { opacity: 1; }

.energy { margin-top: 2rem; }
.energy__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--cyan);
  font: 700 0.625rem var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.energy__pct { color: var(--on-surface-variant); }
.screen-lounge .energy .seg {
  gap: 2px;
  height: 1rem;
  padding: 2px;
  background: var(--surface-container);
  border: 2px solid var(--surface-highest);
}
.screen-lounge .energy .seg > i { flex: 1; width: auto; height: 100%; box-shadow: none; background: var(--surface-highest); }
.screen-lounge .energy .seg > i.on { background: var(--cyan); }

@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .lounge__grid { grid-template-columns: minmax(0, 1fr); }
  .lounge__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .lounge__bg { left: 0; width: 100%; }
  .screen-lounge .main::after { left: 0; }
}
@media (max-width: 720px) {
  .lounge { gap: 1.5rem; }
  .lounge__side { grid-template-columns: minmax(0, 1fr); }
  .chat { padding: 1rem; }
  .chat__log { height: clamp(300px, 55vh, 480px); gap: 1.25rem; }
  .msg { gap: 0.75rem; }
  .msg__avatar { width: 3rem; height: 3rem; border-width: 3px; }
  .msg__avatar--you .ms { font-size: 1.75rem; }
  .composer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .composer__btn { padding: 0.875rem 0.5rem; font-size: 1rem; gap: 0.375rem; }
}