/* styles.css — оформление сайта «Онлайн» (дополняет Tailwind). */

.glass-modal { backdrop-filter: blur(4px); }
.lock-key { background: rgba(255,255,255,0.15); color: #fff; font-size: 1.5rem; font-weight: 700; border-radius: 1rem; padding: 0.75rem 0; transition: background 0.1s, transform 0.1s; touch-action: manipulation; }
.lock-key:active { background: rgba(255,255,255,0.32); }
/* Экран ПИН: свои цвета, одинаковые в светлой и тёмной теме (тёмная тема перекрашивает bg-white в тёмный —
   из-за этого в ней не было видно ни закрашенных точек, ни кнопки OK). */
.lock-key.pressed { background: rgba(255,255,255,0.42); transform: scale(0.94); } /* короткое касание тоже видно */
.lock-key.lock-ok { background: #fff; color: #263d66; }
.lock-key.lock-ok:active, .lock-key.lock-ok.pressed { background: #d6e0f0; }
.lock-dot { width: 0.875rem; height: 0.875rem; border-radius: 9999px; border: 2px solid rgba(255,255,255,0.8); transition: background 0.1s, transform 0.1s; }
.lock-dot.filled { background: #fff; transform: scale(1.1); }
@media print {
    body > *:not(#print-overlay) { display: none !important; }
    #print-overlay { position: static !important; overflow: visible !important; background: #fff !important; }
    .no-print { display: none !important; }
}

.hdr-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: rgba(255,255,255,.15); font-size: .8rem; transition: background .15s; }
.hdr-btn:hover { background: rgba(255,255,255,.25); }
.hdr-btn.hidden { display: none; }
.hdr-item { width: 100%; align-items: center; gap: .6rem; padding: .5rem .85rem; font-size: .75rem; font-weight: 500; text-align: left; }
.hdr-item:hover { background: #f8fafc; }
.hdr-item > i { width: 1rem; text-align: center; color: #94a3b8; }
.hdr-item.hidden { display: none; }
/* Меню «⋯» — короткий список разделов-кнопок; нажали раздел — под ним раскрываются его пункты (открыт один раздел).
   Раздел, в котором человеку нечего показать, не виден (fitHeaderMenu). */
.hdr-sec { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .6rem .85rem; font-size: .8rem; font-weight: 700; color: #1e293b; text-align: left; border-top: 1px solid #f1f5f9; }
.hdr-sec > i:first-child { width: 1rem; text-align: center; color: #4b6799; }
.hdr-sec > span { flex: 1; }
.hdr-sec-chev { font-size: .65rem; color: #94a3b8; transition: transform .15s; }
.hdr-sec.open .hdr-sec-chev { transform: rotate(180deg); }
.hdr-sec.open { background: #f2f5fa; }
.hdr-sec.first { border-top: 0; }
.hdr-sec.empty, .hdr-item.sec-hide { display: none !important; }
.hdr-sec.has-badge:not(.open) > span::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 9999px; background: #e11d48; vertical-align: middle; }
.hdr-item.in-sec { padding-left: 1.6rem; }
html.dark .hdr-sec { color: #e7ebf1; border-top-color: #263042; }
html.dark .hdr-sec.open { background: #1b2331; }
html.dark .hdr-sec > i:first-child { color: #94a8cc; }
/* ---- строгое оформление ---- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.003em; }
#app-header { background: #16243d; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(15,23,42,.18); }
#app-header h1 { letter-spacing: .01em; }
.hdr-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.hdr-btn:hover { background: rgba(255,255,255,.16); }
.modal-head h3 { font-weight: 700; color: #0f172a; }
.modal-head h3 > i { color: #34507f; }
.glass-modal > div { box-shadow: 0 20px 50px -12px rgba(15,23,42,.35); }
.glass-modal { background-color: rgba(15,23,42,.55) !important; }
/* карточки и кнопки чуть сдержаннее */
.rounded-2xl { border-radius: 14px; }
button, a { -webkit-tap-highlight-color: transparent; }
/* ---- списки недель в стиле iPhone (сгруппированный список) ---- */
.wk-list { background: #fff; border: 1px solid #e6e8ec; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.wk-list:empty { display: none; }
.wk-list > :not(.wk-item) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.wk-item + .wk-item { border-top: 1px solid #eceef2; }
.wk-head { background: #fff; transition: background .15s; }
.wk-head:active { background: #f3f4f6; }
.wk-title { font-size: calc(15px * var(--fs, 1)); font-weight: 600; color: #111827; letter-spacing: -0.012em; }
.wk-chev { font-size: 12px; color: #c4c8cf; margin-left: .6rem; transition: transform .22s ease; }
.wk-chev.open { transform: rotate(90deg); }
.wk-item > .p-3 { border-top: 1px solid #f1f2f5; background: #fbfbfc; }
.wk-chg { box-shadow: inset 3px 0 0 #f59e0b; }
.wk-chg-strong { box-shadow: inset 4px 0 0 #f59e0b; }
.wk-chg-strong .wk-head { background: #fffbeb; }
/* сегодняшняя встреча */
.wk-today { box-shadow: inset 4px 0 0 #34507f; }
.wk-today .wk-head, div.wk-today:not(.wk-item) { background: #eef3fb; }
.wk-today-badge { font-size: 10px; font-weight: 700; color: #fff; background: #34507f; border-radius: 999px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .03em; }
/* прошедшие встречи — приглушены; перед первой ненаступившей — черта «Впереди» */
.wk-past .wk-head, div.wk-past:not(.wk-item) { background: #f4f5f7; }
.wk-past .wk-title, .wk-past .wk-title > span:first-child { color: #6b7280; }
.wk-past-badge { font-size: 10px; font-weight: 600; color: #4b5563; background: #e5e7eb; border-radius: 999px; padding: 1px 7px; }
.wk-list > .wk-divider, .wk-divider { display: flex; align-items: center; gap: .5rem; padding: .45rem .9rem; background: #eef3fb; border-top: 2px solid #34507f !important; }
.wk-divider span { font-size: 11px; font-weight: 700; color: #34507f; text-transform: uppercase; letter-spacing: .04em; }
html.dark .wk-past .wk-head, html.dark div.wk-past:not(.wk-item) { background-color: #161c27 !important; }
html.dark .wk-past .wk-title, html.dark .wk-past .wk-title > span:first-child { color: #8b95a5 !important; }
html.dark .wk-past-badge { background: #2a3342; color: #b4bdca; }
html.dark .wk-list > .wk-divider, html.dark .wk-divider { background: #1d2b42; border-top-color: #5b7fc0 !important; }
html.dark .wk-divider span { color: #a9c1ea; }
/* шрифт легче: жирный — полужирный, как в iOS */
.font-bold { font-weight: 600; }
body { letter-spacing: -0.006em; }
.chat-install-offer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .85rem; background: #ecfdf5; border-bottom: 1px solid #bbf7d0; color: #14532d; }
.chat-install-offer.hidden, .chat-install-offer.chat-offer-off { display: none; }
.chat-install-offer-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: 11px; line-height: 1.35; }
.chat-install-offer-copy strong { font-size: 12px; }
.chat-install-offer-actions { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; }
.chat-install-offer-action { padding: .45rem .65rem; border-radius: .55rem; background: #047857; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.chat-install-offer-close { padding: .2rem .4rem; color: #64748b; font-size: 20px; line-height: 1; }
html.dark .chat-install-offer { background: #10251c; border-color: #244b38; color: #bbf7d0; }
html.dark .chat-install-offer-close { color: #94a3b8; }
.help-item { border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; margin-bottom: 8px; overflow: hidden; }
.help-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: #111827; }
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary > i:first-child { width: 1.1rem; text-align: center; color: #34507f; font-size: 13px; }
.help-item > summary > span { flex: 1; }
.help-chev { font-size: 11px; color: #c4c8cf; transition: transform .2s; }
.help-item[open] .help-chev { transform: rotate(90deg); }
.help-text { padding: 0 .95rem .85rem 2.6rem; font-size: calc(13px * var(--fs, 1)); line-height: 1.5; color: #374151; }
.help-text p { margin: .45rem 0; } .help-text ul { margin: .35rem 0; padding-left: 1.1rem; list-style: disc; } .help-text li { margin: .2rem 0; }
/* ================= тёмная тема ================= */
html.dark { color-scheme: dark; }
html.dark body, html.dark .bg-slate-100 { background-color: #0e131b; }
html.dark .bg-white, html.dark .wk-list, html.dark .wk-head, html.dark .help-item, html.dark .tool-chip { background-color: #161d28 !important; }
html.dark .bg-white\/95, html.dark .bg-white\/90 { background-color: rgba(22,29,40,.95) !important; }
html.dark .bg-slate-50, html.dark #chat-body, html.dark .wk-item > .p-3 { background-color: #1b2331 !important; }
html.dark .bg-slate-100 { background-color: #212a39 !important; }
html.dark .bg-slate-200 { background-color: #2a3444 !important; }
html.dark .wk-head:active, html.dark .hdr-item:hover { background-color: #212a39 !important; }
html.dark .wk-today .wk-head, html.dark div.wk-today:not(.wk-item) { background-color: #1d2b42 !important; }
html.dark .wk-today { box-shadow: inset 4px 0 0 #5b7fc0; }
html.dark .wk-today-badge { background: #3a5a92; }
html.dark .border-slate-100, html.dark .divide-slate-100 > * + *, html.dark .wk-item + .wk-item, html.dark .wk-item > .p-3 { border-color: #232c3a !important; }
html.dark .border-slate-200, html.dark .wk-list, html.dark .help-item { border-color: #2a3444 !important; }
html.dark .border-slate-300 { border-color: #364153 !important; }
html.dark .text-slate-900, html.dark .text-slate-800, html.dark .wk-title, html.dark .modal-head h3, html.dark .help-item > summary { color: #e7ebf1 !important; }
html.dark .text-slate-700 { color: #d3d9e3 !important; }
html.dark .text-slate-600 { color: #b3bccb !important; }
html.dark .text-slate-500, html.dark .help-text { color: #9aa4b5 !important; }
html.dark .text-slate-400 { color: #8e9bb0 !important; }
html.dark .text-slate-300, html.dark .wk-chev, html.dark .help-chev { color: #8390a6 !important; }
/* фирменный синий: фон кнопок чуть светлее, текст — светлый */
html.dark .bg-violet-600, html.dark .bg-indigo-600 { background-color: #3a5a92 !important; }
html.dark .bg-violet-700, html.dark .bg-indigo-700 { background-color: #33507f !important; }
html.dark .bg-violet-50, html.dark .bg-indigo-50, html.dark .bg-violet-50\/40, html.dark .bg-violet-50\/50 { background-color: #1a2439 !important; }
html.dark .bg-violet-100, html.dark .bg-indigo-100 { background-color: #22304b !important; }
html.dark .text-violet-900, html.dark .text-violet-800, html.dark .text-violet-700, html.dark .text-indigo-700, html.dark .text-violet-600, html.dark .text-indigo-600 { color: #a9bfe8 !important; }
html.dark .border-violet-200, html.dark .border-violet-300, html.dark .border-indigo-200 { border-color: #33466d !important; }
html.dark .modal-head h3 > i, html.dark .help-item > summary > i:first-child { color: #8fa9da !important; }
/* смысловые цвета: тёмные подложки, светлый текст */
html.dark .bg-amber-50 { background-color: #2a2314 !important; } html.dark .bg-amber-100 { background-color: #3a2f16 !important; } html.dark .bg-amber-200 { background-color: #4d3c14 !important; }
html.dark .text-amber-900, html.dark .text-amber-800, html.dark .text-amber-700 { color: #f1c56d !important; } html.dark .text-amber-600 { color: #f0b54a !important; }
html.dark .border-amber-200, html.dark .border-amber-300 { border-color: #5a4518 !important; }
html.dark .bg-rose-50 { background-color: #2c1a20 !important; } html.dark .border-rose-200, html.dark .border-rose-100 { border-color: #5a2a33 !important; }
html.dark .text-rose-800, html.dark .text-rose-700, html.dark .text-rose-600 { color: #f29aa7 !important; }
html.dark .bg-emerald-50, html.dark .bg-emerald-50\/40 { background-color: #142a20 !important; } html.dark .bg-emerald-100 { background-color: #1a3a2b !important; } html.dark .border-emerald-200 { border-color: #24533c !important; }
html.dark .text-emerald-900, html.dark .text-emerald-800, html.dark .text-emerald-700, html.dark .text-emerald-600 { color: #7fd6a9 !important; }
html.dark .bg-sky-50, html.dark .bg-sky-100 { background-color: #152536 !important; } html.dark .text-sky-800, html.dark .text-sky-700 { color: #8cc8f0 !important; }
html.dark .bg-yellow-200, html.dark .bg-yellow-300 { background-color: #5a4a12 !important; color: #fff2b8 !important; }
/* поля ввода */
html.dark input, html.dark select, html.dark textarea { background-color: #121923; color: #e7ebf1; border-color: #364153; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #667185; }
html.dark .glass-modal { background-color: rgba(0,0,0,.6) !important; }
html.dark .focus-flash { animation-name: focusFlashDark; }
@keyframes focusFlashDark { 0%, 100% { box-shadow: 0 0 0 0 rgba(143,169,218,0); } 20%, 60% { box-shadow: 0 0 0 4px rgba(143,169,218,.55); } }
/* режим входа по персональной ссылке */
body.guest-mode #tab-assignments, body.guest-mode #my-tasks-btn, body.guest-mode .guest-hide, body.guest-mode #open-substitutions-btn { display: none !important; }
body.guest-mode #guest-home { display: block !important; }
/* вход по личной ссылке с разрешённым расписанием: расписание без участников (строка с пустым участником скрыта) */
body.guest-mode.guest-schedule #tab-assignments { display: block !important; }
body.guest-schedule #tab-assignments [id^="ack-banner-"], body.guest-schedule #backup-reminder { display: none !important; }
body.guest-schedule #tab-assignments div:has(> .gs-empty) { display: none !important; }
/* …и «Мои задания» — за звёздочкой в шапке, как в обычном режиме */
body.guest-mode.guest-schedule #my-tasks-btn:not(.hidden) { display: flex !important; }
body.guest-schedule .guest-only-tasks { display: none !important; }
/* окна: не выше экрана, прокручиваются сами, а страница позади — стоит */
.glass-modal > div { max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.glass-modal .overflow-y-auto { overscroll-behavior: contain; }
body.modal-open { overflow: hidden; }
#main-view { overflow-x: clip; touch-action: pan-y pinch-zoom; } /* вкладка едет за пальцем, страница не елозит вбок */
@keyframes focusFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 80, 127, 0); } 20%, 60% { box-shadow: 0 0 0 4px rgba(52, 80, 127, .5); } }
.focus-flash { animation: focusFlash 1.3s ease-in-out 2; border-radius: .375rem; }

/* ==== Читаемость и удобство на телефоне (по итогам автоматической проверки всех экранов) ==== */
/* Тёмная тема: ещё несколько цветов текста, которые на тёмном фоне читались плохо */
html.dark .text-\[\#34507f\] { color: #9fb3d2 !important; }   /* подпись автора в чате */
html.dark .text-rose-500 { color: #fb7185 !important; }
html.dark .text-violet-400, html.dark .text-indigo-400 { color: #94a8cc !important; }
/* Тёмная тема: подсветка при наведении/касании. Раньше она была светлой (как в светлой теме), а текст — светлым:
   на телефоне после нажатия строка «залипала» в этом состоянии, и текст в ней пропадал. */
html.dark .hover\:bg-slate-50:hover { background-color: #232d3e !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #2a3444 !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #334055 !important; }
html.dark .hover\:bg-violet-50:hover { background-color: #22304b !important; }
html.dark .hover\:bg-violet-100:hover { background-color: #2b3b5c !important; }
html.dark .hover\:bg-amber-100:hover { background-color: #4d3c14 !important; }
html.dark .hover\:bg-rose-50:hover { background-color: #3a2229 !important; }
html.dark .hover\:text-slate-600:hover, html.dark .hover\:text-slate-700:hover, html.dark .hover\:text-slate-800:hover { color: #e7ebf1 !important; }
html.dark .hover\:text-violet-600:hover, html.dark .hover\:text-violet-700:hover, html.dark .hover\:text-violet-800:hover, html.dark .hover\:text-violet-900:hover, html.dark .hover\:text-indigo-700:hover { color: #c3d3f0 !important; }
html.dark .hover\:text-rose-500:hover, html.dark .hover\:text-rose-600:hover, html.dark .hover\:text-rose-700:hover, html.dark .hover\:text-rose-800:hover { color: #fda4af !important; }
html.dark .hover\:text-emerald-800:hover, html.dark .hover\:text-emerald-900:hover { color: #a7e8c6 !important; }
/* Размеры текста в пикселях: самый мелкий (9–10 px) — на пиксель крупнее; все растут вместе с настройкой
   «Размер текста» (--fs задаётся в index.html до отрисовки; остальное в rem растёт само от размера корня) */
html .text-\[8px\] { font-size: calc(8px * var(--fs, 1)); }
html .text-\[9px\] { font-size: calc(10px * var(--fs, 1)); }
html .text-\[10px\] { font-size: calc(11px * var(--fs, 1)); }
html .text-\[11px\] { font-size: calc(11px * var(--fs, 1)); }
html .text-\[12px\] { font-size: calc(12px * var(--fs, 1)); }
html .text-\[13px\] { font-size: calc(13px * var(--fs, 1)); }
html .text-\[14px\] { font-size: calc(14px * var(--fs, 1)); }
/* Телефон: маленькие кнопки получают невидимую «зону касания» вокруг — попасть пальцем легче, вид не меняется */
@media (pointer: coarse) {
    button.text-lg.p-1 { min-width: 2.25rem; }   /* крестики «закрыть» */
    button.p-1:not(.absolute):not(.fixed):not(.sticky), button.px-1:not(.absolute):not(.fixed):not(.sticky),
    button.p-2:not(.absolute):not(.fixed):not(.sticky) { position: relative; }
    button.p-1::after, button.px-1::after, button.p-2::after { content: ""; position: absolute; inset: -6px; }
    /* кнопки-ссылки без отступов по высоте («Написать», «Убрать», «Нет аккаунта?») */
    button:not([class*="py-"]):not([class*=" p-"]):not([class^="p-"]):not(.absolute):not(.fixed):not(.sticky) { position: relative; }
    button:not([class*="py-"]):not([class*=" p-"]):not([class^="p-"]):not(.absolute):not(.fixed):not(.sticky)::after { content: ""; position: absolute; inset: -8px 0; }
    select { min-height: 1.75rem; }
    input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
}
/* Список недель: значки перенеслись на вторую строку — они под датой слева, кнопки на уровне даты */
.wk-head.wk-wrapped { align-items: flex-start; }
.wk-head.wk-wrapped .wk-badges { margin-left: 0; padding-left: 0; flex-basis: 100%; }
/* Вкладки не помещаются (крупный шрифт) — без значков и с меньшими отступами, чтобы все названия были видны */
.fit-tabs.tight > button > i:first-child { display: none; }
.fit-tabs.tight > button { padding-left: 0.25rem; padding-right: 0.25rem; }
/* Всплывающие окна и экран ПИН: если содержимое выше экрана (крупный шрифт, невысокий экран, открытая клавиатура),
   его можно прокрутить. margin: auto по вертикали держит окно по центру, пока оно помещается; при центрировании
   через align-items верх высокого окна уходил бы за экран — и туда было бы не долистать. */
.glass-modal, .fit-overlay { overflow-y: auto; overscroll-behavior: contain; align-items: flex-start !important; }
.glass-modal > *, .fit-overlay > * { margin-top: auto; margin-bottom: auto; }
/* Чат: сообщения прижаты к низу, к полю ввода (как в мессенджерах) — новое появляется внизу и сдвигает прежние вверх.
   margin-top: auto (а не justify-content: flex-end) — чтобы длинную переписку по-прежнему можно было долистать до начала. */
#chat-body:has(> #chat-msgs) { display: flex; flex-direction: column; }
#chat-body > #chat-msgs { margin-top: auto; }
#chat-body > #chat-pin { flex-shrink: 0; }
/* «Скопировать» рядом с каждым числом в итоге месяца */
.rep-copy { margin-left: .2rem; padding: 0 .25rem; color: #4b6799; font-size: .7rem; vertical-align: baseline; }
html.dark .rep-copy { color: #94a8cc; }
/* карточки участников: в печати каждая на своей странице, предпросмотр — светлый и в тёмной теме */
#print-content .rep-card [contenteditable]:focus { outline: 2px solid #4b6799; outline-offset: -2px; }
html.dark #print-overlay #print-content .rep-card { background: #fff !important; color: #0f172a !important; }
@media print { #print-content .rep-card div[style*="overflow-x"] { overflow: visible !important; } }
/* карточки: на экране — по одной (листание), в печати / PDF — все */
#cards-pages.paged > .rep-card:not(.cur) { display: none; }
@media print { #cards-pages > .rep-card { display: block !important; } }
/* Карточки на телефоне: таблица месяцев превращается в список — месяц заголовком, ниже «Участие ✓ · Изучения 2 · Часы 52»,
   без прокрутки вбок; поля остаются теми же (их можно править). В печати / PDF — обычная таблица. */
@media screen and (max-width: 640px) {
    #print-content .rc-table thead { display: none; }
    #print-content .rc-table, #print-content .rc-table tbody { display: block; width: 100%; }
    #print-content .rc-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; background: #fff; }
    #print-content .rc-table td { border: 0 !important; padding: 2px 0 !important; display: flex; align-items: center; gap: 4px; min-height: 26px; text-align: left !important; font-size: 13px; }
    #print-content .rc-table td.rc-month { width: 100%; font-weight: 700; font-size: 14px; text-transform: capitalize; min-height: 0; }
    #print-content .rc-table td.rc-empty { display: none; }
    #print-content .rc-table td[data-label]::before { content: attr(data-label) ":"; color: #64748b; font-size: 11px; }
    /* поля для правки — заметные квадратики (подпись рядом), в которые легко попасть пальцем */
    #print-content .rc-table .rc-v { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.2rem; padding: 0 .5rem; border: 1px solid #94a3b8; border-radius: 8px; background: #f8fafc; font-weight: 700; font-size: 14px; }
    #print-content .rc-table .rc-v[role="button"] { cursor: pointer; min-width: 2.8rem; }
    #print-content .rc-table td.rc-note { width: 100%; }
    #print-content .rc-table td.rc-note .rc-v { flex: 1; justify-content: flex-start; font-weight: 400; min-height: 2.2rem; }
    #print-content .rc-table td.rc-note { width: 100%; }
    #print-content .rep-card h2 { font-size: 17px !important; }
}
@media screen and (max-width: 640px) { #print-content .rc-table tr.rc-total { background: #f2f5fa; border-color: #9fb3d2; } #print-content .rc-table tr.rc-total td.rc-month { text-transform: none; } }
/* Карточка на телефоне — ровная сетка 2×2: «Участие | ПП / ОП», «Изучения | Часы», ниже «Примечание» на всю ширину;
   подпись над полем, поля одинаковой ширины (раньше переносились как придётся). */
@media screen and (max-width: 640px) {
    #print-content .rc-table tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
    #print-content .rc-table td { flex-direction: column; align-items: stretch !important; gap: 2px !important; min-height: 0 !important; }
    #print-content .rc-table td.rc-month { grid-column: 1 / -1; }
    #print-content .rc-table td.rc-note { grid-column: 1 / -1; }
    #print-content .rc-table td[data-label]::before { display: block; font-size: 11px; line-height: 1.2; margin: 0; }
    #print-content .rc-table .rc-v { width: 100%; min-width: 0 !important; }
    #print-content .rc-table td[data-label="Участие"] { order: 1; }
    #print-content .rc-table td[data-label="Вид"] { order: 2; }
    #print-content .rc-table td[data-label="Занятия"] { order: 3; }
    #print-content .rc-table td[data-label="Объём"] { order: 4; }
    #print-content .rc-table td.rc-note { order: 5; }
    #print-content .rc-table td.rc-month { order: 0; }
    /* итог года и строки сводки (там поля без квадратиков) — значение под подписью, крупно */
    #print-content .rc-table td[data-label]:not(:has(.rc-v)) { display: block !important; font-size: 15px; font-weight: 700; }
}
/* будущие месяцы в карточке — не правятся, приглушены */
#print-content tr.rc-future { opacity: .45; }
@media print { #print-content tr.rc-future { opacity: 1; } }
/* Запуск, когда вход уже был: вместо мелькающего экрана входа — спокойная заставка с кружком загрузки */
html.booting #login-view { display: none !important; }
html.booting body::after { content: ""; position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(75, 103, 153, .25); border-top-color: #4b6799; animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
/* вход: ждём данные с сервера (app-shell.js, enterApp) */
#load-wait { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; font-size: 14px; color: #64748b; }
#load-wait::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(75, 103, 153, .25); border-top-color: #4b6799; animation: boot-spin .8s linear infinite; }


/* «Облако MEGA»: просмотр документов Word и таблиц Excel (app-mega.js) */
.mega-word h1 { font-size: 1.5em; font-weight: 700; margin: .6em 0 .3em; }
.mega-word h2 { font-size: 1.3em; font-weight: 700; margin: .6em 0 .3em; }
.mega-word h3, .mega-word h4 { font-size: 1.1em; font-weight: 700; margin: .5em 0 .25em; }
.mega-word p { margin: 0 0 .5em; }
.mega-word table, .mega-sheet { border-collapse: collapse; margin: .5em 0; }
.mega-word td, .mega-sheet td, .mega-sheet th { border: 1px solid #cbd5e1; padding: .15em .5em; vertical-align: top; }
/* документ — всегда белый лист с тёмным текстом, и в тёмной теме */
.mega-word, .mega-sheet-card, .mega-sheet td { background: #fff !important; color: #0f172a !important; }
.mega-sheet { font-size: 1em; white-space: nowrap; margin: 0; }
.mega-sheet td { min-width: 5em; height: 1.75em; }
.mega-sheet th.mega-xl-hd { background: #bbf7d0 !important; color: #166534 !important; }
.mega-sheet th { background: #f1f5f9 !important; color: #64748b !important; font-weight: 600; position: sticky; top: 0; }
.mega-sheet tr th:first-child { position: sticky; left: 0; }
/* умные таблицы Excel: шапка (нажать — сортировка), полосы строк, итоги */
.mega-sheet td.mega-tbl-head { background: #c7d3e6 !important; font-weight: 700; cursor: pointer; user-select: none; }
.mega-sheet td.mega-tbl-head[data-sort="asc"]::after { content: " ▲"; font-size: .75em; }
.mega-sheet td.mega-tbl-head[data-sort="desc"]::after { content: " ▼"; font-size: .75em; }
.mega-sheet td.mega-tbl-band { background: #eef2f8 !important; }
.mega-sheet td.mega-tbl-total { font-weight: 700; border-top: 2px solid #64748b; }
.mega-sheet td.mega-xl-range { background: #dcfce7 !important; }
.mega-sheet td.mega-xl-sel { outline: 2px solid #16a34a; outline-offset: -2px; background: #f0fdf4 !important; }

/* Мессенджер отдельной страницей (app-chat.js): только чат, на весь экран; прочие окна — поверх него */
html.chat-app #app-header, html.chat-app #main-view { display: none !important; }
html.chat-app #chat-modal { z-index: 45; padding: 0; background: #f8fafc; }
html.chat-app #chat-modal > div { max-width: 48rem; height: 100%; max-height: none; margin: 0 auto; border-radius: 0; border-width: 0 1px; box-shadow: none; }
html.chat-app #chat-head { background: #16243d; color: #fff; border-color: #16243d; }
html.chat-app #chat-head button, html.chat-app #chat-head .text-slate-400, html.chat-app #chat-head .text-slate-500 { color: rgba(255,255,255,.85); }
html.chat-app #chat-head button:hover { color: #fff; }
/* значок мессенджера на мгновение — при нажатии на «Сообщения» */
#chat-splash { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  background: linear-gradient(#2d4b7b, #121e34); color: #fff; font-weight: 700; font-size: .95rem; transition: opacity .3s; }
#chat-splash img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: chat-splash-in .45s cubic-bezier(.2,.9,.3,1.3); }
#chat-splash.out { opacity: 0; pointer-events: none; }
@keyframes chat-splash-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #chat-splash img { animation: none; } }
html.chat-app #chat-head h3, html.chat-app #chat-head h3 * { color: #fff; }
/* экран входа в приложении «Сообщения»: вместо «Онлайн» с логином и паролем — вход по ссылке (логин и пароль — по кнопке) */
.chat-login { display: none; }
html.chat-app .chat-login { display: block; }
html.chat-app .site-login, html.chat-app #register-form, html.chat-app #meet-join-btn, html.chat-app #plink-paste-btn,
html.chat-app #login-form [onclick="toggleAuthMode()"] { display: none !important; }
html.chat-app:not(.chat-pw) #login-form { display: none; }
html.chat-pw #chat-login-pw { display: none; }
/* Окно переписки в стиле WhatsApp: обои, облачка с хвостиками, время внутри, даты плашками, поле ввода «таблеткой» */
#chat-body:has(#chat-msgs) {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.03' stroke-width='1.5'%3E%3Ccircle cx='14' cy='16' r='6'/%3E%3Cpath d='M50 10l8 8m0-8l-8 8'/%3E%3Crect x='56' y='48' width='12' height='9' rx='2'/%3E%3Cpath d='M12 56q6-8 12 0t12 0'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
#chat-msgs { padding: .5rem .75rem .75rem !important; }
/* промежутки как в WhatsApp: подряд от одного — узкая щель, новый отправитель или перерыв — шире */
#chat-msgs > * + * { margin-top: 3px; }
#chat-msgs > .wa-first { margin-top: .6rem; }
#chat-msgs > .wa-day { margin-top: .6rem; }
.wa-day { display: flex; justify-content: center; margin: .6rem 0 .3rem; }
.wa-day span { background: #fff; color: #54656f; font-size: 11.5px; padding: .2rem .7rem; border-radius: .5rem; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-b { position: relative; max-width: 82%; padding: .3rem .5rem .3rem .6rem; border-radius: .55rem; font-size: 14.5px; line-height: 1.3; color: #111b21; cursor: pointer; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-mine { background: #d9fdd3; }
.wa-their { background: #fff; }
.wa-tail.wa-mine { border-top-right-radius: 0; }
.wa-tail.wa-their { border-top-left-radius: 0; }
.wa-tail::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.wa-tail.wa-mine::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-tail.wa-their::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-mention { box-shadow: 0 0 0 2px #a78bfa, 0 1px .5px rgba(11,20,26,.13); }
.wa-time { font-size: 11px; color: #667781; white-space: nowrap; }
.wa-time-in { float: right; margin: .35rem 0 -.3rem .6rem; }
.wa-read { color: #53bdeb; }
.wa-meta-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #667781; }
/* закреплённые: полоски слева на плашке (сколько закрепов и какой показан) и значок у самого сообщения */
.wa-pin-segs { display: flex; flex-direction: column; gap: 2px; align-self: stretch; width: 3px; padding: 2px 0; }
.wa-pin-segs i { flex: 1; min-height: 4px; border-radius: 2px; background: #c7d2e6; }
.wa-pin-segs i.on { background: #34507f; }
.wa-pinned { display: inline-flex; vertical-align: -1px; margin-right: 2px; }
html.dark .wa-pin-segs i { background: #3a4558; }
html.dark .wa-pin-segs i.on { background: #94a8cc; }
.wa-quote { background: rgba(11,20,26,.05); border-left: 4px solid #06866b; border-radius: .35rem; padding: .25rem .5rem; margin: .1rem 0 .25rem; font-size: 12.5px; color: #54656f; }
.wa-react { font-size: 12px; background: #fff; border-radius: 999px; padding: .05rem .4rem; box-shadow: 0 1px 2px rgba(11,20,26,.2); }
.wa-react-me { background: #e7f8e3; }
#chat-foot { background: #f0f2f5; border-top: 0; }
.wa-pill { box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-round { width: 2.75rem; height: 2.75rem; border-radius: 999px; flex-shrink: 0; background: #00a884; color: #fff; display: flex; align-items: center; justify-content: center; }
.wa-round:hover { background: #008f72; }
#chat-voice-btn.wa-round.hidden { display: none; }
/* пока поле пустое и голосовые доступны — вместо «отправить» микрофон; есть текст — наоборот */
#chat-foot.has-text #chat-voice-btn { display: none; }
#chat-foot:not(.has-text) #chat-voice-btn:not(.hidden) ~ #chat-send { display: none; }
/* быстрые сообщения над полем ввода: следующее по порядку — зелёное; пока пишут своё или поле скрыто — не мешают */
#chat-quick { background: #f0f2f5; }
#chat-modal:has(#chat-foot.hidden) #chat-quick, #chat-modal:has(#chat-foot.has-text) #chat-quick { display: none; }
.wa-quick { flex-shrink: 0; font-size: 13.5px; line-height: 1.25rem; white-space: nowrap; background: #fff; color: #111b21; border-radius: 999px; padding: .35rem .8rem; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-quick-next { background: #00a884; color: #fff; font-weight: 600; }
.wa-quick-edit { color: #54656f; padding: .35rem .6rem; }
html.dark #chat-quick { background: #202c33; }
html.dark .wa-quick { background: #2a3942; color: #e9edef; }
html.dark .wa-quick-next { background: #00a884; color: #fff; }
html.dark .wa-quick-edit { color: #aebac1; }
html.dark #chat-body:has(#chat-msgs) { background-color: #0b141a !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1.5'%3E%3Ccircle cx='14' cy='16' r='6'/%3E%3Cpath d='M50 10l8 8m0-8l-8 8'/%3E%3Crect x='56' y='48' width='12' height='9' rx='2'/%3E%3Cpath d='M12 56q6-8 12 0t12 0'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
html.dark .wa-b { color: #e9edef; }
html.dark .wa-mine { background: #005c4b; }
html.dark .wa-their { background: #202c33; }
html.dark .wa-day span { background: #182229; color: #8696a0; }
html.dark .wa-time, html.dark .wa-meta-row { color: #8696a0; }
html.dark .wa-mine .wa-time { color: #99beb7; }
html.dark .wa-quote { background: rgba(255,255,255,.06); color: #aebac1; }
html.dark .wa-react { background: #202c33; }
html.dark #chat-foot { background: #202c33; }
html.dark .wa-pill { background: #2a3942 !important; }
html.dark #chat-input { background: transparent !important; color: #e9edef; }
/* Смайлики: крупные (сообщение из 1–3 смайликов), смайлики из наборов, панель смайликов */
.wa-b.wa-jumbo { background: transparent; box-shadow: none; padding: 0; }
.wa-jumbo-row { display: flex; flex-wrap: wrap; gap: .15rem; align-items: flex-end; }
.wa-emo-anim { width: 5rem; height: 5rem; }
.wa-emo-big { font-size: 3.2rem; line-height: 1.1; }
.wa-jumbo-time, .wa-jumbo .wa-meta-row .wa-time { display: inline-block; margin-top: .1rem; padding: .05rem .4rem; border-radius: 999px; background: rgba(255,255,255,.85); }
.chat-sticker { display: block; width: 7rem; height: 7rem; object-fit: contain; }
#chat-emoji { background: #f0f2f5; border-top: 1px solid #e9edef; }
.wa-emoji-tabs { display: flex; gap: .15rem; padding: .25rem .4rem; border-bottom: 1px solid #e9edef; overflow-x: auto; }
.wa-emoji-tab { font-size: 20px; line-height: 1; padding: .35rem .5rem; border-radius: .5rem; opacity: .55; }
.wa-emoji-tab.on { opacity: 1; background: rgba(0,168,132,.15); }
.wa-emoji-body { height: 16rem; overflow-y: auto; overscroll-behavior: contain; }
.wa-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); padding: .3rem; }
.wa-emoji-grid > button { display: flex; align-items: center; justify-content: center; height: 2.6rem; border-radius: .5rem; }
.wa-emoji-grid > button:active { background: rgba(0,0,0,.08); }
.wa-emoji-grid img { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.wa-emoji-grid-big { grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); }
.wa-emoji-grid-big > button { height: 4rem; }
.wa-emoji-grid-big img { width: 3.6rem; height: 3.6rem; }
html.dark .wa-b.wa-jumbo { background: transparent; }
html.dark .wa-jumbo-time, html.dark .wa-jumbo .wa-meta-row .wa-time { background: rgba(32,44,51,.85); }
html.dark #chat-emoji { background: #202c33; border-color: #2a3942; }
html.dark .wa-emoji-tabs { border-color: #2a3942; }
html.dark .wa-emoji-grid > button:active { background: rgba(255,255,255,.08); }
/* Голосовое как в WhatsApp: кнопка, полоски звука с кружком, время, скорость */
.wa-voice { display: flex; align-items: center; gap: .4rem; width: 15.5rem; max-width: 100%; padding: .25rem 0 .1rem; }
.wa-vplay { width: 2.25rem; height: 2.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #8696a0; }
.wa-vmain { flex: 1; min-width: 0; padding-top: .55rem; }
.wa-wave { position: relative; display: flex; align-items: center; gap: 2px; height: 1.6rem; cursor: pointer; touch-action: none; }
.wa-wave i { flex: 1; min-height: 3px; border-radius: 2px; background: rgba(84,101,111,.38); }
.wa-wave i.on { background: #2a9fd8; }
.wa-knob { position: absolute; top: 50%; left: 0; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 999px; background: #2a9fd8; pointer-events: none; }
.wa-vtime { display: block; font-size: 11.5px; color: #667781; margin-top: .1rem; }
.wa-vspeed { flex-shrink: 0; font-size: 13px; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; background: rgba(11,20,26,.08); color: #3b4a54; }
html.dark .wa-vplay { color: #aebac1; }
html.dark .wa-wave i { background: rgba(174,186,193,.45); }
html.dark .wa-wave i.on, html.dark .wa-knob { background: #53bdeb; }
html.dark .wa-vtime { color: #8696a0; }
html.dark .wa-voice-mine .wa-vtime { color: #99beb7; }
html.dark .wa-vspeed { background: rgba(0,0,0,.25); color: #e9edef; }
/* PDF в переписке: первая страница, под ней название и число страниц */
.wa-pdf { display: block; width: 16rem; max-width: 100%; margin: .15rem 0 .2rem; text-align: left; border-radius: .45rem; overflow: hidden; background: rgba(11,20,26,.05); }
.wa-pdf-page { display: flex; align-items: center; justify-content: center; height: 9rem; background: #fff; overflow: hidden; }
.wa-pdf-page img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wa-pdf-ph { font-size: 1.6rem; font-weight: 800; color: #e2463d; letter-spacing: .05em; }
.wa-pdf-info { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; }
.wa-pdf-badge { flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff; background: #e2463d; border-radius: .25rem; padding: .3rem .25rem; }
.wa-pdf-sub { display: block; font-size: 12px; color: #667781; }
html.dark .wa-pdf { background: rgba(0,0,0,.2); }
html.dark .wa-pdf-sub { color: #8696a0; }
html.dark .wa-pdf-mine .wa-pdf-sub { color: #99beb7; }
/* Ссылка MEGA в переписке: миниатюра (у файла с картинкой — крупно сверху) или значок, имя, размер */
.wa-mega { display: flex; align-items: center; gap: .55rem; width: 16rem; max-width: 100%; margin: .15rem 0 .2rem; padding: .4rem .5rem; border-radius: .45rem; background: rgba(11,20,26,.05); text-decoration: none; color: inherit; }
.wa-mega-thumb { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .35rem; overflow: hidden; background: #d9272e; color: #fff; font-size: 1.15rem; }
.wa-mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-mega-pic { flex-direction: column; align-items: stretch; padding: 0 0 .4rem; overflow: hidden; }
.wa-mega-pic .wa-mega-thumb { width: 100%; height: 9rem; border-radius: 0; background: transparent; }
.wa-mega-pic > span:last-child { padding: 0 .55rem; }
.wa-mega-sub { display: block; font-size: 12px; color: #667781; }
html.dark .wa-mega { background: rgba(0,0,0,.2); }
html.dark .wa-mega-sub { color: #8696a0; }
html.dark .wa-mega-mine .wa-mega-sub { color: #99beb7; }
/* превью ссылки в сообщении (app-chat.js, chatLinkHtml): картинка сверху, под ней сайт, заголовок и описание */
.wa-lp { display: flex; flex-direction: column; width: 17rem; max-width: 100%; margin: .15rem 0 .25rem; border-radius: .45rem; overflow: hidden; background: rgba(11,20,26,.05); border-left: 3px solid #00a884; text-decoration: none; color: inherit; }
.wa-lp-img { display: block; width: 100%; max-height: 10rem; object-fit: cover; background: rgba(11,20,26,.05); }
.wa-lp-text { display: block; padding: .35rem .55rem .45rem; min-width: 0; }
.wa-lp-site { display: block; font-size: 11px; color: #667781; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-lp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: normal; }
.wa-lp-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: #3b4a54; white-space: normal; margin-top: .1rem; }
html.dark .wa-lp { background: rgba(0,0,0,.2); }
html.dark .wa-lp-site { color: #8696a0; }
html.dark .wa-lp-desc { color: #c4ccd1; }
html.dark .wa-lp-mine .wa-lp-site { color: #99beb7; }
/* Контакт в переписке: аватар, имя, ID и телефон, снизу — кнопки через черту */
.wa-ct { min-width: 14rem; max-width: 100%; }
.wa-ct-sub { font-size: 12px; color: #667781; }
.wa-ct-btns { display: flex; border-top: 1px solid rgba(11,20,26,.1); margin: .15rem -.5rem 0 -.6rem; }
.wa-ct-btn { flex: 1; text-align: center; padding: .5rem .25rem .35rem; font-size: 13.5px; font-weight: 600; color: #027eb5; }
.wa-ct-btn + .wa-ct-btn { border-left: 1px solid rgba(11,20,26,.1); }
html.dark .wa-ct-sub { color: #8696a0; }
html.dark .wa-ct-btns, html.dark .wa-ct-btn + .wa-ct-btn { border-color: rgba(255,255,255,.1); }
html.dark .wa-ct-btn { color: #53bdeb; }
.wa-geo-map { position: relative; overflow: hidden; border-radius: .55rem; background: #e5e3df; margin-top: .15rem; cursor: pointer; }
.wa-geo-map img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; }
.wa-geo-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: #e53935; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.wa-geo-stop { color: #e53935 !important; }
.wa-geo-live .wa-geo-pin { animation: wa-geo-pulse 1.6s ease-in-out infinite; }
@keyframes wa-geo-pulse { 50% { transform: translate(-50%, -112%); } }
.wa-geo-osm { position: absolute; right: 0; bottom: 0; font-size: 9px; line-height: 1; padding: 2px 3px; background: rgba(255,255,255,.75); color: #444; }
html.dark .wa-geo-map img { filter: brightness(.8) contrast(1.1); }
/* «Данные контакта» / «Данные чата» (как в TeleGuard): большой аватар, имя, квадратные кнопки, карточки, вкладки */
.wa-info { background: #f0f2f5; min-height: 100%; padding: 0 .75rem 1.25rem; }
.wa-info-top { text-align: center; padding: 1.25rem 0 1rem; display: flex; flex-direction: column; align-items: center; }
.wa-info-name { font-size: 24px; font-weight: 700; margin-top: .9rem; color: #111b21; word-break: break-word; }
.wa-info-sub { font-size: 14px; color: #667781; margin-top: .15rem; }
.wa-info-sqs { display: flex; justify-content: center; gap: .9rem; margin-top: 1.1rem; }
.wa-info-sq { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: #fff; color: #00a884; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(11,20,26,.08); }
.wa-info-sq:active { background: #e7f8f3; }
.wa-info-card { background: #fff; border-radius: 1.1rem; margin-top: .75rem; overflow: hidden; }
.wa-info-id { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; }
.wa-info-label { font-size: 13px; color: #667781; }
.wa-info-idv { font-size: 24px; font-weight: 500; letter-spacing: .06em; color: #111b21; font-variant-numeric: tabular-nums; }
.wa-info-ico { color: #8696a0; padding: .25rem; }
.wa-info-accent { color: #00a884; }
.wa-info-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .95rem 1rem; font-size: 16px; color: #111b21; text-align: left; cursor: pointer; }
.wa-info-line small { display: block; font-size: 12px; color: #667781; margin-top: .1rem; }
.wa-info-line + .wa-info-line, .wa-info-more { border-top: 1px solid #f0f2f5; }
.wa-info-chev { color: #8696a0; transition: transform .15s; }
.wa-info-chev.open { transform: rotate(90deg); }
.wa-info-danger, .wa-info-danger small { color: #ea0038; }
input[type="checkbox"].wa-switch { appearance: none; -webkit-appearance: none; width: 3.1rem; height: 1.8rem; margin: 0; border-radius: 999px; background: #c5cdd2; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
input[type="checkbox"].wa-switch::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
input[type="checkbox"].wa-switch:checked { background: #00a884; }
input[type="checkbox"].wa-switch:checked::after { transform: translateX(1.3rem); }
.wa-info-tabs { display: flex; justify-content: space-around; padding: .4rem .5rem 0; border-bottom: 1px solid #f0f2f5; }
.wa-info-tabs button { padding: .7rem .35rem .6rem; font-size: 16px; font-weight: 600; color: #8696a0; border-bottom: 3px solid transparent; }
.wa-info-tabs button.on { color: #111b21; border-bottom-color: #00a884; }
.wa-info-tab { min-height: 9rem; }
.wa-info-none { text-align: center; color: #8696a0; font-size: 16px; padding: 3rem 1rem; }
.wa-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.wa-info-grid > button { aspect-ratio: 1; background: #e9edef; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; color: #fff; }
.wa-info-grid img { width: 100%; height: 100%; object-fit: cover; }
.wa-info-vid { background: #3b4a54 !important; flex-direction: column; gap: .2rem; font-size: 12px; }
.wa-info-item { display: block; width: 100%; padding: .65rem 1rem; border-top: 1px solid #f0f2f5; color: #111b21; }
.wa-info-item:first-child { border-top: 0; }
.wa-info-meta { display: block; font-size: 12px; color: #667781; }
.wa-info-file { display: flex; align-items: center; gap: .75rem; }
.wa-info-fico { width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: #e2463d; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-info-link { color: #027eb5; font-size: 14px; }
html.dark .wa-info { background: #0b141a; }
html.dark .wa-info-name, html.dark .wa-info-idv, html.dark .wa-info-line, html.dark .wa-info-item, html.dark .wa-info-tabs button.on { color: #e9edef; }
html.dark .wa-info-sub, html.dark .wa-info-label, html.dark .wa-info-line small, html.dark .wa-info-meta { color: #8696a0; }
html.dark .wa-info-sq, html.dark .wa-info-card { background: #1f2c34; box-shadow: none; }
html.dark .wa-info-sq:active { background: #2a3942; }
html.dark .wa-info-line + .wa-info-line, html.dark .wa-info-more, html.dark .wa-info-tabs, html.dark .wa-info-item { border-color: #2a3942; }
html.dark .wa-info-danger, html.dark .wa-info-danger small { color: #f15c6d; }
html.dark input[type="checkbox"].wa-switch { background: #3b4a54; }
html.dark input[type="checkbox"].wa-switch:checked { background: #00a884; }
html.dark .wa-info-grid > button { background: #2a3942; }
html.dark .wa-info-link { color: #53bdeb; }
/* Список чатов в стиле WhatsApp: круглые аватары, строка — имя, время (у непрочитанных — зелёное), последнее сообщение */
.wa-list { background: #fff; }
.wa-row { width: 100%; display: flex; align-items: center; gap: .85rem; padding: 0 .9rem; text-align: left; }
.wa-row:hover { background: #f5f6f6; }
.wa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-height: 4.5rem; border-bottom: 1px solid #e9edef; }
.wa-row:last-child .wa-row-main { border-bottom: 0; }
.wa-row-title { flex: 1; min-width: 0; font-size: 16px; color: #111b21; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-row-time { font-size: 12px; color: #667781; flex-shrink: 0; }
.wa-row-time.wa-unread { color: #1fa855; font-weight: 600; }
.wa-row-last { flex: 1; min-width: 0; font-size: 14px; color: #667781; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-ava { border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; letter-spacing: -.02em; }
#chat-head .wa-ava { margin-right: -.1rem; }
.wa-badge { min-width: 1.3rem; height: 1.3rem; border-radius: 999px; background: #25d366; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem; flex-shrink: 0; }
.wa-badge-dot { min-width: .75rem; width: .75rem; height: .75rem; padding: 0; }
.wa-fab { position: absolute; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: #00a884; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(11,20,26,.25); z-index: 5; }
.wa-fab:hover { background: #008f72; }
.wa-searchbar { background: #fff; }
.wa-ico { color: #54656f; }
.wa-ico:hover { color: #111b21; }
html.dark .wa-list, html.dark .wa-searchbar { background: #111b21 !important; }
html.dark .wa-row:hover { background: #202c33; }
html.dark .wa-row-main { border-bottom-color: #222d34; }
html.dark .wa-row-title { color: #e9edef; }
html.dark .wa-row-last, html.dark .wa-row-time { color: #8696a0; }
html.dark .wa-ico { color: #8696a0; }
html.dark #chat-body:has(.wa-list) { background-color: #111b21 !important; }
#chat-body:has(> .wa-list) { background: #fff; }
/* камера в чате: вспышка при снимке; кнопка спуска «нажимается» */
.chat-cam-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: chat-cam-flash .4s ease-out forwards; }
@keyframes chat-cam-flash { from { opacity: .85; } to { opacity: 0; } }
#chat-cam-shot { transition: transform .08s; }
#chat-cam-shot:active { transform: scale(.88); }
/* отправка файла: облачко с процентами */
.wa-up-ring { position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border-radius: 999px;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.25) 0); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.wa-up-ring > span { width: 2.9rem; height: 2.9rem; border-radius: 999px; background: rgba(11,20,26,.55); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wa-up-bar { height: 3px; background: rgba(11,20,26,.1); border-radius: 3px; margin: .35rem 0 .15rem; overflow: hidden; }
.wa-up-bar > span { display: block; height: 100%; background: #00a884; transition: width .2s; }
/* выбор сообщений: отмеченная строка подсвечена во всю ширину, шапка — режим выбора */
#chat-msgs > .wa-sel { background: rgba(0,168,132,.18); margin-left: -.75rem; margin-right: -.75rem; padding-left: .75rem; padding-right: .75rem; }
html.dark #chat-msgs > .wa-sel { background: rgba(0,168,132,.22); }
#chat-msgs .wa-b { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wa-fwd { display: flex; align-items: center; gap: .25rem; font-size: 12px; font-style: italic; color: #667781; margin-bottom: .1rem; }
html.dark .wa-fwd { color: #8696a0; }
/* свайп по сообщению: значок «ответить» / «сведения» проявляется сбоку */
.wa-swipe-ico { position: absolute; top: 50%; transform: translateY(-50%) scale(.8); width: 2rem; height: 2rem; border-radius: 999px; background: rgba(11,20,26,.08); color: #54656f; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; }
.wa-swipe-ico.on { transform: translateY(-50%) scale(1); background: #00a884; color: #fff; }
#chat-msgs { touch-action: pan-y; overflow-x: clip; }
#chat-msgs .wa-b img, #chat-msgs .wa-b video { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* сквозное шифрование: замок у имени в шапке личной переписки */
.wa-e2e { font-size: .75em; opacity: .75; }

/* ролик о сайте в справке: вертикальный, по ширине окна, не выше экрана */
.help-video { display: block; width: 100%; max-width: 360px; max-height: 70vh; margin: 0 auto; border-radius: 12px; background: #0f172a; }

/* Конференция (app-conf.js): на весь экран, плитка участников, кнопки снизу; свёрнутая — кнопка внизу экрана */
.conf-view { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; background: #0b141a; color: #e9edef; }
.conf-head { display: flex; align-items: center; gap: .5rem; padding: calc(.5rem + env(safe-area-inset-top)) .75rem .5rem; }
.conf-title { font-size: 16px; font-weight: 600; }
.conf-sub { font-size: 12px; color: #8696a0; }
.conf-hbtn { width: 2.5rem; height: 2.5rem; border-radius: 9999px; color: #e9edef; }
.conf-grid { flex: 1; min-height: 0; display: grid; gap: 6px; padding: 6px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: minmax(120px, 1fr); overflow-y: auto; }
.conf-grid[data-n="1"] { grid-template-columns: 1fr; }
.conf-grid[data-n="2"] { grid-template-columns: 1fr; }
/* ПК и телевизор (широкий и не низкий экран): плитки рядом, так они крупнее; телефон даже боком — друг под другом */
@media (min-aspect-ratio: 4/3) and (min-height: 500px) {
  .conf-grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
  .conf-grid[data-n="3"], .conf-grid[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
  .conf-grid[data-n="5"], .conf-grid[data-n="6"], .conf-grid[data-n="7"], .conf-grid[data-n="8"], .conf-grid[data-n="9"] { grid-template-columns: repeat(3, 1fr); }
  .conf-grid[data-n="10"], .conf-grid[data-n="11"], .conf-grid[data-n="12"] { grid-template-columns: repeat(4, 1fr); }
}
.conf-tile { position: relative; border-radius: 14px; overflow: hidden; background: #202c33; display: flex; align-items: center; justify-content: center; outline: 3px solid transparent; transition: outline-color .15s; }
.conf-tile.conf-speaking { outline-color: #00a884; }
.conf-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; }
/* «Видео целиком» выключено — на всю плитку (края обрезаются); показ экрана — всегда целиком */
.video-fill .conf-tile:not(.conf-screen) video { object-fit: cover; }
#call-remote { object-fit: contain; background: #000; }
.video-fill #call-remote { object-fit: cover; }
.conf-tile.conf-has-video video { display: block; }
.conf-tile.conf-screen video { object-fit: contain; background: #000; }
.conf-tile.conf-mirror video { transform: scaleX(-1); }
.conf-tile.conf-has-video .conf-ava { display: none; }
.conf-ava { width: 4.2rem; height: 4.2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: #fff; }
.conf-name { position: absolute; left: 8px; bottom: 6px; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 9999px; background: rgba(0,0,0,.55); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conf-bar { display: flex; justify-content: center; gap: .9rem; padding: .7rem .75rem calc(.9rem + env(safe-area-inset-bottom)); }
.conf-btn { width: 3.3rem; height: 3.3rem; border-radius: 9999px; background: #2a3942; color: #e9edef; font-size: 1.2rem; }
.conf-btn.conf-off { background: #e9edef; color: #0b141a; }
.conf-btn.conf-on { background: #00a884; }
.conf-bwrap { position: relative; display: inline-flex; }
.conf-caret { position: absolute; right: -.35rem; bottom: -.15rem; width: 1.45rem; height: 1.45rem; border-radius: 9999px; background: #3b4a54; color: #e9edef; font-size: .62rem; border: 2px solid #0b141a; }
.conf-q { position: absolute; right: 8px; top: 8px; display: flex; align-items: flex-end; gap: 2px; height: 12px; padding: 3px 4px; border-radius: 6px; background: rgba(0,0,0,.45); box-sizing: content-box; }
.conf-q i { display: block; width: 3px; border-radius: 1px; background: rgba(255,255,255,.3); }
.conf-q i:nth-child(1) { height: 4px; } .conf-q i:nth-child(2) { height: 8px; } .conf-q i:nth-child(3) { height: 12px; }
.conf-q-unknown { display: none; }
.conf-q-excellent i, .conf-q-good i:nth-child(-n+2) { background: #00a884; }
.conf-q-poor i:nth-child(1) { background: #f5a524; }
.conf-q-lost i:nth-child(1) { background: #ea0038; }
.conf-bad { color: #f5a524; }
@media (max-width: 420px) { .conf-bar { gap: .35rem; } .conf-btn { width: 2.85rem; height: 2.85rem; font-size: 1.05rem; } }
.conf-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .15rem 0; font-size: 13px; color: #8696a0; }
.conf-pbtn { width: 2.2rem; height: 2.2rem; border-radius: 9999px; background: #2a3942; color: #e9edef; font-size: 1.4rem; line-height: 1; }
.conf-strip { display: flex; gap: .5rem; align-items: center; overflow-x: auto; padding: .3rem .6rem; scrollbar-width: none; }
.conf-strip::-webkit-scrollbar { display: none; }
.conf-strip-n { flex: none; font-size: 12px; color: #8696a0; }
.conf-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 4.2rem; color: #e9edef; }
.conf-chip-ava { width: 2.6rem; height: 2.6rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; }
.conf-chip-name { max-width: 100%; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conf-emoji { font-size: 1.3rem; line-height: 1; }
.conf-host-acts { flex-wrap: wrap; }
#conf-list .conf-row { flex-wrap: wrap; }
/* окно поверх конференции (сессионные залы) */
.conf-sheet { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; padding: .75rem; }
.conf-sheet-box { width: min(26rem, 100%); max-height: 90%; overflow-y: auto; background: #233138; color: #e9edef; border-radius: 16px; padding: 1rem; }
.conf-input { background: #111b21; color: #e9edef; border: 1px solid #3b4a54; border-radius: 8px; padding: .4rem .5rem; font-size: 14px; width: 100%; }
@media (min-width: 640px) { .conf-sheet { align-items: center; } }
/* «Ведущий просит включить микрофон / видео» — над кнопками конференции */
.conf-ask { position: absolute; left: 50%; bottom: 6.5rem; transform: translateX(-50%); z-index: 3; width: min(22rem, calc(100% - 1.5rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 14px; background: #233138; color: #e9edef; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.conf-ask span { flex: 1 1 100%; }
.conf-reconnecting .conf-grid { opacity: .45; }
/* показ экрана у зрителей — на весь экран (app-conf.js, confFocus); нажали — без кнопок */
.conf-focused .conf-grid { padding: 0; }
.conf-focused .conf-tile { border-radius: 0; outline: none; }
.conf-focus-btn { align-self: center; margin: .3rem 0 0; padding: .3rem .8rem; border-radius: 9999px; background: #2a3942; color: #e9edef; font-size: 13px; }
.conf-immersive .conf-head, .conf-immersive .conf-bar, .conf-immersive #conf-strip, .conf-immersive #conf-pager,
.conf-immersive .conf-name, .conf-immersive .conf-q { display: none !important; }
/* без кнопок остаётся одна — «Все участники», в углу поверх показа */
.conf-immersive .conf-focus-btn { position: absolute; top: calc(.6rem + env(safe-area-inset-top, 0px)); right: .6rem; z-index: 3; margin: 0; background: rgba(42,57,66,.85); }
.conf-reconnecting #conf-count { color: #f5a524; }
.conf-bar { position: relative; }
.conf-pop { position: absolute; bottom: calc(100% + .3rem); left: 50%; transform: translateX(-50%); z-index: 2; background: #233138; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.conf-reacts { display: flex; gap: .2rem; padding: .35rem; }
.conf-reacts.hidden, .conf-menu.hidden { display: none; }
.conf-mhead { padding: .55rem 1rem .15rem; font-size: 12px; color: #8696a0; }
.conf-react-pick { font-size: 1.7rem; width: 2.9rem; height: 2.9rem; border-radius: 12px; }
.conf-react-pick:active { background: #2a3942; }
.conf-menu { width: min(20rem, calc(100% - 1.5rem)); padding: .35rem 0; }
#conf-devs { max-height: min(32rem, 70vh); overflow-y: auto; }
.conf-mitem { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem 1rem; text-align: left; font-size: 14px; color: #e9edef; }
.conf-mitem i { width: 1.1rem; color: #8696a0; }
.conf-mitem.conf-on i { color: #00a884; }
.conf-mitem.conf-on::after { content: "✓"; margin-left: auto; color: #00a884; font-weight: 700; }
.conf-vidctl { display: flex; align-items: center; gap: .6rem; padding: .3rem .8rem; }
.conf-vidctl.hidden { display: none; }
.conf-stopbtn { flex: none; padding: .45rem .9rem; border-radius: 9999px; background: #e11d48; color: #fff; font-weight: 600; font-size: .9rem; }
.conf-tile, .conf-chip { position: relative; }
.conf-react { position: absolute; left: 50%; bottom: 30%; font-size: 2.4rem; pointer-events: none; animation: conf-react 3s ease-out forwards; z-index: 3; }
.conf-chip .conf-react { font-size: 1.5rem; bottom: 40%; }
@keyframes conf-react { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 12% { transform: translate(-50%, -10%) scale(1.1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -120%) scale(1); opacity: 0; } }
/* «Выйти» — красная, со значком двери (не трубка) */
.conf-btn.conf-leave { background: #ea0038; color: #fff; }
.conf-list { position: absolute; right: .75rem; top: calc(3.6rem + env(safe-area-inset-top)); width: min(22rem, calc(100% - 1.5rem)); max-height: 60vh; overflow-y: auto; background: #233138; border-radius: 14px; padding: .4rem 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.conf-list-head { font-size: 12px; color: #8696a0; padding: .3rem .9rem; }
.conf-row { display: flex; align-items: center; gap: .4rem; padding: .45rem .9rem; font-size: 14px; }
.conf-act { font-size: 12px; font-weight: 600; padding: .25rem .55rem; border-radius: 9999px; background: #2a3942; color: #e9edef; white-space: nowrap; }
.conf-act-danger { color: #ff8a9a; }
.conf-hint { font-size: 11px; color: #8696a0; padding: .3rem .9rem .2rem; }
.conf-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 94; display: flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 9999px; background: #00a884; color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.conf-join { display: flex; align-items: center; gap: .45rem; margin: .25rem 0 .15rem; padding: .5rem .8rem; border-radius: .6rem; background: #00a884; color: #fff; font-size: 13.5px; font-weight: 600; }
.conf-join-mine { background: #017561; }
/* Связь с сервером в шапке мессенджера (app-chat.js, chatNetPaint) — строкой под названием, как в TeleGuard:
   на списке чатов всегда («В сети» / «Соединение…» / «Ожидание сети…»), в переписке — только пока связи нет */
#chat-head .wa-net { display: none; align-items: center; gap: .4rem; font-size: 12.5px; line-height: 1.25; opacity: .7; white-space: nowrap; }
#chat-head:not([data-net="ok"]) .wa-net, #chat-head.wa-head-list .wa-net { display: flex; }
.wa-net-spin { width: .85em; height: .85em; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; flex-shrink: 0; animation: boot-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wa-net-spin { animation-duration: 2.4s; } }
/* поиск в переписке (app-chat.js, chatFindShell): строка в шапке, счётчик, ↑↓; совпадения в облачках — <mark> */
.wa-find-q { background: transparent; color: inherit; border: 0; outline: none; font-size: 16px; padding: .35rem .25rem; }
.wa-find-q::placeholder { color: currentColor; opacity: .55; }
.wa-find-q::-webkit-search-cancel-button { display: none; }
.wa-find-n { font-size: 13px; opacity: .7; white-space: nowrap; }
#chat-head button:disabled { opacity: .35; }
mark.wa-find { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
mark.wa-find.wa-find-cur { background: #ffb02e; color: #111b21; }
html.dark mark.wa-find { background: rgba(255,214,10,.35); }
html.dark mark.wa-find.wa-find-cur { background: #ffb02e; color: #111b21; }