/* jarchi: the connection in words (conn.js, CONN.md). The indicator's word lives in the top bar (#conn, style.css);
   here: the banner under the bar, the sheet's plain rows, the teacher's dots, the class's counts, a person's card,
   and the report after the class. Colours by meaning only: amber = your own trouble, a calm card = not your fault,
   turquoise = the teacher's suggestion, red = cut. */

/* The indicator says its own words now (conn.js); the old «، ضعیف» suffix goes. */
#conn[data-q="weak"]::after { content: none; }

/* ---------- the banner: one sentence, an action, ✕ (a card like rejoin.css's: the tone is its mark and edge) ---------- */
/* A phone: the mark, the sentence and ✕ on one row, the buttons under the sentence; wider: all on one row. */
.room > .conn-banner {
  flex: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px;
  margin: 8px var(--gut) 0; padding: 4px; padding-inline-start: 16px;
  min-height: var(--tap);
  border: 1px solid var(--warn-line); border-radius: var(--r-pop);
  background: var(--card-raised); color: var(--ink);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); font-weight: var(--fw-b); line-height: 1.6;
  animation: kit-pop var(--t-med) var(--ease);
}
.room > .conn-banner[hidden] { display: none; }
/* Your own trouble: an amber mark with «!». */
.conn-banner-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--warn-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.conn-banner-dot { grid-area: 1 / 1; }
.conn-banner-text { grid-area: 1 / 2; min-width: 0; margin: 0; padding-block: 6px; }
.conn-banner-acts { grid-area: 2 / 2 / 3 / 4; display: flex; flex-wrap: wrap; gap: 6px; padding-block-end: 6px; }
.conn-banner-x { grid-area: 1 / 3; }
@media (min-width: 700px) {
  .room > .conn-banner { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .conn-banner-acts { grid-area: 1 / 3; padding-block-end: 0; }
  .conn-banner-x { grid-area: 1 / 4; }
}
.conn-banner .btn.small { width: auto; min-height: var(--tap); }
.conn-banner-x { flex: none; width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; color: var(--muted); }
.conn-banner-x .ic { width: 18px; height: 18px; }
/* Not your fault (the teacher's line, ours, a group): a calm edge, a turquoise dot that breathes (we are on it). */
.conn-banner[data-tone="info"] { border-color: var(--line); }
.conn-banner[data-tone="info"] .conn-banner-dot { width: 10px; height: 10px; margin-inline: 4px; background: var(--accent); animation: conn-breathe 1.6s ease-in-out infinite; }
/* The teacher's suggestion. */
.conn-banner[data-tone="accent"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.conn-banner[data-tone="accent"] .conn-banner-dot { width: 10px; height: 10px; margin-inline: 4px; background: var(--accent); }
/* Done («فقط صدا» is on). */
.conn-banner[data-tone="ok"] { border-color: var(--speak-line); }
.conn-banner[data-tone="ok"] .conn-banner-dot {
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@keyframes conn-breathe { 50% { opacity: .35; } }
/* Our own trouble says it for everyone: the reconnecting banner under it would say the same thing twice. */
.room[data-conn-server="1"] > .rejoin:not(.gaveup):not(.back) { display: none; }

/* ---------- the sheet: plain rows ✓ ! ✕, the numbers folded away ---------- */
.conn-card .conn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -8px 0 4px; }
.conn-card .conn-top h2 { margin: 0; }
.conn-x { width: var(--tap); height: var(--tap); padding: 0; flex: none; color: var(--muted); }
.conn-card .conn-tip { margin: 2px 0 12px; }
.conn-rows { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.conn-rows li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 48px; padding: 4px 0; }
.cr-mark {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 14px; font-weight: var(--fw-x); line-height: 1;
  background: var(--bg-sunken); color: var(--faint);
}
.conn-rows li[data-mark="ok"] .cr-mark, .conn-report-fine .cr-mark { background: var(--ok-soft); color: var(--ok-ink); }
.conn-rows li[data-mark="warn"] .cr-mark { background: var(--warn-soft); color: var(--warn); }
.conn-rows li[data-mark="bad"] .cr-mark { background: var(--danger-soft); color: var(--danger-ink); }
.cr-txt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.cr-txt b { font-size: var(--fs-sm); font-weight: var(--fw-b); }
.cr-txt span { color: var(--muted); font-size: var(--fs-s); }
.conn-rows li[data-mark="warn"] .cr-txt span { color: var(--warn); }
.conn-rows li[data-mark="bad"] .cr-txt span { color: var(--danger-ink); }
.conn-rows .btn.small { width: auto; min-height: var(--tap); }
.conn-more { margin: 0 0 12px; border-top: 1px solid var(--line); }
.conn-more summary {
  display: flex; align-items: center; gap: 6px; min-height: var(--tap);
  color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-m); cursor: pointer; list-style: none;
}
.conn-more summary::-webkit-details-marker { display: none; }
.conn-more summary::before { content: "‹"; display: inline-block; width: 12px; text-align: center; transition: transform var(--t-fast) var(--ease); }
.conn-more[open] summary::before { transform: rotate(-90deg); }
.conn-more summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.conn-plain { display: block; }
.conn-plain:empty { display: none; }
.conn-more .conn-tech { margin: 0 0 4px; }
.conn-acts > .btn { flex: 1 1 140px; }

/* ---------- the teacher: a dot on each avatar, the counts, the bar's dot ---------- */
.conn-av {
  appearance: none; flex: none; position: relative;
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); margin: -4px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; touch-action: manipulation;
}
.conn-av:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.hand-list .conn-av { display: none; }
.conn-pdot {
  position: absolute; bottom: -1px; inset-inline-end: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 2px var(--chrome, var(--card));
}
.conn-av[data-q="ok"] .conn-pdot { background: var(--ok); }
.conn-av[data-q="weak"] .conn-pdot { background: var(--warn-solid); }
.conn-av[data-q="down"] .conn-pdot { background: var(--danger); }
.conn-av[data-q="wait"] .conn-pdot { background: var(--line-strong); }
/* «صدا نمیاد» in the chat on a good line: amber too, so the teacher finds them. */
.conn-av[data-q="ok"][data-said="1"] .conn-pdot { background: var(--warn-solid); }
.conn-sum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px;
  margin: 0 8px 6px; min-height: 28px;
  color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-m);
}
.conn-sum[hidden] { display: none; }
.conn-sum > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.conn-sum > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.conn-sum > .cs-weak { color: var(--warn); }
.conn-sum > .cs-weak::before { background: var(--warn-solid); }
.conn-sum > .cs-down { color: var(--danger-ink); }
.conn-sum > .cs-down::before { background: var(--danger); }
.conn-bar-dot {
  display: none; position: absolute; top: 2px; inset-inline-end: calc(50% + 14px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--warn-solid); box-shadow: 0 0 0 2px var(--chrome, var(--card));
  animation: kit-pop var(--t-med) var(--ease);
}
.cb[data-conn="warn"] .conn-bar-dot { display: block; }

