/* Keep Calm - Calm Rooms (/rooms/). Builds on the coach tokens and message
   styles in assets/coaches.css (loaded first on this page); this file only
   adds the room-specific pieces. Both themes ride the same --kcc-* variables.
   Contrast (verified, both modes, all >= 4.5:1 for text): see the build
   report; mint fills always hard-set the dark ink token, never inherit. */

/* header "All coaches" link, dressed like the neighboring header buttons */
.kcc-body a.kcc-how-btn {
  display: inline-flex; align-items: center;
  color: var(--kcc-muted); text-decoration: none;
}
.kcc-body a.kcc-how-btn:hover { color: var(--kcc-ink); border-color: var(--kcc-muted); }

/* ---- lobby ---- */
.kcr-lobby { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 40px) 60px; }
.kcr-lobby h1 { margin: 0; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
.kcr-lobby h1 em { font-style: normal; color: var(--kcc-accent); }
.kcr-sub { margin: 14px 0 0; color: var(--kcc-muted); font-size: clamp(15px, 1.6vw, 17px); max-width: 60ch; }
.kcr-disclosure { margin: 10px 0 0; color: var(--kcc-muted); font-size: 13.5px; }

.kcr-lobbyform { margin-top: 26px; }
.kcr-lobbyform label { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.kcr-lobbyform textarea {
  width: 100%; min-height: 92px; padding: 12px 16px; resize: vertical;
  border: 2px solid var(--kcc-cborder); border-radius: 14px;
  background: var(--kcc-panel); color: var(--kcc-ink);
  font: inherit; font-size: 15px; line-height: 1.5;
}
.kcr-lobbyform textarea::placeholder { color: var(--kcc-muted); opacity: 1; }
.kcr-lobbyform textarea:focus { border-color: var(--kcc-accent); outline: none; }

.kcr-chipslabel { margin: 18px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--kcc-muted); }
.kcr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kcr-chip {
  min-height: 40px; padding: 8px 15px;
  border: 1px solid var(--kcc-cborder); border-radius: 999px;
  background: transparent; color: var(--kcc-muted);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.kcr-chip:hover { color: var(--kcc-ink); border-color: var(--kcc-muted); }
.kcr-chip[aria-pressed="true"] { background: var(--kcc-accent); color: #ffffff; border-color: transparent; }
/* mint accent in dark mode: hard-set the dark ink, never inherit */
html[data-mode="batman"] .kcr-chip[aria-pressed="true"] { color: #07110c; }

.kcr-err { margin: 14px 0 0; font-weight: 700; font-size: 14px; color: #9a2c1f; }
html[data-mode="batman"] .kcr-err { color: #ffb0a6; }

/* .kcc-body prefix is load-bearing: coaches.css sets `.kcc-body button
   { color: inherit }` (0,1,1), which beats any single-class rule and would
   inherit light ink onto these accent/mint fills in dark mode. Never let a
   button on a light or mint fill inherit its text color. */
.kcc-body .kcr-open {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  min-height: 48px; padding: 11px 24px; border: 0; border-radius: 999px;
  background: var(--kcc-accent); color: #ffffff;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
html[data-mode="batman"] .kcc-body .kcr-open { color: #07110c; }
.kcr-open svg { width: 19px; height: 19px; fill: currentColor; }

/* ---- room ---- */
.kcr-room { max-width: 860px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 24px) 24px; }
.kcr-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; background: var(--kcc-bg);
  border-bottom: 1px solid var(--kcc-rule);
}
.kcr-back {
  min-height: 40px; padding: 8px 15px;
  border: 1px solid var(--kcc-cborder); border-radius: 999px;
  background: transparent; color: var(--kcc-ink);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.kcr-back:hover { border-color: var(--kcc-accent); color: var(--kcc-accent); }
.kcr-head__title { margin: 0; font-size: 17px; font-weight: 800; }

.kcr-team { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px; }
/* participant tag: rectangle (7px), pills are for buttons only */
.kcr-coachchip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 8px 6px 6px; border: 1px solid var(--kcc-cborder); border-radius: 7px;
  background: var(--kcc-panel);
}
.kcr-coachchip .kcc-avatar { width: 34px; height: 34px; }
.kcr-coachchip__who { display: flex; flex-direction: column; min-width: 0; }
.kcr-coachchip__name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.kcr-coachchip__focus { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kcc-muted); }
.kcr-coachchip__btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--kcc-cborder); border-radius: 50%;
  background: transparent; color: var(--kcc-ink); cursor: pointer;
}
.kcr-coachchip__btn svg { width: 14px; height: 14px; fill: currentColor; }
.kcr-coachchip__btn:hover { border-color: var(--kcc-accent); color: var(--kcc-accent); }
.kcr-coachchip__x:hover { border-color: #9a2c1f; color: #9a2c1f; }
html[data-mode="batman"] .kcr-coachchip__x:hover { border-color: #ffb0a6; color: #ffb0a6; }

.kcr-addrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0 10px; }
.kcr-addrow label { font-size: 13.5px; font-weight: 700; color: var(--kcc-muted); }
.kcr-addrow select {
  min-height: 42px; max-width: min(320px, 100%); padding: 8px 12px;
  border: 1px solid var(--kcc-cborder); border-radius: 10px;
  background: var(--kcc-panel); color: var(--kcc-ink);
  font: inherit; font-size: 13.5px;
}
.kcr-addrow select:disabled { opacity: .55; }
.kcc-body .kcr-addbtn {
  min-height: 42px; padding: 8px 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--kcc-accent-soft); color: var(--kcc-accent-ink);
  font-size: 13.5px; font-weight: 800;
}
.kcr-addbtn:hover { filter: brightness(1.05); }
/* same inherit trap on shared classes THIS page uses: the send button and the
   how-it-works close button both sit on the mint accent-soft fill */
.kcc-body .kcc-send, .kcc-body .kcc-how__close { color: var(--kcc-accent-ink); }

.kcr-thread { padding: 10px 0 16px; display: flex; flex-direction: column; gap: 14px; min-height: 34vh; }
.kcr-msg__col { min-width: 0; }
.kcr-msg__name {
  display: block; margin: 0 0 4px 4px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kcc-muted);
}
.kcr-status { margin: 2px auto; max-width: 60ch; text-align: center; color: var(--kcc-muted); font-size: 13px; font-weight: 600; }
.kcr-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #12201a; color: #ffffff; font-size: 15px; font-weight: 800; border-radius: 50%;
}

/* the crisis / safety step-out card */
.kcr-care {
  margin: 4px 0; padding: 16px 18px;
  border: 2px solid var(--kcc-accent); border-radius: 14px;
  background: var(--kcc-panel); color: var(--kcc-ink);
}
.kcr-care__title { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; }
.kcr-care__body { margin: 0; font-size: 14.5px; line-height: 1.6; }
.kcr-care__links { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kcr-care__links a {
  display: inline-block; padding: 8px 14px; min-height: 40px;
  border: 1.5px solid var(--kcc-accent); border-radius: 999px;
  color: var(--kcc-accent); background: transparent;
  font-size: 13.5px; font-weight: 800; text-decoration: none;
}
.kcr-care__links a:hover { background: var(--kcc-accent-soft); color: var(--kcc-accent-ink); }

@media (max-width: 560px) {
  .kcr-coachchip__focus { display: none; }
  .kcc-msg { max-width: 94%; }
}

/* the typing dots animation is already stilled by coaches.css under
   prefers-reduced-motion; the room adds no animations or transitions of its
   own, only this hover effect */
@media (prefers-reduced-motion: reduce) {
  .kcr-addbtn:hover { filter: none; }
}