/* ─── Дизайн-токены ─────────────────────────────────────────────── Единая палитра и шкалы. Новые стили используют var(--…), а не литералы: так тему можно поменять в одном месте. */ :root { color-scheme: light; /* Поверхности и границы */ --color-surface: #f7f8fa; --color-surface-raised: #fff; --color-surface-muted: #eef1f5; --color-surface-hover: #e6eaef; --color-border: #dde2e8; --color-border-strong: #c7d0dc; /* Текст */ --color-text: #20242b; --color-text-muted: #5f6b7a; --color-text-soft: #7b8794; /* Акцент */ --color-accent: #1769e0; --color-accent-hover: #0f56bd; --color-accent-soft: #e9f1ff; --color-accent-border: #cddffb; --color-focus-ring: rgb(23 105 224 / 18%); /* Статусы: цвет, плашка, текст на плашке, рамка плашки */ --color-success: #10b981; --color-success-hover: #0e9b6f; --color-success-soft: #d1fae5; --color-success-text: #065f46; --color-success-border: #bbf7d0; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-warning-text: #92400e; --color-warning-border: #fde68a; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2; --color-danger-text: #991b1b; --color-danger-border: #fecaca; --color-info-soft: #dbeafe; --color-info-text: #1e40af; /* Отступы */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* Скругления и тени */ --radius-2: 8px; --radius-3: 12px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgb(16 24 40 / 6%); --shadow-2: 0 16px 40px rgb(16 24 40 / 10%); /* Типографика */ --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ─── Гаммы кабинета ──────────────────────────────────────────────── Одна на установку, выбирается в «Настройки → Оформление» и попадает в data-theme на (utils/theme.py). Каждый блок переопределяет ВЕСЬ набор --color-*: забытый токен — синяя деталь на кремовом экране, сторож в tests/test_theme.py это ловит. Значения по умолчанию (:root выше) — «Спокойная синяя», чтобы работающие кабинеты не сменили вид сами. Кнопки в пастельных гаммах притемнены: белая надпись на мягкой терракоте не добирала контраста 4,5. Мягкими остались фон и плашки. */ /* Синяя повторена отдельным блоком ради образцов на странице настроек: образец «Спокойная синяя» внутри кремового кабинета иначе брал бы кремовые токены со страницы и выглядел как выбранная гамма. */ [data-theme="blue"] { --color-surface: #f7f8fa; --color-surface-raised: #fff; --color-surface-muted: #eef1f5; --color-surface-hover: #e6eaef; --color-border: #dde2e8; --color-border-strong: #c7d0dc; --color-text: #20242b; --color-text-muted: #5f6b7a; --color-text-soft: #7b8794; --color-accent: #1769e0; --color-accent-hover: #0f56bd; --color-accent-soft: #e9f1ff; --color-accent-border: #cddffb; --color-focus-ring: rgb(23 105 224 / 18%); --color-success: #10b981; --color-success-hover: #0e9b6f; --color-success-soft: #d1fae5; --color-success-text: #065f46; --color-success-border: #bbf7d0; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-warning-text: #92400e; --color-warning-border: #fde68a; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2; --color-danger-text: #991b1b; --color-danger-border: #fecaca; --color-info-soft: #dbeafe; --color-info-text: #1e40af; } [data-theme="paper"] { --color-surface: #fbf6ec; --color-surface-raised: #fff; --color-surface-muted: #f3ede0; --color-surface-hover: #ece4d3; --color-border: #e6dccb; --color-border-strong: #d3c6b0; --color-text: #33291f; --color-text-muted: #6b5c4a; --color-text-soft: #8a7a66; --color-accent: #b04a38; --color-accent-hover: #9c3f30; --color-accent-soft: #fbe9e3; --color-accent-border: #efcfc5; --color-focus-ring: rgb(176 74 56 / 22%); --color-success: #3f8f63; --color-success-hover: #337a54; --color-success-soft: #e2f1e7; --color-success-text: #245c3d; --color-success-border: #bfe0cc; --color-warning: #c9862a; --color-warning-soft: #fbeed3; --color-warning-text: #7a4e10; --color-warning-border: #f0d59a; --color-danger: #b5352a; --color-danger-hover: #9c2d24; --color-danger-soft: #f9e3e0; --color-danger-text: #8f2a21; --color-danger-border: #efc2bb; --color-info-soft: #e9eef7; --color-info-text: #3b5a8a; } [data-theme="sage"] { --color-surface: #f3f7f4; --color-surface-raised: #fff; --color-surface-muted: #e7efe9; --color-surface-hover: #dde8e0; --color-border: #d5e2d9; --color-border-strong: #bfd0c5; --color-text: #22302a; --color-text-muted: #54685e; --color-text-soft: #6f8479; --color-accent: #276f7d; --color-accent-hover: #1f5d6a; --color-accent-soft: #e0f0f2; --color-accent-border: #bfdde2; --color-focus-ring: rgb(39 111 125 / 22%); --color-success: #3f8f63; --color-success-hover: #337a54; --color-success-soft: #e2f1e7; --color-success-text: #245c3d; --color-success-border: #bfe0cc; --color-warning: #b98a2a; --color-warning-soft: #f7efd6; --color-warning-text: #6e4f0f; --color-warning-border: #e8d59c; --color-danger: #b5352a; --color-danger-hover: #9c2d24; --color-danger-soft: #f9e3e0; --color-danger-text: #8f2a21; --color-danger-border: #efc2bb; --color-info-soft: #e0ecf1; --color-info-text: #2f5b74; } [data-theme="lavender"] { --color-surface: #f7f5fa; --color-surface-raised: #fff; --color-surface-muted: #efecf6; --color-surface-hover: #e6e1f0; --color-border: #e0daec; --color-border-strong: #cbc2dd; --color-text: #2c2735; --color-text-muted: #5f5a6e; --color-text-soft: #7a7488; --color-accent: #6350a3; --color-accent-hover: #5c4a99; --color-accent-soft: #ece7f8; --color-accent-border: #d5cbee; --color-focus-ring: rgb(99 80 163 / 22%); --color-success: #3f8f63; --color-success-hover: #337a54; --color-success-soft: #e2f1e7; --color-success-text: #245c3d; --color-success-border: #bfe0cc; --color-warning: #b07a2f; --color-warning-soft: #f6ecd9; --color-warning-text: #6b4a12; --color-warning-border: #e6d2a4; --color-danger: #b5352a; --color-danger-hover: #9c2d24; --color-danger-soft: #f9e3e0; --color-danger-text: #8f2a21; --color-danger-border: #efc2bb; --color-info-soft: #e8e4f3; --color-info-text: #4b3f7a; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family-base); color: var(--color-text); background: var(--color-surface); } .container { max-width: 900px; margin: 0 auto; padding: 24px 16px; } .auth-container { max-width: 400px; margin: 80px auto; padding: 32px; background: var(--color-surface-raised); border-radius: 12px; box-shadow: var(--shadow-1); } .auth-container h1 { margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--color-text-muted); } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; font-size: 15px; font-family: inherit; /* Без явных цветов поле берёт умолчания браузера — чёрный на белом при любой гамме. */ color: var(--color-text); background: var(--color-surface-raised); } .form-group input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus-ring); } .btn { display: inline-block; padding: 10px 24px; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; text-decoration: none; } .btn-primary { background: var(--color-accent); color: #fff; width: 100%; text-align: center; margin-top: 8px; } .btn-primary:hover { background: var(--color-accent-hover); } .btn-secondary { background: var(--color-surface-muted); color: var(--color-text); } .btn-danger { background: var(--color-danger); color: #fff; } .btn-secondary:hover { background: var(--color-surface-hover); } .btn-danger:hover { background: var(--color-danger-hover); } .btn-link { background: none; color: var(--color-accent); padding: 0; text-decoration: underline; cursor: pointer; } .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .alert-error { background: var(--color-danger-soft); color: var(--color-danger-text); } .alert-success { background: var(--color-success-soft); color: var(--color-success-text); } .alert-info { background: var(--color-info-soft); color: var(--color-info-text); } /* Панель: основной контейнер контента. Граница вместо тяжёлой тени — спокойнее и лучше читается на светлом фоне. */ .card { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-1); } /* Шапка панели: название слева, уточнение справа */ .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .panel-head h2, .panel-head h3 { font-size: 15px; font-weight: 700; color: var(--color-text); } .panel-meta { font-size: 12px; font-weight: 700; color: var(--color-text-soft); } /* Карточка-ссылка (список чатов): подъём при наведении вместо inline-JS */ .card-link { display: block; text-decoration: none; color: inherit; } .card-link .card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .card-link:hover .card { border-color: var(--color-border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); } /* Шапка таблицы внутри панели */ .card > .table thead th { background: var(--color-surface); } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .page-header h1 { font-size: 24px; } .day-group { margin-bottom: 32px; } .day-group h3 { font-size: 16px; color: var(--color-text-muted); margin-bottom: 12px; text-transform: capitalize; } .slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .slot-card { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; text-align: center; text-decoration: none; color: var(--color-text); transition: border-color 0.2s; } .slot-card:hover { border-color: var(--color-accent); } .slot-time { font-size: 20px; font-weight: 600; } .slot-duration { font-size: 12px; color: var(--color-text-soft); margin-top: 4px; } .muted { color: var(--color-text-muted); font-size: 13px; } .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .badge-pending { background: var(--color-warning-soft); color: var(--color-warning-text); } .badge-confirmed { background: var(--color-success-soft); color: var(--color-success-text); } .badge-cancelled { background: var(--color-danger-soft); color: var(--color-danger-text); } .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); } .table th { font-size: 13px; color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; } .chat-messages { display: flex; flex-direction: column; gap: 8px; } .chat-msg { display: flex; } .chat-msg--own { justify-content: flex-end; } .chat-msg--other { justify-content: flex-start; } .chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; } .chat-msg--own .chat-bubble { background: var(--color-accent); color: #fff; border-bottom-right-radius: 4px; } .chat-msg--other .chat-bubble { background: var(--color-surface-muted); color: var(--color-text); border-bottom-left-radius: 4px; } .chat-text { margin: 0 0 4px 0; white-space: pre-wrap; word-break: break-word; } .chat-time { font-size: 11px; opacity: 0.65; display: block; text-align: right; margin-top: 4px; } .chat-file { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; text-decoration: none; margin-top: 4px; font-size: 13px; } .chat-msg--own .chat-file { background: rgba(255,255,255,0.2); color: #fff; } .chat-msg--other .chat-file { background: var(--color-border); color: var(--color-text); } .chat-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } /* Inline image in chat bubble */ .chat-img { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; cursor: pointer; margin-top: 4px; } /* Delete button (doctor only) */ .chat-delete-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.15); border: none; border-radius: 6px; cursor: pointer; font-size: 14px; padding: 2px 5px; opacity: 0; transition: opacity 0.15s; } .chat-bubble:hover .chat-delete-btn { opacity: 1; } @media (hover: none) { .chat-delete-btn { opacity: 1; } } /* Paste preview strip */ .paste-preview { display: none; align-items: center; gap: 8px; padding: 8px 0 4px 0; flex-wrap: wrap; } .paste-preview.has-image { display: flex; } .paste-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; } .paste-preview__remove { background: var(--color-danger); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; margin-left: -28px; margin-top: -70px; align-self: flex-start; } /* Green chat button + unread badge */ .btn-success { background: var(--color-success); color: #fff; } .btn-success:hover { background: var(--color-success-hover); } .badge-unread { background: var(--color-danger); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; font-weight: 600; display: inline-block; } /* Clients table — card layout on mobile */ @media (max-width: 640px) { .table-clients thead { display: none; } .table-clients, .table-clients tbody, .table-clients tr, .table-clients td { display: block; width: 100%; } .table-clients tr { border-bottom: 2px solid var(--color-border); padding: 8px 0; } .table-clients td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 6px 16px; text-align: right; } .table-clients td::before { content: attr(data-label); font-weight: 600; color: var(--color-text-muted); text-align: left; } } /* Notes editor — user-resizable height (drag bottom edge) */ .notes-col .CodeMirror { resize: vertical; overflow: auto !important; min-height: 200px; } /* Doctor chat + notes side-by-side */ .chat-notes-layout { display: flex; gap: 16px; align-items: flex-start; } .chat-col { flex: 1 1 60%; min-width: 0; } .notes-col { flex: 1 1 40%; min-width: 0; } @media (max-width: 900px) { .chat-notes-layout { display: block; } .notes-col { display: none; } } /* Appointment row urgency tiers */ .row-now { background: var(--color-danger-soft); } .row-today { background: var(--color-warning-soft); } .row-future { background: var(--color-surface-raised); } .row-past { background: var(--color-surface); color: var(--color-text-soft); } .row-pending td:first-child { border-left: 3px solid var(--color-warning); } /* Video call overlay */ /* Плавающее окно, а не панель во всю высоту: панель растягивалась на весь экран по вертикали, и кадр 16:9 плавал в чёрных полях сверху и снизу. Размер окна задаёт сам кадр — JS ставит ширину и высоту по тому, что реально приходит от собеседника, поэтому полей не остаётся вовсе. Окно можно перетащить: по умолчанию оно у правого края, где у кабинета пустует место, но при узком окне браузера его сдвигают куда удобно. */ :root { --call-width: 400px; } #call-overlay { position: fixed; right: 16px; bottom: 16px; width: var(--call-width); aspect-ratio: 16 / 9; /* до первого кадра */ z-index: 1100; overflow: hidden; background: #0b1220; flex-direction: column; /* фикс: тёмный слой поверх видео, гамме не подчиняется */ align-items: center; justify-content: center; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 48px rgba(2, 6, 23, 0.45); cursor: grab; touch-action: none; /* иначе перетаскивание пролистает страницу */ } #call-overlay.call-dragging { cursor: grabbing; user-select: none; } /* На весь экран — по кнопке. Размеры окна стоят инлайном, поэтому здесь нужен !important: иначе в полноэкранном режиме осталось бы окошко 400 px посреди чёрного экрана. */ /* Плавающее окно поверх других приложений умеют не все браузеры: во встроенном браузере мессенджера его нет вовсе. Кнопка скрыта классом — JS снимает его, когда браузер подтвердил поддержку. Инлайновый стиль для этого не годится: пустое значение не побеждает правило отсюда. */ .call-key-hidden { display: none !important; } #call-overlay:fullscreen { width: 100% !important; height: 100% !important; inset: 0; border-radius: 0; border: none; aspect-ratio: auto; } /* Телефон: перетаскивать нечего и некуда — звонок занимает весь экран. Именно ВИДИМЫЙ экран: на Android адресная строка не уменьшает раскладочный, и при `bottom: 0` панель управления оказывалась под браузерной панелью — владелец прислал снимок, где кнопок звонка не видно (2026-09-04). Высоту в --callvh пишет callviewport.js по visualViewport. */ @media (max-width: 900px) { #call-overlay { inset: 0 0 auto 0; width: auto; aspect-ratio: auto; height: 100vh; height: 100dvh; height: var(--callvh, 100vh); border-radius: 0; border: none; cursor: default; } /* Клавиатура смещает видимую область вниз, а окно приклеено к верху раскладочного экрана — сдвигаем следом. Свёрнутое окошко считает своё место от низа и этой поправки не берёт. */ #call-overlay:not(.call-mini) { transform: translateY(var(--callvtop, 0px)); } } #remote-video { width: 100%; height: 100%; object-fit: contain; background: #000; } /* фикс: тёмный слой поверх видео, гамме не подчиняется */ #local-video { position: absolute; right: 10px; bottom: 62px; width: 28%; max-width: 160px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.5); /* Тоже без обрезки: превью обязано показывать ровно то, что уходит собеседнику, иначе снимать себя приходится вслепую. */ object-fit: contain; max-height: 30%; background: #111; z-index: 1101; /* фикс: тёмный слой поверх видео, гамме не подчиняется */ } .call-controls { position: absolute; bottom: 10px; left: 0; right: 0; padding: 0 6px; display: flex; justify-content: center; align-items: flex-end; gap: 6px; z-index: 1101; } /* Кнопка — колонка: круг с иконкой и слово под ним. Слово остаётся и в выключенном состоянии: за состояние отвечает круг, а не подпись. */ .call-key { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 44px; padding: 0; border: none; background: none; cursor: pointer; color: #fff; font-family: inherit; /* Колонка держит ширину своей подписи: сжатие под окно заставляло слова соседних кнопок наезжать друг на друга. */ flex-shrink: 0; } .call-key-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; transition: background .12s, color .12s, box-shadow .12s; } .call-key-btn svg { width: 52%; height: 52%; display: block; } .call-key-label { font-size: 11px; line-height: 1.2; color: rgba(255,255,255,0.85); white-space: nowrap; } .call-key:hover .call-key-btn { background: rgba(255,255,255,0.3); } /* Переключатели: включено — светлый круг с тёмной иконкой, выключено — красная обводка и перечёркнутая иконка. Две иконки лежат в разметке, показывается одна. */ .call-key-toggle .call-key-btn { background: #ffffff; color: #20242b; } /* фикс: тёмный слой поверх видео, гамме не подчиняется */ .call-key-toggle:hover .call-key-btn { background: #eef1f5; } /* фикс: тёмный слой поверх видео, гамме не подчиняется */ .call-key-toggle .ico-off { display: none; } .call-key-toggle.call-btn-off .ico-on { display: none; } .call-key-toggle.call-btn-off .ico-off { display: block; } .call-key-toggle.call-btn-off .call-key-btn { background: rgba(220,38,38,0.18); color: #fca5a5; box-shadow: inset 0 0 0 2px #dc2626; /* фикс: тёмный слой поверх видео, гамме не подчиняется */ } .call-key-toggle.call-btn-off:hover .call-key-btn { background: rgba(220,38,38,0.28); } /* фикс: тёмный слой поверх видео, гамме не подчиняется */ /* Демонстрация экрана идёт — круг залит акцентом. */ .call-key.call-btn-active .call-key-btn { background: var(--color-accent); color: #fff; } .call-key.call-btn-active:hover .call-key-btn { background: var(--color-accent-hover); } /* «Завершить» — широкая, со словом, не спутать. Выровнена по кругам: снизу такой же отступ, как подпись у соседей. */ .call-end { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; margin-bottom: calc(11px * 1.2 + 6px); border: none; border-radius: 999px; background: var(--color-danger); color: #fff; font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .call-end svg { width: 20px; height: 20px; display: block; } .call-end:hover { background: var(--color-danger-hover); } /* На телефоне круги крупнее, а «во весь экран» не нужна: развёрнутый звонок и так занимает весь экран. */ @media (max-width: 900px) { .call-controls { bottom: 20px; gap: 6px; } .call-key-btn { width: 52px; height: 52px; } .call-end { height: 52px; } .call-key-desktop { display: none; } #local-video { right: 16px; bottom: 110px; width: 160px; max-height: none; } } /* ─── Проверка камеры и микрофона ───────────────────────────────── Окно проверки, которое открывают ДО звонка. Оно намеренно короткое: своё изображение, полоска уровня звука, подсказка при отказе и списки устройств, если их несколько. Врач открывает его между приёмами, а не в ту минуту, когда клиент уже ждёт на линии. */ .devcheck { position: fixed; left: 0; top: 0; width: 100%; z-index: 1300; /* Та же мерка, что у окна звонка: при inset: 0 кнопка «Готово» уходила под адресную строку Android вместе с низом окна. */ height: 100vh; height: 100dvh; height: var(--callvh, 100vh); transform: translateY(var(--callvtop, 0px)); background: rgb(16 24 40 / 55%); align-items: center; justify-content: center; padding: var(--space-4); /* display задаёт скрипт (none/flex): окно закрыто до первого нажатия */ } .devcheck-box { background: var(--color-surface-raised); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-6); width: 100%; max-width: 460px; /* На невысоком экране телефона окно должно прокручиваться, иначе кнопка «Готово» оказывается за краем экрана. Процент — от видимой высоты, которую задаёт .devcheck, а не от раскладочной. */ max-height: 92%; overflow-y: auto; } .devcheck-title { font-size: 17px; margin-bottom: var(--space-2); } .devcheck-note { font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--space-3); } .devcheck-ok { color: var(--color-success); font-weight: 600; } .devcheck-video { width: 100%; aspect-ratio: 16 / 9; background: #0b1220; /* фикс: тёмный слой поверх видео, гамме не подчиняется */ border-radius: var(--radius-2); margin-bottom: var(--space-3); /* Зеркально — как в зеркале: непривычная «правильная» картинка сбивает, человек начинает поправлять камеру не в ту сторону. */ /* Без обрезки: проверка обязана показывать ровно тот кадр, который увидит собеседник, — иначе она не проверка. */ transform: scaleX(-1); object-fit: contain; } .devcheck-error { font-size: 13px; line-height: 1.45; color: var(--color-danger-text); background: var(--color-danger-soft); border: 1px solid var(--color-danger-border); border-radius: var(--radius-2); padding: var(--space-3); margin-bottom: var(--space-3); } .devcheck-meter { height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-muted); margin-bottom: var(--space-4); } .devcheck-meter > div { height: 100%; width: 0; background: var(--color-success); } .devcheck-select { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--space-3); } .devcheck-select select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; font-family: inherit; border: 1px solid var(--color-border-strong); border-radius: var(--radius-2); } .devcheck-done { width: 100%; margin-top: var(--space-2); } .devcheck-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--color-accent); text-decoration: underline; white-space: nowrap; } /* ─── Оболочка кабинета: боковое меню + топбар ─────────────────── */ .app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; background: var(--color-surface); } .app-sidebar { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4); border-right: 1px solid var(--color-border); background: var(--color-surface-raised); } .app-brand { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 800; color: var(--color-text); } .app-logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-2); background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; } .app-nav { display: flex; flex-direction: column; gap: var(--space-1); } .app-nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-2); color: var(--color-text-muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .app-nav-link:hover { background: var(--color-surface); color: var(--color-text); } .app-nav-link.is-active { background: var(--color-accent-soft); border-color: var(--color-accent-border); color: var(--color-accent); } .app-nav-link svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .app-main { display: flex; flex-direction: column; min-width: 0; } .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); } .app-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); } .app-topbar-actions { display: flex; align-items: center; gap: var(--space-3); } .app-user { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text-muted); } .app-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-text); color: #fff; font-size: 11px; font-weight: 800; } /* min-width:0 + max-width на детях: у input есть собственная минимальная ширина (~20 символов), из-за неё узкий экран уезжает вбок */ .app-content { width: 100%; max-width: 1140px; min-width: 0; padding: var(--space-6); } /* Две колонки: основная + боковая. На узком экране сворачивается в одну. */ .split-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; } .app-content > * { max-width: 100%; } .app-content input, .app-content textarea, .app-content select { min-width: 0; } /* Планшет/мобильный: меню превращается в горизонтальную прокручиваемую полосу */ @media (max-width: 860px) { .app-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; } .app-sidebar { flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); /* min-width:0 обязателен: без него grid-элемент распирает страницу вместо того, чтобы прокручивать меню внутри себя */ min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-right: 0; border-bottom: 1px solid var(--color-border); } .app-nav-link { flex: 0 0 auto; } .app-brand-text { display: none; } .app-nav { flex-direction: row; gap: var(--space-2); } .app-nav-link { min-height: 36px; font-size: 13px; } .app-topbar { padding: var(--space-3) var(--space-4); } .app-user-name { display: none; } .app-content { padding: var(--space-4); } .split-2 { grid-template-columns: minmax(0, 1fr); } /* Широкие таблицы прокручиваются внутри себя, а не ломают ширину страницы. .table-clients исключена — у неё свой карточный вид на мобильном. */ .app-content .table:not(.table-clients) { display: block; width: 100%; overflow-x: auto; } } /* ─── Страница «Проверка»: светофор ────────────────────────────── */ /* Кнопка в шапке панели: .btn-primary растянут на всю ширину для форм, здесь он должен занимать только своё место */ .btn-inline { width: auto; margin-top: 0; padding: 8px 16px; font-size: 13px; flex: none; } .hc-banner { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-3); margin-bottom: var(--space-4); } .hc-banner-text { flex: 1; min-width: 0; } .hc-note { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; } .hc-dot { width: 14px; height: 14px; border-radius: 999px; flex: none; } .hc-dot-sm { width: 10px; height: 10px; margin-top: 5px; } /* Цвет несёт смысл, поэтому дублируем его фоном и текстом статуса */ .hc-ok .hc-dot { background: var(--color-success); } .hc-warn .hc-dot { background: var(--color-warning); } .hc-fail .hc-dot { background: var(--color-danger); } .hc-banner.hc-ok { background: var(--color-success-soft); border-color: var(--color-success-border); } .hc-banner.hc-warn { background: var(--color-warning-soft); border-color: var(--color-warning-border); } .hc-banner.hc-fail { background: var(--color-danger-soft); border-color: var(--color-danger-border); } /* Пульс только у зелёного: у жёлтого и красного внимание держит сам цвет, а движение рядом с проблемой мешает читать */ .hc-banner.hc-ok .hc-dot { box-shadow: 0 0 0 0 var(--color-success-border); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 45%, transparent); animation: hc-pulse 2.4s ease-out infinite; } @keyframes hc-pulse { 70%, 100% { box-shadow: 0 0 0 8px transparent; } } @media (prefers-reduced-motion: reduce) { .hc-banner.hc-ok .hc-dot { animation: none; } } /* Счётчик статусов: сразу видно соотношение, не пересчитывая строки */ .hc-tally { display: flex; gap: var(--space-2); flex: none; } .hc-tally-item { min-width: 30px; text-align: center; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .hc-tally-item.hc-ok { background: var(--color-success-soft); color: var(--color-success-text); } .hc-tally-item.hc-warn { background: var(--color-warning-soft); color: var(--color-warning-text); } .hc-tally-item.hc-fail { background: var(--color-danger-soft); color: var(--color-danger-text); } .hc-list { display: flex; flex-direction: column; } .hc-row { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-2); } .hc-row:last-child { border-bottom: 0; } .hc-row:hover { background: var(--color-surface); } .hc-body { min-width: 0; flex: 1; } /* Имя и итог в одну строку: список читается как таблица, а не как абзацы */ .hc-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; } .hc-name { font-size: 14px; font-weight: 700; color: var(--color-text); } .hc-summary { font-size: 14px; color: var(--color-text-muted); } .hc-hint { font-size: 13px; color: var(--color-text-soft); margin-top: 4px; } .hc-detail { font-size: 12px; color: var(--color-text-soft); margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; } /* Шкала запаса (диск, срок сертификата, свежесть бэкапа) */ .hc-meter { margin-top: var(--space-2); max-width: 460px; } .hc-meter-track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-muted); overflow: hidden; } .hc-meter-fill { height: 100%; border-radius: var(--radius-pill); transition: width .5s ease; } .hc-ok .hc-meter-fill { background: var(--color-success); background: linear-gradient(90deg, color-mix(in srgb, var(--color-success) 65%, #fff), var(--color-success)); } .hc-warn .hc-meter-fill { background: var(--color-warning); background: linear-gradient(90deg, color-mix(in srgb, var(--color-warning) 65%, #fff), var(--color-warning)); } .hc-fail .hc-meter-fill { background: var(--color-danger); background: linear-gradient(90deg, color-mix(in srgb, var(--color-danger) 65%, #fff), var(--color-danger)); } .hc-meter-labels { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12px; color: var(--color-text-soft); margin-top: 4px; font-variant-numeric: tabular-nums; } /* Заглушка на время проверки: полосы вместо прыгающего слова «проверяю…» */ .hc-skeleton { display: none; flex-direction: column; gap: var(--space-3); } .htmx-request .hc-skeleton, .htmx-request.hc-skeleton { display: flex; } .hc-skeleton-row { height: 34px; border-radius: var(--radius-2); background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-surface-raised) 37%, var(--color-surface-muted) 63%); background-size: 400% 100%; animation: hc-shimmer 1.3s ease-in-out infinite; } @keyframes hc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .hc-skeleton-row { animation: none; } } /* ─── Сведения о сервере ────────────────────────────────────────── */ .si-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .si-group { border: 1px solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-4); background: var(--color-surface); } .si-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-soft); margin-bottom: var(--space-3); } .si-facts { display: flex; flex-direction: column; gap: 6px; } /* Подпись слева, значение справа моноширинным: столбец значений выравнивается сам собой, а длинные строки переносятся, не ломая сетку */ .si-fact { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; font-size: 13px; } .si-fact dt { color: var(--color-text-muted); flex: none; } .si-fact dd { color: var(--color-text); text-align: right; min-width: 0; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .si-fact-bad dd { color: var(--color-danger); font-weight: 700; } .hc-mail-status { font-size: 13px; margin-bottom: var(--space-3); } .hc-mail-status:empty { margin-bottom: 0; } /* Индикатор ожидания HTMX */ .htmx-indicator { opacity: 0; transition: opacity .15s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ─── Панель редактора заметок врача ───────────────────────────── */ /* EasyMDE рисует кнопки значками Font Awesome, а его в проекте нет — панель всегда была из пустых кнопок. Библиотеку ради восьми значков не тянем: буквы даём текстом, остальное — SVG-масками. Цвет наследуется от кнопки, внешних файлов и шрифтов не требуется. */ .editor-toolbar button i.fa { font-style: normal; display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; } .editor-toolbar button.bold i.fa::before { content: "B"; font-weight: 800; font-size: 15px; } .editor-toolbar button.italic i.fa::before { content: "I"; font-size: 15px; font-family: Georgia, "Times New Roman", serif; font-style: italic; } .editor-toolbar button.heading i.fa::before { content: "H"; font-weight: 800; font-size: 15px; } .editor-toolbar button.unordered-list i.fa, .editor-toolbar button.ordered-list i.fa, .editor-toolbar button.preview i.fa, .editor-toolbar button.side-by-side i.fa, .editor-toolbar button.fullscreen i.fa { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } .editor-toolbar button.unordered-list i.fa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='2' cy='4' r='1.5'/%3E%3Ccircle cx='2' cy='8' r='1.5'/%3E%3Ccircle cx='2' cy='12' r='1.5'/%3E%3Crect x='6' y='3' width='10' height='2' rx='1'/%3E%3Crect x='6' y='7' width='10' height='2' rx='1'/%3E%3Crect x='6' y='11' width='10' height='2' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='2' cy='4' r='1.5'/%3E%3Ccircle cx='2' cy='8' r='1.5'/%3E%3Ccircle cx='2' cy='12' r='1.5'/%3E%3Crect x='6' y='3' width='10' height='2' rx='1'/%3E%3Crect x='6' y='7' width='10' height='2' rx='1'/%3E%3Crect x='6' y='11' width='10' height='2' rx='1'/%3E%3C/svg%3E"); } .editor-toolbar button.ordered-list i.fa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='0' y='6' font-size='6' font-family='sans-serif'%3E1%3C/text%3E%3Ctext x='0' y='10.5' font-size='6' font-family='sans-serif'%3E2%3C/text%3E%3Ctext x='0' y='15' font-size='6' font-family='sans-serif'%3E3%3C/text%3E%3Crect x='6' y='3' width='10' height='2' rx='1'/%3E%3Crect x='6' y='7' width='10' height='2' rx='1'/%3E%3Crect x='6' y='11' width='10' height='2' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='0' y='6' font-size='6' font-family='sans-serif'%3E1%3C/text%3E%3Ctext x='0' y='10.5' font-size='6' font-family='sans-serif'%3E2%3C/text%3E%3Ctext x='0' y='15' font-size='6' font-family='sans-serif'%3E3%3C/text%3E%3Crect x='6' y='3' width='10' height='2' rx='1'/%3E%3Crect x='6' y='7' width='10' height='2' rx='1'/%3E%3Crect x='6' y='11' width='10' height='2' rx='1'/%3E%3C/svg%3E"); } .editor-toolbar button.preview i.fa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8s2.5-4 6.5-4 6.5 4 6.5 4-2.5 4-6.5 4S1.5 8 1.5 8z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8s2.5-4 6.5-4 6.5 4 6.5 4-2.5 4-6.5 4S1.5 8 1.5 8z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E"); } .editor-toolbar button.side-by-side i.fa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1'/%3E%3Cpath d='M8 2.5v11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1'/%3E%3Cpath d='M8 2.5v11'/%3E%3C/svg%3E"); } .editor-toolbar button.fullscreen i.fa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5H1.5V6M10 1.5h4.5V6M6 14.5H1.5V10M10 14.5h4.5V10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5H1.5V6M10 1.5h4.5V6M6 14.5H1.5V10M10 14.5h4.5V10'/%3E%3C/svg%3E"); } /* Раскладка «список + форма» перестраивается в одну колонку раньше, чем ломается: на 1200px таблица пользователей с полями правки уже не помещается рядом с формой добавления шириной 340px. */ @media (max-width: 1200px) { .split-2 { grid-template-columns: minmax(0, 1fr); } } /* ─── Кабинет пациента: закладки картотеки ─────────────────────── */ /* Заголовок и переключатель — одно и то же: два ярлыка всегда на одном месте, активный «выходит вперёд» и сливается с листом под собой. Пользователь видит, где он, поэтому отдельная кнопка «назад» не нужна. */ .pnav { display: flex; gap: 4px; margin: var(--space-4) 0 0; padding: 0 0 0 6px; border-bottom: 1px solid var(--color-border); position: relative; z-index: 1; } .pnav-item { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px 11px; font-size: clamp(14px, 3.9vw, 15px); font-weight: 600; text-decoration: none; color: var(--color-text-muted); white-space: nowrap; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-2) var(--radius-2) 0 0; margin-bottom: -1px; /* ярлык налезает на линию папки */ transition: background .15s ease, color .15s ease; } .pnav-item:hover { color: var(--color-text); background: var(--color-surface-hover); } /* Активная закладка светлее, выше и без нижней границы — как язычок, переходящий в сам лист картотеки */ .pnav-item.is-active { background: var(--color-surface-raised); color: var(--color-text); border-bottom: 1px solid var(--color-surface-raised); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 -1px 2px rgb(16 24 40 / 4%); } .pnav-badge { background: var(--color-danger); color: #fff; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* Лист, к которому крепятся закладки */ .pnav-sheet { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-3) var(--radius-3); padding: var(--space-6) clamp(14px, 4vw, var(--space-6)); margin-bottom: var(--space-6); } /* Строка звонка: кто на связи и сама кнопка. Кнопка стояла в ряду закладок и на телефоне уезжала за правый край вместе со ссылкой «Проверить камеру» (снимок владельца 2026-09-04). Здесь она во всю ширину листа, а строка переносится: при нехватке места кнопка опускается, а не исчезает. */ .call-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px clamp(12px, 4vw, 16px); border-bottom: 1px solid var(--color-border); } /* Подпись занимает остаток строки и переносится внутри себя: с обычным flex-basis длинное «не в сети — звонок возможен…» выталкивало кнопку на третью строку, а лист съедал место у ленты сообщений. */ .call-bar > .call-status { flex: 1 1 0; min-width: 0; } .call-bar .call-cta { margin-left: auto; } /* call.js оборачивает кнопку и ссылку проверки устройств в .devcheck-row. Втроём с подписью они не помещаются ни на одном телефоне, поэтому обёртка занимает свою строку целиком: ссылка слева, кнопка справа. Растягивать саму ссылку нельзя — нажимаемой стала бы вся пустая полоса над лентой, а нажатие включает камеру. */ .call-bar .devcheck-row { flex: 1 0 100%; display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-start; gap: 8px 12px; } /* На странице специалиста строка идёт отдельным блоком, а не шапкой листа. */ .call-bar--plain { padding-left: 0; padding-right: 0; padding-bottom: 14px; border-bottom: none; } .call-status { font-size: 13px; color: var(--color-text-soft); display: flex; align-items: center; gap: 8px; } /* Пустая подпись не занимает места, но остаётся в дереве доступности: блок с display:none чтение с экрана не объявляет, и первое сообщение («Специалист онлайн») прошло бы мимо. */ .call-status:empty { visibility: hidden; height: 0; } /* Точка состояния: зелёная — собеседник онлайн, серая — нет, жёлтая — звоним. */ .call-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-border-strong); } .call-status[data-state="online"] { color: var(--color-text); } /* Ошибки и ожидание — основным цветом: «Нет связи с сервером» бледным 13px давало 3,7–4,5 на белом; бледной остаётся только «не в сети». */ .call-status[data-state="error"], .call-status[data-state="warn"], .call-status[data-state="calling"] { color: var(--color-text); } .call-status[data-state="online"]::before { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 18%, transparent); } .call-status[data-state="calling"]::before { background: var(--color-warning); animation: call-blink 1s infinite; } .call-status[data-state="warn"]::before { background: var(--color-warning); } .call-status[data-state="error"]::before { background: var(--color-danger); } @keyframes call-blink { 50% { opacity: .3; } } .call-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; margin-top: 0; font-size: 14px; padding: 9px 16px; flex: none; } .call-cta:disabled { opacity: .55; cursor: not-allowed; } .btn:disabled { opacity: .55; cursor: not-allowed; } /* Карточка записи целиком нажимается: ссылка растягивается на всю карточку псевдоэлементом, поэтому вложенных ссылок не возникает и разметка остаётся корректной. Кнопка отмены поднята над этим слоем. */ .appt-card { position: relative; } .appt-card:hover { border-color: var(--color-border-strong); } .appt-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .appt-link { text-decoration: none; color: inherit; } .appt-card .appt-above { position: relative; z-index: 1; } .appt-card:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Разделитель дат в переписке: и читать удобнее, и есть куда прокручивать при переходе из карточки записи. */ .chat-day { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); color: var(--color-text-soft); font-size: 12px; text-transform: lowercase; } .chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--color-border); } .chat-day.is-target { color: var(--color-accent); font-weight: 700; } .chat-day.is-target::before, .chat-day.is-target::after { background: var(--color-accent-soft); } /* ─── Недостающие записи DNS на странице «Проверка» ──────────────── */ .dns-todo { margin-top: var(--space-6); } .dns-todo-head h3 { font-size: 16px; margin: 0 0 4px; } .dns-todo-head p { font-size: 13px; margin: 0 0 var(--space-4); } .dns-rec { border: 1px solid var(--color-border); border-radius: var(--radius-3); padding: 14px 16px; margin-bottom: 10px; background: var(--color-surface-raised); } .dns-rec-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .dns-rec-title { font-weight: 600; } .dns-rec-where { font-size: 12px; color: var(--color-text-soft); } .dns-rec-why { font-size: 13px; color: var(--color-text-muted); margin: 2px 0 10px; } .dns-rec-note { font-size: 12px; color: var(--color-text-soft); margin-top: 8px; } .dns-rec-missing { font-size: 13px; color: var(--color-text-muted); background: var(--color-surface-muted); border-radius: var(--radius-2); padding: 10px 12px; } /* Сетка «Тип / Имя / Значение»: на телефоне подписи встают над значениями */ .dns-rec-fields { display: grid; grid-template-columns: 88px 1fr; gap: 6px 12px; margin: 0; } .dns-rec-fields dt { font-size: 12px; color: var(--color-text-soft); } .dns-rec-fields dd { margin: 0; min-width: 0; } @media (max-width: 520px) { .dns-rec-fields { grid-template-columns: 1fr; gap: 2px; } .dns-rec-fields dd { margin-bottom: 8px; } } .dns-rec-fields code { display: block; font-size: 12px; background: var(--color-surface-muted); border-radius: var(--radius-2); padding: 7px 10px; /* Ключ DKIM — одна строка без пробелов: без принудительного переноса она растянула бы страницу далеко за край экрана. */ overflow-wrap: anywhere; word-break: break-all; } .dns-copy { cursor: pointer; transition: background .15s ease; } .dns-copy:hover { background: var(--color-accent-soft); } .dns-copy.is-copied { background: var(--color-success-soft); } .dns-copy.is-copied::after { content: " скопировано"; color: var(--color-text-soft); } /* Буфер недоступен — текст выделен, остаётся нажать Ctrl+C. Молчание в этом месте выглядело бы как «кнопка не работает». */ .dns-copy.is-selected { background: var(--color-accent-soft); } .dns-copy.is-selected::after { content: " выделено — нажмите Ctrl+C"; color: var(--color-text-soft); } .dns-val { max-height: 7.5em; overflow-y: auto; } /* ─── Страница специалиста: что осталось заполнить ───────────────── */ .setup-left { background: var(--color-warning-soft); border: 1px solid var(--color-warning-border); border-radius: var(--radius-3); padding: 12px 16px; margin-bottom: var(--space-4); font-size: 14px; } .setup-why { font-size: 12px; color: var(--color-text-soft); margin: 2px 0 8px; } .setup-tag { font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); padding: 2px 8px; margin-left: 8px; vertical-align: middle; } /* Заготовка опаснее пустоты: пустое поле видно сразу, а заводской текст выглядит настоящим и уезжает клиентам как есть. Поэтому цвет тревожный. */ .setup-tag-factory { background: var(--color-warning-soft); color: var(--color-warning-text); } .setup-tag-empty { background: var(--color-surface-muted); color: var(--color-text-muted); } .setup-tag-ok { background: var(--color-success-soft); color: var(--color-success-text); } .setup-photo { display: block; max-width: 180px; max-height: 220px; object-fit: contain; background: var(--color-accent-soft); border-radius: var(--radius-3); margin-top: 10px; } /* Подсказка о новых сообщениях, когда человек читает старую переписку. Уводить его вниз силой нельзя, но и промолчать неправильно. */ .chat-newpill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 5; cursor: pointer; background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius-pill); padding: 7px 16px; font-size: 13px; font-weight: 600; font-family: inherit; box-shadow: 0 6px 18px rgb(16 24 40 / 18%); } .chat-newpill[hidden] { display: none; } /* ─── Календарь слотов: занятость дня ────────────────────────────── */ /* Врач: «цвет точек свободных и записанных почти одинаков, и число мелкое». Зелёный разведён с синим по светлоте, размер поднят с 10 до 12 px. */ .day-counts { position: relative; z-index: 2; text-align: right; font-size: 12px; font-weight: 600; line-height: 1.25; display: flex; gap: 6px; justify-content: flex-end; } .c-free { color: var(--color-accent); } /* свободные — цветом кнопок */ .c-busy { color: var(--color-success-text); } /* записанные — зелёный текста, не кнопки: 2,5 на белом */ /* Низ клетки: числа, под ними полоски. Раньше полоски держались за дно абсолютом, а счётчики стояли там же по потоку — числа ложились на кубики. Теперь у них общая колонка, и каждому достаётся своя строка. */ .day-foot { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* Полоски: одна на слот, занятые закрашены. Видно и сколько всего, и сколько занято, — цифры при этом остаются на месте. */ .day-fill { position: absolute; inset: auto 0 0 0; z-index: 1; } /* Полоски — обычная строка низа. Абсолют остаётся только заливке: она фон всей клетки, а не элемент её низа. */ .day-fill--bricks { position: static; display: flex; gap: 2px; } .day-fill--bricks span { flex: 1; height: 6px; border-radius: 2px; background: var(--color-accent-soft); } .day-fill--bricks span.is-busy { background: var(--color-accent); } /* Заливка доли: проще полосок, но три из шести и один из двух выглядят одинаково — поэтому это не вид по умолчанию. */ .day-fill--fill { inset: 0; } .day-fill--fill i { position: absolute; bottom: 0; width: 100%; background: var(--color-accent-soft); } /* ─── Выбор вида календаря образцами ─────────────────────────────── */ /* Из названий «полоски» и «заливка» не понять, как это выглядит: приходилось сохранять настройки и идти смотреть. Поэтому образец. */ .viewpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 720px) { .viewpick { grid-template-columns: 1fr; } } .viewpick-item { display: block; cursor: pointer; margin: 0; } /* Сам переключатель скрыт, но доступен с клавиатуры: рамку рисуем по его состоянию, а не подменяем разметку картинкой. */ .viewpick-item input { position: absolute; opacity: 0; width: 0; height: 0; } .viewpick-card { display: block; height: 100%; padding: 12px; border: 2px solid var(--color-border); border-radius: var(--radius-3); background: var(--color-surface-raised); transition: border-color .15s, background .15s; } .viewpick-item:hover .viewpick-card { border-color: var(--color-accent-border); } .viewpick-item input:checked + .viewpick-card { border-color: var(--color-accent); background: var(--color-accent-soft); } .viewpick-item input:focus-visible + .viewpick-card { outline: 2px solid var(--color-accent); outline-offset: 2px; } .viewpick-name { display: block; font-size: 13px; font-weight: 600; margin-top: 10px; } .viewpick-note { display: block; font-size: 12px; color: var(--color-text-soft); margin-top: 2px; } /* Уменьшенная копия клетки календаря. Классы содержимого — настоящие, поэтому образец меняется вместе с календарём. */ .viewpick-demo { display: flex; gap: 4px; } .vp-day { position: relative; overflow: hidden; flex: 1; height: 54px; padding: 4px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); display: flex; flex-direction: column; justify-content: space-between; } .vp-num { position: relative; z-index: 2; font-size: 11px; color: var(--color-text-muted); } .vp-day .day-counts { font-size: 11px; gap: 3px; } .vp-day .day-foot { gap: 2px; } /* ── Просмотр картинок из переписки ───────────────────────────────── Открывается поверх страницы, а не в новой вкладке: уход со страницы на телефоне уводил вкладку со звонком в фон и обрывал идущий приём. */ .imgview { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(15, 20, 30, .94); flex-direction: column; } .imgview.is-open { display: flex; } body.imgview-lock { overflow: hidden; } .imgview-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #e8eef8; font-size: 14px; flex: none; } /* фикс: тёмный слой поверх видео, гамме не подчиняется */ .imgview-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imgview-scale { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; opacity: .75; } .imgview-bar button, .imgview-open { background: rgba(255, 255, 255, .12); color: #e8eef8; border: 0; border-radius: 8px; /* фикс: тёмный слой поверх видео, гамме не подчиняется */ padding: 8px 13px; font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none; } .imgview-fit, .imgview-open { font-size: 14px; } .imgview-bar button:hover:not(:disabled), .imgview-open:hover { background: rgba(255, 255, 255, .22); } /* Нажатие без последствий читается как поломка, поэтому предел виден. */ .imgview-bar button:disabled { opacity: .35; cursor: default; } .imgview-stage { flex: 1; display: grid; place-items: center; overflow: hidden; /* Свои жесты: браузерное масштабирование страницы здесь мешает */ touch-action: none; } .imgview-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; transition: transform .1s ease-out; } @media (max-width: 700px) { /* На телефоне «отдельно» — это и есть та самая новая вкладка, из-за которой погибал звонок. Убираем, чтобы не звать в ловушку. */ .imgview-open { display: none; } .imgview-fit { display: none; } } /* ── Свёрнутый звонок ──────────────────────────────────────────────── Окошко с собеседником над перепиской: чат под ним полностью рабочий. !important — потому что развёрнутое окно на столе размечено инлайном (layoutCall), и без него свёрнутое осталось бы прежнего размера. */ #call-overlay.call-mini { /* Место по умолчанию — правый ВЕРХНИЙ угол видимой части. Раньше окошко стояло в правом нижнем, ровно поверх кнопки «Отправить»: на телефоне написать сообщение во время звонка было нечем (отзыв владельца 2026-09-09, воспроизведено на стенде — окно 231…363 × 624…800 накрывало кнопку 220…342 × 605…642). Сверху оно закрывает только часть ленты, а её можно прокрутить. --callvtop/--callvgap пишет callviewport.js: на Android раскладочный экран больше видимого, и без поправок окно уезжает под панель браузера или под адресную строку. */ inset: calc(12px + var(--callvtop, 0px)) 12px auto auto !important; left: auto !important; bottom: auto !important; width: 132px !important; height: 176px !important; aspect-ratio: auto; border-radius: 12px; cursor: grab; border: 2px solid rgba(255, 255, 255, 0.45); box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45); z-index: 1150; touch-action: none; /* палец двигает окно, а не страницу */ /* Удержание пальца на iPhone поднимает лупу и системное меню — и съедает начало переноса. user-select здесь, а не только на .call-dragging: тот класс появляется уже после порога. */ -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* Окно перенесли пальцем: место задаёт JS. Инлайновые left/top не победили бы inset выше — он с !important, поэтому координаты идут переменными, а правило с !important одно и то же. */ #call-overlay.call-mini.call-mini-placed { inset: auto !important; left: var(--mini-x, 12px) !important; top: var(--mini-y, 12px) !important; } #call-overlay.call-mini #local-video, #call-overlay.call-mini .call-controls { display: none; } /* Кадр ушёл в плавающее окно операционной системы: на его месте браузер рисует чёрную заглушку, и окошко выглядит сломанным. Пишем словами, что происходит. */ #call-overlay.call-pip::after { content: "Звонок в плавающем окне"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12px; line-height: 1.3; color: #fff; background: #0b1220; /* фикс: тёмный слой поверх видео, гамме не подчиняется */ } #call-overlay.call-mini #remote-video { object-fit: cover; } @media (min-width: 901px) { /* На столе места внизу справа хватает, и переписка там не заканчивается кнопкой — оставляем привычный угол. */ #call-overlay.call-mini { inset: auto 12px calc(12px + var(--callvgap, 0px)) auto !important; top: auto !important; width: 220px !important; height: 124px !important; } #call-overlay.call-mini.call-mini-placed { inset: auto !important; left: var(--mini-x, 12px) !important; top: var(--mini-y, 12px) !important; } } /* ── Плашка встроенного браузера ────────────────────────────────────── */ .inapp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-warning-soft); border: 1px solid var(--color-warning-border); font-size: 14px; line-height: 1.45; } .inapp-text { flex: 1 1 240px; } .inapp-actions { display: flex; gap: 8px; flex-wrap: wrap; } .inapp-hint { flex-basis: 100%; font-size: 13px; color: var(--color-warning-text); word-break: break-all; } /* ── Входящий звонок ───────────────────────────────────────────────── Окно на весь экран: его нельзя не заметить, кнопки крупные — на телефоне в них надо попасть с первого раза. На столе — карточка по центру. */ .incoming { position: fixed; left: 0; top: 0; width: 100%; z-index: 1200; display: none; /* Не до низа раскладочного экрана, а до низа видимого: иначе «Принять» и «Отклонить» уходят под адресную строку Android. */ height: 100vh; height: 100dvh; height: var(--callvh, 100vh); transform: translateY(var(--callvtop, 0px)); align-items: flex-end; justify-content: center; background: rgba(15, 20, 30, .55); } .incoming-card { width: 100%; max-width: 480px; background: var(--color-surface-raised); border-radius: 20px 20px 0 0; padding: 28px 20px 24px; text-align: center; box-shadow: 0 -12px 40px rgba(2, 6, 23, .3); /* Низкий экран (телефон лёжа): карточка прокручивается, но кнопки остаются внутри окна. */ max-height: 100%; overflow-y: auto; } .incoming-ring { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; } .incoming-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; animation: incoming-pulse 1.6s ease-out infinite; } @keyframes incoming-pulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } } .incoming-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--color-text); } .incoming-who { margin: 0 0 22px; font-size: 15px; color: var(--color-text-muted); } /* На очень низком экране (телефон лёжа, разделённый экран) карточка прокручивается — кнопки при этом обязаны оставаться на виду. */ .incoming-actions { display: flex; gap: 12px; position: sticky; bottom: 0; background: var(--color-surface-raised); } .incoming-btn { flex: 1; margin: 0; padding: 14px; font-size: 16px; font-weight: 600; border-radius: 14px; } .incoming-accept { background: var(--color-success); color: #fff; } .incoming-accept:hover { background: var(--color-success-hover); } .incoming-reject { background: var(--color-surface-muted); color: var(--color-text); } .incoming-reject:hover { background: var(--color-border); } /* Порог тот же, что у звонка (max-width: 900px) и у плавающего окна в call.js (min-width: 901px): планшет не должен получать лист снизу от одного правила и полноэкранный звонок от другого. */ @media (min-width: 901px) { .incoming { align-items: center; } .incoming-card { border-radius: 20px; } } /* ─── Настройки → Оформление: образцы гамм ─────────────────────────── Образец — тот же data-theme на обёртке, поэтому он берёт настоящие токены гаммы и не разойдётся с ней при правке. Рисуется знакомое: закладки, строка «Специалист онлайн» с кнопкой, два сообщения. */ @media (min-width: 721px) { .viewpick--themes { grid-template-columns: repeat(2, 1fr); } } .theme-demo { display: block; padding: 8px 8px 9px; border-radius: 8px; background: var(--color-surface); color: var(--color-text); } .td-tabs { display: flex; gap: 3px; padding-left: 4px; } .td-tab { width: 32px; height: 9px; border-radius: 4px 4px 0 0; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-bottom: 0; } .td-tab.is-on { background: var(--color-surface-raised); } .td-sheet { display: block; padding: 6px; margin-top: -1px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 0 6px 6px 6px; } .td-line { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; } .td-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); flex: none; } .td-btn { margin-left: auto; padding: 3px 6px; border-radius: 4px; font-size: 8px; font-weight: 600; background: var(--color-accent); color: #fff; } .td-msg { display: block; height: 8px; border-radius: 5px; margin-top: 6px; } .td-msg.in { width: 62%; background: var(--color-surface-muted); } .td-msg.out { width: 44%; margin-left: auto; background: var(--color-accent); } /* ─── Редактор заметок (EasyMDE) в гамме кабинета ──────────────────── Вендорный CSS красит рамки, панель и предпросмотр своими серыми: на кремовом фоне они читались как чужой виджет. Переопределяем токенами в том же префиксе, что и остальные правки редактора. */ .notes-col .EasyMDEContainer .CodeMirror { color: var(--color-text); background: var(--color-surface-raised); border-color: var(--color-border-strong); } .notes-col .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--color-text); } .notes-col .editor-toolbar { background: var(--color-surface-raised); border-color: var(--color-border-strong); } .notes-col .editor-toolbar button { color: var(--color-text-muted); } .notes-col .editor-toolbar button:hover, .notes-col .editor-toolbar button.active { background: var(--color-surface-muted); border-color: var(--color-border-strong); color: var(--color-text); } .notes-col .editor-toolbar i.separator { border-color: var(--color-border); } .notes-col .editor-preview, .notes-col .editor-preview-side { background: var(--color-surface); color: var(--color-text); } .notes-col .editor-preview pre { background: var(--color-surface-muted); } /* ─── Страница «Звонки» (журнал звонков) ───────────────────────────── Оценка и события красятся токенами состояний: «плохо» и обрывы — danger, «хорошо» и восстановление — success, попытки — warning. */ .calls-table { font-size: 13px; } .calls-table th, .calls-table td { padding: 8px 10px; } .calls-table .num { font-variant-numeric: tabular-nums; } .call-grade { font-weight: 600; } .call-grade--good { color: var(--color-success-text); } .call-grade--ok { color: var(--color-warning-text); } .call-grade--bad { color: var(--color-danger-text); } .call-grade--unknown { color: var(--color-text-soft); } .call-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; } .call-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; font-size: 13px; margin-bottom: 4px; } .call-side { background: var(--color-surface); border-radius: 8px; padding: 10px 12px; color: var(--color-text-muted); } .call-side b { color: var(--color-text); display: block; margin-bottom: 4px; } .call-h4 { font-size: 14px; margin: 16px 0 6px; } .call-timeline small { color: var(--color-text-soft); } .call-ev { font-weight: 600; } .call-ev--disconnected, .call-ev--failed, .call-ev--restart-fail, .call-ev--call-failed, .call-ev--media-error, .call-ev--aborted { color: var(--color-danger-text); } .call-ev--connected, .call-ev--restart-ok, .call-ev--accept { color: var(--color-success-text); } .call-ev--restart-begin, .call-ev--keyframe, .call-ev--disconnected-soft { color: var(--color-warning-text); } .call-chart { display: block; width: 100%; max-width: 720px; height: auto; margin-bottom: 4px; } .call-axis { stroke: var(--color-border-strong); stroke-width: 1; } .call-tick { font-size: 10px; fill: var(--color-text-soft); } .call-tick--doctor { fill: var(--color-accent); } .call-tick--patient { fill: var(--color-success-text); } .call-line { fill: none; stroke-width: 2; stroke-linejoin: round; } .call-line--doctor { stroke: var(--color-accent); } .call-line--patient { stroke: var(--color-success-text); }