/*
  The chat sidebar's own rules, linked by parts/chat.js.

  frame.css holds everything the sidebar started with and belongs to the frame
  team; this file is what the chat part added on 14.09.2026 for the beta
  feedback: the join button's three states (R6), the line under the box, the
  two buttons under the message input (R7) and the chat-rules modal. Same
  tokens, same prefix (ch-), and it is linked after frame.css, so where both
  name the same class this one wins on order rather than on weight.
*/

/* ---------- the picture puzzle in the rain panel (19.09.2026) ---------- */

/* The panel can be taller than a phone has room for (the puzzle added about
   335 px) and .ch-top does not scroll, so the panel scrolls itself. How tall
   it may be is measured in chat.js; this only says what happens at the cap. */
.ch-pop { overflow-y: auto; overscroll-behavior: contain; }


/* Three by three, square tiles, the picture centred and never stretched. */
.ch-pz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.ch-pz-tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--g600);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ch-pz-tile:hover { background: var(--g500); }
.ch-pz-tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* Clicked: the purple the rest of the panel uses, plus a tick, because
   colour alone is a poor answer to "did that register". */
.ch-pz-tile.is-on { border-color: var(--purple-300); background: var(--g500); }
.ch-pz-tile.is-on::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--purple-300);
  box-shadow: inset 0 0 0 2px var(--g700);
}
.ch-pz-go { width: 100%; margin-bottom: 10px; }

/* Smaller tiles where the screen is short, so the button stays in view without
   scrolling at all: on the 375x812 phone livio-31 measured, the panel had 519 px
   of room and wanted 602; three 78 px tiles instead of three 109 px ones take
   about 93 px off and bring it to ~509. Still well over the 44 px a finger
   needs. The measured cap in chat.js stays as the safety net for shorter
   phones. */
@media (max-width: 959px), (max-height: 820px) {
  .ch-pz { grid-template-columns: repeat(3, minmax(0, 78px)); justify-content: center; }
}

/* ---------- the join button (R6) ---------- */

/*
  Grey and dead while the pot fills, the rain's own yellow once joining is
  open. The base rule in frame.css paints it yellow already, so "is-open" only
  has to survive next to the disabled state and say out loud which one it is.
*/
.ch-rain-btn.is-open {
  background: var(--orange);
  color: var(--g900);
}
.ch-rain-btn.is-locked,
.ch-rain-btn:disabled {
  background: var(--g600);
  color: var(--t4);
  cursor: not-allowed;
  filter: none;
}
.ch-rain-btn.is-locked:hover,
.ch-rain-btn:disabled:hover {
  filter: none;
}

/* ---------- the line under the box (R6) ---------- */

.ch-rain-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Takes the slack in the row, so the join count and the tip button stay
     together on the right and the countdown never shifts as the number grows. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ch-rain-clock > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Joined: the same green the check on the button uses, so the two agree. */
.ch-rain-clock.is-in { color: var(--t1); }
.ch-rain-clock.is-in b { color: var(--green); }

/* How many have joined (20.09.2026). Shaped like the tip button beside it and
   sitting at the same height, so the row reads as one strip rather than a
   number pasted next to a control. Tabular digits: 9 -> 10 must not jump. */
