/* m3.css — общий набор Material 3 для «остальной» PWA (всё, кроме чата, почты и Диска, у которых
   свои токены: --gc-*, --ml-*, --dv-*). Префикс m3-. Разметку строит web/js/m3.js (window.M3):
   диалог, нижний лист, лист аккаунта, экран настроек, пустое состояние, снекбар, кнопки, аватар.
   Цвета и размеры — те же роли, что сняты с APK Google Drive 2.26 для driveapp.css (у приложений
   Google общая система), размеры — по спецификации M3 (dp = px). Подробно — docs/styleguide.md
   § «Material 3 для остальной PWA». Тёмной темы у PWA нет — только светлая. */

:root {
    --m3-primary: #0B57D0;
    --m3-on-primary: #fff;
    --m3-primary-container: #D3E3FD;
    --m3-on-primary-container: #041E49;
    --m3-secondary-container: #C2E7FF;
    --m3-on-secondary-container: #001D35;
    --m3-surface: #fff;
    --m3-sc-low: #F8FAFD;
    --m3-sc: #F0F4F9;
    --m3-sc-high: #E9EEF6;
    --m3-sc-highest: #DDE3EA;
    --m3-on-surface: #1F1F1F;
    --m3-on-surface-variant: #444746;
    --m3-outline: #747775;
    --m3-outline-variant: #C4C7C5;
    --m3-error: #B3261E;
    --m3-on-error: #fff;
    --m3-inverse-surface: #303030;
    --m3-inverse-on-surface: #F2F2F2;
    --m3-inverse-primary: #A8C7FA;
    --m3-scrim: rgba(0, 0, 0, .32);
    --m3-elev1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --m3-elev2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    --m3-elev3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
    --m3-ease: cubic-bezier(.2, 0, 0, 1);
    --m3-font: "Google Sans Text", "Google Sans", Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
    --m3-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── значок, разделитель ── */
.m3-i { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; display: block; }
.m3-hr { height: 1px; border: 0; margin: 8px 0; background: var(--m3-outline-variant); }

/* ── кнопки (Button: filled / tonal / outlined / text) — высота 40, скругление 20, label-large ── */
.m3-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 24px; border: 0; border-radius: 20px; background: transparent; cursor: pointer;
    font: 500 14px/20px var(--m3-font); letter-spacing: .1px; white-space: nowrap; overflow: hidden;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
/* слой состояния: 8 % цвета содержимого при наведении, 12 % при нажатии */
.m3-btn::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.m3-btn:active::before { opacity: .12; }
.m3-btn:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 2px; }
.m3-btn .m3-i { width: 18px; height: 18px; }
.m3-btn-filled { background: var(--m3-primary); color: var(--m3-on-primary); }
.m3-btn-tonal { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
.m3-btn-outlined { border: 1px solid var(--m3-outline); color: var(--m3-primary); }
.m3-btn-text { padding: 0 12px; color: var(--m3-primary); }
.m3-btn[disabled] { color: rgba(31, 31, 31, .38); pointer-events: none; box-shadow: none; }
.m3-btn-filled[disabled], .m3-btn-tonal[disabled] { background: rgba(31, 31, 31, .12); }
.m3-btn-outlined[disabled] { border-color: rgba(31, 31, 31, .12); }

/* ── аватар: номер сотрудника на цвете по хешу номера (палитра и хеш — как у чата, chat.js avatarColor) ── */
.m3-av {
    --s: 40px;
    width: var(--s); height: var(--s); border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    color: #fff; font: 500 calc(var(--s) * .42)/1 var(--m3-font); user-select: none;
}
.m3-av .m3-i { width: 60%; height: 60%; }
.m3-av-none { background: var(--m3-sc-highest); color: var(--m3-on-surface-variant); }
.m3-av-c0 { background: #e57373; } .m3-av-c1 { background: #f06292; } .m3-av-c2 { background: #ba68c8; } .m3-av-c3 { background: #9575cd; }
.m3-av-c4 { background: #7986cb; } .m3-av-c5 { background: #64b5f6; } .m3-av-c6 { background: #4fc3f7; } .m3-av-c7 { background: #4dd0e1; }
.m3-av-c8 { background: #4db6ac; } .m3-av-c9 { background: #81c784; } .m3-av-c10 { background: #aed581; } .m3-av-c11 { background: #ffd54f; }
.m3-av-c12 { background: #ffb74d; } .m3-av-c13 { background: #ff8a65; } .m3-av-c14 { background: #a1887f; } .m3-av-c15 { background: #90a4ae; }

/* ── слой поверх всего: <dialog> в top layer (выше любых z-index панелей и звонков), без него — div ── */
.m3-layer {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; overscroll-behavior: contain;
    color: var(--m3-on-surface); font-family: var(--m3-font); -webkit-tap-highlight-color: transparent;
}
.m3-layer::backdrop { background: transparent; }
.m3-layer-fb { z-index: 2147483000; }
.m3-dialog:focus, .m3-sheet:focus { outline: none; }
.m3-scrim { position: absolute; inset: 0; background: var(--m3-scrim); opacity: 0; transition: opacity .2s linear; touch-action: none; }
.m3-layer.m3-in .m3-scrim { opacity: 1; }

/* ── диалог (AlertDialog): контейнер 28, поля 24, ширина 280–560, кнопки-текст справа через 8 ── */
.m3-dialog {
    position: absolute; left: 50%; top: 50%; box-sizing: border-box;
    width: min(560px, calc(100% - 48px)); min-width: min(280px, calc(100% - 48px)); max-height: calc(100% - 48px);
    display: flex; flex-direction: column; padding: 24px; border-radius: 28px;
    background: var(--m3-sc-high); box-shadow: var(--m3-elev3);
    transform: translate(-50%, -50%) scale(.92); opacity: 0; transition: transform .2s var(--m3-ease), opacity .2s linear;
}
.m3-layer.m3-in .m3-dialog { transform: translate(-50%, -50%); opacity: 1; }
.m3-dialog-icon { display: flex; justify-content: center; margin-bottom: 16px; color: var(--m3-primary); }
.m3-dialog-t { margin: 0 0 16px; font: 400 24px/32px var(--m3-font); color: var(--m3-on-surface); overflow-wrap: anywhere; }
.m3-dialog.has-icon .m3-dialog-t { text-align: center; }
.m3-dialog-s { flex: 0 1 auto; min-height: 0; overflow-y: auto; font: 400 14px/20px var(--m3-font); letter-spacing: .25px; color: var(--m3-on-surface-variant); overflow-wrap: anywhere; }
.m3-dialog-s p { margin: 0 0 8px; }
.m3-dialog-s p:last-child { margin-bottom: 0; }
.m3-dialog-err { margin-top: 8px; font: 400 12px/16px var(--m3-font); letter-spacing: .4px; color: var(--m3-error); }
.m3-dialog-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.m3-dialog .m3-tf:first-child { margin-top: 8px; }

/* ── поле ввода (OutlinedTextField): 56, подпись на рамке ── */
.m3-tf { position: relative; display: block; margin-top: 16px; }
.m3-tf input, .m3-tf textarea {
    box-sizing: border-box; width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--m3-outline); border-radius: 4px;
    background: transparent; outline: none; font: 400 16px/24px var(--m3-font); letter-spacing: .5px; color: var(--m3-on-surface);
}
.m3-tf textarea { height: auto; min-height: 96px; padding: 16px; resize: vertical; }
.m3-tf input:focus, .m3-tf textarea:focus { border: 2px solid var(--m3-primary); padding: 0 15px; }
.m3-tf textarea:focus { padding: 15px; }
.m3-tf span {
    position: absolute; left: 12px; top: 0; transform: translateY(-50%); padding: 0 4px; background: var(--m3-sc-high);
    font: 400 12px/16px var(--m3-font); letter-spacing: .4px; color: var(--m3-on-surface-variant); pointer-events: none;
}
.m3-tf input:focus + span, .m3-tf textarea:focus + span { color: var(--m3-primary); }

/* ── нижний лист (ModalBottomSheet): верх 28, ручка 32×4, ширина до 640 ── */
.m3-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; box-sizing: border-box;
    max-width: 640px; max-height: 88%; display: flex; flex-direction: column;
    background: var(--m3-sc-low); border-radius: 28px 28px 0 0; box-shadow: var(--m3-elev1);
    padding-bottom: var(--m3-safe-b); transform: translateY(105%); transition: transform .3s var(--m3-ease);
}
.m3-layer.m3-in .m3-sheet { transform: none; }
.m3-sheet.m3-drag { transition: none; }
.m3-handle { flex-shrink: 0; display: flex; justify-content: center; padding: 22px 0 8px; border: 0; background: none; cursor: grab; touch-action: none; }
.m3-handle::before { content: ''; width: 32px; height: 4px; border-radius: 2px; background: var(--m3-on-surface-variant); opacity: .4; }
.m3-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.m3-sheet-title { padding: 0 24px 16px; font: 500 16px/24px var(--m3-font); letter-spacing: .15px; }
.m3-sheet .m3-hr { margin: 8px 0; }
/* на широком экране с якорем (аватар в шапке) — карточка под якорем, как меню аккаунта Google в браузере */
.m3-sheet.m3-pop {
    left: auto; right: auto; bottom: auto; width: 412px; max-width: calc(100% - 32px); max-height: calc(100% - 32px);
    border-radius: 28px; box-shadow: var(--m3-elev3); padding-bottom: 0;
    transform: translateY(-8px); opacity: 0; transition: transform .2s var(--m3-ease), opacity .2s linear;
}
.m3-layer.m3-in .m3-sheet.m3-pop { transform: none; opacity: 1; }
.m3-sheet.m3-pop .m3-handle { display: none; }
.m3-sheet.m3-pop .m3-sheet-body { padding: 16px 0 8px; }

/* пункт листа (как DvMenuItem / AccountSheetItem натива): от 48, значок 24 с поля 24, подпись через 24 */
.m3-mi {
    box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 24px; min-height: 48px; padding: 0 24px;
    border: 0; background: none; cursor: pointer; text-align: left; color: var(--m3-on-surface);
    font: 400 16px/24px var(--m3-font); letter-spacing: .5px;
}
.m3-mi:active { background: rgba(31, 31, 31, .12); }
.m3-mi:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: -2px; }
.m3-mi > .m3-i { color: var(--m3-on-surface-variant); }
.m3-mi-t { flex: 1; min-width: 0; padding: 12px 0; }
.m3-mi-t small { display: block; font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--m3-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-mi.danger, .m3-mi.danger > .m3-i { color: var(--m3-error); }
.m3-mi > .m3-av { --s: 32px; margin: 0 -4px; } /* аватар учётной записи — 32, но колонка текста как у значков 24 */

/* ── лист аккаунта — как AccountSheet.kt натива: аватар 40 с поля 24, имя 16 medium, подпись 14, под ними черта ── */
.m3-acct { display: flex; align-items: center; gap: 16px; padding: 0 24px 16px; }
.m3-sheet.m3-pop .m3-acct { padding-top: 8px; }
.m3-acct-t { flex: 1; min-width: 0; }
.m3-acct-n { font: 500 16px/24px var(--m3-font); letter-spacing: .15px; color: var(--m3-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-acct-e { font: 400 14px/20px var(--m3-font); letter-spacing: .25px; color: var(--m3-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-sheet .m3-acct-hr { margin: 0 0 8px; }

/* ── страница поверх раздела (M3.screen): своя прокрутка, без затемнения; вход — общая ось X M3 (сдвиг 30 + проявление) ── */
.m3-layer-screen .m3-scrim { display: none; }
.m3-screen {
    position: absolute; inset: 0; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top, 0px) 0 var(--m3-safe-b); background: var(--m3-surface); --m3-set-top: 0px;
    transform: translateX(30px); opacity: 0; transition: transform .25s var(--m3-ease), opacity .2s linear;
}
.m3-layer.m3-in .m3-screen { transform: none; opacity: 1; }
.m3-screen:focus { outline: none; }
@media (min-width: 840px) { .m3-screen > .m3-set { max-width: 720px; margin: 0 auto; } }
/* шапка страницы «Аккаунт» (M3.accountHead): аватар 72, имя 22/28, почта 14/20 — по центру, как у Google */
.m3-acct-head { display: flex; flex-direction: column; align-items: center; padding: 0 24px 24px; text-align: center; }
.m3-acct-head .m3-av { margin-bottom: 12px; }
.m3-acct-hn { font: 400 22px/28px var(--m3-font); color: var(--m3-on-surface); overflow-wrap: anywhere; }
.m3-acct-he { font: 400 14px/20px var(--m3-font); letter-spacing: .25px; color: var(--m3-on-surface-variant); overflow-wrap: anywhere; }

/* ── экран настроек: большая верхняя панель (LargeTopAppBar 152 → 64 при прокрутке) и строки ListItem ── */
.m3-set { min-height: 100%; background: var(--m3-surface); color: var(--m3-on-surface); font-family: var(--m3-font); -webkit-tap-highlight-color: transparent; }
.m3-set-bar {
    position: sticky; top: var(--m3-set-top, 0px); z-index: 2; display: flex; align-items: center; gap: 4px;
    height: 64px; padding: 0 4px; background: var(--m3-surface); transition: background .2s linear;
}
.m3-set.m3-collapsed .m3-set-bar { background: var(--m3-sc); }
.m3-set-bar .m3-ib + .m3-set-bt { padding-left: 4px; }
.m3-set-bt {
    flex: 1; min-width: 0; padding-left: 12px; font: 400 22px/28px var(--m3-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0; transition: opacity .15s linear;
}
.m3-set.m3-collapsed .m3-set-bt { opacity: 1; }
.m3-set-lt { margin: 0; padding: 24px 16px 28px; font: 400 28px/36px var(--m3-font); overflow-wrap: anywhere; }
.m3-ib {
    position: relative; width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: none; color: var(--m3-on-surface-variant); cursor: pointer;
}
.m3-ib:active { background: rgba(31, 31, 31, .12); }
.m3-ib:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: -2px; }
.m3-set-group { padding-bottom: 8px; }
.m3-set-group + .m3-set-group { border-top: 1px solid var(--m3-outline-variant); padding-top: 8px; }
/* заголовок группы — с края текста строк (56, если у строк есть значки) */
.m3-set-h { margin: 0; padding: 16px 24px 8px 16px; font: 500 14px/20px var(--m3-font); letter-spacing: .1px; color: var(--m3-primary); }
.m3-set-group.has-icons .m3-set-h { padding-left: 56px; }
/* строка (ListItem): 56 в одну строку, 72 в две; поля 16 слева и 24 справа, значок 24, зазоры 16 */
.m3-li {
    box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 24px 8px 16px;
    border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.m3-li.two { min-height: 72px; }
div.m3-li { cursor: default; }
button.m3-li:active { background: rgba(31, 31, 31, .12); }
.m3-li:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: -2px; }
.m3-li[disabled] { opacity: .38; pointer-events: none; }
.m3-li > .m3-i { color: var(--m3-on-surface-variant); }
.m3-li-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m3-li-t { font: 400 16px/24px var(--m3-font); letter-spacing: .5px; color: var(--m3-on-surface); overflow-wrap: anywhere; }
.m3-li-s { font: 400 14px/20px var(--m3-font); letter-spacing: .25px; color: var(--m3-on-surface-variant); overflow-wrap: anywhere; }
.m3-li-v { flex-shrink: 0; max-width: 40%; font: 400 14px/20px var(--m3-font); letter-spacing: .25px; color: var(--m3-on-surface-variant); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-li-trail { flex-shrink: 0; color: var(--m3-on-surface-variant); }
.m3-li.danger .m3-li-t, .m3-li.danger > .m3-i { color: var(--m3-error); }
/* строка с ползунком (M3.settings type 'slider'): подпись и значение сверху, значок по первой строке, ползунок под текстом */
.m3-li-slider { align-items: flex-start; cursor: default; }
.m3-li-head { display: flex; align-items: baseline; gap: 16px; }
.m3-li-head .m3-li-t { flex: 1; min-width: 0; }
.m3-li-head .m3-li-v { max-width: none; color: var(--m3-on-surface); font-weight: 500; }
/* Slider M3: дорожка 4 (пройденная — primary, остальная — primary-container), ручка 20, ореол 40 при нажатии/фокусе */
.m3-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 0; padding: 0; background: transparent; cursor: pointer; --p: 0%; }
.m3-slider:focus { outline: none; }
.m3-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--m3-primary) var(--p), var(--m3-primary-container) var(--p)); }
.m3-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--m3-primary); box-shadow: 0 0 0 0 rgba(11, 87, 208, .12); transition: box-shadow .15s; }
.m3-slider:active::-webkit-slider-thumb, .m3-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(11, 87, 208, .12); }
.m3-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--m3-primary-container); }
.m3-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--m3-primary); }
.m3-slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--m3-primary); }

