/* =========================================================================
   consultation-header.css
   -------------------------------------------------------------------------
   Аддитивный слой для нового топбара, виджетов пациента/врача, баннеров
   быстрого доступа и «bookmark lift» вкладок консультации.
   Подключается ПОСЛЕДНИМ (после style.css, design-tokens.css, responsive.css)
   — использует переменные из design-tokens.css и НЕ трогает разметку/DOM,
   которые уже управляются существующим app.js (toggleSection, changeLanguage,
   toggleTheme, openModal/closeModal и т.д.).
   ========================================================================= */

/* =========================================================================
   1. TOPBAR
   ========================================================================= */

.topbar {
    display: flex;
    padding: 10px 16px;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}
.topbar__left,
.topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar__logo {
    display: flex;
    align-items: center;
    height: 40px;
    flex-shrink: 0;
}
.topbar__logo img { height: 34px; width: auto; display: block; }
.topbar__logo-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius-sm, 6px);
    background: var(--color-primary-subtle, #EFF6FF); color: var(--color-primary, #1D4ED8);
    font-size: 17px;
}

/* ---- Patient widget ---- */
.patient-widget {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-card-sunken, var(--bg-gray));
    border: 1.5px solid var(--border-subtle, var(--border-color));
    border-radius: var(--radius-md, 10px);
    padding: 6px 14px 6px 6px;
    cursor: pointer; font-family: inherit; max-width: 300px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.patient-widget:hover { border-color: var(--border-hover, var(--accent-blue)); background: var(--surface-card, var(--surface)); box-shadow: var(--shadow-sm); }
.patient-widget__avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--color-primary-subtle, #EFF6FF); color: var(--color-primary, #1D4ED8);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.patient-widget__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.patient-widget__name { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.patient-widget__hint { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.patient-widget.is-filled .patient-widget__hint { color: var(--color-accent, var(--accent-blue)); }
.patient-widget__chevron { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }

/* ---- Theme toggle: sun/moon crossfade driven purely by [data-theme] ---- */
.theme-toggle {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border-subtle, var(--border-color));
    background: var(--surface-card-sunken, var(--bg-gray));
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; position: relative;
    transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { border-color: var(--border-hover, var(--accent-blue)); color: var(--color-primary, var(--primary-blue)); }
.theme-toggle__icon { position: absolute; transition: opacity .2s ease, transform .3s ease; }
.theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ---- Doctor widget (реиспользует .auth-panel button, но со своим видом) ---- */
.auth-panel .doctor-widget.doctor-widget {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-card-sunken, var(--bg-gray));
    border: 1.5px solid var(--border-subtle, var(--border-color));
    border-radius: var(--radius-md, 10px);
    padding: 6px 12px 6px 6px;
    height: auto;
    cursor: pointer; font-family: inherit; max-width: 260px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.auth-panel .doctor-widget:hover { border-color: var(--border-hover, var(--accent-blue)); background: var(--surface-card, var(--surface)); box-shadow: var(--shadow-sm); }
.doctor-widget__avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--color-accent-subtle, #F0FDFA); color: var(--color-accent, #0D9488);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.doctor-widget__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.doctor-widget__name { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.doctor-widget__badge {
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 1px 7px; border-radius: 999px; margin-top: 2px; color: #fff;
}
/* Цвета бейджей ролей заданы в style.css единым набором на 4 роли —
   здесь они намеренно НЕ переопределяются. */
.doctor-widget__chevron { color: var(--text-muted); font-size: 10px; flex-shrink: 0; }

/* style.css задаёт `.auth-panel button[onclick*="settingsModal"]:hover i`
   с бесконечным spin-анимацией — этот атрибутный селектор случайно ловит
   и наш doctor-widget (у него тот же onclick). Явно отключаем вращение
   для всех иконок внутри виджета: допустим только мягкий hover самого
   виджета (фон/тень), без анимации на аватаре/шевроне. */
.auth-panel button.doctor-widget[onclick*="settingsModal"] i,
.doctor-widget i {
    animation: none !important;
    transform: none !important;
    transition: opacity 0.15s ease, color 0.15s ease !important;
}

