/**
 * Mintrans skin for Roundcube (child of Elastic)
 * Gmail-подобный интерфейс по макету «Почта mbox / mintrans.tj»
 * Всё — переопределения поверх Elastic. Оригинал не изменяется.
 */

/* --- Fonts + base Elastic import (must stay at the very top) --- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
@import "../../elastic/styles/styles.min.css";

/* ============================================================= *
 *  Design tokens (из макета)                                    *
 * ============================================================= */
:root {
  --app-bg:#eef2f7; --surface:#ffffff; --surface-2:#f4f7fb; --hover:#eef2f8;
  --selected:#e4eefb; --border:#e5eaf1; --border-strong:#d2dae5;
  --text:#16202e; --text-2:#54617a; --text-3:#8b97a8;
  --brand:#1d4e89; --brand-hover:#173f6f; --brand-tint:#e7eef8;
  --star:#efa93c; --danger:#d0443f;
  --shadow-1:0 1px 2px rgba(16,32,60,.05),0 1px 3px rgba(16,32,60,.07);
  --shadow-2:0 10px 34px rgba(16,32,60,.16),0 3px 8px rgba(16,32,60,.10);
  --pill:0 21px 21px 0;

  /* --- Жидкое стекло: слои прозрачности (светлая тема) --- */
  --glass-blur:blur(20px) saturate(165%);      /* крупные поверхности */
  --glass-blur-lg:blur(30px) saturate(180%);   /* всплывающие слои */
  /* Полностью прозрачные поверхности: заливки нет, форму держат размытие,
     граница и тень. В DevTools это набиралось отрицательной альфой
     (-1.58 / -0.38 / -0.18) — она невалидна и приводится браузером к нулю,
     поэтому записан честный 0. */
  --glass-1:rgba(255,255,255,0);   /* лёгкое стекло — подложка под карточки */
  --glass-2:rgba(255,255,255,0);   /* основное стекло — панели */
  --glass-3:rgba(255,255,255,0);   /* плотное стекло — меню, диалоги, чтение */
  --glass-item:rgba(255,255,255,.55);        /* карточка папки */
  --glass-item-hover:rgba(255,255,255,.88);
  --glass-row:rgba(255,255,255,.72);         /* строка письма */
  --glass-row-hover:rgba(255,255,255,.93);
  --glass-row-selected:rgba(205,226,251,.88);
  --glass-tint:rgba(199,222,250,.82);        /* брендовая заливка на стекле */
  --glass-hover:rgba(29,78,137,.10);         /* ховер иконок на стекле */
  --glass-line:rgba(255,255,255,.62);        /* граница-блик */
  --glass-line-2:rgba(255,255,255,.85);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.72);  /* верхний блик по краю */
  --glass-shadow:0 8px 28px rgba(16,32,60,.12),0 2px 6px rgba(16,32,60,.06);
  --glass-shadow-lg:0 20px 50px rgba(16,32,60,.20),0 4px 12px rgba(16,32,60,.10);
  --brand-ink:var(--brand);                  /* брендовый текст поверх заливки */
}
html.dark-mode {
  --app-bg:#0d1420; --surface:#141d29; --surface-2:#1a2433; --hover:#1e2938;
  --selected:#1b2c44; --border:#26313f; --border-strong:#31404f;
  --text:#e7edf5; --text-2:#9aa7b8; --text-3:#6b7889;
  --brand:#4d8bda; --brand-hover:#5f98e0; --brand-tint:#17273b;
  --star:#f0b44b; --danger:#e05a5a;
  --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 12px 34px rgba(0,0,0,.5);

  /* --- Жидкое стекло: тёмная тема (меньше прозрачности, границы-блики тише) --- */
  /* как и в светлой теме — заливки нет, форму держат размытие,
     граница и тень (в DevTools набиралось отрицательной альфой) */
  --glass-1:rgba(19,28,41,0);
  --glass-2:rgba(19,28,41,0);
  --glass-3:rgba(21,31,44,0);
  --glass-item:rgba(255,255,255,.055);
  --glass-item-hover:rgba(255,255,255,.11);
  --glass-row:rgba(27,38,54,.64);
  --glass-row-hover:rgba(41,56,77,.76);
  --glass-row-selected:rgba(31,68,112,.74);
  --glass-tint:rgba(40,86,140,.48);
  --glass-hover:rgba(255,255,255,.10);
  --glass-line:rgba(255,255,255,.12);
  --glass-line-2:rgba(255,255,255,.20);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.09);
  --glass-shadow:0 8px 28px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.28);
  --glass-shadow-lg:0 22px 54px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);
  /* --brand (#4d8bda) на брендовой заливке даёт ~3.6:1 — для текста берём светлее */
  --brand-ink:#8fc0ff;
}

/* ============================================================= *
 *  Typography                                                    *
 * ============================================================= */
html, body, input, button, textarea, select, .username, .listing,
#messagelist, .propform, .menu, h1, h2, h3 {
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body { background:var(--app-bg) !important; color:var(--text) !important;
  -webkit-font-smoothing:antialiased; }
a, a:link { color:var(--brand); }
a:hover { color:var(--brand-hover); }

/* ============================================================= *
 *  Left task rail (#layout-menu)  →  единая левая панель (Gmail) *
 *  Рейл иконок сливается с сайдбаром папок в одну панель слева.  *
 * ============================================================= */
#layout-menu { background:var(--app-bg) !important; border-right:0 !important; }
#layout-menu .popover-header { background:var(--app-bg) !important; }
/* убираем границу между рейлом и папками — читается как один левый блок */
#layout-sidebar { border-left:0 !important; }
#taskmenu a.button, #taskmenu a { color:var(--text-2) !important; }
#taskmenu a.button:hover { color:var(--text) !important; background:var(--hover) !important;
  border-radius:12px; }
#taskmenu a.button.selected, #taskmenu a.selected {
  color:var(--brand) !important; background:var(--brand-tint) !important; border-radius:12px; }
#taskmenu a.button.selected:before { color:var(--brand) !important; }
#taskmenu a.logout:hover { color:var(--danger) !important; }

/* Кнопка «Написать» — брендовый акцент */
#taskmenu .action-buttons .compose {
  color:#fff !important; background:var(--brand) !important; border-radius:14px !important;
  box-shadow:var(--shadow-1); margin:4px auto 8px; }
#taskmenu .action-buttons .compose:before { color:#fff !important; }
#taskmenu .action-buttons .compose:hover { background:var(--brand-hover) !important; }

/* ============================================================= *
 *  Panels / headers                                              *
 * ============================================================= */
#layout-sidebar { background:var(--app-bg) !important; border-right:1px solid var(--border) !important; }
#layout-list    { background:var(--surface) !important; border-right:1px solid var(--border) !important; }
#layout-content { background:var(--surface) !important; }

#layout > div > .header,
#layout > div > .footer {
  background:var(--surface) !important; color:var(--text) !important;
  border-color:var(--border) !important; }
#layout-sidebar > .header, #layout-sidebar > .footer { background:var(--app-bg) !important; }
#layout > div > .header a.button { color:var(--text-2) !important; }
#layout > div > .header a.button:hover { color:var(--text) !important; }
.header-title, .header .username { color:var(--text) !important; font-weight:600; }

/* ============================================================= *
 *  Folder list  →  Gmail «pills»                                 *
 * ============================================================= */
/* папки — каждая как ОТДЕЛЬНАЯ КАРТОЧКА с рамкой и скруглёнными краями */
#mailboxlist li, .listing.folderlist li { border:0 !important; }
#mailboxlist li a,
.listing.folderlist li a {
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:20px !important; margin:4px 12px !important;
  width:auto !important; min-height:42px !important; box-sizing:border-box !important;
  padding-left:16px !important; /* отступ перед иконкой */
  position:relative !important; /* чтобы счётчик считал отступ от края карточки, а не от li */
  color:var(--text) !important;
}
#mailboxlist li a:hover,
.listing.folderlist li a:hover { background:var(--hover) !important; border-color:var(--border-strong) !important; }
#mailboxlist li.selected > a,
.listing.folderlist li.selected > a,
#mailboxlist li.selected > .treetoggle + a {
  background:var(--brand-tint) !important; color:var(--brand) !important; font-weight:600 !important;
  border-color:var(--brand) !important; }
#mailboxlist li.selected > a:before { color:var(--brand) !important; }
#mailboxlist .unreadcount, .listing .unreadcount {
  background:transparent !important; color:var(--brand) !important; font-weight:700 !important; }
/* счётчик непрочитанных — по центру карточки папки по вертикали, с отступом от края */
#mailboxlist li a .unreadcount, .listing.folderlist li a .unreadcount {
  top:50% !important; bottom:auto !important; right:14px !important;
  transform:translateY(-50%) !important; margin:0 !important; }
#mailboxlist li.selected .unreadcount { color:var(--brand) !important; }

/* ============================================================= *
 *  Message list                                                  *
 * ============================================================= */
#messagelist { color:var(--text) !important; }
#messagelist tbody tr, #messagelist tr { border-color:var(--border) !important; }
#messagelist tr:hover td { background:var(--hover) !important; }
#messagelist tr.selected td, #messagelist tr.selected:hover td {
  background:var(--selected) !important; color:var(--text) !important; }
#messagelist tr.unread td, #messagelist tr.unread .subject a {
  font-weight:700 !important; color:var(--text) !important; }
#messagelist .subject a { color:var(--text) !important; }
#messagelist .date, #messagelist .size, #messagelist .fromto .adr { color:var(--text-2) !important; }
#messagelist .flag .flagged:before, #messagelist tr.flagged .flag:before,
.flagbox.flagged, span.flagged:before { color:var(--star) !important; }
#messagelist tr.deleted td, #messagelist tr.deleted .subject a { color:var(--text-3) !important; }

/* Compact-ish comfortable rows */
.listing li, .listing td { border-color:var(--border) !important; }
.listing li:hover, .listing tbody tr:hover td { background:var(--hover) !important; }
/* без общей заливки выделения: прямоугольник просвечивал за скруглённой «пилюлей» папки */
.listing li.selected, .listing tbody tr.selected td {
  color:var(--text) !important; }
/* то же для тёмной темы — Elastic красит li.selected в #374549 поверх пилюли.
   Заливка самой пилюли (#mailboxlist li.selected > a) и выделение письма
   (#messagelist tr.selected td) заданы через id и остаются в силе. */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td { background-color:transparent !important; }

/* ============================================================= *
 *  Buttons / forms                                               *
 * ============================================================= */
.btn-primary, button.btn-primary, .btn.btn-primary, input.btn-primary {
  background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important;
  border-radius:10px !important; font-weight:600; }
.btn-primary:hover, .btn.btn-primary:hover {
  background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; }
.btn-secondary, .btn.btn-secondary {
  border-radius:10px !important; }
.btn-danger { background:var(--danger) !important; border-color:var(--danger) !important; border-radius:10px !important; }
.formbuttons .btn, .toolbarmenu .btn { border-radius:10px !important; }

.form-control:focus, .custom-select:focus, textarea:focus {
  border-color:var(--brand) !important;
  box-shadow:0 0 0 .18rem rgba(29,78,137,.20) !important; }
input[type=checkbox], input[type=radio] { accent-color:var(--brand); }
.custom-control-input:checked ~ .custom-control-label:before {
  background:var(--brand) !important; border-color:var(--brand) !important; }

/* ============================================================= *
 *  Search bar  →  rounded, soft                                  *
 * ============================================================= */
.searchbar, #mailsearchform, .searchbar form, .ui-searchbar {
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
  border-radius:13px !important; }
.searchbar input, #mailsearchform input {
  background:transparent !important; color:var(--text) !important; }
.searchbar a.button:before { color:var(--text-3) !important; }

/* --- Gmail-style строка поиска (узкая «пилюля» в одну строку с тулбаром) ---
   Поиск позиционируется абсолютно в строке тулбара: пилюля слева, кнопки
   тулбара (Выбрать/Параметры/Обновить) справа — на одном уровне. task-mail. */
body.task-mail #layout-list > .searchbar.menu {
  position:absolute !important; top:19px !important; left:17px !important; right:auto !important;
  order:0 !important; margin:0 !important; z-index:6 !important;
  width:450px !important; max-width:calc(100% - 360px) !important; height:45px !important;
  border-radius:22px !important; background:var(--surface-2) !important;
  box-shadow:none !important;
  align-items:center !important; padding:0 6px 0 8px !important;
  transition:background .18s ease, box-shadow .18s ease, border-color .18s ease !important; }
/* тулбар списка (Выбрать/Параметры/Обновить) — по центру строки, поиск слева */
body.task-mail #messagelist-header { justify-content:center !important; }
/* единый цвет всех кнопок тулбара — «Обновить» была бледнее (без класса active).
   Кнопки списка это a.select/threads/options (без класса button), поэтому целимся в любой a. */
body.task-mail #messagelist-header #toolbar-list-menu a,
body.task-mail #messagelist-header #toolbar-list-menu a:before,
body.task-mail #messagelist-header a.toolbar-button.refresh,
body.task-mail #messagelist-header a.toolbar-button.refresh:before { color:var(--text) !important; }
body.task-mail #messagelist-header a.toolbar-button.refresh:hover,
body.task-mail #messagelist-header a.toolbar-button.refresh:hover:before { color:var(--brand) !important; }
/* островок тулбара — полукруглые края + воздух сверху/снизу */
@media screen and (min-width:769px){
  body.task-mail #messagelist-header { min-height:86px !important; align-items:center !important;
    border-bottom:0 !important; box-shadow:none !important; } /* убрать линию под островком */
  /* Островок ставим на ту же линию, что поиск и блок аккаунта: поиск стоит
     top:29px при height:45px, значит его центр — 51.5px от верха шапки.
     Привязываем центр островка туда же. Поиск и аккаунт не трогаем.
     ВАЖНО: при смене top/height у поиска пересчитать и это значение. */
  body.task-mail #messagelist-header #toolbar-list-menu {
    position:absolute !important; left:50% !important; top:42.5px !important;
    transform:translate(-79%,-50%) !important; margin:0 !important;
    display:flex !important; align-items:center !important; flex-wrap:nowrap !important;
    padding:8px 15px !important; border-radius:999px !important; align-self:center !important; height:auto !important;
    box-shadow:0 2px 8px rgba(16,32,60,.12) !important; border:0 !important; } /* лёгкая тень без тяжёлого ореола-линии */
  body.task-mail #messagelist-header #toolbar-list-menu li {
    display:flex !important; align-items:center !important; height:46px !important; min-height:0 !important; }
  body.task-mail #messagelist-header #toolbar-list-menu li a { height:46px !important; min-height:46px !important; }
}

/* --- Блок аккаунта (email + меню ⋮) в правом верхнем углу (Gmail) ---
   Переносится сюда из шапки сайдбара скриптом mintrans.js (moveAccount). */
@media screen and (min-width:769px){
  body.task-mail #messagelist-header { position:relative !important; }
  body.task-mail #messagelist-header .mt-account {
    position:absolute !important; right:25px !important; top:50% !important;
    transform:translateY(-51%) !important; display:flex !important; align-items:center !important;
    gap:6px !important; z-index:5; }
  /* сброс абсолютного позиционирования Elastic у перенесённых узлов —
     иначе email и ⋮ висят порознь, а не встают в один ряд */
  body.task-mail #messagelist-header .mt-account .header-title.username,
  body.task-mail #messagelist-header .mt-account a.sidebar-menu {
    position:static !important; top:auto !important; left:auto !important; right:auto !important;
    bottom:auto !important; transform:none !important; margin:0 !important; float:none !important; }
  body.task-mail #messagelist-header .mt-account .header-title.username {
    font-size:13px !important; font-weight:500 !important; color:var(--text-2) !important;
    max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.task-mail #messagelist-header .mt-account a.sidebar-menu {
    width:34px !important; height:34px !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    color:var(--text-2) !important; }
  body.task-mail #messagelist-header .mt-account a.sidebar-menu:hover {
    background:var(--hover) !important; color:var(--text) !important; }
  /* центрируем сам глиф ⋮ (у Elastic он с line-height:58px и float:left → съезжал вниз) */
  body.task-mail #messagelist-header .mt-account a.sidebar-menu { line-height:1 !important; }
  body.task-mail #messagelist-header .mt-account a.sidebar-menu:before {
    float:none !important; line-height:1 !important; margin:0 !important; padding:0 !important;
    width:auto !important; height:auto !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important; }
  body.task-mail #messagelist-header .mt-account a.sidebar-menu .inner {
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  /* шапка сайдбара опустела (её содержимое уехало наверх) — скрываем */
  body.task-mail #layout-sidebar > .header { display:none !important; }
}
body.task-mail #layout-list > .searchbar.menu:hover {
  background:var(--surface) !important; box-shadow:0 1px 4px rgba(16,32,60,.12) !important; }
body.task-mail #layout-list > .searchbar.menu:focus-within {
  background:var(--surface) !important; box-shadow:0 2px 10px rgba(16,32,60,.16) !important;
  border-color:var(--border) !important; }
body.task-mail #layout-list > .searchbar.menu form {
  flex:1 1 auto !important; display:flex !important; align-items:center !important;
  order:2 !important; padding-left:0 !important; }
/* декоративная лупа формы — убираем, оставляем кликабельную кнопку a.search */
body.task-mail #layout-list > .searchbar.menu form:before { display:none !important; }
body.task-mail #layout-list > .searchbar.menu input {
  height:29px !important; font-size:13.5px !important; background:transparent !important;
  color:var(--text) !important; padding-left:6px !important; }
body.task-mail #layout-list > .searchbar.menu a.search { order:1 !important; margin:0 4px 0 6px !important; }
body.task-mail #layout-list > .searchbar.menu a.search:before { font-size:18px !important; color:var(--text-2) !important; }
body.task-mail #layout-list > .searchbar.menu a.options { order:3 !important; margin-left:auto !important; }
body.task-mail #layout-list > .searchbar.menu a.unread  { order:4 !important; }
body.task-mail #layout-list > .searchbar.menu a.reset   { order:5 !important; margin-right:4px !important; }
body.task-mail #layout-list > .searchbar.menu a.button {
  width:34px !important; height:34px !important; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important; }
body.task-mail #layout-list > .searchbar.menu a.button:hover { background:var(--hover) !important; }