/* ---------- a person's card ---------- */
.conn-pcard {
  position: fixed; z-index: 35;
  width: min(300px, calc(100vw - 16px));
  padding: 8px 12px 12px; padding-inline-end: 4px;
  border-radius: var(--r-pop);
  background: var(--card-raised); color: var(--ink);
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line);
  animation: kit-pop var(--t-med) var(--ease);
}
.conn-pcard.bottom {
  left: 8px; right: 8px; top: auto; width: auto;
  bottom: calc(8px + env(safe-area-inset-bottom));
  border-radius: var(--r-sheet);
  padding: 12px 16px 16px; padding-inline-end: 8px;
  animation-name: kit-rise;
}
.conn-pcard-top { display: flex; align-items: center; gap: 8px; }
.conn-pcard-top b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs); }
.conn-pcard-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.conn-pcard[data-q="ok"] .conn-pcard-dot { background: var(--ok); }
.conn-pcard[data-q="weak"] .conn-pcard-dot { background: var(--warn-solid); }
.conn-pcard[data-q="down"] .conn-pcard-dot { background: var(--danger); }
.conn-pcard-what { margin: 0 0 4px; padding-inline-end: 8px; font-size: var(--fs-sm); font-weight: var(--fw-m); line-height: 1.7; }
.conn-pcard[data-q="weak"] .conn-pcard-what { color: var(--warn); }
.conn-pcard[data-q="down"] .conn-pcard-what { color: var(--danger-ink); }
.conn-pcard-since { color: var(--muted); font-weight: var(--fw); }
.conn-pcard[data-q="ok"][data-said="1"] .conn-pcard-dot { background: var(--warn-solid); }
.conn-pcard-said { margin: 0 0 4px; padding-inline-end: 8px; color: var(--warn); font-size: var(--fs-sm); line-height: 1.7; }
.conn-pcard-said b { font-weight: var(--fw-b); }
.conn-pcard-tip { margin: 0 0 6px; padding-inline-end: 8px; font-size: var(--fs-s); line-height: 1.7; }
.conn-pcard-dev, .conn-pcard-ready { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-s); }
.conn-pcard-acts { display: flex; margin-top: 8px; padding-inline-end: 8px; }
.conn-pcard-acts .btn { width: auto; min-height: var(--tap); }

/* ---------- after the class ---------- */
.conn-report h2 { display: flex; align-items: center; gap: 8px; }
.conn-report-rows { list-style: none; margin: 0; padding: 0; }
.conn-report-rows li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.conn-report-rows li:first-child { border-top: 0; }
.conn-report-rows b { min-width: 6em; }
.conn-report-rows span { color: var(--muted); }
.conn-report-time { margin-inline-start: auto; color: var(--warn) !important; font-weight: var(--fw-b); white-space: nowrap; }
.conn-report-fine { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ok-ink); font-weight: var(--fw-m); }

/* A phone on its side: the banner is one slim line. */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .room > .conn-banner { margin-top: 4px; padding-block: 0; font-size: var(--fs-s); }
  .conn-banner-text { padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .conn-banner[data-tone="info"] .conn-banner-dot { animation: none; }
  .conn-pcard, .room > .conn-banner, .conn-bar-dot { animation: none; }
}