/* Kadabra Games studio party line — v11 */
:root {
  --chat-walnut: #2b160d;
  --chat-walnut-hi: #6a3b20;
  --chat-brass: #c4a35c;
  --chat-cream: #e2d4b7;
  --chat-glass: #08110d;
  --chat-text: #d8e1c8;
  --chat-muted: #89907f;
  --chat-human: #9db6c6;
}

/* The homepage keeps the television dominant while placing the always-active
   party line directly to its left and the tape library directly to its right. */
.hero-zone {
  width: min(1740px, 100%) !important;
  grid-template-columns: minmax(252px, 298px) minmax(600px, 1fr) minmax(250px, 300px) !important;
  align-items: start !important;
  gap: clamp(12px, 1.55vw, 25px) !important;
}
.hero-zone .console-column { align-self: end; }
.hero-zone .tape-library { align-self: end; }

.studio-chatroom {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: min(735px, calc(100vh - 122px));
  min-height: 570px;
  max-height: 780px;
  margin-top: 17px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  border: 2px solid #110906;
  border-radius: 10px 10px 7px 7px;
  background:
    radial-gradient(circle at 18% 4%, rgba(255,255,255,.07), transparent 16%),
    repeating-linear-gradient(91deg, transparent 0 13px, rgba(255,255,255,.012) 14px 15px),
    linear-gradient(135deg, #64381e, #2a150c 59%, #150a06);
  box-shadow:
    inset 0 0 0 2px rgba(199,154,72,.12),
    inset 0 -20px 34px rgba(0,0,0,.35),
    0 25px 32px rgba(0,0,0,.66);
  color: var(--chat-cream);
  filter: saturate(.92);
}
.studio-chatroom::before,
.studio-chatroom::after {
  content: "";
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.studio-chatroom::before {
  inset: 7px;
  border: 1px solid rgba(219,181,103,.18);
  border-radius: 6px;
}
.studio-chatroom::after {
  right: 10px;
  top: 77px;
  bottom: 96px;
  width: 6px;
  opacity: .24;
  background: repeating-linear-gradient(0deg, #d0ae67 0 2px, transparent 2px 7px);
}

.chatroom-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid rgba(213,178,103,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent),
    rgba(11,6,4,.34);
}
.chatroom-header p,
.chatroom-header h2 { margin: 0; }
.chatroom-header p {
  color: #9b855d;
  font: 800 6px/1 var(--studio-mono, "Courier New", monospace);
  letter-spacing: .22em;
}
.chatroom-header h2 {
  margin-top: 4px;
  color: #f0dfb8;
  font: 900 18px/1 var(--studio-ui, Arial, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chatroom-connection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid rgba(190,157,87,.24);
  background: rgba(7,7,5,.48);
  color: #ad9d78;
  font: 800 6px/1 var(--studio-mono, monospace);
  letter-spacing: .13em;
}
.chatroom-connection i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8d6f2d;
  box-shadow: 0 0 8px rgba(197,151,63,.5);
}
.studio-chatroom[data-chat-mode="live"] .chatroom-connection i {
  background: #83b27b;
  box-shadow: 0 0 9px rgba(131,178,123,.8);
  animation: chat-live-pulse 2.4s ease-in-out infinite;
}
.studio-chatroom[data-chat-mode="connecting"] .chatroom-connection i { background: #c69a49; }
.studio-chatroom[data-chat-mode="offline"] .chatroom-connection i { background: #824f3d; box-shadow: none; }
@keyframes chat-live-pulse { 50% { opacity: .42; } }

.chatroom-roster {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(213,178,103,.16);
  background: rgba(8,5,3,.22);
}
.chat-roster-persona {
  position: relative;
  min-width: 0;
  padding: 3px 1px 2px;
  border: 0;
  background: transparent;
  color: #a99b7e;
  cursor: help;
}
.chat-roster-persona span {
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 3px;
  border: 1px solid color-mix(in srgb, var(--chat-accent) 60%, #1a120d);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--chat-accent) 55%, #24150d), #120b07);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.48);
  color: #fff1cf;
  font: 900 9px/1 Georgia, serif;
}
.chat-roster-persona small {
  display: block;
  overflow: hidden;
  color: #756b58;
  font: 700 4.6px/1 var(--studio-mono, monospace);
  letter-spacing: .08em;
  text-overflow: clip;
  white-space: nowrap;
}
.chat-roster-persona:hover span,
.chat-roster-persona:focus-visible span { filter: brightness(1.2); box-shadow: 0 0 10px color-mix(in srgb, var(--chat-accent) 38%, transparent); }
.chat-roster-persona:focus-visible { outline: 1px solid rgba(229,205,153,.45); outline-offset: 1px; }

.chatroom-feed {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 15px 12px 10px;
  scrollbar-width: thin;
  scrollbar-color: #70522e #0a100d;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px),
    radial-gradient(circle at 40% 10%, rgba(111,143,104,.065), transparent 35%),
    linear-gradient(180deg, #09120e, #050a08);
  box-shadow:
    inset 0 0 26px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(141,168,123,.07);
}
.chatroom-feed::before {
  content: "";
  position: sticky;
  z-index: 5;
  display: block;
  top: 0;
  height: 1px;
  box-shadow: 0 0 12px 3px rgba(112,155,103,.08);
}
.chatroom-feed::-webkit-scrollbar { width: 8px; }
.chatroom-feed::-webkit-scrollbar-track { background: #070b09; }
.chatroom-feed::-webkit-scrollbar-thumb { background: #5c4428; border: 2px solid #070b09; }

.chat-message {
  --chat-accent: #b6a77d;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 7px;
  margin: 0 0 10px;
  animation: chat-message-enter .2s ease-out both;
}
@keyframes chat-message-enter { from { opacity: 0; transform: translateY(4px); } }
.chat-avatar {
  display: grid;
  place-content: center;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  border: 1px solid color-mix(in srgb, var(--chat-accent) 55%, #111);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.17), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--chat-accent) 46%, #24150d), #0b0806);
  color: #f7ebcd;
  font: 900 9px/1 Georgia, serif;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.44);
}
.chat-message > div { min-width: 0; }
.chat-message header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 3px;
}
.chat-message header strong {
  color: color-mix(in srgb, var(--chat-accent) 78%, #f2e5c7);
  font: 800 8px/1 var(--studio-ui, Arial, sans-serif);
  letter-spacing: .07em;
}
.chat-message header small {
  color: #667064;
  font: 600 5.5px/1 var(--studio-mono, monospace);
  letter-spacing: .05em;
}
.chat-message p {
  margin: 0;
  color: var(--chat-text);
  font: 10px/1.45 var(--studio-mono, "Courier New", monospace);
  overflow-wrap: anywhere;
}
.chat-message.is-human .chat-avatar {
  border-radius: 5px;
  background: linear-gradient(145deg, #506c7c, #17232b);
  color: #e5f3f7;
}
.chat-message.is-human header strong { color: #a8c6d5; }
.chat-message.is-human p { color: #d5e5e9; }
.chat-message.is-system {
  display: block;
  margin: 7px 4px 11px;
  padding: 6px 8px;
  border: 1px solid rgba(167,145,95,.18);
  background: rgba(83,61,30,.1);
  color: #9f916f;
  font: 7px/1.4 var(--studio-mono, monospace);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.chat-report-button {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #56605a;
  font: 600 5px/1 var(--studio-mono, monospace);
  letter-spacing: .12em;
  cursor: pointer;
}
.chat-report-button:hover,
.chat-report-button:focus-visible { color: #b6a275; outline: none; }

.chatroom-typing {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 25px;
  padding: 5px 11px;
  border-top: 1px solid rgba(145,167,123,.12);
  background: #07100c;
  color: #6f7b6b;
  font: 6px/1 var(--studio-mono, monospace);
  letter-spacing: .08em;
}
.chatroom-typing[hidden] { display: none; }
.chatroom-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94a98c;
  animation: chat-typing 1s ease-in-out infinite;
}
.chatroom-typing i:nth-child(2) { animation-delay: .16s; }
.chatroom-typing i:nth-child(3) { animation-delay: .32s; }
.chatroom-typing span { margin-left: 4px; }
@keyframes chat-typing { 50% { opacity: .25; transform: translateY(-2px); } }

.chatroom-form {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding: 8px 9px;
  border-top: 1px solid rgba(209,175,101,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent),
    #17100b;
}
.chat-join-button,
.chat-send-button,
.chatroom-form input {
  min-height: 32px;
  border: 1px solid #3c2b19;
  border-radius: 2px;
}
.chat-join-button,
.chat-send-button {
  padding: 0 8px;
  background: linear-gradient(#5b4125, #24160d);
  color: #dcc391;
  font: 800 6px/1 var(--studio-ui, Arial, sans-serif);
  letter-spacing: .12em;
  cursor: pointer;
}
.chat-join-button:hover,
.chat-send-button:not(:disabled):hover,
.chat-join-button:focus-visible,
.chat-send-button:not(:disabled):focus-visible {
  color: #fff0c4;
  filter: brightness(1.16);
  outline: 1px solid rgba(225,194,128,.45);
  outline-offset: 1px;
}
.chat-input-wrap { min-width: 0; }
.chatroom-form input {
  width: 100%;
  padding: 0 8px;
  background: #07100c;
  color: #d8e4cf;
  font: 10px/1.2 var(--studio-mono, monospace);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.62);
}
.chatroom-form input::placeholder { color: #59645a; }
.chatroom-form input:focus { border-color: #7c6942; outline: none; }
.chatroom-form input:disabled { opacity: .68; }
.chat-send-button:disabled { cursor: not-allowed; opacity: .4; }
.chatroom-form.is-joined .chat-join-button {
  max-width: 76px;
  overflow: hidden;
  color: #aec4a8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 7px 10px 8px;
  border-top: 1px solid rgba(203,169,96,.12);
  color: #776c57;
  background: rgba(7,4,3,.42);
  font: 600 5.7px/1.25 var(--studio-mono, monospace);
  letter-spacing: .06em;
}
.chatroom-footer button {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(166,137,76,.24);
  background: rgba(25,16,10,.6);
  color: #97845f;
  font: 700 5px/1 var(--studio-ui, sans-serif);
  letter-spacing: .1em;
  cursor: pointer;
}

.chat-join-dialog .chat-join-label {
  display: grid;
  gap: 6px;
  margin: 16px 0 8px;
}
.chat-join-label span {
  color: #a89061;
  font: 800 7px/1 var(--studio-mono, monospace);
  letter-spacing: .16em;
}
.chat-join-label input {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #655036;
  background: #0c0b09;
  color: #f0e2c6;
  font: 14px/1.2 var(--studio-mono, monospace);
}
.chat-join-status { min-height: 20px; color: #c49e69 !important; font-size: 10px; }
.chat-join-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chat-join-cancel {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid #5f513e;
  background: #181512;
  color: #b9aa91;
  font: 800 9px/1 var(--studio-ui, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-join-dialog form > small { display: block; margin-top: 12px; color: #756b5c; line-height: 1.45; }
.chat-rules-dialog li { color: #c3b59b; }

@media (max-width: 1240px) {
  .hero-zone {
    grid-template-columns: minmax(270px, 318px) minmax(520px, 1fr) !important;
    grid-template-areas: "chat main" "chat tapes";
    align-items: start !important;
  }
  .studio-chatroom { grid-area: chat; height: min(760px, calc(100vh - 108px)); }
  .hero-zone .console-column { grid-area: main; }
  .hero-zone .tape-library { grid-area: tapes; width: min(100%, 720px); justify-self: center; margin-top: 16px; }
  .hero-zone .tape-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 870px) {
  .hero-zone {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "chat" "tapes";
  }
  .hero-zone .console-column { grid-area: main; }
  .hero-zone .tape-library { grid-area: tapes; }
  .studio-chatroom {
    grid-area: chat;
    width: min(620px, 100%);
    height: 600px;
    min-height: 500px;
    margin: 20px auto 0;
  }
}

@media (max-width: 560px) {
  .studio-chatroom { height: 560px; border-radius: 7px; }
  .chatroom-header { padding: 10px 11px 8px; }
  .chatroom-header h2 { font-size: 15px; }
  .chatroom-roster { padding-inline: 5px; }
  .chat-roster-persona span { width: 22px; height: 22px; }
  .chatroom-feed { padding: 8px 11px 10px 8px; }
  .chat-message { grid-template-columns: 25px minmax(0, 1fr); gap: 6px; }
  .chat-avatar { width: 24px; height: 24px; }
  .chat-message p { font-size: 9px; }
  .chatroom-form { grid-template-columns: 68px minmax(0, 1fr) 46px; padding: 7px 6px; }
  .chat-join-button,
  .chat-send-button { padding-inline: 4px; font-size: 5px; }
  .chatroom-footer { font-size: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-message,
  .chatroom-connection i,
  .chatroom-typing i { animation: none !important; }
}

/* Prevent the existing intercom readout from creating a tiny horizontal page scroll. */
.room-intercom small { min-width: 0 !important; width: min(72px, 100%) !important; max-width: 100% !important; margin-inline: auto !important; box-sizing: border-box; }