/* --- Компактная плавающая панель параметров поиска (#searchmenu) --- */
@media screen and (min-width:769px){
  body.task-mail #layout-list > #searchmenu.searchoptions{
    position:absolute !important; top:91px !important; left:21px !important;
    width:360px !important; max-width:calc(100% - 32px) !important; margin:0 !important;
    background:var(--surface) !important; border:1px solid var(--border) !important;
    border-radius:14px !important; box-shadow:var(--shadow-2) !important;
    padding:12px !important; z-index:50 !important; max-height:none !important; overflow:visible !important; }
  #searchmenu .formcontent{ padding:0 !important; }
  #searchmenu ul.proplist{ margin:0 0 10px !important; padding:0 !important; border:0 !important; }
  #searchmenu ul.proplist li{ padding:3px 2px !important; border:0 !important; margin:0 !important; }
  #searchmenu .custom-switch{ min-height:26px !important; padding-top:2px !important; padding-bottom:2px !important; }
  #searchmenu .custom-control-label{ font-size:13.5px !important; }
  #searchmenu .input-group{ margin-bottom:8px !important; border-radius:9px !important; overflow:hidden; border:1px solid var(--border) !important; }
  #searchmenu .input-group-prepend .input-group-text,
  #searchmenu .input-group-prepend{ background:var(--surface-2) !important; border:0 !important; font-size:12.5px !important; color:var(--text-2) !important; min-width:78px; padding:0 10px !important; }
  #searchmenu .custom-select{ height:36px !important; border:0 !important; border-radius:0 !important; font-size:13.5px !important; background-color:var(--surface) !important; box-shadow:none !important; }
  #searchmenu .formbuttons{ margin:10px 0 0 !important; padding:0 !important; }
  #searchmenu .formbuttons .btn-primary{ height:40px !important; border-radius:11px !important; font-size:14px !important; width:100% !important; }
  /* панель плавающая → список НЕ прячем при открытых параметрах поиска
     (Elastic скрывал #messagelist-content инлайн-стилем, т.к. форма занимала его место) */
  body.task-mail #layout-list > #searchmenu.searchoptions:not(.hidden) ~ #messagelist-content{ display:flex !important; }
}

/* ============================================================= *
 *  Menus / popovers / dialogs                                    *
 * ============================================================= */
.popupmenu, .popover, .toolbarmenu, ul.menu, .ui-dialog {
  border-radius:14px !important; border-color:var(--border) !important;
  box-shadow:var(--shadow-2) !important; background:var(--surface) !important; }
.toolbarmenu li a:hover, .listing.iconized li a:hover,
.menu li > a:hover, .popupmenu li a:hover {
  background:var(--brand-tint) !important; color:var(--brand) !important; }
.ui-dialog .ui-dialog-titlebar { background:var(--surface) !important; color:var(--text) !important;
  border-bottom:1px solid var(--border) !important; }

/* ============================================================= *
 *  Message view (preview / read)                                 *
 * ============================================================= */
#messageheader, .messageheaderbox, .message-headers {
  background:var(--surface) !important; color:var(--text) !important; }
.contactphoto, .fromto .contactname, #messageheader .subject { color:var(--text) !important; }
.attachmentslist li, .attachmentslist a {
  border-radius:11px !important; border-color:var(--border) !important; background:var(--surface-2) !important; }
.attachmentslist a:hover { border-color:var(--brand) !important; }
blockquote { border-radius:8px; }

/* Round avatars everywhere */
.contactpic, .fromto .contactphoto, .boxtitle .contactphoto, img.contactphoto,
.message-list .contactphoto { border-radius:50% !important; }

/* ============================================================= *
 *  Quota widget                                                  *
 * ============================================================= */
.quota-widget .bar, .quota_bar, .quota-widget .value {
  background:var(--brand) !important; border-radius:3px; }
.quota-widget { color:var(--text-2) !important; }

/* ============================================================= *
 *  Login page                                                    *
 * ============================================================= */
.task-login { background:var(--app-bg) !important; }
.task-login #layout, .task-login #layout-content { background:transparent !important; }
.task-login #layout-content.selected {
  display:flex; align-items:center; justify-content:center; }
.task-login #login-form, .task-login .box, .task-login .formcontent {
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:18px !important; box-shadow:var(--shadow-2) !important;
  padding:34px 30px !important;
  width:100% !important; max-width:420px !important; box-sizing:border-box !important;
  min-width:0 !important; } /* min-width:auto у flex-элемента не давал карточке сжаться */
.task-login #logo { max-width:230px; height:auto; margin:6px auto 22px; display:block; }
.task-login .btn-primary { width:100%; height:46px; border-radius:12px !important; font-size:15px; }
.task-login #login-footer { color:var(--text-3) !important; margin-top:16px; text-align:center; }

/* ============================================================= *
 *  Scrollbars                                                    *
 * ============================================================= */
* { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:7px;
  border:3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ============================================================= *
 *  Gmail-style unified left panel refinements                    *
 * ============================================================= */
/* Заголовок сайдбара (имя пользователя) — тише, как в Gmail */
#layout-sidebar > .header { background:var(--app-bg) !important; border-bottom:0 !important;
  font-weight:600; color:var(--text-2) !important; }
#layout-sidebar > .footer { background:var(--app-bg) !important; border-top:0 !important; }
/* Кнопка «Написать» на всю ширину рейла как заметная точка входа */
#taskmenu .action-buttons { display:block; }
#taskmenu .action-buttons .compose {
  width:auto !important; min-height:44px; padding:0 16px !important; }
/* Разделы папок: побольше воздуха, скруглённые «пилюли» справа (Gmail) */
#mailboxlist li a, .listing.folderlist li a { height:auto; min-height:38px; }
/* Task-иконки (почта/контакты/настройки) — компактный столбик снизу рейла */
#taskmenu .special-buttons { margin-top:auto; }

/* ============================================================= *
 *  Gmail single left column (mail view) — из template override   *
 *  Написать (сверху) → папки → навигация (внизу) одной колонкой. *
 * ============================================================= */
.mintrans-compose-wrap, .mintrans-nav { display:none; }
@media screen and (min-width:769px){
  /* прячем узкий рейл задач — его роль берёт единая левая панель */
  body.task-mail #layout-menu { display:none !important; }
  body.task-mail .mintrans-compose-wrap { display:block !important; }
  body.task-mail .mintrans-nav { display:flex !important; }
  body.task-mail #layout-sidebar { flex:0 0 260px !important; min-width:260px !important; max-width:320px !important; }
}
/* кнопка «Написать» сверху панели */
.mintrans-compose-wrap { padding:14px 12px 8px; }
a.button.compose.mintrans-compose {
  display:flex !important; align-items:center; justify-content:flex-start; gap:12px;
  height:40px; padding:0 22px; width:100%;
  background:var(--brand) !important; color:#fff !important;
  border-radius:20px !important; font-size:15px; font-weight:600; box-shadow:var(--shadow-1);
}
a.button.compose.mintrans-compose:before { color:#fff !important; margin:0 !important; float:none !important;
  height:auto !important; } /* сброс height:1em из иконочного правила Elastic */
a.button.compose.mintrans-compose:hover { background:var(--brand-hover) !important; }
a.button.compose.mintrans-compose .inner {
  display:inline !important; position:static !important; clip:auto !important;
  width:auto !important; height:auto !important; margin:0 !important; font-size:15px; overflow:visible !important; }
/* навигация внизу панели: только иконки, ровным рядом */
.mintrans-nav {
  justify-content:space-around; align-items:center; flex-wrap:wrap; gap:6px 2px;
  padding:8px 4px; margin-top:auto; border-top:0; }
/* пустая белая полоса-футер сайдбара над нижней навигацией — убираем */
body.task-mail #layout-sidebar > .footer.small,
body.task-mail #layout-sidebar > .footer:empty { display:none !important; }
.mintrans-nav a.button {
  flex:0 0 auto; width:46px; height:44px; border-radius:12px; display:flex !important;
  align-items:center; justify-content:center; color:var(--text-2) !important; }
.mintrans-nav a.button:before { margin:0 !important; float:none !important; font-size:1.3em !important; }
.mintrans-nav a.button .inner {
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mintrans-nav a.button:hover { background:var(--hover) !important; color:var(--text) !important; }
.mintrans-nav a.button.selected { color:var(--brand) !important; background:var(--brand-tint) !important; }
.mintrans-nav a.logout:hover { color:var(--danger) !important; }

/* Нижняя навигация в рамке со скруглёнными краями, приподнята от низа.
   Только для развёрнутого сайдбара (в свёрнутом — своя раскладка ниже). */
@media screen and (min-width:769px){
  body.task-mail #layout:not(.mtcollapsed) .mintrans-nav {
    margin:8px 12px 14px !important; padding:6px 6px !important;
    background:var(--surface) !important; border:1px solid var(--border) !important;
    border-radius:26px !important; box-shadow:var(--shadow-1) !important;
    flex-wrap:nowrap !important; gap:0 !important; justify-content:space-between !important; }
  body.task-mail #layout:not(.mtcollapsed) .mintrans-nav a.button,
  body.task-mail #layout.mtcollapsed #layout-sidebar:hover .mintrans-nav a.button {
    width:40px !important; height:40px !important; flex:1 1 0 !important; max-width:44px; }
  /* свёрнутый сайдбар при наведении — та же горизонтальная рамка */
  body.task-mail #layout.mtcollapsed #layout-sidebar:hover .mintrans-nav {
    margin:8px 12px 14px !important; padding:6px 6px !important;
    background:var(--surface) !important; border:1px solid var(--border) !important;
    border-radius:26px !important; box-shadow:var(--shadow-1) !important;
    flex-direction:row !important; flex-wrap:nowrap !important; gap:0 !important; justify-content:space-between !important; }
  /* свёрнуто без наведения — узкая ВЕРТИКАЛЬНАЯ рамка (рамка не пропадает) */
  body.task-mail #layout.mtcollapsed #layout-sidebar:not(:hover) .mintrans-nav {
    flex-direction:column !important; flex-wrap:nowrap !important; gap:3px !important;
    margin:18px auto 8px !important; padding:6px 0px !important;
    background:var(--surface) !important; border:0px solid var(--border) !important;
    border-radius:22px !important; box-shadow:var(--shadow-1) !important;
    width:54px !important; justify-content:center !important; align-items:center !important; }
  body.task-mail #layout.mtcollapsed #layout-sidebar:not(:hover) .mintrans-nav a.button {
    width:38px !important; height:38px !important; max-width:none !important; flex:0 0 auto !important; }
}

/* ============================================================= *
 *  Сворачивание боковой панели (гамбургер, как в Gmail)          *
 * ============================================================= */
.mt-burger {
  width:40px; height:40px; border:none; background:transparent; color:var(--text-2);
  cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:14px 0 8px 16px; padding:0; }
.mt-burger:hover { background:var(--hover); color:var(--text); }
/* браузер рисовал вокруг кнопки квадратную рамку фокуса — заменяем
   на круглое кольцо в тон бренду */
.mt-burger:focus { outline:none !important; }
.mt-burger:focus-visible {
  outline:none !important; box-shadow:0 0 0 3px rgba(29,78,137,.28) !important; }
html.dark-mode .mt-burger:focus-visible { box-shadow:0 0 0 3px rgba(77,139,218,.35) !important; }
.mt-burger-icon { position:relative; display:block; width:18px; height:2px;
  background:currentColor; border-radius:2px; }
.mt-burger-icon:before, .mt-burger-icon:after {
  content:''; position:absolute; left:0; width:18px; height:2px;
  background:currentColor; border-radius:2px; }
.mt-burger-icon:before { top:-6px; }
.mt-burger-icon:after { top:6px; }
@media screen and (min-width:769px){
  /* Плавная анимация ширины (свёрнутый ⇄ развёрнутый); список едет плавно */
  #layout.mtcollapsed #layout-sidebar,
  #layout.mtcollapsed #layout-list {
    transition: flex-basis .24s cubic-bezier(.4,0,.2,1),
                min-width .24s cubic-bezier(.4,0,.2,1),
                max-width .24s cubic-bezier(.4,0,.2,1),
                box-shadow .24s ease !important; }
  /* Свёрнуто (72px) */
  #layout.mtcollapsed #layout-sidebar {
    flex:0 0 72px !important; min-width:72px !important; max-width:72px !important;
    align-items:center; overflow:hidden; }
  /* Наведение мышью → плавно раскрывается, как в Gmail */
  #layout.mtcollapsed #layout-sidebar:hover {
    flex:0 0 258px !important; min-width:258px !important; max-width:258px !important;
    align-items:stretch; overflow:visible;
    box-shadow:6px 0 26px rgba(0,0,0,.22); z-index:40; }

  /* Свёрнутый вид элементов — ТОЛЬКО когда НЕ наведено */
  #layout.mtcollapsed #layout-sidebar:not(:hover) .mt-burger { margin:8px auto 2px !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) .mintrans-compose-wrap {
    padding:8px 0 10px !important; display:flex; justify-content:center; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) a.mintrans-compose {
    width:48px !important; height:48px !important; min-width:48px !important; padding:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:0 !important; border-radius:20px !important; margin:0 auto !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) a.mintrans-compose .inner { display:none !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) a.mintrans-compose:before {
    float:none !important; margin:0 !important; padding:0 !important;
    display:inline-block !important; width:auto !important; height:auto !important;
    font-size:22px !important; line-height:1 !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #folderlist-content { padding:0 !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist { text-align:center; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li a {
    font-size:0 !important; display:flex !important;
    justify-content:center !important; padding:0 !important; margin:3px auto !important;
    width:46px !important; height:42px !important;
    background:transparent !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li a:before {
    font-size:20px !important; margin:0 !important; width:auto !important; float:none !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li.selected > a { background:var(--brand-tint) !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li.selected > a:before { color:var(--brand) !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li a:hover { background:var(--hover) !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist .unreadcount { display:none !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) > .header,
  #layout.mtcollapsed #layout-sidebar:not(:hover) > .footer {
    font-size:0 !important; overflow:hidden; height:0 !important; padding:0 !important; }
  /* нижняя навигация: всегда строка с переносом (fixed 46px) — при росте
     ширины иконки естественно перетекают из столбика в строку, плавно. */
  #layout.mtcollapsed #layout-sidebar:not(:hover) .mintrans-nav { padding:8px 4px; }
}

/* ============================================================= *
 *  Gmail single-pane reading (no side preview)                   *
 *  Список на всю ширину; письмо открывается на всю ширину.       *
 *  Папки слева всегда видны. Работает через :has() (Chrome).     *
 * ============================================================= */
@media screen and (min-width:769px){
  /* ВАЖНО: только на странице списка (action-none). На отдельной странице
     письма (_action=show) эти правила НЕ действуют — иначе она чёрная. */
  /* по умолчанию — список во всю ширину, предпросмотр скрыт */
  html:not(.iframe) body.task-mail.action-none #layout-content { display:none !important; }
  html:not(.iframe) body.task-mail.action-none #layout-list {
    flex:1 1 auto !important; max-width:none !important; min-width:0 !important;
    border-right:0 !important; }
  /* когда открыто письмо (класс ставит mintrans.js по состоянию iframe) —
     оно на всю ширину, список скрыт. НЕ используем :has(.selected), т.к.
     после «назад» строка остаётся выбранной, а письмо уже закрыто. */
  html:not(.iframe) body.task-mail.action-none #layout.mintrans-reading #layout-list { display:none !important; }
  html:not(.iframe) body.task-mail.action-none #layout.mintrans-reading #layout-content {
    display:flex !important; flex:1 1 auto !important; max-width:none !important; }
  /* кнопка «назад» в просмотре письма (на широких экранах Elastic её прячет) */
  html:not(.iframe) body.task-mail.action-none #layout-content .back-list-button {
    display:inline-flex !important; }
}

/* ============================================================= *
 *  Gmail-style message rows                                      *
 *  Колонки: чекбокс → отправитель → тема → дата (одна строка).   *
 *  Строку делаем flex и переставляем колонки через order.        *
 * ============================================================= */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-mail #messagelist { display:block !important; }
  html:not(.iframe) body.task-mail #messagelist thead { display:none !important; }
  html:not(.iframe) body.task-mail #messagelist tbody { display:block !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr {
    display:flex !important; align-items:center; width:100%; box-sizing:border-box;
    padding:0 24px 0 10px; min-height:42px; }
  /* резервируем место под скроллбар, чтобы дата не пряталась под ним */
  html:not(.iframe) body.task-mail #messagelist-content,
  html:not(.iframe) body.task-mail #layout-list .scroller { scrollbar-gutter:stable; }
  html:not(.iframe) body.task-mail #messagelist td {
    display:flex !important; align-items:center; border:0 !important; height:auto !important;
    padding:0 4px !important; }
  html:not(.iframe) body.task-mail #messagelist td { padding-top:0 !important; padding-bottom:0 !important; }
  html:not(.iframe) body.task-mail #messagelist td.selection { order:0; flex:0 0 30px; width:30px; justify-content:center; }
  html:not(.iframe) body.task-mail #messagelist td.flag    { order:1; flex:0 0 28px; width:28px; justify-content:center; overflow:hidden; }
  html:not(.iframe) body.task-mail #messagelist td.status  { order:2; flex:0 0 24px; width:24px; justify-content:center; overflow:hidden; }
  /* флаг/статус: иконки нормального размера, по центру (без float внутри flex) */
  html:not(.iframe) body.task-mail #messagelist td.flag > *,
  html:not(.iframe) body.task-mail #messagelist td.status > * {
    float:none !important; margin:0 !important; padding:0 !important;
    display:inline-flex !important; align-items:center; justify-content:center; }
  html:not(.iframe) body.task-mail #messagelist td.flag :before,
  html:not(.iframe) body.task-mail #messagelist td.status :before {
    float:none !important; margin:0 !important; width:auto !important;
    font-size:15px !important; line-height:1 !important; }
  html:not(.iframe) body.task-mail #messagelist td.fromto  {
    order:3; flex:0 0 190px; width:190px !important; max-width:190px; overflow:hidden; }
  html:not(.iframe) body.task-mail #messagelist td.fromto span,
  html:not(.iframe) body.task-mail #messagelist td.fromto a {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; width:100%; }
  /* тема — по центру строки */
  html:not(.iframe) body.task-mail #messagelist td.subject {
    order:4; flex:1 1 auto; min-width:0; overflow:hidden; justify-content:center !important; }
  html:not(.iframe) body.task-mail #messagelist td.subject a,
  html:not(.iframe) body.task-mail #messagelist td.subject span {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
    width:auto; max-width:100%; text-align:center !important; }
  html:not(.iframe) body.task-mail #messagelist td.attachment { order:5; flex:0 0 auto; }
  /* дата справа — колонка широкая, чтобы влезали и относительные даты («Сегодня 11:55») */
  html:not(.iframe) body.task-mail #messagelist td.date {
    order:6; flex:0 0 auto; margin-left:auto; min-width:120px; width:auto; max-width:none;
    justify-content:flex-end; white-space:nowrap; overflow:visible !important;
    padding-left:12px; padding-right:4px;
    color:var(--text-2) !important; font-size:12.5px; }
  html:not(.iframe) body.task-mail #messagelist td.size    { display:none !important; }
  html:not(.iframe) body.task-mail #messagelist td.threads { display:none !important; }
}

