/* Сила Рода · панель «Ученицы онлайн» и «Вышла новая версия» (sr-presence.js) */
/* Закреплена слева сверху, не уезжает при прокрутке; свёрнута — одна строка */
.sr-online-dock { position: fixed; left: 12px; top: 80px; z-index: 70; width: 280px; max-width: calc(100vw - 24px); }
.sr-online-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--sr-line, rgba(0,0,0,.12)); border-radius: 999px; background: #fffaf3; box-shadow: 0 10px 26px rgba(0,0,0,.12); color: var(--sr-ink, #222); cursor: pointer; text-align: left; }
.sr-online-dock:not(.is-open) { width: auto; }
.sr-online-dock.is-open .sr-online-toggle { border-radius: 18px 18px 0 0; box-shadow: none; border-bottom-color: transparent; }
.sr-online-title { flex: 1; font: 600 11px/1.3 var(--sr-sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--sr-gold-deep, #8a5a1f); white-space: nowrap; }
.sr-online-chevron { font: 600 11px/1 var(--sr-sans, system-ui, sans-serif); color: var(--sr-muted, #6b6b6b); white-space: nowrap; }
.sr-online-scroll { max-height: calc(100vh - 200px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 12px; background: #fffaf3; border: 1px solid var(--sr-line, rgba(0,0,0,.12)); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 0 18px 34px rgba(0,0,0,.14); }
.sr-online-course + .sr-online-course { margin-top: 8px; }
.sr-online-course-title { margin: 6px 0 2px; padding: 0 6px; font: 600 11px/1.4 var(--sr-sans, system-ui, sans-serif); color: var(--sr-muted, #6b6b6b); }
.sr-online-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sr-online-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 12px; color: var(--sr-ink, #222); text-decoration: none; font: 400 14px/1.35 var(--sr-sans, system-ui, sans-serif); }
a.sr-online-row:hover, a.sr-online-row:focus-visible { background: rgba(0,0,0,.05); }
.sr-online-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px var(--sr-paper, #fff); }
.sr-online-toggle .sr-online-dot { margin-top: 0; }
.sr-online-dot.is-idle { background: #fbbf24; }
.sr-online-dot.is-none { background: #c8c2b8; }
.sr-online-body { min-width: 0; display: grid; }
.sr-online-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-online-screen { font-size: 12px; color: var(--sr-muted, #6b6b6b); overflow-wrap: anywhere; }
.sr-online-meta { font-size: 11px; color: var(--sr-muted, #6b6b6b); }
.sr-online-idle { font-size: 11px; color: #047857; }
.sr-online-idle.is-idle { color: #b45309; }
.sr-online-empty, .sr-online-silent { margin: 4px 0 0; padding: 0 6px; font: 400 12px/1.4 var(--sr-sans, system-ui, sans-serif); color: var(--sr-muted, #6b6b6b); }
.sr-online-silent { margin-top: 10px; font-size: 11px; }
/* Телефон: свёрнутая — маленький значок «● 3», чтобы не закрывать меню */
@media (max-width: 640px) {
  .sr-online-dock:not(.is-open) .sr-online-title { font-size: 0; letter-spacing: 0; }
  .sr-online-dock:not(.is-open) .sr-online-title::after { content: attr(data-count); font-size: 13px; letter-spacing: 0; }
  .sr-online-dock:not(.is-open) .sr-online-toggle { padding: 8px 12px; gap: 6px; }
}
@media print { .sr-online-dock { display: none; } }

.sr-update { position: fixed; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 80; margin: 0 auto; max-width: 28rem; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; border: 1px solid rgba(184,122,52,.3); background: var(--sr-paper, #fffaf2); box-shadow: 0 18px 40px rgba(0,0,0,.18); font: 400 14px/1.4 var(--sr-sans, system-ui, sans-serif); color: var(--sr-ink, #222); }
.sr-update-icon { font-size: 20px; }
.sr-update-text { flex: 1; }
.sr-update-button { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sr-button, #b07a34); color: var(--sr-button-ink, #fff); font: 600 14px/1 var(--sr-sans, system-ui, sans-serif); cursor: pointer; }