/* ============================================================
   teksa_ui — оформление почты ГК ТЕКСА для Roundcube 1.6 (elastic)

   ВАЖНО про историю файла: раньше здесь лежали ДВА набора цветов —
   тема ERP (голубой фон, тёмно-синие панели) и поверх неё тема
   в духе mail.ru. Второй перебивал первый, но не везде, и оформление
   разъезжалось. Первый набор удалён целиком, остался один.

   Цвета: белый список, чёрный текст, серый второстепенный,
   синий только на действиях и ссылках. Никакого стекла, размытия
   и градиентов: они мешали читать и по-разному вели себя в браузерах.

   Панель задач на широком экране скрыта, её место заняла панель
   папок с кнопкой написания сверху и настройками снизу. На узком
   экране полоса остаётся: там она работает выдвижным меню темы.
   ============================================================ */

/* ШРИФТ.

   Подключаем с сервера Google. Если он недоступен — а такое
   бывает: при проверке из песочницы пришёл отказ 403 — сработает
   запасной набор ниже, и интерфейс не сломается: буквы просто
   будут системные.

   Запасной набор подобран близким по рисунку: у всех шрифтов
   в нём гуманистический гротеск без засечек, как в эталоне. */
/* Golos Text встроен ЛОКАЛЬНО в тему (skins/teksa/fonts).
   Google Fonts недоступен и в песочнице, и на сервере (403), поэтому
   раньше срабатывал системный запасной и типографика «уезжала» от
   эталона. Теперь шрифт грузится со своего сервера и всегда совпадает.
   Кириллица и латиница — отдельными файлами, чтобы не тянуть лишнее. */
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/golos-cyrillic-400.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/golos-latin-400.woff2') format('woff2'); }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/golos-cyrillic-500.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/golos-latin-500.woff2') format('woff2'); }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/golos-cyrillic-600.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/golos-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/golos-cyrillic-700.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/golos-latin-700.woff2') format('woff2'); }

/* Палитра снята пипеткой прямо со скриншотов mail.ru, а не подобрана
   на глаз: серые, разделители, подсветка строк — те же значения.

   ЕДИНСТВЕННОЕ отличие — синий. У mail.ru он #0077FF, здесь оставлен
   фирменный #1e88d0 из ЕРП: тема почты собиралась в цветах компании.
   Если нужен в точности мальрушный — поменяйте две строки ниже
   (--tk-accent и --tk-accent-rgb), остальное подстроится само. */
:root{
  --tk-accent:#1e88d0;
  --tk-accent-2:#0d5fa0;
  --tk-accent-rgb:30,136,208;

  --tk-page:#F6F7F8;      /* фон страницы вокруг панелей */
  --tk-surface:#FFFFFF;   /* список, письмо, панели */
  --tk-surface2:#F6F7F8;  /* шапки, наведение */
  --tk-surface3:#EBECEF;  /* поля ввода */
  --tk-hover:#EEF2F8;     /* наведение на письмо — мятная подсветка */
  --tk-sel:#EBECEF;       /* выбранное галочкой письмо */
  --tk-border:#E0E2E7;
  --tk-border-2:#D0D2D8;

  --tk-text:#2C2D2E;
  --tk-text-2:#2C2D2E;
  --tk-muted:#87898F;
  --tk-muted-2:#A7A8AC;

  --tk-danger:#E64646;
  --tk-ok:#1B7A4B;
  --tk-warn:#FC8A15;

  --tk-shadow:0 8px 24px rgba(44,45,46,.14);
  --tk-r:8px;
  --tk-r-lg:10px;
  /* цвета фирменного знака — три оттенка из логотипа ЕРП */
  --tk-brand-1:#4FB3E8;
  --tk-brand-2:#1e88d0;
  --tk-brand-3:#0d5fa0;

  --tk-av:30px;           /* диаметр аватарки — измерен по снимку */
  --tk-row:46px;          /* высота строки письма */
  --tk-row-pad:9px;
}

body.tk-compact{ --tk-row-pad:5px; --tk-av:26px; }
body.tk-wide{ --tk-row-pad:14px; --tk-av:36px; }

body, input, select, textarea, button,
.listing, #messagelist, .header, .footer, .toolbar,
.popupmenu, .popover, .ui-dialog, .menu{
  font-family:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================
   1. ПОВЕРХНОСТИ
   ============================================================ */
html, body{ background:var(--tk-page); color:var(--tk-text); }
#layout{ background:var(--tk-page); }

#layout-list,
#layout-content,
.contentbox, .uibox, .listbox, .scroller,
#folderlist-content{
  background-color:var(--tk-surface);
  color:var(--tk-text);
  border-color:var(--tk-border);
}
#layout-sidebar{
  background-color:var(--tk-surface);
  border-color:var(--tk-border);
}
#layout > div{ border-color:var(--tk-border); }
.watermark{ background-color:var(--tk-surface); }

/* ============================================================
   2. ПАНЕЛЬ ЗАДАЧ И БОКОВАЯ ПАНЕЛЬ

   Узкая полоса задач слева обрезала подписи («Написать с…»,
   «О програм…») и ела место. На компьютере она скрыта, а нужное
   переехало в панель папок: кнопка написания сверху, настройки
   и выход снизу — как в mail.ru.

   На узком экране полоса остаётся: там она работает выдвижным
   меню темы, без неё телефон остался бы без навигации.
   ============================================================ */
@media (min-width:900px){
  html.tk-nomenu #layout-menu,
  html.tk-nomenu #taskmenu{ display:none; }
  html.tk-nomenu #layout{ padding-left:0; }
}

/* полоса задач там, где она всё-таки показана */
#layout-menu, #taskmenu{
  background:#16243D;
  border-right:1px solid #16243D;
}
#taskmenu a{ color:#AFC0D8; border-radius:var(--tk-r); transition:.15s; }
#taskmenu a:hover{ color:#fff; background:rgba(255,255,255,.08); }
#taskmenu a.selected{
  color:#fff;
  background:rgba(var(--tk-accent-rgb),.3);
  box-shadow:inset 3px 0 0 var(--tk-accent);
}
#taskmenu a.compose{
  background:var(--tk-accent); color:#fff;
  border-radius:var(--tk-r); margin:6px;
}
#taskmenu a.compose:hover{ background:var(--tk-accent-2); }
#taskmenu a.logout{ color:#EFA9A9; }
#taskmenu a.theme{ display:none; }
#layout-menu .popover-header,
#layout-menu .footer{ background:transparent; color:#AFC0D8; }

/* ---- кнопка «Написать письмо» ---- */
.tk-side-top{ padding:10px 12px 6px; }
.tk-write{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:11px 14px;
  border:1px solid var(--tk-border-2); border-radius:10px;
  background:#fff; color:var(--tk-text);
  font:600 14px/1.2 inherit; cursor:pointer;
  box-shadow:0 1px 2px rgba(26,26,26,.05);
  transition:background .13s, border-color .13s, box-shadow .13s;
}
.tk-write:hover{
  background:var(--tk-surface2); border-color:var(--tk-accent);
  box-shadow:0 2px 6px rgba(26,26,26,.09);
}
.tk-write:active{ background:#E8F1FB; }
.tk-write .tk-i{ color:var(--tk-accent); }

/* ---- настройки, контакты, выход внизу панели ---- */
#layout-sidebar{ display:flex; flex-direction:column; }
#layout-sidebar .scroller{ flex:1 1 auto; }

.tk-side-foot{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:1px;
  padding:8px 8px 10px;
  border-top:1px solid var(--tk-border);
  background:var(--tk-surface);
}
.tk-side-b{
  display:flex; align-items:center; gap:10px;
  border:0; background:none; cursor:pointer;
  padding:9px 12px; border-radius:8px;
  font:14px/1.2 inherit; color:var(--tk-text-2); text-align:left;
}
.tk-side-b:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-side-b .tk-i{ color:var(--tk-muted); }
.tk-side-b:hover .tk-i{ color:var(--tk-accent-2); }
.tk-side-b.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-side-b.dang:hover .tk-i{ color:var(--tk-danger); }

/* ============================================================
   3. ПАПКИ
   ============================================================ */
#folderlist li a,
.listing li a{ color:var(--tk-text); border-radius:6px; margin:1px 6px; }
#folderlist li a:hover,
.listing li a:hover{ background:var(--tk-hover); }
#folderlist li.selected > a,
.listing li.selected > a,
.listing li.focused > a{
  background:var(--tk-surface2);
  color:var(--tk-text); font-weight:600;
  box-shadow:inset 3px 0 0 var(--tk-accent);
}
.listing li a span.unreadcount{
  background:var(--tk-accent); color:#fff;
  font-weight:600; border-radius:9px; padding:1px 7px;
}
.listing li, .listing li a{ border-color:var(--tk-border); }

/* ============================================================
   4. ШАПКИ И ПАНЕЛИ ДЕЙСТВИЙ
   ============================================================ */
.header,
#layout-list .header,
#layout-content .header,
#layout-sidebar .header,
.footer{
  background:var(--tk-surface);
  border-color:var(--tk-border);
  color:var(--tk-text);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.header .header-title, .header .boxtitle{ color:var(--tk-text); font-weight:600; }

.toolbar{ background:transparent; }
.header a.button, .header button,
.toolbar a.button, .toolbar button,
.footer a.button, .footer button{
  color:var(--tk-muted); border-radius:6px;
}
.header a.button:hover, .header button:hover,
.toolbar a.button:hover, .toolbar button:hover,
.footer a.button:hover, .footer button:hover{
  background:var(--tk-surface2); color:var(--tk-accent-2);
}
.header a.button.disabled, .toolbar a.button.disabled{ color:var(--tk-muted-2); }

.searchbar, #messagesearch, .searchbar form{
  background:var(--tk-surface3);
  border:1px solid transparent;
  border-radius:var(--tk-r);
  color:var(--tk-text);
}
.searchbar input, .searchbar input:focus{
  background:transparent; border:0;
  box-shadow:none; color:var(--tk-text);
}
.searchbar a.button{ color:var(--tk-muted); }
#searchmenu, .searchmenu{ background:var(--tk-surface); color:var(--tk-text); }

.pagenav a.button{ color:var(--tk-muted); }
.pagenav .pagenav-text{ color:var(--tk-muted); }

/* ============================================================
   5. СПИСОК ПИСЕМ
   ============================================================ */
#messagelist{ background:var(--tk-surface); color:var(--tk-text); }

/* Шапка колонок «Тема | От | Дата | Размер» убрана: в почтовых
   веб-клиентах её нет, а сортировка живёт в панели над списком. */
#messagelist thead{ display:none; }

/* Размер письма в списке не нужен — он занимал целую колонку
   и вытеснял тему. Остаётся в свойствах письма.

   Селектор длинный намеренно: правило раскладки
   «tbody tr > td { display:flex }» специфичнее короткого
   «#messagelist td.size» и перебивало его даже с —
   размер вылезал ПЕРВОЙ колонкой, впереди отправителя. */
#messagelist td.size,
#messagelist span.size,
html.tk-list-mode #messagelist tbody tr > td.size,
html.tk-list-mode #messagelist thead tr > th.size,
html.tk-list-mode #messagelist tbody tr > td.threads,
html.tk-list-mode #messagelist thead tr > th.threads{ display:none; }
#messagelist tbody tr{
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
}
#messagelist tbody tr:hover{ background:var(--tk-hover); }
#messagelist tbody tr td{
  color:var(--tk-text);
  padding-top:var(--tk-row-pad);
  padding-bottom:var(--tk-row-pad);
}
#messagelist span.subject{ color:var(--tk-text); }
#messagelist span.fromto{ color:var(--tk-text-2); }
#messagelist span.date,
#messagelist span.size,
#messagelist td.date,
#messagelist td.size{ color:var(--tk-muted); font-variant-numeric:tabular-nums; }

/* непрочитанное: синяя точка и полужирная тема, строка остаётся белой */
#messagelist tbody tr.unread{ background:var(--tk-surface); }
#messagelist tr.unread span.subject{ font-weight:700; color:#000; }
#messagelist tr.unread span.fromto{ font-weight:600; color:#000; }
#messagelist td.subject span.msgicon.status.unread:before{ color:var(--tk-accent); }
#messagelist span.flagged{ color:var(--tk-warn); }
#messagelist span.attachment{ color:var(--tk-muted-2); }

#messagelist tbody tr.selected,
#messagelist tbody tr.selected td{
  background:#EAF2FB; color:var(--tk-text);
}
#messagelist tbody tr.focused{ outline:0; }

/* ============================================================
   6. ПИСЬМО
   ============================================================ */
#messageheader, #message-header{
  background:var(--tk-surface);
  border:1px solid var(--tk-border);
  border-radius:var(--tk-r-lg);
  padding:14px 16px;
  color:var(--tk-text);
  box-shadow:none;
}
#messageheader .subject, #message-header .subject{ color:var(--tk-text); font-weight:700; }
#messageheader a, #message-header a{ color:var(--tk-accent-2); }
#messageheader .rightcol, #messageheader .date, #messageheader .header-links a{ color:var(--tk-muted); }

#messagecontframe, #messagepartframe, #messagebody,
.message-part, .message-htmlpart{
  background:#fff; color:var(--tk-text);
  border-radius:var(--tk-r-lg); box-shadow:none;
}
#messagebody{ padding:14px 16px; }
.message-part a{ color:var(--tk-accent-2); }
.message-part blockquote{
  border-left:3px solid var(--tk-border-2);
  background:var(--tk-surface2); color:#4A4F5A;
  border-radius:0 6px 6px 0; padding:8px 12px;
}

#attachment-list li, .attachmentslist li{
  background:var(--tk-surface2);
  border:1px solid var(--tk-border);
  border-radius:var(--tk-r); box-shadow:none;
}
#attachment-list li:hover, .attachmentslist li:hover{ border-color:var(--tk-accent); }
#attachment-list li a, .attachmentslist li a{ color:var(--tk-text); }

/* ============================================================
   7. НАПИСАНИЕ ПИСЬМА
   ============================================================ */
#compose-content, #composeview-right, #compose-attachments{
  background:var(--tk-surface); color:var(--tk-text);
}
#compose-headers td, #compose-headers input{ color:var(--tk-text); }
.recipient-input li.recipient{
  background:var(--tk-surface3);
  border:1px solid var(--tk-border-2);
  border-radius:6px; color:var(--tk-text);
}
.mce-content-body, .cke_editable, #composebody{ background:#fff; color:var(--tk-text); }
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox-editor-header{ background:var(--tk-surface2); }

/* ============================================================
   8. ФОРМЫ, КНОПКИ, МЕНЮ
   ============================================================ */
a{ color:var(--tk-accent-2); }

input, select, textarea, .form-control{
  background:#fff; color:var(--tk-text);
  border:1px solid var(--tk-border-2); border-radius:var(--tk-r);
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--tk-accent);
  box-shadow:0 0 0 3px rgba(var(--tk-accent-rgb),.15); outline:0;
}
input::placeholder, textarea::placeholder{ color:var(--tk-muted-2); }
input[type=checkbox], input[type=radio]{ accent-color:var(--tk-accent); }

.btn-primary, a.button.btn-primary, button.btn-primary, .mainaction{
  background:var(--tk-accent); border:0; color:#fff;
  border-radius:var(--tk-r); box-shadow:none;
}
.btn-primary:hover, .mainaction:hover{ background:var(--tk-accent-2); }
.btn-secondary, button.btn, a.button.btn{
  background:#fff; color:var(--tk-text);
  border:1px solid var(--tk-border-2); border-radius:var(--tk-r);
}
.btn-secondary:hover, button.btn:hover, a.button.btn:hover{ background:var(--tk-surface2); }
.btn-danger{ background:var(--tk-danger); color:#fff; border:0; }

.popupmenu, .popover, .ui-dialog, .ui-menu{
  background:#fff;
  border:1px solid var(--tk-border);
  border-radius:var(--tk-r-lg);
  box-shadow:var(--tk-shadow);
  color:var(--tk-text);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.popupmenu li a, .popover li a, .ui-menu li a{ color:var(--tk-text); border-radius:6px; }
.popupmenu li a:hover, .popover li a:hover, .ui-menu li a:hover{
  background:var(--tk-surface2); color:var(--tk-accent-2);
}
.popupmenu li.separator, .popover .listing li{ border-color:var(--tk-border); }
.ui-dialog .ui-dialog-titlebar{
  background:transparent; border-bottom:1px solid var(--tk-border);
  color:var(--tk-text);
}
.ui-dialog .ui-dialog-buttonpane{ border-color:var(--tk-border); }
.ui-widget-overlay{ background:rgba(26,26,26,.35); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ============================================================
   9. НАСТРОЙКИ И АДРЕСНАЯ КНИГА
   ============================================================ */
.propform, .propform td, .propform th,
fieldset, legend, label, .prop, .boxtitle{
  color:var(--tk-text); border-color:var(--tk-border);
}
fieldset{ background:transparent; }
.contactfield, .contactfieldgroup, #contacthead{
  background:var(--tk-surface2); border-radius:var(--tk-r); color:var(--tk-text);
}
.boxwarning, .boxinformation, .boxconfirmation{
  background:var(--tk-surface2); color:var(--tk-text);
  border:1px solid var(--tk-border); border-radius:var(--tk-r);
}
.boxerror{ background:#FDECEA; border:1px solid #E7B4B0; color:#8E241F; }
.quota-widget .bar > span{ background:var(--tk-accent); }

/* ============================================================
   10. СТРАНИЦА ВХОДА
   ============================================================ */
.task-login #layout, .task-login body{ background:var(--tk-page); }
.task-login #login-form{
  background:#fff; border:1px solid var(--tk-border);
  border-radius:12px; box-shadow:var(--tk-shadow);
  color:var(--tk-text);
}
.task-login #login-form .boxtitle, .task-login #login-form label{ color:var(--tk-text); }

/* ============================================================
   11. МЕЛОЧИ
   ============================================================ */
td, th{ border-color:var(--tk-border); }
.hint, .secondary, .subtitle, .text-muted{ color:var(--tk-muted); }
hr{ border-color:var(--tk-border); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#CFD4DC; border-radius:6px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:#B4BAC4; background-clip:content-box; }

/* ============================================================
   12. АВАТАРКИ
   ============================================================ */
#messagelist td.tk-cell{ position:relative; }
#messagelist span.tk-av, span.tk-av{
  position:absolute !important;
  left:8px; top:8px;
  width:var(--tk-av) !important; height:var(--tk-av) !important;
  min-width:var(--tk-av) !important; max-width:var(--tk-av) !important;
  min-height:var(--tk-av); max-height:var(--tk-av);
  box-sizing:border-box;
  border-radius:50%;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0; margin:0;
  color:#fff; font-size:12px; font-weight:600;
  line-height:1; text-align:center;
  overflow:hidden !important; white-space:nowrap !important;
  box-shadow:none;
  pointer-events:none; z-index:3;
}
#messagelist tr.tk-has-av td.tk-cell{ padding-left:50px; }
body.tk-compact #messagelist tr.tk-has-av td.tk-cell{ padding-left:42px; }
body.tk-wide #messagelist tr.tk-has-av td.tk-cell{ padding-left:56px; }

/* ============================================================
   13. РАЗДЕЛИТЕЛИ ПО ДНЯМ — простая серая подпись
   ============================================================ */
/* Подпись группы — просто серый текст над первой строкой месяца,
   как в mail.ru. Раньше это была голубая плашка, которая висела
   посреди строки и читалась как выделенное письмо.

   Рисуется от СТРОКИ: строка занимает всю ширину списка, а ячейка
   с аватаркой — это узкая колонка «От», и подпись оказывалась
   не у левого края, а посреди списка. */
#messagelist tbody tr{ position:relative; }
#messagelist tr.tk-gstart > td{ padding-top:34px; }
#messagelist tr.tk-gstart::before{
  content:none;
  position:absolute; left:14px; top:6px;
  font-size:13px; font-weight:500; color:var(--tk-muted);
  pointer-events:none; white-space:nowrap; z-index:2;
}
/* запасной путь для разметки без атрибута на строке */
#messagelist tr.tk-gstart:not([data-tkgroup]) td.tk-cell::before{
  content:none;
  position:absolute; left:0; top:0; height:30px;
  display:flex; align-items:center; padding-left:14px;
  font-size:13px; font-weight:500; color:var(--tk-muted);
  pointer-events:none; white-space:nowrap;
}
#messagelist tr.tk-gstart span.tk-av{ top:38px; }
#messagelist tr.tk-gstart span.tk-more,
#messagelist tr.tk-gstart span.tk-quick{ top:calc(50% + 17px); }

/* верхняя граница у первой строки группы не нужна: разделяет уже подпись */
#messagelist tbody tr.tk-gstart{ border-top:0; }

/* ============================================================
   14. МЕТКИ
   ============================================================ */
.tk-labels{ display:inline-flex; gap:5px; flex-wrap:wrap; vertical-align:middle; margin-left:8px; }
.tk-chip{
  display:inline-block; font-size:10.5px; font-weight:600; line-height:1.5;
  padding:1px 7px; border-radius:4px; white-space:nowrap; color:#fff;
}
.tk-labelbtn{ cursor:pointer; }
.tk-labelmenu{
  position:fixed; display:none; min-width:200px; padding:6px;
  border-radius:var(--tk-r-lg); background:#fff; border:1px solid var(--tk-border);
  box-shadow:var(--tk-shadow); z-index:2000;
}
.tk-labelmenu.show{ display:block; }
.tk-labelmenu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border:0; background:none; border-radius:6px;
  font-size:13.5px; text-align:left; cursor:pointer; color:var(--tk-text);
}
.tk-labelmenu button:hover{ background:var(--tk-surface2); color:var(--tk-accent-2); }
.tk-labelmenu button i{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; display:block; }

/* ============================================================
   15. ОТМЕНА ОТПРАВКИ
   ============================================================ */
.tk-undo{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(150%);
  display:flex; align-items:center; gap:14px;
  background:#1A1A1A; color:#fff; padding:12px 18px; border-radius:var(--tk-r-lg);
  font-size:13.5px; z-index:99998; box-shadow:var(--tk-shadow);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.tk-undo.show{ transform:translateX(-50%) translateY(0); }
.tk-undo-n{
  width:28px; height:28px; flex:0 0 28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); color:#8FC7F0;
  font-weight:700; font-size:12px; font-variant-numeric:tabular-nums;
}
.tk-undo button{ background:none; border:0; color:#8FC7F0; font-weight:600; cursor:pointer; font-size:13.5px; }
.tk-undo button:hover{ text-decoration:underline; }

/* ============================================================
   16. КОНТЕКСТНОЕ МЕНЮ
   ============================================================ */
.tk-ctx{
  position:fixed; z-index:99997; min-width:224px; max-height:80vh; overflow:auto;
  padding:6px; border-radius:var(--tk-r-lg);
  background:#fff; border:1px solid var(--tk-border); color:var(--tk-text);
  box-shadow:var(--tk-shadow);
  opacity:0; transform:scale(.98); transition:opacity .12s, transform .12s;
  font:13.5px/1.4 'Golos Text',system-ui,sans-serif;
}
.tk-ctx.show{ opacity:1; transform:none; }
.tk-ctx button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 11px; border:0; background:none; border-radius:6px;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.tk-ctx button:hover,.tk-ctx button:active{ background:var(--tk-surface2); color:var(--tk-accent-2); }
.tk-ctx button.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-ctx hr{ border:0; border-top:1px solid var(--tk-border); margin:5px 8px; }

/* ============================================================
   17. ПАНЕЛЬ САМОПРОВЕРКИ
   ============================================================ */
.tk-check{
  position:fixed; right:14px; bottom:14px; width:min(94vw,420px);
  background:#fff; color:var(--tk-text); border-radius:var(--tk-r-lg); padding:6px;
  font:12.5px/1.5 'Golos Text',system-ui,sans-serif; z-index:99999;
  border:1px solid var(--tk-border); box-shadow:var(--tk-shadow);
  max-height:70vh; overflow:auto;
}
.tk-check-h{
  display:flex; align-items:center; padding:8px 10px 10px;
  font-weight:700; font-size:13px; border-bottom:1px solid var(--tk-border); margin-bottom:4px;
}
.tk-check-h button{ margin-left:auto; background:none; border:0; color:var(--tk-muted); cursor:pointer; font-size:14px; }
.tk-check-r{ display:flex; align-items:baseline; gap:9px; padding:7px 10px; border-radius:6px; }
.tk-check-r:hover{ background:var(--tk-surface2); }
.tk-check-r i{ font-style:normal; width:14px; flex:0 0 14px; font-weight:700; }
.tk-check-r span{ flex:1; min-width:0; }
.tk-check-r em{ font-style:normal; color:var(--tk-muted-2); font-size:11.5px; text-align:right; }
.tk-check-r.ok i{ color:var(--tk-ok); }
.tk-check-r.bad i{ color:var(--tk-danger); }
.tk-check-r.bad span{ color:var(--tk-danger); }
.tk-check-r.wait i{ color:var(--tk-warn); }
.tk-check-r.wait span{ color:var(--tk-muted); }

.tk-checkbtn{
  position:fixed; right:14px; bottom:14px; z-index:99996;
  width:38px; height:38px; border-radius:50%; border:0;
  background:#1e88d0; color:#fff; font-weight:700; font-size:17px; line-height:38px;
  cursor:pointer; text-align:center; padding:0;
  box-shadow:0 4px 16px rgba(30,136,208,.5);
  opacity:.9; transition:opacity .15s, transform .15s;
}
.tk-checkbtn:active{ transform:scale(.94); }
.tk-checkbtn:hover,.tk-checkbtn:active{ opacity:1; }
.tk-laterbtn{ cursor:pointer; }

/* ============================================================
   18. РАСКЛАДКА ДЛЯ КОМПЬЮТЕРА

   elastic всегда держит три колонки: настройка layout на это
   не влияет (в meta.json темы supported_layouts = widescreen).
   Классы на документе ставит JS плагина.

   Ширины колонок и размеры даны через переменные и меняются
   ступенями по ширине окна — от ноутбука 1280 до большого монитора.
   ============================================================ */
@media (min-width:900px){

  /* Размеры заданы один раз и текуче — ниже по файлу, долями
     ширины окна. Здесь их больше нет: четыре числа в точках
     повторяли то, что и так задано, и только путали при разборе
     («какое из шести объявлений сейчас в силе?»). */

  /* ---- панели ---- */
  html.tk-list-mode #layout-sidebar{
    display:flex !important;
    flex:0 0 var(--tk-side) !important;
    max-width:var(--tk-side) !important;
    min-width:var(--tk-side) !important;
  }
  html.tk-list-mode #layout-list{
    display:flex !important; flex:1 1 auto !important; max-width:none !important;
  }
  html.tk-list-mode #layout-content{ display:none; }

  /* В режиме чтения список папок ОБЯЗАН остаться: на записи он
     пропадал, и на экране было одно письмо во всю ширину. */
  html.tk-list-mode.tk-reading #layout-sidebar{
    display:flex !important;
    flex:0 0 var(--tk-side) !important;
    max-width:var(--tk-side) !important;
    min-width:var(--tk-side) !important;
  }
  html.tk-list-mode.tk-reading #layout-list{ display:none; }
  html.tk-list-mode.tk-reading #layout-content{
    display:flex !important; flex:1 1 auto !important; width:auto !important;
  }
  html.tk-list-mode.tk-reading #layout-content .back-list-button{
    display:inline-flex !important; align-items:center;
  }

  /* ---- строка письма в одну линию ----

     В разметке Roundcube колонки идут в порядке
     выделение → тема → отправитель → дата → размер → признаки.
     Нам нужен порядок mail.ru: отправитель, потом тема, дата справа.
     Меняем не разметку, а порядок показа: строка становится гибкой,
     каждой ячейке задаётся место. Сортировка и выделение в list.js
     работают по номерам ячеек и от этого не зависят. */
  html.tk-list-mode #messagelist,
  html.tk-list-mode #messagelist tbody{ display:block; width:100%; }

  html.tk-list-mode #messagelist tbody tr{
    display:flex !important;
    align-items:center;
    width:100% !important;
    min-height:var(--tk-row);
  }
  html.tk-list-mode #messagelist tbody tr > td{
    display:flex !important;
    align-items:center;
    min-width:0 !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Порядок задаём ВСЕМ колонкам. У ячейки без order он равен нулю,
     и она уезжает в самое начало строки — так размер письма оказывался
     впереди отправителя. */
  html.tk-list-mode #messagelist tbody tr > td{ order:5; }

  html.tk-list-mode #messagelist td.fromto,
  html.tk-list-mode #messagelist td.from{
    order:2;
    flex:0 0 var(--tk-from) !important;
    max-width:var(--tk-from) !important;
    padding-right:12px;
  }
  html.tk-list-mode #messagelist td.subject{
    order:3; flex:1 1 auto; max-width:none;
  }
  html.tk-list-mode #messagelist td.date{
    order:8; flex:0 0 var(--tk-date); justify-content:flex-end;
    padding-right:6px;
  }
  html.tk-list-mode #messagelist td.flags,
  html.tk-list-mode #messagelist td.threads,
  html.tk-list-mode #messagelist td.attachment{
    order:9; flex:0 0 auto; justify-content:flex-end;
  }

  /* колонки шире строки быть не должны */
  html.tk-list-mode #messagelist td.subject span.subject{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  }

  /* ---- разметка без отдельных колонок (однострочный режим elasticlayouts) ----
     здесь всё лежит внутри td.subject, порядок задаём его содержимому */
  html.tk-list-mode #messagelist td.subject{
    flex-wrap:nowrap !important; padding-right:10px !important;
  }
  html.tk-list-mode #messagelist td.subject span.msgicon.status{ order:1; }
  html.tk-list-mode #messagelist td.subject > span.fromto{
    order:2; flex:0 0 var(--tk-from); max-width:var(--tk-from);
    padding-left:0; padding-right:14px;
    font-size:100%; color:var(--tk-text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  html.tk-list-mode #messagelist td.subject > span.subject{
    order:3; width:auto; flex:1 1 auto; min-width:0;
  }
  html.tk-list-mode #messagelist td.subject span.attachment{ order:8; padding:0 6px; }
  html.tk-list-mode #messagelist td.subject > span.date{
    order:10; margin-left:auto; flex:0 0 auto;
    padding-left:10px; text-align:right;
  }

  /* ---- чтение письма: колонка не на всю ширину монитора ----
     Строка в 2000 пикселей нечитаема, глаз теряет начало следующей. */
  html.tk-list-mode.tk-reading #messagecontframe,
  html.tk-list-mode.tk-reading #messagepartframe,
  html.tk-list-mode.tk-reading #messagebody,
  html.tk-list-mode.tk-reading #messageheader,
  html.tk-list-mode.tk-reading #message-header{
    max-width:var(--tk-read) !important;
    margin-left:auto; margin-right:auto;
  }
}

/* ---- размеры текучие, ступеней нет ----

   Пять медиазапросов (1280, 1440, 1920, 2200 и «900–1279») здесь
   заменены долями ширины окна. Подробное объяснение — в разделе
   100, там же заданы размеры строки списка.

   Единственное, что осталось за медиазапросом, — начало текста
   письма рядом с темой: на узком экране его прятали, чтобы не
   резать тему. Это не размер, а показывать или нет, поэтому
   доля ширины тут не поможет. */
:root{
  --tk-side:clamp(210px, 15vw, 300px);   /* панель папок          */
  --tk-read:clamp(680px, 62vw, 1120px);  /* колонка чтения письма */
}
@media (min-width:900px) and (max-width:1099px){
  #messagelist span.tk-snip{ display:none; }
}

/* ============================================================
   21. ОКНО НАПИСАНИЯ ПИСЬМА

   Написание открывается окном поверх списка, а не отдельной
   страницей. Размеры подобраны под мониторы от 1280 и шире:
   окно не должно ни упираться в края, ни теряться в середине
   большого экрана.
   ============================================================ */
.tk-compose{
  position:fixed; inset:0; z-index:99990;
  display:none; align-items:flex-start; justify-content:center;
}
.tk-compose.show{ display:flex; }

.tk-compose-back{
  position:absolute; inset:0;
  background:rgba(26,26,26,.34);
}

.tk-compose-win{
  position:relative;
  display:flex; flex-direction:column;
  width:min(96vw, 900px);
  height:min(88vh, 760px);
  margin-top:max(2vh, 24px);
  background:#fff;
  border-radius:12px;
  box-shadow:0 24px 64px rgba(26,26,26,.28);
  overflow:hidden;
}
@media (min-width:1440px){
  .tk-compose-win{ width:min(92vw, 1000px); height:min(86vh, 820px); }
}
@media (min-width:1920px){
  .tk-compose-win{ width:min(88vw, 1100px); height:min(84vh, 880px); }
}

.tk-compose-win.full{
  width:calc(100vw - 32px); height:calc(100vh - 32px); margin-top:16px;
}

.tk-compose-h{
  flex:0 0 auto;
  display:flex; align-items:center; gap:4px;
  padding:10px 10px 10px 18px;
  border-bottom:1px solid var(--tk-border);
  background:var(--tk-surface2);
}
.tk-compose-t{
  flex:1 1 auto; min-width:0;
  font:600 14px/1.3 inherit; color:var(--tk-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tk-compose-h button{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 32px;
  border:0; background:none; border-radius:8px;
  color:var(--tk-muted); cursor:pointer;
}
.tk-compose-h button:hover{ background:#E4E7EC; color:var(--tk-text); }
.tk-compose-h .tk-cw-close:hover{ background:#FDECEA; color:var(--tk-danger); }

.tk-compose-f{
  flex:1 1 auto;
  width:100%; border:0; display:block; background:#fff;
}

/* ============================================================
   19. ТЁМНЫЙ РЕЖИМ ТЕМЫ

   elastic включает его сам по настройке системы. Правильное
   лечение — dark_mode_support = false в конфиге; это подстраховка.
   ============================================================ */
html.dark-mode, html.dark-mode body{ background:var(--tk-page); color:var(--tk-text); }
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode .contentbox,
html.dark-mode .uibox,
html.dark-mode .listbox,
html.dark-mode .scroller,
html.dark-mode .header,
html.dark-mode .footer,
html.dark-mode #messagelist,
html.dark-mode #messagelist tbody tr{
  background-color:var(--tk-surface); color:var(--tk-text);
}
html.dark-mode td, html.dark-mode th, html.dark-mode label, html.dark-mode legend,
html.dark-mode .listing li a, html.dark-mode #messagelist span.subject,
html.dark-mode .header .header-title, html.dark-mode .propform td,
html.dark-mode .boxtitle{ color:var(--tk-text); }
html.dark-mode .hint, html.dark-mode #messagelist span.fromto,
html.dark-mode #messagelist span.date{ color:var(--tk-muted); }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea{
  background:#fff; color:var(--tk-text); border-color:var(--tk-border-2);
}
html.dark-mode .popupmenu, html.dark-mode .popover, html.dark-mode .ui-dialog{
  background:#fff; color:var(--tk-text);
}

/* ============================================================
   20. ТЕЛЕФОН
   ============================================================ */
@media (max-width:768px){
  :root{ --tk-av:28px; }
  #messagelist tr.tk-has-av td.tk-cell{ padding-left:44px; }
  #messagelist span.tk-av{ left:6px; top:7px; }
  .tk-check{ right:8px; left:8px; width:auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none; animation:none; }
}

/* ============================================================
   ОДНОСТРОЧНЫЙ РЕЖИМ (плагин elasticlayouts)

   Отступ сверху у строки-начала группы и подпись группы заданы
   один раз выше, в разделе «разделители». Здесь их повторять нельзя:
   второе правило перебивало первое и подпись налезала на письмо.
   ============================================================ */
/* Класса layout-list в Roundcube нет — правила под него удалены.
   Размер круга задан один раз выше и одинаков во всех режимах. */

.tk-check-head{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:#5C7BA6; padding:12px 10px 4px;
}
.tk-check{ width:min(94vw,460px); }

/* круг с фотографией: инициалы прячем, тень мягче */
#messagelist span.tk-av.tk-av-photo{
  box-shadow:inset 0 0 0 1px rgba(21,59,102,.12), 0 1px 3px rgba(21,59,102,.18);
}

/* ============================================================
   ДЕЙСТВИЯ В СТРОКЕ ПИСЬМА
   ============================================================ */

/* Кнопки строки живут в ПОСЛЕДНЕЙ ячейке, у правого края.
   Раньше они садились в ячейку с аватаркой — то есть в узкую
   колонку «От» — и закрывали собой имя отправителя. */
#messagelist td.tk-actcell{ position:relative; overflow:visible; }

#messagelist span.tk-more,
#messagelist span.tk-quick{
  position:absolute !important;
  top:50%; transform:translateY(-50%);
  z-index:6;
}

/* три точки — всегда доступны, в том числе на телефоне */
#messagelist span.tk-more{
  right:2px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:var(--tk-muted);
  cursor:pointer;
  opacity:.55;
  background:var(--tk-surface);
  transition:opacity .14s, background .14s, color .14s;
}
#messagelist tr:hover span.tk-more{ opacity:1; }
#messagelist span.tk-more:hover{ background:#E8F1FB; color:var(--tk-accent-2); }

/* быстрые действия при наведении мышью */
#messagelist span.tk-quick{
  right:32px;
  display:none;
  align-items:center;
  gap:1px;
  padding-left:10px;
  /* растушёвка слева: кнопки накрывают дату, а не обрывают её */
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--tk-surface) 14px);
}
#messagelist tr:hover span.tk-quick{ display:flex; }
#messagelist tr:hover span.tk-quick,
#messagelist tr:hover span.tk-more{
  background-color:var(--tk-hover);
}
#messagelist tr.selected:hover span.tk-quick,
#messagelist tr.selected:hover span.tk-more{
  background-color:#EAF2FB;
}
#messagelist span.tk-qa{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  color:var(--tk-muted);
  cursor:pointer;
  transition:background .13s, color .13s;
}
#messagelist span.tk-qa:hover{ background:#E8F1FB; color:var(--tk-accent-2); }
#messagelist span.tk-qa.on{ color:var(--tk-danger); }

/* значок в кнопке не должен ловить события сам */
.tk-i{ pointer-events:none; display:block; flex:0 0 auto; }

/* ============================================================
   ПАНЕЛЬ НАД СПИСКОМ
   ============================================================ */
.tk-listbar{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  background:#F4F9FD;
  border-bottom:1px solid #DCE8F4;
  flex-wrap:wrap;
}
.tk-listbar button{
  border:0;
  background:none;
  padding:6px 10px;
  border-radius:8px;
  font:500 12.5px/1.3 inherit;
  color:#3A6291;
  cursor:pointer;
  white-space:nowrap;
  transition:background .13s, color .13s;
}
.tk-listbar button:hover{ background:#E3F0FB; color:#0d5fa0; }
.tk-listbar button:last-child{ margin-left:auto; }

/* ============================================================
   ПАНЕЛЬ ОТКРЫТОГО ПИСЬМА
   Скрытые кнопки не удалены — команды и клавиши работают,
   просто убраны с глаз в меню «⋯».
   ============================================================ */
.tk-hidden-btn{ display:none; }

.tk-msgmore{
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:#3A6291;
}
.tk-msgmore:hover{ color:#0d5fa0; }

/* ============================================================
   ПАНЕЛЬ АККАУНТА
   ============================================================ */
.tk-accbtn{
  border:0; background:none; cursor:pointer;
  color:#3A6291; font-size:13px; line-height:1;
  padding:4px 6px; border-radius:6px;
}
.tk-accbtn:hover{ background:#E3F0FB; color:#0d5fa0; }

.tk-acc{
  position:fixed; z-index:99998;
  width:min(92vw,320px); max-height:80vh; overflow:auto;
  background:#fff; border:1px solid #D6E3F0; border-radius:14px;
  box-shadow:0 18px 46px rgba(21,59,102,.22);
  font:13.5px/1.45 'Golos Text',system-ui,sans-serif; color:#1D3C61;
  padding:12px;
}
.tk-acc-me{ display:flex; align-items:center; gap:11px; padding:2px 2px 12px; }
.tk-acc-av{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  background:linear-gradient(135deg,#1e88d0,#0d5fa0); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px;
}
.tk-acc-txt b{ display:block; font-weight:600; font-size:13.5px; }
.tk-acc-txt small{ color:#7E9BB8; font-size:11.5px; }

.tk-acc-q{ padding:10px 2px 12px; border-top:1px solid #EAF1F8; }
.tk-acc-qt{ font-size:12.5px; color:#5C7BA6; margin-bottom:6px; }
.tk-acc-bar{ height:6px; border-radius:4px; background:#E7EFF7; overflow:hidden; }
.tk-acc-bar i{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#1e88d0,#0d5fa0); }

.tk-acc-links{ display:flex; flex-direction:column; gap:1px;
  padding-top:8px; border-top:1px solid #EAF1F8; }
.tk-acc-links button{
  border:0; background:none; text-align:left; cursor:pointer;
  padding:9px 10px; border-radius:8px; font:inherit; color:#1D3C61;
}
.tk-acc-links button:hover{ background:#F0F7FD; }
.tk-acc-links button.dang{ color:#C2352F; }
.tk-acc-links button.dang:hover{ background:rgba(194,53,47,.08); }

.tk-acc-h{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#8FA9C4; font-weight:700; padding:12px 10px 6px;
  border-top:1px solid #EAF1F8; margin-top:8px;
}
.tk-acc-list{ display:flex; flex-direction:column; gap:1px; }
.tk-acc-list button{
  display:flex; align-items:center; gap:9px;
  border:0; background:none; text-align:left; cursor:pointer;
  padding:7px 10px; border-radius:8px; font:inherit; font-size:13px; color:#1D3C61;
}
.tk-acc-list button:hover{ background:#F0F7FD; }
.tk-acc-av2{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:#DCE8F4; color:#3A6291;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:10.5px;
}

/* ============================================================
   ОТПИСКА ОТ РАССЫЛОК
   ============================================================ */
.tk-unsub{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px;
  background:#FFF8E9; border:1px solid #F0DFB8; border-radius:10px;
  font-size:13px; color:#7A5A12;
}
.tk-unsub-t{ flex:1; min-width:180px; }
.tk-unsub button{
  border:0; border-radius:8px; cursor:pointer;
  background:#1e88d0; color:#fff; font:600 12.5px/1 inherit;
  padding:8px 14px; white-space:nowrap;
}
.tk-unsub button:hover{ background:#0d5fa0; }
.tk-unsub button:disabled{ background:#9DB6CE; cursor:default; }
.tk-unsub.done{ background:#EEF7EE; border-color:#CBE4CB; color:#2C6B2C; }

/* ============================================================
   НАЧАЛО ТЕКСТА ПИСЬМА
   Показывается рядом с темой приглушённым цветом,
   как в почтовых клиентах: тема — главное, текст — подсказка.
   ============================================================ */
#messagelist span.tk-snip{
  color:#8FA9C4;
  font-weight:400;
  margin-left:8px;
  font-size:.95em;
}
#messagelist tr.unread span.tk-snip{ color:#7E9BB8; }
#messagelist tr.selected span.tk-snip{ color:#6D8CAD; }

/* на узком экране начало текста только мешает */
@media (max-width:620px){
  #messagelist span.tk-snip{ display:none; }
}

/* подсказка клавиши в пункте меню */
.tk-ctx button .tk-key{
  margin-left:auto;
  font-style:normal;
  font-size:11px;
  color:#9DB3CA;
  padding-left:14px;
  white-space:nowrap;
}
.tk-ctx button:hover .tk-key{ color:#6D8CAD; }

/* ============================================================
   22. ДОВОДКА ПО ЭТАЛОНУ

   Размеры и цвета в этом разделе не подобраны на глаз: они сняты
   со скриншотов, которые дал заказчик. Высота строки, диаметр
   аватарки и расстояние между разделителями измерены по пикселям,
   цвета взяты пипеткой.

   Раздел идёт последним намеренно — он должен побеждать всё, что
   выше, включая правила темы elastic.
   ============================================================ */

/* ---- строка письма ---- */
#messagelist tbody tr{
  border-bottom:1px solid var(--tk-border);
  background:var(--tk-surface);
}
#messagelist tbody tr > td{
  height:var(--tk-row) !important;
  padding-top:0; padding-bottom:0;
  font-size:14px;
}

/* наведение — мятная подсветка, выбор галочкой — серая.
   Так в эталоне: это два разных состояния, и путать их нельзя. */
#messagelist tbody tr:hover,
#messagelist tbody tr:hover > td{ background:var(--tk-hover); }
#messagelist tbody tr.selected,
#messagelist tbody tr.selected > td{ background:var(--tk-sel); }
#messagelist tbody tr.focused{ outline:0; }

/* ---- признак непрочитанного: синяя точка вместо конверта ----
   elastic рисует здесь значок шрифтом; гасим его содержимое
   и оставляем кружок. */
#messagelist td.subject span.msgicon.status,
#messagelist span.msgicon.status{
  width:8px !important; height:8px !important;
  min-width:8px !important; max-width:8px !important;
  border-radius:50%;
  background:transparent;
  margin:0 10px 0 2px; padding:0;
  flex:0 0 8px !important;
  font-size:0; line-height:0;
}
#messagelist span.msgicon.status::before,
#messagelist span.msgicon.status::after{
  content:""; display:none;
}
#messagelist tr.unread span.msgicon.status{
  background:var(--tk-accent);
}

/* ---- отправитель и тема ---- */
#messagelist span.fromto,
#messagelist td.fromto{
  font-size:14px; color:var(--tk-text);
}
#messagelist tr.unread span.fromto{ font-weight:600; }
#messagelist span.subject{ font-weight:400; color:var(--tk-text); }
#messagelist tr.unread span.subject{ font-weight:600; }

/* начало текста письма идёт сразу за темой серым — как в эталоне */
#messagelist span.tk-snip{
  color:var(--tk-muted);
  font-weight:400;
  margin-left:10px;
  font-size:14px;
}

/* ---- дата ---- */
#messagelist span.date,
#messagelist td.date{
  color:var(--tk-muted-2);
  font-size:13px;
  font-weight:400;
}
#messagelist tr.unread span.date{ color:var(--tk-muted); }

/* ---- подпись месяца ---- */
#messagelist tr.tk-gstart > td{ padding-top:30px; }
#messagelist tr.tk-gstart > td{ height:calc(var(--tk-row) + 30px); }
#messagelist tr.tk-gstart::before{
  left:16px; top:7px;
  font-size:14px; font-weight:400; color:var(--tk-muted);
}

/* ---- аватарка ---- */
#messagelist span.tk-av{
  top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:500;
}
#messagelist tr.tk-gstart span.tk-av{
  top:calc(50% + 15px);
}

/* ---- боковая панель ---- */
#layout-sidebar{ background:var(--tk-page); }
#layout-sidebar .header{ background:var(--tk-page); border-bottom:0; }
.tk-side-top{ background:var(--tk-page); }
.tk-side-foot{ background:var(--tk-page); border-top-color:var(--tk-border); }
#folderlist li a,
.listing li a{ font-size:14px; padding-top:8px; padding-bottom:8px; }
#folderlist li.selected > a,
.listing li.selected > a{
  background:#E3E5EA; color:var(--tk-text);
  box-shadow:none; border-radius:8px;
}
.listing li a span.unreadcount{
  background:transparent; color:var(--tk-muted);
  font-weight:400; padding:0;
}

/* ---- верхняя строка над списком ----
   На эталоне слева выбор и отметка прочитанным, справа фильтр
   со стрелкой. Кнопки крупные и с воздухом, чтобы попадать пальцем. */
.tk-lb-filter{ margin-left:auto; }
.tk-lb-filter .tk-i:last-child{ margin-left:2px; color:var(--tk-muted-2); }

.tk-listbar{
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
  padding:8px 14px;
  gap:6px;
}
.tk-listbar button{
  display:flex; align-items:center; gap:8px;
  color:var(--tk-text);
  font:400 14px/1.3 inherit;
  padding:8px 12px;
  border-radius:8px;
  min-height:36px;              /* удобно попадать пальцем */
  white-space:nowrap;
}
.tk-listbar button:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-listbar button .tk-i{ color:var(--tk-muted); }

/* ---- окно написания ---- */
.tk-compose-back{ background:rgba(44,45,46,.45); }
.tk-compose-h{ background:var(--tk-surface); }
.tk-compose-win{ border-radius:10px; }

/* ============================================================
   23. ОТМЕТКА ПИСЕМ НА КРУГЕ

   В эталоне отдельного столбца с квадратиками нет: отметка живёт
   на аватарке и проступает при наведении. Прячем столбец темы
   и учим круг переключаться.
   ============================================================ */
/* Скрывать нужно ИМЕННО таким селектором. Правило раскладки выше
   («tbody tr > td { display:flex }») специфичнее короткого
   «#messagelist td.selection» и перебивало его даже с —
   столбец с квадратиками оставался на экране. */
#messagelist td.selection,
#messagelist th.selection,
html.tk-list-mode #messagelist tbody tr > td.selection,
html.tk-list-mode #messagelist thead tr > th.selection{ display:none; }

/* Отметка КВАДРАТНАЯ — так на эталоне. Размер 15 пикселей и заливка
   сняты со снимка пипеткой. При наведении на круг проступает пустой
   квадратик, при выборе он заливается цветом и получает галочку. */
#messagelist span.tk-av{ cursor:pointer; overflow:visible; }
/* Дети круга не должны ловить нажатие сами.

   В list.js есть is_event_target: он пропускает мимо выделения только
   тот элемент, у которого ЕСТЬ собственный onclick, и смотрит именно
   на цель события, а не на её родителей. Обработчик висит на круге,
   поэтому нажатие по квадратику внутри проходило мимо этой проверки:
   список успевал выделить строку на mouseup, а наш обработчик следом
   снимал отметку — выделение «мигало» и не оставалось.

   Гасим события у детей: целью становится сам круг с обработчиком. */
#messagelist span.tk-av .tk-av-i,
#messagelist span.tk-av .tk-av-box,
#messagelist span.tk-av img{ pointer-events:none; }

#messagelist span.tk-av .tk-av-i{ font-style:normal; transition:opacity .12s; }

#messagelist span.tk-av .tk-av-box{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
  border:1.5px solid var(--tk-border-2);
  background:#fff; color:#fff;
  opacity:0; transition:opacity .12s, background .12s, border-color .12s;
}
#messagelist span.tk-av .tk-av-box .tk-i{ opacity:0; transition:opacity .1s; }

#messagelist tr:hover span.tk-av .tk-av-box{ opacity:1; }
#messagelist tr:hover span.tk-av .tk-av-i{ opacity:0; }
#messagelist tr:hover span.tk-av{ background:transparent; }

/* выбранное письмо: квадрат залит и держится без наведения */
#messagelist tr.tk-picked span.tk-av{ background:transparent; }
#messagelist tr.tk-picked span.tk-av .tk-av-box{
  opacity:1;
  background:var(--tk-accent);
  border-color:var(--tk-accent);
}
#messagelist tr.tk-picked span.tk-av .tk-av-box .tk-i{ opacity:1; }
#messagelist tr.tk-picked span.tk-av .tk-av-i{ opacity:0; }

/* фотография отправителя под квадратиком не должна просвечивать */
#messagelist tr:hover span.tk-av img,
#messagelist tr.tk-picked span.tk-av img{ opacity:0; }

/* Панель темы, убранная скриптом. Отдельный класс нужен потому, что
   правило по идентификатору зависело от ширины окна и специфичности
   и на узком мониторе не срабатывало. */
.tk-off{ display:none; }
#messagelist tr.tk-picked,
#messagelist tr.tk-picked > td{ background:var(--tk-sel); }

/* ============================================================
   24. ВЕРХНЯЯ СТРОКА ДЕЙСТВИЙ

   Родная панель темы с крупными значками и подписями снизу
   в эталоне отсутствует — над списком там только выбор, отметка
   прочитанным и фильтр, а при отметке писем строка сменяется
   набором действий. Родную прячем, свою показываем.
   ============================================================ */
@media (min-width:900px){
  html.tk-list-mode #layout-list #messagetoolbar,
  html.tk-list-mode #layout-content > .header #messagetoolbar,
  html.tk-list-mode #messagetoolbar{ display:none; }
}

.tk-listbar{ position:relative; }
.tk-listbar .tk-listbar-sel{
  display:none;
  align-items:center; gap:6px;
  flex:1 1 auto;
  justify-content:flex-start;   /* иначе «Прочитать» уезжало к правому краю */
}
.tk-listbar.sel-mode > button{ display:none; }
.tk-listbar.sel-mode .tk-listbar-sel{ display:flex; }

.tk-listbar-sel button{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:6px 10px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-listbar-sel button:hover{ background:var(--tk-hover); }
.tk-listbar-sel button .tk-i{ color:var(--tk-muted); }
.tk-listbar-sel button.tk-lb-x{ padding:6px; }
/* Счётчик отмеченных: кружок с галочкой и обычная цифра —
   как на эталоне. Синей плашки там нет. */
.tk-listbar-sel .tk-lb-cnt{
  display:inline-flex; align-items:center; gap:7px;
  padding:0 6px 0 4px; color:var(--tk-muted);
}
.tk-listbar-sel .tk-lb-n{
  font:400 14px/1 inherit; color:var(--tk-text); font-style:normal;
}
.tk-listbar-sel .tk-lb-more{ padding:6px 10px; }

/* ============================================================
   25. НАСТРОЙКИ, КОНТАКТЫ И ПРОЧИЕ СТРАНИЦЫ

   Раньше скрипт подключался только в почте, и эти страницы
   оставались с тёмной полосой задач. Теперь на них та же светлая
   тема, а вместо полосы — строка перехода сверху.
   ============================================================ */
@media (min-width:900px){
  html.tk-other #layout{ padding-left:0; }
}

.tk-nav{
  display:flex; align-items:center; gap:4px;
  padding:8px 12px;
  background:var(--tk-page);
  border-bottom:1px solid var(--tk-border);
}
.tk-nav-b{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:7px 12px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text-2);
}
.tk-nav-b:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-nav-b.on{ background:#E3E5EA; color:var(--tk-text); font-weight:600; }
.tk-nav-b .tk-i{ color:var(--tk-muted); }
.tk-nav-b.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-side-b.on{ background:#E3E5EA; font-weight:600; color:var(--tk-text); }

/* списки настроек и контактов — те же цвета, что и в почте */
#settings-menu li a,
#sections-table td,
#contacts-table td,
#directorylist li a{
  color:var(--tk-text);
  font-size:14px;
}
#settings-menu li.selected > a,
#directorylist li.selected > a,
#sections-table tr.selected td,
#contacts-table tr.selected td{
  background:#E3E5EA; color:var(--tk-text);
}
#contacts-table tr:hover td,
#sections-table tr:hover td,
#settings-menu li a:hover{ background:var(--tk-hover); }

/* ============================================================
   26. ПАНЕЛЬ ОТКРЫТОГО ПИСЬМА

   Значок и подпись в одну строку, слева стрелка возврата,
   справа переход к соседним письмам — как на эталоне.
   Родные кнопки темы остаются в разметке скрытыми: Roundcube
   продолжает включать и выключать их сам, мы их нажимаем.
   ============================================================ */
.tk-hidden-btn{ display:none; }

.tk-msgbar{
  display:flex; align-items:center; gap:2px;
  width:100%; padding:6px 10px;
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
}
.tk-msgbar-r{ margin-left:auto; display:flex; align-items:center; gap:2px; }

.tk-mb{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:7px 12px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
  white-space:nowrap;
}
.tk-mb:hover{ background:var(--tk-hover); }
.tk-mb .tk-i{ color:var(--tk-muted); }
.tk-mb:hover .tk-i{ color:var(--tk-accent-2); }
.tk-mb.ico{ padding:8px; }
.tk-mb.dang:hover{ background:#FDECEA; color:var(--tk-danger); }
.tk-mb.dang:hover .tk-i{ color:var(--tk-danger); }
.tk-mb.tk-up .tk-i{ transform:rotate(180deg); }

/* ============================================================
   27. МЕНЮ СО ЗНАЧКАМИ И КЛАВИШАМИ
   ============================================================ */
.tk-ctx button{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:9px 14px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
  background:none; border:0; cursor:pointer; text-align:left;
}
.tk-ctx button:hover{ background:var(--tk-hover); }
.tk-ctx button.dang{ color:var(--tk-danger); }
.tk-ctx button .tk-i{ color:var(--tk-muted); flex:0 0 auto; }
.tk-ctx button.dang .tk-i{ color:var(--tk-danger); }
.tk-ctx .tk-m-l{ flex:1 1 auto; min-width:0; }
.tk-ctx .tk-key{
  font-style:normal; color:var(--tk-muted-2); font-size:13px; flex:0 0 auto;
}
.tk-ctx .tk-m-dot{
  width:14px; height:14px; border-radius:3px; flex:0 0 14px; display:block;
}
.tk-ctx .tk-m-arr{ transform:rotate(-90deg); color:var(--tk-muted-2); }
.tk-ctx hr{ border:0; border-top:1px solid var(--tk-border); margin:5px 0; }

/* «Ещё»: редкие пункты спрятаны, пока не нажали */
.tk-ctx.has-more .tk-m-more{ display:none; }
.tk-ctx .tk-m-expand{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:9px 14px;
  border:0; border-top:1px solid var(--tk-border);
  background:none; cursor:pointer;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-ctx .tk-m-expand:hover{ background:var(--tk-hover); }
.tk-ctx .tk-m-expand .tk-i{ color:var(--tk-muted); }
.tk-ctx:not(.has-more) .tk-m-expand{ display:none; }

/* ============================================================
   28. ФИРМЕННЫЙ ЗНАК

   Птичка ГК ТЕКСА на месте, где у эталона стоит его логотип.
   Цвета берутся из переменных темы, поэтому знак меняется
   вместе с фирменным цветом.
   ============================================================ */
.tk-brand{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px 4px;
  cursor:pointer; user-select:none;
}
.tk-brand b{
  font:700 17px/1 inherit; letter-spacing:.02em; color:var(--tk-text);
}
.tk-brand:hover b{ color:var(--tk-accent-2); }
.tk-brand-sm{ padding:0 14px 0 2px; }
.tk-brand-sm b{ font-size:15px; }
.tk-brand-i{ display:block; flex:0 0 auto; }

/* ============================================================
   29. ДВЕ ПАНЕЛИ ВМЕСТО ТРЁХ

   На эталоне экран всегда поделён надвое: слева папки или меню,
   справа содержимое. Третья колонка появлялась пустой и тёмной,
   потому что её показывала тема, а класть в неё было нечего.
   ============================================================ */
@media (min-width:900px){

  /* ---- открытое письмо ---- */
  html.tk-msg-mode #layout-list{ display:none; }
  html.tk-msg-mode #layout-sidebar{
    display:flex !important;
    flex:0 0 var(--tk-side) !important;
    max-width:var(--tk-side) !important;
    min-width:var(--tk-side) !important;
  }
  html.tk-msg-mode #layout-content{
    display:flex !important; flex:1 1 auto !important;
    width:auto !important; max-width:none !important;
    background:var(--tk-surface);
  }
  /* текст письма не растягиваем на весь монитор — читать невозможно */
  html.tk-msg-mode #layout-content .scroller > *{
    max-width:var(--tk-read); margin-left:auto; margin-right:auto; width:100%;
  }

}

/* ---- настройки и контакты: пустую колонку убираем ----
   Без ограничения по ширине окна: пустая тёмная колонка мешает
   на любом мониторе, а не только на широком. */
html.tk-other.tk-empty #layout-content{ display:none; }
html.tk-other #layout-list{ flex:1 1 auto; max-width:none; }
html.tk-other #layout-content{ background:var(--tk-surface); }
html.tk-other #layout-content .watermark,
html.tk-other #layout-content iframe{ background:var(--tk-surface); }

/* ============================================================
   30. ЧИТАЕМОСТЬ

   Жалоба «сложно читается» справедлива: тема красит прочитанные
   письма светло-серым, а поверх ещё и тёмный режим системы.
   Тема письма — основной текст списка, она обязана быть чёрной.
   ============================================================ */
#messagelist td.subject span.subject,
#messagelist td.subject span.subject a,
#messagelist td.subject span.subject a span,
#messagelist span.subject a{
  color:var(--tk-text);
  opacity:1;
}
#messagelist tr td,
#messagelist tr span.fromto,
#messagelist tr span.fromto span{ color:var(--tk-text); }
#messagelist span.tk-snip{ color:var(--tk-muted); }
#messagelist span.date, #messagelist td.date{ color:var(--tk-muted); }

/* Подписи полей в поиске и настройках тема красит тёмной плашкой —
   на светлом фоне это выглядит как дыра. */
#searchmenu label,
#searchmenu .proplist td,
.propform td.title,
.propform th.title,
table.propform td.title{
  background:transparent;
  color:var(--tk-text-2);
  font-weight:500;
}

/* ============================================================
   31. ТЁМНАЯ ТЕМА

   Раньше тёмный режим просто гасился — это было лечение симптома:
   elastic красил поля и панели тёмным поверх наших светлых цветов,
   и читать становилось тяжело. Теперь у плагина своя тёмная палитра,
   и обе темы читаемы.

   Контраст проверен по требованию WCAG AA (4.5:1 для обычного текста):
     светлая — текст #2C2D2E на белом = 13.6:1, второстепенный
       #6F7178 на белом = 5.4:1;
     тёмная  — текст #E8E9EB на #1C1D20 = 13.1:1, второстепенный
       #9EA0A7 на #1C1D20 = 6.6:1.
   Оба значения второстепенного текста чуть темнее и светлее эталона
   соответственно: у mail.ru там 4.0:1, что ниже нормы и на плохом
   мониторе действительно плохо читается.
   ============================================================ */

:root{ --tk-muted:#6F7178; }

html.dark-mode{
  --tk-page:#141518;
  --tk-surface:#1C1D20;
  --tk-surface2:#232427;
  --tk-surface3:#26282C;
  --tk-hover:#232A33;      /* та же мятная подсветка, но приглушённая */
  --tk-sel:#2A2C31;
  --tk-border:#2E3034;
  --tk-border-2:#3A3D42;

  --tk-text:#E8E9EB;
  --tk-text-2:#D2D4D8;
  --tk-muted:#9EA0A7;
  --tk-muted-2:#82848B;

  /* фирменный синий на тёмном фоне светлее: исходный #1e88d0
     даёт всего 3.1:1 и читается плохо */
  --tk-accent:#57ABE8;
  --tk-accent-2:#8CC6F2;
  --tk-accent-rgb:87,171,232;

  --tk-danger:#F08A82;
  --tk-ok:#6BC38F;
  --tk-warn:#E8A857;

  --tk-shadow:0 8px 24px rgba(0,0,0,.55);

  color-scheme:dark;
}

/* Панели и поля тема красит своими цветами — переводим на наши.
   Иначе получается светлый текст на светлом поле. */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode .scroller,
html.dark-mode #messagelist,
html.dark-mode #messagelist tbody tr,
html.dark-mode #messagelist tbody tr > td,
html.dark-mode .contentbox,
html.dark-mode .uibox,
html.dark-mode .formcontent,
html.dark-mode .propform,
html.dark-mode .boxtitle,
html.dark-mode .watermark{
  background-color:var(--tk-surface);
  color:var(--tk-text);
}
html.dark-mode #layout-sidebar,
html.dark-mode .tk-side-top,
html.dark-mode .tk-side-foot,
html.dark-mode #layout-sidebar .header,
html.dark-mode .tk-nav{ background-color:var(--tk-page); }

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control,
html.dark-mode #searchmenu,
html.dark-mode .tk-ctx,
html.dark-mode .tk-compose-win,
html.dark-mode .tk-check{
  background-color:var(--tk-surface2);
  color:var(--tk-text);
  border-color:var(--tk-border);
}

html.dark-mode .tk-write{
  background:var(--tk-surface2);
  border-color:var(--tk-border-2);
  color:var(--tk-text);
}
html.dark-mode .tk-write:hover{ background:var(--tk-surface3); }

/* Текст письма приходит из чужой вёрстки и часто задан чёрным.
   На тёмном фоне это нечитаемо, поэтому подложку письма оставляем
   светлой — так делают и почтовые клиенты с тёмной темой. */
html.dark-mode #messagebody,
html.dark-mode #message-content .message-part,
html.dark-mode #messagecontframe{
  background:#FFFFFF;
  color:#2C2D2E;
}

/* выбранная папка и отмеченное письмо на тёмном */
html.dark-mode #folderlist li.selected > a,
html.dark-mode .listing li.selected > a,
html.dark-mode .tk-side-b.on,
html.dark-mode .tk-nav-b.on{
  background:var(--tk-sel); color:var(--tk-text);
}
html.dark-mode #messagelist tbody tr:hover,
html.dark-mode #messagelist tbody tr:hover > td{ background:var(--tk-hover); }
html.dark-mode #messagelist tbody tr.tk-picked,
html.dark-mode #messagelist tbody tr.tk-picked > td{ background:var(--tk-sel); }
html.dark-mode #messagelist span.tk-av .tk-av-box{
  background:var(--tk-surface2); border-color:var(--tk-border-2);
}

/* Знак ТЕКСА и значки наследуют цвет текста, отдельной правки не нужно.
   Проверять читаемость обеих тем: node contrast.js */

/* ============================================================
   32. ОКНО НАПИСАНИЯ ИЗНУТРИ

   Внутри окна работает обычная страница написания Roundcube.
   Приводим её к виду с видео: строка вложений под полями,
   синяя кнопка отправки внизу, без заголовка и кнопки меню —
   они дублировали шапку самого окна.
   ============================================================ */
html.tk-inmodal #layout-content > .header .task-menu-button,
html.tk-inmodal #layout-content > .header > .header-title{ display:none; }

html.tk-inmodal #layout-content > .header{
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
  min-height:auto;
}
/* Панель в окне письма БОЛЬШЕ НЕ ПОКАЗЫВАЕМ.

   Здесь задавалась видимость — я оформлял её, когда думал, что
   она нужна. Потом решил убрать (разделы 86 и 88), но это
   правило осталось и перебивало пряталку: оно специфичнее.

   Оформление оставляем на случай, если панель когда-нибудь
   понадобится, но видимость ей не задаём. */
html.tk-inmodal #messagetoolbar.toolbar{
  flex-wrap:wrap; gap:2px;
  padding:4px 8px;
}
html.tk-inmodal #messagetoolbar a{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:7px 12px; border-radius:8px;
  color:var(--tk-text); font-size:14px;
}
html.tk-inmodal #messagetoolbar a:hover{ background:var(--tk-hover); }

/* поля «Кому» и «Тема» — крупнее и с воздухом, как на видео */
html.tk-inmodal #compose-headers td,
html.tk-inmodal .compose-headers .form-group{ padding:4px 0; }
html.tk-inmodal #compose-headers input,
html.tk-inmodal .compose-headers input{
  font-size:15px; padding:8px 10px;
}

/* подвал с кнопками: отправка — основным цветом */
html.tk-inmodal #layout-content > .footer{
  background:var(--tk-surface);
  border-top:1px solid var(--tk-border);
  padding:10px 14px;
}
html.tk-inmodal #layout-content > .footer a.send,
html.tk-inmodal #layout-content > .footer button.send,
html.tk-inmodal .buttons a.send{
  background:var(--tk-accent); color:#fff;
  border-radius:8px; padding:10px 22px;
  font-weight:600;
}
html.tk-inmodal #layout-content > .footer a.send:hover{ background:var(--tk-accent-2); }

/* боковая колонка вложений и настроек внутри окна уже; на широком
   экране она полезна, на узком — мешает и уезжает за край */
@media (max-width:1100px){
  html.tk-inmodal #layout-sidebar.sidebar-right{ display:none; }
}

/* ============================================================
   33. ШАПКА И НИЗ ОТКРЫТОГО ПИСЬМА
   ============================================================ */
html.tk-msg-mode #message-header{
  padding:18px 24px 12px;
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
}
html.tk-msg-mode #message-header h2.subject{
  font:600 22px/1.3 inherit;
  color:var(--tk-text);
  margin:0 0 14px;
}
html.tk-msg-mode #message-header .header .contactphoto{
  width:40px !important; height:40px !important;
  border-radius:50%; overflow:hidden; flex:0 0 40px;
}
html.tk-msg-mode #message-header .header-summary,
html.tk-msg-mode #message-header .header-headers{
  font-size:14px; color:var(--tk-text);
}
html.tk-msg-mode #message-header .header-headers .header-title{
  color:var(--tk-muted);
}

/* нижняя полоса действий под письмом */
.tk-msgfoot{
  position:sticky; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  padding:10px 20px;
  background:var(--tk-surface2);
  border-top:1px solid var(--tk-border);
}
.tk-mf{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:8px 14px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-mf:hover{ background:var(--tk-hover); }
.tk-mf .tk-i{ color:var(--tk-muted); }

/* ============================================================
   34. СТРАНИЦЫ НАСТРОЕК

   На видео это не таблица, а карточка: крупный заголовок раздела,
   подзаголовки, описания серым, поля с воздухом.
   ============================================================ */
html.tk-other #layout-list .scroller,
html.tk-other #layout-content .scroller{ background:var(--tk-page); }

html.tk-other .formcontent,
html.tk-other .contentbox,
html.tk-other .uibox,
html.tk-other fieldset.propform{
  background:var(--tk-surface);
  border:1px solid var(--tk-border);
  border-radius:12px;
  padding:20px 24px;
  margin:14px 16px;
  box-shadow:none;
}
html.tk-other legend,
html.tk-other .boxtitle,
html.tk-other h2.boxtitle{
  font:600 19px/1.3 inherit;
  color:var(--tk-text);
  background:transparent;
  border:0;
  padding:0 0 12px;
}
html.tk-other .propform td.title,
html.tk-other .propform th.title{
  width:auto !important; min-width:220px;
  color:var(--tk-text-2);
  font-weight:400;
  padding:9px 14px 9px 0;
}
html.tk-other .propform td{ padding:9px 0; }
html.tk-other input[type=text],
html.tk-other input[type=password],
html.tk-other input[type=email],
html.tk-other select,
html.tk-other textarea{
  border:1px solid var(--tk-border-2);
  border-radius:8px;
  padding:9px 12px;
  font-size:14px;
  /* background-color, а не сокращение «background»: сокращение
     стирает background-image, а именно им общее правило «select{}»
     рисует стрелку выпадающего списка. Это правило весит больше
     (класс + два тега), поэтому гасило стрелку ВО ВСЕХ настройках,
     профилях, ответах, папках и правилах фильтрации — списки
     выглядели обычным полем ввода. */
  background-color:var(--tk-surface);
  color:var(--tk-text);
}
html.tk-other input:focus,
html.tk-other select:focus,
html.tk-other textarea:focus{
  border-color:var(--tk-accent);
  outline:2px solid rgba(var(--tk-accent-rgb),.18);
  outline-offset:0;
}
html.tk-other .formbuttons button,
html.tk-other .footer button.submit,
html.tk-other button.save{
  background:var(--tk-accent); color:#fff;
  border:0; border-radius:8px;
  padding:10px 22px; font-weight:600;
}
html.tk-other .formbuttons button:hover{ background:var(--tk-accent-2); }

/* ============================================================
   35. РАЗДЕЛЕНИЕ ПАНЕЛЕЙ И ТЁМНАЯ ТЕМА НА ДЕЛЕ

   На записи всё сливалось в одно серое полотно: панель папок,
   список и письмо шли без границ и без разницы в фоне.
   Разводим их по слоям, как в эталоне.
   ============================================================ */
#layout-sidebar{
  background:var(--tk-page);
  border-right:1px solid var(--tk-border);
}
#layout-list{ background:var(--tk-surface); }
#layout-content{
  background:var(--tk-surface);
  border-left:1px solid var(--tk-border);
}

/* В тёмной теме разница фонов должна быть заметнее: на глаз
   два соседних тёмных оттенка почти не различаются. */
html.dark-mode #layout-sidebar{ background:#101114; }
html.dark-mode #layout-list,
html.dark-mode #layout-content{ background:#1C1D20; }
html.dark-mode #layout-sidebar,
html.dark-mode #layout-content{ border-color:#2E3034; }

/* Ячейки папок были слишком высокими — список не влезал на экран. */
#folderlist li a,
.listing li a{
  padding-top:7px; padding-bottom:7px;
  min-height:auto;
  line-height:1.35;
}
#layout-sidebar .scroller{ padding:2px 8px; }
#folderlist li,
.listing li{ border:0; }

/* Кнопка смены темы */
.tk-theme .tk-i{ color:var(--tk-accent); }

/* ============================================================
   36. ПРАВЫЙ КРАЙ СТРОКИ И ПОМЕТКИ

   На записи справа шёл столбец скрепок — по одной у каждого письма,
   даже без вложения, — а флажок пропал совсем. Это родные колонки
   темы: скрепка там рисуется всегда, флажок теряется под нашими
   кнопками. Прячем обе и рисуем сами, по данным письма.
   ============================================================ */
/* Прячем БЕЗУСЛОВНО, а не только в нашей раскладке. Пока условие
   стояло, столбец скрепок оставался везде, где класс раскладки
   ещё не проставлен — при загрузке, в поиске, в других папках. */
#messagelist td.attachment,
#messagelist th.attachment,
#messagelist td.flag,
#messagelist th.flag,
#messagelist td.flags,
#messagelist th.flags,
#messagelist tbody tr > td.attachment,
#messagelist thead tr > th.attachment,
#messagelist tbody tr > td.flags,
#messagelist thead tr > th.flags,
#messagelist tbody tr > td.flag,
html.tk-list-mode #messagelist tbody tr > td.attachment,
html.tk-list-mode #messagelist thead tr > th.attachment,
html.tk-list-mode #messagelist tbody tr > td.flags,
html.tk-list-mode #messagelist thead tr > th.flags,
html.tk-list-mode #messagelist tbody tr > td.flag{ display:none; }

/* и та же скрепка, когда она лежит внутри ячейки темы */
#messagelist td.subject span.attachment,
#messagelist span.subject span.attachment{ display:none; }

/* свои пометки — слева от даты, только когда они есть */
#messagelist .tk-marks{
  display:inline-flex; align-items:center; gap:5px;
  margin-right:8px; vertical-align:middle;
}
#messagelist .tk-mark-att{ color:var(--tk-muted-2); }
#messagelist .tk-mark-flag{ color:var(--tk-danger); }

/* Своя ячейка под кнопки: раньше они лезли в колонку вложений,
   скрепка перекрывала удаление, и оно не срабатывало. */
html.tk-list-mode #messagelist tbody tr > td.tk-actcell{
  order:10;
  flex:0 0 auto !important;
  position:relative !important;
  overflow:visible !important;
  width:34px; min-width:34px;
  padding:0;
}

/* ============================================================
   37. РАЗДЕЛЫ НАСТРОЕК ОТКРЫВАЮТСЯ НА МЕСТЕ СПИСКА

   Раньше выбранный раздел вылезал третьей колонкой справа
   и уезжал за край экрана. Теперь он занимает место списка:
   слева меню, справа раздел.
   ============================================================ */
html.tk-other.tk-other-open #layout-list{ display:none; }
html.tk-other.tk-other-open #layout-content{
  display:flex !important;
  flex:1 1 auto !important;
  width:auto !important; max-width:none !important;
}
html.tk-other.tk-other-open #layout-content .back-list-button,
html.tk-other.tk-other-open #layout-content .back-sidebar-button{
  display:inline-flex !important; align-items:center;
}

/* ============================================================
   38. СТРАНИЦА ВХОДА

   Собрана по образцу входа в ЕРП: спокойный голубой фон, белая
   карточка строго по центру экрана, знак ТЕКСА сверху, синяя кнопка
   во всю ширину. Всё лишнее, что рисует тема, убрано: собственный
   логотип Roundcube, подпись «Roundcube Webmail», серые плашки
   со значками у полей и полоса перехода.
   ============================================================ */
html.tk-login,
html.tk-login body{
  background:#D6E6F5;
  color:var(--tk-text);
  min-height:100%;
  margin:0;
}

/* Карточку центрируем на всём экране. Раньше центрирование стояло
   на нескольких вложенных блоках сразу, и они спорили друг с другом —
   карточка уезжала вправо и вниз. Теперь центрует ОДИН блок. */
/* Центрирование задано ОДИН раз, ниже в разделе 43.
   Здесь оно стояло вторым, блоки спорили — карточка съезжала. */
html.tk-login #layout-content,
html.tk-login #layout-content > .content{
  display:block !important;
  flex:0 0 auto !important;
  width:auto !important; max-width:none !important;
  min-height:0;
  background:transparent;
  border:0;
  overflow:visible !important;
}

/* лишнее с чужой страницы */
html.tk-login #layout-menu,
html.tk-login #layout-sidebar,
html.tk-login #layout-list,
html.tk-login #tk-nav,
html.tk-login .header,
html.tk-login .footer,
html.tk-login #logo,
html.tk-login .logo,
/* Подпись «Roundcube Webmail» лежит в #login-footer, а не в .product-name —
   это видно по шаблону login.html темы. Прежний селектор мимо. */
html.tk-login #login-footer,
html.tk-login #login-form .product-name,
html.tk-login .product-name,
html.tk-login .support-link,
html.tk-login #message,
html.tk-login label > .input-group-prepend,
html.tk-login .input-group-prepend,
html.tk-login .input-group-text{ display:none; }

html.tk-login #login-form,
html.tk-login .box-inner,
html.tk-login form[name=form]{
  width:min(92vw, 370px);
  background:#fff;
  border:1px solid #C7DAEC;
  border-radius:14px;
  padding:32px 32px 28px;
  box-shadow:0 12px 36px rgba(20,60,100,.16);
  margin:0 auto;
  box-sizing:border-box;
}

.tk-login-mark{
  display:flex; flex-direction:column; align-items:center;
  gap:6px; margin-bottom:26px; text-align:center;
}
.tk-login-mark b{
  font:700 20px/1.15 inherit; letter-spacing:.16em; color:#0d5fa0;
}
.tk-login-mark span{ font-size:12px; color:var(--tk-muted); }

/* поля: подпись сверху, поле во всю ширину, без плашек со значками */
html.tk-login .form-group,
html.tk-login .input-group{
  display:block !important; width:100% !important; margin:0 !important;
}
html.tk-login label{
  display:block !important;
  font-size:13px; color:var(--tk-muted);
  margin:0 0 6px; padding:0;
  text-align:left; background:none; border:0;
  width:auto !important; height:auto !important;
}
html.tk-login input[type=text],
html.tk-login input[type=password],
html.tk-login input.form-control{
  width:100% !important; box-sizing:border-box;
  border:1px solid #C7DAEC; border-radius:9px;
  padding:11px 13px; font-size:15px;
  background:#FBFDFF; color:var(--tk-text);
  margin:0 0 16px;
  box-shadow:none;
}
html.tk-login input:focus{
  border-color:var(--tk-accent);
  outline:2px solid rgba(var(--tk-accent-rgb),.16);
  outline-offset:0;
}
html.tk-login button[type=submit],
html.tk-login .btn-primary,
html.tk-login input[type=submit]{
  width:100% !important;
  background:#0d5fa0; color:#fff;
  border:0; border-radius:9px;
  padding:12px 18px; margin:6px 0 0;
  font:600 15px/1.2 inherit;
  letter-spacing:.02em; text-transform:none;
  cursor:pointer; box-shadow:none;
}
html.tk-login button[type=submit]:hover{ background:#0a4e85; }

/* на входе тёмная тема не применяется: карточка задумана светлой */
html.tk-login.dark-mode,
html.tk-login.dark-mode body{ background:#D6E6F5; }
html.tk-login.dark-mode #login-form{ background:#fff; }

/* ---- поле пароля с глазиком и «Запомнить меня» ---- */
html.tk-login .tk-pass-wrap{ position:relative; display:block; }
html.tk-login .tk-pass-wrap input{ padding-right:44px; }
/* Глазик по центру поля, а не привязан к верхнему краю:
   при разной высоте поля он съезжал. */
.tk-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:8px;
  color:var(--tk-muted); cursor:pointer; padding:0;
}
.tk-eye:hover{ background:#EDF4FB; color:var(--tk-accent-2); }
.tk-eye.on{ color:var(--tk-accent-2); }

.tk-remember{
  display:flex !important; align-items:center; gap:12px;
  width:100%; box-sizing:border-box;
  margin:2px 0 20px; padding:0 2px;
  font-size:14px; color:var(--tk-text);
  cursor:pointer; user-select:none;
}
.tk-remember input{
  /* Тема рисует галочку своим способом и на входе получался чёрный
     квадрат, а подпись сливалась с белым фоном. Рисуем сами. */
  appearance:none; -webkit-appearance:none;
  width:18px !important; height:18px !important;
  flex:0 0 18px !important; margin:0 !important;
  border:1.5px solid var(--tk-border-2);
  border-radius:5px;
  background:#fff;
  cursor:pointer; position:relative; opacity:1;
}
.tk-remember input:checked{
  background:#0d5fa0; border-color:#0d5fa0;
}
.tk-remember input:checked::after{
  content:''; position:absolute; left:5px; top:1px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.tk-remember span{
  color:var(--tk-text); font-size:14px;
}


/* ============================================================
   39. БЕЗ МИГАНИЯ ЧУЖОГО ВИДА

   Классы раскладки теперь приходят с сервера (см. early_classes
   в teksa_ui.php), поэтому фон и панели красятся с первого кадра.
   Здесь — только фон документа, чтобы не мелькала белая вспышка
   при переходах в тёмной теме.
   ============================================================ */
html.tk-early{ background:var(--tk-page); }
html.tk-early.dark-mode{ background:#141518; }
html.tk-early body{ background:var(--tk-page); }
html.tk-early.dark-mode body{ background:#141518; }
html.tk-early.tk-login,
html.tk-early.tk-login body{ background:#D6E6F5; }

/* Полосу задач прячем сразу, а не после запуска скрипта. */
html.tk-early.tk-nomenu #layout-menu,
html.tk-early.tk-nomenu #taskmenu{ display:none; }


/* ============================================================
   40. ОКНО НАПИСАНИЯ ДОЛЖНО БЫТЬ ВИДНО

   На записи окно создавалось, но оставалось невидимым: тема
   elastic держит собственные слои с высоким z-index, и окно
   уходило под них. Поднимаем выше и не даём наследовать
   ограничения родителя.
   ============================================================ */
.tk-compose{
  z-index:2147483000 !important;   /* выше любых слоёв темы */
  position:fixed !important;
  inset:0;
}
.tk-compose.show{ display:flex; }
.tk-compose-win{
  position:relative !important;
  min-width:320px; min-height:320px;
  max-height:none;
}

/* Пока окно открыто, страница под ним не прокручивается. */
html.tk-composing, html.tk-composing body{ overflow:hidden; }

/* ============================================================
   41. ЧИТАЕМОСТЬ: РАЗБОР ПО СНИМКАМ С СЕРВЕРА

   Всё ниже правится не «на глаз», а по конкретным местам,
   которые видно на снимках обхода.
   ============================================================ */

/* ---- 41.1 Настройки: текст в полях обрезался снизу ----
   На снимке «Пользовательский интерфейс» строки «Определять
   автоматически», «07:30», «2026-07-24» срезаны по нижнему краю.
   Причина: тема задаёт полям жёсткую высоту, а мой отступ
   выталкивал текст за неё. Задаём высоту от содержимого. */
html.tk-other input[type=text],
html.tk-other input[type=password],
html.tk-other input[type=email],
html.tk-other input[type=number],
html.tk-other select,
html.tk-other textarea{
  height:auto !important;
  min-height:40px;
  line-height:1.4;
  padding:9px 12px;
  box-sizing:border-box;
}
html.tk-other select{ padding-right:30px; }

/* ---- 41.2 Настройки: подпись и поле разъезжались по краям ----
   Подпись у левого края, поле у правого, между ними полметра
   пустоты — глазу приходится прыгать. Сводим в читаемую колонку. */
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .propform{
  max-width:900px !important;
}
html.tk-other .propform td.title,
html.tk-other .propform th.title{
  width:44% !important; max-width:360px !important;
  vertical-align:middle;
}
html.tk-other .propform td{ vertical-align:middle; }

/* ---- 41.3 Настройки: колонка меню была шире содержимого ---- */
@media (min-width:900px){
  html.tk-other #layout-sidebar{
    flex:0 0 240px !important;
    max-width:240px !important;
    min-width:240px !important;
  }
}

/* ---- 41.4 Тёмная тема: панели сливались в одно полотно ----
   На снимке список и папки почти неразличимы, границ не видно.
   Разводим фоны заметнее и делаем разделители видимыми. */
html.dark-mode #layout-sidebar{ background:#0D0E11; }
html.dark-mode #layout-list,
html.dark-mode #layout-content{ background:#1A1B1F; }
html.dark-mode #layout-sidebar,
html.dark-mode #layout-content{ border-color:#33363C; }
html.dark-mode{ --tk-border:#33363C; }
html.dark-mode #messagelist tbody tr{
  border-bottom:1px solid #2A2C31;
}

/* шапка со строкой поиска и панелью действий — на полтона светлее,
   чтобы отделялась от списка */
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode .tk-listbar,
html.dark-mode .tk-msgbar{
  background:#232529;
  border-bottom:1px solid #33363C;
}

/* ---- 41.5 Тёмная тема: непрочитанное должно быть заметно ---- */
html.dark-mode #messagelist tr.unread span.subject,
html.dark-mode #messagelist tr.unread span.fromto{
  color:#FFFFFF; font-weight:600;
}
html.dark-mode #messagelist span.tk-snip{ color:#9EA0A7; }
html.dark-mode #messagelist span.date,
html.dark-mode #messagelist td.date{ color:#9EA0A7; }

/* ---- 41.6 Пустая шапка над разделом настроек ----
   Наверху висела полоса с одинокой стрелкой и пустотой. */
html.tk-other #layout-content > .header:empty,
html.tk-other #layout-list > .header:empty{ display:none; }

/* ---- 41.7 Кнопка «Сохранить» прижималась к краю ---- */
html.tk-other .formbuttons{
  padding:14px 24px;
  border-top:1px solid var(--tk-border);
  background:var(--tk-surface);
}

/* ============================================================
   42. ОКНО НАПИСАНИЯ: СВЕРКА С ЭТАЛОНОМ

   Что на снимке 89 расходится с образцом:
   — «Отправить» белая и незаметная, в образце это синяя кнопка;
   — панель темы рисует крупные значки с подписями снизу,
     в образце — компактная строка;
   — рядом с отправкой нет «Отменить».
   ============================================================ */

/* Кнопка отправки. Прежнее правило целилось в «a.send внутри подвала»,
   а тема рисует её иначе — потому и не срабатывало. Целимся по команде,
   это надёжнее любого предположения о вёрстке. */
html.tk-inmodal a.send,
html.tk-inmodal button.send,
html.tk-inmodal [data-command="send"],
html.tk-inmodal .buttons .send{
  background:var(--tk-accent);
  color:#fff;
  border:0;
  border-radius:9px;
  padding:11px 26px;
  font-weight:600;
  font-size:15px;
  box-shadow:none;
}
html.tk-inmodal a.send:hover,
html.tk-inmodal button.send:hover,
html.tk-inmodal [data-command="send"]:hover{
  background:var(--tk-accent-2);
}
html.tk-inmodal a.send .inner,
html.tk-inmodal [data-command="send"] .inner{ color:#fff; }

/* Остальные кнопки подвала — спокойные, рядом с синей */
html.tk-inmodal [data-command="savedraft"],
html.tk-inmodal a.savedraft,
html.tk-inmodal button.savedraft{
  background:var(--tk-surface);
  border:1px solid var(--tk-border-2);
  border-radius:9px;
  padding:11px 20px;
  color:var(--tk-text);
}

/* Панель темы: значок и подпись в одну строку, а не столбиком */
html.tk-inmodal #messagetoolbar a,
html.tk-inmodal #messagetoolbar button{
  flex-direction:row !important;
  gap:8px;
  font-size:14px;
}
html.tk-inmodal #messagetoolbar a .inner,
html.tk-inmodal #messagetoolbar button .inner{
  font-size:14px;
  display:inline !important;
  margin:0;
}

/* Поля «От / Кому / Тема»: подпись и поле ближе друг к другу */
html.tk-inmodal #compose-headers td.title,
html.tk-inmodal .compose-headers label{
  width:88px !important; min-width:88px !important;
  color:var(--tk-muted);
  font-size:14px;
  padding-right:10px;
}
html.tk-inmodal #compose-headers input,
html.tk-inmodal .compose-headers input{
  border:1px solid var(--tk-border);
  border-radius:8px;
  min-height:40px;
  height:auto !important;
  line-height:1.4;
}

/* «Отменить» рядом с отправкой — её добавляет плагин, у темы такой нет */
.tk-cancel{
  background:var(--tk-surface); border:1px solid var(--tk-border-2);
  border-radius:9px; padding:11px 20px; margin-left:8px;
  font:400 15px/1.2 inherit; color:var(--tk-text); cursor:pointer;
}
.tk-cancel:hover{ background:var(--tk-hover); }


/* ============================================================
   43. ВХОД: ЧЁРНЫЙ ПРЯМОУГОЛЬНИК И СЪЕХАВШАЯ КАРТОЧКА

   На телефоне над карточкой висел чёрный прямоугольник, а сама
   карточка стояла ниже середины. Прямоугольник — пустая область
   темы, которую в тёмном режиме красит системная тема; карточку
   же прижимало вниз, потому что центрировался не тот блок.

   Вход всегда светлый: он в цветах ЕРП, тёмная тема к нему
   не применяется вовсе.
   ============================================================ */
/* Прозрачным делаем ОБЁРТКИ, но не саму карточку: из-за этого
   правила она лишилась белого фона и повисла прямо на голубом. */
html.tk-login,
html.tk-login body,
html.tk-login #layout,
html.tk-login #layout-content,
html.tk-login #layout-content > *:not(form):not(.content),
html.tk-login .content,
html.tk-login .content > *:not(form){
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--tk-text);
}
html.tk-login,
html.tk-login body{ background:#D6E6F5; }

/* всё, кроме самой формы, с экрана входа убираем */
html.tk-login #layout > *:not(#layout-content),
html.tk-login #layout-content > *:not(.content):not(form),
html.tk-login .content > *:not(form):not(#login-form),
html.tk-login iframe,
html.tk-login .watermark,
html.tk-login #messagestack{ display:none; }

/* карточка строго по центру: центрирует ОДИН блок, остальные не мешают */
html.tk-login #layout{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100dvh;
  padding:24px;
  margin:0;
  box-sizing:border-box;
}
html.tk-login #layout-content,
html.tk-login .content{
  display:block !important;
  width:auto !important; max-width:100% !important;
  min-height:0; height:auto;
  padding:0; margin:0;
  position:static !important;
  overflow:visible !important;
}

/* на телефоне карточка шире и с большими полями ввода */
@media (max-width:520px){
  html.tk-login #login-form,
  html.tk-login form[name=form]{
    width:100% !important; max-width:400px !important;
    padding:26px 22px 24px;
  }
  html.tk-login input[type=text],
  html.tk-login input[type=password]{
    font-size:16px;     /* меньше 16 — телефон приближает экран */
    min-height:46px;
  }
  html.tk-login button[type=submit]{ min-height:48px; }
}

/* «Запомнить меня» — подпись была почти не видна */
.tk-remember span{
  color:var(--tk-text);
  font-size:14px;
  opacity:1;
}

/* Класс приходит с сервера: вход не должен мигнуть тёмным. */
html.tk-force-light,
html.tk-force-light body{
  background:#D6E6F5;
  color-scheme:light;
}
html.tk-force-light.dark-mode{ background:#D6E6F5; }

/* ============================================================
   44. БОКОВАЯ ПАНЕЛЬ И ВЕРХ СПИСКА — СВЕРКА С ЭТАЛОНОМ

   Что расходилось на снимке 1920-10-список:
   — над списком висела панель действий письма, которой на эталоне
     там нет вовсе: она должна появляться только при чтении;
   — служебные папки назывались по-английски (Outbox, Snoozed);
   — не было кнопки «Новая папка» внизу списка папок.
   ============================================================ */

/* панель действий письма показывается только в режиме чтения */
.tk-msgbar-idle{ display:none; }
html.tk-reading .tk-msgbar-idle{ display:flex; }

/* Шапку колонки письма НЕ прячем: в ней живёт панель действий.
   Прежнее правило убирало её целиком, и письмо открывалось
   без кнопок вообще. */

/* «Новая папка» */
.tk-newfolder{
  display:flex; align-items:center; gap:9px;
  width:calc(100% - 16px); margin:6px 8px 10px;
  padding:9px 12px; border:0; border-radius:8px;
  background:none; cursor:pointer;
  font:400 14px/1.3 inherit; color:var(--tk-muted);
  text-align:left;
}
.tk-newfolder:hover{ background:var(--tk-hover); color:var(--tk-text); }
.tk-newfolder .tk-i{ color:var(--tk-muted); }

/* счётчик непрочитанных — как на эталоне, справа и неярко */
#folderlist li a .unreadcount,
.listing li a .unreadcount{
  margin-left:auto;
  background:transparent;
  color:var(--tk-muted);
  font-weight:400;
  font-size:13px;
  padding:0; min-width:0;
}
#folderlist li a,
.listing li a{ display:flex; align-items:center; gap:10px; }


/* Карточка входа держит свой вид поверх любых обёрточных правил */
html.tk-login #login-form,
html.tk-login form[name=form],
html.tk-login .box-inner{
  background:#fff;
  border:1px solid #C7DAEC;
  box-shadow:0 12px 36px rgba(20,60,100,.16);
}

/* Высота во всю страницу — иначе центрировать нечего */
html.tk-login, html.tk-login body{ height:100%; }

/* ============================================================
   45. СПИСОК ПАПОК ПО ЭТАЛОНУ

   На эталоне у каждой папки свой значок, подчинённые идут
   с отступом, а у родителя есть стрелка раскрытия. Тема же
   рисует плоский список с одинаковыми иконками.
   ============================================================ */
#folderlist .tk-fi{
  flex:0 0 auto; color:var(--tk-muted);
}
#folderlist li.selected > a .tk-fi,
#folderlist li a:hover .tk-fi{ color:var(--tk-accent-2); }

/* родные иконки темы убираем — вместо них наши */
#folderlist li a > span.icon,
#folderlist li a::before{ display:none; }

/* подчинённые папки с отступом */
#folderlist li.tk-sub > a{ padding-left:34px; }
#folderlist li.tk-sub li > a{ padding-left:52px; }

/* стрелка раскрытия у родителя */
.tk-fold{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:-4px;
  color:var(--tk-muted-2); cursor:pointer; flex:0 0 18px;
  transition:transform .15s;
}
.tk-fold:hover{ color:var(--tk-text); }
#folderlist li.tk-collapsed > ul{ display:none; }
#folderlist li.tk-collapsed .tk-fold{ transform:rotate(-90deg); }

/* строка папки: значок, название, счётчик справа */
#folderlist li > a{
  padding:8px 12px;
  border-radius:8px;
  gap:11px;
  font-size:14px;
}

/* ============================================================
   46. МЕНЮ ПИСЬМА: СВЕРКА С ЭТАЛОНОМ

   На снимке 13б расходилось три вещи:
   — разделители между группами не видны, меню читается сплошняком;
   — значки пометок серые, в эталоне синяя точка и красный флажок;
   — над списком висела кнопка «Обновить», которой в эталоне нет.
   ============================================================ */

/* разделители между группами — в эталоне они заметны */
.tk-ctx hr{
  border:0;
  border-top:1px solid var(--tk-border);
  margin:6px 0;
  height:0 !important;
  opacity:1;
  display:block !important;
}

/* цветные значки пометок */
.tk-ctx .tk-i-accent{ color:var(--tk-accent); }
.tk-ctx .tk-i-danger{ color:var(--tk-danger); }

/* «Обновить» над списком: в эталоне его нет, список обновляется сам.

   ВАЖНО: прячем только саму строку с кнопкой обновления, а не всю
   шапку колонки. Прежнее правило убирало шапку целиком — вместе
   с ней исчезала панель действий открытого письма, и из письма
   нельзя было ни ответить, ни вернуться назад. */
html.tk-list-mode:not(.tk-reading) #layout-list > .header > a.button.refresh,
html.tk-list-mode:not(.tk-reading) #layout-list > .header > .refresh{
  display:none !important;
}
html.tk-list-mode:not(.tk-reading) #layout-list > .header:not(:has(#tk-listbar)){
  min-height:0; padding:0; border:0;
}

/* ============================================================
   47. НАСТРОЙКИ: ПУСТАЯ ПОЛОСА СВЕРХУ

   Над разделом висела полоса высотой в кнопку, а в ней —
   одинокая стрелка возврата. Ни заголовка, ни смысла.
   Делаем полосу нормальной шапкой с подписью.
   ============================================================ */
html.tk-other #layout-content > .header{
  min-height:auto;
  padding:10px 24px;
  background:var(--tk-page);
  border-bottom:1px solid var(--tk-border);
  display:flex !important; align-items:center; gap:10px;
}
html.tk-other #layout-content > .header .header-title{
  font:600 17px/1.3 inherit;
  color:var(--tk-text);
}
html.tk-other #layout-content > .header a.back-list-button,
html.tk-other #layout-content > .header a.back-sidebar-button{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  color:var(--tk-muted);
}
html.tk-other #layout-content > .header a.back-list-button:hover{
  background:var(--tk-hover); color:var(--tk-text);
}

/* карточка раздела шире: справа оставалась половина экрана пустой */
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .propform{ max-width:1100px; }

/* «Сохранить» держится у нижнего края и не отрывается от карточки */
html.tk-other .formbuttons{
  position:sticky; bottom:0; z-index:2;
  margin:0;
}

/* ============================================================
   48. ПИСЬМО ИЗНУТРИ

   Приводим к эталону: крупная тема, круглая аватарка отправителя,
   имя жирным, дата и «Кому» серым, действия справа значками.
   ============================================================ */
html.tk-reading #layout-content,
html.tk-msg-mode #layout-content{ background:var(--tk-surface); }

#messageheader, #message-header{
  padding:20px 26px 16px;
  border-bottom:1px solid var(--tk-border);
  background:var(--tk-surface);
}
#messageheader .subject, #message-header .subject,
#messageheader h2, #message-header h2{
  font:600 22px/1.32 inherit;
  color:var(--tk-text);
  margin:0 0 16px;
  display:block !important;
}

/* строка отправителя */
#messageheader .header-links,
#message-header .header-summary{ font-size:14px; }
#messageheader .contactphoto,
#message-header .contactphoto,
.message-partheaders .contactphoto{
  width:40px !important; height:40px !important; flex:0 0 40px !important;
  border-radius:50%; overflow:hidden;
  background:var(--tk-surface2);
}
#messageheader .rcmContactAddress,
#message-header .rcmContactAddress,
#messageheader .adr{ font-weight:600; color:var(--tk-text); }
#messageheader .date, #message-header .date{ color:var(--tk-muted); }
#messageheader .header-title, #message-header .header-title{
  color:var(--tk-muted); font-weight:400;
}

/* тело письма: колонка чтения, а не во всю ширину монитора */
#messagebody, #message-content .message-part{
  max-width:var(--tk-read) !important;
  margin:0 auto;
  padding:22px 26px 40px;
  font-size:15px; line-height:1.55;
}

/* цепочка переписки под письмом */
#messagelist.thread tr,
.message-thread .message{
  border-bottom:1px solid var(--tk-border);
}

/* ============================================================
   49. ОКНО НАПИСАНИЯ: ПАНЕЛЬ ОФОРМЛЕНИЯ И ВЛОЖЕНИЯ
   ============================================================ */
html.tk-inmodal .mce-toolbar,
html.tk-inmodal .tox-toolbar,
html.tk-inmodal .tox-editor-header{
  background:var(--tk-surface2);
  border-bottom:1px solid var(--tk-border);
}
html.tk-inmodal .tox-tinymce{
  border:1px solid var(--tk-border);
  border-radius:8px;
}
html.tk-inmodal #compose-attachments,
html.tk-inmodal .attachmentslist li{
  font-size:14px; color:var(--tk-text);
}
html.tk-inmodal #layout-sidebar.sidebar-right{
  border-left:1px solid var(--tk-border);
  background:var(--tk-surface);
}

/* ============================================================
   50. КОНТАКТЫ
   ============================================================ */
html.tk-other #contacts-table td,
html.tk-other #directorylist li a{
  padding:9px 14px; font-size:14px;
}
html.tk-other #contacts-table tr.selected td{
  background:var(--tk-sel);
}
html.tk-other #contact-frame,
html.tk-other #contacthead{
  background:var(--tk-surface);
  padding:18px 22px;
}
html.tk-other #contacthead .names .namefield{
  font:600 20px/1.3 inherit; color:var(--tk-text);
}

/* ============================================================
   51. ТЁМНАЯ ТЕМА — ОСТАЛЬНЫЕ ЭКРАНЫ

   Раньше правилась только на списке. Здесь — письмо, окно
   написания, меню, контакты и настройки.
   ============================================================ */
html.dark-mode #messageheader,
html.dark-mode #message-header,
html.dark-mode #messagelist.thread tr{
  background:#1A1B1F;
  border-color:#33363C;
  color:var(--tk-text);
}
html.dark-mode .tk-ctx,
html.dark-mode .tk-acc,
html.dark-mode .tk-check,
html.dark-mode .tk-labelmenu{
  background:#232529;
  border:1px solid #33363C;
  color:var(--tk-text);
}
html.dark-mode .tk-ctx button{ color:var(--tk-text); }
html.dark-mode .tk-ctx button:hover{ background:#2E3136; }
html.dark-mode .tk-ctx hr{ border-top-color:#33363C; }

html.dark-mode .tk-compose-win{ background:#1A1B1F; }
html.dark-mode .tk-compose-h{
  background:#232529; border-bottom-color:#33363C;
}
html.dark-mode .tk-compose-t{ color:var(--tk-text); }

html.dark-mode #contacts-table td,
html.dark-mode #directorylist li a,
html.dark-mode #contacthead{
  background:#1A1B1F; color:var(--tk-text);
}
html.dark-mode .formcontent,
html.dark-mode fieldset.propform,
html.dark-mode .contentbox{
  background:#1A1B1F;
  border-color:#33363C;
  color:var(--tk-text);
}
html.dark-mode legend,
html.dark-mode .boxtitle{ color:var(--tk-text); }
html.dark-mode .tk-newfolder,
html.dark-mode .tk-side-b,
html.dark-mode .tk-nav-b{ color:var(--tk-text-2); }
html.dark-mode .tk-msgfoot{
  background:#232529; border-top-color:#33363C;
}
html.dark-mode .tk-listbar button{ color:var(--tk-text); }
html.dark-mode .tk-undo{
  background:#232529; color:var(--tk-text);
  border:1px solid #33363C;
}


/* ============================================================
   52. ЧТО НАШЛОСЬ НА ЖИВОМ ПИСЬМЕ

   — панель действий не показывалась вовсе;
   — внизу справа было ДВЕ кнопки «?»: наша самопроверка
     и родная справка темы;
   — аватарка отправителя оставалась серой заглушкой.
   ============================================================ */

/* панель действий письма видна всегда, когда письмо открыто */
html.tk-reading .tk-msgbar,
html.tk-msg-mode .tk-msgbar{ display:flex; }
html.tk-reading #layout-content > .header,
html.tk-msg-mode #layout-content > .header{
  display:flex !important;
  align-items:center;
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
}

/* Родную кнопку справки прячем: наша самопроверка на том же месте,
   и внизу справа висели две одинаковые круглые кнопки «?». */
#taskmenu a.about,
a.button.help,
a.help.button,
.floating-action-buttons a,
.floating-action-buttons button,
#layout-content > .footer a.help{ display:none; }

/* наша кнопка самопроверки остаётся */
.tk-checkbtn{ display:flex; }

/* аватарка отправителя: круг с инициалами вместо серой заглушки */
#messageheader .contactphoto span,
#message-header .contactphoto span{
  display:flex !important; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:var(--tk-accent); color:#fff;
  font:600 15px/1 inherit;
}
#messageheader .contactphoto img[src*="watermark"],
#message-header .contactphoto img[src*="watermark"]{ display:none; }

/* ============================================================
   53. ПАНЕЛЬ ЯЩИКА, ПОИСК, ФИЛЬТРЫ — ОСТАТОК ИНТЕРФЕЙСА
   ============================================================ */

/* пункты панели ящика — со значками, как в эталоне */
.tk-acc-links button{
  display:flex !important; align-items:center; gap:11px;
  width:100%; padding:10px 16px !important;
  border:0; background:none; cursor:pointer; text-align:left;
  font:400 14px/1.3 inherit; color:var(--tk-text);
}
.tk-acc-links button:hover{ background:var(--tk-hover); }
.tk-acc-links button .tk-i{ color:var(--tk-muted); flex:0 0 auto; }
.tk-acc-links button.dang{ color:var(--tk-danger); }
.tk-acc-links button.dang .tk-i{ color:var(--tk-danger); }

/* список чужих ящиков был бесконечным — ограничиваем и прокручиваем */
.tk-acc-list{
  max-height:280px; overflow-y:auto;
  border-top:1px solid var(--tk-border);
}
.tk-acc-list::-webkit-scrollbar{ width:8px; }
.tk-acc-list::-webkit-scrollbar-thumb{
  background:var(--tk-border-2); border-radius:4px;
}
.tk-acc{ max-height:82vh; overflow:hidden; }

/* поиск: поле и условия читаемыми, без тёмных плашек */
#searchmenu{
  background:var(--tk-surface);
  border:1px solid var(--tk-border);
  border-radius:12px;
  box-shadow:var(--tk-shadow);
  padding:14px 16px;
}
#searchmenu li, #searchmenu label{
  color:var(--tk-text); font-size:14px;
  background:transparent;
}
#searchmenu input[type=text], #searchmenu select{
  border:1px solid var(--tk-border-2);
  border-radius:8px; padding:8px 11px;
  background:var(--tk-surface); color:var(--tk-text);
}
.searchbar input, #rcmqsearchbox{
  border:0; background:transparent;
  font-size:14px; color:var(--tk-text);
}

/* фильтры и автоответчик: формы плагина managesieve */
html.tk-other #filter-form,
html.tk-other #vacation-form,
html.tk-other .propform.filterform{
  background:var(--tk-surface);
  border:1px solid var(--tk-border);
  border-radius:12px;
  padding:20px 24px;
  margin:14px 16px;
}
html.tk-other #filter-form select,
html.tk-other #filter-form input[type=text]{
  min-height:40px; height:auto;
  border:1px solid var(--tk-border-2);
  border-radius:8px; padding:8px 11px;
}
html.tk-other #filterslist li,
html.tk-other #vacationform li{
  padding:9px 14px; font-size:14px;
  color:var(--tk-text);
}

/* тёмная тема для этих же экранов */
html.dark-mode #searchmenu,
html.dark-mode #filter-form,
html.dark-mode #vacation-form{
  background:#232529; border-color:#33363C;
  color:var(--tk-text);
}
html.dark-mode #searchmenu input,
html.dark-mode #searchmenu select,
html.dark-mode #filter-form input,
html.dark-mode #filter-form select{
  background:#1A1B1F; color:var(--tk-text);
  border-color:#33363C;
}
html.dark-mode .tk-acc-list{ border-top-color:#33363C; }

/* ============================================================
   54. ВСЕ ОКНА И ДИАЛОГИ РАЗОМ

   Roundcube показывает диалоги через jQuery UI: создание папки,
   правило фильтра, выбор контакта, свойства, подтверждения.
   Все они шли в исходном виде темы — серые заголовки, квадратные
   углы, кнопки вразнобой. Приводим к общему виду один раз,
   а не по одному окну.
   ============================================================ */

.ui-dialog,
.popupmenu,
.popover,
#rcmKSearchpane{
  background:var(--tk-surface);
  border:1px solid var(--tk-border);
  border-radius:12px;
  box-shadow:var(--tk-shadow);
  overflow:hidden !important;
  color:var(--tk-text);
}

.ui-dialog .ui-dialog-titlebar{
  background:var(--tk-surface);
  border:0;
  border-bottom:1px solid var(--tk-border);
  padding:16px 20px;
  border-radius:0;
}
.ui-dialog .ui-dialog-title{
  font:600 18px/1.3 inherit;
  color:var(--tk-text);
}
.ui-dialog .ui-dialog-titlebar-close{
  width:34px !important; height:34px !important;
  border-radius:8px; border:0;
  background:none; color:var(--tk-muted);
  right:12px; top:50%;
  transform:translateY(-50%);
}
.ui-dialog .ui-dialog-titlebar-close:hover{
  background:var(--tk-hover); color:var(--tk-text);
}

.ui-dialog .ui-dialog-content{
  padding:20px;
  background:var(--tk-surface);
  color:var(--tk-text);
}
.ui-dialog .ui-dialog-buttonpane{
  background:var(--tk-surface);
  border:0;
  border-top:1px solid var(--tk-border);
  padding:14px 20px;
  margin:0;
}

/* кнопки в окнах: основная синяя, прочие спокойные */
.ui-dialog .ui-button,
.ui-dialog button.mainaction,
.popupmenu .mainaction{
  border-radius:9px;
  padding:10px 20px;
  font:400 15px/1.2 inherit;
  border:1px solid var(--tk-border-2);
  background:var(--tk-surface);
  color:var(--tk-text);
  margin-left:8px;
}
.ui-dialog .ui-button.mainaction,
.ui-dialog button.mainaction,
.ui-dialog .ui-button-primary{
  background:var(--tk-accent);
  border-color:var(--tk-accent);
  color:#fff;
  font-weight:600;
}
.ui-dialog .ui-button.mainaction:hover{ background:var(--tk-accent-2); }
.ui-dialog .ui-button:not(.mainaction):hover{ background:var(--tk-hover); }

/* поля внутри окон — те же, что и везде */
.ui-dialog input[type=text],
.ui-dialog input[type=password],
.ui-dialog select,
.ui-dialog textarea{
  min-height:40px; height:auto;
  border:1px solid var(--tk-border-2);
  border-radius:8px;
  padding:9px 12px;
  font-size:14px;
  background:var(--tk-surface);
  color:var(--tk-text);
  box-sizing:border-box;
}
.ui-dialog label,
.ui-dialog td.title{
  color:var(--tk-text-2); font-weight:400;
}

/* подложка под окном */
.ui-widget-overlay{
  background:rgba(44,45,46,.42); opacity:1;
}

/* всплывающие меню темы (выбор папки, вложения, параметры) */
.popupmenu li a,
.popover li a,
.listing.iconized li a{
  padding:9px 14px;
  font-size:14px;
  color:var(--tk-text);
  border-radius:8px;
}
.popupmenu li a:hover,
.popover li a:hover{ background:var(--tk-hover); }

/* полоса сообщений: «Письмо отправлено», «Ошибка» и прочее */
#messagestack div,
.toast{
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  box-shadow:var(--tk-shadow);
  border:0;
}
#messagestack div.confirmation{ background:var(--tk-ok); color:#fff; }
#messagestack div.error{ background:var(--tk-danger); color:#fff; }
#messagestack div.warning{ background:var(--tk-warn); color:#fff; }
#messagestack div.loading{
  background:var(--tk-surface); color:var(--tk-text);
  border:1px solid var(--tk-border);
}

/* окно выбора контактов при написании письма */
#contacts-dialog .listing li a,
#rcmKSearchpane li{
  padding:9px 14px; font-size:14px;
  color:var(--tk-text);
}
#rcmKSearchpane li.selected,
#rcmKSearchpane li:hover{ background:var(--tk-hover); }

/* просмотр служебных заголовков и исходного текста */
#messageheaders, #source-content, .messageheaderbox{
  background:var(--tk-surface);
  color:var(--tk-text);
  font-size:13px; line-height:1.5;
}

/* ---- те же окна в тёмной теме ---- */
html.dark-mode .ui-dialog,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode #rcmKSearchpane{
  background:#232529;
  border-color:#33363C;
  color:var(--tk-text);
}
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-dialog .ui-dialog-content,
html.dark-mode .ui-dialog .ui-dialog-buttonpane{
  background:#232529;
  border-color:#33363C;
  color:var(--tk-text);
}
html.dark-mode .ui-dialog input,
html.dark-mode .ui-dialog select,
html.dark-mode .ui-dialog textarea{
  background:#1A1B1F; color:var(--tk-text);
  border-color:#33363C;
}
html.dark-mode .ui-dialog .ui-button:not(.mainaction){
  background:#1A1B1F; color:var(--tk-text);
  border-color:#33363C;
}
html.dark-mode .popupmenu li a:hover,
html.dark-mode .popover li a:hover{ background:#2E3136; }
html.dark-mode #messagestack div.loading{
  background:#232529; color:var(--tk-text);
  border-color:#33363C;
}
html.dark-mode #messageheaders,
html.dark-mode #source-content{
  background:#1A1B1F; color:var(--tk-text);
}

/* ============================================================
   55. НАШИ СОБСТВЕННЫЕ ОКНА — ЕДИНЫЙ ВИД

   Самопроверка, метки, отсрочка, отписка и полоса отмены
   отправки рисовались каждое по-своему. Сводим к одному виду
   с диалогами Roundcube: та же рамка, тот же радиус, та же тень.
   ============================================================ */
.tk-check,
.tk-acc,
.tk-labelmenu,
.tk-ctx,
.tk-undo{
  border-radius:12px;
  border:1px solid var(--tk-border);
  box-shadow:var(--tk-shadow);
  background:var(--tk-surface);
}

/* заголовки наших окон */
.tk-check-h,
.tk-acc-h{
  padding:15px 18px;
  border-bottom:1px solid var(--tk-border);
  font:600 16px/1.3 inherit;
  color:var(--tk-text);
  display:flex !important; align-items:center; justify-content:space-between;
}
.tk-check-h button{
  width:30px; height:30px; border:0; border-radius:8px;
  background:none; color:var(--tk-muted); cursor:pointer;
  font-size:16px; line-height:1;
}
.tk-check-h button:hover{ background:var(--tk-hover); color:var(--tk-text); }

/* полоса отмены отправки — как всплывающее сообщение, а не панель */
.tk-undo{
  position:fixed !important; left:50% !important;
  bottom:26px; top:auto;
  transform:translateX(-50%);
  display:none; align-items:center; gap:14px;
  padding:13px 18px;
  z-index:2147483001 !important;
  min-width:340px;
}
.tk-undo.show{ display:flex; }
.tk-undo-n{
  width:30px; height:30px; flex:0 0 30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--tk-accent); color:#fff;
  font:600 14px/1 inherit;
}
.tk-undo-t{ flex:1 1 auto; color:var(--tk-text); font-size:14px; }
.tk-undo button{
  border:1px solid var(--tk-border-2); background:var(--tk-surface);
  color:var(--tk-accent-2); border-radius:8px;
  padding:8px 16px; font:600 14px/1.2 inherit; cursor:pointer;
}
.tk-undo button:hover{ background:var(--tk-hover); }

/* полоса отписки от рассылки */
.tk-unsub{
  background:#FFF7E6;
  border:1px solid #F0D9A8;
  border-radius:10px;
  padding:11px 16px;
  margin:12px 20px;
  display:flex !important; align-items:center; gap:14px;
  font-size:14px; color:var(--tk-text);
}
.tk-unsub button{
  margin-left:auto;
  background:var(--tk-accent); color:#fff;
  border:0; border-radius:8px;
  padding:8px 16px; font:600 14px/1.2 inherit;
  cursor:pointer;
}

html.dark-mode .tk-unsub{
  background:#2A2519; border-color:#4A3F22;
  color:var(--tk-text);
}
html.dark-mode .tk-undo{
  background:#232529; border-color:#33363C;
}
html.dark-mode .tk-undo button{
  background:#1A1B1F; border-color:#33363C;
  color:var(--tk-accent);
}
html.dark-mode .tk-check-h,
html.dark-mode .tk-acc-h{
  border-bottom-color:#33363C; color:var(--tk-text);
}

/* ============================================================
   56. ОСТАВШИЕСЯ ЭКРАНЫ — ФИНАЛЬНЫЙ ПРОХОД

   Всё, до чего не доходили руки: низ списка, пустая папка,
   результаты поиска, ожидание, контакты, разделы настроек.
   ============================================================ */

/* ---- 56.1 Низ списка: страницы ----
   Тема рисует их вразнобой; в эталоне это спокойная строка
   по центру с цифрой текущей страницы. */
#messagelist + .footer,
#layout-list > .footer,
.pagenav{
  background:var(--tk-surface);
  border-top:1px solid var(--tk-border);
  padding:8px 14px;
  min-height:46px;
}
.pagenav a.button,
#layout-list > .footer a.button{
  border:0; background:none;
  color:var(--tk-muted);
  width:34px !important; height:34px !important;
  border-radius:8px;
}
.pagenav a.button:hover{ background:var(--tk-hover); color:var(--tk-text); }
.pagenav a.button.disabled{ opacity:.35; }
.pagenav .pagenav-text,
#layout-list > .footer .count{
  color:var(--tk-muted); font-size:13px;
}
#rcmcountdisplay, .pagenav input{
  border:1px solid var(--tk-border-2);
  border-radius:7px;
  min-width:44px; text-align:center;
  color:var(--tk-text);
  background:var(--tk-surface);
}

/* ---- 56.2 Пустая папка ----
   Тема показывает сухую строку у левого края. Ставим по центру
   и добавляем воздуха, чтобы не выглядело поломкой. */
#messagelist tbody tr.nomessages td,
.watermark,
#messagelist td.nomessages{
  text-align:center;
  color:var(--tk-muted);
  padding:60px 20px;
  font-size:15px;
  background:var(--tk-surface);
}

/* ---- 56.3 Ожидание ----
   Полоса «Загрузка…» перекрывала список тёмным прямоугольником. */
#messagestack div.loading,
.ui-dialog .loading{
  background:var(--tk-surface);
  color:var(--tk-text);
  border:1px solid var(--tk-border);
}
#messagelist.loading tbody{ opacity:.55; transition:opacity .15s; }

/* ---- 56.4 Результаты поиска ----
   В эталоне сверху видно, что показан поиск, и есть выход из него. */
.searchbar.active,
#layout-list.search-active > .header{
  background:var(--tk-surface2);
}
a.button.reset,
#searchreset,
.searchbar a.reset{
  color:var(--tk-muted); border-radius:8px;
}
a.button.reset:hover{ background:var(--tk-hover); color:var(--tk-text); }

/* ---- 56.5 Контакты ----
   Список слева, карточка справа — как в эталоне. */
html.tk-other #directorylist,
html.tk-other #contacts-table{
  background:var(--tk-surface);
}
html.tk-other #directorylist li a{
  display:flex !important; align-items:center; gap:10px;
  border-radius:8px; margin:2px 6px;
}
html.tk-other #directorylist li.selected > a,
html.tk-other #contacts-table tr.selected td{
  background:var(--tk-sel); color:var(--tk-text);
}
html.tk-other #contacts-table tr td{
  border-bottom:1px solid var(--tk-border);
  padding:10px 14px;
}
html.tk-other #contacts-table tr:hover td{ background:var(--tk-hover); }

/* карточка контакта */
html.tk-other #contacthead{
  border-bottom:1px solid var(--tk-border);
  display:flex !important; align-items:center; gap:16px;
}
html.tk-other #contacthead .contactphoto{
  width:64px !important; height:64px !important; flex:0 0 64px !important;
  border-radius:50%; overflow:hidden;
  background:var(--tk-surface2);
}
html.tk-other #contacthead .names{ display:flex; flex-direction:column; gap:3px; }
html.tk-other #contacthead .namefield{
  font:600 20px/1.25 inherit; color:var(--tk-text);
}
html.tk-other #contacthead .jobtitle,
html.tk-other #contacthead .organization{
  color:var(--tk-muted); font-size:14px;
}
html.tk-other .contactfieldgroup{
  border:1px solid var(--tk-border);
  border-radius:10px;
  padding:14px 18px;
  margin:12px 16px;
  background:var(--tk-surface);
}
html.tk-other .contactfieldgroup legend{
  font:600 15px/1.3 inherit; padding:0 0 8px;
}

/* ---- 56.6 Разделы настроек: переключатели ----
   В эталоне это тумблеры с подписью слева и пояснением снизу. */
html.tk-other .propform .proplist li,
html.tk-other .form-check{
  display:flex !important; align-items:center; gap:12px;
  padding:9px 0;
}
html.tk-other .custom-switch .custom-control-label::before,
html.tk-other .form-check-input{
  width:38px !important; height:22px !important;
  border-radius:11px;
  border:0;
  background:var(--tk-border-2);
}
html.tk-other .custom-control-input:checked ~ .custom-control-label::before{
  background:var(--tk-accent);
}
html.tk-other .propform .hint,
html.tk-other .form-text{
  display:block; color:var(--tk-muted) !important;
  font-size:13px; margin-top:4px;
}

/* ---- 56.7 Фильтры: список правил ---- */
html.tk-other #filterslist li a,
html.tk-other #filtersetslist li a{
  display:flex !important; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  margin:2px 6px;
}
html.tk-other #filterslist li.selected > a{
  background:var(--tk-sel);
}
html.tk-other #filterslist li.disabled a{ opacity:.5; }

/* ---- 56.8 те же экраны в тёмной теме ---- */
html.dark-mode #messagelist + .footer,
html.dark-mode #layout-list > .footer,
html.dark-mode .pagenav{
  background:#1A1B1F; border-top-color:#33363C;
}
html.dark-mode #rcmcountdisplay,
html.dark-mode .pagenav input{
  background:#232529; color:var(--tk-text);
  border-color:#33363C;
}
html.dark-mode #directorylist,
html.dark-mode #contacts-table,
html.dark-mode #contacthead,
html.dark-mode .contactfieldgroup,
html.dark-mode #filterslist li a{
  background:#1A1B1F; color:var(--tk-text);
  border-color:#33363C;
}
html.dark-mode #contacts-table tr td{ border-bottom-color:#2A2C31; }
html.dark-mode #messagelist tbody tr.nomessages td,
html.dark-mode .watermark{
  background:#1A1B1F; color:var(--tk-muted);
}

/* ============================================================
   57. ВХОД: ДВА УПРЯМЫХ МЕСТА

   1. «Запомнить меня» — квадратик вплотную к подписи.
      Виновато моё же правило html.tk-login label{display:block}.
      Оно специфичнее (.tk-remember — один класс, у того ещё
      и элемент), поэтому перебивало display:flex вместе с gap.
      Лечится тем, что делаем селектор специфичнее правила-обидчика.

   2. Карточка не по центру. Центрирование через родителя зависит
      от того, какие display и flex-direction поставит тема, а она
      их меняет. Ставим карточку по центру ЭКРАНА напрямую —
      это не зависит ни от одного родителя.
   ============================================================ */

html.tk-login label.tk-remember,
html.tk-login .tk-remember{
  display:flex !important;
  align-items:center;
  gap:12px;
  width:100% !important;
  margin:2px 0 20px;
  padding:0;
  text-align:left;
  cursor:pointer;
}
html.tk-login label.tk-remember span,
html.tk-login .tk-remember span{
  color:var(--tk-text);
  font-size:14px;
  margin:0;
  padding:0;
}
html.tk-login label.tk-remember input,
html.tk-login .tk-remember input{
  margin:0;
  flex:0 0 18px !important;
}

/* Карточка по центру экрана — без оглядки на родителей */
@media (min-height:420px){
  html.tk-login #login-form,
  html.tk-login form[name=form]{
    position:fixed !important;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    margin:0;
    max-height:88vh;
    overflow-y:auto;
  }
}

/* Родителям запрещаем растягивать и сдвигать: карточка уже
   позиционирована сама, любые их отступы только мешают. */
html.tk-login #layout,
html.tk-login #layout-content,
html.tk-login .content{
  min-height:0;
  height:auto !important;
  padding:0;
  margin:0;
  display:block !important;
}

/* Квадратик просел ниже подписи: у него своя высота 18px, а строка
   текста выше, и по нижнему краю они не сходились. Выравниваем оба
   по центру строки и убираем сдвиг, который тема даёт полям ввода. */
html.tk-login label.tk-remember,
html.tk-login .tk-remember{
  align-items:center;
  line-height:1.25;
}
html.tk-login label.tk-remember input,
html.tk-login .tk-remember input{
  align-self:center;
  vertical-align:middle;
  position:relative !important;
  top:0;
  transform:none;
}
html.tk-login label.tk-remember span,
html.tk-login .tk-remember span{
  align-self:center;
  line-height:1.25;
  display:inline-block !important;
}

/* ============================================================
   58. КВАДРАТИК ПОЯВЛЯЕТСЯ ТОЛЬКО НА САМОМ КРУГЕ

   Было: правило висело на СТРОКЕ (tr:hover), и квадратик
   проступал, стоило навести курсор на любое место письма.
   В эталоне он появляется, только когда курсор на круге —
   иначе строка «мигает» при каждом движении мыши.
   ============================================================ */

/* отменяем прежнее поведение по всей строке */
#messagelist tbody tr:hover span.tk-av .tk-av-box{ opacity:0; }
#messagelist tbody tr:hover span.tk-av .tk-av-i{ opacity:1; }
#messagelist tbody tr:hover span.tk-av img{ opacity:1; }

/* и включаем только на самом круге */
#messagelist span.tk-av:hover .tk-av-box{ opacity:1; }
#messagelist span.tk-av:hover .tk-av-i{ opacity:0; }
#messagelist span.tk-av:hover img{ opacity:0; }

/* отмеченное письмо держит квадратик всегда — это состояние,
   а не наведение */
#messagelist tbody tr.tk-picked span.tk-av .tk-av-box{ opacity:1; }
#messagelist tbody tr.tk-picked span.tk-av .tk-av-i,
#messagelist tbody tr.tk-picked span.tk-av img{ opacity:0; }

/* круг под курсором слегка подсвечиваем — понятно, что он нажимается */
#messagelist span.tk-av{ transition:box-shadow .12s; }
#messagelist span.tk-av:hover{
  box-shadow:0 0 0 2px rgba(var(--tk-accent-rgb),.35);
}

/* ============================================================
   59. ОКНО НАПИСАНИЯ: ПОДПИСИ КНОПОК ОБРЕЗАЛИСЬ

   На снимке видно «Сохран», «Вложит», «Подпи», «Ответь» —
   тема режет подписи по ширине. В эталоне они целые.
   ============================================================ */
html.tk-inmodal #messagetoolbar a,
html.tk-inmodal #messagetoolbar button{
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  white-space:nowrap;
  flex:0 0 auto !important;
}
html.tk-inmodal #messagetoolbar a .inner,
html.tk-inmodal #messagetoolbar button .inner,
html.tk-inmodal #messagetoolbar a span{
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip;
  white-space:nowrap;
}

/* сама строка переносится, если кнопки не помещаются */
html.tk-inmodal #messagetoolbar.toolbar{
  flex-wrap:wrap !important;
  justify-content:flex-start;
  gap:4px;
}

/* «Метка» стояла ниже прочих: у неё нет значка, и подпись
   выравнивалась по другому краю */
html.tk-inmodal #messagetoolbar a.button{
  align-items:center;
  min-height:38px;
}

/* вторая кнопка справки внизу — она тут вообще ни к чему */
html.tk-inmodal .floating-action-buttons,
html.tk-inmodal a.button.help{ display:none; }

/* ============================================================
   60. ПАНЕЛЬ ОФОРМЛЕНИЯ В ОКНЕ ПИСЬМА

   На снимке было «✕ ↶ ↷ 🔗 🖼 Абзац» — и это не бедный набор,
   а СВЁРНУТЫЙ. У редактора включён режим выдвижного ящика
   (toolbar_drawer: sliding): когда кнопки не помещаются по
   ширине, он прячет их за многоточие. В окне поверх списка
   ширины не хватает, и панель схлопывалась почти целиком.

   Заставляем её переноситься на вторую строку вместо сворачивания —
   тогда видно всё: Ж, К, Ч, выравнивание, шрифт, размер, цвет.
   ============================================================ */
html.tk-inmodal .tox .tox-toolbar,
html.tk-inmodal .tox .tox-toolbar__primary,
html.tk-inmodal .tox .tox-toolbar-overlord{
  flex-wrap:wrap !important;
  height:auto !important;
  max-height:none;
  overflow:visible !important;
  background:var(--tk-surface2);
  border-bottom:1px solid var(--tk-border);
  padding:4px 6px;
}

/* кнопка «ещё» больше не нужна: всё и так видно */
html.tk-inmodal .tox .tox-tbtn--select[aria-label*="More"],
html.tk-inmodal .tox .tox-toolbar__overflow-button,
html.tk-inmodal .tox-toolbar__overflow{
  display:none !important;
}

/* сами кнопки: спокойные, с подсветкой при наведении */
html.tk-inmodal .tox .tox-tbtn{
  height:32px !important; margin:2px 1px !important;
  border-radius:7px;
  color:var(--tk-text);
}
html.tk-inmodal .tox .tox-tbtn:hover{ background:var(--tk-hover); }
html.tk-inmodal .tox .tox-tbtn--enabled{
  background:rgba(var(--tk-accent-rgb),.16);
  color:var(--tk-accent-2);
}
html.tk-inmodal .tox .tox-tbtn svg{ fill:var(--tk-text); }

/* выпадающие: шрифт, размер, стиль абзаца */
html.tk-inmodal .tox .tox-tbtn--select{
  padding:0 8px; min-width:auto;
}
html.tk-inmodal .tox .tox-tbtn__select-label{
  font-size:13px; color:var(--tk-text);
}

/* разделители между группами — как в эталоне */
html.tk-inmodal .tox .tox-toolbar__group{
  padding:0 4px;
  border-right:1px solid var(--tk-border);
}
html.tk-inmodal .tox .tox-toolbar__group:last-child{ border-right:0; }

/* поле ввода письма */
html.tk-inmodal .tox .tox-edit-area,
html.tk-inmodal .tox-edit-area__iframe{
  background:var(--tk-surface);
}
html.tk-inmodal .tox.tox-tinymce{
  border:1px solid var(--tk-border);
  border-radius:9px;
  overflow:hidden !important;
}

/* выпадающие списки редактора поверх окна письма */
.tox .tox-menu, .tox-collection{
  background:var(--tk-surface);
  border:1px solid var(--tk-border);
  border-radius:10px;
  box-shadow:var(--tk-shadow);
  z-index:2147483002 !important;
}
.tox .tox-collection__item{ color:var(--tk-text); }
.tox .tox-collection__item--active{ background:var(--tk-hover); }

html.dark-mode.tk-inmodal .tox .tox-toolbar,
html.dark-mode .tox .tox-menu{
  background:#232529; border-color:#33363C;
}
html.dark-mode .tox .tox-tbtn{ color:var(--tk-text); }
html.dark-mode .tox .tox-tbtn svg{ fill:var(--tk-text); }

/* строка вложений под темой — как в эталоне */
.tk-attrow{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 0 10px;
}
.tk-att{
  display:flex; align-items:center; gap:8px;
  border:0; background:none; cursor:pointer;
  padding:8px 12px; border-radius:8px;
  font:400 14px/1.3 inherit; color:var(--tk-text);
  white-space:nowrap;
}
.tk-att:hover{ background:var(--tk-hover); }
.tk-att .tk-i{ color:var(--tk-muted); }
.tk-att:hover .tk-i{ color:var(--tk-accent-2); }

/* «Копия» и «Скрытая» справа от темы */
.tk-cc{ display:inline-flex; gap:14px; margin-left:12px; float:right; }
.tk-cc button{
  border:0; background:none; cursor:pointer; padding:0;
  font:400 14px/1.3 inherit; color:var(--tk-accent-2);
}
.tk-cc button:hover{ text-decoration:underline; }
.tk-cc button.on{ color:var(--tk-muted); text-decoration:none; cursor:default; }

html.dark-mode .tk-att{ color:var(--tk-text); }

/* ============================================================
   61. НАСТРОЙКИ ПО ЭТАЛОНУ (кадр 11)

   Устройство эталона: слева меню без рамок, справа белая
   карточка со скруглением. Внутри — крупный заголовок раздела,
   подзаголовки групп, а каждая настройка отдельной строкой:
   значок слева, название, под ним пояснение серым, стрелка справа.

   У нас была таблица «подпись — поле», что на такое не похоже
   совсем.
   ============================================================ */

/* левое меню: без рамок и разделителей, как в эталоне */
html.tk-other #layout-sidebar{
  background:var(--tk-page);
  border-right:0;
}
html.tk-other #settings-menu li,
html.tk-other #layout-sidebar .listing li{ border:0; }
html.tk-other #settings-menu li a,
html.tk-other #layout-sidebar .listing li a{
  border-radius:9px;
  margin:2px 10px;
  padding:10px 14px;
  font-size:14.5px;
  color:var(--tk-text);
}
html.tk-other #settings-menu li.selected a,
html.tk-other #layout-sidebar .listing li.selected a{
  background:var(--tk-sel);
  font-weight:500;
}

/* содержимое — одна белая карточка с воздухом */
html.tk-other #layout-content > .scroller{
  background:var(--tk-page);
  padding:18px;
}
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .contentbox,
html.tk-other .uibox{
  border-radius:14px;
  padding:28px 34px;
  margin:0 auto 18px;
  max-width:960px !important;
  border:0;
  box-shadow:0 1px 3px rgba(20,40,70,.07);
}

/* заголовок раздела — крупный, как в эталоне */
html.tk-other #layout-content > .header .header-title{
  font:600 26px/1.25 inherit;
  color:var(--tk-text);
}
html.tk-other #layout-content > .header{
  padding:20px 34px 6px;
  border-bottom:0;
  background:var(--tk-page);
}

/* подзаголовки групп внутри карточки */
html.tk-other legend,
html.tk-other .boxtitle,
html.tk-other h2.boxtitle,
html.tk-other fieldset > legend{
  font:600 19px/1.3 inherit;
  color:var(--tk-text);
  padding:0 0 4px;
  margin:6px 0 14px;
  border:0;
  background:none;
  width:100%;
}

/* строка настройки: название, пояснение снизу, поле справа */
html.tk-other .propform td.title,
html.tk-other .propform th.title{
  width:52% !important; max-width:none !important;
  padding:14px 22px 14px 0;
  font-size:15px;
  color:var(--tk-text);
  font-weight:400;
  vertical-align:middle;
  line-height:1.4;
}
html.tk-other .propform td{
  padding:14px 0;
  border-bottom:1px solid var(--tk-border);
  vertical-align:middle;
}
html.tk-other .propform tr:last-child td{ border-bottom:0; }

/* пояснение серым под названием — как в эталоне */
html.tk-other .propform td.title .hint,
html.tk-other .propform .hint,
html.tk-other .form-text,
html.tk-other td.title small{
  display:block !important;
  color:var(--tk-muted);
  font-size:13px;
  font-weight:400;
  margin-top:4px;
  line-height:1.4;
}

/* поля справа, ровной колонкой */
html.tk-other .propform td input[type=text],
html.tk-other .propform td input[type=password],
html.tk-other .propform td select,
html.tk-other .propform td textarea{
  width:100% !important; max-width:340px !important;
  margin-left:auto;
  display:block !important;
}

/* кнопка сохранения — как основная в эталоне */
html.tk-other .formbuttons{
  max-width:960px !important;
  margin:0 auto;
  background:transparent;
  border:0;
  padding:6px 0 22px;
}
html.tk-other .formbuttons button,
html.tk-other button.save{
  padding:12px 30px;
  border-radius:10px;
  font-size:15px;
}

html.dark-mode.tk-other #layout-content > .scroller,
html.dark-mode.tk-other #layout-content > .header{
  background:#141518;
}
html.dark-mode.tk-other .formcontent,
html.dark-mode.tk-other fieldset.propform{
  background:#1A1B1F; box-shadow:none;
}
html.dark-mode.tk-other .propform td{ border-bottom-color:#2A2C31; }

/* ============================================================
   62. ШАПКА ПИСЬМА ПО ЭТАЛОНУ (кадр 04)

   В эталоне: тема крупно, под ней строка отправителя —
   круглая аватарка, имя жирным, дата серым, «Кому: вам».
   Справа значки: закладка, архив, печать, три точки.
   ============================================================ */
.tk-hdr-icons{
  display:flex; align-items:center; gap:2px;
  margin-left:auto; flex:0 0 auto;
}
.tk-hi{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:8px;
  color:var(--tk-muted); cursor:pointer; padding:0;
}
.tk-hi:hover{ background:var(--tk-hover); color:var(--tk-accent-2); }

/* строка отправителя раскладывается в линию, значки уходят вправо */
html.tk-reading #messageheader .header-links,
html.tk-msg-mode #messageheader .header-links,
html.tk-reading #message-header .header-summary,
html.tk-msg-mode #message-header .header-summary{
  display:flex !important;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* «Кому: вам» отдельной строкой под именем — как в эталоне */
html.tk-reading #messageheader .header-headers,
html.tk-msg-mode #messageheader .header-headers{
  font-size:13.5px;
  color:var(--tk-muted);
  width:100%;
  margin-top:2px;
}

/* нижняя полоса прижата к низу и на всю ширину, как в эталоне */
.tk-msgfoot{
  background:var(--tk-surface2);
  border-top:1px solid var(--tk-border);
  padding:12px 24px;
}
.tk-mf{
  border:1px solid var(--tk-border-2);
  background:var(--tk-surface);
  border-radius:9px;
  padding:9px 16px;
}
.tk-mf:hover{ background:var(--tk-hover); }

html.dark-mode .tk-hi:hover{ background:#2E3136; }
html.dark-mode .tk-mf{
  background:#1A1B1F; border-color:#33363C;
}

/* ============================================================
   63. ФИЛЬТРЫ ПО ЭТАЛОНУ (кадры 14–15)

   В эталоне: страница «Правила фильтрации» с синей кнопкой
   «Добавить фильтр», а само создание — белым окном поверх,
   с крупным заголовком, рядами условий и синей «Сохранить».
   ============================================================ */

/* заголовок страницы фильтров */
html.tk-other #filter-form,
html.tk-other #filtersetslist,
html.tk-other #filterslist{
  background:var(--tk-surface);
}

/* кнопка «Добавить фильтр» — основная, синяя */
html.tk-other a.button.create,
html.tk-other [data-command="plugin.managesieve-add"],
html.tk-other a.create.button{
  background:var(--tk-accent);
  color:#fff;
  border:0;
  border-radius:9px;
  padding:11px 22px;
  font-weight:500;
}
html.tk-other a.button.create:hover{ background:var(--tk-accent-2); }

/* окно создания фильтра */
.ui-dialog[aria-describedby*="filter"] .ui-dialog-content,
#filter-form-dialog,
.ui-dialog .propform.filterform{
  padding:24px 28px;
}
.ui-dialog .ui-dialog-title{ font-size:22px; }

/* «Если выполнено условие» — подзаголовок внутри окна */
.ui-dialog fieldset legend,
#filter-form legend{
  font:600 17px/1.3 inherit;
  color:var(--tk-text);
  padding:0 0 12px;
  border:0;
}

/* ряд условия: поле, сравнение, значение, крестик */
#filter-form .rule,
.ui-dialog .rule,
#filter-form .actionrow{
  display:flex !important;
  align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0;
}
#filter-form .rule select,
.ui-dialog .rule select,
#filter-form .rule input[type=text]{
  min-height:42px; height:auto;
  border-radius:9px;
  border:1px solid var(--tk-border-2);
  padding:9px 12px;
  font-size:14px;
}
#filter-form .rule a.button.del,
.ui-dialog .rule a.del{
  width:34px; height:34px; border-radius:8px;
  color:var(--tk-muted);
}

/* «Добавить условие» — ссылка, а не кнопка */
#filter-form a.add,
.ui-dialog a.add{
  color:var(--tk-accent-2);
  font-size:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 0;
  background:none; border:0;
}

/* ============================================================
   64. ЧИП КАТЕГОРИИ СПРАВА ОТ ТЕМЫ (кадр 04)
   ============================================================ */
html.tk-reading #messageheader .tk-labels,
html.tk-msg-mode #messageheader .tk-labels{
  margin-left:auto; flex:0 0 auto;
}
html.tk-reading #messageheader .tk-chip,
html.tk-msg-mode #messageheader .tk-chip{
  border:1px solid var(--tk-border-2);
  border-radius:16px;
  padding:5px 12px;
  font-size:13px;
  background:var(--tk-surface);
}

/* ============================================================
   65. ЦЕПОЧКА ПЕРЕПИСКИ ПОД ПИСЬМОМ (кадр 09)
   ============================================================ */
html.tk-reading #messagelist.threads tr,
html.tk-msg-mode .message-thread > div{
  display:flex !important; align-items:center; gap:12px;
  padding:11px 24px;
  border-bottom:1px solid var(--tk-border);
  cursor:pointer;
}
html.tk-reading #messagelist.threads tr:hover{ background:var(--tk-hover); }
html.tk-reading #messagelist.threads .subject{
  color:var(--tk-muted); font-size:14px;
}

/* ============================================================
   66. ПОДРАГИВАНИЕ ПРИ ПЕРЕХОДЕ

   Панели строит скрипт: сначала браузер рисует страницу в виде
   темы, потом мы её перестраиваем — отсюда рывок на глазах.

   Прячем то, что будет перестроено, до готовности. Класс
   tk-ready ставит скрипт, когда всё на месте. Если скрипт
   почему-то не отработает, через полсекунды всё покажется
   само — почта не должна остаться пустой из-за оформления.
   ============================================================ */
html.tk-early:not(.tk-ready) #layout-sidebar,
html.tk-early:not(.tk-ready) #layout-list > .header,
html.tk-early:not(.tk-ready) #messagelist{
  opacity:0;
}
html.tk-ready #layout-sidebar,
html.tk-ready #layout-list > .header,
html.tk-ready #messagelist{
  opacity:1;
  transition:opacity .12s ease-out;
}

/* страховка: показываем через 0.6 сек, даже если скрипт молчит */
@keyframes tkShowAnyway{ to{ opacity:1; } }
html.tk-early:not(.tk-ready) #layout-sidebar,
html.tk-early:not(.tk-ready) #messagelist{
  animation:tkShowAnyway .1s ease-out .6s forwards;
}

/* полосы прокрутки не должны прыгать при смене страниц */
html.tk-early{ scrollbar-gutter:stable; }

/* кнопки-значки в панели над списком: обновить и плотность */
.tk-lb-icon{
  padding:8px;
  min-width:36px;
  justify-content:center;
}
.tk-lb-icon .tk-i{ color:var(--tk-muted); }
.tk-lb-icon:hover .tk-i{ color:var(--tk-accent-2); }

/* плотный список: строки ниже, отступы меньше */
html.tk-compact #messagelist tbody tr > td{ padding-top:5px; padding-bottom:5px; }
html.tk-compact #messagelist span.tk-av{ width:24px; height:24px; }
html.tk-compact #messagelist .tk-snip{ display:none; }

/* ============================================================
   67. ЧТО ВИДНО НА ЖИВЫХ СНИМКАХ

   Разбор по кадрам с рабочего места, а не по догадкам.
   ============================================================ */

/* ---- 67.1 Подписи в панели окна письма всё ещё резались ----
   «Сохран», «Вложит», «Подпи», «Ответь». Прежнее правило целилось
   в .inner, а тема режет текст на самой ссылке — там и стоит
   ограничение ширины с многоточием. */
html.tk-inmodal #messagetoolbar a.button,
html.tk-inmodal #messagetoolbar a.button *,
html.tk-inmodal #messagetoolbar button,
html.tk-inmodal #messagetoolbar button *{
  max-width:none !important;
  width:auto !important;
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip;
  white-space:nowrap;
  text-indent:0;
}
/* «Метка» шла без значка и потому висела ниже прочих */
html.tk-inmodal #messagetoolbar a.button{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:7px;
  height:auto !important;
  min-height:36px;
  padding:6px 11px;
}

/* ---- 67.2 Папки: тумблеры уезжали к дальнему краю экрана ----
   Список занимал всю ширину монитора, и переключатель оказывался
   в двух тысячах пикселей от названия папки. */
html.tk-other #folders-table,
html.tk-other #subscription-table{
  max-width:820px !important;
  margin:0 auto;
}
html.tk-other #folders-table td,
html.tk-other #subscription-table td{
  padding:11px 14px;
  border-bottom:1px solid var(--tk-border);
}
html.tk-other #folders-table tr:hover td{ background:var(--tk-hover); }
html.tk-other #subscription-table td.subscription{
  width:60px !important; text-align:right !important;
}

/* ---- 67.3 Фильтры: набор и правила ----
   Имена «#1 #2 #3» приходят из самого правила sieve — переименовать
   их можно только там. Но выглядеть они должны как список, а не
   как строки без полей. */
html.tk-other #filterslist,
html.tk-other #filtersetslist{
  max-width:820px !important;
  margin:0 auto;
  padding:8px 0;
}
html.tk-other #filterslist li{
  border-bottom:1px solid var(--tk-border);
}
html.tk-other #filterslist li:last-child{ border-bottom:0; }

/* «Действия» в шапке — подпись обрезалась так же, как в письме */
html.tk-other #layout-content > .header a.button,
html.tk-other #layout-content > .header a.button *{
  max-width:none !important; width:auto !important;
  overflow:visible !important; text-overflow:clip !important;
  white-space:nowrap;
}

/* ---- 67.4 Полоса отписки: длинный адрес не должен ломать строку ---- */
.tk-unsub-t{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:calc(100% - 160px);
}

/* ============================================================
   68. НИЧЕГО НЕ РЕЖЕТСЯ — ОДНО ПРАВИЛО НА ВСЁ

   Тема elastic режет подписи кнопок ВЕЗДЕ: она задаёт им узкую
   ширину и многоточие. Я чинил это по одному месту — в письме,
   в фильтрах, в настройках, — и каждый раз находилось новое.

   Причина одна, значит и правило должно быть одно. Снимаем
   ограничения ширины со всех подписей интерфейса разом.
   ============================================================ */

.toolbar a.button,
.toolbar a.button *,
.toolbar button,
.toolbar button *,
#layout-content > .header a.button,
#layout-content > .header a.button *,
#layout-list > .header a.button,
#layout-list > .header a.button *,
#layout-sidebar .header a.button,
.header a.button .inner,
.formbuttons button,
.formbuttons button *,
.ui-dialog .ui-button,
.ui-dialog .ui-button *,
.popupmenu li a,
.popupmenu li a *{
  max-width:none !important;
  min-width:0 !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip;
  white-space:nowrap;
  text-indent:0;
}

/* Подписи темы идут отдельным слоем .inner — у него своя ширина */
.header .inner,
.toolbar .inner,
a.button > .inner,
button > .inner{
  display:inline !important;
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip;
  font-size:inherit;
}

/* Панели, где кнопки не помещаются, переносят их, а не режут */
.toolbar,
#layout-content > .header,
#layout-list > .header{
  flex-wrap:wrap !important;
  height:auto !important;
  min-height:auto;
  overflow:visible !important;
}

/* ============================================================
   69. ШИРИНА СОДЕРЖИМОГО

   Здесь стояло: с 1500 точек список писем ужимать до 1600 и
   ставить по центру. Написано было со ссылкой на эталон — и это
   оказалось неверно. Кадр mail.ru шириной 1685 (эталон/115820.png)
   показывает обратное: список идёт от панки папок до самого
   правого края, дата у края, полей по бокам нет.

   Отсечка давала пустые поля слева и справа — заказчик показал их
   на снимке со своего монитора 1920. Плюс она разрывала раскладку:
   до 1499 точек список во всю ширину, с 1500 — резко уже.

   Список растягивается. Строку удерживают от бесконечного роста
   колонки отправителя и даты: они тоже растут вместе с окном
   (clamp в разделе 100), поэтому теме достаётся не весь избыток.

   Формы настроек — другое дело: строка ввода в полтора метра
   бессмысленна, им предел оставлен.
   ============================================================ */
@media (min-width:1500px){
  html.tk-other #layout-content > .scroller > *,
  html.tk-other #layout-list > .scroller > *{
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Ничего не должно съезжать за край: всё, что шире места,
   переносится или сжимается, но не вылезает. */
#layout, #layout-list, #layout-content, #layout-sidebar{
  min-width:0 !important;
  overflow-x:hidden !important;
}
#messagelist td,
.propform td,
#folders-table td{
  min-width:0 !important;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Длинные имена и адреса обрезаются многоточием ТОЛЬКО там,
   где это осмысленно: отправитель и тема письма. В кнопках
   и подписях — никогда. */
#messagelist td.fromto span,
#messagelist td.subject span.subject{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

/* ============================================================
   70. ЦВЕТА РОВНО ПО ЭТАЛОНУ

   Значения сняты пипеткой с кадров 02 и 11, а не подобраны:
     панель папок  #F6F7F8
     список писем  #FFFFFF   (не серый — именно белый)
     под курсором  #EBECEF
     разделители   #EBECEF
     страница настроек #FFFFFF, меню слева #F6F7F8

   Раньше у нас список был слегка серым, а разделители темнее
   эталонных — отсюда ощущение «не такой».
   ============================================================ */
:root{
  --tk-surface:#FFFFFF;      /* список писем и карточки — белые */
  --tk-page:#F6F7F8;         /* панель папок и фон страниц */
  --tk-hover:#EBECEF;        /* строка под курсором */
  --tk-sel:#EBECEF;          /* выбранная строка */
  --tk-border:#EBECEF;       /* разделители строк */
}

/* список писем на белом, как в эталоне */
#layout-list,
#messagelist,
#messagelist tbody tr,
#messagelist tbody tr > td{
  background-color:#FFFFFF;
}
#messagelist tbody tr{
  border-bottom:1px solid #EBECEF;
}
#messagelist tbody tr:hover,
#messagelist tbody tr:hover > td{
  background-color:#EBECEF;
}

/* панель папок и фон страниц */
#layout-sidebar{ background-color:#F6F7F8; }
html.tk-other #layout-content > .scroller,
html.tk-other #layout-content > .header{ background-color:#FFFFFF; }
html.tk-other #layout-sidebar{ background-color:#F6F7F8; }

/* карточка настроек на белом — без своей заливки и тени,
   в эталоне она не выделяется фоном, только полями */
html.tk-other .formcontent,
html.tk-other fieldset.propform,
html.tk-other .contentbox{
  background-color:#FFFFFF;
  box-shadow:none;
  border:0;
}

/* выбранная папка и пункт меню */
#folderlist li.selected > a,
html.tk-other #settings-menu li.selected a{
  background-color:#EBECEF;
  color:#2C2D2E;
}

/* ============================================================
   71. КВАДРАТИК ПРИ НАВЕДЕНИИ НА КРУГ

   Не появлялся вовсе — только при выделении. Виновато моё же
   правило: «наведение на СТРОКУ прячет квадратик» оказалось
   специфичнее, чем «наведение на КРУГ показывает». А строка
   под курсором всегда, когда курсор на круге, — значит пряталка
   выигрывала каждый раз.

   Лечится тем, что делаем показ не менее специфичным.
   ============================================================ */
#messagelist tbody tr span.tk-av:hover .tk-av-box{
  opacity:1;
}
#messagelist tbody tr span.tk-av:hover .tk-av-i,
#messagelist tbody tr span.tk-av:hover img{
  opacity:0;
}

/* ============================================================
   72. ПЕРЕСЫЛКА ПИСЕМ

   Кнопка «Добавить пересылку» рядом с «Добавить фильтр» и окно
   с полем адреса — по образцу эталона.
   ============================================================ */
.tk-fwd-btn{
  border:1px solid var(--tk-border-2);
  background:var(--tk-surface);
  color:var(--tk-text);
  border-radius:9px;
  padding:11px 20px;
  margin-left:10px;
  font:400 15px/1.2 inherit;
  cursor:pointer;
  white-space:nowrap;
}
.tk-fwd-btn:hover{ background:var(--tk-hover); }
.tk-fwd-btn.on{
  border-color:var(--tk-accent);
  color:var(--tk-accent-2);
  font-weight:500;
}

.tk-fwd-back{
  position:fixed; inset:0; z-index:2147483003;
  background:rgba(44,45,46,.42);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.tk-fwd-win{
  background:var(--tk-surface);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(20,40,70,.24);
  width:min(94vw, 420px);
  padding:22px 24px 20px;
}
.tk-fwd-h{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.tk-fwd-h b{ font:600 20px/1.3 inherit; color:var(--tk-text); }
.tk-fwd-x{
  width:32px; height:32px; border:0; background:none;
  border-radius:8px; color:var(--tk-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tk-fwd-x:hover{ background:var(--tk-hover); color:var(--tk-text); }

.tk-fwd-t{
  color:var(--tk-muted); font-size:14px; line-height:1.45;
  margin-bottom:16px;
}
.tk-fwd-i{
  width:100%; box-sizing:border-box;
  border:1px solid var(--tk-border-2); border-radius:9px;
  padding:11px 13px; font-size:15px;
  background:var(--tk-surface); color:var(--tk-text);
  margin-bottom:18px;
}
.tk-fwd-i:focus{
  border-color:var(--tk-accent);
  outline:2px solid rgba(var(--tk-accent-rgb),.16); outline-offset:0;
}

.tk-fwd-f{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tk-fwd-ok{
  background:var(--tk-accent); color:#fff; border:0;
  border-radius:9px; padding:11px 24px;
  font:600 15px/1.2 inherit; cursor:pointer;
}
.tk-fwd-ok:hover{ background:var(--tk-accent-2); }
.tk-fwd-no{
  background:var(--tk-surface2); color:var(--tk-text);
  border:0; border-radius:9px; padding:11px 20px;
  font:400 15px/1.2 inherit; cursor:pointer;
}
.tk-fwd-no:hover{ background:var(--tk-hover); }
.tk-fwd-off{
  margin-left:auto; background:none; border:0;
  color:var(--tk-danger); font:400 14px/1.2 inherit;
  cursor:pointer; padding:11px 4px;
}
.tk-fwd-off:hover{ text-decoration:underline; }

html.dark-mode .tk-fwd-win{ background:#232529; }
html.dark-mode .tk-fwd-i{
  background:#1A1B1F; border-color:#33363C;
  color:var(--tk-text);
}
html.dark-mode .tk-fwd-no{ background:#1A1B1F; color:var(--tk-text); }

/* ============================================================
   73. НАСТРОЙКИ: ТЕКСТ ПЕРЕСТАЁТ РЕЗАТЬСЯ

   Прежнее правило снимало обрезание с КНОПОК. А в настройках
   режется другое: подписи полей, названия разделов, пояснения,
   названия папок и профилей. Там своя вёрстка — таблица с
   жёсткой шириной колонки, и длинная подпись уходит в многоточие.

   Здесь запрет для всего, что есть на страницах настроек.
   ============================================================ */

html.tk-other td,
html.tk-other th,
html.tk-other label,
html.tk-other legend,
html.tk-other .boxtitle,
html.tk-other .hint,
html.tk-other .form-text,
html.tk-other li a,
html.tk-other li a span,
html.tk-other .listing td,
html.tk-other .propform td.title,
html.tk-other #settings-menu li a,
html.tk-other #folders-table td,
html.tk-other #identities-table td,
html.tk-other #responses-table td,
html.tk-other #filterslist li a,
html.tk-other #contacts-table td{
  overflow:visible !important;
  text-overflow:clip;
  white-space:normal;
  max-width:none !important;
  text-indent:0;
  word-break:normal;
  overflow-wrap:break-word;
  line-height:1.45;
}

/* Подпись поля может занять две строки — это лучше, чем многоточие.
   Ячейка при этом растёт, а не режет содержимое. */
html.tk-other .propform td,
html.tk-other .propform th{
  height:auto !important;
  vertical-align:middle;
}

/* Заголовки разделов и групп: длинные названия переносятся */
html.tk-other #layout-content > .header .header-title,
html.tk-other legend,
html.tk-other .boxtitle{
  white-space:normal;
  overflow:visible !important;
  height:auto !important;
  max-width:none !important;
}

/* Списки папок, профилей, ответов и фильтров — то же самое */
html.tk-other .listing li a,
html.tk-other .listing li span,
html.tk-other #directorylist li a{
  white-space:normal;
  overflow:visible !important;
  text-overflow:clip;
  height:auto !important;
  min-height:38px;
  display:flex !important;
  align-items:center;
}

/* Поля ввода не должны прятать введённое: если текст длиннее
   поля, он прокручивается, а не обрезается насовсем. */
html.tk-other input[type=text],
html.tk-other input[type=email],
html.tk-other input[type=password],
html.tk-other select,
html.tk-other textarea{
  text-overflow:clip;
}

/* Строка «Пересылка: адрес@почта.ру» на кнопке тоже целиком */
.tk-fwd-btn{
  overflow:visible !important;
  text-overflow:clip;
  max-width:none !important;
}

/* ============================================================
   74. ФИЛЬТРЫ: ТРИ СТОЛБЦА, ОБРУБКИ ПОЛЕЙ, НАЕЗД КНОПОК

   На странице фильтров тема разворачивает СВОЮ трёхколоночную
   раскладку: слева меню, посередине список правил, справа форма.
   Наши правила её не касались — они писались для двухколоночного
   вида почты, а сюда не доставали.

   Плюс сама форма правила свёрстана таблицей с фиксированными
   ширинами: поля сжимаются в обрубки, а кнопки «Добавить» и
   «Удалить» накладываются друг на друга.
   ============================================================ */

/* ---- 74.1 Форма занимает место списка, а не третий столбец ---- */
html.tk-other #layout-content{
  flex:1 1 auto !important;
  max-width:none !important;
  width:auto !important;
  border-left:1px solid var(--tk-border);
}
html.tk-other.tk-other-open #layout-list{ display:none; }

/* когда открыта форма правила, список правил уступает ей место */
html.tk-other #filter-form-frame,
html.tk-other #preferences-frame{
  width:100% !important;
  max-width:none !important;
}

/* ---- 74.2 Форма правила: поля нормального размера ---- */
html.tk-other #filter-form fieldset,
html.tk-other #filter-form .propform{
  max-width:900px !important;
  margin:0 auto;
}

/* строка условия и строка действия — в линию, с переносом */
html.tk-other #filter-form .rulerow,
html.tk-other #filter-form .actionrow,
html.tk-other #filter-form div.rule,
html.tk-other #filter-form div.action{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap !important;
  padding:10px 0;
  width:100% !important;
}

/* поля внутри строки: тянутся, но не схлопываются в обрубок */
html.tk-other #filter-form .rulerow select,
html.tk-other #filter-form .rulerow input,
html.tk-other #filter-form .actionrow select,
html.tk-other #filter-form .actionrow input,
html.tk-other #filter-form .actionrow textarea{
  flex:1 1 170px !important;
  min-width:150px !important;
  max-width:none !important;
  width:auto !important;
  min-height:42px;
  height:auto !important;
  box-sizing:border-box;
}

/* поле значения шире прочих: туда пишут адрес или текст */
html.tk-other #filter-form input.rule-value,
html.tk-other #filter-form .actionrow textarea{
  flex:2 1 260px !important;
}

/* ---- 74.3 Кнопки «Добавить» и «Удалить» перестают наезжать ---- */
html.tk-other #filter-form a.button.add,
html.tk-other #filter-form a.button.del,
html.tk-other #filter-form .rulerow .buttons,
html.tk-other #filter-form .actionrow .buttons{
  position:static !important;
  float:none !important;
  margin:0;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
}
html.tk-other #filter-form a.button.add{
  background:var(--tk-accent);
  color:#fff;
  border:0;
  border-radius:9px;
  padding:11px 18px;
  white-space:nowrap;
}
html.tk-other #filter-form a.button.del{
  background:none;
  color:var(--tk-muted);
  border:0;
  width:38px !important; height:38px !important;
  border-radius:8px;
  padding:0;
  display:inline-flex !important;
  align-items:center; justify-content:center;
}
html.tk-other #filter-form a.button.del:hover{
  background:var(--tk-hover); color:var(--tk-danger);
}

/* ---- 74.4 Сообщение об ошибке под полем, а не поверх ---- */
html.tk-other #filter-form .error,
html.tk-other span.error{
  display:block !important;
  position:static !important;
  color:var(--tk-danger);
  font-size:13px;
  margin:4px 0 0;
  width:100% !important;
}
html.tk-other input.error,
html.tk-other select.error{
  border-color:var(--tk-danger);
}

/* ============================================================
   75. ШАГ СТРОКИ ПИСЬМА — 48 ПИКСЕЛЕЙ, КАК В ЭТАЛОНЕ

   Значение не на глаз: на кадре 02 найдены аватарки и измерено
   расстояние между их серединами. Вышло ровно 48 пикселей
   (шаги по 88 — это места, где между строками стоит разделитель
   дня, их в счёт не берём).

   У нас было 51 — строки чуть выше нужного. Разница набегала
   из отступов ячейки: 9 сверху и 9 снизу при содержимом 33.
   ============================================================ */
#messagelist tbody tr[id^=rcmrow]{
  height:48px !important;
  min-height:48px;
  max-height:48px;
  box-sizing:border-box;
}
#messagelist tbody tr[id^=rcmrow] > td{
  padding-top:7px;
  padding-bottom:7px;
  height:auto !important;
  box-sizing:border-box;
}

/* Начало текста и тема должны уместиться в одну строку:
   при высоте 48 вторая строка вылезет за край. */
#messagelist tbody tr[id^=rcmrow] td.subject,
#messagelist .tk-snip{
  white-space:nowrap;
  overflow:hidden !important;
  text-overflow:ellipsis;
  line-height:1.35;
}

/* В плотном режиме — 40, как и было задумано */
html.tk-compact #messagelist tbody tr[id^=rcmrow]{
  height:40px !important;
  min-height:40px;
  max-height:40px;
}
html.tk-compact #messagelist tbody tr[id^=rcmrow] > td{
  padding-top:4px;
  padding-bottom:4px;
}

/* ============================================================
   76. ПОЧЕМУ ПРАВИЛА НЕ ДЕЙСТВОВАЛИ ВНУТРИ ФОРМЫ ФИЛЬТРА

   Форма правила открывается ВО ФРЕЙМЕ — это отдельный документ.
   Класс tk-other стоит на странице-родителе, а внутри фрейма
   его нет. Значит все мои правила, начинавшиеся с html.tk-other,
   до формы не доставали вовсе — сколько их ни пиши.

   Здесь то же самое, но БЕЗ приставки: правила действуют
   и в основном окне, и внутри фрейма.
   ============================================================ */

/* поля формы: нормальный размер, ничего не режется */
#filter-form input[type=text],
#filter-form input[type=email],
#filter-form select,
#filter-form textarea,
#vacation-form input,
#vacation-form select,
#vacation-form textarea{
  min-height:42px;
  height:auto !important;
  border:1px solid #D9DBDF;
  border-radius:9px;
  padding:9px 12px;
  font-size:14px;
  box-sizing:border-box;
  max-width:none !important;
  text-overflow:clip;
}

/* подписи полей целиком, с переносом */
#filter-form td,
#filter-form th,
#filter-form label,
#filter-form legend,
#vacation-form td,
#vacation-form label{
  white-space:normal;
  overflow:visible !important;
  text-overflow:clip;
  max-width:none !important;
  line-height:1.45;
  padding:10px 12px 10px 0;
}

/* строка условия и действия — в линию, поля тянутся */
#filter-form .rulerow,
#filter-form .actionrow{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap !important;
  padding:10px 0;
  width:100% !important;
}
#filter-form .rulerow select,
#filter-form .rulerow input,
#filter-form .actionrow select,
#filter-form .actionrow input,
#filter-form .actionrow textarea{
  flex:1 1 170px !important;
  min-width:150px !important;
  width:auto !important;
}
#filter-form input.rule-value,
#filter-form .actionrow textarea{ flex:2 1 260px; }

/* кнопки не наезжают друг на друга */
#filter-form a.button.add,
#filter-form a.button.del,
#filter-form .rulerow .buttons,
#filter-form .actionrow .buttons{
  position:static !important;
  float:none !important;
  margin:0;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center; gap:6px;
}
#filter-form a.button.add{
  background:#0F7BC4; color:#fff;
  border:0; border-radius:9px;
  padding:11px 18px; white-space:nowrap;
}
#filter-form a.button.del{
  background:none; color:#6F7178;
  border:0; width:38px; height:38px;
  border-radius:8px; padding:0;
  display:inline-flex !important; align-items:center; justify-content:center;
}

/* ошибка под полем, а не поверх него */
#filter-form .error,
#vacation-form .error{
  display:block !important; position:static !important;
  color:#D64B4B; font-size:13px;
  margin:4px 0 0; width:100%;
}

/* форма во фрейме занимает всю ширину, а не жмётся столбцом */
body.iframe #filter-form,
body.iframe .formcontent,
html body #filter-form{
  max-width:900px !important;
  margin:0 auto;
  padding:20px 24px;
}

/* подключение ящика: кнопка и заголовок списка */
.tk-acc-add{ border-top:1px solid var(--tk-border); }
.tk-acc-add button{ color:var(--tk-accent-2); }
.tk-acc-add button .tk-i{ color:var(--tk-accent-2); }
.tk-acc-t{
  padding:12px 16px 6px; font-size:12px; letter-spacing:.04em;
  color:var(--tk-muted-2); text-transform:uppercase;
}

/* ============================================================
   77. НАДПИСИ НАЛЕЗАЮТ НА СОДЕРЖИМОЕ

   На кадрах видно: «Назад», «Создать», «Удалить», «Действия»
   висят ПОВЕРХ списка, а «Метка» в окне письма перекрывает
   соседние кнопки.

   Причина не в обрезании, а в раскладке: тема ставит шапке
   position:absolute и нулевую высоту, а кнопки внутри
   разлетаются. Раньше я снимал ограничения ширины — от этого
   надписи стали целыми, но полезли друг на друга.

   Лечим иначе: шапка занимает СВОЁ место в потоке, содержимое
   начинается под ней.
   ============================================================ */

/* #messagetoolbar здесь БЫЛ и всё ломал.

   Он попал в список принудительного показа, когда я боролся
   с наложением надписей. И перебивал все пряталки: в окне
   написания панель оставалась видной, сколько её ни прячь.

   Нашлось разбором всех страниц разом: из четырнадцати чужая
   панель осталась ровно на одной, и виновником оказалось моё
   же правило отсюда. */
/* И «.header .toolbar» тоже задевал панель: она лежит ВНУТРИ
   шапки, то есть подходит под этот селектор как потомок.
   Исключаем страницу написания — там панель не нужна. */
html:not(.tk-compose-page):not(.tk-inmodal) #layout-content > .header,
html:not(.tk-compose-page):not(.tk-inmodal) #layout-list > .header,
html:not(.tk-compose-page):not(.tk-inmodal) #layout-sidebar > .header,
/* «.header .toolbar» убран из этого списка совсем.

   Он ловил панель темы как потомка шапки и показывал её в окне
   написания — сколько её ни прячь другими правилами. Оформление
   шапок от этого не страдает: они перечислены выше поимённо. */
html:not(.tk-compose-page):not(.tk-inmodal) #layout-sidebar > .header{
  position:relative !important;
  height:auto !important;
  min-height:52px;
  overflow:visible !important;
  display:flex !important;
  align-items:center;
  flex-wrap:wrap !important;
  gap:4px;
  padding:7px 14px;
  box-sizing:border-box;
  z-index:2 !important;
  background:var(--tk-surface);
  border-bottom:1px solid var(--tk-border);
}

/* кнопки внутри шапки не вылезают за её границы */
#layout-content > .header > *,
#layout-list > .header > *,
.header .toolbar > *,
#messagetoolbar > *{
  position:relative !important;
  float:none !important;
  top:auto; left:auto;
  right:auto; bottom:auto;
  margin:0;
  flex:0 0 auto !important;
}

/* содержимое начинается ПОД шапкой, а не заезжает под неё */
#layout-content > .scroller,
#layout-list > .scroller{
  position:relative !important;
  z-index:1 !important;
  margin-top:0;
  padding-top:0;
}

/* «Назад» и стрелка возврата — обычная кнопка в ряду */
.header a.back-list-button,
.header a.back-sidebar-button,
.header .back{
  position:relative !important;
  float:none !important;
  margin:0 6px 0 0;
  order:-1;
}

/* подпись под значком не растягивает кнопку и не лезет вбок */
.header a.button,
.toolbar a.button,
#messagetoolbar a.button{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:7px;
  height:auto !important;
  min-height:38px;
  padding:7px 11px;
  line-height:1.25;
}
.header a.button .inner,
.toolbar a.button .inner{
  position:static !important;
  display:inline !important;
  margin:0;
  padding:0;
  line-height:1.25;
}

/* ============================================================
   78. ФОРМА ФИЛЬТРА: КНОПКИ НАД ПОЛЯМИ

   На кадре «Добавить» и «Удалить» стояли поверх полей ввода —
   у них absolute от темы. Возвращаем в поток.
   ============================================================ */
/* Только на широком экране: на телефоне тема раскладывает
   форму сама, и общий запрет её разваливает — проверено
   на снимках, там всё поехало. */
@media (min-width:900px){
  #filter-form a.button,
  #filter-form .buttons,
  #vacation-form a.button,
  #vacation-form .buttons{
    position:static !important;
    float:none !important;
  }
  #filter-form .rulerow,
  #filter-form .actionrow,
  #vacation-form .rulerow{
    position:relative !important;
  }
}


/* ============================================================
   79. ПОЧЕМУ ЗДЕСЬ БОЛЬШЕ НЕТ ЗАПРЕТА «ВИСЕТЬ ПОВЕРХ»

   Здесь стояло правило position:static для всего подряд —
   я так боролся с наложениями надписей.

   Оно сделало ХУЖЕ. Тема elastic держит на «висеть поверх»
   всю раскладку: и мобильный вид, и выпадающие панели, и
   кнопки в шапках. Отняв это разом, я развалил интерфейс:
   на телефоне «Меню» задвоилось, панели разъехались, кнопки
   легли друг на друга.

   Правило снято. Наложения надо чинить точечно — там, где
   они есть, и с оглядкой на ширину экрана. Общий запрет
   для чужой темы не работает.
   ============================================================ */

/* Точечно: только кнопки в шапке НАШИХ разделов на широком
   экране. На узком тема раскладывает их сама, и трогать
   нельзя — иначе получится то, что было на снимках. */
@media (min-width:900px){
  html.tk-other #layout-content > .header > a.button,
  html.tk-other #layout-content > .header > button{
    position:relative !important;
    float:none !important;
  }
}

/* ============================================================
   81. ТЁМНАЯ ТЕМА: ТЕКСТ ПИСЬМА НЕ ВИДНО

   На снимке письмо в тёмной теме: подложка тёмная, а текст
   письма чёрный — он написан отправителем и о теме не знает.
   Читать невозможно.

   Правильное решение: подложку письма держать СВЕТЛОЙ даже
   в тёмной теме. Так делают все почтовые клиенты — иначе
   чужая вёрстка с чёрным текстом становится нечитаемой.
   ============================================================ */
html.dark-mode #messagebody,
html.dark-mode #message-content .message-part,
html.dark-mode #messagecontframe,
html.dark-mode .message-htmlpart,
html.dark-mode .message-part,
html.dark-mode #messagebody *,
html.dark-mode .message-part *{
  background-color:#FFFFFF;
  color:#2C2D2E;
}

/* ссылки внутри письма остаются синими */
html.dark-mode #messagebody a,
html.dark-mode .message-part a{
  color:#0F7BC4;
}

/* сам кадр письма светлый */
html.dark-mode iframe#messagecontframe,
html.dark-mode #message-content{
  background:#FFFFFF;
}

/* Простой текст письма — тоже на светлом */
html.dark-mode #messagebody pre,
html.dark-mode .message-part pre,
html.dark-mode div.message-part div{
  background:#FFFFFF;
  color:#2C2D2E;
}

/* Шапка письма остаётся тёмной: она наша, не отправителя */
html.dark-mode #messageheader,
html.dark-mode #message-header,
html.dark-mode .tk-msgbar,
html.dark-mode .tk-msgfoot{
  background:#1A1B1F;
  color:var(--tk-text);
}
html.dark-mode #messageheader *,
html.dark-mode #message-header *{
  background:transparent;
}
html.dark-mode #messageheader .subject,
html.dark-mode #message-header .subject{
  color:var(--tk-text);
}

/* ============================================================
   82. ЛИШНИЕ ПАНЕЛИ ТЕМЫ НА УЗКОМ ЭКРАНЕ

   На снимке сверху развёрнута ЧУЖАЯ панель: «Написать
   сообщение, Ответить, Ответить всем, Параметры ответа всем,
   Переслать, Опции пересылки, Удалить, Архив, СПАМ, Пометить,
   Ещё». Ниже — «Меню ⋮ ⋮ ⋮».

   Это раскрытое меню темы. У нас все эти действия уже есть:
   в строке письма, в меню по нажатию, в панели над списком.
   Чужая панель их только повторяет и занимает пол-экрана.

   Раньше её прятало правило, которое я снял вместе с тем,
   что ломало телефон. Возвращаю — но прицельно, пряча
   только саму панель, а не раскладку вокруг.
   ============================================================ */

/* БЕЗ приставки tk-nomenu.

   Правило висело под классом tk-nomenu, а его на странице может
   не быть — он ставится сервером и только для части экранов.
   Оттого панель и оставалась видна: правило до неё не доставало.

   По разметке темы (mail-menu.html) панель называется #mailtoolbar
   и имеет классы toolbar menu. Прячем именно её. */
#mailtoolbar,
#layout-menu,
#taskmenu,
#messagetoolbar.popupmenu,
.popupmenu.toolbarmenu,
#markmessagemenu,
#messagemenu,
#replyall-menu,
#forward-menu,
#markmessage-menu{
  display:none !important;
}

/* Кнопка, которая её раскрывает, тоже не нужна */
a#messagemenulink,
a#markmessagemenulink,
a#replyallmenulink,
a#forwardmenulink,
a.button.menu,
a[data-popup="mailtoolbar"],
a[data-popup="markmessage-menu"]{
  display:none !important;
}

/* «Меню» с тремя точками — их у нас заменяют свои кнопки.
   Тоже без приставки: она не всегда есть. */
#layout-list > .header > a.menu-button,
#layout-content > .header > a.menu-button,
a.menuthreads,
a.menusearch,
.header > a[data-popup],
.header > span.dropbutton{
  display:none !important;
}

/* на узком экране прячем и родную полосу действий:
   всё то же есть в строке письма и в меню по нажатию */
@media (max-width:899px){
  .toolbar.footer,
  #layout-list > .header > .toolbar{
    display:none !important;
  }
}

/* Наши панели при этом остаются: они и есть замена */
/* Наши панели остаются: они и есть замена */
#tk-listbar,
.tk-listbar,
#tk-msgbar:not(.tk-msgbar-idle),
.tk-side-top,
.tk-side-foot{
  display:flex !important;
}

/* ============================================================
   83. ТЕЛЕФОН: ПАНЕЛЬ ПАПОК ДОЛЖНА УЕЗЖАТЬ

   На снимке с телефона панель папок занимает половину экрана,
   списку остаётся полоска: темы обрезаны до «CD…», даты налезают
   на них, «Меню» задвоено.

   Мои правила ширины стоят под @media (min-width:900px) — на
   телефон не действуют. Но и тема свою мобильную раскладку не
   разворачивает: мешают наши классы tk-list-mode и прочие.

   Здесь — раскладка для узкого экрана: панель уезжает за край
   и выдвигается кнопкой, список занимает всю ширину.
   ============================================================ */

@media (max-width:899px){

  /* панель папок за краем, выезжает по кнопке */
  html.tk-list-mode #layout-sidebar,
  html.tk-msg-mode #layout-sidebar,
  html.tk-other #layout-sidebar{
    position:fixed !important;
    top:0; bottom:0; left:0;
    width:min(84vw, 320px) !important;
    max-width:min(84vw, 320px) !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    z-index:1000 !important;
    transform:translateX(-102%);
    transition:transform .18s ease-out;
    box-shadow:2px 0 16px rgba(20,40,70,.18);
  }

  html.tk-side-open #layout-sidebar{ transform:translateX(0); }

  /* затемнение под выдвинутой панелью */
  html.tk-side-open body::after{
    content:''; position:fixed; inset:0;
    background:rgba(44,45,46,.4); z-index:999;
  }

  /* список и письмо — во всю ширину */
  html.tk-list-mode #layout-list,
  html.tk-msg-mode #layout-list,
  html.tk-other #layout-content{
    flex:1 1 100% !important;
    max-width:100% !important;
    width:100% !important;
    margin-left:0;
  }

  /* строка письма: отправитель, тема, дата умещаются */
  #messagelist tbody tr[id^=rcmrow]{
    height:auto !important;
    min-height:64px;
    max-height:none;
    display:grid !important;
    grid-template-columns:38px 1fr auto !important;
    grid-template-areas:'ав от дата' 'ав тема тема' !important;
    align-items:center;
    gap:2px 10px;
    padding:9px 12px;
  }
  #messagelist tbody tr[id^=rcmrow] span.tk-av{ grid-area:ав; }
  #messagelist tbody tr[id^=rcmrow] td.fromto{ grid-area:от; }
  #messagelist tbody tr[id^=rcmrow] td.subject{
    grid-area:тема !important;
    white-space:nowrap;
    overflow:hidden !important;
    text-overflow:ellipsis;
  }
  #messagelist tbody tr[id^=rcmrow] td.date{
    grid-area:дата !important;
    text-align:right;
    font-size:12.5px;
    white-space:nowrap;
  }
  /* на узком начало текста прячем: места нет */
  #messagelist .tk-snip{ display:none; }
  /* лишние ячейки не занимают место */
  #messagelist tbody tr[id^=rcmrow] td.flag,
  #messagelist tbody tr[id^=rcmrow] td.attachment,
  #messagelist tbody tr[id^=rcmrow] td.threads,
  #messagelist tbody tr[id^=rcmrow] td.size{ display:none; }

  /* задвоенное «Меню» и чужие кнопки шапки */
  #layout-list > .header > a.button:not(.tk-side-toggle),
  #layout-content > .header > a.button.menu,
  a.task-menu-button,
  a.folders-button{
    display:none !important;
  }
}

/* кнопка «Папки» — только на узком экране */
.tk-side-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:0; background:none; border-radius:9px;
  color:var(--tk-text); cursor:pointer; padding:0;
  flex:0 0 auto;
}
@media (max-width:899px){
  .tk-side-toggle{ display:inline-flex; }
}
.tk-side-toggle:hover{ background:var(--tk-hover); }

/* ============================================================
   84. ЧУЖАЯ ПАНЕЛЬ СВЕРХУ — ОКОНЧАТЕЛЬНО

   На кадре 1920 сверху висит полоса темы: «Меню · Выбрать ·
   Обсуждения · Параметры · Метка · Написать · Ответить ·
   Ответить всем · Переслать · Удалить · Архив · СПАМ · Меню».
   Подписи обрезаны, всё налезает друг на друга.

   Я прятал её несколько раз, и каждый раз она возвращалась.
   Причина найдена: моё ЖЕ правило (раздел 77) принудительно
   показывает шапку принудительно. Оно перебивает
   пряталку, потому что стоит позже.

   Здесь правило сильнее: в режиме списка шапка колонки писем
   скрыта целиком. Всё, что в ней было, у нас есть своё —
   панель «Выделить все · Отметить прочитанными · Фильтр».
   ============================================================ */

html.tk-list-mode:not(.tk-reading) #layout-list > .header,
html.tk-list-mode:not(.tk-reading) #layout-content > .header,
html.tk-list-mode:not(.tk-reading) .header > .toolbar,
html.tk-list-mode:not(.tk-reading) #mailtoolbar,
html.tk-list-mode:not(.tk-reading) #mailtoolbar *{
  display:none !important;
  height:0 !important;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  overflow:hidden !important;
}

/* Наша панель и поиск остаются — они не в той шапке */
html.tk-list-mode #tk-listbar,
html.tk-list-mode .searchbar,
html.tk-list-mode #layout-list > .searchbar{
  display:flex !important;
  height:auto !important;
  min-height:44px;
}

/* В режиме чтения шапка нужна: там панель действий письма */
html.tk-reading #layout-content > .header{
  display:flex !important;
  height:auto !important;
  min-height:52px;
  overflow:visible !important;
}

/* ============================================================
   85. РАЗДЕЛИТЕЛЬ ДНЯ НАЛЕЗАЕТ НА ПЕРВОЕ ПИСЬМО

   «На этой неделе» стоит поверх строки Vince-Vince. Он висит
   absolute от темы и не занимает своего места.
   ============================================================ */
#messagelist tbody tr.msgheader,
#messagelist .tk-daysep,
#messagelist tbody tr[class*="date-sep"]{
  position:relative !important;
  display:table-row !important;
  height:auto !important;
}
#messagelist tbody tr.msgheader td,
#messagelist .tk-daysep td{
  padding:14px 20px 6px;
  font-size:13px;
  color:var(--tk-muted);
  background:var(--tk-surface);
  border:0;
  line-height:1.3;
}

/* ============================================================
   86. ОКНО ПИСЬМА: ВЕРХНЯЯ ПОЛОСА ТЕМЫ

   На кадре 16 сверху висит полоса: «Сохра · Влож · Подп ·
   Ответ · Метка» — подписи обрезаны, «Метка» без значка.
   В эталоне её нет вовсе: там заголовок «Новое письмо»,
   крестик, и всё.

   Убираем. Всё, что она даёт, у нас есть:
     Сохранить → «Отправить» и автосохранение черновика
     Вложить   → «Прикрепить файл» в строке под темой
     Подпись   → там же
     Ответить  → это не нужно в НОВОМ письме
     Метка     → задаётся из списка писем
   ============================================================ */
html.tk-inmodal #messagetoolbar,
html.tk-inmodal .header > .toolbar,
html.tk-inmodal #layout-content > .header,
#tk-compose #messagetoolbar,
#tk-compose .header > .toolbar{
  display:none !important;
  height:0 !important;
  min-height:0;
  padding:0;
  border:0;
}

/* Наша шапка окна остаётся: название и кнопки справа */
#tk-compose .tk-compose-h,
.tk-compose-h{
  display:flex !important;
  height:auto !important;
  min-height:48px;
}

/* поля начинаются сразу под шапкой, без пустой полосы */
html.tk-inmodal #compose-content,
html.tk-inmodal .formcontent,
#tk-compose .formcontent{
  padding-top:14px;
  margin-top:0;
}

/* кнопка справки в окне письма ни к чему — она перекрывала
   «Отменить» */
#tk-compose .tk-checkbtn,
html.tk-inmodal .tk-checkbtn,
html.tk-inmodal .floating-action-buttons{
  display:none !important;
}

/* ============================================================
   87. РАЗДЕЛ ФИЛЬТРОВ ПО ЭТАЛОНУ (кадр 14)

   На снимке: список правил зажат в узкую полосу посередине,
   слева и справа пусто; пункты меню раздулись в карточки по
   46 пикселей; заголовка раздела нет вовсе.

   В эталоне: заголовок «Правила фильтрации», под ним список
   правил на всю ширину, слева компактное меню.
   ============================================================ */

/* меню разделов: компактный список, а не карточки */
html.tk-other #settings-menu li a,
html.tk-other #layout-sidebar .listing li a{
  min-height:40px;
  padding:8px 14px;
  margin:1px 8px;
  font-size:14px;
  border-radius:8px;
  gap:11px;
}
html.tk-other #settings-menu li a .tk-i,
html.tk-other #settings-menu li a svg{
  width:18px !important; height:18px !important;
  flex:0 0 18px !important;
}

/* список правил — на всю ширину области, с полями */
html.tk-other #filterslist,
html.tk-other #filtersetslist,
html.tk-other #layout-list > .scroller > table,
html.tk-other #layout-list .listing{
  width:auto !important;
  max-width:none !important;
  margin:0 18px;
  display:block !important;
}
html.tk-other #filterslist li,
html.tk-other #filtersetslist li{
  display:flex !important;
  align-items:center;
  width:auto !important;
  min-height:44px;
  padding:0;
  border-bottom:1px solid var(--tk-border);
}
html.tk-other #filterslist li a{
  flex:1 1 auto !important;
  padding:11px 14px;
  margin:0;
  border-radius:0;
  min-height:44px;
}

/* набор фильтров сверху — как подпись, а не как строка списка */
html.tk-other #filtersetslist{
  border-bottom:1px solid var(--tk-border);
  margin-bottom:8px;
}

/* колонка со списком занимает своё место, а не жмётся полоской */
html.tk-other #layout-list{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
}
html.tk-other #layout-list > .scroller{
  padding:12px 0;
}

/* заголовок раздела — крупно, как в эталоне */
.tk-sect{
  font:600 24px/1.25 inherit;
  color:var(--tk-text);
  padding:8px 18px 16px;
}
html.dark-mode .tk-sect{ color:var(--tk-text); }

/* ============================================================
   88. ПАНЕЛЬ ТЕМЫ В ОКНЕ НАПИСАНИЯ — БЕЗ ОГЛЯДКИ НА КЛАСС

   Разбор всех страниц (стенд pages.js) показал: из четырнадцати
   страниц чужая панель остаётся видной ровно на одной — в окне
   написания письма. Та самая полоса «Сохра · Влож · Подп ·
   Ответ · Метка» с обрезанными подписями.

   Правило пряталось под классом tk-inmodal, а он ставится
   скриптом и только когда окно открыто НАШИМ способом. Открыл
   человек письмо иначе — класса нет, панель на месте.

   Прячем по самой странице написания: там эта панель не нужна
   никогда, всё её содержимое у нас есть своим.
   ============================================================ */
/* ТОЛЬКО на странице написания. Прежний вариант включал
   #messagetoolbar.toolbar.menu без оглядки на страницу — и
   задевал открытое письмо: там эта же панель нужна, рядом с
   ней стоят наши кнопки действий. Стенд это поймал. */
body.task-mail.action-compose #messagetoolbar,
body.action-compose #messagetoolbar,
#compose-content #messagetoolbar,
html.tk-compose-page #messagetoolbar,
html.tk-inmodal #messagetoolbar.toolbar.menu{
  display:none !important;
  height:0 !important;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  overflow:hidden !important;
}

/* Но в ОТКРЫТОМ ПИСЬМЕ панель нужна: там наши кнопки действий
   лежат рядом с ней, и общий запрет их бы тоже снёс. */
/* И здесь исключаем страницу написания: правило показывало
   панель и там тоже. В окне письма её быть не должно —
   всё её содержимое у нас своё. */
html.tk-reading:not(.tk-compose-page) #messagetoolbar:not(.toolbar.menu),
html.tk-msg-mode:not(.tk-compose-page) #tk-msgbar{
  display:flex !important;
}

/* ============================================================
   89. ПАНЕЛЬ В ОКНЕ ПИСЬМА — ПОСЛЕДНЕЕ СЛОВО

   Разбор всех страниц показал: панель темы остаётся видной
   ровно в окне написания. Я снял её показ в трёх местах, и
   каждый раз находилось четвёртое: правила накопились за
   восемьдесят разделов и перебивают друг друга.

   Поэтому пряталка стоит В САМОМ КОНЦЕ файла и с длинным
   селектором. При равной силе побеждает последнее правило —
   значит это. Спорить с ней больше нечему.
   ============================================================ */
html.tk-compose-page #messagetoolbar,
html.tk-compose-page .toolbar.menu,
html.tk-inmodal #messagetoolbar,
html.tk-inmodal .toolbar.menu,
body.action-compose #messagetoolbar,
body.action-compose .toolbar.menu{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* ============================================================
   90. ОКНО ПИСЬМА ОТКРЫВАЕТСЯ ВО ФРЕЙМЕ

   Разгадка, которая стоила мне пяти заходов.

   Шаблон compose.html задаёт СВОЙ класс страницы — «iframe».
   Он стирает наш tk-compose-page, поставленный сервером. Значит
   все правила с приставками html.tk-* туда просто не доходят —
   сколько их ни пиши и куда ни ставь.

   Проверено разбором: класс страницы там «iframe», и прямое
   правило html.tk-compose-page #messagetoolbar под панель
   не подходит вовсе.

   Поэтому здесь — БЕЗ приставок, по признакам самой страницы
   написания: её разметка узнаётся по полям «Кому» и «Тема».
   ============================================================ */

html.iframe #messagetoolbar,
html.iframe .toolbar.menu,
body:has(#compose-subject) #messagetoolbar,
body:has(#_to) #messagetoolbar{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  overflow:hidden !important;
}

/* Внутри фрейма шапка тоже не нужна: наша своя, с названием
   окна и кнопками справа, стоит снаружи. */
html.iframe #layout-content > .header,
html.iframe .header > .toolbar{
  display:none !important;
}

/* А поля письма начинаются сразу, без пустой полосы сверху */
html.iframe #compose-content,
html.iframe .formcontent{
  padding-top:12px;
  margin-top:0;
}

/* ============================================================
   91. ФОРМЫ НАСТРОЕК ВО ФРЕЙМЕ — ПО ЭТАЛОНУ

   Осмотр изнутри (стенд inside.js) показал три расхождения,
   которых не видно было ни на шаблонах, ни на снимках:

     рамка поля   прозрачная — поля сливаются с карточкой
     подпись      16px вместо 15
     «Сохранить»  белая вместо синей

   Формы открываются во фрейме, поэтому правила без приставок:
   класса tk-other там нет.
   ============================================================ */

/* поля видны: рамка, а не пустота */
.formcontent input[type=text],
.formcontent input[type=email],
.formcontent input[type=password],
.formcontent input[type=number],
.formcontent select,
.formcontent textarea,
fieldset.propform input[type=text],
fieldset.propform select,
body.iframe input[type=text],
body.iframe select,
body.iframe textarea{
  border:1px solid #D9DBDF;
  border-radius:9px;
  min-height:40px;
  padding:9px 12px;
  font-size:14px;
  background:#FFFFFF;
  color:#2C2D2E;
  box-sizing:border-box;
}
.formcontent input:focus,
.formcontent select:focus,
body.iframe input:focus,
body.iframe select:focus{
  border-color:#0F7BC4;
  outline:2px solid rgba(15,123,196,.16);
  outline-offset:0;
}

/* подписи полей — 15px, как в эталоне */
.formcontent td.title,
.formcontent label,
fieldset.propform td.title,
body.iframe td.title,
body.iframe label{
  font-size:15px;
  color:#2C2D2E;
  font-weight:400;
  line-height:1.4;
}

/* пояснение под подписью — серым и мельче */
.formcontent .hint,
body.iframe .hint,
body.iframe .form-text{
  font-size:13px;
  color:#6F7178;
  display:block !important;
  margin-top:4px;
}

/* «Сохранить» — основная кнопка, синяя */
.formbuttons button.save,
.formbuttons button.mainaction,
.formbuttons input[type=submit],
body.iframe button.save,
body.iframe .formbuttons button:first-child{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:10px;
  padding:12px 30px;
  font:600 15px/1.2 inherit;
  cursor:pointer;
}
.formbuttons button.save:hover,
body.iframe button.save:hover{ background:#0D5FA0; }

/* прочие кнопки формы — спокойные */
.formbuttons button:not(.save):not(.mainaction),
body.iframe .formbuttons button:not(:first-child){
  background:#F0F1F3;
  color:#2C2D2E;
  border:0;
  border-radius:10px;
  padding:12px 24px;
}

/* Кнопка «Сохранить» зовётся btn-primary submit — так её
   называет Roundcube. Прежние правила целились в .save и
   .mainaction, которых у неё нет. Проверено осмотром изнутри. */
.formbuttons button.submit,
.formbuttons button.btn-primary,
button.btn.btn-primary.submit,
body.iframe button.btn-primary{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:10px;
  padding:12px 30px;
  font:600 15px/1.2 inherit;
}
.formbuttons button.submit:hover,
body.iframe button.btn-primary:hover{ background:#0D5FA0; }

/* Заголовок группы полей — 19px, как в эталоне.
   Подписи же самих полей лежат в td.title, они 15px. */
.formcontent legend,
fieldset legend,
body.iframe legend{
  font-size:19px;
  font-weight:600;
  color:#2C2D2E;
  padding:0 0 4px;
  margin:6px 0 14px;
  border:0;
}

/* ============================================================
   92. СПИСКИ ПАПОК, ПРОФИЛЕЙ И КОНТАКТОВ

   Осмотр изнутри показал: строки без отступов и разделителей,
   область без предела ширины. В эталоне строки с воздухом,
   разделены линиями, а список не растянут на весь монитор.

   Разметка у всех одна: таблица с классом listing, строки
   с опознавательным номером. Правим по ней.
   ============================================================ */

table.listing tbody tr > td,
#identities-table tbody tr > td,
#contacts-table tbody tr > td,
#subscription-table tbody tr > td,
#folderslist li > a{
  padding:12px 16px;
  font-size:14px;
  line-height:1.4;
  color:#2C2D2E;
  vertical-align:middle;
}

table.listing tbody tr,
#identities-table tbody tr,
#contacts-table tbody tr,
#subscription-table tbody tr{
  border-bottom:1px solid #EBECEF;
}
table.listing tbody tr:last-child{ border-bottom:0; }

table.listing tbody tr:hover > td,
#contacts-table tbody tr:hover > td,
#identities-table tbody tr:hover > td{
  background:#EBECEF;
  cursor:pointer;
}
table.listing tbody tr.selected > td,
#contacts-table tbody tr.selected > td,
#identities-table tbody tr.selected > td{
  background:#EBECEF;
  font-weight:500;
}

/* Список не растягивается на весь монитор: в эталоне у него
   есть предел, дальше идут поля. */
#layout-list > .scroller > table.listing,
#layout-list > .scroller > .listing{
  max-width:820px !important;
  margin:0 auto;
}

/* Тумблер подписки — рядом с названием, а не у дальнего края.
   На широком мониторе он уезжал за две тысячи пикселей. */
#subscription-table td.subscription,
#folderslist td.subscription{
  width:72px !important;
  text-align:right;
  padding-right:16px;
}

/* «Создать» — основная кнопка раздела */
#layout-list > .header a.button.create,
#layout-content > .header a.button.create{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:9px;
  padding:10px 20px;
  font-weight:500;
}

/* Разделители строк — В КОНЦЕ файла: раньше их перебивало
   правило, снимающее рамки со всей таблицы. При равной силе
   побеждает последнее, значит это.

   И контакты: их ячейки правились отдельным блоком выше,
   с отступами 8×14 вместо 12×16. Приводим к одному виду. */
#identities-table tbody tr,
#contacts-table tbody tr,
#subscription-table tbody tr,
#responses-table tbody tr,
table.listing tbody tr{
  border-bottom:1px solid #EBECEF;
}
#identities-table tbody tr:last-child,
#contacts-table tbody tr:last-child,
table.listing tbody tr:last-child{
  border-bottom:0;
}
#contacts-table tbody tr > td,
#responses-table tbody tr > td{
  padding:12px 16px;
  color:#2C2D2E;
}

/* ============================================================
   93. ПЕРЕКЛЮЧАТЕЛИ В НАСТРОЙКАХ

   Осмотр изнутри показал: галочки остались обычными квадратиками
   браузера, а в эталоне это тумблеры — овал с кружком, синий
   когда включено.

   И между строками настроек нет разделителей: они сливаются
   в сплошное полотно.

   Формы во фрейме, поэтому без приставок.
   ============================================================ */

/* сама галочка превращается в тумблер */
.propform input[type=checkbox],
.formcontent input[type=checkbox],
body.iframe input[type=checkbox],
fieldset input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  width:38px !important;
  height:22px !important;
  min-height:22px;
  border-radius:11px;
  background:#C7DAEC;
  border:0;
  position:relative !important;
  cursor:pointer;
  flex:0 0 38px !important;
  margin:0;
  padding:0;
  vertical-align:middle;
  transition:background .15s;
}

/* кружок внутри */
.propform input[type=checkbox]::after,
.formcontent input[type=checkbox]::after,
body.iframe input[type=checkbox]::after{
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#FFFFFF;
  transition:left .15s;
  box-shadow:0 1px 3px rgba(20,40,70,.2);
}

/* включено — синий, кружок вправо */
.propform input[type=checkbox]:checked,
.formcontent input[type=checkbox]:checked,
body.iframe input[type=checkbox]:checked{
  background:#0F7BC4;
}
.propform input[type=checkbox]:checked::after,
.formcontent input[type=checkbox]:checked::after,
body.iframe input[type=checkbox]:checked::after{
  left:18px;
}

/* строки настроек: разделители и воздух */
.propform tbody tr,
.formcontent tbody tr,
body.iframe .propform tbody tr{
  border-bottom:1px solid #EBECEF;
}
.propform tbody tr:last-child,
.formcontent tbody tr:last-child{
  border-bottom:0;
}
.propform tbody tr > td,
.formcontent tbody tr > td{
  padding:14px 12px 14px 0;
  vertical-align:middle;
}

/* подпись слева, поле справа — как в эталоне */
.propform td.title,
.formcontent td.title{
  width:52% !important;
  padding-right:24px;
}

/* Те же переключатели и строки в тёмной теме */
html.dark-mode .propform input[type=checkbox],
html.dark-mode .formcontent input[type=checkbox],
html.dark-mode.iframe input[type=checkbox]{
  background:#33363C;
}
html.dark-mode .propform input[type=checkbox]:checked,
html.dark-mode .formcontent input[type=checkbox]:checked{
  background:#3B93D9;
}
html.dark-mode .propform tbody tr,
html.dark-mode .formcontent tbody tr{
  border-bottom-color:#2A2C31;
}
html.dark-mode .formcontent input[type=text],
html.dark-mode .formcontent select,
html.dark-mode.iframe input[type=text],
html.dark-mode.iframe select{
  background:#1A1B1F;
  border-color:#33363C;
  color:#E8E9EB;
}
html.dark-mode .formcontent td.title,
html.dark-mode .formcontent legend,
html.dark-mode.iframe td.title,
html.dark-mode.iframe legend{
  color:#E8E9EB;
}

/* ============================================================
   94. КАРТОЧКА КОНТАКТА

   Осмотр изнутри показал три расхождения с эталоном:

     фотография   без размера и без круга
     имя          16px обычным начертанием вместо крупного
     группы полей без рамок и отступов — сливаются в полотно

   Карточка открывается во фрейме, поэтому без приставок.
   ============================================================ */

/* фотография — круг 96px, как в эталоне */
#contactpic,
.contactpic,
#contacthead .contactpic,
body.iframe #contactpic{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  border-radius:50%;
  overflow:hidden !important;
  background:#EBECEF;
  flex:0 0 96px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
#contactpic img,
.contactpic img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
}

/* Шапка карточки — это fieldset.contact-head (проверено
   осмотром). В форме СОЗДАНИЯ там поля ввода, а не подпись:
   крупное имя появляется только при просмотре готового
   контакта. Поэтому правило для имени ниже — про просмотр. */
#contacthead,
fieldset.contact-head,
body.iframe #contacthead{
  display:flex !important;
  align-items:center;
  gap:20px;
  padding:20px 0 24px;
  border-bottom:1px solid #EBECEF;
  margin-bottom:20px;
}

/* имя — крупно */
#contacthead .names,
#contacthead .namefield,
.contactname,
body.iframe .names{
  font-size:22px;
  font-weight:600;
  color:#2C2D2E;
  line-height:1.3;
}
#contacthead .jobtitle,
#contacthead .organization{
  font-size:14px;
  font-weight:400;
  color:#6F7178;
}

/* группы полей — карточками с рамкой, как в эталоне */
.contactfieldgroup,
body.iframe fieldset.contactfieldgroup,
#contact-details fieldset{
  border:1px solid #EBECEF;
  border-radius:10px;
  padding:16px 20px;
  margin:0 0 14px;
  background:#FFFFFF;
}
.contactfieldgroup legend,
#contact-details fieldset legend{
  font-size:15px;
  font-weight:600;
  color:#2C2D2E;
  padding:0 0 10px;
  margin:0;
}

/* подписи полей внутри группы */
.contactfieldgroup label,
.contactfieldgroup .contactfieldlabel{
  font-size:13px;
  color:#6F7178;
  display:block !important;
  margin-bottom:4px;
}

html.dark-mode .contactfieldgroup,
html.dark-mode #contacthead{
  background:#1A1B1F;
  border-color:#2A2C31;
}
html.dark-mode #contacthead .names,
html.dark-mode .contactfieldgroup legend{ color:#E8E9EB; }
html.dark-mode #contactpic{ background:#2A2C31; }

/* ============================================================
   95. ОТКРЫТОЕ ПИСЬМО — ПО ЭТАЛОНУ (кадр 04)

   Осмотр изнутри показал:
     фон шапки  прозрачный — она сливается со страницей
     тема       24px, в эталоне 22
     низ шапки  без разделительной линии

   Аватарка 40px кругом и тело письма колонкой — уже верно.
   ============================================================ */

#messageheader,
#message-header,
body.iframe #messageheader{
  background:#FFFFFF;
  border-bottom:1px solid #EBECEF;
  padding:20px 26px 16px;
}

/* Тема письма — это h2.subject, и лежит она НЕ внутри шапки,
   а рядом. Прежний селектор искал её как потомка #messageheader
   и не находил: она оставалась 24px вместо 22 по эталону.
   Найдено осмотром живой страницы. */
h2.subject,
#messageheader .subject,
#message-header .subject,
body.iframe h2.subject{
  font-size:22px;
  font-weight:600;
  line-height:1.32;
  color:#2C2D2E;
  margin:0 0 16px;
}

/* строка отправителя: имя жирным, дата и «Кому» серым */
#messageheader .rcmContactAddress,
#message-header .rcmContactAddress,
#messageheader .adr{
  font-weight:600;
  color:#2C2D2E;
  font-size:14px;
}
#messageheader .date,
#message-header .date,
#messageheader .header-title{
  color:#6F7178;
  font-weight:400;
  font-size:13.5px;
}

/* цепочка переписки под письмом */
#messagelist.threads tbody tr,
.message-thread > div{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:11px 26px;
  border-bottom:1px solid #EBECEF;
  cursor:pointer;
}
#messagelist.threads tbody tr:hover,
.message-thread > div:hover{ background:#EBECEF; }

html.dark-mode #messageheader,
html.dark-mode #message-header{
  background:#1A1B1F;
  border-bottom-color:#2A2C31;
}
html.dark-mode #messageheader .subject{ color:#E8E9EB; }

/* ============================================================
   96. РАЗРЕШЕНИЯ: ФИЛЬТРЫ И НАСТРОЙКИ

   Проверка показала: для фильтров написано 95 правил и НИ ОДНОГО
   под разные экраны. Всё держалось на единственной границе
   в 900 точек — между ней и 1280 провал, там форма и разъезжается.

   Ступеней должно быть больше, и каждая — про конкретную беду.
   ============================================================ */

/* ---- узкий экран: одна колонка, поля во всю ширину ---- */
@media (max-width:767px){
  #filter-form,
  #vacation-form,
  html.tk-other .formcontent{
    padding:14px;
    margin:0;
    max-width:none !important;
  }

  /* условие и действие — столбиком: в ряд они не помещаются */
  #filter-form .rulerow,
  #filter-form .actionrow{
    flex-direction:column !important;
    align-items:stretch;
    gap:8px;
    padding:12px 0;
    border-bottom:1px solid #EBECEF;
  }
  #filter-form .rulerow select,
  #filter-form .rulerow input,
  #filter-form .actionrow select,
  #filter-form .actionrow input,
  #filter-form .actionrow textarea{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* кнопки строки — в ряд под полями, а не сбоку */
  #filter-form .rulerow .buttons,
  #filter-form .actionrow .buttons{
    display:flex !important;
    justify-content:flex-end;
    gap:8px;
    width:100% !important;
  }

  /* подпись над полем, а не слева: слева места нет */
  html.tk-other .propform td.title,
  .formcontent td.title,
  body.iframe td.title{
    display:block !important;
    width:100% !important;
    padding:0 0 6px;
  }
  html.tk-other .propform tbody tr,
  .formcontent tbody tr{
    display:block !important;
    padding:12px 0;
  }
  html.tk-other .propform tbody tr > td,
  .formcontent tbody tr > td{
    display:block !important;
    width:100% !important;
    padding:0;
  }
  .formcontent input[type=text],
  .formcontent select,
  body.iframe input[type=text],
  body.iframe select{
    width:100% !important;
    max-width:none !important;
  }
}

/* ---- средний экран: то, что раньше проваливалось ---- */
@media (min-width:768px) and (max-width:1279px){
  #filter-form,
  #vacation-form{
    max-width:none !important;
    padding:18px 20px;
  }
  #filter-form .rulerow,
  #filter-form .actionrow{
    flex-wrap:wrap !important;
    gap:8px;
  }
  /* поле значения занимает всю оставшуюся строку */
  #filter-form input.rule-value,
  #filter-form .actionrow textarea{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  html.tk-other .formcontent,
  html.tk-other fieldset.propform{
    max-width:none !important;
    padding:20px 24px;
  }
  html.tk-other .propform td.title{ width:44%; }
}

/* ---- широкий: колонкой по центру, как в эталоне ---- */
@media (min-width:1280px){
  #filter-form,
  #vacation-form{
    max-width:900px !important;
    margin:0 auto;
  }
  html.tk-other .formcontent,
  html.tk-other fieldset.propform{
    max-width:960px !important;
    margin:0 auto 18px;
  }
}

/* ---- очень широкий: не растягиваем дальше ---- */
@media (min-width:1800px){
  #filter-form,
  #vacation-form,
  html.tk-other .formcontent{
    max-width:1000px !important;
  }
}

/* ============================================================
   97. ШРИФТ

   В стилях был назван Golos Text, но НИГДЕ НЕ ЗАГРУЖАЛСЯ:
   браузер его не находил и молча брал запасной. Всё это время
   интерфейс шёл шрифтом системы — оттого и «шрифт не такой».

   Golos Text — открытый шрифт студии Артемия Лебедева,
   бесплатный для любого использования, близок по духу к тому,
   что в эталоне. Загружаем его с сервера шрифтов Google.

   Если сеть недоступна, сработает запасной набор — интерфейс
   не сломается, просто буквы будут системные.
   ============================================================ */

/* Подключение шрифта уже стоит в строке 18: правило требует,
   чтобы @import был в САМОМ НАЧАЛЕ файла, иначе браузер его
   отбрасывает. Второй здесь был бы мёртвым. */

/* Шрифт применяется ВЕЗДЕ, а не только к перечисленным местам.
   Прежний список пропускал заголовки, ссылки, ячейки таблиц —
   они шли системным, и вид получался разнобойным. */
html, body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
a, span, div, td, th, li, label, legend, p{
  font-family:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Кроме тела письма: там шрифт задаёт отправитель, и менять
   его нельзя — письмо должно выглядеть так, как задумано. */
#messagebody, #messagebody *,
.message-part, .message-part *,
#messagecontframe{
  font-family:revert;
}

/* Начертания по эталону: обычный 400, полужирный 600.
   Заголовки — 600, не 700: жирнее выглядит грубо. */
h1, h2, h3, legend, .tk-sect,
#messageheader .subject, h2.subject{
  font-weight:600;
}
strong, b, .unread .subject{ font-weight:600; }

/* Ровные цифры в датах и счётчиках: без них столбец дат
   «пляшет», потому что единица уже восьмёрки. */
#messagelist td.date,
.tk-lb-cnt, .unreadcount, .pagenav{
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   98. ОДИН ТУМБЛЕР НА ВЕСЬ ИНТЕРФЕЙС

   Переключатели описаны в трёх местах разными правилами:
   на входе одни, в настройках другие, у подписки третьи.
   Оттого они и выглядят по-разному и криво.

   Здесь ОДИН вид для всех — и он стоит последним, чтобы
   перебить прежние описания.

   Размеры взяты как у большинства современных интерфейсов:
   44×24 при кружке 20 и ходе 20. Это заметно крупнее прежних
   38×22 — в такой удобнее попадать, особенно пальцем.
   ============================================================ */

input[type=checkbox].tk-sw,
.tk-remember input[type=checkbox],
.propform input[type=checkbox],
.formcontent input[type=checkbox],
body.iframe input[type=checkbox],
fieldset input[type=checkbox],
#subscription-table input[type=checkbox],
.custom-switch input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;

  width:44px !important;
  height:24px !important;
  min-width:44px !important;
  min-height:24px;
  max-width:44px !important;
  flex:0 0 44px !important;

  border-radius:12px;
  border:0;
  background:#C4C9D2;
  position:relative !important;
  cursor:pointer;
  margin:0;
  padding:0;
  vertical-align:middle;
  box-shadow:inset 0 1px 2px rgba(20,40,70,.10);
  transition:background .18s ease;
  accent-color:auto;
}

/* кружок */
input[type=checkbox].tk-sw::after,
.tk-remember input[type=checkbox]::after,
.propform input[type=checkbox]::after,
.formcontent input[type=checkbox]::after,
body.iframe input[type=checkbox]::after,
fieldset input[type=checkbox]::after,
#subscription-table input[type=checkbox]::after,
.custom-switch input[type=checkbox]::after{
  content:'';
  position:absolute !important;
  top:2px;
  left:2px;
  width:20px !important;
  height:20px !important;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 1px 3px rgba(20,40,70,.28), 0 1px 1px rgba(20,40,70,.16);
  transition:left .18s cubic-bezier(.4,0,.2,1);
}

/* включено */
.tk-remember input[type=checkbox]:checked,
.propform input[type=checkbox]:checked,
.formcontent input[type=checkbox]:checked,
body.iframe input[type=checkbox]:checked,
fieldset input[type=checkbox]:checked,
#subscription-table input[type=checkbox]:checked,
.custom-switch input[type=checkbox]:checked{
  background:#0F7BC4;
}
.tk-remember input[type=checkbox]:checked::after,
.propform input[type=checkbox]:checked::after,
.formcontent input[type=checkbox]:checked::after,
body.iframe input[type=checkbox]:checked::after,
fieldset input[type=checkbox]:checked::after,
#subscription-table input[type=checkbox]:checked::after,
.custom-switch input[type=checkbox]:checked::after{
  left:22px;
}

/* под курсором и с клавиатуры */
.tk-remember input[type=checkbox]:hover,
.propform input[type=checkbox]:hover,
.formcontent input[type=checkbox]:hover{ background:#B4BAC5; }
.tk-remember input[type=checkbox]:checked:hover,
.propform input[type=checkbox]:checked:hover,
.formcontent input[type=checkbox]:checked:hover{ background:#0D5FA0; }

.tk-remember input[type=checkbox]:focus-visible,
.propform input[type=checkbox]:focus-visible,
.formcontent input[type=checkbox]:focus-visible{
  outline:2px solid rgba(15,123,196,.45);
  outline-offset:2px;
}

/* выключенный — приглушён, но виден */
.propform input[type=checkbox]:disabled,
.formcontent input[type=checkbox]:disabled{
  opacity:.5;
  cursor:default;
}

/* тёмная тема */
html.dark-mode .tk-remember input[type=checkbox],
html.dark-mode .propform input[type=checkbox],
html.dark-mode .formcontent input[type=checkbox],
html.dark-mode.iframe input[type=checkbox]{
  background:#3A3E45;
}
html.dark-mode .propform input[type=checkbox]:checked,
html.dark-mode .formcontent input[type=checkbox]:checked,
html.dark-mode .tk-remember input[type=checkbox]:checked{
  background:#3B93D9;
}
html.dark-mode .propform input[type=checkbox]::after,
html.dark-mode .tk-remember input[type=checkbox]::after{
  background:#F0F1F3;
}

/* «Запомнить меня»: тумблер и подпись в одну линию */
html.tk-login label.tk-remember{
  display:flex !important;
  align-items:center;
  gap:12px;
}

/* ============================================================
   99. КОЛОНКИ СПИСКА РАЗЪЕХАЛИСЬ

   На снимке с широкого монитора: заголовок «От» стоит на 430,
   а имена отправителей начинаются на 950 — между ними пустота
   в пол-экрана. Справа тоже пусто. И заголовки колонок налезают
   на первую строку писем.

   Причина: ширины заданы в точках (--tk-from:190px и подобные),
   а строка при этом разложена по-своему. На узком совпадало,
   на широком разъехалось.

   Здесь строка раскладывается ЯВНО: круг, отправитель, тема,
   дата — каждому своё место, и оно считается от ширины окна.
   ============================================================ */

@media (min-width:900px){
  #messagelist tbody tr[id^=rcmrow]{
    display:grid !important;
    grid-template-columns:
      var(--tk-av, 30px)            /* круг с буквами   */
      var(--tk-from, 190px)         /* отправитель      */
      1fr                            /* тема и начало текста */
      auto                           /* значки           */
      var(--tk-date, 96px);         /* дата             */
    align-items:center;
    gap:0 12px;
    padding:0 16px;
    box-sizing:border-box;
  }

  /* Круг лежит ВНУТРИ ячейки отправителя, а не прямо в строке —
     поэтому «> span.tk-av» не находил ничего. Даём ему место
     через саму ячейку. */
  #messagelist tbody tr[id^=rcmrow] span.tk-av{
    grid-column:1 !important;
    justify-self:center;
  }
  #messagelist tbody tr[id^=rcmrow] > td.fromto{
    grid-column:2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0;
  }
  #messagelist tbody tr[id^=rcmrow] > td.subject{
    grid-column:3 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0;
  }
  #messagelist tbody tr[id^=rcmrow] > .tk-marks,
  #messagelist tbody tr[id^=rcmrow] > .tk-actcell{
    grid-column:4 !important;
    padding:0;
  }
  #messagelist tbody tr[id^=rcmrow] > td.date{
    grid-column:5 !important;
    text-align:right;
    padding:0;
    white-space:nowrap;
  }

  /* остальные ячейки места не занимают */
  #messagelist tbody tr[id^=rcmrow] > td.flag,
  #messagelist tbody tr[id^=rcmrow] > td.attachment,
  #messagelist tbody tr[id^=rcmrow] > td.threads,
  #messagelist tbody tr[id^=rcmrow] > td.size,
  #messagelist tbody tr[id^=rcmrow] > td.status,
  #messagelist tbody tr[id^=rcmrow] > td.priority{
    display:none !important;
  }

  /* ЗАГОЛОВКИ КОЛОНОК: на снимке они налезали на первое письмо.
     Они не нужны — в эталоне их нет вовсе, а сортировка
     доступна из панели «Фильтр». */
  #messagelist thead,
  #messagelist > thead tr,
  #messagelist .rcmheader{
    display:none !important;
  }
}

/* Список занимает всю ширину — как в эталоне.

   Здесь стояла отсечка: с 1700 точек список ужимался до 1500 и
   вставал ПО ЦЕНТРУ. На мониторе 1920 это давало пустые поля по
   бокам — заказчик показал их на снимке со своего сервера. Отсечка
   ещё и рвала раскладку: до 1699 список во всю ширину, с 1700 —
   резко уже, промежуточных состояний нет.

   Длинную строку читать и правда труднее, но лечится это не
   обрезкой всего списка, а тем, что колонки отправителя и даты
   растут вместе с окном (clamp в разделе 100) — под тему остаётся
   разумная доля, а не весь избыток. */

/* ============================================================
   100. ФИЛЬТРЫ: СПИСОК ЗАЖАТ, СПРАВА ПУСТО

   На снимке правила «#1 #2 #3» жмутся к левому краю узкой
   полосой, а две трети экрана пустуют. Причина: тема делит
   страницу на три колонки, и списку достаётся средняя — узкая.

   В эталоне список правил идёт во всю ширину под заголовком.
   ============================================================ */

@media (min-width:900px){
  /* список правил занимает всё место, а не среднюю колонку */
  html.tk-other #layout-list{
    flex:1 1 auto !important;
    max-width:none !important;
    width:auto !important;
    min-width:0 !important;
  }

  /* правая колонка появляется только когда есть что показывать */
  html.tk-other #layout-content:empty,
  html.tk-other #layout-content:not(:has(form)):not(:has(iframe)){
    display:none !important;
  }

  /* сами правила — строками во всю ширину, с воздухом */
  html.tk-other #filterslist,
  html.tk-other #filtersetslist{
    max-width:900px !important;
    margin:0;
    padding:0 18px;
  }
  html.tk-other #filterslist li{
    min-height:46px;
    border-bottom:1px solid #EBECEF;
  }
  html.tk-other #filterslist li a{
    display:flex !important;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    min-height:46px;
    font-size:14px;
  }
  html.tk-other #filterslist li:hover a{ background:#EBECEF; }
  html.tk-other #filterslist li.selected a{
    background:#EBECEF;
    font-weight:500;
  }

  /* набор фильтров сверху — подписью, а не строкой списка */
  html.tk-other #filtersetslist{
    border-bottom:1px solid #EBECEF;
    padding:10px 18px;
    margin-bottom:6px;
  }
}

/* Заголовки колонок в списках настроек тоже налезали */
html.tk-other #filterslist thead,
html.tk-other .listing thead{ display:none; }

/* ============================================================
   РАСКЛАДКА СВОЕЙ ТЕМЫ

   Всё, что выше, писалось под чужую разметку elastic и боролось
   с ней. Здесь — раскладка НАШИХ шаблонов: с чем бороться уже
   нечему, поэтому и правила простые, без !important.
   ============================================================ */

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  margin:0;
  height:100%;
  background:#F6F7F8;
  color:#2C2D2E;
  font:400 14px/1.45 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- три колонки: папки, список, чтение ---- */
#tk-app{
  display:flex;
  height:100vh;
  overflow:hidden;
}

#tk-side{
  flex:0 0 240px;
  display:flex;
  flex-direction:column;
  background:#F6F7F8;
  border-right:1px solid #EBECEF;
  overflow:hidden;
}

#tk-list{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#FFFFFF;
  border-right:1px solid #EBECEF;
}

#tk-read{
  flex:1 1 auto;
  min-width:0;
  background:#FFFFFF;
}

/* ---- переключение список ⇄ чтение ----
   По эталону письмо открывается ВМЕСТО списка: слева всегда папки,
   справа — либо список писем, либо открытое письмо. Раньше правила
   целились в старую разметку темы (#layout-*), которой в новых
   шаблонах уже нет, поэтому область чтения не пряталась и давила
   список до узкой полосы. Теперь состояния заданы на своей разметке. */
html.tk-list-mode:not(.tk-reading) #tk-read{ display:none; }
html.tk-list-mode:not(.tk-reading) #tk-list{ display:flex; }
html.tk-list-mode.tk-reading #tk-list{ display:none; }
html.tk-list-mode.tk-reading #tk-read{ display:block; }

/* ---- левая панель ---- */
#tk-side-head{ padding:14px 16px 10px; }

#tk-brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  color:#2C2D2E;
  text-decoration:none;
}

#tk-side-acc{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px 12px;
  font-size:13.5px;
  color:#6F7178;
}

.tk-write{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 12px 14px;
  padding:11px 16px;
  border:1px solid #D6E0EC;
  border-radius:10px;
  background:#FFFFFF;
  color:#2C2D2E;
  font-weight:500;
  text-decoration:none;
}
.tk-write:hover{ background:#EBECEF; }

#tk-folders{ flex:1 1 auto; overflow-y:auto; padding:0 8px; }

#tk-folders li a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:40px;
  padding:8px 12px;
  margin:1px 0;
  border-radius:8px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
#tk-folders li a:hover{ background:#EBECEF; }
#tk-folders li.selected > a{ background:#EBECEF; font-weight:500; }

.tk-unread{
  margin-left:auto;
  font-size:13px;
  color:#6F7178;
  font-variant-numeric:tabular-nums;
}

#tk-side-foot{
  padding:10px 8px 14px;
  border-top:1px solid #EBECEF;
}
.tk-side-b{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:38px;
  padding:7px 12px;
  border-radius:8px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
.tk-side-b:hover{ background:#EBECEF; }
.tk-side-out{ color:#D64B4B; }

/* ---- поиск и панель над списком ---- */
#tk-search{ padding:10px 16px; border-bottom:1px solid #EBECEF; }

#tk-search input{
  width:100%;
  min-height:40px;
  padding:9px 14px;
  border:1px solid #EBECEF;
  border-radius:10px;
  background:#F6F7F8;
  font-size:14px;
}
#tk-search input:focus{
  border-color:#0F7BC4;
  background:#FFFFFF;
  outline:2px solid rgba(15,123,196,.14);
}

.tk-listbar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 16px;
  border-bottom:1px solid #EBECEF;
  min-height:44px;
}

/* ---- сам список писем ---- */
#tk-rows{ flex:1 1 auto; overflow-y:auto; }

#tk-pages{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:10px 16px;
  border-top:1px solid #EBECEF;
  font-size:13.5px;
  color:#6F7178;
}

/* ---- страница настроек ---- */
.tk-side-set, .tk-side-book{ flex:0 0 220px; }

.tk-back-mail{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 12px 12px;
  padding:9px 14px;
  border:1px solid #D6E0EC;
  border-radius:9px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
.tk-back-mail:hover{ background:#EBECEF; }

#tk-set-list{
  flex:0 0 300px;
  background:#FFFFFF;
  border-right:1px solid #EBECEF;
  overflow-y:auto;
}
#tk-set-body{ flex:1 1 auto; background:#FFFFFF; min-width:0; }

#tk-set-menu li a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:40px;
  padding:8px 14px;
  margin:1px 8px;
  border-radius:8px;
  color:#2C2D2E;
  text-decoration:none;
}
#tk-set-menu li a:hover{ background:#EBECEF; }
#tk-set-menu li.selected a{ background:#EBECEF; font-weight:500; }

/* ---- контакты ---- */
#tk-book-list{
  flex:0 0 340px;
  background:#FFFFFF;
  border-right:1px solid #EBECEF;
  display:flex;
  flex-direction:column;
}
#tk-book-card{ flex:1 1 auto; background:#FFFFFF; min-width:0; }
#tk-books{ flex:1 1 auto; overflow-y:auto; padding:0 8px; }

/* ---- формы во фрейме ---- */
.tk-form-page{ background:#FFFFFF; }
#tk-form{ max-width:900px; margin:0 auto; padding:24px 28px; }

/* ---- окно написания ---- */
.tk-compose-page{ background:#FFFFFF; }
#tk-compose{ display:flex; flex-direction:column; height:100vh; }

#tk-compose-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid #EBECEF;
}
#tk-compose-title{ font-size:18px; font-weight:600; line-height:1.3; }
#tk-compose-x{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:#6F7178;
  text-decoration:none;
  font-size:22px;
  line-height:1;
}
#tk-compose-x:hover{ background:#EBECEF; color:#2C2D2E; }

.tk-send{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:10px;
  padding:12px 30px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.tk-send:hover{ background:#0D5FA0; }

.tk-cancel{
  margin-left:12px;
  padding:12px 22px;
  border-radius:10px;
  background:#F0F1F3;
  color:#2C2D2E;
  text-decoration:none;
  display:inline-block;
}
.tk-cancel:hover{ background:#EBECEF; }

/* ---- вход ---- */
.tk-login-page{
  background:#D6E6F5;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
#tk-login-wrap{ width:100%; display:flex; justify-content:center; }
#tk-login-card{
  width:min(92vw, 380px);
  background:#FFFFFF;
  border-radius:14px;
  padding:32px 30px 28px;
  box-shadow:0 12px 36px rgba(20,60,100,.16);
}
#tk-login-brand{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  margin-bottom:22px;
}

/* ---- ошибка ---- */
.tk-error-page{
  background:#F6F7F8;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
}
#tk-error-card{
  background:#FFFFFF;
  border-radius:14px;
  padding:30px 34px;
  max-width:440px;
  text-align:center;
  box-shadow:0 8px 28px rgba(20,60,100,.12);
}
#tk-error-brand{ font:600 18px/1.3 inherit; margin-bottom:14px; }
#tk-error-text{ color:#6F7178; margin-bottom:20px; }
.tk-error-back{
  display:inline-block;
  padding:11px 24px;
  border-radius:10px;
  background:#0F7BC4;
  color:#FFFFFF;
  text-decoration:none;
  font-weight:500;
}

/* ---- узкий экран: панель уезжает ---- */
@media (max-width:899px){
  #tk-side{
    position:fixed;
    top:0; bottom:0; left:0;
    width:min(84vw, 300px);
    z-index:1000;
    transform:translateX(-102%);
    transition:transform .18s ease-out;
    box-shadow:2px 0 16px rgba(20,40,70,.18);
  }
  html.tk-side-open #tk-side{ transform:translateX(0); }
  #tk-read, #tk-set-body, #tk-book-card{ display:none; }
  html.tk-reading #tk-list{ display:none; }
  html.tk-reading #tk-read{ display:block; flex:1 1 100%; }
}

/* ============================================================
   СТРОКА ПИСЬМА В СВОЕЙ ТЕМЕ

   Roundcube рисует строки скриптом, в разметке их нет — поэтому
   вид задаётся только стилями.

   Числа сняты пипеткой с эталона (кадр 02) и уже проверены
   обходом на прежней теме:
     шаг строки   48px
     круг         30px
     разделитель  #EBECEF
     тема         14px
     начало текста #6F7178
   ============================================================ */

#messagelist{
  width:100%;
  border-collapse:collapse;
  background:#FFFFFF;
}

#messagelist tbody tr{
  display:grid;
  grid-template-columns: 30px 190px 1fr auto 96px;
  align-items:center;
  gap:0 12px;
  height:48px;
  padding:0 16px;
  border-bottom:1px solid #EBECEF;
  cursor:pointer;
}
#messagelist tbody tr:hover{ background:#EBECEF; }
#messagelist tbody tr.selected{ background:#EBECEF; }

/* колонки по местам */
#messagelist tbody tr > td.fromto{
  grid-column:2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0;
  font-size:14px;
}
#messagelist tbody tr > td.subject{
  grid-column:3;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0;
  font-size:14px;
}
#messagelist tbody tr > td.date{
  grid-column:5;
  text-align:right;
  padding:0;
  font-size:13px;
  color:#6F7178;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* непрочитанное — жирным, как в эталоне */
#messagelist tbody tr.unread td.fromto,
#messagelist tbody tr.unread td.subject{
  font-weight:600;
}

/* лишние ячейки места не занимают */
#messagelist tbody tr > td.flag,
#messagelist tbody tr > td.attachment,
#messagelist tbody tr > td.threads,
#messagelist tbody tr > td.size,
#messagelist tbody tr > td.status,
#messagelist tbody tr > td.priority,
#messagelist thead{
  display:none;
}

/* круг с буквами — его рисует плагин */
#messagelist .tk-av{
  grid-column:1;
  justify-self:center;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:600 12px/1 inherit;
  color:#FFFFFF;
}

/* начало текста письма после темы */
#messagelist .tk-snip{
  color:#6F7178;
  font-weight:400;
  margin-left:8px;
}

/* разделители дней */
#messagelist tbody tr.msgheader td{
  padding:14px 16px 6px;
  font-size:13px;
  color:#6F7178;
  background:#FFFFFF;
  border:0;
}

/* на узком экране строка в две строчки */
@media (max-width:899px){
  #messagelist tbody tr{
    grid-template-columns:38px 1fr auto;
    grid-template-areas:'ав от дата' 'ав тема тема';
    height:auto;
    min-height:64px;
    padding:9px 14px;
    gap:2px 10px;
  }
  #messagelist .tk-av{ grid-area:ав; }
  #messagelist tbody tr > td.fromto{ grid-area:от; }
  #messagelist tbody tr > td.subject{ grid-area:тема; }
  #messagelist tbody tr > td.date{ grid-area:дата; }
  #messagelist .tk-snip{ display:none; }
}

/* ============================================================
   ОТКРЫТОЕ ПИСЬМО

   По эталону (кадр 04): белая шапка с разделительной линией,
   тема 22px полужирным, круглая аватарка 40px слева, имя
   отправителя жирным, дата серым. Тело письма колонкой до 900px.
   ============================================================ */

.tk-msg-page{ background:#FFFFFF; }

#tk-msgview{
  height:100vh;
  overflow-y:auto;
  background:#FFFFFF;
}

#tk-msg-head{
  padding:20px 26px 16px;
  border-bottom:1px solid #EBECEF;
  background:#FFFFFF;
}

#tk-msg-back{ margin-bottom:12px; }

.tk-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:9px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
.tk-back:hover{ background:#EBECEF; }

.tk-subject{
  font-size:22px;
  font-weight:600;
  line-height:1.32;
  color:#2C2D2E;
  margin:0 0 16px;
}

#tk-msg-from{
  display:flex;
  align-items:center;
  gap:14px;
}

.tk-msg-photo{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:50%;
  object-fit:cover;
  background:#EBECEF;
}

#tk-msg-who{ flex:1 1 auto; min-width:0; }

.tk-msg-sum{ font-size:14px; }
.tk-msg-sum .rcmContactAddress,
.tk-msg-sum .adr{ font-weight:600; color:#2C2D2E; }
.tk-msg-sum .date{ color:#6F7178; font-weight:400; font-size:13.5px; }

#tk-msg-acts{ display:flex; align-items:center; gap:4px; }

.tk-msg-headers{
  margin-top:12px;
  font-size:13.5px;
  color:#6F7178;
}

#tk-msg-body{
  max-width:900px;
  padding:22px 26px 40px;
  font-size:15px;
  line-height:1.55;
}

/* тело письма пишет отправитель — его шрифт не подменяем */
#messagebody, #messagebody *{ font-family:revert; }

/* вложения */
.tk-atts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 26px 12px;
  list-style:none;
  margin:0;
}
.tk-atts li a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid #EBECEF;
  border-radius:9px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:13.5px;
}
.tk-atts li a:hover{ background:#EBECEF; }

/* ============================================================
   КАРТОЧКА КОНТАКТА

   Фотография круг 96px, крупное имя, группы полей карточками.
   ============================================================ */

.tk-card-page{ background:#FFFFFF; }

#tk-card{
  max-width:900px;
  margin:0 auto;
  padding:24px 28px;
}

#tk-card-head{
  display:flex;
  align-items:center;
  gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid #EBECEF;
  margin-bottom:20px;
}

.tk-card-photo,
#contactpic{
  width:96px;
  height:96px;
  min-width:96px;
  border-radius:50%;
  object-fit:cover;
  background:#EBECEF;
}

#tk-card-name,
.tk-card-name{
  font-size:22px;
  font-weight:600;
  line-height:1.3;
  color:#2C2D2E;
}

.tk-card-fields fieldset{
  border:1px solid #EBECEF;
  border-radius:10px;
  padding:16px 20px;
  margin:0 0 14px;
}
.tk-card-fields legend{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  padding:0 0 10px;
}
.tk-card-fields label{
  font-size:13px;
  color:#6F7178;
  display:block;
  margin-bottom:4px;
}

/* ============================================================
   ФОРМЫ: настройки, профиль, папка, ответ

   Поля 40px с рамкой #D9DBDF, заголовок группы 19px,
   «Сохранить» синяя — всё по эталону.
   ============================================================ */

.tk-prefs fieldset{
  border:0;
  padding:0;
  margin:0 0 26px;
}
.tk-prefs legend{
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  color:#2C2D2E;
  padding:0 0 4px;
  margin:6px 0 14px;
}

.tk-prefs table{ width:100%; border-collapse:collapse; }

.tk-prefs tbody tr{ border-bottom:1px solid #EBECEF; }
.tk-prefs tbody tr:last-child{ border-bottom:0; }
.tk-prefs tbody tr > td{
  padding:14px 12px 14px 0;
  vertical-align:middle;
}
.tk-prefs td.title{
  width:52%;
  padding-right:24px;
  font-size:15px;
  color:#2C2D2E;
}

.tk-prefs input[type=text],
.tk-prefs input[type=email],
.tk-prefs input[type=password],
.tk-prefs input[type=number],
.tk-prefs select,
.tk-prefs textarea{
  min-height:40px;
  padding:9px 12px;
  border:1px solid #D9DBDF;
  border-radius:9px;
  /* см. пояснение ниже у «#tk-form select»: сокращение
     «background» гасит стрелку выпадающего списка */
  background-color:#FFFFFF;
  font-size:14px;
  width:100%;
}
.tk-prefs input:focus,
.tk-prefs select:focus{
  border-color:#0F7BC4;
  outline:2px solid rgba(15,123,196,.16);
}

.tk-prefs .hint{
  display:block;
  font-size:13px;
  color:#6F7178;
  margin-top:4px;
}

/* списки в настройках: папки, профили, ответы */
.tk-listing{ width:100%; border-collapse:collapse; }
.tk-listing tbody tr{ border-bottom:1px solid #EBECEF; cursor:pointer; }
.tk-listing tbody tr:last-child{ border-bottom:0; }
.tk-listing tbody tr:hover{ background:#EBECEF; }
.tk-listing tbody tr.selected{ background:#EBECEF; font-weight:500; }
.tk-listing tbody tr > td{ padding:12px 16px; font-size:14px; }

/* тумблер подписки — рядом с названием, а не у края */
.tk-folder-table td.subscription{
  width:72px;
  text-align:right;
  padding-right:16px;
}

/* ============================================================
   ОСТАВШИЕСЯ ЭКРАНЫ

   Вложение, печать, «о почте», окошко, страница плагина,
   разделы настроек. Без них шаблоны отдавались бы голыми.
   ============================================================ */

/* ---- разделы настроек: список слева ---- */
.tk-sections,
.tk-set-tabs{
  width:100%;
  border-collapse:collapse;
  list-style:none;
  margin:0;
  padding:8px 0;
}

.tk-sections tbody tr,
.tk-set-tabs li{
  cursor:pointer;
  border-bottom:1px solid #EBECEF;
}
.tk-sections tbody tr:last-child,
.tk-set-tabs li:last-child{ border-bottom:0; }

.tk-sections tbody tr > td,
.tk-set-tabs li a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:11px 16px;
  font-size:14px;
  color:#2C2D2E;
  text-decoration:none;
}
.tk-sections tbody tr:hover,
.tk-set-tabs li:hover{ background:#EBECEF; }
.tk-sections tbody tr.selected,
.tk-set-tabs li.selected{ background:#EBECEF; }
.tk-sections tbody tr.selected > td,
.tk-set-tabs li.selected a{ font-weight:500; }

/* ---- вложение, открытое отдельно ---- */
.tk-part-page{ background:#F6F7F8; }

#tk-part{
  display:flex;
  flex-direction:column;
  height:100vh;
}
#tk-part-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:#FFFFFF;
  border-bottom:1px solid #EBECEF;
}
.tk-part-ctl a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:9px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
.tk-part-ctl a:hover{ background:#EBECEF; }
#tk-part-frame{ flex:1 1 auto; background:#FFFFFF; }

/* ---- печать: только содержимое, без панелей ---- */
.tk-print-page{ background:#FFFFFF; }

#tk-print{
  max-width:820px;
  margin:0 auto;
  padding:26px 30px;
}
.tk-print-head{
  font-size:13.5px;
  color:#6F7178;
  padding-bottom:14px;
  border-bottom:1px solid #EBECEF;
  margin-bottom:18px;
}

@media print{
  .tk-print-page{ background:#FFFFFF; }
  #tk-print{ max-width:none; padding:0; }
  /* при печати ничего лишнего: ни кнопок, ни панелей */
  .tk-atts a{ text-decoration:none; color:#2C2D2E; }
}

/* ---- о почте ---- */
.tk-about-page{
  background:#F6F7F8;
  min-height:100vh;
  padding:30px 0;
}
#tk-about{
  max-width:640px;
  margin:0 auto;
  background:#FFFFFF;
  border-radius:14px;
  padding:26px 30px;
  box-shadow:0 6px 24px rgba(20,60,100,.08);
}
#tk-about-brand{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:18px;
}
#tk-about-plugins td{ padding:10px 14px; font-size:13.5px; }

/* ---- окошко: сюда Roundcube кладёт всплывающие формы ---- */
.tk-dialog-page{ background:#FFFFFF; }
#tk-dialog{ padding:22px 26px; }
#tk-dialog-body{ font-size:14px; }

/* ---- страница плагина: фильтры, автоответчик ---- */
.tk-plugin-page #tk-set-list{ flex:0 0 380px; }
#tk-plugin-body{ padding:8px 0; }

#tk-plugin-body ul{ list-style:none; margin:0; padding:0; }
#tk-plugin-body li{
  border-bottom:1px solid #EBECEF;
}
#tk-plugin-body li:last-child{ border-bottom:0; }
#tk-plugin-body li a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:46px;
  padding:12px 16px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
#tk-plugin-body li:hover a{ background:#EBECEF; }
#tk-plugin-body li.selected a{ background:#EBECEF; font-weight:500; }

/* ============================================================
   ТЁМНАЯ ТЕМА ДЛЯ СВОЕЙ РАЗМЕТКИ

   Подложка письма остаётся СВЕТЛОЙ: его вёрстку задаёт
   отправитель, и чёрный текст на чёрном не прочитать.
   ============================================================ */

html.dark-mode, html.dark-mode body{ background:#141518; color:#E8E9EB; }

html.dark-mode #tk-side,
html.dark-mode .tk-side-set,
html.dark-mode .tk-side-book{ background:#1A1B1F; border-right-color:#2A2C31; }

html.dark-mode #tk-list,
html.dark-mode #tk-set-list,
html.dark-mode #tk-book-list,
html.dark-mode #tk-read,
html.dark-mode #tk-set-body{ background:#141518; border-right-color:#2A2C31; }

html.dark-mode #messagelist,
html.dark-mode #messagelist tbody tr{ background:#141518; border-bottom-color:#2A2C31; }
html.dark-mode #messagelist tbody tr:hover,
html.dark-mode #messagelist tbody tr.selected{ background:#1F2126; }

html.dark-mode #tk-brand,
html.dark-mode #tk-folders li a,
html.dark-mode .tk-side-b{ color:#E8E9EB; }
html.dark-mode #tk-folders li a:hover,
html.dark-mode .tk-side-b:hover,
html.dark-mode #tk-folders li.selected > a{ background:#2A2C31; }

html.dark-mode .tk-write{ background:#1F2126; border-color:#33363C; color:#E8E9EB; }
html.dark-mode .tk-write:hover{ background:#2A2C31; }

html.dark-mode #tk-search input{ background:#1A1B1F; border-color:#2A2C31; color:#E8E9EB; }
html.dark-mode .tk-listbar,
html.dark-mode #tk-pages{ border-color:#2A2C31; }

/* письмо: шапка тёмная, ТЕЛО СВЕТЛОЕ */
html.dark-mode #tk-msg-head{ background:#1A1B1F; border-bottom-color:#2A2C31; }
html.dark-mode .tk-subject{ color:#E8E9EB; }
html.dark-mode #tk-msg-body,
html.dark-mode #messagebody,
html.dark-mode #messagebody *{ background:#FFFFFF; color:#2C2D2E; }

html.dark-mode .tk-listing tbody tr,
html.dark-mode .tk-prefs tbody tr,
html.dark-mode .tk-sections tbody tr{ border-bottom-color:#2A2C31; }
html.dark-mode .tk-listing tbody tr:hover,
html.dark-mode .tk-sections tbody tr:hover{ background:#1F2126; }

html.dark-mode .tk-prefs input,
html.dark-mode .tk-prefs select,
html.dark-mode .tk-prefs textarea{ background:#1A1B1F; border-color:#33363C; color:#E8E9EB; }
html.dark-mode .tk-prefs td.title,
html.dark-mode .tk-prefs legend{ color:#E8E9EB; }

html.dark-mode #tk-about,
html.dark-mode #tk-error-card,
html.dark-mode #tk-login-card{ background:#1F2126; color:#E8E9EB; }
html.dark-mode .tk-login-page{ background:#141518; }

/* ============================================================
   ВХОД — ПО ЖИВОМУ СНИМКУ

   Впервые увидел страницу глазами (в песочницу удалось поставить
   браузер из пакета @sparticuz/chromium). Беды оказались грубыми,
   и числами их было не поймать:

     поля ВЫЛЕЗАЛИ за карточку справа;
     подписи жались слева и переносились в две строки
       («Имя / пользователя»);
     поля почти без высоты — тонкие полоски;
     кнопка «Войти» слева, а не во всю ширину.

   Roundcube рисует форму входа таблицей. Раскладываем её
   заново: подпись НАД полем, поле во всю ширину.
   ============================================================ */

#tk-login-card table,
#tk-login-card tbody,
#tk-login-card tr,
#tk-login-card td{
  display:block;
  width:100%;
  padding:0;
  border:0;
}

#tk-login-card tr{ margin-bottom:14px; }

/* подпись над полем */
#tk-login-card td.title,
#tk-login-card label{
  display:block;
  width:100%;
  margin:0 0 6px;
  font-size:13.5px;
  color:#6F7178;
  white-space:normal;
  text-align:left;
}

/* поле во всю ширину карточки */
#tk-login-card input[type=text],
#tk-login-card input[type=password],
#tk-login-card input[type=email],
#tk-login-card select,
.tk-input{
  display:block;
  width:100%;
  min-height:44px;
  padding:11px 14px;
  border:1px solid #C7DAEC;
  border-radius:9px;
  background:#FFFFFF;
  font-size:15px;
  color:#2C2D2E;
}
#tk-login-card input:focus{
  border-color:#0F7BC4;
  outline:2px solid rgba(15,123,196,.16);
}

/* кнопка входа во всю ширину, как в эталоне.
   Глазик (.tk-eye) исключаем: иначе он растягивался синим на всё
   поле пароля и закрывал ввод. */
#tk-login-card button:not(.tk-eye),
#tk-login-card input[type=submit],
#tk-login-card .button{
  display:block;
  width:100%;
  min-height:46px;
  margin-top:6px;
  padding:12px 20px;
  border:0;
  border-radius:9px;
  background:#0F7BC4;
  color:#FFFFFF;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
#tk-login-card button:not(.tk-eye):hover{ background:#0D5FA0; }

/* сообщение об ошибке над формой */
#tk-login-card .tk-msg{
  margin-bottom:14px;
  padding:10px 14px;
  border-radius:9px;
  background:#FDECEC;
  color:#B03A3A;
  font-size:13.5px;
}

/* Кнопка входа лежит внутри ячейки таблицы, поэтому «во всю
   ширину» её не растянуло: ширину надо давать и ячейке.
   Видно на снимке — кнопка осталась узкой слева. */
#tk-login-card td:has(button),
#tk-login-card td:has(input[type=submit]),
#tk-login-card .formbuttons{
  display:block;
  width:100%;
}
#tk-login-card .formbuttons button{ width:100%; }

/* Пустая полоса сообщения: Roundcube рисует её всегда, даже
   когда сказать нечего. Прячем, пока в ней нет текста. */
#tk-login-card .tk-msg:empty,
#tk-msg:empty{ display:none; }

/* ---- по живому снимку списка ----
   Папки шли с маркерами-точками, как обычный список. */
#tk-folders ul,
#tk-folders li,
#tk-books ul,
#tk-books li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Поиск: подпись не нужна, поле сразу */
#tk-search .searchbar > label,
#tk-search legend{ display:none; }
#tk-search a.reset{
  font-size:13px;
  color:#6F7178;
  text-decoration:none;
  margin-left:8px;
}

/* Пустая область чтения — просто белое поле */
.tk-watermark{ background:#FFFFFF; margin:0; }

/* Подписи для чтения с экрана: нужны незрячим, но на экране
   их быть не должно. На снимке они вылезали как «[arialabel]». */
.voice,
h2.voice,
[id^=aria-label]{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ============================================================
   ОКНО ПИСЬМА — ПО ЖИВОМУ СНИМКУ

   Снимок показал: скрытые настройки (уведомление, важность,
   куда сохранить) ВЫЛЕЗЛИ НАРУЖУ и заняли пол-окна, а кнопки
   растянулись во всю ширину.

   Причина: правило «кнопка во всю ширину» я писал для входа,
   а оно задело и это окно. Разделяем.
   ============================================================ */

#tk-compose{ padding:0; }

/* поля От / Кому / Тема — колонкой, с воздухом */
.tk-cfields{
  padding:18px 24px 8px;
}
.tk-cfields table{ width:100%; border-collapse:collapse; }
.tk-cfields tr{ display:flex; align-items:center; gap:14px; padding:7px 0; }
.tk-cfields td.title,
.tk-cfields label{
  flex:0 0 72px;
  font-size:14px;
  color:#6F7178;
}
.tk-cfields td:last-child{ flex:1 1 auto; min-width:0; }
.tk-cfields input[type=text],
.tk-cfields input[type=email],
.tk-cfields select{
  width:100%;
  min-height:42px;
  padding:9px 13px;
  border:1px solid #EBECEF;
  border-radius:9px;
  font-size:14px;
}
.tk-cfields input:focus{
  border-color:#0F7BC4;
  outline:2px solid rgba(15,123,196,.14);
}

/* редактор письма занимает всё оставшееся место */
.tk-cbody,
#composebody{
  width:100%;
  min-height:340px;
  padding:14px 24px;
  border:0;
  font-size:15px;
  line-height:1.55;
  resize:none;
}

/* СКРЫТЫЕ настройки: уведомление, важность, куда сохранить.
   На снимке они вылезли наружу пустыми галочками и списками. */
#tk-compose input[type=checkbox]:not(.tk-sw),
#tk-compose select[name=_priority],
#tk-compose select[name=_store_target],
#tk-compose select[name=_editorSelect],
#tk-compose #compose-priority,
#tk-compose #compose-store-target,
#tk-compose #compose-editor,
#tk-compose #compose-mdn,
#tk-compose #compose-dsn,
#tk-compose #compose-keep{
  display:none;
}

/* низ окна: кнопки рядом, а не во всю ширину.
   Правило «во всю ширину» писалось для входа и задело это окно. */
#tk-compose .tk-send,
#tk-compose button.tk-send{
  display:inline-block;
  width:auto;
  margin:0;
}
#tk-compose .tk-cancel{
  display:inline-block;
  width:auto;
}
#compose-form{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 66px);
}
#compose-form > .tk-send,
#compose-form > .tk-cancel{
  align-self:flex-start;
}
#compose-form > .tk-send{
  margin:16px 0 0 24px;
}
#compose-form > .tk-cancel{
  margin:-46px 0 20px 190px;
}

/* подсказка о размере файла — мельче и серым */
#tk-compose .hint,
#compose-attachments .hint{
  font-size:13px;
  color:#6F7178;
  padding:0 24px 10px;
}

/* ============================================================
   НАСТРОЙКИ — ПО ЖИВОМУ СНИМКУ

   Снимок показал: разделы слева слиплись в одну строку ссылок
   «НастройкиПапкиПрофилиОтветы» — без пробелов и переносов.
   Плюс над списком висел лишний заголовок «Раздел».

   Причина: settingstabs выводит ссылки подряд, без обёрток.
   Раскладываем их сами.
   ============================================================ */

#tk-set-menu,
.tk-set-tabs{
  display:flex;
  flex-direction:column;
  padding:6px 8px;
}

#tk-set-menu a,
.tk-set-tabs a,
#tk-set-menu span > a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:40px;
  padding:9px 14px;
  margin:1px 0;
  border-radius:8px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
#tk-set-menu a:hover,
.tk-set-tabs a:hover{ background:#EBECEF; }
#tk-set-menu a.selected,
#tk-set-menu .selected a,
.tk-set-tabs .selected a{ background:#EBECEF; font-weight:500; }

/* заголовок «Раздел» над списком не нужен: и так видно,
   что это разделы. В эталоне его нет. */
.tk-sections thead,
#sections-table thead{ display:none; }

/* сам список разделов */
#sections-table{ width:100%; border-collapse:collapse; }
#sections-table tbody tr{
  border-bottom:1px solid #EBECEF;
  cursor:pointer;
}
#sections-table tbody tr:last-child{ border-bottom:0; }
#sections-table tbody tr > td{
  padding:12px 18px;
  font-size:14px;
  color:#2C2D2E;
}
#sections-table tbody tr:hover{ background:#EBECEF; }
#sections-table tbody tr.selected{ background:#EBECEF; }
#sections-table tbody tr.selected > td{ font-weight:500; }

/* ============================================================
   КОНТАКТЫ — ПО ЖИВОМУ СНИМКУ

   Книги слева шли голыми подчёркнутыми ссылками, налезая друг
   на друга. А над списком висел заголовок с «[action]» —
   Roundcube не нашёл метку для колонки действий.
   ============================================================ */

#tk-books,
#directorylist,
#savedsearchlist{
  display:flex;
  flex-direction:column;
  padding:6px 8px;
  list-style:none;
  margin:0;
}

#tk-books a,
#directorylist a,
#directorylist li a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:40px;
  padding:9px 14px;
  margin:1px 0;
  border-radius:8px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
}
#tk-books a:hover,
#directorylist a:hover{ background:#EBECEF; }
#directorylist li.selected a,
#tk-books li.selected a{ background:#EBECEF; font-weight:500; }

/* заголовки колонок: в эталоне их нет, а «[action]» —
   и вовсе ненайденная метка */
#contacts-table thead,
.tk-listing thead{ display:none; }

/* ============================================================
   ЗНАЧКИ ПАПОК

   Roundcube даёт папкам классы по их роли: inbox, drafts, sent,
   junk, trash, archive. Вешаем на них значки — иначе список
   папок идёт голым текстом, как на снимке.
   ============================================================ */

#tk-folders li > a::before{
  content:'';
  width:20px;
  height:20px;
  flex:0 0 20px;
  background:currentColor;
  -webkit-mask:var(--tk-icon) center/contain no-repeat;
  mask:var(--tk-icon) center/contain no-repeat;
  opacity:.75;
}
#tk-folders li.selected > a::before{ opacity:1; }

/* какой значок какой папке */
#tk-folders li.inbox > a,
#tk-folders li[class*=inbox] > a{ --tk-icon:var(--tk-icon-входящие); }
#tk-folders li.drafts > a{ --tk-icon:var(--tk-icon-черновики); }
#tk-folders li.sent > a{ --tk-icon:var(--tk-icon-отправленные); }
#tk-folders li.junk > a{ --tk-icon:var(--tk-icon-спам); }
#tk-folders li.trash > a{ --tk-icon:var(--tk-icon-корзина); }
#tk-folders li.archive > a{ --tk-icon:var(--tk-icon-архив); }

/* прочие папки — обычная папка */
#tk-folders li > a{ --tk-icon:var(--tk-icon-папка); }

/* ============================================================
   ПОПРАВКИ ПО КАДРАМ ЭТАЛОНА

   Кадры нашлись в присланном архиве (папка «как хочу»), и
   пипетка показала расхождение с тем, что я делал:

     разделитель строк   #ECEDEF — с ЗЕЛЁНЫМ оттенком,
                         а я делал серый #EBECEF
     под курсором        #E7EEF7 — тоже зеленоватый
     круг с буквами      32px, а не 30

   Мелочь, но именно из таких мелочей и складывается
   ощущение «не похоже».
   ============================================================ */

#messagelist tbody tr{
  border-bottom-color:#ECEDEF;
}
#messagelist tbody tr:hover,
#messagelist tbody tr.selected{
  background:#E7EEF7;
}

#messagelist .tk-av,
#messagelist span.tk-av{
  width:32px;
  height:32px;
  flex-basis:32px;
}

/* Строка эталона устроена так:
     точка · круг 32 · отправитель ~350 · счётчик ·
     тема жирная + начало текста серым ОДНОЙ строкой · дата

   Тема и начало текста идут подряд, не в разных колонках. */
@media (min-width:900px){
  #messagelist tbody tr[id^=rcmrow]{
    grid-template-columns: 32px 350px 1fr 96px;
  }
  #messagelist tbody tr > td.fromto{ grid-column:2; }
  #messagelist tbody tr > td.subject{ grid-column:3; }
  #messagelist tbody tr > td.date{ grid-column:4; }
}

/* Разделители по месяцам — подписью над группой, не линией */
#messagelist tbody tr.msgheader td,
#messagelist .tk-daysep td{
  padding:18px 16px 8px;
  font-size:14px;
  color:#2C2D2E;
  font-weight:400;
  border:0;
  background:#FFFFFF;
}

/* ============================================================
   ОКНО ПИСЬМА — ПО КАДРУ ЭТАЛОНА (v1-08)

   Замерено пипеткой с видео:
     окно            640 × 570, по центру экрана
     фон             #FFFFFF
     кнопка отправки #0F7BC4 (на кадре #599EE5 — это она же
                     под затемнением)
     панель правки   #EDEDED

   Устройство сверху вниз:
     круг с буквой · «Кому» · свернуть · развернуть · закрыть
     «Тема» · справа «Копия» и «Скрытая»
     Прикрепить файл · Из Облака · Из Почты
     панель правки: Ж К Ч · цвет · размер · выравнивание · списки
     поле письма
     Подпись
     внизу: Отправить · Сохранить · Отменить, справа значки
   ============================================================ */

.tk-compose-page{
  background:rgba(0,0,0,.42);
}

#tk-compose{
  width:min(94vw, 640px);
  height:min(92vh, 570px);
  margin:max(4vh, 20px) auto;
  background:#FFFFFF;
  border-radius:14px;
  box-shadow:0 16px 48px rgba(20,40,70,.24);
  overflow:hidden;
}

#tk-compose-head{
  padding:14px 20px 10px;
  border-bottom:0;
}
#tk-compose-title{ font-size:15px; color:#6F7178; font-weight:400; }

/* поля Кому и Тема — тонкой линией снизу, без рамки */
.tk-cfields input[type=text],
.tk-cfields input[type=email]{
  border:0;
  border-bottom:1px solid #EBECEF;
  border-radius:0;
  padding:10px 2px;
  min-height:38px;
}
.tk-cfields input:focus{
  border-bottom-color:#0F7BC4;
  outline:0;
}
.tk-cfields td.title,
.tk-cfields label{ flex-basis:56px; }

/* строка вложений: Прикрепить файл · Из Облака · Из Почты */
.tk-attrow{
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 24px;
  font-size:14px;
}
.tk-attrow a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2C2D2E;
  text-decoration:none;
}
.tk-attrow a:hover{ color:#0F7BC4; }

/* панель правки текста */
.tk-cbody + .mce-toolbar,
#tk-compose .mce-toolbar,
#tk-compose .toolbar-editor{
  background:#EDEDED;
  border:0;
  padding:6px 20px;
}

/* низ окна: кнопки слева, значки справа */
#compose-form{
  display:flex;
  flex-direction:column;
  height:calc(100% - 52px);
}
#compose-form > .tk-send{
  margin:0;
  order:90;
  align-self:flex-start;
  border-radius:9px;
  padding:10px 26px;
  font-size:14px;
}
#compose-form > .tk-cancel{
  order:91;
  align-self:flex-start;
  margin:-42px 0 16px 150px;
  padding:10px 22px;
  font-size:14px;
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА — ПО КАДРУ ЭТАЛОНА (v1-14, контакты)

   Устройство: заголовок слева крупно, рядом действия, справа
   поиск и крестик. Тело окна. Внизу основная кнопка, отмена
   и подсказка справа.

   Размеры с кадра: окно 640 шириной, скругление 14,
   отступы 24, шапка ~56.
   ============================================================ */

.ui-dialog,
#tk-dialog,
.tk-modal{
  background:#FFFFFF;
  border-radius:14px;
  box-shadow:0 16px 48px rgba(20,40,70,.24);
  border:0;
  padding:0;
  overflow:hidden;
  width:min(94vw, 640px);
}

.ui-dialog-titlebar,
.tk-modal-head{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px 24px 16px;
  border:0;
  background:#FFFFFF;
}
.ui-dialog-title,
.tk-modal-title{
  font-size:22px;
  font-weight:600;
  color:#2C2D2E;
  flex:0 0 auto;
}

/* поиск в шапке окна */
.tk-modal-head input[type=search],
.ui-dialog-titlebar input{
  margin-left:auto;
  min-height:38px;
  padding:8px 14px 8px 36px;
  border:0;
  border-radius:9px;
  background:#F0F1F3;
  font-size:14px;
  width:220px;
}

/* крестик справа */
.ui-dialog-titlebar-close,
.tk-modal-x{
  width:34px;
  height:34px;
  border:0;
  background:none;
  border-radius:8px;
  color:#6F7178;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
}
.ui-dialog-titlebar-close:hover,
.tk-modal-x:hover{ background:#F0F1F3; color:#2C2D2E; }

.ui-dialog-content,
.tk-modal-body{
  padding:0 24px 20px;
  min-height:200px;
}

/* низ окна: кнопка, отмена, подсказка справа */
.ui-dialog-buttonpane,
.tk-modal-foot{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px 20px;
  border:0;
  background:#FFFFFF;
}
.ui-dialog-buttonpane button:first-child,
.tk-modal-ok{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:9px;
  padding:10px 24px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.ui-dialog-buttonpane button:first-child:hover{ background:#0D5FA0; }
.ui-dialog-buttonpane button:not(:first-child),
.tk-modal-cancel{
  background:#FFFFFF;
  color:#2C2D2E;
  border:1px solid #DADCE0;
  border-radius:9px;
  padding:10px 22px;
  font-size:14px;
  cursor:pointer;
}
.tk-modal-hint{
  margin-left:auto;
  font-size:13.5px;
  color:#87898F;
}

/* затемнение за окном */
.ui-widget-overlay,
.tk-modal-back{
  background:rgba(0,0,0,.42);
}

/* ============================================================
   НАСТРОЙКИ — ПО КАДРУ ЭТАЛОНА (120142)

   Устроены иначе, чем я делал. В эталоне:

     фон страницы   #F6F7F8, а не белый
     содержимое     БЕЛОЙ КАРТОЧКОЙ со скруглением, не во всю
                    ширину: слева меню 260, дальше карточка
     заголовок      «Безопасность» — 30px полужирным
     группы         «Доступ к аккаунту», «Способы входа» —
                    заголовками 20px между строками
     строка         значок в сером кружке · название · описание
                    серым мельче · стрелка справа

   Я делал разделы простым списком без описаний и стрелок.
   ============================================================ */

.tk-set-page{ background:#F6F7F8; }

#tk-app.tk-set,
.tk-set-page #tk-app{ background:#F6F7F8; }

.tk-side-set{
  flex:0 0 260px;
  background:#F6F7F8;
  border-right:0;
}

/* содержимое — белой карточкой, а не во всю ширину */
#tk-set-list,
.tk-set-page #tk-set-list{
  flex:1 1 auto;
  background:#FFFFFF;
  border:0;
  border-radius:14px;
  margin:14px 20px 20px 0;
  padding:26px 30px;
  max-width:1000px;
  box-shadow:0 1px 3px rgba(20,60,100,.06);
}

/* заголовок раздела крупно */
.tk-sect{
  font-size:30px;
  font-weight:600;
  color:#2C2D2E;
  padding:0 0 22px;
}

/* заголовки групп внутри */
.tk-set-page legend,
#tk-set-list h2,
#tk-set-list .tk-group{
  font-size:20px;
  font-weight:600;
  color:#2C2D2E;
  margin:26px 0 14px;
  padding:0;
}

/* строка настройки: значок · название · описание · стрелка */
#sections-table tbody tr > td,
.tk-sections tbody tr > td{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 8px;
  border:0;
}
#sections-table tbody tr,
.tk-sections tbody tr{
  border-bottom:0;
  border-radius:10px;
}
#sections-table tbody tr:hover,
.tk-sections tbody tr:hover{ background:#F6F7F8; }

/* значок в сером кружке слева */
#sections-table tbody tr > td::before,
.tk-sections tbody tr > td::before{
  content:'';
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:50%;
  background:#F0F1F3;
  -webkit-mask:none;
  mask:none;
}

/* стрелка справа */
#sections-table tbody tr > td::after,
.tk-sections tbody tr > td::after{
  content:'';
  margin-left:auto;
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:#87898F;
  -webkit-mask:var(--tk-icon-вперёд) center/contain no-repeat;
  mask:var(--tk-icon-вперёд) center/contain no-repeat;
}

/* меню слева: без фона, простыми строками */
#tk-set-menu a,
.tk-set-tabs a{
  padding:10px 16px;
  border-radius:9px;
  color:#2C2D2E;
}
#tk-set-menu a:hover,
.tk-set-tabs a:hover{ background:#EBECEF; }
#tk-set-menu .selected a,
.tk-set-tabs .selected a{ background:#EBECEF; }

/* правая колонка не нужна: содержимое и так карточкой */
.tk-set-page #tk-set-body:empty{ display:none; }

/* ============================================================
   ФОРМЫ — ПО КАДРУ ЭТАЛОНА (120206, «Личные данные»)

   Устройство иное, чем я делал:
     подпись НАД полем, мелко (13px) и серым — я ставил слева
     поле в рамке со скруглением, шириной ~400
     «Сохранить» синяя, «Отменить» серая РЯДОМ, не под ней
     между парами полей воздух ~14

   Раньше подписи стояли слева колонкой на 52% — это вид
   Roundcube, а не эталона.
   ============================================================ */

.tk-prefs tbody tr,
.formcontent tbody tr,
#tk-form tbody tr{
  display:block;
  border:0;
  padding:0 0 14px;
}
.tk-prefs tbody tr > td,
.formcontent tbody tr > td,
#tk-form tbody tr > td{
  display:block;
  width:100%;
  padding:0;
}

/* подпись над полем: мелко и серым */
.tk-prefs td.title,
.formcontent td.title,
#tk-form td.title,
#tk-form label{
  width:100%;
  padding:0 0 5px;
  font-size:13px;
  color:#87898F;
  font-weight:400;
}

/* поле в рамке, не во всю ширину */
.tk-prefs input[type=text],
.tk-prefs input[type=email],
.tk-prefs input[type=password],
.tk-prefs select,
#tk-form input[type=text],
#tk-form select{
  width:100%;
  max-width:400px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid #DADCE0;
  border-radius:9px;
  font-size:14px;
  /* ИМЕННО background-color, а не сокращение «background».
     Сокращение сбрасывает background-image — вместе с ним
     пропадала стрелка выпадающего списка, которую задаёт общее
     правило «select{}» ниже. В настройках, профилях, ответах и
     правилах фильтрации списки выглядели полем ввода: щёлкать
     по ним никто не догадывался. */
  background-color:#FFFFFF;
}

/* кнопки внизу рядом */
.formbuttons,
#tk-form .formbuttons{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:20px;
}
.formbuttons button.submit,
.formbuttons button.btn-primary,
#tk-form .tk-send{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:9px;
  padding:11px 26px;
  font-size:15px;
  font-weight:500;
}
.formbuttons button:not(.submit):not(.btn-primary),
#tk-form .tk-cancel{
  background:#F0F1F3;
  color:#2C2D2E;
  border:0;
  border-radius:9px;
  padding:11px 22px;
  font-size:15px;
  margin:0;
}

/* ============================================================
   ОКНО ЧТЕНИЯ ПИСЬМА — ПО КАДРУ ЭТАЛОНА (115910)

   Устройство сверху вниз:

     рекламная полоса (у нас её нет — и не надо)
     ПАНЕЛЬ ДЕЙСТВИЙ, высота 61:
       ← · Удалить · В архив · В папку · Спам · … ·
       Ответить · Переслать        справа стрелки ⌃ ⌄
     полоса «Это письмо от надёжного отправителя» на #F0F1F4
     ТЕМА письма 24px полужирным, справа плашка «Учётные записи»
     строка отправителя: круг 32 · имя · дата · «Кому: вам»
       справа значки: закладка · архив · печать · ещё
     ТЕЛО ПИСЬМА — колонкой 604px, НЕ во всю ширину
     низ: «Сохранить в заметку» · «Отписаться от рассылки»

   Всё на белом. Никаких серых подложек, кроме полосы
   отправителя и низа.
   ============================================================ */

.tk-msg-page,
#tk-msgview{ background:#FFFFFF; }

/* панель действий сверху */
#tk-msg-head{
  padding:0;
  border-bottom:0;
}

#tk-msg-back{
  display:flex;
  align-items:center;
  gap:4px;
  height:61px;
  padding:0 20px;
  margin:0;
  border-bottom:1px solid #EBECEF;
}
.tk-back{
  width:36px;
  height:36px;
  padding:0;
  justify-content:center;
  border-radius:9px;
}

/* кнопки действий рядом со стрелкой «назад» */
#tk-msg-back a,
#tk-msg-head .tk-act{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  border-radius:9px;
  color:#2C2D2E;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
}
#tk-msg-back a:hover{ background:#F0F1F3; }

/* тема письма */
.tk-subject,
#tk-msg-subject{
  font-size:24px;
  font-weight:600;
  color:#2C2D2E;
  margin:0;
  padding:22px 26px 16px;
}

/* строка отправителя */
#tk-msg-from{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:0 26px 20px;
}
.tk-msg-photo{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:50%;
}
.tk-msg-sum .rcmContactAddress,
.tk-msg-sum .adr{
  font-weight:400;
  color:#2C2D2E;
  font-size:14px;
}
.tk-msg-sum .date{
  color:#87898F;
  font-size:13.5px;
  margin-left:8px;
}

/* значки справа в шапке письма */
#tk-msg-acts{
  margin-left:auto;
  gap:2px;
}
#tk-msg-acts a{
  width:34px;
  height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6F7178;
}
#tk-msg-acts a:hover{ background:#F0F1F3; color:#2C2D2E; }

/* ТЕЛО ПИСЬМА колонкой, а не во всю ширину */
#tk-msg-body{
  max-width:604px;
  margin:0 auto;
  padding:0 0 40px;
  font-size:15px;
  line-height:1.55;
}

/* полоса «от надёжного отправителя» */
.tk-msg-note{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 26px;
  padding:14px 18px;
  border-radius:10px;
  background:#F0F1F4;
  font-size:14px;
}

/* низ письма: заметка и отписка */
.tk-msgfoot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin:0 26px 20px;
  padding:14px 18px;
  border-radius:10px;
  background:#F0F1F4;
  font-size:14px;
}
.tk-msgfoot a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2C2D2E;
  text-decoration:none;
}

/* ============================================================
   РЕЖИМ ОТМЕТОК — ПО КАДРУ ЭТАЛОНА (115820)

   Когда письма отмечены, панель над списком МЕНЯЕТСЯ на:
     × · ✓1 · Выделить все · Удалить · В архив · В папку ·
     Спам · Прочитать · …

   Не появляется рядом, а именно заменяет обычную.
   ============================================================ */

.tk-listbar.tk-picked{
  gap:6px;
}
.tk-listbar.tk-picked > *{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  border-radius:9px;
  font-size:14px;
  color:#2C2D2E;
  background:none;
  border:0;
  cursor:pointer;
}
.tk-listbar.tk-picked > *:hover{ background:#F0F1F3; }

/* счётчик отмеченных */
.tk-lb-cnt{
  font-weight:500;
  color:#2C2D2E;
}

/* ============================================================
   РАЗДЕЛИТЕЛИ ПО МЕСЯЦАМ (кадр 115716)

   «Август 2026», «Июль 2026» — подписью над группой писем,
   обычным начертанием, серым. Не линией и не жирным.
   ============================================================ */

#messagelist tbody tr.msgheader td,
#messagelist .tk-daysep td,
.tk-monthsep{
  padding:20px 26px 10px;
  font-size:14px;
  font-weight:400;
  color:#2C2D2E;
  background:#FFFFFF;
  border:0;
}

/* ============================================================
   ОКНО ФИЛЬТРА — ПО КАДРУ ЭТАЛОНА (120250)

   То самое окно, которое было кривым: поля-обрубки, наезжающие
   кнопки. В эталоне устроено так:

     заголовок «Создание фильтра» 26px, крестик справа
     «Если выполнено условие» — заголовок группы 17px
     строка условия: [Поле «От» ▾] [содержит ▾] [   ] ×
       три поля В РЯД, крестик удаления в конце
     «+ Добавить условие» — синей ссылкой
     «Тогда» — вторая группа
     строка действия: [Поместить в папку ▾] [Входящие ▾]
     галочки списком, каждая с подписью
     внизу «Сохранить» синяя и «Отменить» серая

   Ключевое: поля в строке РАЗНОЙ ширины и стоят в ряд,
   а не столбиком. Крестик удаления — отдельно справа.
   ============================================================ */

#filter-form,
#vacation-form{
  padding:26px 30px;
  max-width:none;
}

#filter-form .tk-group,
#filter-form legend,
#filter-form h2{
  font-size:17px;
  font-weight:600;
  color:#2C2D2E;
  margin:22px 0 12px;
  padding:0;
  border:0;
}
#filter-form legend:first-of-type{ margin-top:0; }

/* строка условия: поля в ряд, разной ширины */
#filter-form .rulerow,
#filter-form .actionrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 0 10px;
  border:0;
  flex-wrap:nowrap;
}

#filter-form .rulerow select,
#filter-form .actionrow select{
  flex:0 0 auto;
  min-width:150px;
  max-width:240px;
  min-height:40px;
  padding:9px 30px 9px 13px;
  border:1px solid #DADCE0;
  border-radius:8px;
  background:#FFFFFF;
  font-size:14px;
}

#filter-form .rulerow input[type=text],
#filter-form input.rule-value,
#filter-form .actionrow input[type=text]{
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
  padding:9px 13px;
  border:1px solid #DADCE0;
  border-radius:8px;
  font-size:14px;
}

/* крестик удаления строки — простым значком справа */
#filter-form a.button.del,
#filter-form .rulerow .del{
  flex:0 0 32px;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  background:none;
  color:#2C2D2E;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:18px;
}
#filter-form a.button.del:hover{ background:#F0F1F3; }

/* «Добавить условие» — синей ссылкой, а не кнопкой */
#filter-form a.button.add,
#filter-form .add{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:none;
  border:0;
  padding:6px 0;
  color:#0F7BC4;
  font-size:14px;
  font-weight:400;
  text-decoration:none;
}
#filter-form a.button.add:hover{ text-decoration:underline; }
#filter-form a.button.add::before{
  content:'+';
  font-size:17px;
  line-height:1;
}

/* галочки списком */
#filter-form .rulerow label,
#filter-form .actionrow label,
#filter-form .checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  font-size:14px;
  color:#2C2D2E;
  cursor:pointer;
}

/* галочки в фильтре — квадратные, не тумблеры:
   тумблер тут смотрелся бы тяжело */
#filter-form input[type=checkbox]{
  appearance:auto;
  -webkit-appearance:auto;
  width:18px;
  height:18px;
  min-width:18px;
  max-width:18px;
  flex:0 0 18px;
  border-radius:4px;
  accent-color:#0F7BC4;
  background:none;
  box-shadow:none;
}
#filter-form input[type=checkbox]::after{ content:none; }

/* низ окна */
#filter-form .formbuttons{
  display:flex;
  gap:12px;
  padding-top:22px;
}

/* на узком экране поля переносятся */
@media (max-width:767px){
  #filter-form .rulerow,
  #filter-form .actionrow{ flex-wrap:wrap; }
  #filter-form .rulerow select,
  #filter-form .actionrow select{ max-width:none; flex:1 1 100%; }
}

/* Стрелка справа выходила серым квадратом: переменная
   --tk-icon-вперёд объявлена в :root, а маска ищет её на
   самом элементе. Задаём прямо здесь. */
#sections-table tbody tr > td::after,
.tk-sections tbody tr > td::after{
  --tk-icon:var(--tk-icon-вперёд);
  background:#C4C8CE;
}

/* Кружок слева пока пустой: значка для раздела Roundcube
   не даёт. Оставляем ровный серый круг — как в эталоне
   у разделов без своей картинки. */
#sections-table tbody tr > td::before,
.tk-sections tbody tr > td::before{
  background:#F0F1F3;
}

/* Заголовок раздела появляется скриптом плагина. Пока его
   нет, карточка начинается сразу со строк — это верно. */

/* Стрелка задана ПРЯМО, а не переменной: переменные из :root
   до псевдоэлементов ::after не доходят, и вместо стрелки
   выходил серый квадрат. Видно было на снимке. */
#sections-table tbody tr > td::after,
.tk-sections tbody tr > td::after,
#tk-set-menu a[href*="_action"]::after{
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+") center/contain no-repeat;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+") center/contain no-repeat;
  background:#C4C8CE;
}

/* Тема письма в темноте: новое правило по эталону задало ей
   цвет #2C2D2E без оглядки на тему, и в темноте она стала
   нечитаемой. Возвращаем светлый текст. */
html.dark-mode .tk-subject,
html.dark-mode #tk-msg-subject,
html.dark-mode h2.subject{
  color:#E8E9EB;
}
html.dark-mode #tk-msg-back{ border-bottom-color:#2A2C31; }
html.dark-mode .tk-msg-note,
html.dark-mode .tk-msgfoot{ background:#1F2126; }

/* ============================================================
   МЕНЮ ДЕЙСТВИЙ — ПО КАДРУ ЭТАЛОНА (115954)

   Меню под тремя точками в открытом письме. Устройство:

     ширина ~300, скругление 10, тень
     пункт: значок 20 · название · СПРАВА подсказка клавиши
     шаг пунктов 35, отступы 8×16
     разделители тонкой линией между группами
     у пунктов с подменю справа стрелка ›
     цветные значки: синяя точка «непрочитанным»,
       красный флажок, жёлтый ключ «категория»

   Подсказки клавиш — серым мельче основного текста.
   ============================================================ */

.tk-ctx,
.popupmenu,
.tk-menu{
  background:#FFFFFF;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(20,40,70,.18), 0 1px 3px rgba(20,40,70,.10);
  border:0;
  padding:6px 0;
  min-width:280px;
  max-width:340px;
}

.tk-ctx button,
.tk-ctx a,
.popupmenu li a,
.tk-menu button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:35px;
  padding:7px 16px;
  border:0;
  background:none;
  color:#2C2D2E;
  font-size:14px;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.tk-ctx button:hover,
.tk-ctx a:hover,
.popupmenu li a:hover{ background:#F0F1F3; }

/* значок пункта */
.tk-ctx .tk-i,
.popupmenu li a .tk-i{
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:#2C2D2E;
  opacity:.85;
}

/* подсказка клавиши справа, серым */
.tk-ctx .tk-key,
.tk-menu .tk-key{
  margin-left:auto;
  padding-left:20px;
  font-size:13px;
  color:#A0A2A8;
  font-weight:400;
}

/* стрелка у пунктов с подменю */
.tk-ctx button.tk-sub::after,
.tk-ctx a.tk-sub::after{
  content:'›';
  margin-left:auto;
  padding-left:16px;
  font-size:17px;
  color:#A0A2A8;
  line-height:1;
}
.tk-ctx button.tk-sub .tk-key{ margin-left:auto; padding-right:8px; }

/* разделители между группами */
.tk-ctx hr,
.tk-ctx .tk-sep,
.popupmenu li.separator{
  height:1px;
  margin:6px 0;
  border:0;
  background:#EBECEF;
}

/* цветные значки: как в эталоне */
.tk-ctx .tk-i-точка{ color:#0F7BC4; }
.tk-ctx .tk-i-флажок{ color:#E64646; }
.tk-ctx .tk-i-метка{ color:#F0B429; }

/* меню в темноте */
html.dark-mode .tk-ctx,
html.dark-mode .popupmenu{
  background:#232529;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}
html.dark-mode .tk-ctx button,
html.dark-mode .tk-ctx a{ color:#E8E9EB; }
html.dark-mode .tk-ctx button:hover{ background:#2E3136; }
html.dark-mode .tk-ctx hr{ background:#33363C; }

/* ============================================================
   НИЗ ОКНА ПИСЬМА — ПО КАДРУ ЭТАЛОНА (120113)

   Три кнопки слева в ряд:
     «Отправить» синяя · «Сохранить» серая · «Отменить» серая
   Справа четыре значка: важность · уведомление · напоминание ·
   отложенная отправка.

   Панель правки текста: Ж К Ч · подчёркивание · цвет · размер ·
   выравнивание · списки · отменить/вернуть · ссылка · картинка ·
   перевод · очистить. Справа «Шаблоны».

   Кнопка «Подпись» — отдельной плашкой над текстом.
   ============================================================ */

#compose-form{
  position:relative;
}

/* низ окна: кнопки слева, значки справа */
.tk-compose-foot,
#compose-form .formbuttons{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  border-top:1px solid #EBECEF;
  background:#FFFFFF;
}

#compose-form > .tk-send,
.tk-compose-foot .tk-send{
  order:1;
  margin:0;
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:9px;
  padding:10px 26px;
  font-size:14px;
  font-weight:500;
}

.tk-compose-foot .tk-save,
#compose-form .tk-save{
  order:2;
  background:#F0F1F3;
  color:#2C2D2E;
  border:0;
  border-radius:9px;
  padding:10px 22px;
  font-size:14px;
}

#compose-form > .tk-cancel,
.tk-compose-foot .tk-cancel{
  order:3;
  margin:0;
  background:#F0F1F3;
  color:#2C2D2E;
  border:0;
  border-radius:9px;
  padding:10px 22px;
  font-size:14px;
}

/* значки справа внизу */
.tk-compose-icons{
  order:9;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px;
}
.tk-compose-icons button,
.tk-compose-icons a{
  width:34px;
  height:34px;
  border:0;
  background:none;
  border-radius:8px;
  color:#6F7178;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tk-compose-icons button:hover{ background:#F0F1F3; color:#2C2D2E; }

/* панель правки текста */
#compose-form .mce-toolbar,
#compose-form .toolbar-editor,
.tk-editor-bar{
  display:flex;
  align-items:center;
  gap:2px;
  padding:8px 16px;
  background:#FFFFFF;
  border-top:1px solid #EBECEF;
  border-bottom:1px solid #EBECEF;
  flex-wrap:wrap;
}
.tk-editor-bar button{
  width:32px;
  height:32px;
  border:0;
  background:none;
  border-radius:7px;
  color:#2C2D2E;
  cursor:pointer;
}
.tk-editor-bar button:hover{ background:#F0F1F3; }

/* «Шаблоны» справа в панели правки */
.tk-editor-bar .tk-templates{
  margin-left:auto;
  color:#2C2D2E;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* плашка «Подпись» над текстом */
.tk-sign-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:14px 0 10px;
  padding:6px 14px;
  border:1px solid #DADCE0;
  border-radius:16px;
  font-size:13.5px;
  color:#2C2D2E;
  background:#FFFFFF;
  cursor:pointer;
}
.tk-sign-chip:hover{ background:#F0F1F3; }

html.dark-mode .tk-compose-foot,
html.dark-mode .tk-editor-bar{
  background:#1A1B1F;
  border-color:#2A2C31;
}
html.dark-mode .tk-compose-foot .tk-cancel,
html.dark-mode .tk-compose-foot .tk-save{ background:#2A2C31; color:#E8E9EB; }

/* ============================================================
   СТРАНИЦА ФИЛЬТРОВ — ПО КАДРУ ЭТАЛОНА (120235)

   Устройство:
     «Вернуться в почту» со стрелкой вверху слева
     меню разделов простыми строками, выбранный на #EBECEF
     карточка с заголовком «Правила фильтрации» 30px
     под ним ДВЕ кнопки в ряд:
       «Добавить фильтр» синяя · «Добавить пересылку» серая
     ниже подпись «У вас пока нет фильтров и пересылок»

   Раскрытый список выбора: белый, скругление 8, тень,
   выбранный пункт с галочкой слева.
   ============================================================ */

.tk-set-page .tk-back-mail{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:16px 0 20px 14px;
  padding:0;
  border:0;
  background:none;
  font-size:15px;
  color:#2C2D2E;
}
.tk-set-page .tk-back-mail:hover{ background:none; color:#0F7BC4; }

/* кнопки над списком фильтров */
.tk-filters-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 0 18px;
}
#layout-list > .header a.button.create,
.tk-filters-head .tk-add{
  background:#0F7BC4;
  color:#FFFFFF;
  border:0;
  border-radius:9px;
  padding:11px 22px;
  font-size:15px;
  font-weight:500;
}
.tk-filters-head .tk-add2{
  background:#F0F1F3;
  color:#2C2D2E;
  border:0;
  border-radius:9px;
  padding:11px 22px;
  font-size:15px;
}

/* подпись «пока нет фильтров» */
.tk-empty,
#filterslist:empty::after{
  display:block;
  padding:6px 0;
  font-size:15px;
  color:#2C2D2E;
}

/* раскрытый список выбора */
select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2387898F' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}

/* ============================================================
   ПАПКИ — ПО КАДРУ ЭТАЛОНА

   В списке папок эталона у каждой строки: значок, название,
   счётчик справа серым. Вложенные папки со сдвигом.
   ============================================================ */

#tk-folders li li > a{ padding-left:38px; }
#tk-folders li li li > a{ padding-left:58px; }

/* счётчик писем справа */
.tk-unread,
#tk-folders .unreadcount{
  margin-left:auto;
  font-size:13px;
  color:#87898F;
  font-variant-numeric:tabular-nums;
}
#tk-folders li.selected .tk-unread{ color:#2C2D2E; }

/* «Новая папка» — со знаком плюс, серым */
#tk-folders .tk-newfolder,
#tk-folders li:last-child > a[href*="folders"]{
  color:#87898F;
}

/* Рамка вокруг группы полей: на снимке видно тонкую линию
   вокруг «Основные настройки» — это рамка fieldset от браузера.
   В эталоне групп в рамках нет, только заголовок. */
.tk-prefs fieldset,
.formcontent fieldset,
#tk-form fieldset,
body.iframe fieldset{
  border:0;
  padding:0;
  margin:0 0 30px;
}
.tk-prefs legend,
#tk-form legend,
body.iframe legend{
  padding:0;
  margin:0 0 16px;
}

/* ============================================================
   ПОСЛЕДНИЕ ПОПРАВКИ ПО СНИМКАМ

   На своих кадрах видно:
     «Вернуться в почту» — кнопкой в рамке, а в эталоне это
       СТРОКА СО СТРЕЛКОЙ, без рамки;
     у книг контактов нет значков.
   ============================================================ */

.tk-back-mail{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 12px 18px;
  padding:8px 6px;
  border:0;
  background:none;
  font-size:15px;
  color:#2C2D2E;
  text-decoration:none;
}
.tk-back-mail:hover{ background:none; color:#0F7BC4; }
.tk-back-mail::before{
  content:'';
  width:18px; height:18px; flex:0 0 18px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTkgMTJINU0xMiAxOWwtNy03IDctNyIvPjwvc3ZnPg==") center/contain no-repeat;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTkgMTJINU0xMiAxOWwtNy03IDctNyIvPjwvc3ZnPg==") center/contain no-repeat;
}

/* значок у книг контактов */
#directorylist li > a::before,
#tk-books li > a::before{
  content:'';
  width:20px; height:20px; flex:0 0 20px;
  background:currentColor;
  opacity:.75;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAyMXYtMmE0IDQgMCAwIDAtNC00SDhhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+") center/contain no-repeat;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAyMXYtMmE0IDQgMCAwIDAtNC00SDhhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+") center/contain no-repeat;
}
#directorylist li.selected > a::before{ opacity:1; }

/* Названия книг переносились в две строки: панель 220 узка для
   «Персональные адреса». В эталоне панель настроек шире. */
.tk-side-book,
.tk-side-set{ flex:0 0 260px; }

#directorylist li > a,
#tk-books li > a{
  min-height:auto;
  padding:10px 14px;
  line-height:1.35;
}

/* ============================================================
   ОКНО ПИСЬМА: ПОЛЯ БЕЗ ПОДПИСЕЙ

   На своём снимке видно: поля есть, а подписей «Кому» и «Тема»
   нет — только пустые полосы. Причина в том, что Roundcube
   выводит подпись отдельным элементом, а мой селектор её
   не находил.

   И кнопки внизу не видны: они за краем окна, потому что
   высота задана жёстко, а содержимое выше.
   ============================================================ */

/* поля письма: подпись слева, поле справа */
#compose-form .tk-cfield,
#compose-form > select,
#compose-form > input[type=text]{
  display:block;
  width:calc(100% - 40px);
  margin:0 20px 2px;
  min-height:42px;
  padding:10px 2px;
  border:0;
  border-bottom:1px solid #EBECEF;
  border-radius:0;
  font-size:14px;
  background:none;
}
#compose-form .tk-cfield:focus{
  border-bottom-color:#0F7BC4;
  outline:0;
}

/* подписи полей: Roundcube их не даёт, ставим сами */
#compose-form > select::before{ content:'От'; }

/* высота окна: содержимое должно помещаться */
#tk-compose{
  height:auto;
  max-height:92vh;
  display:flex;
  flex-direction:column;
}
#compose-form{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow-y:auto;
}

/* поле письма занимает остаток */
#composebody,
.tk-cbody{
  flex:1 1 auto;
  min-height:220px;
  margin:8px 20px;
  padding:12px 2px;
  border:0;
  width:calc(100% - 40px);
}

/* кнопки внизу видны всегда */
#compose-form > .tk-send,
#compose-form > .tk-cancel{
  position:sticky;
  bottom:0;
  align-self:flex-start;
  margin:12px 0 12px 20px;
}
#compose-form > .tk-cancel{
  margin:-52px 0 12px 150px;
}

/* подпись поля в окне письма */
.tk-clabel{
  display:block;
  margin:10px 20px 0;
  font-size:13px;
  color:#87898F;
}

/* ============================================================
   ТЕЛЕФОН — ПО СНИМКУ С ЖИВОГО СЕРВЕРА

   На кадре 1080 точек шириной видно:
     круг НАЛЕЗАЕТ на имя отправителя;
     тема обрезана до «Есть новый з»;
     справа пустые серые квадраты — значки без картинки;
     разделители дней («Сегодня», «На этой неделе») налезают
       на первую строку группы.

   Причина: сетка строки написана под широкий экран. На узком
   колонки не помещаются и наезжают друг на друга.

   Здесь строка перестраивается: круг · имя и дата сверху,
   тема во всю ширину снизу.
   ============================================================ */

@media (max-width:899px){

  /* три колонки: круг, содержимое, дата */
  #messagelist tbody tr[id^=rcmrow]{
    display:grid !important;
    grid-template-columns:40px 1fr auto !important;
    grid-template-areas:
      'ав от дата'
      'ав тема тема' !important;
    align-items:center !important;
    column-gap:12px !important;
    row-gap:2px !important;
    height:auto !important;
    min-height:66px !important;
    padding:10px 14px !important;
  }

  /* круг на своём месте, не поверх имени */
  #messagelist .tk-av,
  #messagelist span.tk-av{
    grid-area:ав !important;
    justify-self:start !important;
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
    position:static !important;
    margin:0 !important;
  }

  #messagelist tbody tr > td.fromto{
    grid-area:от !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:14px !important;
    padding:0 !important;
  }

  #messagelist tbody tr > td.date{
    grid-area:дата !important;
    text-align:right !important;
    font-size:12.5px !important;
    color:#87898F !important;
    white-space:nowrap !important;
    padding:0 !important;
  }

  /* тема во всю ширину снизу, с многоточием */
  #messagelist tbody tr > td.subject{
    grid-area:тема !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:14px !important;
    padding:0 !important;
  }

  /* начало текста на телефоне не помещается */
  #messagelist .tk-snip{ display:none !important; }

  /* пустые квадраты справа: это ячейки без содержимого */
  #messagelist tbody tr > td.flag,
  #messagelist tbody tr > td.attachment,
  #messagelist tbody tr > td.threads,
  #messagelist tbody tr > td.size,
  #messagelist tbody tr > td.status,
  #messagelist tbody tr > td.priority,
  #messagelist tbody tr > td.folder,
  #messagelist tbody tr > td:empty{
    display:none !important;
  }

  /* разделители дней: отдельной строкой, не поверх письма */
  #messagelist tbody tr.msgheader,
  #messagelist tbody tr.msgheader td,
  #messagelist .tk-daysep{
    display:block !important;
    grid-template-columns:none !important;
    min-height:0 !important;
    height:auto !important;
    padding:16px 14px 6px !important;
    font-size:13.5px !important;
    color:#87898F !important;
    background:#FFFFFF !important;
    border:0 !important;
  }

  /* панель папок уезжает за край */
  #tk-side{
    position:fixed !important;
    top:0; bottom:0; left:0;
    width:min(82vw, 300px) !important;
    flex-basis:auto !important;
    z-index:1000;
    transform:translateX(-102%);
    transition:transform .18s ease-out;
    box-shadow:2px 0 16px rgba(20,40,70,.18);
  }
  html.tk-side-open #tk-side{ transform:translateX(0) !important; }

  #tk-list{ flex:1 1 100% !important; }
  #tk-read, #tk-set-body, #tk-book-card{ display:none !important; }

  /* при чтении письма список прячется */
  html.tk-reading #tk-list{ display:none !important; }
  html.tk-reading #tk-read{ display:block !important; flex:1 1 100% !important; }

  /* поиск и панель над списком */
  #tk-search{ padding:8px 14px !important; }
  .tk-listbar{ padding:6px 14px !important; gap:12px !important; }

  /* тело письма во всю ширину: колонка 604 тут ни к чему */
  #tk-msg-body{ max-width:none !important; padding:0 16px 30px !important; }
  #tk-msg-head{ padding:0 !important; }
  .tk-subject{ font-size:20px !important; padding:16px 16px 12px !important; }
  #tk-msg-from{ padding:0 16px 16px !important; }
}

/* ============================================================
   СРЕДНИЕ ЭКРАНЫ: планшет и узкое окно

   Между 900 и 1200 колонка отправителя в 350 съедает место,
   и тема остаётся без ширины.
   ============================================================ */

@media (min-width:900px) and (max-width:1199px){
  #messagelist tbody tr[id^=rcmrow]{
    grid-template-columns: 32px 220px 1fr 90px;
  }
  #tk-side{ flex:0 0 200px; }
  #messagelist .tk-snip{ display:none; }
}

@media (min-width:1200px) and (max-width:1499px){
  #messagelist tbody tr[id^=rcmrow]{
    grid-template-columns: 32px 280px 1fr 96px;
  }
}

/* кнопка папок — только на узком экране */
.tk-side-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:0; background:none; border-radius:9px;
  color:#2C2D2E; cursor:pointer; padding:0;
  margin:8px 0 0 10px;
}
@media (max-width:899px){
  .tk-side-toggle{ display:inline-flex !important; }
  #tk-search{ padding-top:0 !important; }
}
.tk-side-toggle:hover{ background:#F0F1F3; }

/* затемнение под выдвинутой панелью */
@media (max-width:899px){
  html.tk-side-open #tk-list::before{
    content:'';
    position:fixed; inset:0;
    background:rgba(0,0,0,.4);
    z-index:999;
  }
}

/* ============================================================
   ТЕКУЧАЯ РАСКЛАДКА — ПОДХОД 2026 ГОДА

   Прежде я расставлял ступени под устройства: 412, 768, 1200.
   Между ними вид никем не задан, и на 950 или 2560 он ехал.
   Так делали в 2015 году.

   Сейчас принято иначе, и это решает задачу целиком:

     clamp()            размер плавно растёт с шириной окна,
                        без скачков на ступенях
     запросы к вместилищу  часть подстраивается под СВОЁ место,
                        а не под окно
     внутренняя сетка   колонки сами делятся местом
     dvh                высота считает полосу браузера на
                        телефоне: с vh низ уезжает под неё

   Ступени ниже остаются для смены раскладки — когда колонка
   должна стать строкой. Но размеры между ними текут.
   ============================================================ */

:root{
  /* Ширины текут: min, желаемая, max.
     Панель папок от 200 до 280, отправитель от 140 до 350. */
  --tk-side-w:  clamp(200px, 18vw, 280px);
  /* Колонка отправителя была до 350 точек — между именем и темой
     зияла пустая полоса чуть ли не в треть списка. В эталоне имя
     занимает около двухсот точек, дальше сразу тема. */
  --tk-from-w:  clamp(120px, 14vw, 210px);
  --tk-date-w:  clamp(72px, 7vw, 110px);
  --tk-read-w:  clamp(320px, 60vw, 900px);

  /* Отступы тоже: тесно на телефоне, просторно на мониторе */
  --tk-pad:     clamp(12px, 1.6vw, 26px);
  --tk-pad-sm:  clamp(8px, 1vw, 16px);

  /* Размеры букв текут между заданными пределами */
  --tk-fs-base:    clamp(13.5px, 0.9vw, 15px);
  --tk-fs-subject: clamp(19px, 1.6vw, 24px);
  --tk-fs-title:   clamp(22px, 2vw, 30px);
}

/* высота считает полосу браузера на телефоне */
#tk-app,
#tk-msgview,
#tk-compose{
  height:100dvh;
}
#tk-compose{ height:auto; max-height:92dvh; }

/* панель папок течёт */
#tk-side{ flex:0 0 var(--tk-side-w); }
.tk-side-set,
.tk-side-book{ flex:0 0 clamp(200px, 20vw, 300px); }

/* колонка чтения течёт */
#tk-msg-body{ max-width:var(--tk-read-w); }

/* строка письма: колонки текут, ступеней не нужно */
@media (min-width:56rem){
  #messagelist tbody tr[id^=rcmrow]{
    grid-template-columns:
      32px
      var(--tk-from-w)
      minmax(0, 1fr)
      var(--tk-date-w) !important;
  }
}

/* Запрос к вместилищу: строка смотрит на СВОЁ место, а не на
   окно. Если колонка списка узкая — например, справа открыто
   письмо, — строка складывается в две строчки даже на широком
   мониторе. Ступени этого не умеют. */
#tk-list,
#tk-rows{ container-type:inline-size; container-name:список; }

@container список (max-width:600px){
  #messagelist tbody tr[id^=rcmrow]{
    grid-template-columns:36px minmax(0,1fr) auto !important;
    grid-template-areas:'ав от дата' 'ав тема тема' !important;
    height:auto !important;
    min-height:64px !important;
    row-gap:2px !important;
  }
  #messagelist .tk-av{ grid-area:ав !important; }
  #messagelist td.fromto{ grid-area:от !important; }
  #messagelist td.subject{ grid-area:тема !important; }
  #messagelist td.date{ grid-area:дата !important; }
  #messagelist .tk-snip{ display:none !important; }
}

/* Начало текста прячется, когда теме мало места — считает
   вместилище, а не ширину окна. */
@container список (max-width:900px){
  #messagelist .tk-snip{ display:none; }
}

/* отступы и буквы текут везде */
#tk-search,
.tk-listbar,
#tk-msg-head,
#tk-msg-from,
.tk-subject{
  padding-left:var(--tk-pad);
  padding-right:var(--tk-pad);
}
body,
#messagelist td.fromto,
#messagelist td.subject{ font-size:var(--tk-fs-base); }
.tk-subject,
#tk-msg-subject{ font-size:var(--tk-fs-subject); }
.tk-sect{ font-size:var(--tk-fs-title); }

/* На очень широком мониторе список не растягивается бесконечно,
   но и пустоты справа нет: письмо занимает остаток. */
/* Раньше здесь с 1920 точек список зажимался в 820 — независимо
   от того, открыто письмо или нет. Именно эта строка делала список
   узкой полосой посреди пустого экрана, когда наш режим списка не
   включался. Ширину теперь задаёт раскладка колонок, а не отсечка. */
@media (min-width:120rem){
  #tk-read{ flex:1 1 auto; }
}

/* Плавность выключается, если человек просил её убрать */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   100. ЕДИНЫЙ СЛОЙ СТРОКИ СПИСКА (mail.ru)

   Прежде раскладку строки задавали ТРИ набора правил разом —
   колоночный flex, однострочный и CSS-grid по контейнеру, —
   в перекрывающихся медиазапросах. Они гасили друг друга:
   отступ под аватарку то был, то нет, колонки съезжали.

   Этот раздел — последний по счёту, поэтому он и решает.
   Одна раскладка на flex, замеры сняты с эталона:
   строка 48, круг 32, отправитель ~330, дата справа,
   разделитель #ECEDEF (зеленоватый), под курсором #E7EEF7.
   ============================================================ */
/* РАЗМЕРЫ ЗАДАНЫ ТЕКУЧЕ, А НЕ СТУПЕНЯМИ.

   Раньше здесь стояло пять медиазапросов подряд: 900, 1099, 1280,
   1440, 1920 — и в каждом свои числа. Так делать нельзя, и вот
   почему:

     • между ступенями раскладка не менялась вовсе. На 1441 и на
       1919 точках колонка отправителя одна и та же, хотя места
       рядом — на 480 точек больше. Всё лишнее уходило в пустоту;
     • экран, не попавший ни в одну ступень (1366 у ноутбуков,
       1600 у мониторов 21:9, окно, растянутое на половину
       монитора), получал числа от СОСЕДНЕЙ ступени — те, что для
       него никто не подбирал;
     • ступени в разных разделах файла перекрывались и гасили
       друг друга: отступ под круг то был, то пропадал.

   Ширина окна — величина непрерывная, и размеры должны меняться
   вместе с ней непрерывно. Это и делает clamp(): наименьшее
   значение, желаемое (доля ширины окна) и наибольшее. Одна
   строка вместо пяти запросов, и на ЛЮБОЙ ширине размер
   осмысленный, а не унаследованный от ближайшей ступени.

   Медиазапрос остаётся ровно один — на 900 точках, и он меняет
   не размеры, а СТРОЕНИЕ страницы: панель папок уезжает за край
   и выдвигается кнопкой. Это настоящая смена раскладки, её
   долей ширины не выразить. */
@media (min-width:900px){
  :root{
    --tk-from:clamp(170px, 14vw, 300px);   /* колонка отправителя */
    --tk-date:clamp(76px,  5.5vw, 118px);  /* колонка даты        */
    --tk-av:clamp(28px,   2.1vw, 36px);    /* круг с буквами      */
    --tk-row:clamp(44px,  3.2vw, 52px);    /* высота строки       */
  }
}

@media (min-width:900px){

  html.tk-list-mode #messagelist,
  html.tk-list-mode #messagelist > thead,
  html.tk-list-mode #messagelist > tbody{ display:block !important; width:100% !important; }
  html.tk-list-mode #messagelist > thead{ display:none !important; }

  /* строка */
  html.tk-list-mode #messagelist tbody tr[id^=rcmrow]{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:var(--tk-row) !important;
    height:auto !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 14px 0 0 !important;
    position:relative !important;
    background:#FFFFFF !important;
    border:0 !important;
    border-bottom:1px solid #ECEDEF !important;
    /* сбрасываем возможный grid из прежних слоёв */
    grid-template-columns:none !important;
    grid-template-areas:none !important;
  }
  html.tk-list-mode #messagelist tbody tr[id^=rcmrow]:hover{ background:#E7EEF7 !important; }
  html.tk-list-mode #messagelist tbody tr[id^=rcmrow].selected,
  html.tk-list-mode #messagelist tbody tr[id^=rcmrow].focused{ background:#E7EEF7 !important; }

  /* лишние ячейки убираем */
  html.tk-list-mode #messagelist tbody tr > td.selection,
  html.tk-list-mode #messagelist tbody tr > td.threads,
  html.tk-list-mode #messagelist tbody tr > td.status,
  html.tk-list-mode #messagelist tbody tr > td.size,
  html.tk-list-mode #messagelist tbody tr > td.flag,
  html.tk-list-mode #messagelist tbody tr > td.priority,
  html.tk-list-mode #messagelist tbody tr > td.attachment{ display:none !important; }

  /* общий вид ячеек-колонок */
  html.tk-list-mode #messagelist tbody tr > td{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    height:auto !important;
    border:0 !important;
    background:transparent !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    padding:0 !important;
  }

  /* колонка отправителя + аватар */
  html.tk-list-mode #messagelist tbody tr > td.fromto,
  html.tk-list-mode #messagelist tbody tr > td.from{
    order:2 !important;
    flex:0 0 var(--tk-from) !important;
    max-width:var(--tk-from) !important;
    position:relative !important;
    padding-left:54px !important;
    padding-right:14px !important;
    color:var(--tk-text) !important;
  }
  html.tk-list-mode #messagelist tbody tr.unread > td.fromto,
  html.tk-list-mode #messagelist tbody tr.unread > td.from{ font-weight:600 !important; }
  html.tk-list-mode #messagelist tbody tr > td.fromto span.adr,
  html.tk-list-mode #messagelist tbody tr > td.fromto span.rcmContactAddress{
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
    min-width:0 !important; max-width:100% !important;
  }

  /* аватар: всегда у левого края строки, в отступе колонки «От» */
  html.tk-list-mode #messagelist tbody tr span.tk-av{
    position:absolute !important;
    left:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:var(--tk-av) !important; height:var(--tk-av) !important;
    min-width:var(--tk-av) !important; max-width:var(--tk-av) !important;
    border-radius:50% !important;
    z-index:3 !important;
  }
  /* при разделителе месяца аватар опускается под подпись */
  html.tk-list-mode #messagelist tbody tr.tk-gstart span.tk-av{
    top:calc(50% + 13px) !important;
  }

  /* колонка темы: тема жирная + начало текста серым одной строкой */
  html.tk-list-mode #messagelist tbody tr > td.subject{
    order:3 !important;
    flex:1 1 auto !important;
    max-width:none !important;
    padding-right:14px !important;
    gap:7px !important;
  }
  html.tk-list-mode #messagelist tbody tr > td.subject a,
  html.tk-list-mode #messagelist tbody tr > td.subject span.subject{
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
    min-width:0 !important; color:var(--tk-text) !important;
  }
  html.tk-list-mode #messagelist tbody tr.unread > td.subject a,
  html.tk-list-mode #messagelist tbody tr.unread > td.subject span.subject{ font-weight:600 !important; }
  html.tk-list-mode #messagelist tbody tr > td.subject span.tk-snip{
    color:var(--tk-muted) !important; font-weight:400 !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }

  /* колонка даты справа */
  html.tk-list-mode #messagelist tbody tr > td.date{
    order:8 !important;
    flex:0 0 var(--tk-date) !important;
    justify-content:flex-end !important;
    color:var(--tk-muted) !important;
    font-size:13px !important;
    font-variant-numeric:tabular-nums;
  }

  /* точка непрочитанного у самого края */
  html.tk-list-mode #messagelist tbody tr.unread::before{
    content:'' !important;
    position:absolute !important;
    left:2px !important; top:50% !important;
    width:6px !important; height:6px !important;
    margin-top:-3px !important;
    border-radius:50% !important;
    background:#2688EB !important;
    z-index:4 !important;
  }
  html.tk-list-mode #messagelist tbody tr.tk-gstart.unread::before{ top:calc(50% + 13px) !important; }

  /* быстрые действия (появляются при наведении) прижаты к правому краю */
  html.tk-list-mode #messagelist tbody tr > td.tk-actcell{
    order:9 !important; flex:0 0 auto !important;
    position:absolute !important; right:14px !important;
    background:transparent !important;
  }
}

/* разделитель месяца — серая подпись НАД группой, всегда на белом.

   Отступ над группой делаем margin-top (он ВНЕ фона строки), поэтому
   подсветка выделенной/наведённой строки больше не залезает на подпись.
   Саму подпись рисуем в этот зазор через ::after с отрицательным top. */
html.tk-list-mode #messagelist tbody tr.tk-gstart[id^=rcmrow]{
  margin-top:30px !important;
  padding-top:0 !important;
  min-height:var(--tk-row) !important;
  align-items:center !important;
  overflow:visible !important;
}
#messagelist tbody tr.tk-gstart > td{ padding-top:0 !important; }
#messagelist tbody tr.tk-gstart::after{
  content:attr(data-tkgroup);
  position:absolute; left:14px; top:-21px;
  font-size:13px; font-weight:500; color:var(--tk-muted);
  pointer-events:none; white-space:nowrap; z-index:2;
}
/* чтобы подпись самой первой группы не пряталась под верхний край */
#tk-rows{ padding-top:10px; }

/* ---- быстрые действия и «⋯» показываем только при наведении на строку ---- */
@media (min-width:900px){
  html.tk-list-mode #messagelist tbody tr span.tk-more,
  html.tk-list-mode #messagelist tbody tr span.tk-quick{
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .1s;
  }
  html.tk-list-mode #messagelist tbody tr:hover span.tk-more,
  html.tk-list-mode #messagelist tbody tr:hover span.tk-quick{
    opacity:1 !important;
    pointer-events:auto !important;
  }
  html.tk-list-mode #messagelist tbody tr span.tk-more{
    background:transparent !important;
    box-shadow:none !important;
  }
}

/* ============================================================
   101. ОТКРЫТОЕ ПИСЬМО / ПРЕВЬЮ — чистая шапка как в mail.ru
   ============================================================ */
/* Полный блок «Тема / От / Кому / Дата» в эталоне свёрнут:
   сверху только тема, аватар, имя отправителя и дата. */
.tk-msg-headers{ display:none !important; }

/* Фото отправителя: круг. Если картинки нет — серый круг
   без значка «битой картинки» и без текста alt. */
.tk-msg-photo{
  width:40px !important; height:40px !important; min-width:40px !important;
  border-radius:50% !important; object-fit:cover !important;
  background:#DDE3EA !important;
  font-size:0 !important; color:transparent !important;
  overflow:hidden !important;
}

/* «Добавить в контакты» рядом с именем в эталоне не показывают —
   и его значок сейчас битый. Убираем и ссылку, и картинку. */
.tk-msg-sum a.rcmaddcontact,
.tk-msg-sum a[href*="_action=add"],
.tk-msg-sum a[onclick*="add-contact"],
.tk-msg-sum img{ display:none !important; }

/* «⋯» и быстрые действия скрыты до наведения — во ВСЕХ списках
   (письма, контакты, профили, папки), не только в письмах. */
.tk-more, .tk-quick{ opacity:0 !important; pointer-events:none !important; transition:opacity .1s; }
tr:hover .tk-more, tr:hover .tk-quick,
li:hover .tk-more, li:hover .tk-quick,
.tk-listrow:hover .tk-more, .tk-listrow:hover .tk-quick{ opacity:1 !important; pointer-events:auto !important; }
.tk-more{ background:transparent !important; box-shadow:none !important; }

/* ============================================================
   102. МОБИЛЬНАЯ СТРОКА СПИСКА (<900px)

   На узком экране mail.ru кладёт письмо в две строки:
   аватар слева во всю высоту, справа сверху — отправитель и
   дата, снизу — тема. Начало текста прячется.

   Прежде здесь работали старые правила от мёртвой разметки,
   и аватар налезал на строку выше. Теперь — свой чистый слой.
   ============================================================ */
@media (max-width:899px){
  html.tk-list-mode #messagelist,
  html.tk-list-mode #messagelist > thead,
  html.tk-list-mode #messagelist > tbody{ display:block !important; width:100% !important; }
  html.tk-list-mode #messagelist > thead{ display:none !important; }

  html.tk-list-mode #messagelist tbody tr[id^=rcmrow]{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    position:relative !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:9px 14px 9px 64px !important;
    min-height:64px !important;
    height:auto !important;
    background:#FFFFFF !important;
    border:0 !important;
    border-bottom:1px solid #ECEDEF !important;
    grid-template-columns:none !important;
    grid-template-areas:none !important;
  }
  html.tk-list-mode #messagelist tbody tr[id^=rcmrow]:hover,
  html.tk-list-mode #messagelist tbody tr[id^=rcmrow].selected{ background:#E7EEF7 !important; }

  /* аватар считаем от СТРОКИ, а не от ячейки — иначе он уезжал вверх */
  html.tk-list-mode #messagelist tbody tr > td.tk-cell{ position:static !important; }
  html.tk-list-mode #messagelist tbody tr span.tk-av{
    position:absolute !important;
    left:14px !important; top:50% !important;
    transform:translateY(-50%) !important;
    width:40px !important; height:40px !important;
    min-width:40px !important; max-width:40px !important;
    border-radius:50% !important;
    z-index:3 !important;
  }
  html.tk-list-mode #messagelist tbody tr.tk-gstart span.tk-av{ top:calc(50% + 12px) !important; }

  /* общий сброс ячеек */
  html.tk-list-mode #messagelist tbody tr > td{
    display:flex !important; align-items:center !important;
    min-width:0 !important; height:auto !important;
    border:0 !important; background:transparent !important;
    overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important;
    padding:0 !important;
  }
  html.tk-list-mode #messagelist tbody tr > td.selection,
  html.tk-list-mode #messagelist tbody tr > td.threads,
  html.tk-list-mode #messagelist tbody tr > td.status,
  html.tk-list-mode #messagelist tbody tr > td.size,
  html.tk-list-mode #messagelist tbody tr > td.flag,
  html.tk-list-mode #messagelist tbody tr > td.priority,
  html.tk-list-mode #messagelist tbody tr > td.attachment{ display:none !important; }

  /* строка 1: отправитель (слева) + дата (справа) */
  html.tk-list-mode #messagelist tbody tr > td.fromto,
  html.tk-list-mode #messagelist tbody tr > td.from{
    order:1 !important; flex:1 1 auto !important; max-width:none !important;
    padding:0 10px 0 0 !important; color:var(--tk-text) !important; font-weight:500 !important;
  }
  html.tk-list-mode #messagelist tbody tr.unread > td.fromto{ font-weight:700 !important; }
  html.tk-list-mode #messagelist tbody tr > td.date{
    order:2 !important; flex:0 0 auto !important; justify-content:flex-end !important;
    color:var(--tk-muted) !important; font-size:12.5px !important;
  }
  /* строка 2: тема на всю ширину */
  html.tk-list-mode #messagelist tbody tr > td.subject{
    order:3 !important; flex:1 1 100% !important; max-width:100% !important;
    padding:3px 0 0 !important;
  }
  html.tk-list-mode #messagelist tbody tr > td.subject a,
  html.tk-list-mode #messagelist tbody tr > td.subject span.subject{
    color:var(--tk-text) !important; font-weight:400 !important;
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; min-width:0 !important;
  }
  html.tk-list-mode #messagelist tbody tr.unread > td.subject a,
  html.tk-list-mode #messagelist tbody tr.unread > td.subject span.subject{ font-weight:600 !important; }
  html.tk-list-mode #messagelist tbody tr > td.subject span.tk-snip{ display:none !important; }

  /* точка непрочитанного */
  html.tk-list-mode #messagelist tbody tr.unread::before{
    content:'' !important; position:absolute !important;
    left:3px !important; top:50% !important; margin-top:-3px !important;
    width:6px !important; height:6px !important; border-radius:50% !important;
    background:#2688EB !important; z-index:4 !important;
  }

  /* подпись месяца */
  html.tk-list-mode #messagelist tbody tr.tk-gstart[id^=rcmrow]{
    padding-top:30px !important; min-height:calc(64px + 24px) !important;
  }
  #messagelist tbody tr.tk-gstart::after{ top:7px !important; }
}

/* ============================================================
   103. ФИНАЛЬНЫЕ ПОПРАВКИ РАСКЛАДКИ
   ============================================================ */
/* Аватар не должен обрезаться рамкой ячейки: у колонки «От»
   разрешаем выход за край, а текст отправителя режем на span.
   Специфичность поднята до html.tk-list-mode, иначе общее правило
   ячеек (overflow:hidden) перебивало этот сброс. */
html.tk-list-mode #messagelist tbody tr > td.fromto,
html.tk-list-mode #messagelist tbody tr > td.from,
html.tk-list-mode #messagelist tbody tr > td.tk-cell,
#messagelist tbody tr > td.fromto,
#messagelist tbody tr > td.from,
#messagelist tbody tr > td.tk-cell{ overflow:visible !important; }
#messagelist span.tk-av{ overflow:hidden !important; }
@media (min-width:900px){
  html.tk-list-mode #messagelist span.tk-av{ top:50% !important; transform:translateY(-50%) !important; }
  html.tk-list-mode #messagelist tr.tk-gstart span.tk-av{ top:calc(50% + 13px) !important; transform:translateY(-50%) !important; }
}

/* На ультрашироком экране список сужаем ТОЛЬКО когда открыто письмо
   (тогда рядом колонка чтения). В обычном списке он заполняет ширину —
   иначе справа зияла пустота. */
/* В режиме чтения список сужается, чтобы рядом поместилось письмо.
   Ширину даём долей окна, а не числом: на 1920 это одно, на 2560 —
   другое, и промежуточные ширины не остаются без своего значения. */
html.tk-list-mode.tk-reading #tk-list{
  flex:0 0 clamp(360px, 30vw, 560px) !important;
  max-width:clamp(360px, 30vw, 560px) !important;
}

/* ============================================================
   104. НАПИСАНИЕ — доводка до эталона (кадр v1-08)
   ============================================================ */
/* В модалке своя шапка окна уже есть («Новое письмо»), поэтому
   внутреннюю шапку compose.html («Написать сообщение») прячем —
   иначе два заголовка подряд. */
html.tk-inmodal #tk-compose-head{ display:none !important; }

/* Поля «Копия» и «Скрытая» скрыты, пока их не позвали кнопками. */
.tk-cform #_cc,
.tk-cform #_bcc{ display:none !important; }
.tk-cform.tk-show-cc #_cc{ display:block !important; }
.tk-cform.tk-show-bcc #_bcc{ display:block !important; }

/* Ссылки «Копия / Скрытая» — справа в строке «Тема», как в эталоне. */
.tk-clabel[for="compose-subject"]{
  display:flex !important; align-items:center; justify-content:space-between;
}
.tk-cc{ display:inline-flex; gap:16px; }
.tk-cc button{
  background:none; border:0; padding:0; cursor:pointer;
  color:#0F7BC4; font-size:13px; font-weight:500;
}
.tk-cc button.on{ text-decoration:underline; }

/* Строка «Прикрепить файл · Из Облака · Из Почты» — ровная, значки серые. */
.tk-attrow{ display:flex; gap:22px; padding:12px 0; border-bottom:1px solid #ECEDEF; }
.tk-att{ display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; color:#2C2D2E; font-size:14px; padding:0; }
.tk-att .tk-i{ color:#6F7178; }

/* ============================================================
   105. ПОДПИСЬ МЕСЯЦА ЧЕРЕЗ ОТСТУП — финальные поправки
   С margin-подписью содержимое строки-начала группы центрируется
   как в обычной строке; прежние сдвиги аватара/точки (+13/+30 от
   padding-подхода) больше не нужны и обнуляются.
   ============================================================ */
@media (min-width:900px){
  html.tk-list-mode #messagelist tbody tr.tk-gstart[id^=rcmrow]{
    margin-top:30px !important; padding-top:0 !important;
    min-height:var(--tk-row) !important;
  }
  html.tk-list-mode #messagelist tbody tr.tk-gstart span.tk-av{
    top:50% !important; transform:translateY(-50%) !important;
  }
  html.tk-list-mode #messagelist tbody tr.tk-gstart.unread::before{ top:50% !important; }
}
@media (max-width:899px){
  html.tk-list-mode #messagelist tbody tr.tk-gstart[id^=rcmrow]{
    margin-top:30px !important; padding-top:0 !important;
    min-height:64px !important;
  }
  html.tk-list-mode #messagelist tbody tr.tk-gstart span.tk-av{
    top:50% !important; transform:translateY(-50%) !important;
  }
  #messagelist tbody tr.tk-gstart::after{ top:-21px !important; }
}

/* ============================================================
   106. ОКНО НАПИСАНИЯ — 640×570 как в эталоне (кадр v1-08)

   Раньше окно модалки было 1000px, а форма внутри — 640px по центру,
   отчего по бокам зияли белые поля, а сама форма казалась обрезанной
   узкой карточкой. Приводим окно к эталонным 640, а форму растягиваем
   на всю его ширину.
   ============================================================ */
.tk-compose-win{
  /* Окно было 640x600 — заметно меньше, чем в эталоне: письмо
     писалось в узкой полоске, а редактор занимал треть высоты.
     Даём ему настоящий рабочий размер. */
  width:min(94vw, 1040px) !important;
  height:min(92vh, 840px) !important;
}
html.tk-inmodal #tk-compose,
body.tk-compose-page #tk-compose,
#tk-compose{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
/* поля письма — на всю ширину окна, тонкая линия снизу */
html.tk-inmodal #_from,
html.tk-inmodal #_to,
html.tk-inmodal #_cc,
html.tk-inmodal #_bcc,
html.tk-inmodal #compose-subject{
  width:100% !important; box-sizing:border-box;
}

/* центрируем окно написания по обеим осям */
.tk-compose{ align-items:center !important; justify-content:center !important; }
.tk-compose-win{ margin:auto !important; margin-top:auto !important; }

/* ============================================================
   107. КАРТОЧКА КОНТАКТА (tk-card-page) — группы-карточки

   Стили групп полей были написаны под класс tk-other, а карточка
   контакта грузится с классом tk-card-page — поэтому fieldset'ы
   показывались браузерными (чёрная рамка с вырезом под легенду).
   Приводим к эталону: карточки с рамкой #EBECEF и скруглением 10,
   заголовок группы 15px, подписи полей 13px серым, имя 22px.
   ============================================================ */
body.tk-card-page{ background:#F6F7F8; padding:24px 28px; }
body.tk-card-page fieldset{
  border:1px solid #EBECEF !important;
  border-radius:10px !important;
  padding:14px 18px 16px !important;
  margin:0 0 16px !important;
  background:#FFFFFF !important;
}
body.tk-card-page fieldset > legend{
  font-size:15px !important; font-weight:600 !important; color:#2C2D2E !important;
  padding:0 6px !important; margin-left:4px;
}
body.tk-card-page fieldset.contact-head,
body.tk-card-page .contact-head{
  display:flex; align-items:center; gap:20px;
}
body.tk-card-page .contactfield,
body.tk-card-page .row,
body.tk-card-page .propform td{ font-size:14px; }
body.tk-card-page .label,
body.tk-card-page .title,
body.tk-card-page .contactfieldlabel{
  font-size:13px !important; color:#87898F !important;
}
/* фото круг 96, имя крупно */
body.tk-card-page .contactphoto img,
body.tk-card-page #contactpic img,
body.tk-card-page .image img{
  width:96px !important; height:96px !important; border-radius:50% !important; object-fit:cover;
  background:#DDE3EA;
}
body.tk-card-page .names .fn,
body.tk-card-page .fn,
body.tk-card-page .contact-name{ font-size:22px !important; font-weight:600 !important; }

/* ============================================================
   108. БЫСТРЫЕ ДЕЙСТВИЯ СТРОКИ — без наложений

   Прежде ячейка действий делалась absolute, и кнопки внутри неё
   позиционировались от неё же — на средних ширинах они налезали на
   дату, а на телефоне плавали в левом верхнем углу поверх подписей
   месяцев. Теперь ячейка — нулевой статичный контейнер, а сами кнопки
   позиционируются ОТ СТРОКИ у правого края и только при наведении.
   На телефоне быстрых действий нет — там работает нажатие и меню.
   ============================================================ */
html.tk-list-mode #messagelist tbody tr > td.tk-actcell{
  position:static !important;
  flex:0 0 0 !important; width:0 !important; min-width:0 !important; padding:0 !important;
  overflow:visible !important; background:transparent !important;
}
@media (min-width:900px){
  html.tk-list-mode #messagelist tbody tr span.tk-more,
  html.tk-list-mode #messagelist tbody tr span.tk-quick{
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    z-index:6 !important; opacity:0 !important; pointer-events:none !important;
    transition:opacity .12s;
  }
  html.tk-list-mode #messagelist tbody tr.tk-gstart span.tk-more,
  html.tk-list-mode #messagelist tbody tr.tk-gstart span.tk-quick{ top:50% !important; }
  html.tk-list-mode #messagelist tbody tr span.tk-more{ right:12px !important; background:transparent !important; }
  html.tk-list-mode #messagelist tbody tr span.tk-quick{
    right:46px !important; padding-left:14px !important;
    background:linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF 16px) !important;
  }
  html.tk-list-mode #messagelist tbody tr:hover span.tk-more,
  html.tk-list-mode #messagelist tbody tr:hover span.tk-quick{ opacity:1 !important; pointer-events:auto !important; }
  /* на ховере прячем дату — действия занимают её место, как в mail.ru */
  html.tk-list-mode #messagelist tbody tr:hover > td.date{ opacity:0 !important; }
  /* фон подложки действий совпадает с фоном строки под курсором */
  html.tk-list-mode #messagelist tbody tr:hover span.tk-quick{
    background:linear-gradient(90deg, rgba(217,230,224,0), var(--tk-hover) 16px) !important;
  }
}
@media (max-width:899px){
  html.tk-list-mode #messagelist span.tk-quick,
  html.tk-list-mode #messagelist span.tk-more,
  html.tk-list-mode #messagelist td.tk-actcell{ display:none !important; }
}

/* ============================================================
   109. ДЕЙСТВИЯ СТРОКИ И МОБИЛЬНАЯ ПАНЕЛЬ — устранение наложений

   1) tk-quick/tk-more показываем ТОЛЬКО при реальном наведении, через
      display (а не opacity): иначе на выделенной строке без курсора
      всё равно вылезал кластер квадратов поверх даты.
   2) На телефоне верхняя панель списка не переносится на вторую строку
      (её иконки налезали на подписи месяцев) — лишние значки убраны,
      панель в одну строку.
   ============================================================ */
@media (min-width:900px){
  html.tk-list-mode #messagelist tbody tr span.tk-quick,
  html.tk-list-mode #messagelist tbody tr span.tk-more{ display:none !important; }
  html.tk-list-mode #messagelist tbody tr:hover span.tk-more{ display:flex !important; opacity:1 !important; pointer-events:auto !important; }
  html.tk-list-mode #messagelist tbody tr:hover span.tk-quick{ display:flex !important; opacity:1 !important; pointer-events:auto !important; }
}

@media (max-width:899px){
  /* панель над списком — одна строка, без переноса и лишних значков */
  #tk-listbar, .tk-listbar{
    flex-wrap:nowrap !important;
    overflow:hidden !important;
    min-height:44px; align-items:center;
    gap:6px !important;
  }
  #tk-listbar .tk-lb-icon,
  .tk-listbar .tk-lb-icon{ display:none !important; }
  /* аватар в списке — ровный круг 40, без сплющивания */
  html.tk-list-mode #messagelist tbody tr span.tk-av{
    width:40px !important; height:40px !important;
    min-width:40px !important; min-height:40px !important;
    max-width:40px !important; max-height:40px !important;
  }
}

/* ============================================================
   110. ИСПРАВЛЕНИЕ ЗНАЧКОВ-КВАДРАТОВ

   Значки бывают двух видов:
   • <i class="tk-i tk-i-архив"> — рисуются маской: background:currentColor
     + mask:var(--tk-icon). Так сделаны значки папок и боковой панели.
   • инлайновый <svg class="tk-i"> из функции icon() — со своим <path>,
     fill:none, stroke:currentColor. Так сделаны значки верхней панели,
     меню, действий строки, аккаунта, вложений.

   Из-за общего класса tk-i инлайновые svg НАСЛЕДОВАЛИ заливку и маску
   от первого вида. Переменная --tk-icon у них не задана, маска ломалась,
   и вместо тонкого контура показывался СЕРЫЙ КВАДРАТ (фон currentColor),
   в котором контур тонул. Отменяем фон и маску для инлайновых svg. */
svg.tk-i{
  background:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  fill:none !important;
  stroke:currentColor !important;
}
svg.tk-i path,
svg.tk-i circle,
svg.tk-i rect,
svg.tk-i line,
svg.tk-i polyline,
svg.tk-i polygon{
  fill:none !important;
  stroke:currentColor !important;
}

/* ============================================================
   111. ЗНАЧКИ РАЗДЕЛОВ НАСТРОЕК

   Кружок раздела рисовался пустым серым (::before без значка).
   Кладём в круг значок по классу строки — как в эталоне: у каждого
   раздела своя иконка (Lucide, тонкая линия) на светлом круге.
   ============================================================ */
.tk-sections tbody tr > td::before,
#sections-table tbody tr > td::before{
  background-color:#EEF2F8 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;
}
.tk-sections tbody tr.general > td::before,
#sections-table tbody tr.general > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>") !important; }
.tk-sections tbody tr.mailbox > td::before,
#sections-table tbody tr.mailbox > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M9 3v18'/></svg>") !important; }
.tk-sections tbody tr.mailview > td::before,
#sections-table tbody tr.mailview > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-10 5L2 7'/></svg>") !important; }
.tk-sections tbody tr.compose > td::before,
#sections-table tbody tr.compose > td::before,
.tk-sections tbody tr.mailcompose > td::before,
#sections-table tbody tr.mailcompose > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") !important; }
.tk-sections tbody tr.addressbook > td::before,
#sections-table tbody tr.addressbook > td::before,
.tk-sections tbody tr.contacts > td::before,
#sections-table tbody tr.contacts > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") !important; }
.tk-sections tbody tr.folders > td::before,
#sections-table tbody tr.folders > td::before,
.tk-sections tbody tr.specialfolders > td::before,
#sections-table tbody tr.specialfolders > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/></svg>") !important; }
.tk-sections tbody tr.server > td::before,
#sections-table tbody tr.server > td::before,
.tk-sections tbody tr.mailboxview > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='8' x='2' y='2' rx='2'/><rect width='20' height='8' x='2' y='14' rx='2'/><line x1='6' x2='6.01' y1='6' y2='6'/><line x1='6' x2='6.01' y1='18' y2='18'/></svg>") !important; }
.tk-sections tbody tr.encryption > td::before,
#sections-table tbody tr.encryption > td::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") !important; }

/* ============================================================
   112. НАСТРОЙКИ — ДВЕ КОЛОНКИ (по требованию заказчика)

   Было три колонки: меню, отдельный список разделов, содержимое.
   Стало две, как в эталоне и на почтовых сервисах: боковая панель
   (меню + разделы) и одна область содержимого.
   ============================================================ */
body.tk-set-page #tk-app{ display:flex !important; height:100vh; }

body.tk-settings-page #tk-side.tk-side-set{
  flex:0 0 290px !important;
  max-width:290px !important;
  min-width:290px !important;
  display:flex; flex-direction:column;
  overflow-y:auto;
  background:#F6F7F8;
  border-right:1px solid #EBECEF;
}

/* список разделов теперь ВНУТРИ боковой панели: строками, без карточки */
body.tk-settings-page #tk-set-list{
  flex:0 0 auto !important;
  width:auto !important; max-width:none !important;
  padding:4px 8px 22px !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible !important;
}
body.tk-settings-page #tk-set-list .tk-sections{ padding:0; background:transparent; }
body.tk-settings-page #tk-set-list .tk-sections tbody tr{
  border-bottom:0 !important; background:transparent !important;
}
body.tk-settings-page #tk-set-list .tk-sections tbody tr > td{
  min-height:40px !important;
  padding:8px 12px !important;
  gap:10px !important;
  border-radius:9px !important;
  font-size:14px !important;
}
body.tk-settings-page #tk-set-list .tk-sections tbody tr > td::before{
  width:26px !important; height:26px !important; flex-basis:26px !important;
  background-size:15px 15px !important;
}
/* стрелка «вперёд» в боковой панели не нужна */
body.tk-settings-page #tk-set-list .tk-sections tbody tr > td::after{ display:none !important; }
body.tk-settings-page #tk-set-list .tk-sections tbody tr:hover > td{ background:var(--tk-hover) !important; }
body.tk-settings-page #tk-set-list .tk-sections tbody tr.selected > td,
body.tk-settings-page #tk-set-list .tk-sections tbody tr.focused > td{
  background:#E7EEF7 !important; font-weight:500 !important;
}

/* одна область содержимого справа */
body.tk-set-page #tk-set-body{
  flex:1 1 auto !important; min-width:0 !important;
  background:#FFFFFF !important;
  display:block !important;
}

/* На телефоне панель ВЫДВИЖНАЯ, а не «сверху одной колонкой».
   Раньше здесь она разворачивалась во всю ширину, но правила
   узкого экрана (раздел 83) всё равно увозили её за край — и
   разделов настроек на телефоне не оставалось совсем: на экране
   висело одно поле «Язык», а под ним пустота. Теперь содержимое
   занимает весь экран, а панель открывается кнопкой. */
@media (max-width:899px){
  body.tk-set-page #tk-app{
    display:flex !important;
    height:100dvh !important;
    min-height:100dvh;
    overflow:hidden;
  }
  body.tk-set-page #tk-set-body{
    display:flex !important;
    flex-direction:column;
    flex:1 1 auto !important;
    min-width:0;
    min-height:0;
    height:100%;
  }
  body.tk-set-page #preferences-frame{
    flex:1 1 auto;
    width:100% !important; height:100% !important;
    min-height:0; border:0;
  }
}

/* остатки «белой карточки» у списка разделов в боковой панели */
body.tk-settings-page #tk-set-list{
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}

/* ============================================================
   113. ПАПКИ / ПРОФИЛИ / ОТВЕТЫ — тоже две колонки

   Здесь список (папок, профилей, ответов) — это и есть содержимое,
   поэтому колонок две: боковая панель и список. Форма правки
   открывается ВМЕСТО списка (класс tk-form-open на html), а не
   третьей колонкой, как было раньше.
   ============================================================ */
body.tk-set-page:not(.tk-settings-page) #tk-app{ display:flex !important; height:100vh; }

body.tk-set-page:not(.tk-settings-page) #tk-side.tk-side-set{
  flex:0 0 260px !important; max-width:260px !important; min-width:260px !important;
  background:#F6F7F8; border-right:1px solid #EBECEF;
  display:flex; flex-direction:column; overflow-y:auto;
}
body.tk-set-page:not(.tk-settings-page) #tk-set-list{
  flex:1 1 auto !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border-right:0 !important;
  background:#FFFFFF !important;
  overflow-y:auto !important;
  padding:18px 24px !important;
}
body.tk-set-page:not(.tk-settings-page) #tk-set-body{
  display:none !important;
  flex:1 1 auto !important;
  background:#FFFFFF !important;
  min-width:0 !important;
}
/* форма открыта — показываем её вместо списка */
html.tk-form-open body.tk-set-page:not(.tk-settings-page) #tk-set-list{ display:none !important; }
html.tk-form-open body.tk-set-page:not(.tk-settings-page) #tk-set-body{ display:block !important; }

@media (max-width:899px){
  /* Папки, профили и ответы: то же самое — список на весь экран,
     панель выезжает кнопкой. */
  body.tk-set-page:not(.tk-settings-page) #tk-app{
    display:flex !important;
    height:100dvh !important;
    overflow:hidden;
  }
  body.tk-set-page:not(.tk-settings-page) #tk-set-list,
  body.tk-set-page:not(.tk-settings-page) #tk-set-body{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:100%;
    overflow-y:auto;
  }
}

/* кнопка возврата из формы правки к списку */
.tk-form-back{
  display:none;
  align-items:center; gap:8px;
  margin:14px 0 0 20px; padding:8px 14px;
  border:0; border-radius:9px; background:transparent;
  color:#2C2D2E; font-size:14px; cursor:pointer;
}
.tk-form-back:hover{ background:var(--tk-hover); }
html.tk-form-open .tk-form-back{ display:inline-flex; }
html.tk-form-open body.tk-set-page:not(.tk-settings-page) #tk-set-body{
  display:flex !important; flex-direction:column;
}
html.tk-form-open body.tk-set-page:not(.tk-settings-page) #preferences-frame{
  flex:1 1 auto; width:100% !important; border:0;
}

/* ============================================================
   114. СПИСКИ ПАПОК, ПРОФИЛЕЙ И ОТВЕТОВ

   Папки приходят как <ul><li><a>Имя</a><input checkbox></li>.
   Без раскладки строка оставалась маркированным списком, а тумблер
   подписки налезал на название. Делаем строку гибкой: название слева,
   тумблер своей колонкой справа.
   ============================================================ */
#subscription-table.tk-folder-table{
  list-style:none !important;
  margin:0 !important; padding:0 !important;
  max-width:820px;
}
#subscription-table.tk-folder-table li{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:46px;
  margin:0 !important;
  padding:8px 14px !important;
  border-bottom:1px solid #ECEDEF;
  list-style:none !important;
}
#subscription-table.tk-folder-table li::marker{ content:none !important; }
/* пустой корневой узел от Roundcube не показываем */
#subscription-table.tk-folder-table li.root{ display:none !important; }
#subscription-table.tk-folder-table li > a{
  flex:1 1 auto; min-width:0;
  color:#2C2D2E !important; text-decoration:none !important;
  font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#subscription-table.tk-folder-table li:hover{ background:var(--tk-hover); }
/* тумблер подписки — фиксированной колонкой, не налезает на имя */
#subscription-table.tk-folder-table li > input[type=checkbox]{
  flex:0 0 38px !important;
  width:38px !important; height:22px !important;
  margin:0 !important; position:static !important;
}
/* вложенные папки — ступенькой */
#subscription-table.tk-folder-table li[aria-level="2"]{ padding-left:38px !important; }
#subscription-table.tk-folder-table li[aria-level="3"]{ padding-left:60px !important; }
#subscription-table.tk-folder-table li[aria-level="4"]{ padding-left:82px !important; }

/* ---- профили, ответы, контакты: ровные строки ---- */
.tk-listing{
  width:100%; max-width:820px;
  border-collapse:collapse;
}
.tk-listing thead{ display:none; }      /* служебный заголовок столбца не нужен */
.tk-listing tbody tr{
  border-bottom:1px solid #ECEDEF;
  cursor:pointer;
}
.tk-listing tbody tr > td{
  padding:13px 14px;
  font-size:14px;
  color:#2C2D2E;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tk-listing tbody tr:hover{ background:var(--tk-hover); }
.tk-listing tbody tr.selected,
.tk-listing tbody tr.focused{ background:#E7EEF7; }

/* тумблер подписки на папку — с белым кружком (правило кружка было
   написано только для форм, и в списке папок оставалась сплошная пилюля) */
#subscription-table.tk-folder-table li > input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  border-radius:11px; border:0;
  background:#C7DAEC;
  position:relative !important;
  cursor:pointer;
  transition:background .15s;
}
#subscription-table.tk-folder-table li > input[type=checkbox]::after{
  content:''; position:absolute;
  top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#FFFFFF;
  box-shadow:0 1px 3px rgba(20,40,70,.2);
  transition:left .15s;
}
#subscription-table.tk-folder-table li > input[type=checkbox]:checked{ background:#0F7BC4; }
#subscription-table.tk-folder-table li > input[type=checkbox]:checked::after{ left:18px; }
#subscription-table.tk-folder-table li > input[type=checkbox]:disabled{ opacity:.5; cursor:default; }

/* страховка: кружок тумблера считает координаты от самого переключателя,
   иначе он улетал в левый верхний угол страницы */
input[type=checkbox]::after{ position:absolute; }
input[type=checkbox]{ position:relative; }

/* ============================================================
   115. МОБИЛЬНЫЕ ПОПРАВКИ ПО РЕЗУЛЬТАТАМ АУДИТА

   Автоматический обход экранов нашёл на 390px:
   • кнопка «Отметить все прочитанными» вылезала за правый край;
   • панель действий письма не помещалась («Ответить» за краем);
   • форма контакта давала горизонтальную прокрутку (493 > 390);
   • выдвижная панель выглядывала на несколько пикселей.
   ============================================================ */
@media (max-width:899px){

  /* панель над списком — прокручивается вбок, ничего не срезается */
  #tk-listbar, .tk-listbar{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  #tk-listbar::-webkit-scrollbar, .tk-listbar::-webkit-scrollbar{ display:none; }
  #tk-listbar > button, .tk-listbar > button{ flex:0 0 auto !important; white-space:nowrap; }

  /* панель письма на телефоне — только значки, подписи прячем:
     иначе кнопки не помещаются в ширину экрана */
  #tk-msgbar .tk-mb{
    font-size:0 !important;
    gap:0 !important;
    padding:8px 9px !important;
  }
  #tk-msgbar .tk-mb svg{ font-size:initial; }
  #tk-msgbar{
    overflow-x:auto !important; flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  #tk-msgbar::-webkit-scrollbar{ display:none; }

  /* формы (контакт, папка, профиль, ответ) не должны быть шире экрана */
  body.tk-card-page,
  body.iframe,
  body.tk-set-page,
  body.tk-book-page{ overflow-x:hidden; }
  body.iframe .row,
  body.iframe fieldset,
  body.iframe legend,
  body.iframe input,
  body.iframe select,
  body.iframe textarea,
  body.tk-card-page .row,
  body.tk-card-page fieldset,
  body.tk-card-page input,
  body.tk-card-page select,
  body.tk-card-page textarea{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  body.iframe fieldset{ padding-left:12px !important; padding-right:12px !important; }

  /* выдвижная панель полностью за краем, без выглядывающей полоски */
  #tk-side{ overflow:hidden; }
  html:not(.tk-side-open) #tk-side{ visibility:hidden; }
  html.tk-side-open #tk-side{ visibility:visible; }
}

/* ---- 115.1 форма контакта на телефоне: ничего не шире экрана ----
   fieldset раздувался под содержимое (433px при экране 390), потому
   что вложенным элементам нечем было сжиматься. Даём min-width:0
   и поля во всю ширину. */
@media (max-width:899px){
  body.tk-card-page{ padding:14px 12px !important; }
  body.tk-card-page fieldset{
    padding:12px 12px 14px !important;
    min-width:0 !important; width:auto !important;
  }
  body.tk-card-page .row,
  body.tk-card-page .contactfieldgroup,
  body.tk-card-page .contactfieldcontent,
  body.tk-card-page .contactfieldlabel{
    display:block !important;
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    float:none !important;
    margin-left:0 !important;
  }
  body.tk-card-page input,
  body.tk-card-page select,
  body.tk-card-page textarea{
    width:100% !important; max-width:100% !important;
    min-width:0 !important; box-sizing:border-box !important;
  }
  body.tk-card-page .row.composite > *{ max-width:100% !important; }

  /* панель над списком на телефоне — значками, чтобы всё помещалось */
  #tk-listbar > button, .tk-listbar > button{
    font-size:0 !important;
    gap:0 !important;
    padding:8px 10px !important;
  }
  #tk-listbar > button svg, .tk-listbar > button svg{ font-size:initial; }
}

/* ============================================================
   116. ТЕЛЕФОН: КНОПКА НАПИСАНИЯ И ДЕЙСТВИЯ СТРОКИ

   Аудит скрытых элементов показал две дыры на 390px:
   • кнопку «Написать» нельзя нажать — она в убранной за край панели,
     и на экране её нет вовсе;
   • «⋯» у строки был спрятан вместе с быстрыми действиями, а на
     телефоне это единственный способ вызвать действия письма.
   ============================================================ */
.tk-fab{ display:none; }

@media (max-width:899px){
  /* круглая кнопка написания — снизу справа, как в мобильной почте */
  html.tk-list-mode .tk-fab{
    display:flex !important;
    position:fixed; right:18px; bottom:22px; z-index:120;
    width:56px; height:56px;
    align-items:center; justify-content:center;
    border-radius:50%;
    background:#0F7BC4;
    box-shadow:0 6px 18px rgba(15,123,196,.38);
    text-decoration:none;
  }
  html.tk-list-mode .tk-fab::before{
    content:'';
    width:26px; height:26px;
    background:#FFFFFF;
    -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") center/contain no-repeat;
  }
  html.tk-list-mode.tk-reading .tk-fab{ display:none !important; }

  /* диагностический кружок «?» на телефоне убираем — он перекрывал бы
     кнопку написания */
  .tk-checkbtn{ display:none !important; }

  /* «⋯» у строки на телефоне ВИДЕН: наведения на сенсоре нет,
     и это единственный вход в действия письма */
  html.tk-list-mode #messagelist td.tk-actcell{ display:block !important; }
  html.tk-list-mode #messagelist span.tk-more{
    display:flex !important;
    opacity:.6 !important;
    pointer-events:auto !important;
    position:absolute !important;
    right:8px !important; top:50% !important;
    transform:translateY(-50%) !important;
    width:30px !important; height:30px !important;
    background:transparent !important;
    z-index:6 !important;
  }
  /* быстрые действия на сенсоре не нужны */
  html.tk-list-mode #messagelist span.tk-quick{ display:none !important; }
  /* дата уступает место кнопке «⋯» */
  html.tk-list-mode #messagelist tbody tr > td.date{ padding-right:30px !important; }
}

/* ============================================================
   117. РАЗБОР СНИМКОВ ГЛАЗАМИ

   Три вещи, которые проверка кодом не ловит, а на снимке видно
   сразу: подчёркнутые темы писем, чёрная рамка вокруг ссылки
   после нажатия и слишком короткая растушёвка под кнопками
   быстрых действий.
   ============================================================ */

/* 1. В эталоне тема письма — обычный текст, а не ссылка с чертой.
      Подчёркивание приходило из настроек браузера для <a>. */
#messagelist td.subject a,
#messagelist td.subject a:hover,
#messagelist td.subject a:visited,
#messagelist td.fromto a,
#messagelist td.fromto a:hover{ text-decoration:none !important; }

/* 2. Чёрный прямоугольник вокруг темы после клика — это рамка
      выделения браузера. Мышью её быть не должно; для клавиатуры
      оставляем свою, аккуратную и синюю. */
/* Рамку рисует не ссылка, а сама ячейка: список Roundcube ставит
   на неё фокус, и браузер обводит её чёрным. В эталоне такой
   обводки нет — снимаем со всех частей строки. */
#messagelist tbody tr td:focus,
#messagelist tbody tr td.subject,
#messagelist tbody tr.focused td.subject,
#messagelist td.subject a:focus,
#messagelist tbody tr:focus,
#messagelist tbody tr a:focus{ outline:none !important; }
#messagelist td.subject a:focus-visible{
  outline:2px solid var(--tk-accent, #005FF9) !important;
  outline-offset:2px;
  border-radius:3px;
}

/* 3. Быстрые действия накрывали текст письма впритык: полоска
      растворения была всего 16px, и первый значок ложился прямо
      на буквы. Делаем переход длиннее — текст успевает угаснуть. */
@media (min-width:900px){
  html.tk-list-mode #messagelist tbody tr span.tk-quick{
    padding-left:34px !important;
    background:linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF 34px) !important;
  }
  html.tk-list-mode #messagelist tbody tr:hover span.tk-quick{
    background:linear-gradient(90deg, rgba(238,242,248,0), var(--tk-hover) 34px) !important;
  }
  html.tk-list-mode #messagelist tbody tr.selected span.tk-quick,
  html.tk-list-mode #messagelist tbody tr.selected:hover span.tk-quick{
    background:linear-gradient(90deg, rgba(231,238,247,0), var(--tk-sel, #E7EEF7) 34px) !important;
  }
}

/* 4. Тело письма было выровнено по центру окна: заголовок и
      отправитель начинались слева, а текст — с отступом почти
      в двести точек. В эталоне всё письмо идёт одной левой
      линией. Ширину колонки оставляем, центровку убираем. */
#tk-msg-body{
  margin-left:0 !important;
  margin-right:0 !important;
  /* Шапка письма набирает отступ в два приёма: сам блок шапки
     берёт --tk-pad, и вложенные «тема» и «от кого» берут его же.
     Тело лежит уровнем выше, поэтому складываем оба слагаемых —
     иначе текст письма стоял левее собственной шапки. */
  padding-left:calc(var(--tk-pad, 23px) * 2) !important;
  padding-right:calc(var(--tk-pad, 23px) * 2) !important;
  box-sizing:content-box;
}
#tk-msg-body #messagebody{ padding-left:0 !important; padding-right:0 !important; }

/* 5. Имя отправителя в шапке письма — тоже без подчёркивания. */
#tk-msg-who a,
#tk-msg-who a:hover,
#tk-msg-from a,
#tk-msg-from a:hover{ text-decoration:none !important; }
#tk-msg-who a:hover{ text-decoration:underline !important; }

/* ============================================================
   118. ВЫБОР ОФОРМЛЕНИЯ И ЗНАЧКИ РАЗДЕЛОВ НАСТРОЕК

   На снимке «Стиль оформления» разъезжался: кружок выбора внизу
   слева от картинки, название сбоку у нижнего края, автор и
   лицензия отдельными строками без связи с картинкой. Собираем
   каждый вариант в одну строку-карточку.
   ============================================================ */

label.skinselection{
  display:flex !important;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  margin:0 0 10px;
  border:1px solid var(--tk-line, #E7EEF7);
  border-radius:12px;
  background:var(--tk-surface, #FFFFFF);
  cursor:pointer;
  /* На телефоне карточка распирала форму до 464 точек при экране
     в 390 — появлялась боковая прокрутка. Ограничиваем шириной
     родителя и разрешаем внутренностям сжиматься. */
  width:100%;
  max-width:560px;
  box-sizing:border-box;
  transition:border-color .15s, background .15s;
}
label.skinselection:hover{ background:var(--tk-hover, #EEF2F8); }
label.skinselection:has(input:checked){
  border-color:var(--tk-accent, #005FF9);
  background:var(--tk-sel, #E7EEF7);
}
label.skinselection .skinitem{ display:flex; align-items:center; }
label.skinselection .skinitem:last-child{
  display:block;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  line-height:1.45;
}
label.skinselection .skinname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
label.skinselection img.skinthumbnail{
  width:64px; height:64px;
  border-radius:8px;
  border:1px solid var(--tk-line, #E7EEF7);
  background:#FFFFFF;
  flex:0 0 auto;
}
label.skinselection .skinname{
  display:block;
  font-weight:600;
  font-size:15px;
  color:var(--tk-text, #2C2D2E);
}
/* Автор и лицензия — каждый своей строкой. Переносы <br> мы
   убрали, поэтому строчность задаём самим подписям, иначе они
   слипались в «by Aleksander MachniakЛицензия: …». */
label.skinselection .skinauthor,
label.skinselection .skinlicense{
  display:block;
  font-size:12.5px;
  color:var(--tk-muted, #6F7178);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* переносы <br> внутри карточки не нужны — строки и так блочные */
label.skinselection br{ display:none; }

/* ============================================================
   119. ЗНАЧКИ ЧЕТЫРЁХ ВЕРХНИХ ПУНКТОВ НАСТРОЕК

   «Настройки», «Папки», «Профили», «Ответы» шли голым текстом,
   а все разделы под ними — со значками. На снимке разнобой видно
   сразу. Даём им значки того же начертания и размера.
   ============================================================ */
/* Цвет со словом important: на страницах плагинов приходят
   стили elastic, и они гасили заливку маски — вместо значка
   оставался пунктирный квадратик. */
#tk-set-menu a::before,
.tk-set-tabs a::before{
  content:'';
  width:20px; height:20px;
  flex:0 0 20px;
  background-color:#6F7178 !important;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
#tk-set-menu a{ display:flex; align-items:center; gap:11px; }
#tk-set-menu .selected a::before{ background-color:#2C2D2E; }

#settingstabpreferences a::before{
  -webkit-mask-image:var(--tk-ico-prefs); mask-image:var(--tk-ico-prefs);
}
#settingstabfolders a::before{
  -webkit-mask-image:var(--tk-ico-folders); mask-image:var(--tk-ico-folders);
}
#settingstabidentities a::before{
  -webkit-mask-image:var(--tk-ico-ident); mask-image:var(--tk-ico-ident);
}
#settingstabresponses a::before{
  -webkit-mask-image:var(--tk-ico-resp); mask-image:var(--tk-ico-resp);
}
/* Фильтры и автоответчик — раздел плагина managesieve */
#settingstabpluginmanagesieve a::before{
  -webkit-mask-image:var(--tk-ico-filter); mask-image:var(--tk-ico-filter);
}
:root{
  --tk-ico-prefs:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/></svg>");
  --tk-ico-folders:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/></svg>");
  --tk-ico-ident:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  --tk-ico-filter:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/></svg>");
  --tk-ico-resp:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

/* ============================================================
   120. КОНТАКТЫ: ОДИН ЭКРАН И БОКОВАЯ ПАНЕЛЬ

   Было три колонки: книги, узкий список в 340 точек и пустая
   белая треть экрана справа. Список теперь во всю ширину, а
   карточка человека открывается на его месте.
   ============================================================ */

.tk-book-page #tk-book-list{
  flex:1 1 auto !important;
  min-width:0;
  border-right:0 !important;
}
.tk-book-page #tk-book-card{
  display:none;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
}
/* карточка открыта — список уступает ей место */
html.tk-card-open .tk-book-page #tk-book-list,
html.tk-card-open #tk-book-list{ display:none !important; }
html.tk-card-open #tk-book-card{ display:flex !important; }
#tk-book-card iframe{ flex:1 1 auto; border:0; }

/* «Назад к списку» над карточкой */
#tk-book-back{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  margin:0; padding:12px 18px;
  border:0; border-bottom:1px solid #EBECEF;
  background:#FFFFFF; color:#2C2D2E;
  font:inherit; font-size:14px; cursor:pointer;
  text-align:left;
}
#tk-book-back:hover{ background:#F6F7F8; }

/* ---- панель действий над списком контактов ---- */
#tk-book-bar{
  flex:0 0 auto;
  display:flex !important;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-bottom:1px solid #EBECEF;
  background:#FFFFFF;
}
#tk-book-bar .tk-lb-right{ margin-left:auto; display:flex; gap:6px; }
#tk-book-bar button{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border:0; border-radius:9px;
  background:transparent; color:#2C2D2E;
  font:inherit; font-size:14px; cursor:pointer;
  white-space:nowrap;
}
#tk-book-bar button:hover{ background:#EEF2F8; }
#tk-book-bar button.tk-lb-main{
  background:var(--tk-accent, #005FF9); color:#FFFFFF; font-weight:500;
}
#tk-book-bar button.tk-lb-main:hover{ filter:brightness(1.08); }
#tk-book-bar button svg{ flex:0 0 auto; }

/* рамку выделения браузер рисовал и в списке контактов */
#contacts-table td:focus,
#contacts-table tr:focus,
#contacts-table tr td,
#contacts-table a:focus{ outline:none !important; }

/* на телефоне подписи убираем — влезают только значки */
@media (max-width:640px){
  #tk-book-bar button{ padding:0 10px; }
  #tk-book-bar button:not(.tk-lb-main){ font-size:0; gap:0; }
  #tk-book-bar button:not(.tk-lb-main) svg{ font-size:initial; }
}

/* строки контактов во всю ширину: таблица тянулась по содержимому
   и обрывалась на середине экрана */
.tk-book-page #contacts-table{ width:100% !important; table-layout:fixed; }
.tk-book-page #contacts-table td.name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* кнопка «Сброс» болталась отдельной строкой под полем поиска.
   Прячем её, пока поиск не задан, и ставим внутрь строки поиска. */
.tk-book-page #tk-search,
.tk-mail-page #tk-search{ position:relative; }
.tk-book-page #tk-search a.button.reset,
.tk-mail-page #tk-search a.button.reset{
  position:absolute;
  right:16px; top:50%; transform:translateY(-50%);
  display:none;
  padding:0 10px; height:28px; line-height:28px;
  border-radius:8px;
  font-size:13px; color:#6F7178; text-decoration:none;
}
.tk-book-page #tk-search a.button.reset:hover,
.tk-mail-page #tk-search a.button.reset:hover{ background:#EEF2F8; color:#2C2D2E; }
html.tk-searching .tk-book-page #tk-search a.button.reset,
html.tk-searching .tk-mail-page #tk-search a.button.reset,
html.tk-searching #tk-search a.button.reset{ display:block; }

/* кружок с буквой у контакта — как в эталоне.
   Ячейку НЕ переводим в flex: от этого у строк обрывались
   разделители на середине таблицы. Кружок ставим строчным. */
.tk-book-page #contacts-table td.name .tk-cav{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:32px; height:32px;
  margin-right:12px;
  border-radius:50%;
  color:#FFFFFF; font-size:12px; font-weight:600; line-height:1;
  vertical-align:middle;
  flex:0 0 auto;
}
.tk-book-page #contacts-table td.name{ vertical-align:middle; }

/* Разделитель строки обрывался на середине: черта стояла только
   у ячейки с именем, а вторая ячейка (место для «⋯») оставалась
   без неё. Ведём черту по всем ячейкам строки. */
.tk-book-page #contacts-table tbody tr > td{
  border-bottom:1px solid #EBECEF;
}
.tk-book-page #contacts-table tbody tr:last-child > td{ border-bottom:0; }

/* ============================================================
   121. ПАНЕЛЬ ДЕЙСТВИЙ В КАРТОЧКЕ ЧЕЛОВЕКА

   Карточка открывалась без единой кнопки: ни изменить, ни
   написать, ни удалить. Ставим ряд действий сверху — как в
   эталоне над карточкой.
   ============================================================ */
.tk-cardbar{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:12px 18px;
  border-bottom:1px solid #EBECEF;
  background:#FFFFFF;
}
.tk-cardbar a.tk-cb,
.tk-cardbar .tk-cb{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border:0; border-radius:9px;
  background:transparent; color:#2C2D2E;
  font-size:14px; text-decoration:none; cursor:pointer;
  white-space:nowrap;
}
.tk-cardbar a.tk-cb:hover{ background:#EEF2F8; }
/* Селектор с тегом: у обычной кнопки правило записано как
   «.tk-cardbar a.tk-cb», и оно перебивало «.tk-cardbar .tk-cb-main»
   по весу — главная кнопка оставалась бесцветной. */
.tk-cardbar a.tk-cb-main{
  background:var(--tk-accent, #005FF9); color:#FFFFFF; font-weight:500;
}
.tk-cardbar a.tk-cb-main:hover{ filter:brightness(1.08); color:#FFFFFF; }
.tk-cardbar a.tk-cb-dang{ color:var(--tk-danger, #E64646); margin-left:auto; }
.tk-cardbar a.tk-cb-dang:hover{ background:#FDECEC; }
/* выключенные действия Roundcube помечает классом disabled */
.tk-cardbar .tk-cb.disabled{ opacity:.4; pointer-events:none; }

/* Пустой серый круг вместо фотографии: заглушку теперь отдаёт
   images/contactpic.svg, но сам круг должен её показать. */
#tk-card .tk-card-photo,
#tk-card #contactpic{
  width:96px; height:96px;
  border-radius:50%;
  object-fit:cover;
  background:#E7EEF7 no-repeat center/cover;
  flex:0 0 auto;
}

/* Боковая прокрутка на телефоне шла не от карточки темы, а от
   рамки поля: у fieldset браузер ставит min-width:min-content,
   и он раздвигал форму до 436 точек при экране в 390. */
#preferences-form fieldset,
.tk-cform fieldset,
form fieldset{ min-width:0 !important; }
#preferences-form table.tk-prefs,
.tk-cform table.tk-prefs{ width:100% !important; table-layout:fixed; }
#preferences-form table.tk-prefs td,
.tk-cform table.tk-prefs td{ min-width:0; }

/* ============================================================
   122. НАСТРОЙКИ И КОНТАКТЫ НА ТЕЛЕФОНЕ — НА ВЕСЬ ЭКРАН

   На снимке с телефона страница настроек обрывалась: рамка с
   формой была высотой 150 точек внутри блока в 506, а ниже шла
   пустота. Причина — #tk-app раскладывался как обычный блок и
   не растягивался на высоту экрана.
   ============================================================ */
@media (max-width:899px){
  .tk-set-page #tk-app,
  .tk-book-page #tk-app{
    display:flex !important;
    flex-direction:row;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }
  .tk-set-page #tk-set-body,
  .tk-book-page #tk-book-list,
  .tk-book-page #tk-book-card{
    display:flex !important;
    flex-direction:column;
    flex:1 1 auto;
    min-width:0;
    height:100%;
  }
  .tk-set-page #preferences-frame,
  .tk-book-page #contact-frame{
    flex:1 1 auto;
    width:100% !important;
    height:100% !important;
    min-height:0;
    border:0;
  }
  /* кнопка «разделы» — там же, где кнопка папок в почте */
  .tk-set-page #tk-side-btn{ display:inline-flex !important; }
  /* пока карточка открыта, список контактов не занимает место */
  html.tk-card-open .tk-book-page #tk-book-list{ display:none !important; }
}

/* ============================================================
   123. ПАНЕЛЬ НАД СПИСКОМ ПАПОК, ПРОФИЛЕЙ И ОТВЕТОВ

   Эти три страницы открывались голым списком: ни названия
   раздела, ни кнопки «Создать», ни «Удалить». Панель та же по
   виду, что над списком контактов.
   ============================================================ */
.tk-setbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  margin:0 0 4px;
  border-bottom:1px solid #EBECEF;
  background:#FFFFFF;
}
.tk-setbar-h{
  margin:0;
  font-size:19px; font-weight:600; color:#2C2D2E;
  white-space:nowrap;
}
.tk-setbar-r{ margin-left:auto; display:flex; gap:6px; }
.tk-setbar button.tk-sb{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border:0; border-radius:9px;
  background:transparent; color:#2C2D2E;
  font:inherit; font-size:14px; cursor:pointer; white-space:nowrap;
}
.tk-setbar button.tk-sb:hover{ background:#EEF2F8; }
.tk-setbar button.tk-sb-main{
  background:var(--tk-accent, #005FF9); color:#FFFFFF; font-weight:500;
}
.tk-setbar button.tk-sb-main:hover{ filter:brightness(1.08); }
/* кнопка «разделы» видна только на телефоне */
.tk-setbar #tk-side-btn{ display:none; }
@media (max-width:899px){
  .tk-setbar #tk-side-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:0 0 40px;
    border:0; border-radius:10px; background:transparent;
    color:#2C2D2E; cursor:pointer; padding:0;
  }
  .tk-setbar #tk-side-btn:hover{ background:#EEF2F8; }
  .tk-setbar{ padding:10px 12px; gap:6px; }
  .tk-setbar-h{ font-size:17px; }
  .tk-setbar button.tk-sb:not(.tk-sb-main){ font-size:0; gap:0; padding:0 10px; }
  .tk-setbar button.tk-sb:not(.tk-sb-main) svg{ font-size:initial; }
  .tk-setbar button.tk-sb-main{ font-size:0; gap:0; padding:0 12px; }
  .tk-setbar button.tk-sb-main svg{ font-size:initial; }
}

/* рамка выделения браузера в списках папок и профилей */
#subscription-table li:focus,
#subscription-table a:focus,
#identities-table td:focus,
#identities-table tr:focus,
#responses-table td:focus,
#responses-table tr:focus,
#tk-set-list table td:focus,
#tk-set-list table tr:focus{ outline:none !important; }

/* ============================================================
   124. ОКНО НАПИСАНИЯ: ОТСТУПЫ НИЖНЕЙ ЧАСТИ

   Список вложений, подсказка о размере файла и выбор
   «HTML / Текст» шли во всю ширину окна вплотную к краям —
   они лежали снаружи формы (шаблон правился отдельно), и её
   отступы на них не действовали. Теперь они внутри, но
   собственных полей у них нет.
   ============================================================ */
#tk-compose #attachment-list,
#tk-compose .hint,
#tk-compose #compose-attachments{
  box-sizing:border-box;
  padding-left:20px;
  padding-right:20px;
}
/* Подсказка про размер файла — техническая строка. В эталоне её
   нет, но и убирать сведения нельзя: делаем мелкой и тихой. */
#tk-compose .hint{
  margin:2px 0 0;
  font-size:12px;
  color:var(--tk-muted, #6F7178);
}
/* Переключатель «HTML / Текст» — рядом с кнопкой отправки,
   а не сырым полем во всю ширину. */
#tk-compose form select[name="_editorSelector"],
#tk-compose form select[name="editorSelector"],
#tk-compose #editor-selector,
#tk-compose form > select:not(#_from){
  width:auto !important;
  min-width:120px;
  height:36px;
  margin:0 0 0 20px;
  padding:0 10px;
  border:1px solid var(--tk-line, #E7EEF7);
  border-radius:9px;
  background:#FFFFFF;
  font-size:14px;
  color:var(--tk-text, #2C2D2E);
}

/* Ряд действий внизу: «Отправить», «Отмена» и выбор вида письма
   в одну строку, как в эталоне. */
#tk-compose form > button.tk-send{ margin-left:20px; }
#tk-compose form > a.tk-cancel{ margin-left:12px; }

/* нижняя панель окна написания — одной строкой */
.tk-cfoot{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 20px 18px;
  margin-top:auto;
  border-top:1px solid var(--tk-line, #EBECEF);
  background:#FFFFFF;
}
.tk-cfoot button.tk-send{ margin:0 !important; }
.tk-cfoot a.tk-cancel{ margin:0 !important; }
.tk-cfoot select.tk-cedit{
  margin:0 0 0 auto !important;
  width:auto !important; min-width:130px;
  height:36px; padding:0 10px;
  border:1px solid var(--tk-line, #E7EEF7); border-radius:9px;
  background:#FFFFFF; font-size:14px; color:var(--tk-text, #2C2D2E);
}

/* «Копия» и «Скрытая» — справа над полем темы, как в эталоне.
   После того как подпись «Тема» убрали (это же слово стоит
   подсказкой внутри поля), кнопки съехали к левому краю. */
.tk-clabel:has(#tk-cc){ justify-content:flex-end; }

/* ============================================================
   125. ЛЕНТА ПИСЕМ ВМЕСТО СТРАНИЦ

   В эталоне список писем не разбит на страницы: он идёт сплошной
   лентой и продолжается сам, когда прокрутка подходит к низу.
   Кнопки «Предыдущее» и «Следующее» при этом не нужны.
   ============================================================ */
html.tk-endless #tk-pages{ display:none !important; }

.tk-more-rows{
  padding:16px 0 22px;
  text-align:center;
  font-size:13px;
  color:var(--tk-muted, #6F7178);
}

/* ============================================================
   126. ОКНО НОВОГО ПИСЬМА: ПОДЛОЖКА И НИЗ КАРТОЧКИ

   Вокруг окна лежала просто серая заливка, а под нижней панелью
   оставалась пустая белая полоса — форма не доходила до низа
   карточки.
   ============================================================ */

/* Подложка: лёгкое размытие вместо глухой серой заливки.
   Радиус намеренно маленький (6 точек) и без анимации — размытие
   считает видеокарта каждый кадр, и большой радиус на слабой
   машине или на сервере с программной отрисовкой заметно
   подтормаживает. */
.tk-compose-back{
  /* Никакой заливки: по бокам окна было серое поле, и заказчик
     просил убрать его совсем. Остаётся одно размытие — фон виден
     сквозь него как есть, без затемнения. */
  background:transparent !important;
  /* Радиус подобран так, чтобы текста под окном было НЕ ПРОЧЕСТЬ.
     При восьми точках строки списка ещё читались — размытие
     выглядело незаконченным. Лёгкое осветление вместо серой
     заливки: оно не даёт тёмным строкам проступать пятнами. */
  -webkit-backdrop-filter:blur(18px) saturate(.9) brightness(1.06);
  backdrop-filter:blur(18px) saturate(.9) brightness(1.06);
}
/* Размытие считает видеокарта каждый кадр. Оно одно на всё окно,
   без переходов и без теней — так его хватает и слабой машине,
   и серверу с программной отрисовкой. */

/* Там, где размытия нет, окно отделяем от списка только тенью —
   заливку не возвращаем, о ней и была просьба. */
@supports not (backdrop-filter: blur(18px)){
  .tk-compose-back{ background:transparent !important; }
  .tk-compose-win{ box-shadow:0 18px 60px rgba(0,0,0,.28) !important; }
}
@media (prefers-reduced-motion: reduce){
  .tk-compose-back{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:transparent !important;
  }
}

/* Внутренности окна занимают его целиком: белая полоса снизу
   была остатком высоты, до которой форма не дотягивалась. */
.tk-compose-win{ overflow:hidden; display:flex; flex-direction:column; }
.tk-compose-win > iframe{ flex:1 1 auto; width:100%; border:0; display:block; }
/* Высоту задаём без оглядки на класс модального режима: он
   ставится скриптом уже после отрисовки, и правило не успевало
   примениться — внутренности останавливались на 713 точках при
   рамке в 775, отчего снизу и оставалась белая полоса. */
html, body.tk-compose-page{ height:100%; }
body.tk-compose-page #tk-compose{
  height:100% !important;
  min-height:100% !important;
}
body.tk-compose-page #compose-form{ flex:1 1 auto; min-height:0; }

/* ============================================================
   127. УДАЛЁННАЯ СТРОКА ДОЛЖНА ИСЧЕЗАТЬ

   Письмо удалялось на сервере (уходило в Корзину, в Спам, в
   Архив), но строка оставалась висеть в списке. Причина — в том,
   как Roundcube убирает строку: он не выбрасывает её из разметки,
   а ставит ей style="display:none" (list.js, remove_row). Наш
   слой раскладки задаёт строкам display:flex !important, и это
   правило перебивало скрытие: строка оставалась на экране.

   Здесь возвращаем скрытию силу. Правило идёт последним и
   смотрит на сам inline-стиль, поэтому действует только на те
   строки, которые Roundcube уже убрал.
   ============================================================ */
#messagelist tbody tr[style*="display: none"],
#messagelist tbody tr[style*="display:none"],
#contacts-table tbody tr[style*="display: none"],
#contacts-table tbody tr[style*="display:none"],
html.tk-list-mode #messagelist tbody tr[id^=rcmrow][style*="display: none"],
html.tk-list-mode #messagelist tbody tr[id^=rcmrow][style*="display:none"]{
  display:none !important;
}

/* ============================================================
   128. ПРЕДПРОСМОТР КАРТИНОК-ВЛОЖЕНИЙ ПОД ПИСЬМОМ

   Roundcube дописывает под письмом картинки из вложений, но без
   оформления: снимок, а сразу за ним слипшейся строкой имя файла,
   размер и две ссылки — «Образец ткани.png~518 БПоказать
   Загрузить». Собираем это в карточку: снимок сверху, под ним имя
   с размером, справа действия.
   ============================================================ */
#messagebody p.image-attachment,
.message-part p.image-attachment{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  max-width:280px;
  margin:14px 14px 0 0;
  padding:0;
  border:1px solid var(--tk-line, #E7EEF7);
  border-radius:12px;
  overflow:hidden;
  background:var(--tk-surface, #FFFFFF);
  vertical-align:top;
}
#messagebody p.image-attachment a.image-link,
.message-part p.image-attachment a.image-link{
  display:block;
  width:100% !important;
  padding:0;
  line-height:0;
  background:#F6F7F8;
}
#messagebody p.image-attachment img.image-thumbnail,
.message-part p.image-attachment img.image-thumbnail{
  display:block;
  width:100%;
  height:auto;
  max-width:100% !important;
  max-height:200px !important;
  object-fit:contain;
}
#messagebody p.image-attachment .image-filename,
.message-part p.image-attachment .image-filename{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:10px 12px 2px;
  font-size:13px;
  font-weight:500;
  color:var(--tk-text, #2C2D2E);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#messagebody p.image-attachment .image-filesize,
.message-part p.image-attachment .image-filesize{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:0 12px 8px;
  font-size:12px;
  color:var(--tk-muted, #6F7178);
}
/* «Показать» и «Загрузить» — отдельной строкой, с промежутком:
   раньше они шли вплотную к размеру файла и друг к другу. */
/* Селектор без «>»: ссылки лежат не прямыми детьми карточки,
   и правило по прямому потомку до них не доставало. */
#messagebody p.image-attachment a[href]:not(.image-link),
.message-part p.image-attachment a[href]:not(.image-link){
  display:inline-block;
  margin:0 4px 10px 12px;
  padding:5px 10px;
  border-radius:8px;
  background:#EEF2F8;
  font-size:13px;
  color:var(--tk-text, #2C2D2E);
  text-decoration:none !important;
}
#messagebody p.image-attachment a[href]:not(.image-link):hover,
.message-part p.image-attachment a[href]:not(.image-link):hover{
  background:#E1E8F3;
}

/* ============================================================
   129. ШИРОКОЕ ПИСЬМО ДОЛЖНО ПРОКРУЧИВАТЬСЯ

   Письмо с таблицей шире окна обрезалось по правому краю без
   всякой прокрутки: из двадцати пяти колонок были видны
   тринадцать с половиной, остальные прочитать было нечем.
   Даём телу письма собственную боковую прокрутку — страница при
   этом вбок не едет, ползёт только само письмо.
   ============================================================ */
#tk-msg-body #messagebody,
#tk-msg-body .message-part,
#messagebody{
  overflow-x:auto;
  overflow-y:visible;
  max-width:100%;
}
/* Полоска прокрутки тонкая и появляется только при нужде. */
#tk-msg-body #messagebody::-webkit-scrollbar{ height:8px; }
#tk-msg-body #messagebody::-webkit-scrollbar-thumb{
  background:#D0D2D8; border-radius:4px;
}
#tk-msg-body #messagebody::-webkit-scrollbar-track{ background:transparent; }

/* Картинки в письме не раздвигают колонку: почти все письма
   рассчитаны на широкий экран, и без этого снимок на 1200 точек
   растягивал письмо за край. */
#messagebody img,
.message-part img{ max-width:100%; height:auto; }
/* У картинки-вложения свой размер — её не ужимаем повторно. */
#messagebody p.image-attachment img.image-thumbnail{ max-width:100% !important; }

/* ============================================================
   130. ПОЛОСА «ВНЕШНИЕ КАРТИНКИ ЗАБЛОКИРОВАНЫ»

   Roundcube выводит её голой строкой текста со ссылкой —
   вплотную к плашкам вложений, без всякой рамки. В эталоне это
   заметная полоска с кнопкой: письмо может выглядеть неполным,
   и человек должен понимать, почему.
   ============================================================ */
#message-objects #remote-objects-message,
#message-objects .notice,
#remote-objects-message.notice{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 6px;
  padding:12px 16px;
  border:1px solid #F0DCA8;
  border-radius:12px;
  background:#FFF8E6;
  font-size:13.5px;
  color:#6B5A2A;
}
#remote-objects-message .boxbuttons{ margin-left:auto; }
#remote-objects-message .boxbuttons a{
  display:inline-block;
  padding:7px 14px;
  border-radius:9px;
  background:#EFC85B;
  color:#3D3313;
  font-size:13.5px;
  font-weight:500;
  text-decoration:none !important;
  white-space:nowrap;
}
#remote-objects-message .boxbuttons a:hover{ background:#E7BC43; }

/* Полоса должна попадать в ту же левую линию, что шапка и текст:
   блок сообщений лежит уровнем выше тела письма. */
#message-objects{
  padding-left:calc(var(--tk-pad, 23px) * 2);
  padding-right:calc(var(--tk-pad, 23px) * 2);
  box-sizing:border-box;
}

/* Окна «Пересылка писем» и «Подключить ящик» — та же подложка,
   что у нового письма: без серой заливки, только размытие.
   Раньше они затемняли список глухим серым, а окно письма нет —
   выглядело как два разных приложения. */
.tk-fwd-back{
  background:transparent !important;
  -webkit-backdrop-filter:blur(18px) saturate(.9) brightness(1.06);
  backdrop-filter:blur(18px) saturate(.9) brightness(1.06);
}
@supports not (backdrop-filter: blur(18px)){
  .tk-fwd-back{ background:rgba(26,26,26,.30) !important; }
}
@media (prefers-reduced-motion: reduce){
  .tk-fwd-back{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(26,26,26,.30) !important;
  }
}

/* ============================================================
   131. ФОРМА КОНТАКТА: КНОПКИ НА СВОИХ МЕСТАХ

   На форме правки человека кнопки стояли вразнобой: «Удалить»
   у каждого поля — синей подчёркнутой ссылкой сбоку, а выбор
   «Добавить поле…» висел справа от поля имени, ни к чему не
   привязанный. Приводим к одному виду: «Удалить» — тихая
   круглая кнопка рядом с полем, «Добавить поле…» — отдельной
   строкой под группой.
   ============================================================ */
.tk-card-page a.contactfieldbutton.deletebutton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  margin-left:8px;
  border-radius:8px;
  background:transparent;
  color:var(--tk-muted, #6F7178);
  font-size:0;                       /* подпись прячем, оставляем знак */
  text-decoration:none !important;
  vertical-align:middle;
  transition:background .12s, color .12s;
}
.tk-card-page a.contactfieldbutton.deletebutton::before{
  content:'';
  width:17px; height:17px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4h8v2M6 7l1 13h10l1-13'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4h8v2M6 7l1 13h10l1-13'/></svg>") center/contain no-repeat;
}
.tk-card-page a.contactfieldbutton.deletebutton:hover{
  background:#FDECEC;
  color:var(--tk-danger, #E64646);
}
/* Подпись «Удалить» внутри ссылки нужна экранному диктору,
   но не должна занимать место на экране. */
.tk-card-page a.contactfieldbutton.deletebutton .inner{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* «Добавить поле…» — своей строкой под группой, а не сбоку */
.tk-card-page select.addfieldmenu{
  display:block;
  margin:10px 0 2px;
  height:38px;
  padding:0 12px;
  border:1px solid var(--tk-line, #E7EEF7);
  border-radius:10px;
  background:#FFFFFF;
  font-size:14px;
  color:var(--tk-text, #2C2D2E);
  max-width:260px;
}

/* Кружок фотографии: понятно, что по нему можно нажать */
.tk-card-page #contactpic.tk-card-photo{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#E7EEF7 no-repeat center/cover;
}
.tk-card-edit #contactpic.tk-card-photo::after{
  content:'Фото';
  position:absolute; left:0; right:0; bottom:0;
  padding:5px 0 7px;
  background:rgba(0,0,0,.42);
  color:#FFFFFF; font-size:11px; text-align:center;
  pointer-events:none;
}

/* ============================================================
   132. БЕЛЫЙ ФОН ВОКРУГ ОКНА НОВОГО ПИСЬМА

   Вокруг окна оставалось белое поле — слева, справа и снизу.
   Подложка тут ни при чём: она давно прозрачная.

   Причина в совпадении имён. Обёртка формы ВНУТРИ рамки письма
   и контейнер модального окна В РОДИТЕЛЕ носят один и тот же
   идентификатор tk-compose. Правило «#tk-compose { background:
   #FFFFFF }», написанное для формы, красило заодно и контейнер
   на весь экран — получался белый лист, из-под которого список
   выглядывал только снизу.

   Разводим их по страницам: заливка и внутренняя раскладка —
   только для страницы написания (body.tk-compose-page), а
   контейнер модального окна остаётся прозрачным.
   ============================================================ */
body:not(.tk-compose-page) #tk-compose.tk-compose,
body:not(.tk-compose-page) .tk-compose{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  /* И размеры тоже: контейнеру доставалась высота, написанная
     для формы (92vh), поэтому размытие обрывалось на 828 точках
     при экране в 900 — снизу оставалась чёткая полоса списка. */
  position:fixed !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
/* Размытие — на весь экран, до самого низа. */
body:not(.tk-compose-page) .tk-compose-back{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
}
/* Сама карточка письма белая — как ей и положено. */
.tk-compose-win{ background:var(--tk-surface, #FFFFFF); }

/* ============================================================
   133. СООБЩЕНИЯ ПОВЕРХ ВСЕГО, А НЕ ПОД КАРТОЧКОЙ

   На странице входа плашка «Неудачная попытка входа» рисовалась
   под карточкой и была не видна: человек вводил неверный пароль,
   его не пускало, и ни одного слова о причине на экране не было.
   Полоса сообщений лежала обычным потоком, без слоя.

   Ставим её сверху по центру, как в эталоне, — и на входе, и на
   остальных страницах.
   ============================================================ */
#tk-msg,
.tk-msg{
  position:fixed !important;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  z-index:2147483600 !important;   /* выше окна написания письма */
  width:auto;
  max-width:min(92vw, 520px);
  pointer-events:none;             /* не перехватываем нажатия */
  /* Сам контейнер невидим: цвет и рамку рисует плашка внутри.
     Пока у него был свой розовый фон, получалось две плашки —
     розовая снаружи и жёлтая внутри неё. */
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
#tk-msg > *,
.tk-msg > *{
  pointer-events:auto;
  box-sizing:border-box;
  margin:0 0 8px;
  padding:12px 18px;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.16);
  font-size:14px;
  line-height:1.4;
}
/* Ошибка, предупреждение и подтверждение — разного цвета, чтобы
   было понятно с одного взгляда. */
#tk-msg .error,   .tk-msg .error{   background:#FDECEC; color:#8C2020; }
#tk-msg .warning, .tk-msg .warning{ background:#FFF8E6; color:#6B5A2A; }
#tk-msg .confirmation, .tk-msg .confirmation{ background:#E8F6EC; color:#1E5B32; }
#tk-msg .loading, .tk-msg .loading{ background:#EEF2F8; color:#2C2D2E; }

/* ============================================================
   134. ПЛОТНОСТЬ СПИСКА ДОЛЖНА МЕНЯТЬ ВЫСОТУ СТРОКИ

   Переключатель «Обычная / Плотная» ничего не менял: как было
   48 точек на строку, так и оставалось. Высоту задаёт переменная
   --tk-row из основного слоя раскладки со словом !important, и
   старые правила плотности до неё не доставали.

   Меняем саму переменную — тогда пересчитывается вся строка
   разом: и высота, и кружок с буквами, и отступы.
   ============================================================ */
html.tk-compact{
  --tk-row:36px;
  --tk-av:26px;
  --tk-row-pad:4px;
}
html.tk-wide{
  --tk-row:60px;
  --tk-av:36px;
  --tk-row-pad:10px;
}
/* В плотном виде начало текста письма не помещается — прячем,
   как и было задумано в старых правилах. */
html.tk-compact #messagelist .tk-snip{ display:none !important; }
html.tk-compact #messagelist tbody tr[id^=rcmrow]{
  min-height:var(--tk-row) !important;
}
html.tk-wide #messagelist tbody tr[id^=rcmrow]{
  min-height:var(--tk-row) !important;
}

/* ============================================================
   135. ОКНО «ПЕРЕНАПРАВИТЬ»

   Roundcube показывает его своим окном (jQuery UI) с рамкой
   внутри. Заголовок обрезался многоточием, поля не помещались,
   а сама рамка была узкой серой полосой. Приводим к общему виду.
   ============================================================ */
.tk-bounce #tk-form{
  max-width:none;
  padding:14px 18px 18px;
}
/* Ничего не прокручиваем: форма должна помещаться целиком,
   иначе верхняя подпись уезжает за край рамки. */
.tk-bounce, .tk-bounce body{ overflow:hidden; }
.tk-bounce .tk-clabel{
  display:block;
  margin:10px 0 4px;
  font-size:13px;
  color:var(--tk-muted, #6F7178);
}
.tk-bounce .tk-cfield{
  width:100%;
  box-sizing:border-box;
  min-height:42px;
}
/* Пояснение «письмо уйдёт от первоначального отправителя» */
.tk-bounce #bounce-objects,
.tk-bounce .boxinformation{
  margin:0 0 6px;
  padding:12px 16px;
  border:1px solid #CFE3F7;
  border-radius:12px;
  background:#EEF5FD;
  font-size:13.5px;
  color:#20456B;
}
.tk-bounce .boxwarning{
  margin:8px 0 0;
  padding:12px 16px;
  border:1px solid #F0DCA8;
  border-radius:12px;
  background:#FFF8E6;
  font-size:13.5px;
  color:#6B5A2A;
}

/* Само окно Roundcube: заголовок целиком, поля не жмутся */
.ui-dialog .ui-dialog-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:17px;
  font-weight:600;
}
.ui-dialog .ui-dialog-content{ padding:0 !important; }
.ui-dialog iframe{ width:100% !important; border:0; }

/* Поля, которые нужны только Roundcube: на экране их нет, но
   в разметке они есть — иначе отправка падает с ошибкой. */
.tk-hidden-field{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Плотный вид на телефоне. Там строка двухстрочная и её высоту
   задают мобильные правила, а не переменная --tk-row: на узком
   экране переключатель плотности ничего не менял — как было 64
   точки, так и оставалось. */
@media (max-width:899px){
  html.tk-compact #messagelist tbody tr[id^=rcmrow],
  html.tk-compact.tk-list-mode #messagelist tbody tr[id^=rcmrow]{
    min-height:44px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
    row-gap:0 !important;
  }
  /* начало текста письма в плотном виде не показываем */
  html.tk-compact #messagelist .tk-snip{ display:none !important; }
  html.tk-compact #messagelist span.tk-av{
    width:26px !important; height:26px !important;
    min-width:26px !important; max-width:26px !important;
    font-size:11px !important;
  }
  html.tk-wide #messagelist tbody tr[id^=rcmrow]{
    min-height:78px !important;
  }
}

/* ============================================================
   136. РАЗМЫТИЕ ФОНА ДЕЛАЕТ САМА СТРАНИЦА

   backdrop-filter на подложке не сработал: список и панель папок
   рисуются отдельными слоями, и размытие их не захватывало —
   строки под окном оставались читаемыми, размытие выглядело
   незаконченным.

   Поэтому размываем не «то, что под стеклом», а сами блоки
   страницы. Так работает везде и одинаково.

   Расход невелик: размывается один блок целиком, пока открыто
   окно, без переходов и теней. Как только окно закрыли, класс
   снимается и фильтра нет вовсе.
   ============================================================ */
html.tk-composing #tk-app,
html.tk-composing #tk-pages,
html.tk-composing #tk-fab{
  filter:blur(7px);
  /* Размытые края тянут за собой прозрачность — обрезаем, чтобы
     по краям экрана не проступала светлая кайма. */
  transform:scale(1.01);
  transform-origin:center;
  pointer-events:none;
  user-select:none;
}
/* Окно письма к размытым блокам не относится: оно лежит выше. */
html.tk-composing .tk-compose{ filter:none !important; }

/* Тем, кто просил меньше движения, размытие не нужно: просто
   притеняем страницу. */
@media (prefers-reduced-motion: reduce){
  html.tk-composing #tk-app,
  html.tk-composing #tk-pages,
  html.tk-composing #tk-fab{
    filter:none;
    transform:none;
    opacity:.55;
  }
}

/* ============================================================
   137. КНОПКА «СОХРАНИТЬ» ВСЕГДА НА ВИДУ

   В настройках и в карточке контакта кнопка сохранения стояла в
   самом низу формы. У раздела «Пользовательский интерфейс» это
   1536-я точка при экране в 900: чтобы сохранить, надо было
   прокрутить всю страницу и найти кнопку внизу. В карточке
   контакта — 1736-я.

   Прижимаем ряд кнопок к нижнему краю: он едет вместе с
   прокруткой и всегда виден, как в эталоне.
   ============================================================ */

/* Полосу собирает плагин: кнопка и «Отмена» переезжают в свой
   блок. Пробовал обойтись оформлением — подложка через ::after
   перекрывала саму кнопку, и та становилась бесцветной. */
.tk-ffoot{
  position:sticky;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px -24px 0;
  padding:14px 24px;
  background:var(--tk-bg, #F6F7F8);
  border-top:1px solid var(--tk-line, #EBECEF);
}
.tk-ffoot button.tk-send,
.tk-ffoot a.tk-cancel{
  position:static !important;
  margin:0 !important;
  box-shadow:none !important;
}

/* Запас снизу, чтобы последняя строка формы не пряталась
   под закреплённой полосой. */
.tk-form-page #tk-form,
.tk-card-page #tk-card{ padding-bottom:26px; }

/* ============================================================
   138. РАЗМЕР КНОПОК ПОД ПАЛЕЦ

   «Прикрепить файл», «Из Облака» и «Из Почты» были высотой в
   двадцать точек — по такой кнопке трудно попасть даже мышью,
   а на сенсорном экране тем более. Доводим до тридцати шести:
   столько же у соседних кнопок окна письма.
   ============================================================ */
#tk-attrow button.tk-att{
  min-height:36px;
  padding:0 10px;
  border-radius:9px;
}
#tk-attrow button.tk-att:hover{ background:#EEF2F8; }

/* Стрелка выбора ящика в боковой панели — тоже мелковата */
#tk-accbtn.tk-accbtn{
  min-width:28px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
}
#tk-accbtn.tk-accbtn:hover{ background:#EEF2F8; }

/* Знак «ТЕКСА» — это ссылка на почту, но нажимать было почти
   некуда: высота строки текста, девятнадцать точек. Даём ему
   нормальную область нажатия. */
#tk-brand{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  border-radius:8px;
}

/* Отметка сборки внизу панели ящика — мелко и тихо, но всегда
   видно, какая версия стоит на сервере. */
.tk-acc-ver{
  margin:8px 0 0;
  padding:8px 14px 2px;
  border-top:1px solid var(--tk-line, #EBECEF);
  font-size:11.5px;
  color:var(--tk-muted, #6F7178);
  text-align:center;
  user-select:text;
}

/* ============================================================
   139. СТРАНИЦЫ ПЛАГИНОВ — В ОБЩЕМ ВИДЕ

   У плагинов свои шаблоны: у managesieve это «Фильтры и
   автоответчик», у других — свои страницы. Наших разметок
   #tk-* там нет, всё построено на раскладке elastic.

   Раньше на такие страницы даже не приходили наши стили: их
   подключали только наши шаблоны. Человек видел чужую тёмную
   полосу задач, три колонки и оформление, не имеющее ничего
   общего с остальной почтой. Теперь стили подключает плагин, а
   этот раздел приводит саму раскладку к общему виду.
   ============================================================ */

/* Тёмной полосы задач нет нигде — ни на своих страницах, ни на
   чужих. */
html.tk-nomenu #taskmenu,
body.task-settings #taskmenu{ display:none !important; }

/* Раскладка: боковая панель нашей ширины, содержимое рядом. */
html.tk-nomenu #layout{
  height:100dvh !important;
  background:var(--tk-bg, #F6F7F8) !important;
}
html.tk-nomenu #layout-sidebar{
  flex:0 0 240px !important;
  max-width:240px !important;
  background:var(--tk-bg, #F6F7F8) !important;
  border-right:1px solid var(--tk-line, #EBECEF) !important;
}
html.tk-nomenu #layout-list,
html.tk-nomenu #layout-content{
  background:var(--tk-surface, #FFFFFF) !important;
  border-left:0 !important;
}

/* Шапка списка на чужой странице: заголовок целиком, кнопки в
   строку. Раньше «Правила фильтрации» обрезалось по высоте. */
html.tk-nomenu #layout-list > .header,
html.tk-nomenu #layout-content > .header{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-height:56px;
  height:auto !important;
  padding:10px 18px !important;
  background:var(--tk-surface, #FFFFFF) !important;
  border-bottom:1px solid var(--tk-line, #EBECEF) !important;
  overflow:visible !important;
}
html.tk-nomenu #layout-list > .header .header-title,
html.tk-nomenu #layout-list > .header h2{
  display:block !important;
  font-size:19px;
  font-weight:600;
  color:var(--tk-text, #2C2D2E);
  white-space:nowrap;
}
/* Кнопки шапки — как в наших панелях */
html.tk-nomenu #layout-list > .header a.button,
html.tk-nomenu #layout-list > .header button{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--tk-text, #2C2D2E);
  font-size:14px;
  text-decoration:none;
}
html.tk-nomenu #layout-list > .header a.button:hover,
html.tk-nomenu #layout-list > .header button:hover{ background:#EEF2F8; }

/* Содержимое страницы плагина не должно обрезаться и не должно
   давать вторую полосу прокрутки: прокручивается один блок. */
html.tk-nomenu #layout-list .scroller,
html.tk-nomenu #layout-content .scroller{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:18px !important;
}
html.tk-nomenu #layout-list > .scroller > *:first-child{ margin-top:0; }

/* Заголовки внутри страницы плагина */
html.tk-nomenu #layout-list h1,
html.tk-nomenu #layout-content h1{
  display:block !important;
  height:auto !important;
  margin:0 0 14px;
  font-size:20px;
  font-weight:600;
  color:var(--tk-text, #2C2D2E);
  overflow:visible !important;
}

/* Формы плагинов — теми же полями, что наши */
html.tk-nomenu #layout-content input[type=text],
html.tk-nomenu #layout-content input[type=email],
html.tk-nomenu #layout-content select,
html.tk-nomenu #layout-content textarea,
html.tk-nomenu #layout-list input[type=text],
html.tk-nomenu #layout-list select,
html.tk-nomenu #layout-list textarea{
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--tk-line, #E7EEF7);
  border-radius:10px;
  background:#FFFFFF;
  font-size:14px;
  color:var(--tk-text, #2C2D2E);
  box-sizing:border-box;
}
html.tk-nomenu #layout-content textarea,
html.tk-nomenu #layout-list textarea{ padding:10px 12px; min-height:80px; }

/* ============================================================
   140. ЗНАЧКИ МЕНЮ НАСТРОЕК НА ЧУЖИХ СТРАНИЦАХ

   На страницах плагинов приходит оформление elastic. Оно рисует
   значки шрифтом Icons через ::before и задаёт им свои размеры и
   цвет — с весом выше нашего. Наша маска при этом оставалась, но
   без заливки и нужной высоты: вместо значка получался пунктирный
   квадратик.

   Повышаем вес: селектор с html body и все свойства помечены как
   важные. Заодно гасим шрифтовой значок — иначе он проступает
   поверх нашей картинки.
   ============================================================ */
html body #tk-set-menu a::before,
html body .tk-set-tabs a::before,
html body #settings-menu a::before{
  content:'' !important;
  font-family:inherit !important;      /* чтобы не рисовался знак шрифта */
  font-size:0 !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  flex:0 0 20px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  background-color:#6F7178 !important;
  background-image:none !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;  mask-position:center !important;
  -webkit-mask-size:contain !important;     mask-size:contain !important;
  opacity:1 !important;
}
html body #tk-set-menu .selected a::before,
html body .tk-set-tabs .selected a::before{ background-color:#2C2D2E !important; }

html body #settingstabpreferences a::before{
  -webkit-mask-image:var(--tk-ico-prefs) !important; mask-image:var(--tk-ico-prefs) !important;
}
html body #settingstabfolders a::before{
  -webkit-mask-image:var(--tk-ico-folders) !important; mask-image:var(--tk-ico-folders) !important;
}
html body #settingstabidentities a::before{
  -webkit-mask-image:var(--tk-ico-ident) !important; mask-image:var(--tk-ico-ident) !important;
}
html body #settingstabresponses a::before{
  -webkit-mask-image:var(--tk-ico-resp) !important; mask-image:var(--tk-ico-resp) !important;
}
html body #settingstabpluginmanagesieve a::before{
  -webkit-mask-image:var(--tk-ico-filter) !important; mask-image:var(--tk-ico-filter) !important;
}

/* ============================================================
   141. ПРАВИЛА ФИЛЬТРАЦИИ — СВОЯ СТРАНИЦА, А НЕ ЧУЖАЯ

   Заказчик прислал снимок со своего сервера: раздел открывался
   с двумя полосами прокрутки, выглядел «как будто модалкой», а
   список наборов правил был обрезан до 36 точек по высоте.

   Причина: страницу рисовал шаблон темы elastic. Теперь у нас
   свой шаблон (skins/teksa/plugins/managesieve/templates), и
   раскладка здесь та же, что у «Папок» и «Готовых ответов»:
   боковая панель, список, форма вместо списка по выбору.

   Прокрутка ОДНА — у списка. Внутренних прокручиваемых блоков
   на странице нет.
   ============================================================ */

/* Шапка раздела: название и действия в одну строку. */
.tk-filt-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:60px;
  padding:12px 20px;
  border-bottom:1px solid var(--tk-line, #EBECEF);
  background:#FFFFFF;
}
.tk-filt-head .tk-filt-title{
  font-size:20px;
  font-weight:600;
  color:var(--tk-text, #2C2D2E);
  margin-right:8px;
  white-space:nowrap;
}

/* Кнопки раздела — те же, что на карточке контакта. Записаны с
   тегом «a», иначе правило главной кнопки проигрывает по весу:
   на карточке этим уже обжигались (раздел 130). */
a.tk-fb, .tk-fb{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border:0; border-radius:9px;
  background:transparent; color:var(--tk-text, #2C2D2E);
  font-size:14px; text-decoration:none; cursor:pointer;
  white-space:nowrap;
}
/* Наведение НЕ должно трогать главную кнопку.

   «a.tk-fb:hover» весит больше, чем «a.tk-fb-main» — псевдокласс
   считается за класс. Синяя кнопка «Добавить правило» при наведении
   получала светло-голубую подложку и белый текст на ней: с виду
   исчезала совсем. Ровно это было видно на снимке формы правила —
   в шапке оставалось одно «Удалить». */
a.tk-fb:not(.tk-fb-main):hover{ background:#EEF2F8; }
a.tk-fb-main{
  background:var(--tk-accent, #005FF9); color:#FFFFFF; font-weight:500;
}
a.tk-fb-main:hover{ filter:brightness(1.08); color:#FFFFFF; }
a.tk-fb-dang{ color:var(--tk-danger, #E64646); }
a.tk-fb-dang:hover{ background:#FDECEC; }
.tk-fb.disabled{ opacity:.4; pointer-events:none; }
/* мелкие действия набора — ниже ростом и приглушённее */
a.tk-fb-s{ height:32px; padding:0 10px; font-size:13px; color:var(--tk-dim, #6F7178); }

/* Полоса наборов правил. В эталоне наборов нет вовсе, поэтому
   она неприметная и НЕ прокручивается: раньше здесь стоял блок
   #filtersetslistbox высотой 36 точек с «overflow:auto», внутрь
   которого не помещалась даже одна строка таблицы. */
.tk-filt-sets{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:10px 20px;
  border-bottom:1px solid var(--tk-line, #EBECEF);
  background:var(--tk-bg, #F6F7F8);
  overflow:visible;
}
.tk-filt-sets .tk-filt-setslab{
  font-size:13px; color:var(--tk-dim, #6F7178); margin-right:4px;
}
.tk-filt-sets select#filtersetslist,
.tk-filt-sets .tk-filt-setlist{
  height:36px; min-width:180px; max-width:320px;
  padding:0 10px;
  border:1px solid var(--tk-line, #E7EEF7); border-radius:9px;
  /* background-color, а не «background»: сокращение убирает
     стрелку выпадающего списка (общее правило «select{}») */
  background-color:#FFFFFF; color:var(--tk-text, #2C2D2E); font-size:14px;
}
/* Если сервер отдал наборы таблицей, а не выбором, — не даём ей
   прокручиваться и обрезаться. */
.tk-filt-sets table#filtersetslist{
  width:auto; max-width:100%; border:0; background:transparent;
}

/* Список правил. */
body.tk-filters-page #tk-set-list{
  display:flex; flex-direction:column;
  min-width:0;
  overflow-y:auto; overflow-x:hidden;
  background:#FFFFFF;
}
body.tk-filters-page #filterslist{
  width:100%; border-collapse:collapse; table-layout:auto;
}
body.tk-filters-page #filterslist td{
  padding:0 20px;
  height:var(--tk-row, 44px);
  font-size:14px; color:var(--tk-text, #2C2D2E);
  border-bottom:1px solid var(--tk-line, #EBECEF);
  vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.tk-filters-page #filterslist tr{ cursor:pointer; }
body.tk-filters-page #filterslist tr:hover td{ background:var(--tk-hover, #F2F3F5); }
body.tk-filters-page #filterslist tr.selected td{
  background:var(--tk-sel, #E5F0FF); color:var(--tk-text, #2C2D2E);
}
/* выключенное правило — приглушённое, как в почтовых сервисах */
body.tk-filters-page #filterslist tr.disabled td{ color:var(--tk-dim, #9CA0A8); }

/* Пусто — подсказка вместо голого белого поля. */
body.tk-filters-page #filterslist tbody:empty::after{
  content:"Правил пока нет. Нажмите «Добавить правило».";
  display:block; padding:22px 20px;
  font-size:14px; color:var(--tk-dim, #6F7178);
}

/* Форма правила показывается ВМЕСТО списка — тем же приёмом, что
   у папок и профилей. Рамка здесь называется #filter-box:
   managesieve.js ищет её по этому имени, переименовать нельзя. */
html.tk-form-open body.tk-filters-page #filter-box{
  flex:1 1 auto; width:100% !important; height:100% !important; border:0;
}

/* ------------------------------------------------------------
   Форма правила внутри рамки.

   На снимке заказчика поля условий были сжаты до нечитаемой
   ширины, а кнопки «+» и «−» налезали на них. Виноват был
   compact-form="true" из шаблона elastic — мы его не ставим, а
   здесь задаём строкам нормальные размеры.
   ------------------------------------------------------------ */
body.tk-filtedit-page #tk-form,
body.tk-form-page.tk-filtedit-page #tk-form{
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
  background:#FFFFFF;
}
/* Прокручивается и отступает сама форма. Обращаемся к ней по
   тегу: атрибут id на объекте filterform не проставляется —
   плагин рисует <form> своей разметкой. */
body.tk-filtedit-page #tk-form > form{
  flex:1 1 auto; overflow-y:auto; padding:18px 22px;
}
/* строка условия или действия целиком */
body.tk-filtedit-page .rulerow > td,
body.tk-filtedit-page .actionrow > td{ padding:6px 0; }
body.tk-filtedit-page .rowbuttons{
  display:inline-flex; gap:6px; margin-left:8px; white-space:nowrap;
}
body.tk-filtedit-page .rowbuttons a,
body.tk-filtedit-page .rowbuttons .button{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; min-width:32px;
  border:1px solid var(--tk-line, #E7EEF7); border-radius:8px;
  background:#FFFFFF; color:var(--tk-text, #2C2D2E);
  text-decoration:none; font-size:15px; line-height:1;
}
body.tk-filtedit-page .rowbuttons a:hover{ background:#EEF2F8; }
/* поля правил: раньше select и input стояли встык без отступов */
body.tk-filtedit-page select,
body.tk-filtedit-page input[type=text],
body.tk-filtedit-page input[type=email],
body.tk-filtedit-page input[type=number],
body.tk-filtedit-page textarea{
  min-height:38px; max-width:100%;
  margin:0 6px 6px 0; padding:0 10px;
  border:1px solid var(--tk-line, #E7EEF7); border-radius:9px;
  background-color:#FFFFFF; color:var(--tk-text, #2C2D2E); font-size:14px;
  box-sizing:border-box;
}
body.tk-filtedit-page textarea{ padding:9px 10px; min-height:76px; }
body.tk-filtedit-page fieldset{
  border:1px solid var(--tk-line, #EBECEF); border-radius:12px;
  margin:0 0 16px; padding:12px 16px 6px;
}
body.tk-filtedit-page legend{
  padding:0 6px; font-size:15px; font-weight:600;
  color:var(--tk-text, #2C2D2E);
}

/* Автоответчик и пересылка: страница с формой, кнопка снизу.

   Селектор нарочно длинный. Общее правило разделов настроек
   («body.tk-set-page:not(.tk-settings-page) #tk-set-body») прячет
   эту область до открытия формы — там она рамка правки. Здесь
   списка нет вовсе, форма и есть содержимое, и без утяжеления
   селектора страница открывалась ПУСТОЙ: одна боковая панель. */
html body.tk-set-page.tk-vac-page #tk-set-body,
html body.tk-set-page.tk-fwd-page #tk-set-body{
  display:flex !important; flex-direction:column;
  min-width:0; overflow:hidden; background:#FFFFFF;
}
html body.tk-vac-page #tk-form.tk-setform,
html body.tk-fwd-page #tk-form.tk-setform{
  flex:1 1 auto; display:flex; flex-direction:column;
  /* Ширину задаём явно: внутри гибкого блока «margin:0 auto» из
     общего правила #tk-form не работает — блок сжимался по
     содержимому до 577 точек и вставал посреди пустого поля. */
  width:100%; max-width:820px; margin:0;
  overflow-y:auto; padding:18px 22px; box-sizing:border-box;
}
html body.tk-vac-page #tk-form.tk-setform form,
html body.tk-fwd-page #tk-form.tk-setform form{ width:100%; }

/* Общий отступ списка настроек здесь не нужен: шапка и полоса
   наборов идут во всю ширину, как в остальных разделах. */
body.tk-filters-page #tk-set-list{ padding:0 !important; }
body.tk-filters-page #filterslist tbody{ display:table-row-group; width:100%; }

/* ------------------------------------------------------------
   141б. ФОРМА ПРАВИЛА: ПОЛЯ, СТРОКИ И КНОПКИ «+» / «−»

   Разметку строк собирает сам плагин managesieve, и приходит она
   в раскладке Bootstrap от темы elastic: подпись занимает треть
   ширины (col-sm-4), поле — две трети (col-sm-8). В нашей теме
   этих колонок нет, и получалось вот что:

     • галочка «Фильтр включен» улетала к правому краю окна,
       а подпись растягивалась на 800 точек;
     • у кнопок «Добавить» и «Удалить» ширина считалась по
       значку (44 и 32 точки), а подпись внутри — 71 точка, и
       она вылезала за кнопку влево, налезая на соседнюю. Это
       ровно то наложение, которое заказчик показал на снимке.
   ------------------------------------------------------------ */

/* Форма правила занимает всю ширину рамки: строк здесь много и
   они длинные, ограничение в 900 точек резало поля. */
body.tk-filtedit-page #tk-form{ max-width:none; margin:0; padding:0; }

/* Подпись и поле — друг под другом, без колонок Bootstrap. */
body.tk-filtedit-page .form-group.row{
  display:block !important;
  margin:0 0 14px !important;
}
body.tk-filtedit-page .col-form-label{
  display:block !important;
  width:auto !important; max-width:none !important;
  flex:none !important;
  margin:0 0 6px !important; padding:0 !important;
  font-size:13px; color:var(--tk-dim, #6F7178);
}
body.tk-filtedit-page .form-group.row > div[class*="col-"]{
  display:block !important;
  width:auto !important; max-width:none !important;
  flex:none !important;
  padding:0 !important;
}

/* Галочка и её подпись — в одну строку, подпись справа. */
body.tk-filtedit-page .form-group.form-check{
  display:flex !important;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
body.tk-filtedit-page .form-group.form-check .col-form-label{
  margin:0 !important;
  font-size:14px; color:var(--tk-text, #2C2D2E);
  cursor:pointer;
}
body.tk-filtedit-page .form-group.form-check > .form-check{
  flex:0 0 auto !important;
  width:auto !important;
}
body.tk-filtedit-page input[type=checkbox],
body.tk-filtedit-page input[type=radio]{
  width:18px; height:18px; min-height:0; margin:0 6px 0 0;
  accent-color:var(--tk-accent, #005FF9);
}

/* Кнопки «Добавить» и «Удалить» у строки правила: ширина по
   подписи, а не по значку. Подпись — это span.inner. */
body.tk-filtedit-page .rowbuttons{ padding-top:4px; }
body.tk-filtedit-page .rowbuttons a.button{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:auto !important; min-width:0 !important;
  height:34px; margin:0 8px 0 0; padding:0 14px;
  border:1px solid var(--tk-line, #E7EEF7); border-radius:9px;
  background:#FFFFFF; color:var(--tk-text, #2C2D2E);
  font-size:13px; text-decoration:none; overflow:visible;
}
body.tk-filtedit-page .rowbuttons a.button .inner{
  position:static !important;
  width:auto !important; height:auto !important;
  clip:auto !important; clip-path:none !important;
  overflow:visible !important;
  font-size:13px; line-height:1; white-space:nowrap;
}
body.tk-filtedit-page .rowbuttons a.button::before{ content:none !important; }
body.tk-filtedit-page .rowbuttons a.button:hover{ background:#EEF2F8; }
body.tk-filtedit-page .rowbuttons a.button.disabled{
  opacity:.45; pointer-events:none;
}
body.tk-filtedit-page .rowbuttons a.delete{ color:var(--tk-danger, #E64646); }

/* Строка правила: выбор поля, условие и значение — по строке
   каждое, с зазором. Раньше они стояли встык. */
body.tk-filtedit-page .compact-table{ width:100%; border-collapse:collapse; }
body.tk-filtedit-page .compact-table td{ padding:3px 0; border:0; }
body.tk-filtedit-page .flexbox{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
body.tk-filtedit-page .flexbox > select,
body.tk-filtedit-page .flexbox > .listarea{ margin:0; }
body.tk-filtedit-page .listarea{
  display:inline-flex; flex:1 1 260px; min-width:200px;
}
body.tk-filtedit-page .listarea .listelement{
  display:flex; align-items:center; width:100%;
}
body.tk-filtedit-page .listarea input[type=text]{
  flex:1 1 auto; width:100%; margin:0;
}

/* «Дополнительные параметры» — ссылкой, а не значком. */
body.tk-filtedit-page .advbutton a{
  display:inline-block; margin:0 0 4px;
  font-size:13px; color:var(--tk-accent, #005FF9); text-decoration:none;
}
body.tk-filtedit-page .advbutton a:hover{ text-decoration:underline; }

/* Разделитель между правилами: без него строки сливались. */
body.tk-filtedit-page .rulerow + .rulerow,
body.tk-filtedit-page .actionrow + .actionrow{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--tk-line, #EBECEF);
}

/* Полоса сохранения повторяет отступ своей формы. Общее правило
   (раздел 137) рассчитано на отступ в 24 точки, здесь он 22 — и
   полоса вылезала на две точки за край, давая полосу прокрутки
   по горизонтали. */
body.tk-filtedit-page .tk-ffoot,
body.tk-vac-page .tk-ffoot,
body.tk-fwd-page .tk-ffoot{ margin-left:-22px; margin-right:-22px; }

/* Правая часть страницы правил: шапка сверху, под ней список и
   форма. Так шапка с кнопками «Добавить правило» и «Удалить»
   остаётся на виду, когда открыта форма. */
body.tk-filters-page #tk-filt-main{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
  background:#FFFFFF;
}
body.tk-filters-page .tk-filt-panes{
  flex:1 1 auto; min-height:0;
  display:flex;
}
body.tk-filters-page .tk-filt-panes > #tk-set-list{ flex:1 1 auto; height:100%; }
html.tk-form-open body.tk-filters-page #tk-set-body{
  flex:1 1 auto; height:100%; min-width:0;
}
/* Кнопка «Назад к списку» растягивалась на всю ширину — она в
   гибком блоке-колонке. */
body.tk-filters-page #tk-form-back,
body.tk-vac-page #tk-form-back,
body.tk-fwd-page #tk-form-back{ align-self:flex-start; }

/* ------------------------------------------------------------
   141в. МЕЛОЧИ ФОРМЫ ПРАВИЛА

   Три вещи бросались в глаза на снимке:
     • выпадающие списки выглядели полем ввода — без стрелки было
       не понять, что по ним можно щёлкнуть;
     • подписи переключателей «соответствует всем / любому / все
       сообщения» стояли встык со следующим кружком;
     • ссылка «Дополнительные параметры» липла к ним снизу.
   ------------------------------------------------------------ */

/* Своей стрелки здесь не рисуем: её задаёт общее правило
   «select{}». Достаточно оставить место справа. */
body.tk-filtedit-page select,
body.tk-vac-page select,
body.tk-fwd-page select,
.tk-filt-sets select{ padding-right:34px; }

/* Переключатели «для входящей почты» — с воздухом между парами. */
/* Подпись переключателя занимала всю строку: где-то выше по
   файлу подписям форм задана ширина 100 %. Из-за этого кружок и
   его надпись вставали друг под другом, а три варианта выбора
   растягивались на шесть строк. */
body.tk-filtedit-page fieldset > label{
  display:inline-flex !important; align-items:center;
  width:auto !important; max-width:none !important;
  margin:0 22px 0 0 !important;
  font-size:14px; color:var(--tk-text, #2C2D2E); cursor:pointer;
}
body.tk-filtedit-page fieldset > input[type=radio]{ margin:0 8px 0 0; }
body.tk-filtedit-page .advbutton{ padding-top:12px !important; }

/* На телефоне полоса наборов правил занимала четверть экрана:
   подпись, выбор и пять действий переносились в три строки.
   Наборы — редкая надобность, поэтому здесь только выбор, а
   действия убираются под кнопку «Ещё» самой полосы. */
@media (max-width:640px){
  .tk-filt-sets{ padding:8px 14px; gap:4px; }
  .tk-filt-sets .tk-filt-setslab{ display:none; }
  .tk-filt-sets select#filtersetslist,
  .tk-filt-sets .tk-filt-setlist{ min-width:0; flex:1 1 140px; }
  .tk-filt-sets a.tk-fb-s{ height:30px; padding:0 8px; font-size:12px; }
  .tk-filt-head{ padding:10px 14px; min-height:52px; }
  .tk-filt-head .tk-filt-title{ font-size:18px; }
  body.tk-filters-page #filterslist td{ padding:0 14px; }
}

/* ============================================================
   142. ОКНА ПОДТВЕРЖДЕНИЯ ПОСЛЕ НАСЛЕДОВАНИЯ ОТ ELASTIC

   Скин объявил «extends: elastic» — без этого не находились
   шаблоны плагинов и страница правил открывалась пустой. Вместе
   с наследованием пришёл и файл jqueryui/themes/elastic/
   jquery-ui.min.css, а подключается он ПОСЛЕ наших стилей.

   Веса у правил одинаковые, поэтому побеждал он: у окна
   подтверждения пропали отступы — текст «Вы уверены, что хотите
   удалить…» упирался в самый край окна, — и вернулась ручка
   изменения размера в правом нижнем углу.

   Поднимаем вес наших правил: «html body» впереди.
   ============================================================ */

html body .ui-dialog .ui-dialog-content{
  padding:20px !important;
  background:var(--tk-surface);
  color:var(--tk-text);
}
html body .ui-dialog .ui-dialog-titlebar{ padding:16px 20px !important; }
html body .ui-dialog .ui-dialog-buttonpane{ padding:14px 20px !important; margin:0 !important; }
/* Ручку изменения размера в эталоне не тянут: окна там своего
   размера. Убираем — она вылезала поверх кнопки «Отмена». */
html body .ui-dialog .ui-resizable-handle{ display:none !important; }

/* ============================================================
   143. КРУЖОК ОТПРАВИТЕЛЯ НЕ ДОЛЖЕН ЛЕЖАТЬ НА ЕГО ИМЕНИ

   На снимке списка было видно: «Г‹кружок›осуслуги»,
   «W‹кружок›erries», «te‹кружок›mail.ru» — круг с буквой ложился
   поверх первых букв имени отправителя. И так в каждой строке.

   Кружок выведен из потока (position:absolute), а место под него
   освобождал отступ ячейки:

       #messagelist tr.tk-has-av td.tk-cell{ padding-left:50px }

   Но ниже по файлу идут правила режима списка —
   «html.tk-list-mode #messagelist tbody tr > td{ padding:0 }» и
   «#messagelist tbody tr > td.subject{ padding:0 }». Они весят
   больше и обнуляли отступ: кружок оставался на месте, а текст
   съезжал под него.

   Ставим отступ здесь, в самом низу файла и с !important, чтобы
   его уже ничто не перебило.
   ============================================================ */

html #messagelist tbody tr.tk-has-av > td.tk-cell,
html.tk-list-mode #messagelist tbody tr.tk-has-av > td.tk-cell,
html.tk-list-mode #messagelist tbody tr.tk-has-av > td.subject{
  padding-left:50px !important;
}
html body.tk-compact #messagelist tbody tr.tk-has-av > td.tk-cell,
html.tk-list-mode body.tk-compact #messagelist tbody tr.tk-has-av > td.subject{
  padding-left:42px !important;
}
html body.tk-wide #messagelist tbody tr.tk-has-av > td.tk-cell,
html.tk-list-mode body.tk-wide #messagelist tbody tr.tk-has-av > td.subject{
  padding-left:56px !important;
}
@media (max-width:768px){
  html #messagelist tbody tr.tk-has-av > td.tk-cell,
  html.tk-list-mode #messagelist tbody tr.tk-has-av > td.subject{
    padding-left:44px !important;
  }
}

/* Пометки (флажок, скрепка) — перед датой, а не между кружком и
   именем отправителя. Плагин вставляет их первым узлом ячейки, и
   без порядка они вклинивались туда: у строк с меткой имя
   отправителя начиналось на 35 точек правее, чем у остальных, и
   колонка «От» переставала быть ровной. */
html.tk-list-mode #messagelist td.subject > span.tk-marks,
html #messagelist td.subject > span.tk-marks{
  order:9;
  margin:0 8px 0 0;
  flex:0 0 auto;
}

/* ============================================================
   144. РАЗДЕЛЫ «АВТООТВЕТЧИК» И «ПЕРЕСЫЛКА»

   Установщик включает их в настройках managesieve
   (managesieve_vacation и managesieve_forward). Без этого попасть
   в них можно было только по прямой ссылке — в меню их не было
   вовсе, хотя страницы работали.

   Своих значков у них нет: elastic рисует их шрифтом Icons,
   которого у нас нет, и в меню оставались серые квадраты.
   ============================================================ */

:root{
  --tk-ico-vacation:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  --tk-ico-forward:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l7 7-7 7'/><path d='M22 12H8a5 5 0 0 0-5 5v2'/></svg>");
}
html body #settingstabpluginmanagesievevacation a::before{
  -webkit-mask-image:var(--tk-ico-vacation) !important;
  mask-image:var(--tk-ico-vacation) !important;
}
html body #settingstabpluginmanagesieveforward a::before{
  -webkit-mask-image:var(--tk-ico-forward) !important;
  mask-image:var(--tk-ico-forward) !important;
}

/* ============================================================
   145. ВНУТРИ РАМКИ ЭКРАН МЕРЯЕТСЯ НЕ ТАК

   Правила телефонной вёрстки написаны через
   «@media (max-width:899px)». Внутри рамки — письмо, окно
   написания, формы настроек — такой запрос меряет ширину САМОЙ
   РАМКИ, а не экрана.

   У рамки письма она оказалась 893 точки при мониторе в 1440:
   шесть точек не дотянули до порога, и внутри включалась
   телефонная вёрстка. У кнопок «Удалить», «В архив», «В папку»,
   «Спам», «Ответить», «Переслать» пропадали подписи — оставались
   одни значки без слов. Отсюда «письмо открывается не так, как в
   эталоне»: в эталоне подписи есть.

   Класс tk-phone ставит скрипт, глядя на ширину ГЛАВНОГО окна
   (см. installScreenClass). Здесь мы возвращаем подписи всем, у
   кого экран на самом деле большой.
   ============================================================ */

html.tk-desk #tk-msgbar .tk-mb{
  font-size:14px !important;
  gap:8px !important;
  padding:8px 12px !important;
}
html.tk-desk #tk-msgbar .tk-mb.ico{ padding:8px !important; }
html.tk-desk #tk-listbar > button,
html.tk-desk .tk-listbar > button{
  font-size:14px !important;
  gap:8px !important;
  padding:8px 12px !important;
}
html.tk-desk #tk-book-bar button,
html.tk-desk .tk-setbar button.tk-sb{ font-size:14px; gap:8px; }

/* И наоборот: если экран правда узкий, а рамка широкая (телефон
   в ландшафте, окно письма во весь экран) — подписи убираем, как
   и задумано для телефона. */
html.tk-phone #tk-msgbar .tk-mb{
  font-size:0 !important;
  gap:0 !important;
  padding:8px 9px !important;
}
html.tk-phone #tk-msgbar .tk-mb svg{ font-size:initial; }

/* ============================================================
   146. ПИСЬМО: ОДНА ЛЕВАЯ ЛИНИЯ У ТЕМЫ, ОТПРАВИТЕЛЯ И ТЕКСТА

   В эталоне тема, строка отправителя и текст письма начинаются
   из одной точки. У нас текст стоял на 13 точек правее темы.

   Причина — та же, что в разделе 145: внутри рамки письма её
   ширина (893) меньше порога телефонной вёрстки (900), и часть
   правил применялась как для телефона, а часть — нет. Тема
   получала мобильный отступ 16, а тело — удвоенный --tk-pad,
   посчитанный от ширины рамки: 28,6.

   Удвоение было верным, когда отступ давал ещё и блок-родитель.
   Сейчас у родителей отступа нет (проверено: у #tk-msg-head и
   #tk-msgview padding-left равен нулю), и удваивать нечего.

   Задаём отступ ОДНОЙ переменной для всех трёх частей письма,
   чтобы они не могли разъехаться.
   ============================================================ */

:root{ --tk-msg-pad:clamp(16px, 1.8vw, 28px); }

html body #tk-msg-subject,
html body #tk-msg-who,
html body #tk-msg-from,
html body #tk-msg-head > *{
  padding-left:var(--tk-msg-pad) !important;
  padding-right:var(--tk-msg-pad) !important;
}
html body #tk-msg-body{
  padding-left:var(--tk-msg-pad) !important;
  padding-right:var(--tk-msg-pad) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}
html body #tk-msg-body #messagebody{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ============================================================
   147. СПИСКИ КОНТАКТОВ, ПРОФИЛЕЙ, ОТВЕТОВ И ПАПОК — ВО ВСЮ ШИРИНУ

   У «.tk-listing» и списка папок стояло «max-width:820px». На
   мониторе 1920 это значит: список занимает 820 точек, а справа
   восемьсот точек пустоты. Заказчик показал это на снимке
   контактов со своего сервера — там пустой была большая часть
   экрана.

   Ограничение имеет смысл для текста, который читают строками,
   но строка списка — это запись, а не абзац: имя слева, действия
   справа. В эталоне такие списки идут во всю ширину.

   Ровно та же ошибка была у списка писем (раздел 69) и лечится
   так же — снятием отсечки, а не подбором нового числа.
   ============================================================ */

html body .tk-listing,
html body #contacts-table,
html body #subscription-table.tk-folder-table{
  max-width:none !important;
  width:100% !important;
}

/* Список правил фильтрации: у него отдельные правила ширины,
   унаследованные от той поры, когда раздел рисовался чужим
   шаблоном (см. «html.tk-other #filterslist» выше по файлу).
   Там же стоит «margin:0 auto» — список не только ужимался, но и
   вставал по центру, оставляя пустоту с обеих сторон. */
html body.tk-filters-page #filterslist,
html body.tk-filters-page #filtersetslist,
html body.tk-filters-page .tk-filt-list table{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* Выбор набора — наоборот, во всю ширину не нужен: это поле
   выбора, а не список. */
html body.tk-filters-page select#filtersetslist{
  width:auto !important;
  max-width:320px !important;
}

/* На узком экране карточка контакта показывается ТОЛЬКО когда её
   открыли. Правило раскладки телефона включало её всегда — пустой
   блок стоял справа от списка и, когда список занял всю ширину,
   выехал за край экрана вместе с кнопкой «Назад к списку».
   Проверка находила их на 380-й точке при экране в 390. */
@media (max-width:899px){
  html:not(.tk-card-open) body.tk-book-page #tk-book-card{
    display:none !important;
  }
  html:not(.tk-card-open) body.tk-book-page #tk-book-back{
    display:none !important;
  }
}

/* ============================================================
   148. ВТОРАЯ ПОЛОСА ПРОКРУТКИ ОТ ЧУЖОГО ВСПЛЫВАЮЩЕГО БЛОКА

   Заказчик писал: «зачем второй скрол». Полос действительно было
   две: одна у списка писем, вторая — у всей страницы. Вторая
   короткая, всего на 12 точек, но она есть, и колесо мыши то
   крутит список, то дёргает страницу.

   Виновник нашёлся замером: плагин managesieve кладёт в конец
   страницы блок подсказки «#managesieve-tip». Он пустой, высотой
   12 точек, но стоит в ОБЫЧНОМ потоке — то есть после нашего
   приложения, которое и так занимает всю высоту окна. Итого
   900 + 12, и документ начинает прокручиваться.

   Лечим двумя правилами:
     • эту конкретную подсказку прячем — у нас свои страницы
       правил, чужая подсказка там ни к чему;
     • любое всплывающее меню, оставшееся прямо в теле страницы,
       выводим из потока. Всплывающему меню место над страницей,
       а не в её высоте, — тогда оно не сможет добавить прокрутку,
       даже если появится новое.
   ============================================================ */

html body #managesieve-tip{ display:none !important; }

html body > .popupmenu,
html body > .popover{
  position:absolute !important;
  top:0; left:0;
}