/* ============================================================= *
 *  Message list rows → карточки (рамка + скруглённые края)        *
 *  Каждая строка письма — отдельная «пилюля» с рамкой; подсветка  *
 *  кладётся на всю строку и обрезается по скруглению.            *
 * ============================================================= */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-mail #messagelist tbody tr {
    width:auto !important;  /* не 100%: иначе карточка залезает под скроллбар справа */
    margin:6px 16px !important; border:1px solid var(--border) !important;
    border-radius:21px !important; background:var(--surface) !important;
    overflow:hidden !important; min-height:44px !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr:hover {
    background:var(--hover) !important; border-color:var(--border-strong) !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr:hover td { background:transparent !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr.selected {
    background:var(--selected) !important; border-color:var(--brand) !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr.selected td { background:transparent !important; }
}

/* ============================================================= *
 *  Message reading view — Gmail-style header                     *
 *  (#message-header есть только в просмотре письма, в т.ч. iframe)*
 * ============================================================= */
#message-header { padding:24px 44px 18px !important; max-width:1000px !important; margin-left:auto !important; margin-right:auto !important; }
#message-header h2.subject {
  font-size:24px !important; font-weight:500 !important; line-height:1.32 !important;
  margin:0 0 20px !important; letter-spacing:-.2px; color:var(--text) !important; }
#message-header .header { display:flex !important; align-items:flex-start !important; gap:16px !important; }
#message-header img.contactphoto,
#message-header .contactphoto {
  width:46px !important; height:46px !important; min-width:46px;
  border-radius:50% !important; object-fit:cover; background:var(--surface-2); }
/* цветной аватар с инициалом (ставит mintrans.js) */
#message-header .mt-avatar, .mt-avatar {
  width:46px !important; height:46px !important; min-width:46px !important;
  border-radius:50% !important; display:flex !important; align-items:center;
  justify-content:center; color:#fff !important; font-size:20px; font-weight:600;
  flex:0 0 46px; text-transform:uppercase; user-select:none; }
#message-header .header-content { flex:1 1 auto; min-width:0; padding-top:2px; }
#message-header .header-summary { font-size:14.5px !important; line-height:1.55; }
#message-header .header-links {
  margin-top:12px !important; display:flex; gap:20px; flex-wrap:wrap;
  padding-top:8px; border-top:1px solid var(--border); }
#message-header .header-links a { font-size:12.5px !important; color:var(--text-2) !important; }
.message-htmlpart, #messagebody, .message-part {
  padding:6px 44px 40px !important; max-width:1000px !important;
  margin-left:auto !important; margin-right:auto !important; }
/* список вложений — тоже по центру, в одну колонку с телом письма */
#attachment-list, ul.attachmentslist {
  max-width:1000px !important; margin-left:auto !important; margin-right:auto !important;
  box-sizing:border-box; }

/* Шапка письма: тулбар (Ответить/Переслать/…) по центру, «Назад» слева.
   position:relative обязателен — «Назад» позиционируется абсолютно
   относительно этой шапки, без него кнопка уедет к другому предку. */
#layout-content > .header {
  justify-content:center !important; position:relative !important;
  min-height:70px !important; padding:6px .25em !important; }
/* Кнопка «Назад» в просмотре письма — красивая «пилюля» слева */
#layout-content > .header .back-list-button {
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  width:auto !important; min-width:0 !important; height:40px !important;
  padding:0 20px 0 14px !important; border-radius:20px !important;
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
  color:var(--text) !important; box-sizing:border-box !important;
  font-size:14px !important; font-weight:500 !important;
  position:absolute !important; left:16px !important; top:50% !important;
  transform:translateY(-50%) !important; margin:0 !important; flex:0 0 auto !important; }
#layout-content > .header .back-list-button:hover {
  background:var(--brand-tint) !important; border-color:var(--brand) !important; color:var(--brand) !important; }
#layout-content > .header .back-list-button:before {
  font-size:18px !important; margin:0 !important; float:none !important;
  width:auto !important; height:auto !important; }
#layout-content > .header .back-list-button .inner { display:none !important; }
#layout-content > .header .back-list-button:after {
  content:"Назад"; font-size:14px; font-weight:500; white-space:nowrap; line-height:1; }

/* Рамка вокруг всего списка писем (со скруглёнными краями).
   Ставим на контейнер-скроллер, чтобы рамка была фиксированной, а не уезжала
   при прокрутке; внутри — карточки писем. */
@media screen and (min-width:769px){
  body.task-mail.action-none #layout-list > #messagelist-content{
    width:auto !important; /* не 100%/фикс: иначе рамка вылезает справа за панель */
    border:1px solid var(--border-strong) !important; border-radius:20px !important;
    margin:20px 20px !important; box-sizing:border-box !important; /* внешний отступ со всех 4 сторон */
    padding:6px 8px !important; /* внутренний отступ со всех 4 сторон */
    box-shadow:0 2px 12px rgba(16,32,60,.10) !important;
    background:var(--app-bg) !important; scrollbar-gutter:auto !important; }
  /* скроллбар внутри рамки — потоньше, чтобы правый зазор не был большим */
  body.task-mail.action-none #layout-list > #messagelist-content::-webkit-scrollbar{ width:9px; }
  /* карточки писем внутри рамки */
  html:not(.iframe) body.task-mail #messagelist tbody tr{ margin:6px 6px !important; }
}

/* Нижняя навигация по страницам — компактно, вправо, в стиле дизайна */
@media screen and (min-width:769px){
  body.task-mail #layout-list > .pagenav.footer{
    justify-content:flex-end !important; align-items:center !important; gap:7px !important;
    padding:15px 25px 15px !important; border-top:0 !important;  /* воздух сверху/снизу, отступ снизу */
    background:transparent !important; } /* без линии над пагинацией */
  body.task-mail #layout-list > .pagenav.footer > *{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; }
  body.task-mail #layout-list > .pagenav.footer .pagenav-text{
    font-size:13.5px !important; font-weight:500 !important; color:var(--text-2) !important;
    white-space:nowrap !important; margin:0 10px 0 0 !important; padding:0 !important; }
  body.task-mail #layout-list > .pagenav.footer a.button{
    width:38px !important; height:38px !important; border-radius:11px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:0 !important; margin:0 !important; color:var(--text-2) !important; }
  body.task-mail #layout-list > .pagenav.footer a.button:before{ font-size:16px !important; }
  body.task-mail #layout-list > .pagenav.footer a.button:not(.disabled):hover{
    background:var(--brand-tint) !important; color:var(--brand) !important; }
  body.task-mail #layout-list > .pagenav.footer a.button.disabled{ opacity:.4 !important; }
  body.task-mail #layout-list > .pagenav.footer .rcpagejumper{
    width:46px !important; height:36px !important; text-align:center !important; margin:0 6px !important;
    border-radius:11px !important; border:1px solid var(--border) !important; font-size:14px !important;
    font-weight:600 !important; color:var(--text) !important; background:var(--surface) !important; }
  body.task-mail #layout-list > .pagenav.footer .rcpagejumper:focus{
    border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-tint) !important; outline:0 !important; }
}

/* Misc brand accents */
.pagenav .selected, .pagenav a:hover { color:var(--brand) !important; }
.watermark, .logo { filter:none; }
.floating-action-buttons a.button.fab { background:var(--brand) !important; color:#fff !important; }

/* ============================================================= *
 *  Составление письма как в Gmail — плавающая панель снизу справа *
 *  (панель создаёт mintrans.js; внутри — iframe со страницей     *
 *   составления в режиме _framed=1).                             *
 * ============================================================= */
.mt-compose-panel {
  position:fixed; right:24px; bottom:0; width:520px; height:540px; max-height:88vh;
  background:var(--surface); border-radius:12px 12px 0 0;
  box-shadow:0 -2px 8px rgba(0,0,0,.15), 0 8px 40px rgba(0,0,0,.28);
  z-index:9000; display:flex; flex-direction:column; overflow:hidden; }
.mt-compose-head {
  background:#2b3648; color:#fff; padding:0 8px 0 16px; height:40px; flex:0 0 40px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:600; cursor:pointer; }
.mt-compose-head .mt-btns { display:flex; gap:2px; }
.mt-compose-head button {
  background:none; border:0; color:#fff; width:30px; height:30px; cursor:pointer;
  border-radius:6px; font-size:15px; line-height:1; padding:0; }
.mt-compose-head button:hover { background:rgba(255,255,255,.15); }
.mt-compose-frame { flex:1 1 auto; border:0; width:100%; background:var(--surface); }
/* Свёрнутое окно прижимается к правому нижнему углу. Перетаскивание
   переводит панель на координаты left/top инлайном, поэтому при сворачивании
   их нужно сбросить через !important — иначе окно зависало посреди экрана. */
.mt-compose-panel.mt-min {
  height:44px !important; width:380px !important;
  left:auto !important; top:auto !important;
  right:28px !important; bottom:0 !important;
  border-radius:14px 14px 0 0 !important; }
.mt-compose-panel.mt-min .mt-compose-frame { display:none; }
.mt-compose-panel.mt-full {
  right:0; left:0; top:0; bottom:0; width:min(920px,92vw); height:92vh;
  margin:auto; border-radius:14px; max-height:none; }
@media (max-width:768px){ .mt-compose-panel { right:0; left:0; width:auto; } }

/* Перетаскивание и изменение размера окна составления */
.mt-compose-head { cursor:move; user-select:none; }
.mt-compose-head button { cursor:pointer; }
/* Ручка изменения размера невидима: сама возможность тянуть за угол
   остаётся, но насечка не портит скруглённый край. */
.mt-compose-grip {
  position:absolute; right:0; bottom:0; width:22px; height:22px;
  cursor:nwse-resize; z-index:5; background:transparent; }
/* во время перетаскивания курсор не должен уходить в iframe, иначе
   окно «отклеивается» от мыши на первом же движении над формой */
.mt-compose-panel.mt-busy .mt-compose-frame { pointer-events:none; }
.mt-compose-panel.mt-full .mt-compose-grip,
.mt-compose-panel.mt-min .mt-compose-grip { display:none; }
.mt-compose-panel.mt-full .mt-compose-head { cursor:default; }

/* --- Новый формат окна написания: широкое, белая шапка без заголовка --- */
.mt-compose-panel { width:min(1080px,94vw); height:min(880px,92vh); right:28px;
  bottom:20px; border-radius:16px; }
.mt-compose-head { background:var(--surface); color:var(--text); height:46px; flex:0 0 46px;
  padding:0 12px 0 20px; justify-content:flex-end; cursor:default; }
.mt-compose-head > span:first-child { display:none; } /* заголовок «Новое сообщение» не нужен */
.mt-compose-head button { color:var(--text-2); width:34px; height:34px; font-size:16px;
  border-radius:8px; cursor:pointer; }
.mt-compose-head button:hover { background:var(--hover); color:var(--text); }

/* --- Внутри фрейма составления: строки адресатов, вложения, футер --- */
body.action-compose #compose-headers { position:relative !important; }
/* каждая строка — во всю ширину, тонкая линия снизу, метка серым слева */
/* Скрытые строки должны оставаться скрытыми: display:flex !important ниже
   перебивал класс .hidden, и Копия/Скрытая/Ответить/Followup-To показывались
   сразу, минуя кнопку «+». */
body.action-compose .compose-headers .form-group.row.hidden{ display:none !important; }
body.action-compose .compose-headers .form-group.row {
  display:flex !important; align-items:center !important; flex-wrap:nowrap !important;
  margin:0 !important; min-height:46px !important; padding:0 14px 0 18px !important;
  border-bottom:1px solid var(--border) !important; }
/* Метки набирались самым светлым токеном --text-3 и на светлой теме почти
   не читались. Берём основной цвет текста: токен, поэтому в тёмной теме
   он останется светлым автоматически. */
body.action-compose .compose-headers .form-group.row > label.col-form-label {
  flex:0 0 auto !important; width:auto !important; max-width:none !important;
  padding:0 12px 0 0 !important; margin:0 !important;
  color:var(--text) !important; font-size:14px !important; font-weight:500 !important; }
/* поля ввода, подсказки и иконки строк — тоже читаемыми */
body.action-compose .compose-headers input,
body.action-compose .compose-headers textarea,
body.action-compose #compose-subject{ color:var(--text) !important; }
body.action-compose .compose-headers input::placeholder,
body.action-compose #compose-subject::placeholder{ color:var(--text-2) !important; opacity:1 !important; }
body.action-compose .compose-headers .input-group-text,
body.action-compose .compose-headers .input-group-append a,
body.action-compose .compose-headers .input-group-append a:before{
  color:var(--text-2) !important; }
body.action-compose .compose-headers .input-group-append a:hover,
body.action-compose .compose-headers .input-group-append a:hover:before{
  color:var(--brand) !important; }
body.action-compose #mt-attach-row .mt-cbtn,
body.action-compose #mt-attach-row a{ color:var(--text) !important; }
body.action-compose .compose-headers .form-group.row > div[class*="col-"] {
  flex:1 1 auto !important; width:auto !important; max-width:none !important; padding:0 !important; }
body.action-compose .compose-headers .input-group,
body.action-compose .compose-headers .recipient-input {
  border:0 !important; background:transparent !important; box-shadow:none !important; }
body.action-compose .compose-headers input,
body.action-compose .compose-headers textarea {
  border:0 !important; background:transparent !important; box-shadow:none !important;
  font-size:14px !important; }
body.action-compose .compose-headers .input-group-text { border:0 !important; background:transparent !important;
  color:var(--text-3) !important; }

/* строка «Прикрепить файл» / «Шаблоны» */
#mt-attach-row {
  display:flex !important; align-items:center !important; gap:22px !important;
  padding:8px 14px 8px 18px !important; border-bottom:1px solid var(--border) !important; }
#mt-attach-row .mt-cbtn, #mt-attach-row a.responses {
  background:none !important; border:0 !important; color:var(--text) !important;
  font-size:14px !important; cursor:pointer !important; padding:6px 2px !important;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  width:auto !important; height:auto !important; max-width:none !important; float:none !important; }
#mt-attach-row a.responses:before { margin:0 8px 0 0 !important; float:none !important; }
#mt-attach-row .mt-cbtn:hover, #mt-attach-row a.responses:hover { color:var(--brand) !important; }

/* футер с кнопками */
body.action-compose .formbuttons {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:12px 16px !important; border-top:1px solid var(--border) !important;
  background:var(--surface) !important; }
body.action-compose .formbuttons .btn.send {
  background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important;
  border-radius:10px !important; padding:8px 24px !important; font-weight:600 !important; }
body.action-compose .formbuttons a.save.draft,
body.action-compose .formbuttons .mt-cancel {
  background:var(--surface-2) !important; color:var(--text) !important; border:0 !important;
  border-radius:10px !important; padding:8px 18px !important; font-size:14px !important;
  cursor:pointer !important; width:auto !important; height:auto !important;
  max-width:none !important; float:none !important; display:inline-flex !important;
  align-items:center !important; }
body.action-compose .formbuttons a.save.draft:before { display:none !important; }
body.action-compose .formbuttons a.save.draft:hover,
body.action-compose .formbuttons .mt-cancel:hover { background:var(--hover) !important; }
/* верхняя строка тулбара: убираем заголовок и «Параметры».
   «Вложить» остаётся — она входит в пятёрку кнопок островка. */
/* Префикс html:not(.iframe) нужен для веса: правило нормализации кнопок
   островка ниже по файлу специфичнее и возвращало им display:inline-flex,
   из-за чего «Параметры и вложения» продолжали показываться. */
html:not(.iframe) body.action-compose #layout-content > .header > .header-title,
html:not(.iframe) body.action-compose .toolbar a.options,
html:not(.iframe) body.action-compose #toolbar-menu a.options,
html:not(.iframe) body.action-compose #messagetoolbar a.options,
html:not(.iframe) body.action-compose #toolbar-menu li:has(> a.options),
/* «Открыть в новом окне» в футере не нужна */
html:not(.iframe) body.action-compose .formbuttons a.extwin,
html:not(.iframe) body.action-compose .formbuttons .float-right{ display:none !important; }

/* островок тулбара составления: вмещать все кнопки, не обрезать подписи.
   Elastic держит кнопки в max-width:6rem и при нехватке места добавляет
   стрелку переполнения — снимаем потолок и разрешаем перенос. */
/* шапка-контейнер: без линии снизу, высота по содержимому, островок по центру */
body.action-compose #layout-content > .header {
  height:auto !important; min-height:0 !important; padding:8px 12px !important;
  border-bottom:0 !important; box-shadow:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important; }
/* сам островок: высота по кнопкам, содержимое центрировано по обеим осям */
body.action-compose #messagetoolbar {
  position:static !important; float:none !important; margin:0 auto !important;
  display:flex !important; flex-wrap:nowrap !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important; max-width:none !important;
  height:auto !important; min-height:0 !important; padding:8px 15px !important;
  border:0 !important; border-radius:999px !important;
  background:var(--surface) !important;
  box-shadow:0 2px 8px rgba(16,32,60,.12) !important; }
body.action-compose #messagetoolbar > li,
body.action-compose #messagetoolbar > .dropbutton {
  display:flex !important; align-items:center !important;
  height:auto !important; min-height:0 !important; border:0 !important; }
/* разделитель-«линия» между кнопками в тулбаре не нужен */
body.action-compose #messagetoolbar .spacer { display:none !important; }
/* подписи кнопок не обрезать: Elastic держит их в max-width:6rem */
body.action-compose #messagetoolbar a {
  max-width:none !important; min-width:0 !important; width:auto !important;
  height:auto !important; min-height:0 !important;
  padding:4px 10px !important; overflow:visible !important; border:0 !important; }