.ch-rain-who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--g600);
  color: var(--t2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ch-rain-who .v2-ico { width: 13px; height: 13px; }
/* A slot three digits wide, so 9 -> 10 -> 137 does not change the chip's width
   and the countdown to its left cannot be pushed along. With tabular digits
   1ch is exactly one digit, so the slot is as wide as it claims to be. */
.ch-rain-who b { min-width: 3ch; text-align: center; color: var(--t0); }
/* Green once the viewer is one of them, like the check and the clock. */
.ch-rain-who.is-in,
.ch-rain-who.is-in b { color: var(--green); }

/* ---------- the buttons under the input (R7) ---------- */

.ch-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ch-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--g600);
  color: var(--t2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.ch-act:hover {
  background: var(--g500);
  color: var(--t0);
}
.ch-act-ico {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---------- roles and moderation (docs/roles/spec.md, 14.09.2026) ---------- */

/* The name is a button that opens the user info card; it looks like the name it was. */
.ch-who {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ch-who:hover { color: var(--t0); text-decoration: underline; text-underline-offset: 2px; }
.ch-who:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 2px; border-radius: 2px; }

/* Owner, Admin, Mod after the name. The same three colours as the card (user-card.css). */
.ch-role {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  overflow: visible !important;
}
.ch-role--owner { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }
.ch-role--admin { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red-400); }
/* JrAdmin (11.10.2026): dasselbe Rot wie Admin, nur leiserer Grund - eine
   Stufe darunter, aber auf einen Blick als Leitung erkennbar. */
.ch-role--jradmin { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-400); }
.ch-role--srmod { background: color-mix(in srgb, var(--orange-500) 22%, transparent); color: var(--orange-300); }
.ch-role--mod { background: color-mix(in srgb, var(--teal) 20%, transparent); color: var(--teal); }
.ch-role--marketing_manager { background: color-mix(in srgb, var(--discord) 30%, transparent); color: color-mix(in srgb, var(--discord) 55%, #fff); }
.ch-role--marketing { background: color-mix(in srgb, var(--discord) 20%, transparent); color: var(--discord); }
.ch-role--helper { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green-400); }
.ch-role--streamer { background: color-mix(in srgb, var(--purple) 20%, transparent); color: var(--purple-300); }

/* The line above the field: timed out, chat off, slow mode. */
.ch-cstate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--g700);
  color: var(--t3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.ch-cstate[hidden] { display: none; }
.ch-cstate b { color: var(--t0); font-variant-numeric: tabular-nums; }
.ch-cstate.is-bad { background: color-mix(in srgb, var(--red) 12%, var(--g700)); color: var(--red-400); }
.ch-cstate.is-wait { background: color-mix(in srgb, var(--orange) 10%, var(--g700)); color: var(--orange); }
.ch-cstate-why { color: var(--t2); font-weight: 500; overflow-wrap: anywhere; }

.ch-input.is-off { opacity: 0.6; }
.ch-input input:disabled { cursor: not-allowed; }
.ch-send:disabled { opacity: 0.4; cursor: not-allowed; background: none; }

/* A moderator command's answer, shown to them only. */
.ch-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 6px 8px 10px;
  border-radius: 6px;
  background: var(--g600);
  color: var(--t1);
  font-size: 12px;
  line-height: 16px;
}
.ch-note[hidden] { display: none; }
.ch-note.is-bad { background: color-mix(in srgb, var(--red) 14%, var(--g700)); color: var(--red-400); }
.ch-note-txt { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ch-note-x { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 4px; color: var(--t4); }
.ch-note-x:hover { color: var(--t0); background: var(--g500); }
.ch-note-x .v2-ico { width: 14px; height: 14px; }

/* The command list, for staff, while they type a "/". */
.ch-hint { margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--t4); overflow-wrap: anywhere; }
.ch-hint[hidden] { display: none; }

/* ---------- the rules modal (R7) ---------- */

.v2-modal--rules .v2-modal-card {
  width: min(440px, 100%);
  padding: 24px;
}
.ch-rules-h {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.25px;
}
.ch-rules-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch-rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--t2);
}
.ch-rules-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--g600);
  color: var(--t3);
  font-size: 12px;
  font-weight: 700;
}
.ch-rules-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t4);
}

/*
  Replies and @mentions (Lukas, 21.09.2026).

  The reply button sits at the top-right of a message and appears on hover (it
  stays visible on touch, where there is no hover). The mention list and the
  reply chip sit above the input; both are hidden by the global [hidden] rule.
*/
.ch-reply-btn {
  flex: none;
  align-self: flex-start;
  margin-left: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--t4);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.ch-reply-btn svg { width: 15px; height: 15px; }