/* =========================================================================
   2. ACTION BANNERS
   ========================================================================= */
.action-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.action-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border-radius: var(--radius-lg, 16px); border: none; cursor: pointer;
    text-decoration: none; font-family: inherit; text-align: left;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(15,23,42,.08));
    transition: transform .18s ease, box-shadow .18s ease;
}
.action-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 10px 20px -5px rgba(15,23,42,.10)); }
.action-banner:active { transform: translateY(0); }
.action-banner__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md, 10px); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    background: rgba(255,255,255,.18); color: #fff;
}
.action-banner__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.action-banner__title { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.action-banner__subtitle { font-size: 12.5px; color: rgba(255,255,255,.85); }
.action-banner__arrow { margin-left: auto; color: rgba(255,255,255,.75); flex-shrink: 0; transition: transform .18s ease; }
.action-banner:hover .action-banner__arrow { transform: translateX(4px); }
.action-banner__soon {
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    background: rgba(255,255,255,.25); padding: 2px 6px; border-radius: 999px; margin-left: 8px;
}
.action-banner--ai { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #DB2777 100%); }
.action-banner--tg { background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%); }

/* =========================================================================
   3. МОДАЛКИ: аватар-пикер + чипы пола (переиспользуют .modal-content)
   ========================================================================= */
.avatar-picker { margin: 4px 0 20px; }
.avatar-picker__label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }

.avatar-picker__current { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.avatar-picker__preview {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
    background: var(--color-primary, var(--primary-blue));
    border: 2px solid var(--surface-card, #fff);
    box-shadow: 0 2px 8px rgba(15,23,42,.12);
    padding: 0; font-family: inherit; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}
.avatar-picker__preview:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(15,23,42,.2); }
.avatar-picker__preview:focus-visible { outline: 2px solid var(--color-primary, var(--primary-blue)); outline-offset: 2px; }
.avatar-picker__preview img { width: 100%; height: 100%; object-fit: cover; }
/* маленький бейдж-подсказка, что по аватару можно кликнуть */
.avatar-picker__preview::after {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px;
    position: absolute; bottom: -1px; right: -1px;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--surface-card, #fff); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(15,23,42,.25);
}
.avatar-picker__actions { display: flex; }
.avatar-picker__upload-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    box-sizing: border-box;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--text-secondary, var(--text-main));
    background: var(--surface-card-sunken, var(--bg-gray));
    border: 1.5px solid var(--border-default, var(--border-color));
    border-radius: var(--radius-sm, 6px);
    padding: 10px 16px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.avatar-picker__upload-btn:hover {
    border-color: var(--color-primary, var(--primary-blue));
    color: var(--color-primary, var(--primary-blue));
    background: var(--color-primary-subtle, #EFF6FF);
}

/* Сетка аватаров: свёрнута по умолчанию, раскрывается кнопкой "Выбрать
   аватар". 10 аватаров, 5 колонок => ровно 2 ряда.

   Раскрытие анимировано. display:none анимировать нельзя, поэтому сетка
   всегда grid, а сворачивается через grid-template-rows: 0fr -> 1fr —
   этот приём, в отличие от max-height, не требует угадывать высоту и
   поэтому одинаково корректен и для одного ряда, и для двух.
   visibility и pointer-events гасят клики по свёрнутой сетке. */
.avatar-picker__grid-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: grid-template-rows .26s cubic-bezier(.16, 1, .3, 1),
                opacity .2s ease, margin-top .26s ease, visibility 0s linear .26s;
}
.avatar-picker__grid-wrap.is-open {
    grid-template-rows: 1fr;
    margin-top: 4px;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: grid-template-rows .26s cubic-bezier(.16, 1, .3, 1),
                opacity .2s ease .04s, margin-top .26s ease, visibility 0s linear 0s;
}
/* Внутренний элемент обязан иметь min-height:0 и overflow:hidden — иначе
   содержимое не даст строке схлопнуться до нуля. Вертикальные padding и
   border тоже приходится убирать в свёрнутом состоянии: они не подчиняются
   min-height:0 и оставляли полосу в 30px под кнопкой аватара. */