body.action-compose #messagetoolbar a .inner {
  max-width:none !important; overflow:visible !important;
  text-overflow:clip !important; white-space:nowrap !important; }

/* В островке тулбара составления должны быть все пять кнопок:
   Сохранить, Вложить, Подпись, Ответы, Орфография. Ничего не прячем
   и никуда не переносим — мелькать при обновлении тоже нечему. */

/* Поле написания письма — скруглённая карточка в тон остальным блокам.
   Скругление держит контейнер, overflow:hidden не даёт панели редактора
   и области ввода выйти углами за его форму. */
body.action-compose #composebodycontainer{
  margin:8px 18px 18px !important; border-radius:16px !important;
  border:1px solid var(--border) !important; overflow:hidden !important;
  background:var(--surface) !important; box-sizing:border-box !important; }
/* белая подложка под текстом: без неё сквозь поле просвечивал градиент фона.
   Для TinyMCE это отдельный iframe, поэтому красим и его. */
body.action-compose #composebody,
body.action-compose #composebodycontainer .tox-edit-area,
body.action-compose #composebodycontainer .tox-edit-area__iframe,
body.action-compose #composebodycontainer .tox-sidebar-wrap,
body.action-compose #composebodycontainer .mce-edit-area,
body.action-compose #composebodycontainer .mce-container-body{
  background:var(--surface) !important; }
/* нижние углы скругляем и у внутренних слоёв: они выше контейнера по стеку
   и обрезкой по overflow не всегда закрываются */
body.action-compose #composebodycontainer .tox-sidebar-wrap,
body.action-compose #composebodycontainer .tox-edit-area,
body.action-compose #composebodycontainer .tox-edit-area__iframe,
body.action-compose #composebodycontainer .mce-edit-area,
body.action-compose #composebody{
  border-radius:0 0 16px 16px !important; }
body.action-compose #composebodycontainer .tox-tinymce,
body.action-compose #composebodycontainer .mce-tinymce,
body.action-compose #composebody{
  border:0 !important; border-radius:16px !important; }
body.action-compose #composebodycontainer .tox .tox-editor-header,
body.action-compose #composebodycontainer .mce-top-part{
  border-radius:16px 16px 0 0 !important; border:0 !important; }
body.action-compose #composebodycontainer .tox .tox-edit-area,
body.action-compose #composebodycontainer .tox-sidebar-wrap{
  border-radius:0 0 16px 16px !important; }

/* отступ слева у всей раскладки окна составления */
body.action-compose #layout{ padding-left:23px !important; box-sizing:border-box !important; }

/* правый сайдбар «Параметры и вложения» убран — содержимое перенесено в форму */
body.action-compose #layout-sidebar { display:none !important; }
body.action-compose #layout-content { width:100% !important; max-width:none !important;
  flex:1 1 auto !important; }
/* строка «От кого» не нужна — аккаунт отправителя и так очевиден */
body.action-compose #compose_from { display:none !important; }

/* список вложений под строкой «Прикрепить файл» */
body.action-compose #attachment-list.mt-attlist {
  margin:0 !important; padding:6px 14px 6px 18px !important; list-style:none !important;
  display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
body.action-compose #attachment-list.mt-attlist:empty { display:none !important; }
body.action-compose #attachment-list.mt-attlist li {
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
  border-radius:10px !important; padding:6px 10px !important; font-size:13px !important;
  display:flex !important; align-items:center !important; gap:8px !important;
  width:auto !important; float:none !important; }

/* параметры отправки — карточкой над футером по кнопке ⋯ */
body.action-compose .formbuttons { position:relative !important; }
body.action-compose .mt-opts-btn {
  margin-left:auto !important; background:none !important; border:0 !important;
  color:var(--text-2) !important; font-size:20px !important; line-height:1 !important;
  width:36px !important; height:36px !important; border-radius:50% !important;
  cursor:pointer !important; }
body.action-compose .mt-opts-btn:hover { background:var(--hover) !important; color:var(--text) !important; }
body.action-compose #mt-opts { display:none !important; }
body.action-compose #mt-opts.mt-open {
  display:block !important; position:absolute !important; right:14px !important; bottom:60px !important;
  width:320px !important; max-height:60vh !important; overflow:auto !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:14px !important; box-shadow:var(--shadow-2) !important;
  padding:12px 14px !important; z-index:20 !important; }
body.action-compose #mt-opts .form-group.row { margin:0 0 8px !important; align-items:center !important; }

/* внутри фрейма составления (узкая раскладка) прячем таскбар/папки — форма во всю ширину */
html.layout-small body.task-mail.action-compose #layout-menu,
html.layout-small body.task-mail.action-compose #layout-sidebar { display:none !important; }
html.layout-small body.task-mail.action-compose #layout-content {
  display:flex !important; flex:1 1 auto !important; width:100% !important; max-width:none !important; left:0 !important; }

/* ============================================================= *
 *  ЖИДКОЕ СТЕКЛО (liquid glass)                                  *
 *  Ниже — только визуальный слой: заливка, прозрачность,         *
 *  размытие, границы и тени. Размеры/отступы/позиции блоков,     *
 *  выверенные выше, не трогаем.                                  *
 * ============================================================= */

/* --------------------------------------------------------------
 *  1. Живой фон: два слоя градиентных пятен в брендовых тонах.
 *     Анимируются только transform/opacity (композитные свойства),
 *     период 29–38 с. Внутри iframe письма фона нет (html:not(.iframe)).
 * -------------------------------------------------------------- */
/* Только перемещение. Поворот и масштаб заставляли браузер заново
   растрировать слой каждый кадр — а слой больше экрана и залит
   градиентами. Замер: с ними 26 fps и все кадры просевшие, без них 56 fps.
   Перемещение композитор выполняет на видеокарте без перерисовки. */
@keyframes mt-drift-a{
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(-4%,3.5%,0); }
  100% { transform:translate3d(0,0,0); }
}
@keyframes mt-drift-b{
  0%   { transform:translate3d(0,0,0); opacity:.78; }
  50%  { transform:translate3d(5%,-4%,0); opacity:1; }
  100% { transform:translate3d(0,0,0); opacity:.78; }
}
html:not(.iframe) body::before,
html:not(.iframe) body::after{
  content:''; position:fixed; top:-14%; bottom:-14%; left:-12%; right:-12%;
  z-index:-1; pointer-events:none; background-repeat:no-repeat; }

/* ВАЖНО для плавности. Пока фон под стеклом движется, браузер обязан
   пересчитывать размытие каждый кадр — кешировать его нечего. Замер:
   с размытием 38 fps, без него 58. Поэтому анимацию оставляем только
   на странице входа, где стеклянная поверхность одна и с ней не работают.
   В почте, настройках и контактах фон статичный: градиенты и стекло на
   месте, но размытие считается один раз. */
html:not(.iframe) body.task-login::before{ animation:mt-drift-a 38s ease-in-out infinite; }
html:not(.iframe) body.task-login::after { animation:mt-drift-b 29s ease-in-out infinite; }
html:not(.iframe) body.task-login::before,
html:not(.iframe) body.task-login::after{ will-change:transform; }

html:not(.iframe) body:not(.task-login)::before,
html:not(.iframe) body:not(.task-login)::after{
  animation:none !important; will-change:auto !important; }
html:not(.iframe) body::before{
  background:
    radial-gradient(38% 46% at 16% 14%, rgba(29,78,137,.26) 0%, rgba(29,78,137,0) 68%),
    radial-gradient(34% 40% at 84% 8%,  rgba(58,140,206,.22) 0%, rgba(58,140,206,0) 70%),
    radial-gradient(46% 44% at 62% 88%, rgba(86,132,199,.20) 0%, rgba(86,132,199,0) 72%);
  }
html:not(.iframe) body::after{
  background:
    radial-gradient(32% 38% at 6% 76%,  rgba(31,166,176,.16) 0%, rgba(31,166,176,0) 70%),
    radial-gradient(30% 36% at 96% 58%, rgba(124,104,206,.15) 0%, rgba(124,104,206,0) 72%),
    radial-gradient(42% 30% at 44% 0%,  rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
  }
html.dark-mode:not(.iframe) body::before{
  background:
    radial-gradient(38% 46% at 16% 14%, rgba(46,112,196,.34) 0%, rgba(46,112,196,0) 68%),
    radial-gradient(34% 40% at 84% 8%,  rgba(28,86,158,.32) 0%, rgba(28,86,158,0) 70%),
    radial-gradient(46% 44% at 62% 88%, rgba(38,74,132,.30) 0%, rgba(38,74,132,0) 72%); }
html.dark-mode:not(.iframe) body::after{
  background:
    radial-gradient(32% 38% at 6% 76%,  rgba(24,124,138,.22) 0%, rgba(24,124,138,0) 70%),
    radial-gradient(30% 36% at 96% 58%, rgba(92,76,168,.22) 0%, rgba(92,76,168,0) 72%),
    radial-gradient(42% 30% at 44% 0%,  rgba(120,160,220,.10) 0%, rgba(120,160,220,0) 70%); }

/* --------------------------------------------------------------
 *  2. Контейнеры раскладки становятся прозрачными, чтобы фон
 *     просвечивал; стекло живёт на «островках» ниже.
 * -------------------------------------------------------------- */
html:not(.iframe) #layout,
html:not(.iframe) #layout > div > .header,
html:not(.iframe) #layout > div > .footer,
html:not(.iframe) #layout-sidebar > .header,
html:not(.iframe) #layout-sidebar > .footer{
  background:transparent !important; border-color:var(--glass-line) !important; }

/* Колонки списка/контента: в почте прозрачные (там свои рамки-островки),
   в остальных задачах (настройки, контакты) — плотное стекло, чтобы формы
   и таблицы оставались читаемыми поверх градиента. */
html:not(.iframe) #layout-list,
html:not(.iframe) #layout-content{
  background:var(--glass-3) !important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-color:var(--glass-line) !important; }
html:not(.iframe) body.task-mail #layout-list,
html:not(.iframe) body.task-mail.action-none #layout-content{
  background:transparent !important;
  -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Левая панель (рейл задач + папки) — единое матовое стекло */
html:not(.iframe) #layout-menu,
html:not(.iframe) #layout-sidebar{
  background:var(--glass-2) !important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-line) !important; box-shadow:var(--glass-edge); }
html:not(.iframe) #layout-menu{ border-right:0 !important; box-shadow:none; }
@media screen and (min-width:769px){
  /* свёрнутый сайдбар, раскрытый по наведению — мягкая тень вместо жёсткой */
  #layout.mtcollapsed #layout-sidebar:hover{
    box-shadow:var(--glass-shadow-lg) !important; }
}

/* --------------------------------------------------------------
 *  3. Папки — стеклянные карточки (без backdrop-filter: список
 *     прокручивается, размытие на каждой строке съело бы кадры).
 * -------------------------------------------------------------- */
#mailboxlist li a,
.listing.folderlist li a{
  background:var(--glass-item) !important; border-color:var(--glass-line) !important;
  box-shadow:var(--glass-edge); }
#mailboxlist li a:hover,
.listing.folderlist li a:hover{
  background:var(--glass-item-hover) !important; border-color:var(--glass-line-2) !important; }
#mailboxlist li.selected > a,
.listing.folderlist li.selected > a,
#mailboxlist li.selected > .treetoggle + a{
  background:var(--glass-tint) !important; border-color:var(--glass-line-2) !important;
  color:var(--brand-ink) !important; }
#mailboxlist li.selected > a:before,
#mailboxlist li.selected .unreadcount,
#mailboxlist .unreadcount, .listing .unreadcount{ color:var(--brand-ink) !important; }
#taskmenu a.button:hover{ background:var(--glass-hover) !important; }
#taskmenu a.button.selected, #taskmenu a.selected{
  background:var(--glass-tint) !important; color:var(--brand-ink) !important; }
#taskmenu a.button.selected:before{ color:var(--brand-ink) !important; }
@media screen and (min-width:769px){
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li a{ background:transparent !important;
    border-color:transparent !important; box-shadow:none !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li a:hover{ background:var(--glass-hover) !important; }
  #layout.mtcollapsed #layout-sidebar:not(:hover) #mailboxlist li.selected > a{ background:var(--glass-tint) !important; }
}

/* --------------------------------------------------------------
 *  4. Строка поиска, островок тулбара, блок аккаунта
 *     (геометрия сохранена — меняем только стекло).
 * -------------------------------------------------------------- */
body.task-mail #layout-list > .searchbar.menu{
  background:var(--glass-2) !important; border:1px solid var(--glass-line) !important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
body.task-mail #layout-list > .searchbar.menu:hover{
  background:var(--glass-3) !important;
  box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
body.task-mail #layout-list > .searchbar.menu:focus-within{
  background:var(--glass-3) !important; border-color:var(--glass-line-2) !important;
  box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }
body.task-mail #layout-list > .searchbar.menu a.button:hover{ background:var(--glass-hover) !important; }
.searchbar, #mailsearchform, .ui-searchbar{
  background:var(--glass-2) !important; border-color:var(--glass-line) !important; }
/* форма внутри пилюли поиска — без собственной заливки, иначе два стекла
   накладываются друг на друга и середина строки светлее краёв */
.searchbar form, #mailsearchform form{ background:transparent !important; }

@media screen and (min-width:769px){
  body.task-mail #messagelist-header #toolbar-list-menu{
    background:var(--glass-2) !important; border:1px solid var(--glass-line) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
  body.task-mail #messagelist-header #toolbar-list-menu a:hover{ color:var(--brand-ink) !important; }
  /* блок аккаунта — компактная стеклянная пилюля */
  html:not(.iframe) body.task-mail #messagelist-header .mt-account{
    background:var(--glass-2) !important; border:1px solid var(--glass-line) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border-radius:999px !important; padding:3px 4px 3px 14px !important;
    box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
  body.task-mail #messagelist-header .mt-account a.sidebar-menu:hover{
    background:var(--glass-hover) !important; }
}

/* --------------------------------------------------------------
 *  5. Рамка списка писем + карточки строк.
 *     Размытие — только на рамке (она статична); строки прокручиваются,
 *     поэтому у них обычная полупрозрачная заливка без backdrop-filter.
 * -------------------------------------------------------------- */
html:not(.iframe) body.task-mail #messagelist-content{
  background:var(--glass-3) !important; border-color:var(--glass-line) !important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
@media screen and (min-width:769px){
  body.task-mail.action-none #layout-list > #messagelist-content{
    background:var(--glass-1) !important;
    border:1px solid var(--glass-line) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr{
    background:var(--glass-row) !important; border-color:var(--glass-line) !important;
    box-shadow:var(--glass-edge); }
  html:not(.iframe) body.task-mail #messagelist tbody tr:hover{
    background:var(--glass-row-hover) !important; border-color:var(--glass-line-2) !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr.selected{
    background:var(--glass-row-selected) !important; border-color:var(--glass-line-2) !important; }
}
/* узкие экраны: строки без собственной заливки — фоном служит стекло рамки */
@media screen and (max-width:768px){
  #messagelist tr:hover td{ background:var(--glass-item-hover) !important; }
  #messagelist tr.selected td, #messagelist tr.selected:hover td{
    background:var(--glass-row-selected) !important; }
}

/* --------------------------------------------------------------
 *  6. Нижняя навигация сайдбара и пагинация
 * -------------------------------------------------------------- */
@media screen and (min-width:769px){
  body.task-mail #layout:not(.mtcollapsed) .mintrans-nav,
  body.task-mail #layout.mtcollapsed #layout-sidebar:hover .mintrans-nav,
  body.task-mail #layout.mtcollapsed #layout-sidebar:not(:hover) .mintrans-nav{
    background:var(--glass-2) !important; border-color:var(--glass-line) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
  body.task-mail #layout-list > .pagenav.footer .rcpagejumper{
    background:var(--glass-2) !important; border-color:var(--glass-line) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
  body.task-mail #layout-list > .pagenav.footer a.button:not(.disabled):hover{
    background:var(--glass-tint) !important; color:var(--brand-ink) !important; }
}
.mintrans-nav a.button:hover{ background:var(--glass-hover) !important; }
.mintrans-nav a.button.selected{ background:var(--glass-tint) !important; color:var(--brand-ink) !important; }

/* --------------------------------------------------------------
 *  7. Всплывающие слои: меню, поповеры, диалоги, параметры поиска
 * -------------------------------------------------------------- */
/* меняем только цвет границы (не её толщину) — ul.menu в Elastic это ещё и
   тулбары, лишний 1px сдвинул бы их содержимое */
/* Заливку и цвет границы здесь не задаём: токены стекла обнулены, и меню
   становились полностью прозрачными — сквозь них просвечивал список.
   Сплошной фон --surface приходит из правила ниже по файлу. */
.popupmenu, .popover, .toolbarmenu, ul.menu, .ui-dialog{
  -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }
.ui-dialog .ui-dialog-titlebar, .popover-header, #layout-menu .popover-header{
  background:transparent !important; border-bottom-color:var(--glass-line) !important; }
.toolbarmenu li a:hover, .listing.iconized li a:hover,
.menu li > a:hover, .popupmenu li a:hover{
  background:var(--glass-tint) !important; color:var(--brand-ink) !important; }
@media screen and (min-width:769px){
  body.task-mail #layout-list > #searchmenu.searchoptions{
    background:var(--glass-3) !important; border:1px solid var(--glass-line) !important;
    -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
    box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }
  #searchmenu .input-group{ border-color:var(--glass-line) !important; }
  #searchmenu .input-group-prepend .input-group-text,
  #searchmenu .input-group-prepend{ background:var(--glass-1) !important; }
  #searchmenu .custom-select{ background-color:var(--glass-2) !important; }
}

/* --------------------------------------------------------------
 *  8. Просмотр письма: шапка-тулбар и кнопка «Назад».
 *     Тело письма — отдельный документ во фрейме, его не трогаем.
 * -------------------------------------------------------------- */
/* документ письма во фрейме остаётся НЕпрозрачным (там длинный текст и
   анимации фона быть не должно) — но подложку делаем «листом бумаги»,
   чтобы она читалась как содержимое под стеклянной шапкой */
html.iframe body.task-mail:not(.action-compose){ background:var(--surface) !important; }
html:not(.iframe) body.task-mail #layout-content > .header{
  background:var(--glass-2) !important; border-bottom:1px solid var(--glass-line) !important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge); }