/* ── переключатель (Switch): дорожка 52×32, ручка 16 → 24 с галочкой, 28 при нажатии ── */
.m3-switch {
    position: relative; flex-shrink: 0; box-sizing: border-box; width: 52px; height: 32px; border-radius: 16px;
    border: 2px solid var(--m3-outline); background: var(--m3-sc-highest); transition: background .2s, border-color .2s;
}
.m3-switch::after {
    content: ''; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--m3-outline); transform: translateY(-50%); transition: all .2s var(--m3-ease);
}
.m3-switch .m3-i { position: absolute; top: 50%; left: 26px; z-index: 1; width: 16px; height: 16px; margin-top: -8px; color: var(--m3-on-primary-container); opacity: 0; transition: opacity .2s; }
[aria-checked="true"] > .m3-switch, .m3-switch.on { border-color: var(--m3-primary); background: var(--m3-primary); }
[aria-checked="true"] > .m3-switch::after, .m3-switch.on::after { left: 22px; width: 24px; height: 24px; background: var(--m3-on-primary); }
[aria-checked="true"] > .m3-switch .m3-i, .m3-switch.on .m3-i { opacity: 1; }
button.m3-li:active > .m3-switch::after { width: 28px; height: 28px; left: 2px; }
button.m3-li[aria-checked="true"]:active > .m3-switch::after { left: 18px; }

