/* ═══════════════════════════════════════════════════════════════════════════
GRAMATON.PRO — ПОЧТА (веб-кабинет): фирменный стиль «Альфа» (v1.0, 2026-10-03)
Цель владельца: привести веб-почту к общему стилю сайта — тёплая палитра
лендинга (#FAF6EF) + акценты кабинета (#EF3124), иерархия и UI/UX как в
дашборде (/cabinet.html) и в приложениях Альфа-Банка.
Подключается ПОСЛЕ старых тем (oldmoney/gramaton-theme) и ПОСЛЕ ui-alfa.css:
Файл перекрывает собственные классы почты (.hdr / .main / .side / .fold /
.row / .bh / .toolbar / .search / .v-* / .gate / .sheet / .toast) и добавляет
нижний таб-бар приложения (как в кабинете) на мобильных.
═══════════════════════════════════════════════════════════════════════════ */
/* Акцент сервиса «Почта» = фирменный красный (был золотой) */
html[data-accent="b"]{--mail-gold:#EF3124;--mail-gold-contrast:#FFFFFF}
:root{--mail-gold:#EF3124;--mail-gold-contrast:#FFFFFF}
body{
background:var(--a-bg,#FAF6EF)!important;
color:var(--a-text,#0B1F35)!important;
font-family:var(--a-font,'Montserrat',system-ui,sans-serif)!important;
}
/* ── Шапка кабинета ─────────────────────────────────────────────────────── */
.hdr-w{max-width:1180px;margin:0 auto;padding:10px 20px 0}
.om-header{
background:transparent!important;
border:0!important;
min-height:64px;
}
.logo-svg .lg-bar,.logo-svg .lg-pro{fill:var(--a-accent,#EF3124)}
.dash-appbar{
border:1px solid var(--a-border,rgba(11,31,53,.10))!important;
background:var(--a-card,#fff)!important;
color:var(--a-text,#0B1F35)!important;
font-weight:700;
border-radius:var(--a-pill,999px);
}
.dash-appbar .ic{stroke:var(--a-accent,#EF3124)!important}
/* ── Контейнер ──────────────────────────────────────────────────────────── */
/* :not(.hrow) — чтобы не задевать .wrap внутри шапки (.site-header .wrap.hrow) */
.wrap:not(.hrow){max-width:1180px!important;gap:18px!important;padding:14px 20px 28px!important}
/* Сайдбар-ящики */
.side{width:260px;flex:0 0 260px;gap:4px}
.side-label{
color:var(--a-dim,#5A6472)!important;font-weight:800;letter-spacing:.08em;
font-size:12px!important;text-transform:uppercase;padding:14px 12px 4px!important;
}
.fold{
border-radius:var(--a-pill,999px)!important;
color:var(--a-muted,#333B47)!important;font-weight:600!important;
min-height:46px;transition:background .16s,color .16s;
}
.fold:hover{background:rgba(11,31,53,.05)!important}
.fold.active{
background:var(--a-accent-soft,rgba(239,49,36,.08))!important;
border-color:transparent!important;color:var(--a-accent-strong,#C4241A)!important;
}
.fold.active .fi{filter:none}
.fold .badge{
background:var(--a-accent,#EF3124)!important;color:#fff!important;
border-radius:var(--a-pill,999px)!important;font-weight:800!important;
}
/* Кнопки */
.bh{
border-radius:var(--a-pill,999px)!important;
border:1px solid var(--a-border-strong,rgba(11,31,53,.18))!important;
background:var(--a-card,#fff)!important;color:var(--a-text,#0B1F35)!important;
font-weight:600!important;min-height:46px;
}
.bh:hover{border-color:var(--a-accent-line,rgba(239,49,36,.28))!important;color:var(--a-accent-strong,#C4241A)!important}
.bh.primary,#cSendTop,#cSend{
background:var(--a-btn,#D4231A)!important;border-color:transparent!important;
color:#fff!important;font-weight:700!important;box-shadow:0 8px 20px rgba(212,35,26,.22)!important;
}
.bh.primary:hover{background:var(--a-accent-strong,#C4241A)!important}
/* Основная панель (список писем) */
.main{
background:var(--a-card,#fff)!important;
border:1px solid var(--a-border,rgba(11,31,53,.10))!important;
border-radius:var(--a-r-lg,20px)!important;
box-shadow:var(--a-shadow,0 6px 22px rgba(11,31,53,.07))!important;
}
.toolbar{border-bottom:1px solid var(--a-border,rgba(11,31,53,.10))!important;padding:12px 16px!important}
.search{
background:var(--a-card-alt,#FBF9F4)!important;
border:1px solid var(--a-border-strong,rgba(11,31,53,.18))!important;
border-radius:var(--a-pill,999px)!important;
color:var(--a-text,#0B1F35);
}
.search input{color:var(--a-text,#0B1F35)!important}
.search input::placeholder{color:var(--a-dim,#5A6472)!important}
.icon-btn{
border:1px solid var(--a-border,rgba(11,31,53,.10))!important;
background:var(--a-card,#fff)!important;color:var(--a-text,#0B1F35)!important;
border-radius:var(--a-pill,999px)!important;
}
.icon-btn:hover{border-color:var(--a-accent-line,rgba(239,49,36,.28))!important;color:var(--a-accent-strong,#C4241A)!important}
/* 2026-10-03 (Alex): вложенные оверлеи должны быть ВЫШЕ окна «Новое письмо».
«Облако» и «Подпись» открываются ИЗ композера, а z-index у всех .ov был 1000
и композер (позже в DOM) перекрывал их → «Облако» выглядело нерабочим
(диалог открывался, но оставался под композером). */
#cloudOv,#signOv{z-index:1100!important}
/* Иконки в шапке окон — единый размер/вес (SVG вместо текстовых глифов). */
.icon-btn svg,.sheet-close svg,.hdr-ic svg{display:block;width:22px;height:22px}
.sheet-close svg{width:20px;height:20px}
/* ── Страница подготовки письма (как в приложении), 2026-10-03 ─────────── */
.c-head{gap:6px}
.c-head .sheet-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:560px){.c-head #composeTitle{display:none}}
.c-head .c-draft-hint{font-size:12px;color:var(--a-muted,#333B47);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.c-head .icon-btn{min-width:40px;min-height:40px}
.c-send{background:var(--a-accent,#EF3124)!important;border-color:var(--a-accent,#EF3124)!important;color:#fff!important}
.c-send:hover{filter:brightness(1.05)}
.c-send:disabled{opacity:.5;cursor:default}
.c-menu-wrap{position:relative;display:inline-flex}
.c-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:flex;flex-direction:column;min-width:230px;padding:8px;background:var(--a-card,#fff);border:1px solid var(--a-border,rgba(11,31,53,.10));border-radius:14px;box-shadow:0 12px 34px rgba(11,31,53,.18)}
.c-menu[hidden]{display:none}
.c-menu button{appearance:none;border:0;background:transparent;text-align:left;font:500 15px/1.2 var(--a-font,'Montserrat');color:var(--a-text,#0B1F35);padding:12px 12px;border-radius:10px;cursor:pointer;min-height:44px}
.c-menu button:hover{background:var(--a-card-alt,rgba(11,31,53,.06))}
.c-body .fld-inline{display:flex;align-items:center;gap:10px}
.c-body .fld-inline .fld-lbl{flex:0 0 96px;margin:0}
.c-body .fld-inline input{flex:1 1 auto;min-width:0}
.c-from{font-size:15px;color:var(--a-text,#0B1F35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-body .fld-chips{display:flex;gap:8px;padding:2px 0 10px 106px}
.c-body .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;border:1px solid var(--a-border,rgba(11,31,53,.25));background:transparent;color:var(--a-muted,#333B47);font:600 13px/1 var(--a-font,'Montserrat');cursor:pointer;min-height:36px}
.c-body .chip .chip-ic{font-size:15px;line-height:1;font-weight:700}
.c-body .chip.on{background:rgba(239,49,36,.12);border-color:var(--a-accent,#EF3124);color:var(--a-accent-strong,#C4241A)}
.c-attach-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
/* Много адресов в «Копия»/«Скрытая копия» — чипы-теги (2026-10-03) */
.c-body .fld-chips{align-items:flex-start}
.c-body .fld-chips .fld-lbl{padding-top:7px}
.cc-wrap{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc-list{display:flex;flex-wrap:wrap;gap:6px}
.c-body .fld-chips .cc-input{flex:1 1 140px;min-width:140px;background:transparent;border:0;outline:none;color:var(--a-text,#0B1F35);font:400 15px/1.4 var(--a-font,'Montserrat');padding:6px 0}
.cc-input::placeholder{color:var(--a-muted,#333B47);opacity:.75}
.cc-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 4px 5px 12px;border-radius:99px;background:rgba(239,49,36,.10);border:1px solid rgba(239,49,36,.25);color:var(--a-accent-strong,#C4241A);font:600 13px/1.2 var(--a-font,'Montserrat');word-break:break-all}
.cc-x{border:0;background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 2px;min-width:20px;min-height:20px}
.counter{color:var(--a-dim,#5A6472)!important}
/* Строки списка — как карточки операций в кабинете */
.row{
border-bottom:1px solid var(--a-border,rgba(11,31,53,.10))!important;
padding:14px 16px!important;min-height:64px;
}
.row:hover{background:rgba(11,31,53,.02)!important}
.row.unread{background:var(--a-accent-soft,rgba(239,49,36,.06))!important;box-shadow:inset 3px 0 0 var(--a-accent,#EF3124)}
.row.unread .subj{color:var(--a-text,#0B1F35)!important;font-weight:700!important}
.sender{color:var(--a-text,#0B1F35)!important;font-weight:700!important}
.subj{color:var(--a-muted,#333B47)!important}
.snip{color:var(--a-dim,#5A6472)!important}
.date{color:var(--a-dim,#5A6472)!important}
.star{color:var(--a-dim,#5A6472)}
.star.on{color:var(--a-accent,#EF3124)!important}
/* 2026-10-03 (Alex): круглая аватарка отправителя — как CircleAvatar в приложении */
.row-avatar{
flex:0 0 auto;width:28px;height:28px;border-radius:50%;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;
background:var(--a-accent-soft,rgba(239,49,36,.12));color:var(--a-accent,#EF3124);
font-size:12px;font-weight:600;text-transform:uppercase;user-select:none;
}
.row-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* Аватар строго напротив отправителя: верхняя строка — аватар + имя. */
.row-sender{display:flex;align-items:center;gap:8px;min-width:0}
.row-sender .sender{flex:1 1 auto;min-width:0}
@media(max-width:640px){ .row-avatar{width:28px;height:28px;font-size:12px} }
/* 2026-10-03 (Alex): правый блок строки — дата + звёздочка + скрепка
(как в приложении/Gmail). Дата сверху, иконки под ней, выравнивание вправо. */
.row-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;flex:0 0 auto;min-width:0}
.row-right .date{white-space:nowrap;font-size:12px;line-height:1;color:var(--a-dim,#5A6472)}
.row-right .row-icons{display:inline-flex;align-items:center;gap:6px;min-height:20px}
.row-right .row-icons .clip{display:inline-flex;align-items:center;justify-content:center;line-height:1;color:var(--a-dim,#5A6472)}
.row-right .row-icons .clip svg{display:block}
.row-right .star{min-width:22px;min-height:22px;font-size:16px;line-height:1;color:var(--a-dim,#5A6472)}
.row-right .star.on{color:var(--a-accent,#EF3124)!important}
/* Пустое состояние */
.empty{color:var(--a-muted,#333B47)!important}
/* Просмотр письма */
.v-subject{color:var(--a-text,#0B1F35)!important;font-family:var(--a-font,'Montserrat')!important}
.v-avatar{background:linear-gradient(135deg,var(--a-accent,#EF3124),#B71C14)!important;color:#fff!important}
.v-name{color:var(--a-text,#0B1F35)!important}
.v-mail,.v-date{color:var(--a-dim,#5A6472)!important}
.v-body{color:var(--a-muted,#333B47)!important}
.v-body a{color:var(--a-accent-strong,#C4241A)!important}
.v-attach{
border:1px dashed var(--a-border-strong,rgba(11,31,53,.18))!important;
color:var(--a-muted,#333B47)!important;background:var(--a-card-alt,#FBF9F4);
}
.v-back{color:var(--a-accent-strong,#C4241A)!important}
.v-head,.v-actions{border-color:var(--a-border,rgba(11,31,53,.10))!important}
#vRestore{border-color:var(--a-ok,#0F7A45)!important;color:var(--a-ok,#0F7A45)!important;background:var(--a-ok-soft,rgba(15,122,69,.10))!important}
#vDelete,.row .del{border-color:var(--a-err,#C4241A)!important;color:var(--a-err,#C4241A)!important;background:var(--a-err-soft,rgba(196,36,26,.10))!important}
.row .restore{border-color:var(--a-ok,#0F7A45)!important;color:var(--a-ok,#0F7A45)!important;background:var(--a-ok-soft,rgba(15,122,69,.10))!important}
/* Пагинация */
.pager{border-top:1px solid var(--a-border,rgba(11,31,53,.10))!important}
.pager button{border:1px solid var(--a-border-strong,rgba(11,31,53,.18))!important;background:var(--a-card,#fff)!important;color:var(--a-text,#0B1F35)!important}
.pager .pg{color:var(--a-dim,#5A6472)!important}
/* счётчик «N–M из K» — в строке пагинации (слева), чтобы не занимать отдельный ряд */
.pager .counter{margin-right:auto;font-size:14px;color:var(--a-dim,#5A6472)}
/* Вход */
.gate{
background:var(--a-card,#fff)!important;
border:1px solid var(--a-border,rgba(11,31,53,.10))!important;
border-radius:var(--a-r-xl,26px)!important;box-shadow:var(--a-shadow-lg,0 22px 60px rgba(11,31,53,.16))!important;
}
.gate h2{color:var(--a-text,#0B1F35)!important;font-family:var(--a-font,'Montserrat')!important}
.gate p{color:var(--a-muted,#333B47)!important}
.gate .bg{background:var(--a-btn,#D4231A)!important;color:#fff!important}
.fld label{color:var(--a-muted,#333B47)!important;font-weight:600}
.fld input,.fld textarea{
background:var(--a-card-alt,#FBF9F4)!important;
border:1px solid var(--a-border-strong,rgba(11,31,53,.18))!important;
color:var(--a-text,#0B1F35)!important;border-radius:var(--a-r-sm,12px)!important;
}
.fld input:focus{border-color:var(--a-accent,#EF3124)!important;box-shadow:0 0 0 3px var(--a-accent-soft,rgba(239,49,36,.08))}
/* Окно письма (compоse) */
.ov{background:rgba(11,31,53,.42)!important;backdrop-filter:blur(3px)}
.sheet{
background:var(--a-card,#fff)!important;
border:1px solid var(--a-border,rgba(11,31,53,.10))!important;
border-radius:var(--a-r-lg,20px)!important;box-shadow:var(--a-shadow-lg,0 22px 60px rgba(11,31,53,.16))!important;
}
.sheet-head,.sheet .fld,.sheet-foot{border-color:var(--a-border,rgba(11,31,53,.10))!important}
.sheet-title{color:var(--a-text,#0B1F35)!important;font-family:var(--a-font,'Montserrat')!important}
.sheet .fld input,.sheet .fld textarea{color:var(--a-text,#0B1F35)!important;background:transparent!important}
.sheet-body .fld label.fld-lbl{color:var(--a-muted,#333B47)!important}
/* 2026-10-03 (Alex): поле «Подпись» — авторазмер по содержимому, без скролла;
блок чекбокса и подсказка выровнены по ширине с полем ввода (.sig-pad = те же
отступы, что у .fld). */
#signText{resize:none!important;overflow:hidden!important;min-height:0!important;line-height:1.6}
.sheet .fld .sig-pad,.sig-pad{padding:8px 16px 10px}
.lnk{color:var(--a-accent-strong,#C4241A)!important}
.sheet-close{color:var(--a-dim,#5A6472)!important}
.sheet-close:hover{color:var(--a-accent-strong,#C4241A)!important}
#cAttachList .att-row{border-color:var(--a-border,rgba(11,31,53,.12))!important;background:var(--a-card-alt,#FBF9F4)!important}
#cAttachList .att-head{color:var(--a-text,#0B1F35)!important}
#cAttachList .att-state{color:var(--a-dim,#5A6472)!important}
#cAttachList .att-del{border-color:var(--a-err,#C4241A)!important;color:var(--a-err,#C4241A)!important;background:var(--a-err-soft,rgba(196,36,26,.10))!important}
.bh .att-badge{background:var(--a-err,#C4241A)!important}
/* Тосты */
.toast{
background:var(--a-text,#0B1F35)!important;color:#fff!important;border:0!important;
border-radius:var(--a-r-sm,12px)!important;
}
/* ── Нижний таб-бар приложения (как в кабинете) — только мобильные ──────── */
.ui-tabbar-mail{display:none}
/* ── Верхний ряд папок (как в приложении) — только мобильные ─────────── */
.mail-foldertabs{display:none}
@media(max-width:900px){
.mail-foldertabs{
display:flex!important;align-items:stretch;width:100%!important;margin:0 0 8px!important;
border-bottom:1px solid var(--a-border,rgba(11,31,53,.10));
}
.mail-foldertabs .mft{
flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 6px;border:0;background:transparent;cursor:pointer;
font:600 12px/1 var(--a-font,'Montserrat',sans-serif);color:var(--a-dim,#5A6472);
border-bottom:2px solid transparent;margin-bottom:-1px;
}
.mail-foldertabs .mft .mft-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-foldertabs .mft.active{color:var(--a-accent,#EF3124);font-weight:700;border-bottom-color:var(--a-accent,#EF3124)}
.mail-foldertabs .mft-badge{
display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:rgba(239,49,36,.18);color:var(--a-accent,#EF3124);font-size:10px;font-weight:700;
}
.mail-foldertabs .mft.active .mft-badge{background:var(--a-accent,#EF3124);color:#fff}
}
/* ── Строка поиска и иконки в шапке (как в приложении) ─────────────── */
.search-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--a-border,rgba(11,31,53,.10))}
.search-row .search{flex:1 1 auto;margin:0}
.search-row .sr-back{display:none;flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--a-text,#0B1F35);cursor:pointer}
.hdr-ic{display:none;flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;border-radius:50%;color:var(--a-dim,#5A6472);cursor:pointer;align-items:center;justify-content:center;padding:0}
.hdr-ic:active{background:var(--a-card-alt,#F2EEE6)}
/* Отклик на «Обновить»: крутится иконка + центрированный спиннер (как в приложении) */
@keyframes mft-spin{to{transform:rotate(360deg)}}
.hdr-ic.spin svg,.icon-btn.spin{animation:mft-spin .8s linear infinite}
.refresh-ov{display:none;position:fixed;inset:0;z-index:1500;align-items:center;justify-content:center;pointer-events:none}
body.refreshing .refresh-ov{display:flex}
.refresh-ov .ro-spinner{width:34px;height:34px;border-radius:50%;border:3px solid color-mix(in srgb,var(--a-accent,#EF3124) 28%,transparent);border-top-color:var(--a-accent,#EF3124);animation:mft-spin .8s linear infinite;background:color-mix(in srgb,var(--a-card,#fff) 82%,transparent);box-shadow:0 6px 18px rgba(11,31,53,.12)}
@media(max-width:900px){
/* В шапке — лупа и обновление (лишние кнопки убираем) */
.hdr-ic{display:inline-flex}
.toolbar{display:none!important}
/* Строка поиска выезжает только по лупе; в режиме поиска ряд папок скрыт */
.search-row{display:none;padding:8px 12px!important;margin:0 0 8px!important;border-bottom:0!important}
.search-row .sr-back{display:inline-flex;align-items:center;justify-content:center}
body.search-open .search-row{display:flex!important}
body.search-open .mail-foldertabs{display:none!important}
}
@media(max-width:900px){
.a-nav,.dash-nav{display:none}
/* Папки на мобильном — горизонтальные чипы с подписями (было: голая
вертикальная иконная лента без названий) */
/* align-items:stretch — иначе .main/-.side тянутся по max-content и вылезают за экран */
.wrap:not(.hrow){flex-direction:column!important;gap:12px!important;padding:10px 14px 20px!important;align-items:stretch!important;width:100%!important}
/* 2026-10-03 (Alex): на мобильном сайдбар (чипы папок + «Подпись») убран.
Навигация — верхний ряд папок (Входящие/Исходящие/Черновики) + бургер-меню. */
.side{display:none!important}
.main{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
.toolbar{width:100%!important;max-width:100%!important}
.list,.pager,.viewer{width:100%!important;max-width:100%!important;min-width:0!important}
.row{max-width:100%!important}
.side-label{display:none!important}
/* FAB «Написать» — фиксированный размер (не растягивать) */
#composeBtn{width:58px!important;height:58px!important;margin:0!important}
/* лента папок — горизонтальный скролл с подписями */
#folderList{
display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
gap:8px!important;overflow-x:auto;padding-bottom:2px;
-webkit-overflow-scrolling:touch;
}
#signBtn{width:auto!important;align-self:flex-start}
.fold{
flex:0 0 auto!important;width:auto!important;min-height:42px!important;
padding:8px 14px!important;gap:8px!important;
background:var(--a-card,#fff)!important;
border:1px solid var(--a-border,rgba(11,31,53,.10))!important;
border-radius:var(--a-pill,999px)!important;
font-size:15px!important;
}
.fold .fn{display:inline!important;white-space:nowrap}
.fold .fi{font-size:18px!important;width:auto!important}
.fold.active{
background:var(--a-accent-soft,rgba(239,49,36,.08))!important;
border-color:var(--a-accent-line,rgba(239,49,36,.28))!important;
color:var(--a-accent-strong,#C4241A)!important;
}
.fold .badge{background:var(--a-accent,#EF3124)!important;color:#fff!important}
.main{min-height:70dvh}
.sender{max-width:100%!important}
.snip{display:block}
.acc-cycle{min-width:40px!important;min-height:40px!important;width:40px!important;height:40px!important}
.more-menu>summary{min-width:40px!important;min-height:40px!important;font-size:18px!important}
.dash-appbar{font-size:13px!important;padding:6px 12px!important}
.logo-svg{height:26px!important}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.ui-tabbar-mail{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:stretch;
justify-content:center;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
background:color-mix(in srgb,var(--a-card,#fff) 94%,transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-top:1px solid var(--a-border,rgba(11,31,53,.10));
}
.ui-tabbar-mail .tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1 1 0;min-width:0;max-width:170px;min-height:52px;padding:6px 12px;border-radius:var(--a-r-sm,12px);color:var(--a-dim,#5A6472);font-size:11px;font-weight:600;letter-spacing:.02em;text-decoration:none}
.ui-tabbar-mail .tb .ic{width:22px;height:22px;stroke:var(--a-dim,#5A6472);stroke-width:1.7;margin:0;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ui-tabbar-mail .tb.active{color:var(--a-accent,#EF3124)}
.ui-tabbar-mail .tb.active .ic{stroke:var(--a-accent,#EF3124)}
.ui-tabbar-mail .tb__center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1 1 0;min-width:0;max-width:170px;min-height:52px;padding:6px 12px}
.ui-tabbar-mail .tb__fab{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--a-accent,#EF3124),#B71C14);color:#fff;margin-top:-18px;border:3px solid var(--a-bg,#FAF6EF);box-shadow:0 8px 22px rgba(239,49,36,.42)}
.ui-tabbar-mail .tb__fab .ic{width:24px;height:24px;stroke:#fff}
.ui-tabbar-mail .tb__center .tb__label{color:var(--a-dim,#5A6472);font-size:11px;font-weight:600}
}
/* (шапка сайта — в css/site-header.css, единая с дашбордом /cabinet.html) */
/* Заголовок списка/секций в стиле кабинета */
.a-card-title{color:var(--a-text,#0B1F35)}
/* ═══════════════════════════════════════════════════════════════════════════
2026-10-03 (Alex): множественный выбор, пакетные операции, свайпы, Undo
ТЗ владельца: взаимодействие как в мобильном Gmail.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Обёртка строки: подложка свайпа + сама строка ── */
.row-wrap{position:relative;overflow:hidden;border-bottom:1px solid var(--a-border,rgba(11,31,53,.10))}
.row-wrap:last-child{border-bottom:none}
.row-wrap .row{border-bottom:none}
.row-bg{position:absolute;inset:0;display:flex;align-items:center;padding:0 24px;color:#fff;opacity:0;pointer-events:none;transition:opacity .12s}
.row-bg.bg-arch{background:#34A853;justify-content:flex-start}
.row-bg.bg-trash{background:#EA4335;justify-content:flex-end}
.row-bg .bi{font-size:26px;line-height:1;transition:transform .16s ease}
.row-bg.pop .bi{transform:scale(1.4)}
/* Строка поверх подложки */
.row{position:relative;z-index:1;background:var(--a-card,#fff)}
.row.swiping{transition:none}
.row.out-left{transform:translateX(-102%);opacity:.2;transition:transform .26s ease,opacity .26s ease}
.row.out-right{transform:translateX(102%);opacity:.2;transition:transform .26s ease,opacity .26s ease}
.row.sel{background:var(--a-accent-soft,rgba(239,49,36,.09))}
/* Кружок выбора (виден только в режиме выбора) */
.row-check{display:none;flex:0 0 auto;width:44px;height:44px;border:none;border-radius:50%;background:transparent;color:#fff;font-size:16px;line-height:1;align-items:center;justify-content:center;cursor:pointer;padding:0;position:relative}
.row-check::before{content:'';position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--a-border-strong,rgba(11,31,53,.28));box-sizing:border-box;background:transparent}
body.selmode .row-check{display:inline-flex}
.row-check.on{color:#fff}
.row-check.on::before{background:var(--a-accent,#EF3124);border-color:var(--a-accent,#EF3124);animation:rc-pop .2s ease}
/* Галочка поверх кружка (SVG-подобная маска) */
.row-check.on::after{content:'';position:absolute;inset:0;margin:auto;width:13px;height:7px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px);box-sizing:border-box;z-index:2}
body.selmode .row .star,
body.selmode .row .del,
body.selmode .row .restore{display:none}
body.selmode .row .row-avatar{display:none}
body.selmode .row{cursor:pointer}
/* ── Панель массовых действий ── */
/* §1 ТЗ: панель скрыта по умолчанию и появляется ТОЛЬКО когда выбрано ≥1 письмо
(body.selbar-on, ставится из JS по счётчику). Плавное появление — fade-in.
2026-10-03: вид как в мобильном Gmail — [←] [N] ... [архив][корзина][конверт][⋮] */
.selbar{display:none;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--a-border,rgba(11,31,53,.10));background:var(--a-card,#fff);flex:0 0 auto}
body.selbar-on .selbar{display:flex;animation:selbar-in .22s cubic-bezier(.22,.61,.36,1) both}
@keyframes selbar-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* §2 ТЗ: панель действий ВСТАЁТ ВМЕСТО строки поиска, а не поверх неё. */
body.selbar-on .toolbar{display:none!important}
.selbar .selback{font-size:22px;font-weight:800;line-height:1;color:var(--a-text,#0B1F35)}
.selbar .selcount{font-weight:800;font-size:20px;min-width:26px;color:var(--a-text,#0B1F35)}
/* Меню «⋮» (ещё действия) */
.sel-more{position:relative;display:inline-flex}
.sel-more__panel{position:fixed;top:0;right:0;z-index:2000;min-width:236px;display:none;flex-direction:column;padding:6px;background:var(--a-card,#fff);border:1px solid var(--a-border,rgba(11,31,53,.12));border-radius:14px;box-shadow:0 12px 34px rgba(11,31,53,.18)}
.sel-more__panel.open{display:flex}
.sel-more__panel button{display:block;width:100%;text-align:left;padding:12px 14px;border:0;background:transparent;color:var(--a-text,#0B1F35);font-size:16px;font-weight:600;border-radius:10px;cursor:pointer}
.sel-more__panel button:hover{background:var(--a-accent-soft,rgba(239,49,36,.08))}
/* Строка «Выбрать все» (как в Gmail) — видна только в режиме выбора */
.selall-row{display:none;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--a-border,rgba(11,31,53,.10));background:var(--a-card,#fff)}
body.selbar-on .selall-row{display:flex;animation:selbar-in .22s cubic-bezier(.22,.61,.36,1) both}
.selall-txt{border:0;background:transparent;color:var(--a-text,#0B1F35);font-size:16px;font-weight:700;cursor:pointer;padding:6px 2px}
.selbar .selcount{font-weight:800;font-size:18px;color:var(--a-text,#0B1F35);min-width:20px;text-align:center}
.selbar .sellabel{font-size:15px;color:var(--a-muted,#333B47)}
.selbar .selactions{margin-left:auto;display:flex;gap:6px}
.selbar .icon-btn,.icon-btn{min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--a-border,rgba(11,31,53,.10));background:var(--a-card,#fff);color:var(--a-text,#0B1F35);font-size:19px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.selbar .icon-btn:hover{border-color:var(--a-accent-line,rgba(239,49,36,.3))}
.selbar .icon-btn.danger:hover{background:#EA4335;border-color:#EA4335;color:#fff}
.selbar .icon-btn.ok:hover{background:#34A853;border-color:#34A853;color:#fff}
/* В режиме выбора нижний таб-бар скрываем (как Gmail) */
body.selmode .ui-tabbar-mail{display:none!important}
/* ── Undo (Snackbar) ── */
.undo{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(calc(100% + 140px));opacity:0;visibility:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .22s,visibility .28s;
display:flex;align-items:center;gap:16px;max-width:92vw;
background:#323232;color:#fff;border-radius:10px;padding:12px 14px 12px 18px;
box-shadow:0 10px 34px rgba(0,0,0,.34);transition:transform .28s cubic-bezier(.22,.61,.36,1);font-size:16px}
.undo.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.undo .undo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.undo .undo-btn{background:transparent;border:none;color:#7FD1FF;font-weight:800;font-size:16px;letter-spacing:.03em;cursor:pointer;padding:8px 10px;border-radius:8px;text-transform:uppercase}
.undo .undo-btn:hover{background:rgba(127,209,255,.14)}
@media(max-width:900px){ .undo{bottom:78px} body.selmode .undo{bottom:22px} }
/* ═══════════════════════════════════════════════════════════════════════════
2026-10-03: множественный выбор, свайпы, Undo (ТЗ веб-почты)
Дополняет уже имеющийся каркас (.row-wrap/.row-bg/.row-check/.selbar/.undo):
аватар-заглушка, чекбокс-галочка, подсветка строки (Gmail-синий #E8F0FE),
индикатор «Выбрать все» (+ indeterminate).
═══════════════════════════════════════════════════════════════════════════ */
/* Аватар-заглушка (первая буква отправителя) — виден в обычном режиме */
.m-avatar{
flex:0 0 auto;width:40px;height:40px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:700;color:var(--a-dim,#5A6472);
background:var(--a-card-alt,#FBF9F4);
border:1px solid var(--a-border,rgba(11,31,53,.10));
padding:0;cursor:pointer;user-select:none;-webkit-user-select:none;
}
.row.unread .m-avatar{color:#fff;background:var(--a-accent,#EF3124);border-color:transparent}
/* в режиме выбора аватар уступает место чекбоксу */
body.selmode .m-avatar{display:none}
/* Чекбокс выбора: единый вид — рисуется .row-check::before (см. выше);
анимация появления — общий @keyframes rc-pop. */
@keyframes rc-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
/* Подсветка выбранной строки — Gmail #E8F0FE */
body.selmode .row.sel{background:#E8F0FE!important}
body.selmode .row.sel:hover{background:#E8F0FE!important}
/* Индикатор «Выбрать все» (галочка / минус при частичном) */
.selall-cb{
width:18px;height:18px;border:2px solid var(--a-dim,#8A94A6);border-radius:4px;
display:inline-flex;align-items:center;justify-content:center;
font-size:13px;line-height:1;color:#fff;transition:background .15s,border-color .15s;
}
.selall-cb.on{background:#1A73E8;border-color:#1A73E8}
.selall-cb.on::after{content:'✓'}
.selall-cb.partial{background:#1A73E8;border-color:#1A73E8}
.selall-cb.partial::after{content:'—'}
/* Мобильная компактность: аватар меньше, одиночная кнопка «удалить» уходит в свайп */
@media(max-width:640px){
.m-avatar{width:36px;height:36px;font-size:14px}
.row .del{display:none}
.selbar{gap:4px;padding:8px 10px}
.selbar .icon-btn{min-width:40px;min-height:40px;font-size:18px}
.sellabel{font-size:14px}
}
/* §6.3: плавное появление писем, вернувшихся после «Отменить» (Undo).
Класс .undo-in вешается на список на один цикл анимации. */
.list.undo-in .row-wrap{animation:undo-in .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes undo-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ═══════════════════════════════════════════════════════════════════════════
2026-10-03 (Alex) — ТЗ «Исправление UI/UX багов мобильного списка писем»
§2 слой/наложение, §3 обрезка по правому краю, §4 отступы списка.
═══════════════════════════════════════════════════════════════════════════ */
/* Тулбар и панель действий — независимые блоки в потоке (не наложение) */
.toolbar,.selbar{flex:0 0 auto;position:relative;z-index:1}
.toolbar{flex-wrap:wrap;row-gap:8px}
/* §3: строка поиска не вылезает за экран — может сжиматься */
.search{min-width:0!important;max-width:100%!important;flex:1 1 160px}
/* input во flex по умолчанию имеет min-width:auto → не сжимается ниже своей ширины.
Сбрасываем — иначе «Поиск по теме…» обрезается правым краем экрана. */
.search input{min-width:0!important;width:100%}
/* §4: контейнер списка — внешние отступы; строки — внутренние */
.list{padding:4px 12px 8px}
.row{padding-left:12px!important;padding-right:12px!important}
/* §3: панель действий на узких экранах — без обрезки: компактнее, с прокруткой */
@media(max-width:480px){
.toolbar{padding:10px 12px!important}
.selbar{padding:8px 10px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.selbar .sellabel{display:none}
.selbar .icon-btn,.selbar .icon-btn{min-width:44px;min-height:44px}
.selbar .selactions{gap:4px}
.counter{font-size:14px}
}
/* §4: чёткий безопасный зазор между чекбоксом/аватаром и текстом письма */
.row-check{margin-right:4px}
.row-meta{margin-left:6px}
@media(max-width:640px){
.row{gap:10px!important;padding:12px!important}
}
/* 2026-10-03 (fix): чип-лента папок (#folderList) не должна расширять body —
иначе на 390px появляется горизонтальное переполнение (bodyScrollWidth 1151).
Ограничиваем ширину ленты, чтобы она скроллилась внутри, а не раздувала вёрстку. */
@media(max-width:900px){
#folderList{width:100%!important;max-width:100%!important;min-width:0!important;align-self:stretch!important}
}
/* §4: 2026-10-03 — сообщение в списке теперь в 3 строки (от кого / тема /
тело — как в приложении), поэтому отправитель занимает всю ширину строки,
а не делит её с темой. */
@media(max-width:640px){
.sender{max-width:100%!important}
}
@media(max-width:380px){
.sender{max-width:100%!important}
}
/* ═══════════════════════════════════════════════════════════════════════════
2026-10-03 (Alex) — приведение /mail к мобильному приложению:
нижнее меню убрано, «Написать письмо» — плавающая кнопка (FAB), как в app.
═══════════════════════════════════════════════════════════════════════════ */
.ui-tabbar-mail{display:none!important} /* нижнее меню убрано */
.mail-fab{
position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:900;
width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
background:var(--a-btn,#D4231A);color:#fff;display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(212,35,26,.34);transition:transform .15s ease,box-shadow .15s ease;
}
.mail-fab:hover{background:var(--a-accent-strong,#C4241A)}
.mail-fab:active{transform:scale(.94)}
.mail-fab svg{display:block;stroke:#fff}
/* В режиме выбора FAB не нужен (как в приложении) */
body.selmode .mail-fab,body.selbar-on .mail-fab{display:none}
/* Плашке Undo — снова низ экрана (нижнего меню больше нет) */
@media(max-width:900px){ .undo{bottom:24px} }
/* ═══════════════════════════════════════════════════════════════════════════
2026-10-03 (Alex) — лого в шапке /mail как в мобильном приложении:
«GRAMATON . Mail» (GRAMATON — жирный с трекингом, точка — акцентным цветом,
«Mail» — приглушённая, обычным начертанием). В приложении это premiumAppBar
(service_themes.dart): GRAMATON w800 + «.» primary + label muted w400.
Меняем только логотип этой страницы (класс .logo-mail), остальные страницы
сайта сохраняют лого «GRAMATON PRO».
═══════════════════════════════════════════════════════════════════════════ */
.site-header .logo-mail{align-items:baseline;gap:4px;line-height:1}
.site-header .logo-mail .lm-word,
.site-header .logo-mail .lm-dot,
.site-header .logo-mail .lm-service{font-family:'Montserrat',var(--a-font,sans-serif);line-height:1}
.site-header .logo-mail .lm-word{font-weight:800;font-size:21px;letter-spacing:2px;color:var(--a-text,var(--text,#0B1F35))}
.site-header .logo-mail .lm-dot{font-weight:800;font-size:21px;color:var(--a-accent,var(--accent,#EF3124))}
.site-header .logo-mail .lm-service{font-weight:400;font-size:16px;color:var(--a-muted,var(--muted,#333B47))}
@media(max-width:900px){
.site-header .logo-mail .lm-word{font-size:18px;letter-spacing:1.6px}
.site-header .logo-mail .lm-dot{font-size:18px}
.site-header .logo-mail .lm-service{font-size:14px}
}
/* ═══════════════════════════════════════════════════════════════════════════
2026-10-03 (Alex) — ветки сообщений (письма с одной темой в одной ветке).
Список: бейдж с числом писем в строке. Просмотр: карточки сообщений,
последнее раскрыто, старые свёрнуты (клик раскрывает), вложения внутри.
═══════════════════════════════════════════════════════════════════════════ */
/* Бейдж ветки: число писем. Красный — есть новое (непрочитанное), серый —
всё просмотрено/отвечено (ТЗ владельца, 2026-10-03). */
.row .thread-count{
flex:0 0 auto;margin-left:2px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
font-size:12px;font-weight:700;line-height:20px;text-align:center;color:#fff;transition:background .18s ease;
}
.row .thread-count.unread{background:var(--a-btn,#D4231A)}
.row .thread-count.read{background:#B4BBC4}
/* Список веток идёт как список писем — отдельной рамки не нужно */
/* Просмотр ветки */
.v-thread-info{font-size:14px;color:var(--a-muted,var(--muted,#333B47));margin-top:4px}
.v-thread{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.t-msg{border:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)));border-radius:14px;background:var(--a-card,var(--card,#fff));overflow:hidden}
.t-msg .t-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.t-msg .t-avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--a-btn,#D4231A);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;overflow:hidden}
.t-msg .t-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.t-msg .t-meta{flex:1;min-width:0}
.t-msg .t-name{font-size:15px;font-weight:600;color:var(--a-text,var(--text,#0B1F35));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-msg .t-mail{font-size:12px;color:var(--a-muted,var(--muted,#333B47));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Справа в карточке ветки: сверху — кнопка разворота, под ней дата,
выровнены по правому краю (ТЗ владельца, 2026-10-03). */
.t-msg .t-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.t-msg .t-date{font-size:12px;color:var(--a-muted,var(--muted,#333B47));white-space:nowrap}
/* Шапка письма в раскрытой карточке: от / кому / копия / скрытая копия. */
.t-msg .t-details{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--a-card-alt,rgba(11,31,53,.045));border:1px solid var(--a-border,rgba(11,31,53,.08))}
.t-msg .t-drow{display:flex;gap:6px;font-size:12.5px;line-height:1.45;min-width:0}
.t-msg .t-dl{flex:0 0 auto;font-weight:700;color:var(--a-text,var(--text,#0B1F35));text-align:left}
.t-msg .t-dv{flex:1 1 auto;min-width:0;color:var(--a-text,var(--text,#0B1F35));word-break:break-word}
.t-msg .t-caret{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--a-card-alt,rgba(11,31,53,.06));color:var(--a-text,var(--text,#0B1F35));font-size:22px;line-height:1;transition:transform .18s ease,background .18s ease}
.t-msg .t-head:hover .t-caret{background:var(--a-border,rgba(11,31,53,.12))}
.t-msg.open .t-caret{transform:rotate(180deg)}
.t-msg .t-collapse{display:none;padding:0 14px 14px;border-top:1px solid var(--a-border,var(--border,rgba(11,31,53,.08)))}
.t-msg.open .t-collapse{display:block}
.t-msg .t-body{padding-top:10px;font-size:16px;line-height:1.5;color:var(--a-text,var(--text,#0B1F35));word-break:break-word}
.t-msg .t-body img{max-width:100%;height:auto}
.t-msg .t-body table{max-width:100%}
.t-msg .t-attach{margin-top:10px;font-size:14px;color:var(--a-muted,var(--muted,#333B47))}
.t-msg .t-attach a{color:var(--a-btn,#D4231A);text-decoration:none;font-weight:600}