/* fx/attention.css: "Wartet auf dich" und Verbindungshinweis */

/* Ansage fuer Screenreader, unsichtbar */
.ab-att-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Glocken-Knopf im Kopf (Browser-Benachrichtigung) */
.ab-att-bell { padding: 0; width: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--dim); }
.ab-att-bell svg { fill: currentColor; display: block; }
.ab-att-bell[aria-pressed="true"] { color: var(--amber); }

/* schmales Banner oben in der Karte, wenn die Live-Verbindung weg ist */
.ab-att-conn {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  max-width: calc(100% - 24px); padding: 6px 14px;
  background: var(--panel); color: var(--coral); border: 1px solid var(--coral); border-radius: 999px;
  font: 600 0.9rem/1.3 var(--body); text-align: center; pointer-events: none;
}
.ab-att-conn[hidden] { display: none; }

/* dezente Zeile unten rechts (links unten sitzt der Verlauf-Knopf): wann kam das letzte Ereignis */
.ab-att-seen {
  position: absolute; right: 12px; bottom: 8px; z-index: 2; text-align: right;
  font: 0.8rem/1.2 var(--mono); color: var(--dim); opacity: 0.85; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ab-att-seen[hidden] { display: none; }

@media (max-width: 560px) {
  .ab-att-conn { top: 6px; font-size: 0.82rem; padding: 5px 10px; }
  .ab-att-seen { right: 8px; bottom: 6px; font-size: 0.72rem; }
}