/* «Вызов из чата» — the web half of the group-chat challenge (§2.19).

   Geometry and copy come from the console mock's `challenge` screen, copied
   value for value where the block exists in this product. The mock writes its
   styles inline with exact pixels; a port that guesses is a port that drifts,
   so each block names the mock declaration it mirrors.

   The mock's two-column desktop grid is deliberately NOT ported: with the
   compose column folded into the lobby's own «В БОЙ» (see views/challenge.js),
   the screen is one narrow object read top to bottom, and stretching it across
   two columns would be layout for layout's sake. `max-width` keeps the line
   length honest on a wide scene instead. */

.ch-view {
  display: flex;
  flex-direction: column;
  gap: 11px; /* mock: gap:11px between the column's blocks */
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

/* ── Head card ────────────────────────────────────────────────────────────
   mock: padding:15px 17px; radius 18; border 1px rgba(hue,.34);
   background linear-gradient(115deg, rgba(state-tint,.62), rgba(14,9,26,.9)).
   The hue follows the state: open green, yours/expired violet, claimed gold,
   withdrawn red — the mock's own cwHue table. */
.ch-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border-radius: 18px;
  border: 1px solid rgba(var(--t-violet), 0.34);
  background: linear-gradient(115deg, rgba(32, 20, 58, 0.62), rgba(14, 9, 26, 0.9));
}
.ch-head.is-open {
  border-color: rgba(53, 199, 131, 0.34);
  background: linear-gradient(115deg, rgba(12, 40, 28, 0.62), rgba(14, 9, 26, 0.9));
}
.ch-head.is-claimed,
.ch-head.is-finished {
  border-color: rgba(241, 193, 82, 0.34);
  background: linear-gradient(115deg, rgba(50, 33, 12, 0.62), rgba(14, 9, 26, 0.9));
}
.ch-head.is-withdrawn {
  border-color: rgba(255, 93, 108, 0.28);
  background: linear-gradient(115deg, rgba(52, 16, 26, 0.62), rgba(14, 9, 26, 0.9));
}
/* mock: 56px well, radius 16, font 26, rgba(hue,.14) fill / rgba(hue,.4) ring */
.ch-head-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(var(--t-violet), 0.14);
  border: 1px solid rgba(var(--t-violet), 0.4);
}
.ch-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px; /* mock: gap:5px */
}
/* mock: JetBrains Mono 10px rgba(236,231,250,.44) */
.ch-head-meta {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  color: rgba(236, 231, 250, 0.44);
  overflow-wrap: anywhere;
}
/* mock: Unbounded 20px 800, state solid colour; phone block drops to 15px */
.ch-head-title {
  font-family: var(--font-display, Unbounded, sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: #c4b5fd;
  text-wrap: pretty;
}
.ch-head.is-open .ch-head-title { color: #35c783; }
.ch-head.is-claimed .ch-head-title,
.ch-head.is-finished .ch-head-title { color: var(--gold, #f1c152); }
.ch-head.is-withdrawn .ch-head-title { color: #ff8a94; }

/* mock: 12px / 1.6 rgba(236,231,250,.72) */
.ch-body {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(236, 231, 250, 0.72);
  text-wrap: pretty;
}

/* ── Timer ────────────────────────────────────────────────────────────────
   mock: the card is padding:12px 14px, radius 14, rgba(20,13,38,.5); the bar
   is 5px, radius 3, track rgba(167,139,250,.14), fill gold→#d99a26 */
.ch-timer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--t-violet), 0.2);
  background: rgba(20, 13, 38, 0.5);
}
.ch-timer-row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ch-timer-text {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.62);
}
.ch-timer-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--t-violet), 0.14);
  overflow: hidden;
}
.ch-timer-fill {
  height: 100%;
  border-radius: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold, #f1c152), #d99a26);
  transition: width 0.9s linear;
}

/* ── Terms row ────────────────────────────────────────────────────────────
   mock: tiles flex:1 min-width:104px, padding:10px 12px, radius 12,
   border rgba(167,139,250,.18), bg rgba(20,13,38,.5); label 9px uppercase
   .42, value 13px 800 .9 */