html:not(.iframe) #layout-content > .header .back-list-button{
  background:var(--glass-2) !important; border-color:var(--glass-line) !important;
  box-shadow:var(--glass-edge); }
html:not(.iframe) #layout-content > .header .back-list-button:hover{
  background:var(--glass-tint) !important; border-color:var(--glass-line-2) !important;
  color:var(--brand-ink) !important; }
.attachmentslist li, .attachmentslist a{
  background:var(--glass-item) !important; border-color:var(--glass-line) !important; }

/* --------------------------------------------------------------
 *  9. Окно составления письма.
 *     Панель — стекло с размытием подложки; документ внутри фрейма
 *     делаем прозрачным, чтобы стекло панели просвечивало насквозь.
 *     Геометрия панели и формы не меняется.
 * -------------------------------------------------------------- */
.mt-compose-panel{
  background:var(--glass-3) !important; border:1px solid var(--glass-line) !important;
  -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }
.mt-compose-head{
  background:transparent !important; color:var(--text) !important;
  border-bottom:1px solid var(--glass-line) !important; }
.mt-compose-head button:hover{ background:var(--glass-hover) !important; }
.mt-compose-frame{ background:transparent !important; }
html.iframe body.action-compose,
html.iframe body.action-compose #layout,
html.iframe body.action-compose #layout-content,
html.iframe body.action-compose #layout-content > .header{ background:transparent !important; }
body.action-compose #messagetoolbar{
  background:var(--glass-2) !important; border:1px solid var(--glass-line) !important;
  box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
body.action-compose #messagetoolbar a:hover{ background:var(--glass-hover) !important; }
body.action-compose .compose-headers .form-group.row,
body.action-compose #mt-attach-row{ border-bottom-color:var(--glass-line) !important; }
/* внутри фрейма подложка уже прозрачная — размытие здесь было бы холостым */
body.action-compose .formbuttons{
  background:var(--glass-1) !important; border-top-color:var(--glass-line) !important; }
body.action-compose .formbuttons a.save.draft,
body.action-compose .formbuttons .mt-cancel{ background:var(--glass-item) !important; }
body.action-compose .formbuttons a.save.draft:hover,
body.action-compose .formbuttons .mt-cancel:hover{ background:var(--glass-item-hover) !important; }
body.action-compose .mt-opts-btn:hover{ background:var(--glass-hover) !important; }
/* сплошной фон, а не стекло: токены обнулены, и карточка параметров
   становилась прозрачной — сквозь неё просвечивало письмо */
body.action-compose #mt-opts.mt-open{
  background:var(--surface) !important; border-color:var(--border) !important;
  -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }
body.action-compose #attachment-list.mt-attlist li{
  background:var(--glass-item) !important; border-color:var(--glass-line) !important; }

/* --------------------------------------------------------------
 *  10. Вход в почту — карточка на стекле
 * -------------------------------------------------------------- */
.task-login #login-form, .task-login .box, .task-login .formcontent{
  background:var(--glass-3) !important; border:1px solid var(--glass-line) !important;
  -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }

/* --------------------------------------------------------------
 *  11. Прочее: скроллбар без белой обводки (она рвала стекло),
 *      поля ввода — полупрозрачные.
 * -------------------------------------------------------------- */
::-webkit-scrollbar-thumb{ border:3px solid transparent; background-clip:padding-box; }
.form-control, .custom-select, textarea.form-control{
  background-color:var(--glass-2) !important; border-color:var(--glass-line) !important; }

/* --------------------------------------------------------------
 *  12. Уважение к prefers-reduced-motion: фон замирает,
 *      градиенты остаются статичными.
 * -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html:not(.iframe) body::before,
  html:not(.iframe) body::after{
    animation:none !important; transform:none !important; opacity:1 !important; }
}

/* --------------------------------------------------------------
 * Без горизонтальных полос-разделителей в почтовом виде.
 * Стеклянное оформление разделяет блоки островками и тенью, а
 * перекрашенные рамки контейнеров Elastic давали линию во всю
 * ширину под строкой поиска и островком. Вертикальную границу
 * колонки списка (border-right) не трогаем.
 * -------------------------------------------------------------- */
html:not(.iframe) body.task-mail #layout > div > .header,
html:not(.iframe) body.task-mail #layout > div > .footer,
html:not(.iframe) body.task-mail #layout-sidebar > .header,
html:not(.iframe) body.task-mail #layout-sidebar > .footer,
html:not(.iframe) body.task-mail #layout-list > .header,
html:not(.iframe) body.task-mail #messagelist-header{
  border-top:0 !important; border-bottom:0 !important; box-shadow:none !important; }
/* #layout-list из этого списка исключён: теперь это отдельная панель
   со своей рамкой, и обнуление границ её бы стирало */

/* Футер постраничной навигации: фиксированная высота 35px из Elastic
   не давала ему расти под содержимое — высота по содержимому */
html:not(.iframe) #layout > div > .footer.small{ height:auto !important; }

/* При клике по письму на ячейке темы появлялась синяя рамка фокуса —
   прямоугольник поверх скруглённой строки. Убираем её: выделенная строка
   и так отличается заливкой, так что индикация не теряется. */
html:not(.iframe) body.task-mail #messagelist tr:focus,
html:not(.iframe) body.task-mail #messagelist tr td:focus,
html:not(.iframe) body.task-mail #messagelist tr td:focus-visible,
html:not(.iframe) body.task-mail #messagelist tr td a:focus,
html:not(.iframe) body.task-mail #messagelist tr td span:focus,
html:not(.iframe) body.task-mail #messagelist td.subject:focus,
html:not(.iframe) body.task-mail #messagelist td.subject *:focus{
  outline:0 !important; border-color:transparent !important;
  box-shadow:none !important; }

/* ==============================================================
 *  Группы писем по отправителю
 *  Заголовок группы — обычная строка таблицы, поэтому виджет списка
 *  Roundcube продолжает работать со своими строками как раньше.
 * ============================================================== */
html:not(.iframe) body.task-mail #messagelist tr.mt-group{
  display:flex !important; align-items:center !important;
  cursor:pointer !important; user-select:none !important;
  margin:10px 6px 2px !important; padding:0 !important;
  background:transparent !important; border:0 !important; }
html:not(.iframe) body.task-mail #messagelist tr.mt-group td{
  display:flex !important; align-items:center !important; gap:8px !important;
  width:100% !important; padding:6px 14px !important; border:0 !important;
  background:var(--glass-item, var(--surface-2)) !important;
  border-radius:14px !important; }
html:not(.iframe) body.task-mail #messagelist tr.mt-group:hover td{
  background:var(--glass-hover, var(--hover)) !important; }
html:not(.iframe) body.task-mail #messagelist tr.mt-group .mt-group-arrow{
  width:0; height:0; flex:0 0 auto;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--text-2);
  transition:transform .18s ease; }
html:not(.iframe) body.task-mail #messagelist tr.mt-group.mt-collapsed .mt-group-arrow{
  transform:rotate(-90deg); }
html:not(.iframe) body.task-mail #messagelist tr.mt-group .mt-group-name{
  font-weight:600 !important; font-size:13.5px !important; color:var(--text) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html:not(.iframe) body.task-mail #messagelist tr.mt-group .mt-group-count{
  margin-left:auto !important; font-size:12.5px !important;
  color:var(--text-2) !important; white-space:nowrap; }
/* письма внутри группы — с отступом слева, чтобы читалась вложенность */
html:not(.iframe) body.task-mail #messagelist tr.mt-grouped{
  margin-left:18px !important; }
/* Свёрнутые письма прячем классом: у строк списка стоит
   display:flex !important, и инлайновый style.display его не перебивает. */
html:not(.iframe) body.task-mail #messagelist tr.mt-hidden{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  html:not(.iframe) body.task-mail #messagelist tr.mt-group .mt-group-arrow{
    transition:none !important; }
}

/* Папки в почте: заливка наведения и выделения висела на li — прямоугольник
   во всю ширину проступал за скруглённой пилюлей. Фон несёт только ссылка. */
html:not(.iframe) body.task-mail #mailboxlist li,
html:not(.iframe) body.task-mail #mailboxlist li:hover,
html:not(.iframe) body.task-mail #mailboxlist li.selected,
html:not(.iframe) body.task-mail .listing.folderlist li,
html:not(.iframe) body.task-mail .listing.folderlist li:hover,
html:not(.iframe) body.task-mail .listing.folderlist li.selected{
  background:transparent !important; background-color:transparent !important;
  box-shadow:none !important; }

/* ==============================================================
 *  Колонки почты — отдельные скруглённые панели
 *  Та же схема, что в настройках: поля 20px, радиус 20px, рамка.
 *  Внутреннюю рамку списка писем при этом снимаем, иначе получается
 *  рамка внутри рамки с зазором в 20px.
 * ============================================================== */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-mail #layout-sidebar,
  html:not(.iframe) body.task-mail #layout-list,
  html:not(.iframe) body.task-mail #layout-content{
    margin:20px !important; border-radius:20px !important;
    border:1px solid var(--glass-line) !important;
    border-right:1px solid var(--glass-line) !important;
    box-shadow:var(--glass-edge), var(--glass-shadow) !important;
    box-sizing:border-box !important; overflow:hidden !important; }
  /* соседние панели дают 40px между собой — убираем удвоение */
  html:not(.iframe) body.task-mail #layout-list,
  html:not(.iframe) body.task-mail #layout-content{ margin-left:0 !important; }

  html:not(.iframe) body.task-mail.action-none #layout-list > #messagelist-content{
    margin:0 !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; padding:6px 8px !important;
    width:auto !important; max-width:none !important; }
}

/* ==============================================================
 *  АДАПТИВНОСТЬ
 *  Десктопная часть скина живёт в @media (min-width:769px), но
 *  часть правил задана вне медиазапросов жёсткими пикселями —
 *  строка поиска, шапка письма, окно составления. Ниже 769px
 *  возвращаем всё это в поток и уменьшаем отступы; стеклянное
 *  оформление сохраняется, меняется только геометрия.
 * ============================================================== */

/* ---- Шапка почты: три элемента с фиксированной шириной ----
   Поиск (450) + островок с подписями (~330) + блок аккаунта (~180) требуют
   около 960px свободной ширины. В колонке списка при 1024px её всего ~764,
   поэтому островок наезжал на поиск. Разводим их расчётом: островок
   центрируется НЕ по всей колонке, а по полосе между поиском и аккаунтом.  */
/* Elastic при layout-normal (≈1024–1199px) прячет #layout-sidebar: в его
   раскладке навигация уходит в узкий рейл задач. Наш скин этот рейл скрывает
   и заменяет левой панелью, поэтому без принудительного показа пользователь
   остаётся вообще без папок и кнопки «Написать». */
@media screen and (min-width:1024px){
  /* :not(.action-compose) обязателен — иначе правило возвращает правый сайдбар
     «Параметры и вложения» в окне составления, который мы намеренно убрали */
  html:not(.iframe) body.task-mail:not(.action-compose) #layout-sidebar{ display:flex !important; }
}
/* Название папки в шапке списка центрируется и на 1024px заезжает под пилюлю
   аккаунта. На десктопе оно избыточно — выбранная папка подсвечена в сайдбаре. */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-mail #messagelist-header > .header-title{ display:none !important; }
}

@media screen and (min-width:769px) and (max-width:1399px){
  /* Узкий режим: поиск компактнее, у кнопок тулбара только иконки */
  body.task-mail #layout-list > .searchbar.menu{
    width:260px !important; max-width:calc(100% - 470px) !important; }
  body.task-mail #messagelist-header #toolbar-list-menu li a .inner{ display:none !important; }
  body.task-mail #messagelist-header #toolbar-list-menu li a{ padding:10px 10px !important; }
  body.task-mail #messagelist-header #toolbar-list-menu li a:before{ font-size:18px !important; }
  body.task-mail #messagelist-header #toolbar-list-menu{
    left:calc(285px + (100% - 285px - 200px) / 2) !important; }
  body.task-mail #messagelist-header .mt-account .header-title.username{
    max-width:150px !important; overflow:hidden !important;
    text-overflow:ellipsis !important; white-space:nowrap !important; }
}
@media screen and (min-width:1400px){
  /* Широкий режим: поиск 450px, подписи кнопок видны, места хватает всем */
  body.task-mail #messagelist-header #toolbar-list-menu{
    left:calc(475px + (100% - 475px - 200px) / 2) !important; }
}
/* Ручка изменения ширины колонки торчит на 3px за край — она не нужна,
   ширины заданы скином */
html:not(.iframe) body.task-mail .column-resizer{ display:none !important; }

/* ---- Планшеты и телефоны: до 768px ---- */
@media screen and (max-width:768px){
  /* Размытие дешевле: на мобильных GPU backdrop-filter самый дорогой эффект */
  :root, html.dark-mode{
    --glass-blur:blur(12px) saturate(150%);
    --glass-blur-lg:blur(16px) saturate(160%); }

  html, body{ overflow-x:hidden !important; } /* страховка от горизонтальной прокрутки */

  /* Строка поиска — в поток. На десктопе она absolute с width:450px и
     max-width:calc(100% - 360px): на узком экране это вылезало за край. */
  body.task-mail #layout-list > .searchbar.menu{
    position:static !important; top:auto !important; left:auto !important;
    right:auto !important; transform:none !important;
    width:auto !important; max-width:none !important; height:44px !important;
    margin:8px 10px !important; border-radius:22px !important; }
  /* 16px обязательны: при меньшем размере iOS Safari зумит страницу по фокусу */
  body.task-mail #layout-list > .searchbar.menu input{
    height:40px !important; line-height:40px !important; font-size:16px !important; }

  /* Шапка списка: высота по содержимому, три блока в потоке */
  body.task-mail #messagelist-header{
    position:relative !important; min-height:0 !important; height:auto !important;
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    justify-content:space-between !important; gap:6px !important;
    padding:6px 8px !important; }
  body.task-mail #messagelist-header #toolbar-list-menu{
    position:static !important; transform:none !important; left:auto !important;
    top:auto !important; margin:0 !important; padding:4px 8px !important; }
  body.task-mail #messagelist-header .mt-account{
    position:static !important; transform:none !important;
    right:auto !important; top:auto !important; }
  body.task-mail #messagelist-header .mt-account .header-title.username{
    max-width:42vw !important; overflow:hidden !important;
    text-overflow:ellipsis !important; white-space:nowrap !important; }

  /* Панель вариантов поиска — во всю ширину экрана с полями */
  body.task-mail #layout-list > #searchmenu.searchoptions{
    left:8px !important; right:8px !important;
    width:auto !important; max-width:none !important; }

  /* Рамка списка писем — узкие поля, иначе съедает ширину экрана */
  body.task-mail.action-none #messagelist-content{
    margin:8px !important; padding:4px !important; border-radius:16px !important;
    box-sizing:border-box !important; max-width:calc(100% - 16px) !important; }

  /* Строка письма в две строки: сверху отправитель + иконки + дата,
     снизу тема. Иначе Elastic раздаёт всем второстепенным колонкам
     одинаковые ~22px, и отправитель с датой обрезаются до «T..», «1..». */
  html:not(.iframe) body.task-mail #messagelist,
  html:not(.iframe) body.task-mail #messagelist tbody{ display:block !important; }
  html:not(.iframe) body.task-mail #messagelist thead{ display:none !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    width:auto !important; padding:8px 12px !important; box-sizing:border-box !important; }
  html:not(.iframe) body.task-mail #messagelist tbody tr td{
    border:0 !important; height:auto !important; padding:0 !important;
    display:block !important; }
  html:not(.iframe) body.task-mail #messagelist td.fromto{
    order:1 !important; flex:1 1 auto !important; width:auto !important; min-width:0 !important;
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
    font-weight:600 !important; font-size:13.5px !important; }
  html:not(.iframe) body.task-mail #messagelist td.attachment{ order:2 !important; }
  html:not(.iframe) body.task-mail #messagelist td.flag{ order:3 !important; }
  html:not(.iframe) body.task-mail #messagelist td.attachment,
  html:not(.iframe) body.task-mail #messagelist td.flag{
    flex:0 0 auto !important; width:auto !important; min-width:0 !important;
    margin-left:6px !important; }
  html:not(.iframe) body.task-mail #messagelist td.date{
    order:4 !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important;
    margin-left:8px !important; white-space:nowrap !important; font-size:12px !important; }
  html:not(.iframe) body.task-mail #messagelist td.subject{
    order:5 !important; flex:1 0 100% !important; width:auto !important; min-width:0 !important;
    margin-top:2px !important; overflow:hidden !important; }
  html:not(.iframe) body.task-mail #messagelist td.subject a,
  html:not(.iframe) body.task-mail #messagelist td.subject span{
    overflow:hidden !important; text-overflow:ellipsis !important;
    white-space:nowrap !important; display:block !important; max-width:100% !important; }
  html:not(.iframe) body.task-mail #messagelist td.fromto span,
  html:not(.iframe) body.task-mail #messagelist td.fromto a{
    overflow:hidden !important; text-overflow:ellipsis !important;
    white-space:nowrap !important; display:block !important; max-width:100% !important; }
  /* колонки, которым на телефоне места нет и смысла мало */
  html:not(.iframe) body.task-mail #messagelist td.selection,
  html:not(.iframe) body.task-mail #messagelist td.threads,
  html:not(.iframe) body.task-mail #messagelist td.size,
  html:not(.iframe) body.task-mail #messagelist td.status{ display:none !important; }

  /* Чтение письма: 44px по бокам — это половина экрана телефона */
  #message-header{ padding:14px 14px 10px !important; }
  .message-htmlpart, #messagebody, .message-part{ padding:6px 14px 24px !important; }
  #message-header .header{ gap:10px !important; }
  #layout-content > .header .back-list-button{
    left:8px !important; padding:0 14px 0 10px !important; }

  /* Окно составления — на весь экран */
  .mt-compose-panel, .mt-compose-panel.mt-full{
    right:0 !important; left:0 !important; top:0 !important; bottom:0 !important;
    width:auto !important; height:auto !important; max-height:none !important;
    margin:0 !important; border-radius:0 !important; }
  body.action-compose .mt-compose-avatar{ display:none !important; }
  body.action-compose .compose-headers .form-group.row,
  body.action-compose #mt-attach-row,
  body.action-compose #attachment-list.mt-attlist{
    padding-left:14px !important; padding-right:10px !important; }
  body.action-compose .compose-headers input{ font-size:16px !important; }
  body.action-compose .formbuttons{ flex-wrap:wrap !important; gap:8px !important; }
  body.action-compose #mt-opts.mt-open{
    left:8px !important; right:8px !important; width:auto !important; }

  /* Карточка входа — по ширине экрана с полями по 16px */
  .task-login #layout-content.selected{ padding:16px !important; }
  .task-login #login-form, .task-login .box, .task-login .formcontent{
    max-width:calc(100vw - 32px) !important; padding:24px 18px !important;
    min-width:0 !important; }
  /* поля должны уметь сжиматься, но НЕ получать width:100% — иначе
     .form-control выпадает из input-group на отдельную строку от иконки */
  .task-login #login-form .input-group,
  .task-login #login-form .form-control,
  .task-login #login-form input{ min-width:0 !important; }
  .task-login #logo{ max-width:180px !important; }

  /* Пальцевые цели: минимум 44px по высоте у кнопок-иконок */
  body.task-mail #messagelist-header #toolbar-list-menu li a,
  .mintrans-nav a.button, #taskmenu a.button{
    min-height:44px !important; }
}