.avatar-picker__grid-wrap > .avatar-picker__grid {
    min-height: 0;
    overflow: hidden;
    padding: 0 14px;
    border-width: 0 1px;
    transition: padding .26s cubic-bezier(.16, 1, .3, 1),
                border-width .26s cubic-bezier(.16, 1, .3, 1);
}
.avatar-picker__grid-wrap.is-open > .avatar-picker__grid {
    padding: 14px;
    border-width: 1px;
}

.avatar-picker__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 14px;
    justify-items: center;
    background: var(--surface-card-sunken, var(--bg-gray));
    border: 1px solid var(--border-subtle, var(--border-color));
    border-radius: var(--radius-md, 10px);
}
.avatar-picker__grid button {
    width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; padding: 0;
    transition: transform .15s ease;
}
.avatar-picker__grid button:hover { transform: scale(1.08); }
.avatar-picker__grid button.selected { border-color: var(--color-primary, var(--primary-blue)); box-shadow: 0 0 0 2px var(--color-primary-subtle, rgba(37,99,235,.15)); }

@media (prefers-reduced-motion: reduce) {
    .avatar-picker__grid-wrap,
    .avatar-picker__grid-wrap.is-open,
    .avatar-picker__grid-wrap > .avatar-picker__grid { transition-duration: .01ms; }
}