.ch-msg:hover .ch-reply-btn,
.ch-reply-btn:focus-visible { opacity: 1; }
.ch-reply-btn:hover { color: var(--t1); background: var(--g700); }
@media (hover: none) { .ch-reply-btn { opacity: 0.5; } }

/* A mention in a message; brighter when it names the reader. */
.ch-at { color: var(--purple-300); font-weight: 600; }
.ch-at--me {
  padding: 0 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--purple) 22%, transparent);
  color: var(--purple-300);
}
/* A message that names the reader: a faint tint and an accent bar. */
.ch-msg--ping { background: color-mix(in srgb, var(--purple) 10%, transparent); box-shadow: inset 3px 0 0 var(--purple-300); }

/* The chip above the input while a reply is being written. */
.ch-replybar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: 8px;
  background: var(--g900);
  border: 1px solid var(--g300);
  border-left: 3px solid var(--purple-300);
}
.ch-replybar-ico { flex: none; width: 15px; height: 15px; color: var(--t4); }
.ch-replybar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ch-replybar-txt b { font-size: 12px; font-weight: 600; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-replybar-ex { font-size: 11px; color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-replybar-x {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--t4);
}
.ch-replybar-x svg { width: 14px; height: 14px; }
.ch-replybar-x:hover { color: var(--t1); background: var(--g700); }

/* The @mention autocomplete above the input. */
.ch-mention {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 4px;
  border-radius: 8px;
  background: var(--g900);
  border: 1px solid var(--g300);
  max-height: 220px;
  overflow-y: auto;
}
.ch-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--t2);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.ch-mention-item .ch-av-s { width: 20px; height: 20px; }
.ch-mention-item span.ch-av-s { font-size: 10px; }
.ch-mention-item:hover,
.ch-mention-item.is-active { background: var(--g700); color: var(--t0); }

/*
  Die Werbung fuer das Media-Programm (Lukas, 10.10.2026: "da soll eher ein art
  banner hin dass es auffaellt"). Eine graue Systemzeile zwischen zweihundert
  anderen liest niemand - also eine eigene Karte mit Rand, Verlauf und einer
  sichtbaren Handlungsaufforderung, aber in den Farben, die die Seite ohnehin
  benutzt, damit sie nicht wie eine fremde Anzeige aussieht.
*/
.ch-msg--promo {
  padding: 2px 0;
}
.ch-promo {
  /* Gestapelt, nicht nebeneinander: die Chat-Spalte ist rund 190 px breit,
     egal wie gross das Fenster ist. Eine Medienabfrage hilft hier nichts -
     schmal ist die Spalte, nicht der Bildschirm. */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 5px 9px;
  padding: 10px 11px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--t0);
  /* Das Bild liegt hinten, darueber ein dunkler Verlauf von links: die
     Karte ist nur 290 px breit, und Ueberschrift und Pille muessen lesbar
     bleiben. Rechts bleibt das Motiv frei. */
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--g900) 94%, transparent) 0%, color-mix(in srgb, var(--g900) 78%, transparent) 46%, color-mix(in srgb, var(--g900) 22%, transparent) 100%),
    url("/design-v2/art/banner-chat-media.webp") right center / cover no-repeat,
    var(--g900);
  border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent);
  transition: border-color .15s ease, transform .15s ease;
}
.ch-promo:hover,
.ch-promo:focus-visible {
  border-color: var(--orange);
  transform: translateY(-1px);
}
.ch-promo-ico {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--orange) 24%, transparent);
  color: var(--orange-300);
}
.ch-promo-ico svg { width: 16px; height: 16px; }
.ch-promo-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-promo-title { font-size: 12.5px; line-height: 1.25; }
.ch-promo-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--t2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ch-promo-cta {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--g900);
  background: linear-gradient(135deg, var(--purple-300), var(--orange-300));
}