.ch-terms {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.ch-term {
  flex: 1;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--t-violet), 0.18);
  background: rgba(20, 13, 38, 0.5);
}
.ch-term-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 231, 250, 0.42);
}
.ch-term-val {
  font-size: 13px;
  font-weight: 800;
  color: rgba(236, 231, 250, 0.9);
}

/* ── Actions ──────────────────────────────────────────────────────────────
   mock: a1 flex:1 min-height:48px gold gradient, dark text, Unbounded 13/800;
   a2 bordered violet glass; a3 the red-tinted refuse (here: withdraw) */
.ch-acts {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.ch-act-main {
  white-space: nowrap;
  flex: 1;
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 13px;
  border: 0;
  background: linear-gradient(135deg, var(--gold, #f1c152), #d99a26);
  color: #1a1204;
  font-family: var(--font-display, Unbounded, sans-serif);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s;
}
@media (hover: hover) {
  .ch-act-main:hover { transform: translateY(-2px); }
}
.ch-act-main:disabled { opacity: 0.6; cursor: default; transform: none; }
.ch-act-side {
  white-space: nowrap;
  flex: 1;
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 13px;
  border: 1px solid rgba(var(--t-violet), 0.32);
  background: rgba(20, 13, 38, 0.6);
  font-size: 12px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.78);
  cursor: pointer;
  transition: border-color 0.18s;
}
@media (hover: hover) {
  .ch-act-side:hover { border-color: rgba(var(--t-violet), 0.6); }
}
.ch-act-side:disabled { opacity: 0.6; cursor: default; }
.ch-act-side.is-danger {
  border-color: rgba(255, 93, 108, 0.28);
  background: rgba(255, 93, 108, 0.05);
  color: rgba(255, 138, 148, 0.86);
}
@media (hover: hover) {
  .ch-act-side.is-danger:hover { border-color: rgba(255, 93, 108, 0.5); }
}

/* mock: the footer under the buttons — 10px / 1.5, .46 */
.ch-foot {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.46);
  text-wrap: pretty;
}
.ch-anon-note {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.55);
  text-wrap: pretty;
}

/* ── Cards (chat note, «Стоит ли») ───────────────────────────────────────
   mock right column: padding:15px 16px, radius 16, border rgba(167,139,250,.22),
   bg rgba(16,11,30,.66); section titles Unbounded 10px uppercase gold .72 */
.ch-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  background: rgba(16, 11, 30, 0.66);
}
.ch-sec {
  font-family: var(--font-display, Unbounded, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 193, 82, 0.72);
}
/* mock msgBox: green-tinted bubble — kept for the chat-relationship note */
.ch-chat-note {
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(53, 199, 131, 0.24);
  background: rgba(9, 20, 17, 0.6);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(236, 231, 250, 0.86);
  text-wrap: pretty;
}

/* «Стоит ли» — the §2.18 slice: the tally first and big (the mock's 4:7 is
   the challenge screen's whole first argument), the delta a line under it */
.ch-worth-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ch-worth-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ch-worth-score {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #35c783;
}
.ch-worth-score.is-down { color: #ff8a94; }
.ch-worth-sub {
  font-size: 11px;
  color: rgba(236, 231, 250, 0.5);
}
.ch-worth-line {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.72);
}
.ch-door {
  align-self: flex-start;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--t-violet), 0.3);
  background: rgba(20, 13, 38, 0.6);
  font-size: 12px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.78);
  cursor: pointer;
  transition: border-color 0.18s;
}
@media (hover: hover) {
  .ch-door:hover { border-color: rgba(var(--t-violet), 0.6); }
}

/* The lobby's searching-card door to this screen (views/lobby.js searchCard):
   sits where the l3-cta-note sat, so it keeps the note's quiet size but is
   pressable — 44px floor included, the note it replaces never was. */
.ch-lobby-door {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid rgba(var(--t-violet), 0.28);
  background: rgba(20, 13, 38, 0.5);
  font-size: 11px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.72);
  cursor: pointer;
  transition: border-color 0.18s;
}
@media (hover: hover) {
  .ch-lobby-door:hover { border-color: rgba(var(--t-violet), 0.6); }
}