/* ==============================================================
 *  СТРАНИЦА ВХОДА — герб, стекло, анимации
 *  Блок #mt-brand (герб + домен) собирает mintrans.js вместо
 *  штатного <img id="logo">: текст «mbox» вшит в саму картинку,
 *  и отделить его средствами CSS невозможно.
 * ============================================================== */
/* Elastic разносит логотип и форму жёсткими смещениями (#logo top:16vh,
   #login-form top:20vh) — из-за них между гербом и карточкой зияла дыра.
   Собираем всё в одну центрированную колонку. */
.task-login #layout-content.selected{
  flex-direction:column !important; justify-content:center !important;
  align-items:center !important; gap:0 !important; }
.task-login #login-form{ top:0 !important; margin:0 auto !important; }

.mt-brand{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:14px !important; margin:0 auto 26px !important; text-align:center !important;
  animation:mtBrandIn .9s cubic-bezier(.22,1,.36,1) both; }
.mt-brand-emblem{
  width:120px !important; height:120px !important; display:block !important;
  /* мягкое свечение под гербом — «стекло» читается объёмнее */
  filter:drop-shadow(0 10px 26px rgba(16,32,60,.28));
  animation:mtEmblemFloat 7s ease-in-out 1s infinite; }
.mt-brand-text{
  font-size:26px !important; font-weight:600 !important; letter-spacing:.02em !important;
  color:var(--text) !important; line-height:1 !important;
  animation:mtBrandTextIn 1s cubic-bezier(.22,1,.36,1) .15s both; }
html.dark-mode .mt-brand-emblem{ filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }

@keyframes mtBrandIn{
  from{ opacity:0; transform:translate3d(0,18px,0) scale(.96); }
  to  { opacity:1; transform:none; } }
@keyframes mtBrandTextIn{
  from{ opacity:0; transform:translate3d(0,10px,0); }
  to  { opacity:1; transform:none; } }
@keyframes mtEmblemFloat{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-7px,0); } }

/* Карточка входа — стекло с плавным появлением */
.task-login #login-form{
  animation:mtCardIn .8s cubic-bezier(.22,1,.36,1) .1s both;
  transition:box-shadow .3s ease, transform .3s ease !important; }
@keyframes mtCardIn{
  from{ opacity:0; transform:translate3d(0,26px,0) scale(.97); }
  to  { opacity:1; transform:none; } }

/* Поля: подсветка бренда при фокусе */
/* --surface-2 читается в обеих темах: на светлой карточке поле не сливается
   с фоном, на тёмной остаётся в тон стеклу */
.task-login #login-form .form-control{
  background:var(--surface-2) !important;
  border:1px solid var(--glass-line) !important; border-radius:12px !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important; }
.task-login #login-form .form-control:focus{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 4px rgba(29,78,137,.18) !important; }
.task-login #login-form .input-group-text{
  background:transparent !important; border:0 !important; color:var(--text-3) !important; }

/* Кнопка «Войти» — блик, пробегающий при наведении */
.task-login .btn-primary{
  position:relative !important; overflow:hidden !important;
  background:var(--brand) !important; border-color:var(--brand) !important;
  box-shadow:0 8px 22px rgba(29,78,137,.32) !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important; }
.task-login .btn-primary:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 28px rgba(29,78,137,.42) !important; }
.task-login .btn-primary:active{ transform:translateY(0) !important; }
.task-login .btn-primary:before{
  content:''; position:absolute; inset:0 auto 0 -60%; width:60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); pointer-events:none; }
.task-login .btn-primary:hover:before{ animation:mtShine .85s ease forwards; }
@keyframes mtShine{ to{ left:120%; } }

.task-login #login-footer{ animation:mtBrandTextIn 1s ease .35s both; }

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce){
  .mt-brand, .mt-brand-emblem, .mt-brand-text,
  .task-login #login-form, .task-login #login-footer{
    animation:none !important; }
  .task-login .btn-primary:hover:before{ animation:none !important; }
}

/* ---- Телефоны: до 480px ---- */
@media screen and (max-width:480px){
  /* Тулбар списка — только иконки, подписи не помещаются */
  body.task-mail #messagelist-header #toolbar-list-menu li a .inner{ display:none !important; }
  body.task-mail #messagelist-header #toolbar-list-menu li a{ padding:0 8px !important; }
  body.task-mail #messagelist-header #toolbar-list-menu li a:before{ font-size:18px !important; }
  body.task-mail #messagelist-header .mt-account .header-title.username{ display:none !important; }

  #message-header{ padding:12px 10px 8px !important; }
  .message-htmlpart, #messagebody, .message-part{ padding:6px 10px 20px !important; }
  body.task-mail.action-none #layout-list > #messagelist-content{
    margin:6px !important; border-radius:14px !important; }
  body.action-compose .compose-headers .form-group.row,
  body.action-compose #mt-attach-row,
  body.action-compose #attachment-list.mt-attlist{ padding-left:10px !important; }
  #mt-attach-row{ gap:12px !important; }
}

/* ---- Низкие экраны в альбомной ориентации ---- */
/* ==============================================================
 *  Подсветка при наведении — везде скруглённая
 *  Elastic красит фон кнопок прямоугольником. Скругления были
 *  заданы только в почте, поэтому в настройках и контактах при
 *  наведении вылезал квадрат. Задаём для всего интерфейса.
 * ============================================================== */
html:not(.iframe) a.button,
html:not(.iframe) .menu a,
html:not(.iframe) .menu.toolbar a,
html:not(.iframe) .header a,
html:not(.iframe) .footer a,
html:not(.iframe) .popupmenu a,
html:not(.iframe) .searchbar a,
html:not(.iframe) .toolbar a{ border-radius:12px !important; }
/* квадратные иконочные кнопки читаются лучше кругом */
html:not(.iframe) .searchbar a.button,
html:not(.iframe) .searchbar a.dropdown,
html:not(.iframe) a.button.icon:not(.back-list-button):not(.compose):not(.toolbar-button),
html:not(.iframe) .header a.button.icon:not(.toolbar-button){ border-radius:50% !important; }
/* Кнопки внутри островка тулбара — с подписями, круг им не годится:
   «Обновить» имеет классы button+icon и от общего правила становилась
   овалом, обрезающим текст */
html:not(.iframe) #toolbar-list-menu a,
html:not(.iframe) #toolbar-list-menu a.button,
html:not(.iframe) #toolbar-list-menu a.button.icon,
html:not(.iframe) a.toolbar-button{ border-radius:12px !important; }

/* Островок тулбара: у списка есть класс listing, поэтому Elastic рисовал
   каждому li нижнюю границу — белая линия между кнопками. И заливка
   доставалась и li, и ссылке: из-за скругления ссылки нижний слой
   проступал по краям размытым синим пятном. Всё лишнее снимаем с li,
   заливку оставляем только на самой кнопке. */
/* Elastic ставит шапке overflow:hidden — она обрезала тени островка
   тулбара и пилюли аккаунта по своей границе */
html:not(.iframe) body.task-mail #messagelist-header{
  overflow:visible !important; line-height:37px !important; }

html:not(.iframe) #toolbar-list-menu li{
  border:0 !important; background:transparent !important;
  box-shadow:none !important; }
/* то же для любых других тулбаров (окно составления, просмотр письма):
   у списка есть класс listing, и Elastic рисует каждому li нижнюю границу */
.menu.toolbar li, #toolbar-menu li, #messagetoolbar li{
  border:0 !important; background:transparent !important; box-shadow:none !important; }

/* Стрелка выпадающего списка в тулбаре: Elastic отбрасывал её вправо
   отступами и padding-right:85px — убираем, она встаёт вплотную к кнопке */
html:not(.iframe) .menu .dropbutton a.dropdown{
  margin-left:0 !important; margin-right:0 !important; padding-right:0 !important; }

/* Тулбар окна составления — компактный островок.
   Правило, где это задавалось, покрывает и .popupmenu, и .ui-dialog:
   фиксированная ширина сломала бы всплывающие меню и диалоги,
   поэтому ограничиваем самим тулбаром. */
/* Ширина по содержимому: при фиксированных 220px пять кнопок не помещались,
   и стрелка выпадающего списка орфографии выпадала за пилюлю. */
html:not(.iframe) body.action-compose #toolbar-menu{
  width:auto !important; max-width:none !important; min-width:0 !important;
  height:60px !important; border-radius:50px !important;
  box-sizing:border-box !important;
  display:inline-flex !important; align-items:center !important;
  flex-wrap:nowrap !important; overflow:visible !important;
  padding:0 14px !important; }
/* Выравнивание блока со стрелкой. display НЕ навязываем: кнопка
   «Зашифровать» скрыта в шаблоне инлайновым display:none (шифрование не
   настроено), и !important на display возвращал её вместе со второй стрелкой. */
html:not(.iframe) body.action-compose #toolbar-menu .dropbutton{
  align-items:center !important; float:none !important; vertical-align:middle !important; }
/* Единая форма подсветки для всех элементов островка. Раньше у кнопок и у
   стрелки были разные высоты и выравнивание: подсветка стрелки выходила за
   пилюлю сверху и снизу, а у кнопок оставалась прямоугольной. */
html:not(.iframe) body.action-compose #toolbar-menu > li,
html:not(.iframe) body.action-compose #toolbar-menu > .dropbutton,
html:not(.iframe) body.action-compose #toolbar-menu .dropbutton > a,
html:not(.iframe) body.action-compose #toolbar-menu li > a{
  align-self:center !important; }
html:not(.iframe) body.action-compose #toolbar-menu a{
  height:44px !important; min-height:44px !important; max-height:44px !important;
  border-radius:12px !important; box-sizing:border-box !important;
  display:inline-flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  padding:0 10px !important; margin:0 !important; line-height:1.15 !important; }
html:not(.iframe) body.action-compose #toolbar-menu .dropbutton a.dropdown{
  width:30px !important; min-width:30px !important; padding:0 !important;
  cursor:pointer !important; }
html:not(.iframe) body.action-compose #toolbar-menu a:hover{
  background:var(--glass-hover, var(--hover)) !important; }
html:not(.iframe) body.action-compose #toolbar-menu li{
  display:inline-flex !important; align-items:center !important;
  height:auto !important; float:none !important; }
html:not(.iframe) #toolbar-list-menu li a{ box-shadow:none !important; }
html:not(.iframe) #toolbar-list-menu li a.selected,
html:not(.iframe) #toolbar-list-menu li a.active:hover,
html:not(.iframe) #toolbar-list-menu li a:hover{
  background:var(--brand-tint) !important; box-shadow:none !important; }
/* пилюли и островки сохраняют свои формы */
html:not(.iframe) .mintrans-nav a,
html:not(.iframe) .mt-tasknav a,
html:not(.iframe) .mt-eye{ border-radius:50% !important; }
html:not(.iframe) #mailboxlist li a,
html:not(.iframe) .listing.folderlist li a{ border-radius:20px !important; }
html:not(.iframe) .back-list-button{ border-radius:20px !important; }

/* ==============================================================
 *  Диалоги — скруглённые углы и цвета нашего дизайна
 *  Скругление держит сам диалог с overflow:hidden, иначе заголовок и
 *  полоса кнопок рисуются прямоугольниками поверх и дают белые углы.
 *  Подложка непрозрачная: окно висит поверх списка и должно читаться.
 * ============================================================== */
html:not(.iframe) .ui-dialog{
  border-radius:18px !important; overflow:hidden !important; padding:0 !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important; }
html:not(.iframe) .ui-dialog .ui-dialog-titlebar{
  background:var(--surface) !important; color:var(--text) !important;
  border:0 !important; border-bottom:1px solid var(--border) !important;
  border-radius:0 !important; margin:0 !important; padding:14px 18px !important;
  font-weight:600 !important; }
html:not(.iframe) .ui-dialog .ui-dialog-titlebar-close{
  border-radius:50% !important; color:var(--text-2) !important; }
html:not(.iframe) .ui-dialog .ui-dialog-titlebar-close:hover{
  background:var(--hover) !important; color:var(--text) !important; }
html:not(.iframe) .ui-dialog .ui-dialog-content{
  background:var(--surface) !important; color:var(--text) !important;
  padding:16px 18px !important; }
html:not(.iframe) .ui-dialog .ui-dialog-buttonpane{
  background:var(--surface) !important; border:0 !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 !important; margin:0 !important; padding:12px 16px !important; }
/* внутренний блок формы — по содержимому, без своей рамки и серой заливки */
html:not(.iframe) .ui-dialog .ui-dialog-content fieldset,
html:not(.iframe) .ui-dialog .ui-dialog-content .propform{
  background:transparent !important; border:0 !important;
  height:auto !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; }
/* Только цвет фона: шорткат background стирал фоновую картинку стрелки,
   которую Bootstrap рисует у .custom-select — списки оставались без неё */
html:not(.iframe) .ui-dialog .custom-select,
html:not(.iframe) .ui-dialog .form-control{
  background-color:var(--surface-2) !important; color:var(--text) !important;
  border:2px solid var(--border) !important; border-radius:30px !important;
  height:40px !important; }

/* Размеры по содержимому: jQuery UI задаёт ширину и высоту инлайном, не
   учитывая полосу кнопок — «Отмена» упиралась в край и обрезалась
   по overflow:hidden, а над кнопками оставался пустой провал. */
html:not(.iframe) .ui-dialog{
  height:auto !important; width:auto !important;
  min-width:440px !important; max-width:92vw !important;
  box-sizing:border-box !important; }
html:not(.iframe) .ui-dialog .ui-dialog-content{
  height:auto !important; max-height:70vh !important; overflow:auto !important; }

/* Строки формы: метка и поле на одной линии, ширины фиксированы долями */
html:not(.iframe) .ui-dialog .form-group.row{
  display:flex !important; align-items:center !important;
  margin:10px 2px 10px !important; flex-wrap:nowrap !important; }
html:not(.iframe) .ui-dialog .col-form-label{
  flex:0 0 42% !important; max-width:42% !important; width:auto !important;
  padding:0 12px 0 0 !important; margin:0 !important;
  color:var(--text) !important; text-align:left !important; }
html:not(.iframe) .ui-dialog .form-group.row > div[class*="col-"]{
  flex:1 1 auto !important; max-width:none !important; width:auto !important;
  padding:0 !important; }
html:not(.iframe) .ui-dialog .form-group.row .custom-select,
html:not(.iframe) .ui-dialog .form-group.row .form-control{ width:97% !important; }

/* Кнопки: прижаты вправо и не вылезают за край диалога */
html:not(.iframe) .ui-dialog .ui-dialog-buttonpane{
  display:flex !important; justify-content:flex-end !important;
  align-items:center !important; gap:10px !important; flex-wrap:wrap !important;
  box-sizing:border-box !important; width:100% !important; }
html:not(.iframe) .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
  display:flex !important; gap:10px !important; float:none !important;
  margin:0 !important; padding:0 !important;
  box-sizing:border-box !important; max-width:100% !important;
  flex-wrap:wrap !important; justify-content:flex-end !important; }
html:not(.iframe) .ui-dialog .ui-dialog-buttonpane button{
  margin:0 !important; border-radius:10px !important; }

/* Метки в формах диалогов и всплывающих панелей — отступ слева 30px.
   Правилось в DevTools на базовом правиле Bootstrap для всех .col-*,
   но оно покрывает каждую колонку сетки в интерфейсе, поэтому здесь
   ограничено метками форм. */
html:not(.iframe) .popupmenu.propform .col-form-label{ padding-left:30px !important; }
/* выпадающие списки в тех же формах — 97% ширины колонки */
html:not(.iframe) .popupmenu.propform .custom-select{ width:97% !important; }

@media screen and (max-height:520px) and (orientation:landscape){
  body.task-mail #messagelist-header{ padding:4px 8px !important; }
  body.task-mail #layout-list > .searchbar.menu{ height:38px !important; margin:6px 10px !important; }
  body.task-mail #layout-list > .searchbar.menu input{ height:34px !important; line-height:34px !important; }
}

/* ==============================================================
 *  ВХОД — «жидкое стекло»
 *  Стекло видно только если под ним есть что размывать. На светлой
 *  теме белая карточка на почти белом фоне читалась как обычная
 *  панель, поэтому под неё кладём насыщенные цветные пятна, а саму
 *  карточку делаем по-настоящему прозрачной с бликом по краю.
 * ============================================================== */
/* Пятна лежали под непрозрачной заливкой body (z-index:-1) и почти не
   читались — стеклу нечего было размывать. Кладём цветную базу прямо в фон
   body, а анимированные слои поднимаем НАД ним, но под содержимое. */
html:not(.iframe) body.task-login{
  background:
    radial-gradient(58vw 58vw at 14% 18%, rgba(29,78,137,.58), transparent 60%),
    radial-gradient(48vw 48vw at 86% 24%, rgba(0,164,180,.44), transparent 58%),
    radial-gradient(56vw 56vw at 72% 88%, rgba(72,116,196,.52), transparent 62%),
    radial-gradient(40vw 40vw at 24% 86%, rgba(239,169,60,.26), transparent 60%),
    var(--app-bg) !important; }
html.dark-mode:not(.iframe) body.task-login{
  background:
    radial-gradient(64vw 64vw at 16% 20%, rgba(45,110,190,.26), transparent 62%),
    radial-gradient(54vw 54vw at 84% 76%, rgba(0,150,170,.20), transparent 62%),
    var(--app-bg) !important; }