.chip-group { display: flex; gap: 8px; }
.chip {
    display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--radius-sm, 6px);
    border: 1.5px solid var(--border-default, var(--border-color)); color: var(--text-secondary, var(--text-main));
    font-size: 13px; font-weight: 600; cursor: pointer; flex: 1; justify-content: center; text-transform: none;
}
input[name="patient-gender"]:checked + .chip { background: var(--color-primary-subtle, #EFF6FF); border-color: var(--color-primary, var(--primary-blue)); color: var(--color-primary, var(--primary-blue)); }

/* =========================================================================
   4a. МОДАЛКА "НАСТРОЙКА ПОЛЬЗОВАТЕЛЯ" — компактный редизайн
   ========================================================================= */

/* Компактная рамка модалки: нижний паддинг убран — свой отступ даёт
   футер (обычный блок в конце потока, без flex/sticky-трюков, которые
   на мобильных вызывали сжатие body и наезд полей на футер). */
.settings-modal-content {
    padding: 22px 26px 0 !important;
    border-radius: 16px !important;
}

/* Шапка: заголовок + тумблер темы на одной строке, с гарантированным
   запасом справа, чтобы крестик закрытия никогда не наезжал на кнопку
   темы (была визуальная каша из ТЗ). */
.settings-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding-right: 38px;
    margin-bottom: 14px; padding-bottom: 13px;
    border-bottom: 1px solid var(--border-color);
}
.settings-modal__header h2 {
    margin: 0; color: var(--primary-blue); font-size: 1.3em;
    display: flex; align-items: center; gap: 9px;
}
.settings-modal__header .theme-toggle-btn { margin: 0; flex-shrink: 0; }

/* Тумблер темы и кнопка админ-панели стоят в одной группе справа.
   На узком экране группа переносится под заголовок целиком, а не
   разрывается по одной кнопке. */
.settings-modal__header-actions {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; flex-shrink: 0;
}
@media (max-width: 560px) {
    .settings-modal__header-actions { width: 100%; }
    .settings-modal__header-actions > * { flex: 1 1 auto; justify-content: center; }
}

.settings-logo-avatar-row {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 15px;
    background: var(--bg-gray); border: 1px dashed var(--border-color); border-radius: 12px;
}

/* ---- Demo-баннер для гостей ---- */
.settings-demo-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px;
    background: linear-gradient(135deg, var(--color-primary-subtle, #EFF6FF) 0%, var(--color-accent-subtle, #F0FDFA) 100%);
    border: 1.5px solid var(--color-primary, var(--primary-blue));
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.settings-demo-banner__text { display: flex; align-items: flex-start; gap: 10px; min-width: 220px; flex: 1; }
.settings-demo-banner__text > i { color: var(--color-primary, var(--primary-blue)); font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.settings-demo-banner__text strong { display: block; font-size: 14px; color: var(--text-main); margin-bottom: 2px; }
.settings-demo-banner__text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.settings-demo-banner__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.settings-demo-banner__login,
button.settings-demo-banner__login {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    width: auto !important; /* переопределяет .btn-primary{width:100%} */
    padding: 11px 22px !important; font-weight: 700; font-size: 13.5px;
    background: linear-gradient(135deg,#2563eb,#6366f1) !important; color: #fff; border: none; border-radius: 10px !important;
    cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.settings-demo-banner__login:hover,
button.settings-demo-banner__login:hover { background: linear-gradient(135deg, #1d4fd8, #5457e5) !important; }
.settings-demo-banner__register {
    font-size: 12px; color: var(--color-primary, var(--primary-blue));
    text-decoration: underline; cursor: pointer; background: none; border: none;
}

/* ---- Заблокированные для гостя функции: приглушены, некликабельны,
   с бейджем-замком в углу блока ---- */
.locked-feature {
    position: relative;
    opacity: .55;
    pointer-events: none;
    user-select: none;
}
.locked-feature::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--surface-card, #fff);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(15,23,42,.18);
    z-index: 2;
}

/* ---- Компактная 2-колоночная форма (используется и в настройках, и
   в профиле пациента), схлопывается в 1 колонку на мобильных ---- */
.form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
@media (max-width: 640px) {
    .form-grid-2col { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- Футер: "Сохранить" + "Выход" в самом низу модалки, обычным
   потоком (без position:sticky — залипание перекрывало поля выше). ---- */
.settings-modal__footer {
    background: var(--surface);
    margin: 16px -26px 0;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 760px) {
    .settings-modal__footer { padding-bottom: calc(22px + var(--safe-bottom, 0px)); }
}
.settings-modal__footer button.btn-primary {
    width: 100%; padding: 13px; font-size: 1.02em; font-weight: bold;
    background: linear-gradient(135deg, #2563eb, #6366f1); border: none; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, .2);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.settings-modal__footer button.btn-primary:hover { background: linear-gradient(135deg, #1d4fd8, #5457e5); }
.settings-logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; font-family: inherit; font-size: 0.95em; font-weight: 700;
    color: var(--color-danger-text, #991B1B);
    background: var(--color-danger-subtle, #FEF2F2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.settings-logout-btn:hover {
    background: var(--color-danger, #DC2626);
    color: #fff;
}

/* =========================================================================
   4. ВКЛАДКИ — BOOKMARK / FOLDER TABS
   -------------------------------------------------------------------------
   Убираем «плавающую стеклянную карточку» у .section-tabs (фон/блюр/паддинг/
   тень оригинала) — вкладки должны сидеть прямо на рабочей панели, как
   бумажные закладки в блокноте, а не как отдельный виджет над ней.
   Файл подключён после style.css — при равной специфичности выигрывают
   правила ниже по каскаду; там, где в оригинале стоит !important
   (box-shadow/transform), бьём тем же !important.
   ========================================================================= */

/* #app-real-content задаёт inline gap:15px между #tabs-container и
   #content-container — из-за него «ножка»-заполнитель физически не
   может дотянуться до панели. Обнуляем именно этот зазор (у контейнера
   ровно два ребёнка — вкладки и панель, других соседей не задеваем). */
#app-real-content { gap: 0 !important; }

.section-tabs#tabs-container {
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 6px 4px 0;
    box-shadow: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.section-button {
    position: relative;
    background: var(--bg-gray);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-bottom-width: 1.5px;
    border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
    transform: translateY(0) !important;
    box-shadow: none !important;
    /* Единственная анимация на вкладках — подъём при hover. Всё остальное
       (цвет/фон/бордер) меняется мгновенно, без transition. */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ИСТОЧНИК "АНИМАЦИИ УВЕЛИЧЕНИЯ": в style.css у `.section-button::before`
   при :hover иконка раскрывается (max-width 0→24px, margin-right 0→8px,
   scale .5→1). Кнопка из-за этого физически становится шире (~+23px) и
   расталкивает соседние вкладки вправо — это и читается как масштабирование.
   Отменяем показ иконки при наведении полностью: она остаётся ТОЛЬКО у
   активной вкладки. Ширина кнопки на hover больше не меняется вообще —
   единственное, что происходит при наведении, это подъём вверх. */
.section-button:hover::before {
    opacity: 0 !important;
    max-width: 0 !important;
    margin-right: 0 !important;
    transform: scale(0.5) !important;
}
/* У активной вкладки иконка видна постоянно (статично, без анимации) */
.section-button.active::before {
    opacity: 1 !important;
    max-width: 24px !important;
    margin-right: 8px !important;
    transform: scale(1) !important;
}
.section-button::before,
.section-button:hover::before,
.section-button.active::before {
    transition: none !important;
}

/* gap filler: НЕ меняет размер — высота фиксирована (4px) всегда,
   меняется только видимость (opacity). Геометрически элемент — часть
   того же бокса, что и сама кнопка, поэтому при подъёме кнопки на -4px
   он ровно настолько же уезжает вверх и его нижний край landится точно
   на верхнюю границу панели (при hover он невидим лишь в состоянии
   покоя — просто не виден на фоне страницы, а не "вырастает"). Opacity
   синхронизирован по длительности/кривой с transform кнопки: это не
   отдельный визуальный эффект, а условие того же самого подъёма — без
   синхронного исчезновения при уходе курсора на миг открывался бы
   зазор, пока таб ещё не долетел обратно вниз. Никакого изменения
   размера/масштаба здесь нет. */
.section-button:not(.active)::after {
    content: "";
    position: absolute;
    top: 100%; left: -1px; right: -1px;
    height: 4px;
    background: var(--surface);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.section-button:not(.active):hover::after { opacity: 1; }

/* Неактивная вкладка при наведении: приподнимается, как выступающая
   закладка; цвет/фон/бордер меняются мгновенно (не входят в transition) */
.section-button:not(.active):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 14px -4px rgba(15,23,42,.18), 0 2px 6px -2px rgba(15,23,42,.10) !important;
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--border-color);
}
[data-theme="dark"] .section-button:not(.active):hover {
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.35) !important;
}

/* Активная вкладка: цвет фона в точности как у рабочей панели, нижняя
   граница «растворена» (совпадает по цвету + утоплена на 1px) — таб и
   панель читаются как единая цельная карточка, без шва */
.section-button.active {
    background: var(--surface);
    color: var(--primary-blue);
    border-color: var(--border-color);
    border-bottom-color: var(--surface);
    margin-bottom: -1px;
    z-index: 3;
    transform: translateY(0) !important;
    box-shadow: none !important;
}
.section-button.active:hover {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Рабочая панель: убираем скругление обоих верхних углов — иначе виден
   зазор-полумесяц между прямым краем вкладки и скруглённым краем панели */
.text-area-container.active {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* =========================================================================
   5. RESPONSIVE
   ========================================================================= */
@media (max-width: 760px) {
    .topbar__inner { flex-direction: column; align-items: stretch; }
    .topbar__left, .topbar__right { justify-content: space-between; }
    .patient-widget, .auth-panel .doctor-widget { max-width: none; flex: 1; }
    .action-banners { grid-template-columns: 1fr; }

    /* Настройки пользователя: логотип клиники + аватар врача больше не
       умещаются рядом (inline display:flex из разметки) — переносим их
       друг под друга, иначе модалка растягивается шире экрана. */
    .settings-logo-avatar-row { flex-direction: column !important; align-items: stretch !important; }
    .avatar-picker__current { justify-content: center; text-align: center; }

    /* Аккуратный, предсказуемый порядок блоков справа при переносе */
    .topbar__right { flex-wrap: wrap; gap: 8px; }
    .topbar__right .lang-switch { order: 1; }
    .topbar__right .theme-toggle { order: 2; }
    .topbar__right .auth-panel { order: 3; }

    /* Вкладки: горизонтальный touch-scroll без переноса строк и без
       видимой полосы прокрутки (перекрывает style.css flex-wrap:wrap) */
    .section-tabs#tabs-container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .section-tabs#tabs-container::-webkit-scrollbar { display: none; height: 0; }
    .section-tabs#tabs-container .section-button { flex-shrink: 0; white-space: nowrap; }
}