/*
 * Скин «УпакЭко» для веб-почты pochta.upackeco.ru — поверх стандартного Elastic.
 * Цель (Андрей 09.10): «такой же удобный, как Яндекс.Почта»; стандартный Roundcube «вообще не нравится».
 * Фирменное Яндекса (логотип, иконки, шрифт, цвета) не берём — только удобство раскладки.
 * Свой цвет — зелёный УпакЭко (#6f9e2a, белый текст на нём 3,18:1 — для крупной кнопки; для мелкого
 * текста используем тёмный #3d6b12, 6,3:1 на белом).
 */
:root {
	--upk-green: #6f9e2a;
	--upk-green-dark: #3d6b12;
	--upk-green-hover: #5f8f1f;
	--upk-green-soft: #eef5e3;
	--upk-fill: #3d6b12;      /* заливка под белым текстом/галочкой — в обеих темах тёмно-зелёная */
	--upk-text: #1f2329;
	--upk-text-2: #6b7280;   /* вторичный текст: начало письма, адреса */
	--upk-muted: #5a6170;
	--upk-line: #eceef2;
	--upk-hover: #f5f6f8;
	--upk-bg: #ffffff;
	--upk-page: #f3f5f2;      /* фон страницы входа */
	--upk-side: #f7f8fa;      /* колонка задач */
	--upk-surface: #f0f1f3;   /* плашки, кнопки-«таблетки» */
	--upk-surface-2: #e4e6ea; /* они же при наведении */
	--upk-selected: #ebedf0;  /* выбранная папка */
	--upk-input: #f3f4f6;
	--upk-field-line: #d5d9df;
	--upk-check-line: #b5bac3;
	--upk-dot: #c3c8d0;
	--upk-disabled: #a3a8b1;
	--upk-danger: #a8372e;
	--upk-shadow: rgba(31, 35, 41, .18);
	--upk-shadow-soft: rgba(31, 35, 41, .10);
	--upk-shadow-strong: rgba(31, 35, 41, .30);
	--upk-shade: rgba(31, 35, 41, .28);
	--upk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Тёмная тема (Андрей 09.10: «тёмную тему нужно доделывать, вообще ничего не читается»): те же переменные,
   палитра — в тон тёмной теме Elastic (фон #21292c, текст #c5d1d3), чтобы наши части не выбивались из его */
html.dark-mode {
	--upk-green: #6f9e2a;
	--upk-green-dark: #a5d66b;   /* акцентный текст на тёмном — светло-зелёный */
	--upk-green-hover: #7fae36;
	--upk-green-soft: #2b3a24;
	--upk-fill: #4e7f1c;
	--upk-text: #dfe6e8;
	--upk-text-2: #9aa8ac;
	--upk-muted: #9aa8ac;
	--upk-line: #2c373a;
	--upk-hover: #2a3437;
	--upk-bg: #21292c;
	--upk-page: #161b1d;
	--upk-side: #1b2124;
	--upk-surface: #2f3a3e;
	--upk-surface-2: #3a474b;
	--upk-selected: #2f3a3e;
	--upk-input: #2a3437;
	--upk-field-line: #3a474b;
	--upk-check-line: #6a7b80;
	--upk-dot: #56666b;
	--upk-disabled: #637e82;
	--upk-danger: #ff8a80;
	--upk-shadow: rgba(0, 0, 0, .45);
	--upk-shadow-soft: rgba(0, 0, 0, .35);
	--upk-shadow-strong: rgba(0, 0, 0, .6);
	--upk-shade: rgba(0, 0, 0, .55);
}
html, body, input, textarea, select, button { font-family: var(--upk-font) !important; }
body { background: var(--upk-bg); color: var(--upk-text); }

/* ── левая колонка задач: была тёмной и тяжёлой — делаем светлой и тихой ── */
#layout-menu { background: var(--upk-side); border-right: 1px solid var(--upk-line); }
#layout-menu .popover-header { background: transparent; }
#layout-menu #taskmenu a { color: var(--upk-muted); }
#layout-menu #taskmenu a:hover, #layout-menu #taskmenu a.selected { color: var(--upk-green-dark); background: var(--upk-green-soft); }
#layout-menu #taskmenu a.compose { display: none; } /* «Написать» переехала над папки */
#layout-menu #taskmenu a.logout { color: var(--upk-danger); }

/* ── папки ── */
#layout-sidebar { background: var(--upk-bg); border-right: 1px solid var(--upk-line); }
#layout-sidebar .header { display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 16px 14px 8px; border: 0; background: var(--upk-bg); }
#layout-sidebar .header .header-title.username { order: 2; font-size: 12.5px; font-weight: 400; color: var(--upk-muted); padding: 10px 4px 0; text-align: left; }
#layout-sidebar .header .sidebar-menu { position: absolute; right: 10px; top: 72px; }
a.upk-compose {
	order: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; border-radius: 12px; background: var(--upk-green); color: #fff !important;
	font-size: 15px; font-weight: 600; text-decoration: none !important; box-shadow: 0 1px 2px var(--upk-shadow-soft);
}
a.upk-compose::before { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; margin-top: -2px; }
a.upk-compose:hover { background: var(--upk-green-hover); }
#folderlist-content ul.treelist li a { height: 36px; line-height: 36px; border-radius: 0 18px 18px 0; margin-right: 10px; color: var(--upk-text); font-size: 14px; }
#folderlist-content ul.treelist li.selected > div > a,
#folderlist-content ul.treelist li.selected > a { background: var(--upk-green-soft); color: var(--upk-green-dark); font-weight: 600; }
#folderlist-content ul.treelist li > div:hover, #folderlist-content ul.treelist li > a:hover { background: var(--upk-hover); }
#folderlist-content .unreadcount { background: transparent !important; color: var(--upk-green-dark) !important; font-weight: 700; }

/* ── список писем: одна строка «отправитель — тема — дата», как у Яндекса ── */
#layout-list { background: var(--upk-bg); border-right: 1px solid var(--upk-line); }
#layout-list .header, #layout-list .searchbar { background: var(--upk-bg); border-color: var(--upk-line); }
#messagelist tbody tr td { border-color: var(--upk-line) !important; }
#messagelist tbody tr:hover td { background: var(--upk-hover); }
#messagelist tbody tr.upk-checked td { background: var(--upk-green-soft) !important; } /* только отмеченные галочкой */
#messagelist tbody tr.focused td { outline: 0; }
#messagelist tbody tr td.subject { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; column-gap: 12px; align-items: center; padding: 11px 12px 11px 6px; }
#messagelist tbody tr td.subject > span.fromto { grid-column: 1; grid-row: 1; font-size: 14px; color: var(--upk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messagelist tbody tr td.subject > span.subject { grid-column: 2; grid-row: 1; font-size: 14px; color: var(--upk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
#messagelist tbody tr td.subject > span.date { grid-column: 3; grid-row: 1; font-size: 12.5px; color: var(--upk-muted); white-space: nowrap; }
#messagelist tbody tr td.subject > span.size { display: none; }
#messagelist tbody tr.unread td.subject > span.fromto,
#messagelist tbody tr.unread td.subject > span.subject a { font-weight: 700; color: var(--upk-text); }
#messagelist tbody tr td.subject > span.subject a { color: inherit; }

/* ── поиск: широкая строка сверху ── */
#mailsearchform input, .searchbar input { border-radius: 10px; background: var(--upk-input); border: 1px solid transparent; }
#mailsearchform input:focus, .searchbar input:focus { background: var(--upk-bg); border-color: var(--upk-green); box-shadow: 0 0 0 3px rgba(111,158,42,.18); }

/* ── область письма ── */
#layout-content { background: var(--upk-bg); }
#layout-content .header { background: var(--upk-bg); border-color: var(--upk-line); }
#layout-content .toolbar a, #messagelist-header .toolbar a { color: var(--upk-muted); }
#layout-content .toolbar a:hover { color: var(--upk-green-dark); }

/* ── итерация 2 (09.10): после первого снимка ── */
/* логотип Roundcube вверху слева — не наш; вместо него ничего, «Почта» и так подписана */
#layout-menu .popover-header #logo, #layout-menu .popover-header img { display: none !important; }
/* над меню Elastic держит тёмную плашку под свой логотип (#2f3a3f !important), а сам логотип в узкой колонке скрыт —
   выходил пустой тёмный прямоугольник (Андрей 09.10: «что за картина Малевича?») → фон колонки и знак УпакЭко */
html #layout-menu .popover-header, html.dark-mode #layout-menu .popover-header { background: transparent url(mark.png) center / 40px no-repeat !important; min-height: 58px; }
html.dark-mode #layout-menu .popover-header { border-bottom: 0; }
/* нижний блок колонки задач оставался тёмным от Elastic */
#layout-menu .special-buttons, #layout-menu .special-buttons a { background: transparent !important; color: var(--upk-muted) !important; }
#layout-menu .special-buttons a.logout { color: var(--upk-danger) !important; }
/* «Написать» — с воздухом вокруг, не впритык к краю */
#layout-sidebar > .header { padding: 14px 14px 10px !important; height: auto !important; min-height: 0; }
#layout-sidebar a.upk-compose { margin: 0; }
/* колонки: папки уже, список шире — темы писем не обрезаются; письмо справа */
@media (min-width: 1200px) {
	#layout-sidebar { flex: 0 0 236px !important; width: 236px !important; max-width: 236px !important; }
}
/* пустое поле справа с картинкой-заглушкой — тихий текст вместо неё */
#layout-content .watermark, #messagecontframe.watermark { background-image: none !important; }
/* строка письма: тема не «•»-ом, а сразу текстом */
#messagelist tbody tr td.subject > span.subject .msgicon.status { display: none; }
#messagelist tbody tr td.subject { grid-template-columns: minmax(140px, 28%) 1fr auto; }

/* ── итерация 4: правая область как у Яндекса — общая панель действий, под ней список ИЛИ письмо ── */
/* список вложен в #layout-content (templates/mail.html); показываем одно из двух по классу на body */
body.upk-mail #layout-content { flex: 1 1 auto !important; width: auto !important; max-width: none !important; display: flex !important; flex-direction: column; }
body.upk-mail #layout-content > #layout-list { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; width: auto !important; max-width: none !important; border: 0; }
body.upk-mail #layout-content > .iframe-wrapper { display: none; }
body.upk-mail.upk-reading #layout-content > #layout-list { display: none !important; }
body.upk-mail.upk-reading #layout-content > .iframe-wrapper { display: block; flex: 1 1 auto; }
/* панель действий — слева, «Ответить» первой; «Назад» и «Пред./След.» только у открытого письма */
body.upk-mail #layout-content > .header { justify-content: flex-start; gap: 4px; padding: 0 12px; height: 56px; }
body.upk-mail #layout-content > .header #mailtoolbar { flex: 0 1 auto; justify-content: flex-start; margin: 0; }
.upk-nav, .upk-nav-group { display: none; }
/* «Назад», «Пред./След.» — такие же, как кнопки панели («Ответить»…): значок сверху, подпись снизу (Андрей 09.10:
   «выбивается из стиля»; замер «Ответить»: значок Icons 17.5px, подпись 12.6px, цвет панели, высота 58px) */
body.upk-reading .upk-nav { display: block; height: 58px; min-width: 44.8px; padding: 6.3px; font-size: 14px; line-height: 21px; text-align: center; color: var(--upk-muted) !important; text-decoration: none !important; }
body.upk-reading .upk-nav::before { display: block; font-family: Icons; font-weight: 900; font-size: 17.5px; line-height: 26.25px; height: 24.5px; }
body.upk-reading .upk-nav .inner { font-size: 12.6px; line-height: 18.9px; font-weight: 400; }
body.upk-reading .upk-nav:hover { color: var(--upk-text) !important; }
body.upk-reading .upk-nav-group { display: inline-flex; margin-left: auto; gap: 2px; }
body.upk-reading .upk-back { margin-right: 8px; }
body.upk-reading .upk-back::before { content: "\f060"; }
body.upk-reading .upk-prev::before { content: "\f062"; }
body.upk-reading .upk-next::before { content: "\f063"; }
/* шапка списка — без верхней рамки, поиск и кнопки «Выбрать/Параметры/Обновить» одной строкой ниже панели */
body.upk-mail #messagelist-header { border-top: 1px solid var(--upk-line); }

/* имя ящика под «Написать» — целиком, а не «t…» */
#layout-sidebar .header .header-title.username { flex: none !important; width: auto !important; overflow: visible; white-space: nowrap; }

/* строка письма: кружок | отправитель | тема | флажок, скрепка | дата */
#messagelist tbody tr td.flags, #messagelist thead th.flags { display: none !important; }
#messagelist tbody tr td.subject { grid-template-columns: 32px minmax(140px, 22%) 1fr auto auto; column-gap: 14px; padding: 8px 16px 8px 12px; }
#messagelist tbody tr td.subject > .upk-ava { grid-column: 1; grid-row: 1; }
#messagelist tbody tr td.subject > span.fromto { grid-column: 2; }
#messagelist tbody tr td.subject > span.subject { grid-column: 3; }
#messagelist tbody tr td.subject > .upk-marks { grid-column: 4; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; color: var(--upk-muted); }
#messagelist tbody tr td.subject > span.date { grid-column: 5; min-width: 48px; text-align: right; }
.upk-ava { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--upk-ava); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
/* наведение на кружок — видно, что это галочка; отмеченное письмо — зелёный кружок с галочкой */
.upk-ava:hover .upk-ava-letter, tr.selected .upk-ava .upk-ava-letter { visibility: hidden; }
.upk-ava:hover { background: var(--upk-bg); box-shadow: inset 0 0 0 2px var(--upk-muted); }
tr.selected .upk-ava { background: var(--upk-fill); box-shadow: none; }
.upk-ava:hover::after, tr.selected .upk-ava::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.upk-ava:hover::after { color: var(--upk-muted); }
tr.selected .upk-ava::after { color: #fff; }
/* флажок — только у помеченных и при наведении на строку */
.upk-marks .flag span.unflagged { visibility: hidden; }
#messagelist tbody tr:hover .upk-marks .flag span.unflagged { visibility: visible; }
.upk-marks span.attachment, .upk-marks span.flag { position: static !important; width: auto; margin: 0; }

/* открытое письмо: текст обычным шрифтом, а не «пишущей машинкой»; тема крупно */
#messagebody div.pre, .message-part div.pre, .message-part pre { font-family: var(--upk-font) !important; font-size: 14.5px; line-height: 1.55; }
#message-header h2.subject { font-size: 22px; font-weight: 600; color: var(--upk-text); }

/* ── итерация 5: колонка папок по скрину Андрея (Яндекс), порядок панели действий, мелочи ── */
.upk-ico::before { font-family: Icons; font-weight: 900; font-style: normal; line-height: 1; }
#layout-sidebar > .header { display: block !important; position: relative; padding: 14px 14px 6px !important; }
.upk-side-title { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 2px 0 6px; }
.upk-side-title > span { font-size: 22px; font-weight: 700; color: var(--upk-text); }
a.upk-side-search, a.upk-side-fold { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--upk-text) !important; text-decoration: none !important; }
a.upk-side-search::before { content: "\f002"; font-size: 16px; }
a.upk-side-search:hover, a.upk-side-fold:hover { background: var(--upk-hover); }
.upk-side-actions { display: flex; gap: 8px; margin-top: 8px; }
.upk-side-actions a.upk-compose { flex: 1 1 auto; }
a.upk-compose::before { content: "\f303"; font-family: Icons; font-weight: 900; font-size: 14px; margin: 0; }
a.upk-refresh { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--upk-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 0; color: var(--upk-text) !important; text-decoration: none !important; }
a.upk-refresh::before { content: "\f021"; font-size: 16px; }
a.upk-refresh:hover { background: var(--upk-surface-2); }
#layout-sidebar .header .header-title.username { display: block; padding: 10px 6px 0 !important; font-size: 12.5px; }
#layout-sidebar .header .sidebar-menu { top: auto !important; bottom: 0; right: 8px; }
/* список папок: иконка, название, число — одна высота, своя группа «Мои папки» с отступом */
#folderlist-content ul.treelist li { position: relative; }
#folderlist-content ul.treelist li.mailbox > a { padding-left: 44px; margin: 1px 10px 1px 8px; border-radius: 10px; }
#folderlist-content ul.treelist li.mailbox > a::before { left: 14px; width: 20px; text-align: center; color: var(--upk-text); }
#folderlist-content ul.treelist li.mailbox.selected > a { background: var(--upk-selected); color: var(--upk-text); font-weight: 600; }
#folderlist-content ul.treelist li.mailbox.junk > a, #folderlist-content ul.treelist li.mailbox.drafts > a { color: var(--upk-muted); }
#folderlist-content .unreadcount { margin: 0 !important; top: 50% !important; right: 18px !important; transform: translateY(-50%); line-height: 20px !important; color: var(--upk-text) !important; font-weight: 400 !important; }
#folderlist-content ul.treelist li.upk-mine > a { padding-left: 52px; }
#folderlist-content ul.treelist li.upk-mine > a::before { content: none; }
li.upk-mine-head { display: flex; align-items: center; justify-content: space-between; height: 36px; margin: 1px 10px 1px 8px; padding: 0 6px 0 44px; font-size: 14px; color: var(--upk-text); position: relative; }
li.upk-mine-head::before { content: "\f07b"; font-family: Icons; font-weight: 400; position: absolute; left: 14px; width: 20px; text-align: center; }
.upk-folder-add, .upk-purge { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px; color: var(--upk-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.upk-folder-add::before { content: "\f067"; font-size: 13px; }
.upk-purge::before { content: "\f51a"; font-size: 13px; }
.upk-folder-add:hover, .upk-purge:hover { background: var(--upk-surface-2); color: var(--upk-text); }
#folderlist-content ul.treelist li.mailbox.trash > .upk-purge { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
#folderlist-content ul.treelist li.mailbox.trash > a { padding-right: 48px; }
/* быстрые фильтры — три плашки под папками */
.upk-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 10px 0 8px; }
.upk-q { height: 32px; border-radius: 9px; background: var(--upk-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--upk-text) !important; text-decoration: none !important; }
.upk-q::before { font-family: Icons; font-weight: 900; font-size: 13px; }
.upk-q-flag::before { content: "\f024"; }
.upk-q-unread::before { content: "\f111"; font-size: 8px; }
.upk-q-attach::before { content: "\f0c6"; }
.upk-q:hover { background: var(--upk-surface-2); }
.upk-q.active { background: var(--upk-fill); color: #fff !important; }

/* панель действий: «Назад» — «Ответить»… — справа «Пред./След.»; «Выбрать/Параметры» — только у списка */
body.upk-mail #layout-content > .header > .upk-back { order: 0; }
body.upk-mail #layout-content > .header > #toolbar-menu { order: 1; margin: 0 !important; }
body.upk-mail #layout-content > .header > .upk-nav-group { order: 2; }
body.upk-mail #layout-content > .header > .toolbar-menu-button { order: 3; }
body.upk-reading #toolbar-menu a.select, body.upk-reading #toolbar-menu a.options, body.upk-reading #toolbar-menu a.threads { display: none !important; }
/* шапка списка (одинокая «Обновить») не нужна: «Обновить» — рядом с «Написать» */
body.upk-mail #messagelist-header { display: none !important; }

/* галочка отдельно от кружка (Андрей 09.10, скрин Яндекса): квадрат | кружок | отправитель | тема | … | дата */
#messagelist tbody tr td.subject { grid-template-columns: 18px 32px minmax(140px, 22%) 1fr auto auto; }
#messagelist tbody tr td.subject > .upk-check { grid-column: 1; grid-row: 1; }
#messagelist tbody tr td.subject > .upk-ava { grid-column: 2; }
#messagelist tbody tr td.subject > span.fromto { grid-column: 3; }
#messagelist tbody tr td.subject > span.subject { grid-column: 4; }
#messagelist tbody tr td.subject > .upk-marks { grid-column: 5; }
#messagelist tbody tr td.subject > span.date { grid-column: 6; }
.upk-ava { cursor: default; }
.upk-ava:hover .upk-ava-letter, tr.selected .upk-ava .upk-ava-letter { visibility: visible; }
.upk-ava:hover, tr.selected .upk-ava { background: var(--upk-ava); box-shadow: none; }
.upk-ava:hover::after, tr.selected .upk-ava::after { content: none; }
.upk-check { position: relative; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--upk-check-line); background: var(--upk-bg); cursor: pointer; }
.upk-check:hover { box-shadow: inset 0 0 0 1.5px var(--upk-muted); }
#messagelist tr.upk-checked .upk-check { background: var(--upk-fill); box-shadow: none; }
#messagelist tr.upk-checked .upk-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }

/* итерация 5, правки по снимку: порядок «Написать | Обновить», иконки папок у левого края, без линий */
.upk-side-actions a.upk-compose { order: 1; }
.upk-side-actions a.upk-refresh { order: 2; }
#folderlist-content ul.treelist li { border: 0 !important; }
#folderlist-content ul.treelist li.mailbox > a::before { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); margin: 0 !important; float: none !important; line-height: 1; }
#folderlist-content ul.treelist li.upk-mine > a { padding-left: 44px; }
#layout-sidebar .header .sidebar-menu { position: absolute; bottom: 2px; right: 12px; }
/* меню при наведении: перед датой, без размера письма, фон строки */
/* Андрей 09.10: меню закрывало «скачать» у файлов → как у Яндекса, при наведении оно встаёт на место даты */
#messagelist-content .listing-hover-menu { right: 16px !important; left: auto !important; width: 108px; display: flex; justify-content: flex-end; background: var(--upk-hover); padding: 0; border-radius: 8px; box-shadow: none; border: 0; }
#messagelist-content .listing-hover-menu a.button { width: 32px; min-width: 32px; margin: 0; }
/* колонка даты постоянной ширины — меню наведения встаёт ровно на её место и не задевает файлы */
#messagelist tbody tr td.subject > span.date { min-width: 108px; }
#messagelist-content .listing-hover-menu .txt { display: none !important; }
#messagelist-content .listing-hover-menu a.upk-read::before { content: "\f111"; font-family: Icons; font-weight: 400; }
#messagelist-content .listing-hover-menu a.upk-unread::before { content: "\f111"; font-family: Icons; font-weight: 900; color: var(--upk-green-dark); }
.upk-marks .flag span.unflagged { display: none !important; }
/* Андрей 09.10: «корневые папки на одном уровне с созданными пользователем — визуально неправильно».
   Служебные и «Мои папки»: иконка у края (22px), название с 44px; свои папки — глубже, с 70px, под «Мои папки» */
#folderlist-content ul.treelist li.upk-mine > a { padding-left: 70px !important; font-size: 13.5px; }
#folderlist-content ul.treelist li.upk-mine > a::after { content: ""; position: absolute; left: 52px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--upk-dot); }
li.upk-mine-head { padding-left: 46px; } /* текст «Мои папки» — на одной линии с названиями служебных папок */

/* файлы в строке, как у Яндекса (Андрей 09.10): плашка «имя + тип» | число | скачать — перед датой */
#messagelist tbody tr td.subject { grid-template-columns: 18px 32px minmax(140px, 22%) 1fr auto auto auto; }
#messagelist tbody tr td.subject > .upk-files { grid-column: 6; grid-row: 1; }
#messagelist tbody tr td.subject > span.date { grid-column: 7; }
tr.upk-has-files .upk-marks span.attachment { display: none !important; } /* скрепка не нужна — есть плашка */
.upk-files { display: inline-flex; align-items: stretch; gap: 4px; height: 34px; margin: -3px 0; }
.upk-files a { text-decoration: none !important; }
a.upk-file { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 0 8px 0 10px; border-radius: 8px; background: var(--upk-surface); color: var(--upk-text) !important; font-size: 12.5px; }
a.upk-file:hover { background: var(--upk-surface-2); }
.upk-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.upk-file-kind { flex: none; padding: 1px 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 15px; color: #fff; background: var(--upk-text-2); }
.upk-kind-pdf { background: #c62828; }
.upk-kind-xls { background: #2e7d32; }
.upk-kind-doc { background: #1e5bb8; }
.upk-kind-img { background: #7b3fa0; }
.upk-kind-zip { background: #8a6d1c; }
.upk-file-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; border-radius: 8px; background: var(--upk-surface); font-size: 12.5px; font-weight: 600; color: var(--upk-text); }
a.upk-file-dl { display: inline-flex; align-items: center; justify-content: center; width: 34px; border-radius: 8px; background: var(--upk-surface); color: var(--upk-text) !important; }
a.upk-file-dl::before { content: "\f019"; font-family: Icons; font-weight: 900; font-size: 13px; }
a.upk-file-dl:hover { background: var(--upk-surface-2); }
/* начало текста письма — серым после темы, в той же строке */
#messagelist tbody tr td.subject > span.subject .upk-snippet { margin-left: 10px; font-weight: 400; color: var(--upk-text-2); }

/* ── окно «Написать» карточкой поверх почты (Андрей 09.10, скрины Яндекса) ── */
#upk-card-shade { position: fixed; inset: 0; background: var(--upk-shade); z-index: 1000; }
.upk-card { position: fixed; z-index: 1001; left: 50%; top: 4vh; transform: translateX(-50%); width: min(1080px, 94vw); height: 90vh;
	background: var(--upk-bg); border-radius: 16px; box-shadow: 0 18px 60px var(--upk-shade); display: flex; flex-direction: column; overflow: hidden; }
.upk-card.upk-card-full { top: 12px; width: calc(100vw - 24px); height: calc(100vh - 24px); }
.upk-card.upk-card-mini { top: auto; bottom: 0; left: auto; right: 24px; transform: none; width: 360px; height: 46px; border-radius: 12px 12px 0 0; }
.upk-card-head { flex: none; display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 8px 0 20px; cursor: default; }
.upk-card-mini .upk-card-head { cursor: pointer; background: var(--upk-input); }
.upk-card-title { flex: 1 1 auto; font-size: 15px; font-weight: 600; color: var(--upk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upk-card-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--upk-muted); cursor: pointer; font-family: Icons; font-weight: 900; font-size: 13px; }
.upk-card-btn:hover { background: var(--upk-hover); color: var(--upk-text); }
.upk-card-min::before { content: "\f068"; }
.upk-card-max::before { content: "\f065"; }
.upk-card-full .upk-card-max::before { content: "\f066"; }
.upk-card-close::before { content: "\f00d"; font-size: 16px; }
.upk-card iframe { flex: 1 1 auto; width: 100%; border: 0; }
.upk-card-mini iframe { display: none; }

/* ── само окно письма: строки «Кому», «Тема» без рамок, как у Яндекса ── */
body.action-compose #layout-sidebar { display: none !important; }
body.action-compose .upk-compose-page { flex: 1 1 auto !important; width: auto !important; max-width: none !important; display: flex !important; flex-direction: column; }
body.action-compose #compose-content { flex: 1 1 auto; overflow: auto; padding: 0 24px 12px !important; }
body.action-compose #compose-content > form, body.action-compose #compose-content .formcontent { padding: 0 !important; }
body.upk-in-card #compose-content { padding-top: 0 !important; }
#compose-headers .form-group.row { margin: 0; border-bottom: 1px solid var(--upk-line); min-height: 46px; align-items: center; flex-wrap: nowrap; }
#compose-headers .form-group.row > .col-2 { flex: 0 0 96px; max-width: 96px; padding: 0; color: var(--upk-muted); font-size: 14px; }
#compose-headers .form-group.row > .col-10 { flex: 1 1 auto; max-width: none; padding: 0; }
#compose-headers .form-control, #compose-headers .recipient-input, #compose-headers .custom-select { border: 0 !important; box-shadow: none !important; background: transparent; padding-left: 0; font-size: 14.5px; }
#compose-headers .input-group { align-items: center; flex-wrap: nowrap; }
#compose-headers .input-group-append .input-group-text { border: 0; background: transparent; }
a.upk-pick { color: var(--upk-muted) !important; text-decoration: none !important; cursor: pointer; }
a.upk-pick:hover { color: var(--upk-green-dark) !important; text-decoration: underline !important; }
a.upk-extra-toggle { flex: none; margin-left: 12px; font-size: 13.5px; color: var(--upk-muted) !important; white-space: nowrap; text-decoration: none !important; }
a.upk-extra-toggle::after { content: " ▾"; font-size: 11px; }
a.upk-extra-toggle:hover { color: var(--upk-text) !important; }
#compose-headers .upk-extra-header { display: none !important; }
#compose_subject input { font-size: 15px; font-weight: 500; }
#composebodycontainer { margin-top: 10px; }
#composebodycontainer .tox-tinymce { border: 0 !important; border-radius: 0 !important; }
#composebodycontainer .tox .tox-editor-header { border-bottom: 1px solid var(--upk-line) !important; box-shadow: none !important; }
#composebodycontainer textarea#composebody { border: 0; box-shadow: none; min-height: 320px; font-size: 14.5px; }
/* файлы под текстом: пусто — ничего не видно */
.upk-attachments { margin-top: 12px; border: 0 !important; background: transparent !important; min-height: 0 !important; padding: 0 !important; }
.upk-attachments .attachmentslist:empty { display: none; }
/* нижняя панель: крупная «Отправить», рядом тихие кнопки */
.upk-compose-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 12px 24px 16px; border-top: 1px solid var(--upk-line); background: var(--upk-bg); }
.upk-compose-bar .upk-send { height: 44px; padding: 0 26px; border-radius: 12px; border: 0; background: var(--upk-green) !important; color: #fff !important; font-size: 15px; font-weight: 600; margin-right: 10px; }
.upk-compose-bar .upk-send:hover { background: var(--upk-green-hover) !important; }
.upk-compose-bar .upk-send::before { display: none; }
.upk-compose-bar a.upk-bar-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--upk-text) !important; font-size: 13.5px; text-decoration: none !important; }
.upk-compose-bar a.upk-bar-btn:hover { background: var(--upk-hover); }
.upk-compose-bar a.upk-bar-btn.disabled { color: var(--upk-disabled) !important; pointer-events: none; }
.upk-compose-bar a.upk-bar-btn::before { font-family: Icons; font-weight: 900; font-size: 14px; }
.upk-compose-bar a.attach::before { content: "\f0c6"; }
.upk-compose-bar a.save::before { content: "\f0c7"; }
.upk-compose-bar a.responses::before { content: "\f075"; }
.upk-compose-bar a.signature::before { content: "\f5b7"; }
.upk-compose-bar a.options::before { content: "\f1de"; }
#upk-compose-options { padding: 14px 16px; min-width: 340px; }
/* в карточке окно письма открыто без признака «встроено» — меню задач Roundcube прячем сами */
body.upk-in-card #layout-menu { display: none !important; }
/* правки по снимку карточки: значки кнопок шапки (общий шрифт страницы перебивал шрифт значков) */
.upk-card-btn::before { font-family: Icons !important; font-weight: 900; }
/* «перетащите файл» — только пока файл тащат над окном, а не постоянной картинкой посреди письма */
.upk-attachments, .upk-attachments::before, .upk-attachments::after { background-image: none !important; }
.upk-attachments:not(.active)::before, .upk-attachments:not(.active)::after { content: none !important; display: none !important; }

/* ── получатели: подсказка и список «Себе / сотрудники», как у Яндекса ── */
#rcmKSearchpane, .upk-people { background: var(--upk-bg); border: 0 !important; border-radius: 14px; box-shadow: 0 10px 34px var(--upk-shadow); padding: 6px 0; min-width: 380px !important; max-width: 460px !important; }
#rcmKSearchpane ul li, .upk-people-item { display: flex !important; align-items: center; gap: 12px; padding: 8px 16px !important; cursor: pointer; line-height: 1.25; }
#rcmKSearchpane ul li.selected, #rcmKSearchpane ul li:hover, .upk-people-item.selected, .upk-people-item:hover { background: var(--upk-hover) !important; color: var(--upk-text) !important; }
#rcmKSearchpane ul li i.icon { display: none; }
.upk-ac-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--upk-ava); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.upk-ac-text { display: flex; flex-direction: column; min-width: 0; }
.upk-ac-name { font-size: 14.5px; color: var(--upk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upk-ac-mail { font-size: 13px; color: var(--upk-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upk-ac-name b, .upk-ac-mail b { font-weight: 700; color: var(--upk-text); }
.upk-people { position: absolute; z-index: 5000; }
.upk-people ul { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.upk-people-head { padding: 10px 16px 4px; color: var(--upk-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: default; }
.upk-people-group { border-top: 1px solid var(--upk-line); margin-top: 4px; }
.upk-ava-group { background: #fff url(mark.png) center / 26px no-repeat !important; box-shadow: inset 0 0 0 1px var(--upk-line); }
.upk-people-chev { margin-left: auto; color: var(--upk-muted); }
.upk-people-chev::before { content: "\f107"; font-family: Icons; font-weight: 900; display: inline-block; transition: transform .15s; }
.upk-people-group.open .upk-people-chev::before { transform: rotate(180deg); }
.upk-people-sub { padding-left: 28px !important; }
a.upk-people-all { display: flex; align-items: center; gap: 10px; margin: 6px 12px 2px; padding: 10px 6px 6px; border-top: 1px solid var(--upk-line); color: var(--upk-text) !important; font-size: 14px; text-decoration: none !important; }
a.upk-people-all::before { content: "\f002"; font-family: Icons; font-weight: 900; color: var(--upk-muted); }

/* ── окно «Добавить получателей», как у Яндекса ── */
.ui-dialog:has(#recipient-dialog) { border-radius: 22px !important; border: 0 !important; box-shadow: 0 18px 60px var(--upk-shadow-strong) !important; overflow: hidden; width: min(880px, 92vw) !important; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-titlebar { padding: 22px 26px 6px !important; border: 0 !important; background: var(--upk-bg) !important; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-title { font-size: 21px; font-weight: 700; color: var(--upk-text); }
#recipient-dialog .listbox { display: flex; flex-direction: column; height: 100%; padding: 0 26px; }
#recipient-dialog .searchbar { order: 2; margin: 6px 0 0; border: 1px solid var(--upk-field-line) !important; border-radius: 10px; background: var(--upk-bg) !important; }
#recipient-dialog .scroller { order: 4; border: 0; }
/* книги — переключателями сверху */
#recipient-dialog #directorylist { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 8px; border: 0; }
#recipient-dialog #directorylist li { border: 0 !important; }
#recipient-dialog #directorylist li a { height: 32px; line-height: 32px; padding: 0 12px !important; border-radius: 9px; background: var(--upk-surface); color: var(--upk-text) !important; font-size: 13.5px; }
#recipient-dialog #directorylist li a::before { display: none; }
#recipient-dialog #directorylist li.selected a { background: var(--upk-green-soft); color: var(--upk-green-dark) !important; font-weight: 600; }
label.upk-all { order: 3; display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 0 12px; font-size: 13.5px; color: var(--upk-muted); cursor: pointer; user-select: none; }
#recipient-dialog #contacts-table td.selection { display: none !important; }
#recipient-dialog #contacts-table tbody tr td { border: 0 !important; background: transparent !important; }
#recipient-dialog #contacts-table tbody tr:hover td { background: var(--upk-hover) !important; }
td.upk-person { display: grid !important; grid-template-columns: 18px 36px minmax(160px, 40%) 1fr; align-items: center; column-gap: 14px; padding: 7px 12px !important; }
td.upk-person a.upk-person-name { padding: 0 !important; color: var(--upk-text) !important; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.upk-person a.upk-person-name::before { display: none !important; }
td.upk-person .upk-person-mail { color: var(--upk-text-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.upk-person .upk-ac-ava { width: 34px; height: 34px; }
#recipient-dialog tr.selected .upk-check, label.upk-all.all .upk-check { background: var(--upk-fill); box-shadow: none; }
#recipient-dialog tr.selected .upk-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonpane { border: 0 !important; padding: 10px 26px 22px !important; background: var(--upk-bg) !important; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset { display: flex; flex-direction: row-reverse; gap: 10px; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset .btn { height: 42px; padding: 0 22px; border-radius: 11px; font-size: 14.5px; border: 0; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset .btn::before { display: none; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset .upk-add { background: var(--upk-green) !important; color: #fff !important; font-weight: 600; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset .btn:not(.upk-add) { background: var(--upk-surface) !important; color: var(--upk-text) !important; }
/* Elastic выставляет ширину содержимого под своё окно 528 px — растягиваем на наше */
.ui-dialog:has(#recipient-dialog) .ui-dialog-content, #recipient-dialog, #recipient-dialog .listbox, #recipient-dialog .scroller, #recipient-dialog #contacts-table { width: 100% !important; max-width: none !important; }
.ui-dialog:has(#recipient-dialog) { display: flex !important; flex-direction: column; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-content { flex: 1 1 auto; height: 520px !important; }
/* правки по снимку окна «Добавить получателей» */
#recipient-dialog td.upk-person::before, #recipient-dialog td.upk-person::after { display: none !important; content: none !important; }
#recipient-dialog .pagenav, .ui-dialog:has(#recipient-dialog) .pagenav { display: none !important; }
.ui-dialog:has(#recipient-dialog) { height: auto !important; }
#recipient-dialog .upk-books { order: 1; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-content { height: 470px !important; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonpane { flex: none; display: flex !important; justify-content: flex-end; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset { float: none !important; }
td.upk-person a.upk-person-name, td.upk-person a.upk-person-name:hover { text-decoration: none !important; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonpane { height: auto !important; min-height: 0 !important; }
.ui-dialog:has(#recipient-dialog) .ui-dialog-buttonset .btn { margin: 0 !important; }
/* папка письма при поиске по всем папкам */
.upk-folder-chip { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: var(--upk-surface); color: var(--upk-muted); font-size: 12px; font-weight: 400; vertical-align: 1px; }

/* ── метки (Андрей 09.10, скрин Яндекса «Друзья, Работа, Позже») ── */
.upk-label-green  { --lb: #dcf2d3; --lt: #2b5a17; }
.upk-label-red    { --lb: #fbdcdc; --lt: #8a1f1f; }
.upk-label-blue   { --lb: #dbe7fb; --lt: #1d4a8f; }
.upk-label-yellow { --lb: #fbf0c4; --lt: #6b5200; }
.upk-label-purple { --lb: #ece0f8; --lt: #5b2a87; }
.upk-label-orange { --lb: #fde2cc; --lt: #8a3c06; }
.upk-label-teal   { --lb: #d4f1ee; --lt: #155c55; }
.upk-label-gray   { --lb: #e8eaee; --lt: #3d4450; }
.upk-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-right: 6px; border-radius: 6px; background: var(--lb); color: var(--lt) !important; font-size: 12px; font-weight: 500; vertical-align: 1px; text-decoration: none !important; white-space: nowrap; }
.upk-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 10px 0 8px; }
.upk-labels a.upk-label { height: 30px; padding: 0 12px; margin: 0; border-radius: 15px; font-size: 13.5px; position: relative; }
.upk-labels a.upk-label.active { box-shadow: inset 0 0 0 2px var(--lt); }
.upk-label-edit { display: none; margin-left: 6px; font-size: 11px; opacity: .7; }
.upk-label-edit::before { content: "\f303"; font-family: Icons; font-weight: 900; }
.upk-labels a.upk-label:hover .upk-label-edit { display: inline; }
a.upk-label-add { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--upk-muted) !important; text-decoration: none !important; }
a.upk-label-add::before { content: "\f067"; font-family: Icons; font-weight: 900; font-size: 13px; }
a.upk-label-add:hover { background: var(--upk-hover); color: var(--upk-text) !important; }
.upk-label-form { padding: 6px 2px; min-width: 340px; }
.upk-label-colors { display: flex; gap: 8px; margin-top: 14px; }
.upk-color { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--lb); box-shadow: inset 0 0 0 1px var(--upk-shadow-soft); cursor: pointer; }
.upk-color.active { box-shadow: inset 0 0 0 3px var(--lt); }
a.upk-label-delete { display: inline-block; margin-top: 16px; color: var(--upk-danger) !important; font-size: 13.5px; }
/* меню кнопки «Метка» */
.upk-label-menu { position: fixed; z-index: 3000; min-width: 230px; max-width: 320px; background: var(--upk-bg); border-radius: 12px; box-shadow: 0 10px 34px var(--upk-shadow); padding: 6px 0; }
.upk-label-menu ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.upk-label-menu li { display: flex; align-items: center; gap: 12px; padding: 7px 14px; cursor: pointer; }
.upk-label-menu li:hover { background: var(--upk-hover); }
.upk-label-menu li.on .upk-check { background: var(--upk-fill); box-shadow: none; }
.upk-label-menu li.on .upk-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.upk-label-menu li.some .upk-check::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; background: var(--upk-muted); }
a.upk-label-menu-add { display: block; margin: 4px 10px 2px; padding: 8px 6px 4px; border-top: 1px solid var(--upk-line); color: var(--upk-text) !important; font-size: 13.5px; text-decoration: none !important; }
a.upk-label-menu-add::before { content: "\f067"; font-family: Icons; font-weight: 900; font-size: 11px; margin-right: 8px; color: var(--upk-muted); }
#toolbar-menu a.upk-labelbtn::before { content: "\f02b"; }

/* ── окно подписи ── */
.upk-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; min-width: 760px; padding: 6px 4px; }
.upk-sign-field { display: block; margin-bottom: 12px; }
.upk-sign-field > span { display: block; font-size: 13px; color: var(--upk-muted); margin-bottom: 4px; }
.upk-sign-caption { font-size: 13px; color: var(--upk-muted); margin: 6px 0 8px; }
.upk-sign-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.upk-sign-tpl { height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--upk-surface); color: var(--upk-text); font-size: 13.5px; cursor: pointer; }
.upk-sign-tpl.active { background: var(--upk-green-soft); color: var(--upk-green-dark); box-shadow: inset 0 0 0 2px var(--upk-green); font-weight: 600; }
.upk-sign-preview { min-height: 150px; padding: 16px 18px; border: 1px solid var(--upk-line); border-radius: 12px; background: #fff; font-family: Arial, sans-serif; font-size: 14px; color: #1f2329; } /* как увидит получатель — всегда на белом */
.upk-sign-preview p { margin: 0; }
.upk-sign-note { margin-top: 8px; font-size: 12.5px; color: var(--upk-muted); }
.ui-dialog .upk-dialog-main { background: var(--upk-green) !important; border-color: var(--upk-green) !important; color: #fff !important; }

/* ── все окна (подпись, метки, подтверждения) — в одном стиле с «Добавить получателей» ── */
.ui-dialog { border-radius: 18px !important; border: 0 !important; box-shadow: 0 18px 60px var(--upk-shadow-strong) !important; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: 20px 24px 6px !important; border: 0 !important; background: var(--upk-bg) !important; }
.ui-dialog .ui-dialog-title { font-size: 19px; font-weight: 700; color: var(--upk-text); }
.ui-dialog .ui-dialog-content { padding: 8px 24px !important; }
.ui-dialog .ui-dialog-buttonpane { border: 0 !important; padding: 10px 24px 20px !important; background: var(--upk-bg) !important; height: auto !important; }
.ui-dialog .ui-dialog-buttonset .btn { height: 40px; padding: 0 20px; border-radius: 10px; font-size: 14px; border: 0 !important; margin: 0 0 0 8px !important; }
.ui-dialog .ui-dialog-buttonset .btn::before { display: none; }
.ui-dialog .ui-dialog-buttonset .btn.mainaction { background: var(--upk-green) !important; color: #fff !important; font-weight: 600; }
.ui-dialog .ui-dialog-buttonset .btn.mainaction.delete { background: #c0392b !important; }
.ui-dialog .ui-dialog-buttonset .btn:not(.mainaction):not(.upk-add) { background: var(--upk-surface) !important; color: var(--upk-text) !important; }
button.upk-sign-tpl.active, button.upk-sign-tpl.active:focus { background: var(--upk-green-soft) !important; color: var(--upk-green-dark) !important; box-shadow: inset 0 0 0 2px var(--upk-green) !important; }
button.upk-sign-tpl:not(.active), button.upk-sign-tpl:not(.active):focus { background: var(--upk-surface) !important; color: var(--upk-text) !important; box-shadow: none !important; }
/* у окна получателей свои поля (26 px в .listbox) — общий отступ окна ему не нужен */
.ui-dialog:has(#recipient-dialog) .ui-dialog-content { padding: 0 !important; }

/* ── несколько ящиков: переключатель под «Написать», меню, «Добавить ящик» ── */
#layout-sidebar .header .header-title.upk-acc-current { display: flex !important; align-items: center; gap: 6px; margin: 8px 0 0; padding: 6px 8px !important; border-radius: 10px; cursor: pointer; color: var(--upk-text); }
#layout-sidebar .header .header-title.upk-acc-current:hover { background: var(--upk-hover); }
.upk-acc-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.upk-acc-caret::before { content: "\f078"; font-family: Icons; font-weight: 900; font-size: 9px; color: var(--upk-muted); }
.upk-acc-badge { flex: none; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--upk-fill); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.upk-acc-menu { position: fixed; z-index: 3000; width: 300px; background: var(--upk-bg); border-radius: 14px; box-shadow: 0 10px 34px var(--upk-shadow); padding: 6px 0; }
.upk-acc-menu ul { list-style: none; margin: 0; padding: 0; }
.upk-acc-menu li { display: flex; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; }
.upk-acc-menu li:hover { background: var(--upk-hover); }
.upk-acc-menu li.current { cursor: default; background: var(--upk-green-soft); }
.upk-acc-menu li .upk-ac-text { flex: 1 1 auto; }
.upk-acc-remove { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--upk-muted); cursor: pointer; visibility: hidden; }
.upk-acc-remove::before { content: "\f00d"; font-family: Icons !important; font-weight: 900; font-size: 12px; }
.upk-acc-menu li:hover .upk-acc-remove { visibility: visible; }
.upk-acc-remove:hover { background: var(--upk-surface-2); color: var(--upk-danger); }
a.upk-acc-menu-add, a.upk-acc-menu-bell { display: block; margin: 4px 10px 0; padding: 9px 6px 5px; border-top: 1px solid var(--upk-line); color: var(--upk-text) !important; font-size: 13.5px; text-decoration: none !important; }
a.upk-acc-menu-add::before { content: "\f067"; font-family: Icons; font-weight: 900; font-size: 11px; margin-right: 8px; color: var(--upk-muted); }
a.upk-acc-menu-bell::before { content: "\f0f3"; font-family: Icons; font-weight: 900; font-size: 12px; margin-right: 8px; color: var(--upk-muted); }
a.upk-acc-add-side { display: flex; align-items: center; gap: 10px; margin: 14px 10px 0 8px; padding: 8px 14px; border-radius: 10px; color: var(--upk-text) !important; font-size: 14px; text-decoration: none !important; }
a.upk-acc-add-side::before { content: "@"; font-weight: 700; color: var(--upk-muted); width: 20px; text-align: center; }
a.upk-acc-add-side:hover { background: var(--upk-hover); }
.upk-acc-form { min-width: 420px; }
.upk-acc-form .form-control { margin-top: 10px; }
.upk-acc-hint { margin: 0 0 4px; color: var(--upk-text); font-size: 14px; }
.upk-acc-note { margin: 10px 0 0; color: var(--upk-muted); font-size: 12.5px; }
/* Elastic «центрирует» заголовки, ставя им боковые отступы (тут — 396 px справа), и адрес сжимался в ноль */
#layout-sidebar .header .header-title.upk-acc-current { margin: 8px 0 0 !important; padding-right: 8px !important; }
.upk-acc-current .upk-acc-email { flex: 0 1 auto; min-width: 0; }

/* ── страница входа: логотип УпакЭко, белая карточка, зелёная кнопка ── */
body.task-login { background: var(--upk-page) !important; }
body.task-login #layout-content { background: transparent !important; }
body.task-login #login-form { background: var(--upk-bg); border-radius: 18px; box-shadow: 0 10px 40px var(--upk-shadow-soft); padding: 34px 38px 30px !important; max-width: 400px; }
body.task-login #logo { max-width: 260px !important; max-height: none !important; height: auto; margin: 0 auto 26px; display: block; }
body.task-login #login-form .input-group-text { background: var(--upk-input); border-color: var(--upk-field-line); color: var(--upk-muted); }
body.task-login #login-form .form-control { border-color: var(--upk-field-line); font-size: 15px; height: 44px; }
body.task-login #login-form .form-control:focus { border-color: var(--upk-green); box-shadow: 0 0 0 3px rgba(111, 158, 42, .18); }
body.task-login #rcmloginsubmit { background: var(--upk-green) !important; border-color: var(--upk-green) !important; color: #fff !important; height: 46px; border-radius: 12px; font-size: 16px; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; }
body.task-login #rcmloginsubmit:hover { background: var(--upk-green-hover) !important; }
body.task-login #login-footer, body.task-login .support-link { color: var(--upk-muted); }

/* метки в тёмной теме: тёмный фон, светлый текст */
html.dark-mode .upk-label-green  { --lb: #24402a; --lt: #a8e0a0; }
html.dark-mode .upk-label-red    { --lb: #4a2426; --lt: #ffb4b0; }
html.dark-mode .upk-label-blue   { --lb: #1f3350; --lt: #a9c8ff; }
html.dark-mode .upk-label-yellow { --lb: #4a3f16; --lt: #f3dc8a; }
html.dark-mode .upk-label-purple { --lb: #3a2850; --lt: #d6b8f5; }
html.dark-mode .upk-label-orange { --lb: #4d2f17; --lt: #ffc597; }
html.dark-mode .upk-label-teal   { --lb: #18413d; --lt: #9fe3da; }
html.dark-mode .upk-label-gray   { --lb: #343e42; --lt: #d0d7da; }

/* Андрей 09.10 (скрин): у папок внутри «Входящих» значок «Входящих» сползал в середину их блока — значок и число
   ставились по высоте всего li (с вложенными). Теперь — по строке самой папки (a); вложенные — с отступом. */
#folderlist-content ul.treelist li.mailbox > a { position: relative; }
#folderlist-content ul.treelist li.mailbox > a::before { left: 14px !important; }
#folderlist-content ul.treelist li.mailbox ul { margin: 0; padding: 0; }
#folderlist-content ul.treelist li.mailbox li.mailbox > a { padding-left: 68px; }
#folderlist-content ul.treelist li.mailbox li.mailbox > a::before { left: 38px !important; }
#folderlist-content ul.treelist li.mailbox div.treetoggle { top: 0; left: 0; height: 36px; width: 18px; line-height: 36px; text-align: center; color: var(--upk-muted); z-index: 1; }
#folderlist-content .unreadcount { right: 10px !important; }
/* длинное имя папки — многоточием, полное — в подсказке (title Roundcube ставит сам) */
#folderlist-content ul.treelist li.mailbox > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#folderlist-content ul.treelist li.mailbox > a { padding-right: 46px; } /* место под число непрочитанных */
#folderlist-content ul.treelist li.mailbox > a { display: block; box-sizing: border-box; max-width: calc(100% - 18px); }
#folderlist-content { overflow-x: hidden; }

/* окно «Написать»: поле письма — на всю высоту карточки (было по числу строк, ниже — пустота) */
body.action-compose #compose-content { display: flex; flex-direction: column; }
body.action-compose #compose-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body.action-compose #composebodycontainer { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 260px; }
body.action-compose #composebodycontainer .tox-tinymce { flex: 1 1 auto; height: auto !important; min-height: 260px; }
body.action-compose #composebodycontainer textarea#composebody { flex: 1 1 auto; }

/* Андрей 09.10: «и письма тоже читаются на белом фоне». HTML-часть письма Elastic держит белой и в тёмной теме —
   инвертируем её целиком, как редактор (#d1d9dc → #21292c), картинки — обратно, чтобы фото и логотипы не портились */
html.dark-mode .message-htmlpart { background: #d1d9dc !important; filter: invert(1) hue-rotate(180deg); border-radius: 6px; }
html.dark-mode .message-htmlpart img, html.dark-mode .message-htmlpart video, html.dark-mode .message-htmlpart picture,
html.dark-mode .message-htmlpart [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }

/* ── меню по правой кнопке на письме (Андрей 09.10, как у Яндекса) ── */
.upk-ctx { position: fixed; z-index: 4000; min-width: 230px; background: var(--upk-bg); border-radius: 14px; box-shadow: 0 10px 34px var(--upk-shadow); padding: 6px 0; font-size: 14px; color: var(--upk-text); }
.upk-ctx ul { list-style: none; margin: 0; padding: 0; }
.upk-ctx-item { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 16px 0 14px; cursor: pointer; white-space: nowrap; }
.upk-ctx-item:hover { background: var(--upk-hover); }
.upk-ctx-item::before { font-family: Icons; font-weight: 900; font-size: 13px; width: 18px; text-align: center; color: var(--upk-muted); }
.upk-ctx-has-sub::after { content: "\f054"; font-family: Icons; font-weight: 900; font-size: 10px; margin-left: auto; padding-left: 20px; color: var(--upk-muted); }
.upk-ctx-sub { display: none; position: absolute; left: 100%; top: -6px; min-width: 210px; max-height: 360px; overflow-y: auto; background: var(--upk-bg); border-radius: 12px; box-shadow: 0 10px 34px var(--upk-shadow); padding: 6px 0 !important; }
.upk-ctx-left .upk-ctx-sub { left: auto; right: 100%; }
.upk-ctx-has-sub:hover > .upk-ctx-sub { display: block; }
.upk-ctx .i-tab::before { content: "\f35d"; }
.upk-ctx .i-reply::before { content: "\f3e5"; }
.upk-ctx .i-replyall::before { content: "\f122"; }
.upk-ctx .i-forward::before { content: "\f064"; }
.upk-ctx .i-delete::before { content: "\f2ed"; }
.upk-ctx .i-archive::before { content: "\f187"; }
.upk-ctx .i-read::before { content: "\f2b6"; }
.upk-ctx .i-unread::before { content: "\f0e0"; }
.upk-ctx .i-flag::before { content: "\f024"; }
.upk-ctx .i-move::before, .upk-ctx .i-folder::before { content: "\f07b"; font-weight: 400; }
.upk-ctx .i-label::before { content: "\f02b"; }
.upk-ctx .i-spam::before { content: "\f05e"; color: var(--upk-danger); }
.upk-ctx-sub .upk-ctx-item.on .upk-check { background: var(--upk-fill); box-shadow: none; }
.upk-ctx-sub .upk-ctx-item.on .upk-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
/* архив — служебная папка, со своим значком */
#folderlist-content ul.treelist li.mailbox.upk-archive > a::before { content: "\f187"; font-family: Icons; font-weight: 900; }
/* подписи колонки задач: Elastic режет в одну строку («Темный ре…», «О програм…» — Андрей 09.10: «текст не входит») →
   перенос на вторую строку, высота по содержимому */
#layout-menu #taskmenu a { height: auto; min-height: 58px; }
#layout-menu #taskmenu a .inner { display: block; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; padding: 0 4px; }

/* ── колонка папок: свернуть до значков и тянуть край мышью (Андрей 09.10: «эту часть можно сжимать или делать
   компактнее?» → «свернуть до значков, тянуть мышью»). Ширина — --upk-side-w на <html>, состояние — html.upk-fold ── */
@media (min-width: 1200px) {
	#layout-sidebar { flex: 0 0 var(--upk-side-w, 236px) !important; width: var(--upk-side-w, 236px) !important; max-width: none !important; }
	html.upk-fold #layout-sidebar { flex: 0 0 68px !important; width: 68px !important; }
}
#layout-sidebar { position: relative; min-width: 0 !important; } /* у Elastic min-width 220px — мешал и узкой, и свёрнутой */
.upk-side-tools { display: flex; align-items: center; gap: 2px; }
a.upk-side-fold::before { content: "\f100"; font-size: 16px; }
html.upk-fold a.upk-side-fold::before { content: "\f101"; }
.upk-side-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 20; }
.upk-side-resize:hover, html.upk-resizing .upk-side-resize { background: var(--upk-green); opacity: .35; }
html.upk-resizing, html.upk-resizing * { cursor: col-resize !important; user-select: none !important; }
html.upk-resizing iframe { pointer-events: none; }
/* свёрнуто: остаются кнопка «развернуть», «Написать» значком и значки папок с числом непрочитанных */
html.upk-fold .upk-side-resize,
html.upk-fold .upk-side-title > span, html.upk-fold .upk-side-search, html.upk-fold .upk-side-actions a.upk-refresh,
html.upk-fold #layout-sidebar .header .header-title, html.upk-fold #layout-sidebar .header .sidebar-menu,
html.upk-fold #folderlist-content > :not(#mailboxlist),
html.upk-fold #mailboxlist li.upk-mine, html.upk-fold #mailboxlist li.upk-mine-head,
html.upk-fold #mailboxlist li.mailbox ul, html.upk-fold #mailboxlist div.treetoggle, html.upk-fold #mailboxlist .upk-purge { display: none !important; }
html.upk-fold #layout-sidebar > .header { padding: 14px 12px 10px !important; }
html.upk-fold .upk-side-title { justify-content: center; padding: 0; }
html.upk-fold .upk-side-actions { justify-content: center; }
html.upk-fold .upk-side-actions a.upk-compose { flex: 0 0 44px; width: 44px; padding: 0; font-size: 0; gap: 0; }
html.upk-fold .upk-side-actions a.upk-compose::before { font-size: 16px; }
html.upk-fold #folderlist-content ul.treelist li.mailbox > a { width: 44px; max-width: none; height: 40px; margin: 2px auto; padding: 0 !important; font-size: 0; }
html.upk-fold #folderlist-content ul.treelist li.mailbox > a::before { left: 50% !important; transform: translate(-50%, -50%); font-size: 17px; }
html.upk-fold #folderlist-content .unreadcount { top: 3px !important; right: 1px !important; transform: none; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--upk-green) !important; color: #fff !important; font-size: 10px; font-weight: 600 !important; line-height: 16px !important; text-align: center; }