html:not(.iframe) body.task-login::before,
html:not(.iframe) body.task-login::after{ z-index:0 !important; }
html:not(.iframe) body.task-login #layout{ position:relative !important; z-index:1 !important; }

html:not(.iframe) body.task-login::before{
  background:
    radial-gradient(42vw 42vw at 20% 26%, rgba(29,78,137,.42), transparent 62%),
    radial-gradient(34vw 34vw at 80% 20%, rgba(0,164,180,.34), transparent 60%),
    radial-gradient(46vw 46vw at 62% 84%, rgba(72,116,196,.36), transparent 64%) !important;
  opacity:1 !important; }
html:not(.iframe) body.task-login::after{
  background:
    radial-gradient(32vw 32vw at 86% 68%, rgba(239,169,60,.22), transparent 60%),
    radial-gradient(36vw 36vw at 10% 80%, rgba(29,78,137,.30), transparent 62%) !important;
  opacity:1 !important; }
html.dark-mode:not(.iframe) body.task-login::before{
  background:
    radial-gradient(42vw 42vw at 20% 26%, rgba(45,110,190,.44), transparent 62%),
    radial-gradient(34vw 34vw at 80% 20%, rgba(0,150,170,.32), transparent 60%),
    radial-gradient(46vw 46vw at 62% 84%, rgba(60,96,170,.40), transparent 64%) !important; }
html.dark-mode:not(.iframe) body.task-login::after{
  background:
    radial-gradient(32vw 32vw at 86% 68%, rgba(200,140,50,.20), transparent 60%),
    radial-gradient(36vw 36vw at 10% 80%, rgba(30,70,140,.34), transparent 62%) !important; }

/* Карточка: прозрачность + размытие подложки + блик по верхнему краю */
.task-login #login-form{
  position:relative !important; overflow:hidden !important;
  background:rgba(255,255,255,.40) !important;
  -webkit-backdrop-filter:blur(30px) saturate(190%) !important;
  backdrop-filter:blur(30px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  border-radius:24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 24px 60px rgba(16,32,60,.22),
    0 4px 14px rgba(16,32,60,.10) !important; }
html.dark-mode .task-login #login-form{
  background:rgba(18,27,40,.44) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 26px 64px rgba(0,0,0,.55) !important; }

/* медленный блик, проходящий по стеклу — «жидкость» */
.task-login #login-form::after{
  content:''; position:absolute; inset:-40% -20%; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  animation:mtSheen 11s ease-in-out infinite; }
html.dark-mode .task-login #login-form::after{
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%); }
@keyframes mtSheen{
  0%      { transform:translate3d(-65%,0,0); }
  55%,100%{ transform:translate3d(65%,0,0); } }

/* Поля — тоже стекло, а не плотная заливка */
html.dark-mode .task-login #login-form .form-control{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.15) !important; }
.task-login #login-form .form-control:focus{
  background:rgba(255,255,255,.72) !important;
  border-color:var(--brand) !important;
  box-shadow:0 0 0 4px rgba(29,78,137,.20) !important; }
html.dark-mode .task-login #login-form .form-control:focus{
  background:rgba(255,255,255,.12) !important; }

/* Герб — без подложки, просто на фоне */
.mt-brand{ position:relative !important; }
.mt-brand::before{ content:none !important; }

@media (prefers-reduced-motion: reduce){
  .task-login #login-form::after{ animation:none !important; transform:none !important; }
}

/* ==============================================================
 *  НАСТРОЙКИ И КОНТАКТЫ — то же жидкое стекло, что в почте
 *  Раньше эти разделы оставались плоскими: стеклу нечего было
 *  размывать, потому что непрозрачная заливка body перекрывала
 *  анимированные слои. Делаем как на входе — цветная база в фон
 *  body, анимация над ней, содержимое сверху.
 * ============================================================== */
html:not(.iframe) body.task-settings,
html:not(.iframe) body.task-addressbook{
  background:
    radial-gradient(58vw 58vw at 12% 16%, rgba(29,78,137,.30), transparent 60%),
    radial-gradient(48vw 48vw at 88% 26%, rgba(0,164,180,.22), transparent 58%),
    radial-gradient(54vw 54vw at 74% 90%, rgba(72,116,196,.26), transparent 62%),
    var(--app-bg) !important; }
html.dark-mode:not(.iframe) body.task-settings,
html.dark-mode:not(.iframe) body.task-addressbook{
  background:
    radial-gradient(58vw 58vw at 12% 16%, rgba(45,110,190,.30), transparent 60%),
    radial-gradient(48vw 48vw at 88% 26%, rgba(0,150,170,.20), transparent 58%),
    radial-gradient(54vw 54vw at 74% 90%, rgba(60,96,170,.28), transparent 62%),
    var(--app-bg) !important; }
html:not(.iframe) body.task-settings::before,
html:not(.iframe) body.task-settings::after,
html:not(.iframe) body.task-addressbook::before,
html:not(.iframe) body.task-addressbook::after{ z-index:0 !important; }
html:not(.iframe) body.task-settings #layout,
html:not(.iframe) body.task-addressbook #layout{
  position:relative !important; z-index:1 !important; background:transparent !important; }

/* Колонки — стеклянные панели с воздухом между ними */
@media screen and (min-width:769px){
  /* Одинаковые поля со всех четырёх сторон: 7px даёт контейнер и 7px каждая
     колонка — снаружи 14px, между колонками тоже 14px. Через :last-child не
     получалось: последней остаётся скрытая панель контента, и списку правый
     отступ не доставался. */
  html:not(.iframe) body.task-settings #layout,
  html:not(.iframe) body.task-addressbook #layout{
    padding:7px !important; box-sizing:border-box !important; }
  html:not(.iframe) body.task-settings #layout > div,
  html:not(.iframe) body.task-addressbook #layout > div{
    background:var(--glass-2) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-line) !important; border-radius:18px !important;
    box-shadow:var(--glass-edge), var(--glass-shadow) !important;
    margin:7px !important; box-sizing:border-box !important; }
  /* рейл задач убран — его кнопки переносит mintrans.js в левую панель */
  html:not(.iframe) body.task-settings #layout-menu,
  html:not(.iframe) body.task-addressbook #layout-menu{ display:none !important; }
  html:not(.iframe) body.task-settings #layout-sidebar,
  html:not(.iframe) body.task-addressbook #layout-sidebar{
    flex:0 0 268px !important; min-width:268px !important; max-width:320px !important;
    display:flex !important; flex-direction:column !important; }
}

/* Список разделов и форма делят экран как список писем и письмо в почте:
   пока раздел не выбран — список во всю ширину, форма скрыта; после выбора
   наоборот. Классы mt-empty / mt-prefs-open ставит mintrans.js по реальному
   адресу во фрейме, а не по .selected — тот залипает после «Назад». */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-settings #layout-content.mt-empty,
  html:not(.iframe) body.task-addressbook #layout-content.mt-empty{ display:none !important; }

  html:not(.iframe) body.task-settings #layout:not(.mt-prefs-open) #layout-list,
  html:not(.iframe) body.task-addressbook #layout:not(.mt-prefs-open) #layout-list{
    flex:1 1 auto !important; max-width:none !important; width:auto !important; }

  html:not(.iframe) body.task-settings #layout.mt-prefs-open #layout-list,
  html:not(.iframe) body.task-addressbook #layout.mt-prefs-open #layout-list{
    display:none !important; }
  html:not(.iframe) body.task-settings #layout.mt-prefs-open #layout-content,
  html:not(.iframe) body.task-addressbook #layout.mt-prefs-open #layout-content{
    display:flex !important; flex:1 1 auto !important; max-width:none !important; }
  /* на широких экранах Elastic прячет «Назад» — здесь она нужна для возврата */
  html:not(.iframe) body.task-settings #layout.mt-prefs-open .back-list-button,
  html:not(.iframe) body.task-addressbook #layout.mt-prefs-open .back-list-button{
    display:inline-flex !important; }
}

/* Кнопка «Написать» наверху левой панели */
.mt-tasknav-compose{ padding:14px 12px 8px !important; }
.mt-tasknav-compose a.compose{
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:12px !important; width:100% !important; height:40px !important; padding:0 22px !important;
  background:var(--brand) !important; color:#fff !important;
  border-radius:20px !important; font-size:15px !important; font-weight:600 !important;
  box-shadow:var(--shadow-1) !important; }
.mt-tasknav-compose a.compose:before{
  color:#fff !important; margin:0 !important; float:none !important; height:auto !important; }
.mt-tasknav-compose a.compose:hover{ background:var(--brand-hover) !important; }

/* Строка иконок задач внизу левой панели — как нижняя навигация в почте */
.mt-tasknav{
  margin:auto 12px 14px !important; padding:6px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  flex-wrap:nowrap !important; gap:0 !important;
  background:var(--glass-item, var(--surface)) !important;
  border:1px solid var(--glass-line) !important; border-radius:26px !important;
  box-shadow:var(--glass-edge), var(--shadow-1) !important; }
/* строго квадратная основа: при flex:1 1 0 и max-width:44px ссылка
   растягивалась до 44×40 и radius:50% давал овал вместо круга */
.mt-tasknav a{
  flex:0 0 40px !important; max-width:40px !important;
  width:40px !important; height:40px !important; min-width:40px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important; color:var(--text-2) !important;
  background:transparent !important; border:0 !important; margin:0 !important; padding:0 !important; }
.mt-tasknav a .inner{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mt-tasknav a:before{
  margin:0 !important; float:none !important; width:auto !important; font-size:1.3em !important;
  line-height:1 !important; height:auto !important; display:inline-block !important; }
/* .menu на контейнере тянет за собой раскладку Elastic — гасим лишнее */
.mt-tasknav.menu, .mt-tasknav.toolbar{ height:auto !important; overflow:visible !important; }
.mt-tasknav.menu a{ float:none !important; min-width:40px !important; max-width:40px !important;
  line-height:1 !important; font-size:1rem !important; text-align:center !important; }
/* строка иконок распределяется равномерно, но сами кнопки остаются круглыми */
.mt-tasknav{ justify-content:space-around !important; }
.mt-tasknav a:hover{ background:var(--glass-hover, var(--hover)) !important; color:var(--text) !important; }
.mt-tasknav a.selected{
  background:var(--brand-tint) !important; color:var(--brand-ink, var(--brand)) !important; }
.mt-tasknav a.logout:hover{ background:rgba(208,68,63,.14) !important; color:var(--danger) !important; }
.mt-tasknav a.compose{ display:none !important; } /* она уже наверху панели */
.mt-tasknav a.about{ display:none !important; }   /* «О программе» в панели не нужна */
/* шапки и футеры внутри колонок — без своих заливок и линий */
html:not(.iframe) body.task-settings #layout > div > .header,
html:not(.iframe) body.task-settings #layout > div > .footer,
html:not(.iframe) body.task-addressbook #layout > div > .header,
html:not(.iframe) body.task-addressbook #layout > div > .footer{
  background:transparent !important; border:0 !important; box-shadow:none !important; }
html:not(.iframe) body.task-settings .scroller,
html:not(.iframe) body.task-addressbook .scroller{ background:transparent !important; }

/* Рейл задач: только иконки. Подписи Elastic обрезает до «Напи…»,
   «О програм…» — читается как сломанная вёрстка. */
html:not(.iframe) body.task-settings #taskmenu a .inner,
html:not(.iframe) body.task-addressbook #taskmenu a .inner{ display:none !important; }
html:not(.iframe) body.task-settings #taskmenu a,
html:not(.iframe) body.task-addressbook #taskmenu a{
  width:52px !important; height:48px !important; margin:3px auto !important;
  border-radius:14px !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  background:transparent !important; border:0 !important; }
html:not(.iframe) body.task-settings #taskmenu a:before,
html:not(.iframe) body.task-addressbook #taskmenu a:before{
  font-size:19px !important; margin:0 !important; float:none !important; width:auto !important; }
html:not(.iframe) body.task-settings #taskmenu a.selected,
html:not(.iframe) body.task-addressbook #taskmenu a.selected{
  background:var(--brand-tint) !important; color:var(--brand-ink, var(--brand)) !important; }
html:not(.iframe) body.task-settings #taskmenu .action-buttons .compose,
html:not(.iframe) body.task-addressbook #taskmenu .action-buttons .compose{
  width:52px !important; height:52px !important; border-radius:16px !important;
  background:var(--brand) !important; color:#fff !important; margin:6px auto 10px !important; }
html:not(.iframe) body.task-settings #taskmenu a.logout:hover,
html:not(.iframe) body.task-addressbook #taskmenu a.logout:hover{
  background:rgba(208,68,63,.14) !important; color:var(--danger) !important; }

/* Пункты левой панели шли во всю ширину, и их фон вылезал за скруглённые
   углы панели. Даём им боковые поля и запрещаем панели выпускать
   содержимое за свою форму. */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-settings #layout > div,
  html:not(.iframe) body.task-addressbook #layout > div{ overflow:hidden !important; }
  html:not(.iframe) body.task-settings #layout-sidebar .listing li,
  html:not(.iframe) body.task-addressbook #layout-sidebar .listing li{
    border:0 !important; }
  /* Elastic заливает сам li цветом #ebf9ff — под скруглённой пилюлей это
     давало голубую полосу во всю ширину. Заливку несёт только ссылка. */
  html:not(.iframe) body.task-settings .listing li.selected,
  html:not(.iframe) body.task-addressbook #directorylist li.selected{
    background:transparent !important; background-color:transparent !important; }
  /* то же с наведением: на li оно рисовалось прямоугольником во всю ширину
     поверх скруглённой пилюли */
  html:not(.iframe) body.task-settings #layout-sidebar .listing li:hover,
  html:not(.iframe) body.task-addressbook #layout-sidebar .listing li:hover{
    background:transparent !important; background-color:transparent !important; }
  html:not(.iframe) body.task-settings #layout-sidebar .listing li a:hover,
  html:not(.iframe) body.task-addressbook #layout-sidebar .listing li a:hover{
    background:var(--glass-hover, var(--hover)) !important; }
  html:not(.iframe) body.task-settings #layout-sidebar .listing li a,
  html:not(.iframe) body.task-addressbook #layout-sidebar .listing li a{
    width:92% !important; margin:3px auto !important; border-radius:14px !important;
    padding-left:14px !important; padding-right:14px !important;
    box-sizing:border-box !important; }
}

/* Пункты списков настроек — «пилюли», как папки в почте */
html:not(.iframe) body.task-settings #settings-menu li a,
html:not(.iframe) body.task-settings #sections-table td,
html:not(.iframe) body.task-addressbook #directorylist li a{
  border-radius:14px !important; margin:3px 10px !important;
  border:1px solid transparent !important; }
html:not(.iframe) body.task-settings #settings-menu li a:hover,
html:not(.iframe) body.task-addressbook #directorylist li a:hover{
  background:var(--glass-hover, var(--hover)) !important; }
html:not(.iframe) body.task-settings #settings-menu li.selected a,
html:not(.iframe) body.task-settings #sections-table tr.selected td,
html:not(.iframe) body.task-addressbook #directorylist li.selected a{
  background:var(--brand-tint) !important; color:var(--brand-ink, var(--brand)) !important;
  border-color:var(--brand) !important; font-weight:600 !important; }
html:not(.iframe) body.task-settings .listing tbody tr td{ border:0 !important; }

/* Разделы «Настройки сервера» и «Шифрование» не показываем.
   Roundcube задаёт им id и класс server / encryption (program/actions/
   settings/index.php), поэтому целимся и по классу, и по id строки. */
html:not(.iframe) body.task-settings #sections-table tr.server,
html:not(.iframe) body.task-settings #sections-table tr.encryption,
html:not(.iframe) body.task-settings #sections-table tr#rcmrowserver,
html:not(.iframe) body.task-settings #sections-table tr#rcmrowencryption{
  display:none !important; }

/* Разделы настроек — крупные отдельные карточки, разложенные сеткой.
   Одной колонкой они оставляли почти всю панель пустой. */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-settings #sections-table{
    display:block !important; width:100% !important; }
  html:not(.iframe) body.task-settings #sections-table tbody{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap:12px !important; padding:14px !important; }
  html:not(.iframe) body.task-settings #sections-table tr{
    display:block !important; margin:0 !important; border:0 !important; }
  html:not(.iframe) body.task-settings #sections-table tr td{
    display:flex !important; align-items:center !important; gap:14px !important;
    width:auto !important; min-height:68px !important; padding:16px 18px !important;
    margin:0 !important; border:1px solid var(--glass-line) !important;
    border-radius:16px !important;
    background:var(--glass-item, rgba(255,255,255,.10)) !important;
    box-shadow:var(--glass-edge) !important;
    font-size:15px !important; font-weight:500 !important; color:var(--text) !important;
    cursor:pointer !important; box-sizing:border-box !important;
    transition:background .18s ease, border-color .18s ease, transform .14s ease, box-shadow .18s ease !important; }
  html:not(.iframe) body.task-settings #sections-table tr td:before{
    font-size:21px !important; margin:0 !important; float:none !important;
    width:auto !important; color:var(--text-2) !important; }
  html:not(.iframe) body.task-settings #sections-table tr:hover td{
    background:var(--glass-hover, var(--hover)) !important;
    border-color:var(--border-strong) !important;
    transform:translateY(-2px) !important;
    box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
  html:not(.iframe) body.task-settings #sections-table tr.selected td{
    background:var(--brand-tint) !important; border-color:var(--brand) !important;
    color:var(--brand-ink, var(--brand)) !important; font-weight:600 !important; }
  html:not(.iframe) body.task-settings #sections-table tr.selected td:before{
    color:var(--brand-ink, var(--brand)) !important; }
}
@media (prefers-reduced-motion: reduce){
  html:not(.iframe) body.task-settings #sections-table tr:hover td{ transform:none !important; }
}

/* --- Настройки → Папки: строки-карточки с тумблером внутри ---
   Пилюли папок из почты (.listing.folderlist li a) применялись и здесь, а
   переключатель подписки лежит вне ссылки — он оказывался за краем карточки.
   Ширину ограничиваем: во весь экран подпись и тумблер разносило так, что
   их не связать взглядом. */
