@import '_content/BathDream.Modules.Messenger.BlazorComponents/BathDream.Modules.Messenger.BlazorComponents.bundle.scp.css';

/* /Shared/MainLayout.razor.rz.scp.css */
/* Разметка страницы переписки.

   Здесь раньше лежал кусок стандартного шаблона Blazor: боковое меню, «верхняя строка»
   и правило `.page { flex-direction: row }` для экранов шире 640 пикселей. Разметки под
   меню и строку в проекте нет, а вот правило действовало — и на любом обычном экране
   шапка вставала СЛЕВА от переписки узким столбцом, а сам чат съезжал вправо. Это и
   выглядело «странной шапкой». Правило убрано, осталось только то, что реально нужно.

   Высоту окна и `flex: 1` для содержимого задаёт общий styles.css — здесь не дублируем,
   иначе два файла спорят за одно и то же. */

main[b-s3yhik8pjf] {
    /* Список чатов и переписка прокручиваются внутри себя, а не всей страницей. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

main[b-s3yhik8pjf] >  * {
    flex: 1;
    min-height: 0;
}
/* /Shared/NotificationInstructionDialog.razor.rz.scp.css */
::depp .mud-dialog-content > img[b-wfduqasvol] {
    max-height: 300px;
    margin-bottom: 1rem;
}
/* /Shared/Notifications.razor.rz.scp.css */
/* Подсказка «включите уведомления».

   Было: полоса во всю ширину, текст прижат к левому краю, действие — к правому,
   между ними пустое поле в пол-экрана, а крестик вплотную к углу окна. Читалось
   как обрывок служебного сообщения, а не как аккуратная подсказка.

   Стало: карточка с отступом от краёв, скруглением и мягкой рамкой — как остальные
   карточки продукта. Текст и действие стоят рядом, а не по разным концам строки,
   крестик отделён от края. Цвета берём из палитры (--mud-palette-*), чтобы подсказка
   менялась вместе с оформлением, а не жила своей жизнью.

   Внутренние элементы — компоненты MudBlazor, до их корней собственные стили
   компонента не достают, поэтому для них нужен ::deep. */

.awi-notice[b-2dbqi9gnkf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 8px 0;
    padding: 6px 8px 6px 12px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    flex-shrink: 0;
}

.awi-notice[b-2dbqi9gnkf]  .awi-notice__icon {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.awi-notice[b-2dbqi9gnkf]  .awi-notice__text {
    /* Текст занимает столько, сколько нужно; свободное место — после действия,
       чтобы подпись и кнопка читались как одна фраза, а не как два края строки */
    flex: 0 1 auto;
    min-width: 0;
    color: var(--mud-palette-text-secondary);
}

.awi-notice[b-2dbqi9gnkf]  .awi-notice__action {
    flex: 0 0 auto;
    white-space: nowrap;
    /* Заглавные буквы у MudBlazor по умолчанию: «КАК РАЗРЕШИТЬ» кричит на весь экран */
    text-transform: none;
}

/* Пружина: отталкивает крестик к правому краю карточки */
.awi-notice[b-2dbqi9gnkf]  .awi-notice__spacer {
    flex: 1 1 auto;
}

.awi-notice[b-2dbqi9gnkf]  .awi-notice__close {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    /* На узком экране место дороже: значок убираем, отступы ужимаем */
    .awi-notice[b-2dbqi9gnkf] { margin: 6px 6px 0; padding: 4px 4px 4px 8px; gap: 6px; }
    .awi-notice[b-2dbqi9gnkf]  .awi-notice__icon { display: none; }
}