/* jarchi on a bad day (edge.js): the calm card near the top of the screen (a slow way in, the sound still connecting,
   a mic that changed by itself) and the page of a class that is open somewhere else. */
.edge-card {
  position: fixed; z-index: 60; inset-inline: 12px; margin-inline: auto; max-width: 30rem;
  top: calc(env(safe-area-inset-top, 0px) + 64px); /* under the class's top bar, clear of the controls at the foot */
  display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--hand-line); border-radius: var(--r-pop);
  padding: 12px 14px; box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); line-height: 1.6;
  animation: kit-pop var(--t-med) var(--ease);
}
.edge-card[hidden] { display: none; }
.edge-words { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.edge-words strong { font-weight: var(--fw-b); }
.edge-words span { color: var(--muted); }
/* Working on it: the rejoin banner's small turning ring; a done word gets the check mark. */
.edge-mark {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--hand-line); border-top-color: var(--hand-ink);
  animation: rejoin-turn .9s linear infinite;
}
.edge-mark.ok {
  animation: none; border: 0; width: 18px; height: 18px;
  background: var(--icon) var(--mark-ok) center / 12px no-repeat;
}
.edge-card[data-kind="said"] { border-color: var(--speak-line); }
.edge-card .btn { width: auto; flex: none; }
@media (prefers-reduced-motion: reduce) { .edge-mark { animation: none; } .edge-card { animation: none; } }
#edge-aside .btn { margin-top: 8px; }
/* The teacher's long cut: our banner says it («کلاس تموم نشده»); conn.js's shorter one steps back meanwhile. */
.edge-teacher-away #conn-banner[data-code="teacher_down"] { display: none; }