@media screen and (min-width:769px){
  html:not(.iframe) body.task-settings #folders-box .scroller,
  html:not(.iframe) body.task-settings #subscription-table,
  html:not(.iframe) body.task-settings .listing.folderlist{
    max-width:980px !important; margin-left:auto !important; margin-right:auto !important; }

  html:not(.iframe) body.task-settings .listing.folderlist li{
    position:relative !important; margin:0 0 8px !important; border:0 !important; }
  html:not(.iframe) body.task-settings .listing.folderlist li a{
    margin:0 !important; padding:14px 68px 14px 18px !important;
    min-height:56px !important; border-radius:14px !important;
    display:flex !important; align-items:center !important; gap:12px !important;
    font-size:14.5px !important; }
  /* тумблер и любые правые контролы — внутрь карточки, по центру по вертикали */
  html:not(.iframe) body.task-settings .listing.folderlist li > :not(a){
    position:absolute !important; right:18px !important; top:50% !important;
    transform:translateY(-50%) !important; margin:0 !important; z-index:2 !important; }

  /* строка поиска в настройках — стеклянная пилюля, а не полоса во всю ширину */
  html:not(.iframe) body.task-settings .searchbar,
  html:not(.iframe) body.task-addressbook .searchbar{
    max-width:980px !important; margin:12px auto 14px !important;
    height:44px !important; border-radius:22px !important;
    background:var(--glass-item, rgba(255,255,255,.10)) !important;
    border:1px solid var(--glass-line) !important;
    box-shadow:var(--glass-edge) !important;
    display:flex !important; align-items:center !important;
    padding:0 10px 0 14px !important; box-sizing:border-box !important; }
  html:not(.iframe) body.task-settings .searchbar input,
  html:not(.iframe) body.task-addressbook .searchbar input{
    background:transparent !important; border:0 !important; box-shadow:none !important;
    height:40px !important; flex:1 1 auto !important; min-width:0 !important; }
}

/* ==============================================================
 *  КОНТАКТЫ — по тем же правилам, что список писем
 *  Раздел оставался почти неоформленным: строки во всю ширину без
 *  карточек, островок тулбара вылезал за шапку, поиск по центру.
 * ============================================================== */
@media screen and (min-width:769px){
  /* шапка колонки: высота как в почте, содержимое не обрезается */
  html:not(.iframe) body.task-addressbook #layout-list > .header{
    min-height:86px !important; height:auto !important; overflow:visible !important;
    display:flex !important; align-items:center !important;
    justify-content:center !important; position:relative !important;
    padding:0 16px !important; border:0 !important; }

  /* островок тулбара — в потоке по центру, а не абсолютом поверх шапки */
  html:not(.iframe) body.task-addressbook #toolbar-menu,
  html:not(.iframe) body.task-addressbook #toolbar-list-menu{
    position:static !important; transform:none !important; left:auto !important;
    top:auto !important; margin:0 auto !important; width:auto !important;
    display:inline-flex !important; align-items:center !important; flex-wrap:nowrap !important;
    padding:8px 15px !important; border-radius:999px !important;
    background:var(--glass-2) !important; border:1px solid var(--glass-line) !important; }
  html:not(.iframe) body.task-addressbook #toolbar-menu li,
  html:not(.iframe) body.task-addressbook #toolbar-list-menu li{
    display:inline-flex !important; align-items:center !important; border:0 !important; }

  /* строка поиска — слева, пилюлей, как в почте */
  html:not(.iframe) body.task-addressbook #layout-list > .searchbar{
    position:absolute !important; left:17px !important; top:6% !important;
    transform:translateY(-58%) !important; right:auto !important;
    width:340px !important; max-width:calc(100% - 320px) !important;
    height:39px !important; border-radius:28px !important; margin:0 !important;
    z-index:6 !important; }

  /* строки контактов — карточки, а не полосы во всю ширину */
  html:not(.iframe) body.task-addressbook #contacts-table{ display:block !important; }
  html:not(.iframe) body.task-addressbook #contacts-table tbody{ display:block !important; }
  html:not(.iframe) body.task-addressbook #contacts-table tr{
    display:flex !important; align-items:center !important;
    margin:5px 14px !important; padding:0 14px !important; min-height:46px !important;
    border:1px solid var(--border) !important; border-radius:16px !important;
    box-sizing:border-box !important; }
  html:not(.iframe) body.task-addressbook #contacts-table tr td{
    border:0 !important; display:flex !important; align-items:center !important;
    padding:0 !important; height:auto !important; }
  html:not(.iframe) body.task-addressbook #contacts-table tr:hover{
    background:var(--glass-hover, var(--hover)) !important;
    border-color:var(--border-strong) !important; }
  html:not(.iframe) body.task-addressbook #contacts-table tr.selected{
    background:var(--brand-tint) !important; border-color:var(--brand) !important;
    color:var(--brand-ink, var(--brand)) !important; font-weight:600 !important; }
  /* Подсветка и контур фокуса висели на ячейке и на ссылке внутри строки —
     это давало тёмный прямоугольник вокруг имени и синюю рамку при клике,
     поверх скруглённой карточки. Фон и рамку несёт только сама строка. */
  html:not(.iframe) body.task-addressbook #contacts-table tr td,
  html:not(.iframe) body.task-addressbook #contacts-table tr td *,
  html:not(.iframe) body.task-addressbook #contacts-table tr td:hover,
  html:not(.iframe) body.task-addressbook #contacts-table tr td *:hover{
    background:transparent !important; background-color:transparent !important;
    box-shadow:none !important; }
  html:not(.iframe) body.task-addressbook #contacts-table tr:focus,
  html:not(.iframe) body.task-addressbook #contacts-table tr td:focus,
  html:not(.iframe) body.task-addressbook #contacts-table tr td *:focus,
  html:not(.iframe) body.task-addressbook #contacts-table tr td *:focus-visible{
    outline:0 !important; border-color:transparent !important; box-shadow:none !important; }

  /* пагинация — компактно и справа, как в списке писем */
  html:not(.iframe) body.task-addressbook .pagenav.footer{
    justify-content:flex-end !important; align-items:center !important;
    gap:7px !important; padding:15px 25px !important;
    border:0 !important; background:transparent !important; }
  html:not(.iframe) body.task-addressbook .pagenav.footer a.button{
    width:38px !important; height:38px !important; border-radius:11px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex:0 0 auto !important; padding:0 !important; margin:0 !important; }
  html:not(.iframe) body.task-addressbook .pagenav.footer .pagenav-text{
    font-size:13.5px !important; color:var(--text-2) !important;
    white-space:nowrap !important; margin:0 10px 0 0 !important; flex:0 0 auto !important; }
}

/* Формы настроек — стеклянные карточки-фрагменты */
html:not(.iframe) body.task-settings fieldset.propform,
html:not(.iframe) body.task-settings .formcontent > fieldset,
html:not(.iframe) body.task-addressbook fieldset{
  background:var(--glass-item, rgba(255,255,255,.10)) !important;
  border:1px solid var(--glass-line) !important; border-radius:16px !important;
  padding:14px 16px !important; margin:0 0 14px !important; }
html:not(.iframe) body.task-settings legend{
  font-weight:600 !important; color:var(--text) !important; }

/* ==============================================================
 *  ЧТЕНИЕ ПИСЬМА — стеклянный лист
 *  Раньше тело письма было залито --surface: длинный текст не должен
 *  лежать на движущемся градиенте. Теперь стекло даём самому фрейму
 *  (он в основном окне, backdrop-filter размывает фон под ним), а
 *  документ внутри делаем прозрачным. Плотность --glass-3 (.82)
 *  выбрана так, чтобы текст оставался читаемым.
 * ============================================================== */
html.iframe body.task-mail:not(.action-compose){ background:transparent !important; }

@media screen and (min-width:769px){
  html:not(.iframe) body.task-mail #layout-content{ background:transparent !important; }
  html:not(.iframe) body.task-mail #messagecontframe{
    box-sizing:border-box !important;
    margin:14px 20px 20px !important;
    width:calc(100% - 40px) !important; height:calc(100% - 34px) !important;
    background:var(--glass-3) !important;
    -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
    border:1px solid var(--glass-line) !important;
    border-radius:20px !important;
    box-shadow:var(--glass-edge), var(--glass-shadow-lg) !important; }
}
@media screen and (max-width:768px){
  html:not(.iframe) body.task-mail #messagecontframe{
    box-sizing:border-box !important; margin:8px !important;
    width:calc(100% - 16px) !important; height:calc(100% - 16px) !important;
    background:var(--glass-3) !important;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-line) !important; border-radius:16px !important;
    box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
}

/* Шапка письма внутри листа: тема, аватар, отправитель */
#message-header{
  border-bottom:1px solid var(--glass-line) !important;
  background:transparent !important; }
#message-header h2.subject{ letter-spacing:-.01em !important; }
#message-header .header-links a{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:5px 12px !important; border-radius:999px !important;
  background:var(--glass-item, rgba(255,255,255,.10)) !important;
  border:1px solid var(--glass-line) !important;
  transition:background .18s ease, color .18s ease, border-color .18s ease !important; }
#message-header .header-links a:hover{
  background:var(--brand-tint) !important; color:var(--brand) !important;
  border-color:var(--brand) !important; }

/* «Назад» — стеклянная пилюля в тон островку тулбара */
html:not(.iframe) #layout-content > .header .back-list-button{
  background:var(--glass-2) !important;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line) !important;
  box-shadow:var(--glass-edge), var(--glass-shadow) !important; }
html:not(.iframe) #layout-content > .header .back-list-button:hover{
  background:var(--brand-tint) !important; border-color:var(--brand) !important; }

/* --------------------------------------------------------------
 *  Поля входа — стеклянные «пилюли» с иконкой внутри,
 *  кнопка показа пароля и «Запомнить меня»
 * -------------------------------------------------------------- */
.task-login #login-form table,
.task-login #login-form tbody,
.task-login #login-form tr{ display:block !important; width:100% !important; }
.task-login #login-form tr{ margin:0 0 14px !important; }
.task-login #login-form td.title{ display:none !important; }

/* строка = стеклянная пилюля, внутри иконка, поле и кнопка-глаз */
.task-login #login-form td.input{
  display:flex !important; align-items:center !important; gap:10px !important;
  width:100% !important; padding:0 8px 0 14px !important; height:54px !important;
  border-radius:16px !important;
  /* только контур: без заливки и без внутренней тени — на белой карточке
     белая рамка не читалась, поэтому контур тёмный полупрозрачный */
  background:transparent !important;
  border:1px solid rgba(16,32,60,.18) !important;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important; }
html.dark-mode .task-login #login-form td.input{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important; }
.task-login #login-form td.input:focus-within{
  border-color:var(--brand) !important; background:transparent !important;
  box-shadow:0 0 0 4px rgba(29,78,137,.18) !important; }
html.dark-mode .task-login #login-form td.input:focus-within{
  background:rgba(255,255,255,.11) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 4px rgba(77,139,218,.24) !important; }

/* иконка слева — без рамок и подложек Bootstrap */
.task-login #login-form .input-group-prepend{ margin:0 !important; }
.task-login #login-form .input-group-text{
  background:transparent !important; border:0 !important; padding:0 !important;
  color:var(--text-3) !important; font-size:17px !important; }
.task-login #login-form td.input:focus-within .input-group-text{ color:var(--brand) !important; }

/* само поле — прозрачное внутри пилюли */
.task-login #login-form .form-control{
  flex:1 1 auto !important; min-width:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  height:77% !important; padding:0 !important; font-size:15px !important;
  color:var(--text) !important; }
.task-login #login-form .form-control:focus{
  background:transparent !important; box-shadow:none !important; }
/* селектор с html.dark-mode специфичнее и раньше перекрашивал поле —
   заливка теперь только у пилюли td.input, само поле всегда прозрачно */
html.dark-mode .task-login #login-form .form-control,
html.dark-mode .task-login #login-form .form-control:focus{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* автозаполнение Chrome заливает поле своим жёлтым — гасим */
/* Никаких белых ореолов вокруг полей: остаётся только контур пилюли
   и синее кольцо фокуса. Тени снимаем и с ячейки, и с input-group, и с
   самого поля — иначе остаточная тень Bootstrap читается как свечение. */
.task-login #login-form td.input,
.task-login #login-form .input-group,
.task-login #login-form .input-group-lg,
.task-login #login-form .form-control,
.task-login #login-form .form-control:focus,
.task-login #login-form .form-control:hover{
  box-shadow:none !important; filter:none !important; text-shadow:none !important; }
.task-login #login-form td.input:focus-within{
  box-shadow:0 0 0 4px rgba(29,78,137,.18) !important; }
html.dark-mode .task-login #login-form td.input:focus-within{
  box-shadow:0 0 0 4px rgba(77,139,218,.24) !important; }

/* Автозаполнение Chrome заливает поле своим светлым фоном и его нельзя
   перебить обычным background — гасим отложенным переходом и inset-тенью */
.task-login #login-form .form-control:-webkit-autofill,
.task-login #login-form .form-control:-webkit-autofill:hover,
.task-login #login-form .form-control:-webkit-autofill:focus,
.task-login #login-form .form-control:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:0 0 0 1000px transparent inset !important;
  box-shadow:0 0 0 1000px transparent inset !important;
  caret-color:var(--text) !important;
  transition:background-color 9999s ease-out 0s !important; }

/* кнопка «показать пароль» */
.mt-eye{
  flex:0 0 auto !important; width:38px !important; height:38px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:0 !important; border-radius:50% !important; cursor:pointer !important;
  background:transparent !important; color:var(--text-3) !important; padding:0 !important;
  transition:background .18s ease, color .18s ease !important; }
.mt-eye:hover{ background:rgba(29,78,137,.10) !important; color:var(--text) !important; }
.mt-eye.mt-eye-on{ color:var(--brand) !important; }
html.dark-mode .mt-eye:hover{ background:rgba(255,255,255,.10) !important; }

/* «Запомнить меня» — свой чекбокс */
.mt-remember{
  display:flex !important; align-items:center !important; gap:10px !important;
  margin:2px 0 18px !important; cursor:pointer !important; user-select:none !important;
  font-size:14px !important; color:var(--text-2) !important; }
.mt-remember input{ position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; }
.mt-remember-box{
  flex:0 0 auto; width:20px; height:20px; border-radius:7px;
  background:rgba(255,255,255,.55); border:1px solid rgba(16,32,60,.22);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease, transform .12s ease; }
html.dark-mode .mt-remember-box{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.20); }
.mt-remember-box:before{
  content:''; width:11px; height:6px; margin-top:-2px;
  border-left:2.2px solid #fff; border-bottom:2.2px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:transform .18s cubic-bezier(.22,1,.36,1), opacity .14s ease; }
.mt-remember input:checked + .mt-remember-box{
  background:var(--brand); border-color:var(--brand); }
.mt-remember input:checked + .mt-remember-box:before{ transform:rotate(-45deg) scale(1); opacity:1; }
.mt-remember input:focus-visible + .mt-remember-box{ box-shadow:0 0 0 4px rgba(29,78,137,.20); }
.mt-remember:hover .mt-remember-box{ transform:translateY(-1px); }
.mt-remember:hover .mt-remember-text{ color:var(--text) !important; }

/* кнопка «Войти» — крупнее и мягче */
.task-login .btn-primary{
  height:52px !important; border-radius:16px !important;
  font-size:15px !important; letter-spacing:.04em !important; }

@media (prefers-reduced-motion: reduce){
  .mt-remember-box, .mt-remember-box:before, .mt-eye{ transition:none !important; }
}

/* ==============================================================
 *  АДРЕС ОТПРАВИТЕЛЯ РЯДОМ С ИМЕНЕМ
 *  Roundcube показывает только отображаемое имя, адрес прячет в
 *  title. Выводим его следом (mintrans.js → mtShowAddresses) и
 *  делаем кликабельным: нажатие кладёт адрес в буфер обмена.
 * ============================================================== */
.mt-addr{
  display:inline-block; margin-left:6px; cursor:pointer;
  font-size:.92em; font-weight:400; opacity:.72;
  color:var(--color-font-secondary, #6b7a90) !important;
  user-select:text; -webkit-user-select:text;
  border-bottom:1px dashed currentColor; line-height:1.15;
  transition:opacity .12s ease, color .12s ease; }
.mt-addr:before{ content:"<"; }
.mt-addr:after{ content:">"; }
.mt-addr:hover, .mt-addr:focus-visible{ opacity:1; }
.mt-addr.mt-addr-copied{
  opacity:1; border-bottom-color:transparent;
  color:var(--color-success, #1f9d55) !important; font-weight:500; }
/* «скопировано» — это уже не адрес, угловые скобки убираем */
.mt-addr.mt-addr-copied:before, .mt-addr.mt-addr-copied:after{ content:""; }

/* ==============================================================
 *  ПОСТРАНИЧНАЯ НАВИГАЦИЯ УБРАНА
 *  Список писем подгружается прокруткой (mintrans.js), страниц
 *  больше нет — кнопки «первая/предыдущая/следующая/последняя»
 *  и поле номера страницы только путают: они перезагружают список
 *  целиком и сбрасывают всё, что уже подтянулось.
 *  Счётчик #rcmcountdisplay оставлен: он показывает «Показано N из M».
 * ============================================================== */
#layout-list .pagenav.footer > a.firstpage,
#layout-list .pagenav.footer > a.prevpage,
#layout-list .pagenav.footer > a.nextpage,
#layout-list .pagenav.footer > a.lastpage,
#layout-list .pagenav.footer > input.rcpagejumper{ display:none !important; }

/* ==============================================================
 *  ТЕНИ ОТКЛЮЧЕНЫ ПО ВСЕМУ ПРОЕКТУ
 *  Правило стоит последним в файле и перебивает все box-shadow,
 *  включая стеклянные (--glass-shadow) и блики по краю (--glass-edge),
 *  а также свечение drop-shadow под гербом.
 *  Исключение — кольца фокуса: без них не видно, где находится
 *  курсор при работе с клавиатуры, это уже не эстетика, а доступность.
 * ============================================================== */
*, *::before, *::after{ box-shadow:none !important; }
.mt-brand-emblem{ filter:none !important; }

:focus-visible{ box-shadow:0 0 0 3px rgba(29,78,137,.30) !important; }
html.dark-mode :focus-visible{ box-shadow:0 0 0 3px rgba(77,139,218,.38) !important; }
.task-login #login-form td.input:focus-within{
  box-shadow:0 0 0 4px rgba(29,78,137,.18) !important; }
html.dark-mode .task-login #login-form td.input:focus-within{
  box-shadow:0 0 0 4px rgba(77,139,218,.24) !important; }