/* ── пустое состояние: приглушённый значок (или иллюстрация Диска), заголовок, пояснение, действие ── */
.m3-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px; font-family: var(--m3-font); }
.m3-empty-ic { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; background: var(--m3-sc); color: var(--m3-on-surface-variant); }
.m3-empty-ic .m3-i { width: 48px; height: 48px; }
.m3-empty-art { width: 200px; height: 200px; margin-bottom: 16px; }
.m3-empty-t { max-width: 400px; margin-bottom: 4px; font: 500 16px/24px var(--m3-font); letter-spacing: .15px; color: var(--m3-on-surface); }
.m3-empty-s { max-width: 340px; font: 400 14px/20px var(--m3-font); letter-spacing: .25px; color: var(--m3-on-surface-variant); }
.m3-empty .m3-btn { margin-top: 24px; }
/* с иллюстрацией — заголовок 22, как пустые разделы Диска (driveapp.css .dv-empty-t) */
.m3-empty.art { padding-top: 40px; }
.m3-empty.art .m3-empty-t { margin-bottom: 8px; font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
/* плотный — внутри карточки или секции доски: без кружка, поля 16 */
.m3-empty.dense { padding: 16px; }
.m3-empty.dense .m3-empty-ic { width: auto; height: auto; margin-bottom: 8px; background: none; }
.m3-empty.dense .m3-empty-ic .m3-i { width: 32px; height: 32px; }
.m3-empty.dense .m3-empty-t { font-size: 14px; line-height: 20px; letter-spacing: .1px; margin-bottom: 0; }
.m3-empty.dense .m3-btn { margin-top: 12px; }

/* ── снекбар (Snackbar): тёмный, скругление 4, действие цветом inverse-primary; на телефоне — вся ширина минус 16,
   на широком окне — по тексту 344–560 (тот же вид у общего toast() в style.css) ── */
.m3-snack {
    position: fixed; left: 50%; bottom: calc(16px + var(--m3-safe-b)); z-index: 2147483646;
    box-sizing: border-box; width: max-content; min-width: min(344px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px));
    min-height: 48px; display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 16px; border-radius: 4px; background: var(--m3-inverse-surface); color: var(--m3-inverse-on-surface);
    box-shadow: var(--m3-elev3); font: 400 14px/20px var(--m3-font); letter-spacing: .25px;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: transform .2s var(--m3-ease), opacity .2s linear;
}
@media (max-width: 600px) { .m3-snack { width: calc(100vw - 32px); } }
.m3-snack.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.m3-snack-t { flex: 1; min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }
.m3-snack .m3-btn { height: 36px; padding: 0 12px; color: var(--m3-inverse-primary); }
/* FAB над снекбаром, как в приложениях Google: на телефоне снекбар во всю ширину, и плавающие кнопки внизу
   (рация, телефон, «+» чата, «Написать» почты) приподнимаются на его высоту + 8 (--m3-snack-lift ставит m3.js).
   Свойство translate, а не transform: собственные transform кнопок (выезд панели рации и т. п.) не трогаем. */
@media (max-width: 600px) {
    body.m3-snack-on :is(.walkie-fab, #walkie-priv-fab, .phone-fab, .ml-fab, #chat-overlay.gc .gc-fab) {
        translate: 0 calc(-1 * var(--m3-snack-lift, 0px));
    }
}

/* наведение — только где есть мышь: на телефоне :hover залипает на строке после тапа */
@media (hover: hover) {
    .m3-btn:hover::before { opacity: .08; }
    .m3-btn-filled:hover { box-shadow: var(--m3-elev1); }
    .m3-mi:hover, .m3-ib:hover, button.m3-li:hover { background: rgba(31, 31, 31, .08); }
}

@media (prefers-reduced-motion: reduce) {
    .m3-scrim, .m3-dialog, .m3-sheet, .m3-screen, .m3-snack, .m3-switch, .m3-switch::after, .m3-set-bt { transition: none; }
}