/* AYU Mail 0.9-dev.29 contract layer. Inherits markup and commands from Elastic. */
:root {
  --ayu-brand: #fe624c;
  --ayu-action: #0877ff;
  --ayu-action-hover: #0069e8;
  --ayu-action-active: #005bc9;
  --ayu-focus: #0877ff;
  --ayu-ink: #25272a;
  --ayu-muted: #777c85;
  --ayu-muted-2: #a7abb3;
  --ayu-line: #dfe2e7;
  --ayu-line-soft: #eceef1;
  --ayu-shell: #f2f3f5;
  --ayu-surface: #fff;
  --ayu-surface-hover: #f5f6f8;
  --ayu-surface-active: #e8eaee;
  --ayu-positive: #237a45;
  --ayu-positive-bg: #eaf7ef;
  --ayu-warning: #8a5a00;
  --ayu-warning-bg: #fff5d8;
  --ayu-info: #075fca;
  --ayu-info-bg: #eaf3ff;
  --ayu-negative: #e74c3c;
  --ayu-negative-bg: #fff0ee;
  --ayu-header-h: 62px;
  --ayu-sidebar-w: 232px;
  --ayu-rail-w: 52px;
  --ayu-toolbar-h: 44px;
  /* Nominal Mail.ru density, measured outside the 0.8 settings preview. */
  --ayu-row-h: 48px;
  --ayu-split-row-h: 100px;
  --ayu-radius-control: 9px;
  --ayu-radius-panel: 18px;
  --ayu-shadow: 0 12px 36px rgba(23, 31, 50, .12);
}

html,
body,
button,
input,
optgroup,
select,
textarea,
.popover,
.ui-widget {
  color: var(--ayu-ink);
  font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif !important;
}

html,
body {
  background: var(--ayu-shell) !important;
}

body {
  accent-color: var(--ayu-action);
}

a { color: var(--ayu-action); }
a:hover { color: var(--ayu-action-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ayu-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

button,
.button,
.btn,
a.button {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.btn-primary,
button.mainaction,
input.button.mainaction,
#rcmloginsubmit {
  color: #fff !important;
  background: var(--ayu-action) !important;
  border-color: var(--ayu-action) !important;
}

.btn-primary:hover,
button.mainaction:hover,
input.button.mainaction:hover,
#rcmloginsubmit:hover {
  background: var(--ayu-action-hover) !important;
  border-color: var(--ayu-action-hover) !important;
}

.btn-primary:active,
button.mainaction:active,
input.button.mainaction:active,
#rcmloginsubmit:active {
  background: var(--ayu-action-active) !important;
  border-color: var(--ayu-action-active) !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--ayu-action) !important;
  box-shadow: 0 0 0 3px rgba(8, 119, 255, .14) !important;
}

/* Login */
body.task-login #layout,
body.task-login #layout-content { min-height: 100dvh; }

body.task-login #layout-content.ayu-login {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--ayu-shell) !important;
}

.ayu-login-card {
  width: min(420px, 100%);
  padding: 32px;
  background: var(--ayu-surface);
  border: 1px solid var(--ayu-line);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(23, 31, 50, .08);
}

.ayu-login-brand {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  background: url("../images/favicon.svg") center / contain no-repeat;
}

.ayu-login-card h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
}

.ayu-login-lead {
  margin: 8px 0 24px;
  color: var(--ayu-muted);
  font-size: 14px;
  text-align: center;
}

body.task-login .ayu-login-card #login-form {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

body.task-login .ayu-login-card #login-form::before { content: none; }
body.task-login .ayu-login-card .form-group { margin-bottom: 14px; }

body.task-login .ayu-login-card label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

body.task-login .ayu-login-card .form-control,
body.task-login .ayu-login-card #rcmloginsubmit {
  height: 48px;
  min-height: 48px;
  border-radius: 10px;
  font-size: 16px;
}

body.task-login .ayu-login-card .form-control { padding: 0 14px; border-color: var(--ayu-line); }
body.task-login .ayu-login-card #rcmloginsubmit { width: 100%; margin-top: 4px; }
body.task-login .ayu-login-card #login-footer { margin-top: 18px; color: var(--ayu-muted); font-size: 13px; text-align: center; }

.ayu-login-remember {
  display: grid;
  gap: 4px;
  margin: 2px 0 12px;
}

body.task-login .ayu-login-card .ayu-login-remember > label {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ayu-ink);
  cursor: pointer;
  line-height: 20px;
}

.ayu-login-remember input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
}

.ayu-login-remember > small {
  color: var(--ayu-muted);
  font-size: 12px;
  line-height: 17px;
}

#ayu-forget-email {
  width: fit-content;
  min-height: 36px;
  padding: 6px 0;
  color: var(--ayu-action);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

#ayu-forget-email:hover { color: var(--ayu-action-hover); text-decoration: underline; }

html[data-ayu-session-state="logout-pending"] body.task-mail #layout,
html[data-ayu-session-state="cached"] body.task-mail #layout,
html[data-ayu-session-state="revalidating"] body.task-mail #layout {
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-ayu-session-state="logout-pending"] body.task-mail::after,
html[data-ayu-session-state="cached"] body.task-mail::after,
html[data-ayu-session-state="revalidating"] body.task-mail::after {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ayu-ink);
  background: var(--ayu-canvas);
  content: "Проверяем сессию…";
  font: 600 16px/1.4 var(--ayu-font);
  text-align: center;
}

@media (max-width: 360px) {
  .ayu-login-card { padding: 28px 24px; }
  body.task-login .ayu-login-card .form-control { padding-inline: 10px; font-size: 15px; }
}

.ayu-bitrix-sso-button {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 11px 16px;
  color: var(--ayu-ink) !important;
  background: #fff !important;
  border: 1px solid var(--ayu-line) !important;
  border-radius: 10px;
  text-align: center;
}

/* Product bar */
.ayu-productbar {
  display: flex !important;
  min-width: 0;
  height: var(--ayu-header-h) !important;
  align-items: center;
  gap: 20px;
  padding: 0 16px !important;
  color: var(--ayu-ink) !important;
  background: var(--ayu-shell) !important;
  border: 0 !important;
}

.ayu-brand {
  display: flex;
  width: var(--ayu-sidebar-w);
  min-width: var(--ayu-sidebar-w);
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.ayu-brand #logo {
  display: block;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  object-fit: contain;
}

.ayu-brand-word {
  min-width: 0;
  overflow: hidden;
  color: var(--ayu-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
}

.ayu-productbar #taskmenu {
  display: flex !important;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 4px;
  padding: 0 !important;
  background: transparent !important;
}

.ayu-productbar #taskmenu > a,
.ayu-productbar #taskmenu .action-buttons > a,
.ayu-productbar #taskmenu .special-buttons > a {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  padding: 0 14px !important;
  color: var(--ayu-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 20px !important;
}

.ayu-productbar #taskmenu > a:hover,
.ayu-productbar #taskmenu > a.selected,
.ayu-productbar #taskmenu .special-buttons > a:hover { background: var(--ayu-surface-active) !important; }
.ayu-productbar #taskmenu .action-buttons { display: none !important; }
.ayu-productbar #taskmenu .special-buttons {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  min-width: 0;
  align-items: center;
  margin-left: auto;
  background: transparent !important;
}
.ayu-productbar #taskmenu .special-buttons > a.logout {
  min-width: 40px;
  justify-content: center;
  gap: 8px;
  color: var(--ayu-negative) !important;
}
.ayu-productbar #taskmenu .special-buttons > a.logout::before {
  width: 20px;
  margin: 0;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

.ayu-global-search {
  display: grid;
  width: clamp(240px, 24vw, 360px);
  height: 40px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0 12px;
  color: var(--ayu-muted);
  background: #e5e7eb;
  border: 0;
  border-radius: 10px;
  text-align: left;
}

.ayu-global-search kbd { color: var(--ayu-muted); background: transparent; font: inherit; font-size: 12px; }

/* Mail layout */
@media (min-width: 1025px) {
  body.task-mail #layout {
    display: grid !important;
    height: 100dvh;
    grid-template-columns: var(--ayu-sidebar-w) clamp(390px, 36vw, 500px) minmax(420px, 1fr);
    grid-template-rows: var(--ayu-header-h) minmax(0, 1fr);
    padding: 0 8px 8px 0;
    background: var(--ayu-shell);
    overflow: hidden;
  }

  body.task-mail #layout-menu { grid-column: 1 / -1; grid-row: 1; }
  body.task-mail #layout-sidebar { grid-column: 1; grid-row: 2; }
  body.task-mail #layout-list { grid-column: 2; grid-row: 2; }
  body.task-mail #layout-content { grid-column: 3; grid-row: 2; }

  body.task-mail #layout-menu,
  body.task-mail #layout-sidebar,
  body.task-mail #layout-list,
  body.task-mail #layout-content {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    justify-self: stretch;
  }

  html:not(.ayu-column-view) body.task-mail.action-none #layout-list { grid-column: 2 / 4; border-radius: var(--ayu-radius-panel); }
  html:not(.ayu-column-view) body.task-mail.action-none #layout-content { display: none !important; }
  html:not(.ayu-column-view) body.task-mail:not(.action-none) #layout-list { display: none !important; }
  html:not(.ayu-column-view) body.task-mail:not(.action-none) #layout-content {
    grid-column: 2 / 4;
    border-radius: var(--ayu-radius-panel);
  }

  /* Direct message URLs omit sidebar/list markup. Do not reserve their grid
     columns when the standalone reader is the only mail surface. */
  html.ayu-standalone-reader body.task-mail.action-show #layout-content {
    grid-column: 1 / -1;
    border-radius: var(--ayu-radius-panel);
  }

  body.task-mail.action-compose #layout-content {
    position: fixed !important;
    z-index: 70;
    display: flex !important;
    flex-direction: column;
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(880px, calc(100vw - 48px)) !important;
    height: min(806px, calc(100dvh - 72px)) !important;
    max-width: 880px !important;
    min-width: 0;
    align-self: center;
    justify-self: center;
    border-radius: 14px;
    box-shadow: var(--ayu-shadow);
    transform: translate(-50%, -50%);
  }

  body.task-mail.action-compose #layout-sidebar,
  body.task-mail.action-compose #layout-list {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.task-mail.action-compose #layout::after {
    content: "";
    position: fixed;
    z-index: 60;
    inset: 0;
    background: rgba(22, 26, 33, .38);
    pointer-events: none;
  }

  html.ayu-column-view body.task-mail:not(.action-compose) #layout-content > .header > .back-list-button {
    display: none !important;
  }
}

body.task-mail #layout-sidebar {
  position: relative;
  min-width: 0;
  color: var(--ayu-ink);
  background: var(--ayu-shell) !important;
  border: 0 !important;
}

body.task-mail #layout-list,
body.task-mail #layout-content {
  min-width: 0;
  background: var(--ayu-surface) !important;
  border-color: var(--ayu-line) !important;
  overflow: hidden;
}

body.task-mail #layout-list { border-radius: var(--ayu-radius-panel) 0 0 var(--ayu-radius-panel); }
body.task-mail #layout-content { border-radius: 0 var(--ayu-radius-panel) var(--ayu-radius-panel) 0; }

body.task-mail #layout-sidebar > .header {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
}

.ayu-sidebar-compose {
  display: flex;
  width: calc(100% - 32px);
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 12px;
  color: #fff;
  background: var(--ayu-action);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

.ayu-sidebar-compose:hover { background: var(--ayu-action-hover); }

#folderlist-content { padding: 0 16px 12px; }
#mailboxlist.listing li { margin: 1px 0; border: 0; border-radius: var(--ayu-radius-control); overflow: hidden; }
#mailboxlist.listing li > a {
  min-height: 36px;
  padding: 0 12px;
  color: var(--ayu-ink);
  background: transparent;
  border: 0;
  border-radius: inherit;
  line-height: 36px;
}
#mailboxlist.listing li > a:hover { background: var(--ayu-surface-hover); }
#mailboxlist.listing li.selected > a,
#mailboxlist.listing li.selected > a:hover { color: var(--ayu-ink); background: var(--ayu-surface-active) !important; font-weight: 500; }
#mailboxlist .unreadcount {
  min-width: 22px;
  height: 22px;
  margin-top: 7px;
  padding: 0 6px;
  color: var(--ayu-ink);
  background: transparent;
  border-radius: 11px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 22px;
  text-align: center;
}

#layout-list > .header,
#layout-content > .header {
  display: flex !important;
  height: var(--ayu-toolbar-h) !important;
  min-height: var(--ayu-toolbar-h) !important;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 12px !important;
  color: var(--ayu-ink);
  background: #fff !important;
  border-color: var(--ayu-line) !important;
  box-shadow: none !important;
}

#layout-list > .header > .header-title,
#layout-content > .header > .header-title {
  position: static !important;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 !important;
  overflow: hidden;
  color: var(--ayu-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left !important;
  text-overflow: ellipsis;
}

#layout-content > .header > .header-title:empty { display: none !important; }

/* Elastic keeps an alternate list-menu trigger in the DOM. AYU uses the
   explicit toolbar-menu-button, so showing both creates two identical dots. */
body.task-mail #layout-list > .header > a.button.toolbar-list-button { display: none !important; }

#layout-list > .header .toolbar.menu,
#layout-content > .header .toolbar.menu {
  display: flex !important;
  min-width: 0;
  height: 100%;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

#layout-list > .header .toolbar.menu > a,
#layout-list > .header > a.button,
#layout-content > .header .toolbar.menu > a,
#layout-content > .header .toolbar.menu > .dropbutton > a,
#layout-content > .header > a.button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 40px;
  height: 40px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px !important;
  color: var(--ayu-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px;
  line-height: 20px !important;
  white-space: nowrap;
}

/* Elastic caps toolbar anchors at 84px. That silently clips Russian labels
   such as “Параметры”, “Переместить” and “Ответить всем” even when the
   desktop column has enough room. AYU owns the responsive collapse below,
   so remove the inherited cap and keep full labels until that breakpoint. */
#layout-list > .header #toolbar-list-menu > li > a,
#layout-list > .header #toolbar-list-menu > a,
#layout-content > .header #mailtoolbar > a,
#layout-content > .header #mailtoolbar > .dropbutton > a,
#layout-content > .header #toolbar-menu > li > a,
#layout-content > .header #toolbar-menu > li > .dropbutton > a {
  max-width: none !important;
}

#layout-list > .header .toolbar.menu > a:hover,
#layout-list > .header > a.button:hover,
#layout-content > .header .toolbar.menu > a:hover,
#layout-content > .header .toolbar.menu > .dropbutton > a:hover,
#layout-content > .header > a.button:hover { background: var(--ayu-surface-hover) !important; }

#layout-list > .header .toolbar.menu .inner,
#layout-content > .header .toolbar.menu .inner { font-size: 14px; }

#layout-content > .header #mailtoolbar > .dropbutton {
  display: inline-flex;
  height: 40px;
  align-items: center;
}

#layout-content > .header #mailtoolbar > a,
#layout-content > .header #mailtoolbar > .dropbutton > a:not(.dropdown) {
  width: max-content !important;
  min-width: 40px;
  flex: 0 0 auto;
}

#layout-content > .header #mailtoolbar > a.reply { width: 96px !important; }
#layout-content > .header #mailtoolbar > a.archive { width: 92px !important; }
#layout-content > .header #mailtoolbar > a.move { width: 108px !important; }
#layout-content > .header #mailtoolbar > a.forward { width: 102px !important; }
#layout-content > .header #mailtoolbar > a.delete { width: 92px !important; }
#layout-content > .header #mailtoolbar > a.markmessage { width: 100px !important; }
#layout-content > .header #mailtoolbar > a.more { width: 70px !important; }

#layout-content > .header #mailtoolbar > .dropbutton > a.dropdown {
  width: 24px !important;
  min-width: 24px;
  padding: 0 !important;
}

#layout-content > .header #mailtoolbar > .spacer {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  margin: 0 4px;
  background: var(--ayu-line);
}

/* The authenticated AJAX reader uses native UL/LI #toolbar-menu markup,
   while the transfer harness historically used a flat #mailtoolbar. */
#layout-content > .header #toolbar-menu > li {
  display: inline-flex;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
}

#layout-content > .header #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large),
#layout-content > .header #toolbar-menu > li > .dropbutton > a {
  display: inline-flex !important;
  width: max-content !important;
  min-width: 40px;
  height: 40px !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px !important;
  color: var(--ayu-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px;
  line-height: 20px !important;
  white-space: nowrap;
}

#layout-content > .header #toolbar-menu > li > a:hover,
#layout-content > .header #toolbar-menu > li > .dropbutton > a:hover {
  background: var(--ayu-surface-hover) !important;
}

#layout-content > .header #toolbar-menu > li > .dropbutton {
  display: inline-flex;
  height: 40px;
  align-items: center;
}

#layout-content > .header #toolbar-menu > li > a.delete { width: 92px !important; }
#layout-content > .header #toolbar-menu > li > a.archive { width: 92px !important; }
#layout-content > .header #toolbar-menu > li > a.move { width: 108px !important; }
#layout-content > .header #toolbar-menu > li > a.markmessage { width: 100px !important; }
#layout-content > .header #toolbar-menu > li > a.more { width: 70px !important; }
#layout-content > .header #toolbar-menu > li > a.reply { width: 96px !important; }
#layout-content > .header #toolbar-menu > li > .dropbutton > a.reply-all { width: 144px !important; }
#layout-content > .header #toolbar-menu > li > .dropbutton > a.forward { width: 114px !important; }

#layout-content > .header #toolbar-menu > li > .dropbutton > a.dropdown {
  width: 24px !important;
  min-width: 24px;
  padding: 0 !important;
}

#layout-content > .header #toolbar-menu > li.spacer {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  margin: 0 4px;
  background: var(--ayu-line);
}

@media (min-width: 1025px) and (max-width: 1360px) {
  #layout-content > .header #mailtoolbar > a,
  #layout-content > .header #mailtoolbar > .dropbutton > a:not(.dropdown),
  #layout-content > .header #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large),
  #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    width: 40px !important;
    min-width: 40px;
    padding: 0 !important;
  }

  #layout-content > .header #mailtoolbar .inner,
  #layout-content > .header #toolbar-menu .inner,
  #layout-content > .header #toolbar-menu .folder-selector-link { font-size: 0 !important; }
  #layout-content > .header #mailtoolbar > .dropbutton > a.dropdown,
  #layout-content > .header #toolbar-menu > li > .dropbutton > a.dropdown,
  #layout-content > .header #toolbar-menu > li.spacer { display: none !important; }
}

@media (min-width: 1025px) {
  /* Sidebar and list are already visible on desktop; drawer openers are only
     meaningful in the tablet/mobile single-surface layouts. */
  body.task-mail #layout-list > .header > a.button.task-menu-button,
  body.task-mail #layout-list > .header > a.button.back-sidebar-button { display: none !important; }
  #layout-list .header #toolbar-list-menu a.threads.disabled { display: none !important; }
}

/* In split mode the reader is only the fluid third column. Collapse labels
   before the toolbar can clip against that column; full-list reader keeps labels. */
@media (min-width: 1025px) and (max-width: 1680px) {
  html.ayu-column-view #layout-content > .header #mailtoolbar > a,
  html.ayu-column-view #layout-content > .header #mailtoolbar > .dropbutton > a:not(.dropdown),
  html.ayu-column-view #layout-content > .header #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large),
  html.ayu-column-view #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    width: 40px !important;
    min-width: 40px;
    padding: 0 !important;
  }
  html.ayu-column-view #layout-content > .header #mailtoolbar .inner,
  html.ayu-column-view #layout-content > .header #toolbar-menu .inner,
  html.ayu-column-view #layout-content > .header #toolbar-menu .folder-selector-link { font-size: 0 !important; }
  html.ayu-column-view #layout-content > .header #mailtoolbar > .dropbutton > a.dropdown,
  html.ayu-column-view #layout-content > .header #mailtoolbar > .spacer,
  html.ayu-column-view #layout-content > .header #toolbar-menu > li > .dropbutton > a.dropdown,
  html.ayu-column-view #layout-content > .header #toolbar-menu > li.spacer { display: none !important; }
}

#layout-list > .searchbar {
  height: 40px;
  min-height: 40px;
  margin: 8px 12px;
  background: #f0f1f3;
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
}
#layout-list > .searchbar:focus-within { border-color: var(--ayu-action); box-shadow: 0 0 0 3px rgba(8, 119, 255, .12); }
#layout-list > .searchbar input,
#layout-list > .searchbar a.button { height: 38px; color: var(--ayu-muted); background: transparent; border: 0; box-shadow: none; }

.listing li > a,
.listing tbody td,
.messagelist td { border-color: var(--ayu-line-soft); }
.listing li > a:hover,
.messagelist tr:hover > td { background: var(--ayu-surface-hover); }
.messagelist tr.selected > td,
.messagelist tr.focused > td { color: var(--ayu-ink); background: #edf5ff !important; }
.messagelist tr.unread td,
.messagelist tr.unread td.subject span.subject { color: var(--ayu-ink); font-weight: 600; }

.messagelist tbody tr,
.messagelist tbody td { height: var(--ayu-row-h); max-height: var(--ayu-row-h); }
.messagelist tbody td.subject { min-width: 0; padding: 0 12px; }
.messagelist tbody td.flags { width: 40px; padding: 0 8px; }
.messagelist tbody td.subject > .fromto,
.messagelist tbody td.subject > .subject,
.messagelist tbody td.subject > .date,
.messagelist tbody td.subject > .size {
  min-width: 0;
  overflow: hidden;
  color: var(--ayu-ink);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messagelist tbody td.subject > .date,
.messagelist tbody td.subject > .size { color: var(--ayu-muted); font-variant-numeric: tabular-nums; }

.ayu-row-avatar,
.ayu-reader-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--ayu-avatar-bg, #5f69c6);
  border-radius: 50%;
  font-weight: 600;
  text-transform: uppercase;
}
.ayu-row-avatar { width: 32px; height: 32px; font-size: 12px; }
.ayu-reader-avatar { width: 40px; height: 40px; font-size: 14px; }
.ayu-photo-unavailable { display: none !important; }
.ayu-hide-emoji .ayu-message-emoji { display: none; }

@media (min-width: 1025px) {
  html:not(.ayu-column-view) .messagelist tbody td.subject {
    display: grid;
    grid-template-columns: 36px minmax(180px, 24%) minmax(220px, 1fr) 96px;
    align-items: center;
    column-gap: 12px;
  }
  html:not(.ayu-column-view) .messagelist tbody td.subject > .ayu-row-avatar { grid-column: 1; }
  html:not(.ayu-column-view) .messagelist tbody td.subject > .fromto { grid-column: 2; }
  html:not(.ayu-column-view) .messagelist tbody td.subject > .subject { grid-column: 3; }
  html:not(.ayu-column-view) .messagelist tbody td.subject > .date,
  html:not(.ayu-column-view) .messagelist tbody td.subject > .size { grid-column: 4; justify-self: end; }

  .ayu-column-view .messagelist tbody tr,
  .ayu-column-view .messagelist tbody td { height: var(--ayu-split-row-h); max-height: var(--ayu-split-row-h); }
  .ayu-column-view .messagelist tbody td.subject {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 22px 22px 18px;
    align-content: center;
    column-gap: 10px;
    padding: 7px 12px;
  }
  .ayu-column-view .ayu-row-avatar { grid-column: 1; grid-row: 1 / -1; width: 40px; height: 40px; font-size: 14px; }
  .ayu-column-view .messagelist tbody td.subject > .fromto { grid-column: 2; grid-row: 1; }
  .ayu-column-view .messagelist tbody td.subject > .date,
  .ayu-column-view .messagelist tbody td.subject > .size { grid-column: 3; grid-row: 1; font-size: 12px; }
  .ayu-column-view .messagelist tbody td.subject > .subject { grid-column: 2 / 4; grid-row: 2; }
  .ayu-column-view .messagelist tbody td.flags { width: 34px; padding: 0 6px; }

  .ayu-compact-density:not(.ayu-column-view) { --ayu-row-h: 40px; }
  .ayu-column-view.ayu-compact-density { --ayu-split-row-h: 82px; }
}

.ayu-show-dividers .messagelist tbody tr > td { border-bottom: 1px solid var(--ayu-line-soft); }
html:not(.ayu-show-dividers) .messagelist tbody tr > td { border-bottom-color: transparent; }

/* Reader, native actions and attachments */
#layout-content > .content.frame-content { padding: 0; }
#message-header { padding: 0 24px; }
#message-header > h2.subject { margin: 18px 0 20px; color: var(--ayu-ink); font-size: 21px; font-weight: 600; line-height: 28px; }
#message-header > .header { display: flex; min-height: 48px; align-items: flex-start; gap: 12px; }
#message-header .contactphoto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#message-header .header-content { min-width: 0; flex: 1; }
#message-header .header-summary { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
#message-header .header-summary .from { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#message-header .header-summary small { flex: 0 0 auto; color: var(--ayu-muted); }
#message-content { padding: 28px 24px 40px; }
#message-content .rightcol { min-width: 0; }
#messagebody { max-width: 860px; color: var(--ayu-ink); font-size: 15px; line-height: 1.55; }
#attachment-list.attachmentslist { display: grid; gap: 8px; margin: 0 0 20px; }
#attachment-list .attachment {
  min-height: 56px;
  padding: 8px 12px;
  background: var(--ayu-surface-hover);
  border: 1px solid var(--ayu-line-soft);
  border-radius: 10px;
}
.message-part .rcmsignature,
.mce-content-body .rcmsignature,
#signature {
  max-width: 560px;
  margin-top: 28px !important;
  padding-top: 12px;
  border-top: 2px solid var(--ayu-brand);
  color: var(--ayu-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Compose */
body.task-mail.action-compose #layout-content > .header {
  display: flex !important;
  height: 56px !important;
  min-height: 56px !important;
  align-items: center;
  gap: 8px;
  padding: 0 10px !important;
  border-radius: 14px 14px 0 0;
}
body.task-mail.action-compose #layout-content > .header .header-title {
  display: block !important;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 8px !important;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ayu-compose-avatar {
  display: inline-grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  color: #fff;
  background: var(--ayu-avatar-bg, #5f69c6);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
body.task-mail.action-compose #toolbar-menu.toolbar,
body.task-mail.action-compose #messagetoolbar.toolbar {
  display: flex !important;
  min-width: 0;
  height: 56px !important;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
}
body.task-mail.action-compose #toolbar-menu.toolbar > li {
  display: block !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.task-mail.action-compose #toolbar-menu.toolbar > li.spacer { display: none !important; }
body.task-mail.action-compose #toolbar-menu.toolbar a,
body.task-mail.action-compose #messagetoolbar.toolbar a {
  display: inline-flex !important;
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px;
  overflow: hidden;
}
body.task-mail.action-compose #toolbar-menu.toolbar a .inner,
body.task-mail.action-compose #messagetoolbar.toolbar a .inner { font-size: 0 !important; }
body.task-mail.action-compose #toolbar-menu.toolbar a:hover,
body.task-mail.action-compose #messagetoolbar.toolbar a:hover { background: var(--ayu-surface-hover) !important; }
.ayu-compose-window-actions {
  display: flex;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}
.ayu-compose-window-actions button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  color: var(--ayu-ink);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: 300 24px/1 Arial, sans-serif !important;
}
.ayu-compose-window-actions button:hover { background: var(--ayu-surface-hover); }
html.ayu-compose-maximized body.task-mail.action-compose #layout-content {
  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;
  width: calc(100vw - 24px) !important;
  height: calc(100dvh - 24px) !important;
  max-width: none !important;
  transform: none;
}
html.ayu-compose-minimized body.task-mail.action-compose #layout-content {
  top: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  width: min(640px, calc(100vw - 48px)) !important;
  height: 56px !important;
  min-height: 56px;
  align-self: end;
  margin: 0;
  transform: none;
}
html.ayu-compose-minimized body.task-mail.action-compose #compose-content { display: none !important; }
body.task-mail.action-compose #compose-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
body.task-mail.action-compose #compose-content > .formcontent {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}
body.task-mail.action-compose .compose-headers { padding: 0 20px; border-color: var(--ayu-line); }
body.task-mail.action-compose .compose-headers .form-group { display: grid !important; min-height: 48px; grid-template-columns: 64px minmax(0, 1fr); align-items: center; margin: 0 !important; border-bottom: 1px solid var(--ayu-line-soft); }
/* Native Elastic marks optional recipient rows with the `.hidden` class.
   Keep that server/native state authoritative: the generic compose grid above
   must never reveal Cc/Bcc/Reply-To/Followup-To by overriding it. */
body.task-mail.action-compose .compose-headers .form-group.hidden { display: none !important; }
body.task-mail.action-compose .compose-headers .form-group:last-child { border-bottom: 0; }
body.task-mail.action-compose .compose-headers .col-form-label { width: auto !important; max-width: none !important; padding: 0 !important; color: var(--ayu-muted); }
body.task-mail.action-compose .compose-headers .col-10 { width: auto !important; max-width: none !important; padding: 0 !important; }
body.task-mail.action-compose .compose-headers .form-group[hidden] { display: none !important; }
body.task-mail.action-compose .ayu-compose-recipient-line {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
body.task-mail.action-compose .ayu-compose-recipient-actions {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 2px;
}
body.task-mail.action-compose .ayu-compose-recipient-actions button {
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  color: var(--ayu-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
body.task-mail.action-compose .ayu-compose-recipient-actions button:hover,
body.task-mail.action-compose .ayu-compose-recipient-actions button:focus-visible,
body.task-mail.action-compose .ayu-compose-recipient-actions button[aria-expanded="true"] {
  color: var(--ayu-ink);
  background: var(--ayu-surface-hover);
}
body.task-mail.action-compose .compose-headers .form-control,
body.task-mail.action-compose .recipient-input {
  min-width: 0;
  min-height: 44px;
  border-color: var(--ayu-line);
  border-radius: 9px;
}
body.task-mail.action-compose .compose-headers .input-group-text {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
body.task-mail.action-compose #composebodycontainer {
  height: auto !important;
  min-height: 120px;
  flex: 1 1 auto;
}
body.task-mail.action-compose .compose-content { min-height: 0; background: #fff; }
body.task-mail.action-compose #composebody {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: 16px 20px;
  color: var(--ayu-ink);
  background: #fff;
  border: 0;
  outline: 0;
  resize: none;
  font: inherit;
}
.ayu-compose-attachment-list {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 20px;
  border-bottom: 1px solid var(--ayu-line-soft);
  overflow-x: auto;
}
.ayu-compose-attachment {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--ayu-ink);
  background: var(--ayu-surface-hover);
  border: 1px solid var(--ayu-line-soft);
  border-radius: 9px;
}
.ayu-compose-attachment strong {
  max-width: 280px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ayu-compose-attachment small { flex: 0 0 auto; color: var(--ayu-muted); }
.ayu-compose-signature-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 0;
}
.ayu-compose-signature-control label { margin: 0; color: var(--ayu-muted); font-size: 12px; }
.ayu-compose-signature-control select {
  min-height: 36px;
  padding: 0 30px 0 10px;
  color: var(--ayu-ink);
  background: #fff;
  border: 1px solid var(--ayu-line);
  border-radius: 8px;
  font-size: 13px;
}
.ayu-compose-signature-preview {
  flex: 0 0 auto;
  max-width: 560px;
  margin: 8px 20px 12px !important;
  padding: 10px 0 0;
  border-top: 2px solid var(--ayu-brand);
  color: var(--ayu-muted);
  font-size: 12px;
  line-height: 1.45;
}
body.task-mail.action-compose #signature.ayu-compose-signature-preview[data-ayu-signature-format="html"] {
  width: min(720px, calc(100% - 40px));
  max-width: 720px;
  padding-top: 0;
  border-top: 0;
  overflow-wrap: anywhere;
}
body.task-mail.action-compose #signature.ayu-compose-signature-preview[data-ayu-signature-format="html"] table { max-width: 100% !important; }
.ayu-compose-signature-preview[data-ayu-signature-safe="false"] { outline: 2px solid #c63f35; outline-offset: 3px; }
body.task-mail.action-compose .formbuttons {
  position: sticky;
  z-index: 3;
  bottom: 0;
  min-height: 68px;
  flex: 0 0 68px;
  padding: 12px 16px;
  background: #fff;
  border-color: var(--ayu-line);
  overflow: visible;
}
body.task-mail.action-compose .formbuttons .button,
body.task-mail.action-compose .formbuttons .btn {
  min-height: 40px;
  padding: 0 16px;
  color: var(--ayu-ink);
  background: var(--ayu-surface-hover);
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}
body.task-mail.action-compose .formbuttons .button:hover { background: var(--ayu-surface-active); }
body.task-mail.action-compose .formbuttons .button.mainaction {
  color: #fff;
  background: var(--ayu-action);
}
body.task-mail.action-compose .formbuttons .button.mainaction:hover { background: var(--ayu-action-hover); }

/* Appearance sheet */
.ayu-settings-sheet {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-content: end;
  background: rgba(22, 26, 33, .46);
}
.ayu-settings-sheet[hidden] { display: none; }
.ayu-settings-sheet > aside,
.ayu-settings-sheet > main {
  height: 50dvh;
  min-height: min(430px, 100dvh);
  max-height: 640px;
}
.ayu-settings-sheet > aside {
  grid-column: 1;
  padding: 20px 12px;
  background: #fff;
  border-radius: 18px 0 0 0;
  border-right: 1px solid var(--ayu-line);
}
.ayu-settings-sheet > aside h2 { margin: 0 10px 16px; font-size: 20px; font-weight: 500; }
.ayu-settings-sheet > aside button,
.ayu-settings-sheet > aside a {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  color: var(--ayu-ink);
  background: transparent;
  border: 0;
  border-radius: 9px;
  text-decoration: none;
}
.ayu-settings-sheet > aside button.is-active,
.ayu-settings-sheet > aside button:hover,
.ayu-settings-sheet > aside a:hover { background: var(--ayu-surface-active); }
.ayu-settings-sheet > main {
  grid-column: 2;
  min-width: 0;
  overflow: auto;
  background: var(--ayu-shell);
  border-radius: 0 18px 0 0;
}
.ayu-settings-sheet > main > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--ayu-shell);
}
.ayu-settings-sheet > main > header small { color: var(--ayu-muted); }
.ayu-settings-sheet > main > header h3 { margin: 4px 0 0; font-size: 20px; font-weight: 500; }
.ayu-settings-head-actions { display: flex; align-items: center; gap: 12px; }
#ayu-settings-status { color: var(--ayu-muted); font-size: 13px; white-space: nowrap; }
#ayu-settings-status[data-state="saved"] { color: #237a45; }
#ayu-settings-status[data-state="error"] { max-width: 280px; color: #a93829; white-space: normal; text-align: right; }
.ayu-settings-close { width: 44px; height: 44px; background: transparent; border: 0; border-radius: 10px; font-size: 30px; font-weight: 300; }
.ayu-settings-close:hover { background: var(--ayu-surface-active); }
.ayu-settings-content {
  display: grid;
  max-width: 980px;
  grid-template-columns: minmax(420px, 1fr) minmax(260px, .65fr);
  gap: 24px;
  padding: 0 28px 40px;
}
.ayu-settings-content > section { padding: 24px; background: #fff; border-radius: 14px; }
.ayu-settings-content h4 { margin: 0 0 16px; font-size: 16px; font-weight: 500; }
.ayu-setting-row {
  position: relative;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ayu-line-soft);
  cursor: pointer;
}
.ayu-setting-row > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ayu-setting-row strong { font-weight: 500; }
.ayu-setting-row small { color: var(--ayu-muted); line-height: 17px; }
.ayu-setting-row input { position: absolute; opacity: 0; }
.ayu-setting-row > i {
  position: relative;
  width: 36px;
  height: 22px;
  flex: 0 0 auto;
  background: #b6b8be;
  border-radius: 12px;
}
.ayu-setting-row > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 140ms ease;
}
.ayu-setting-row input:checked + i { background: var(--ayu-action); }
.ayu-setting-row input:checked + i::after { transform: translateX(14px); }
.ayu-setting-row input:focus-visible + i { outline: 2px solid var(--ayu-action); outline-offset: 2px; }
.ayu-setting-row.is-disabled { cursor: not-allowed; opacity: .58; }
.ayu-settings-note p { margin: 0; color: var(--ayu-muted); line-height: 1.55; }
html.ayu-layer-open,
html.ayu-layer-open body { overflow: hidden !important; }

.ayu-drawer-close { display: none; }

/* Native Roundcube feedback and mail-list states. */
#messagestack {
  position: fixed !important;
  z-index: 140 !important;
  right: 20px !important;
  bottom: 20px !important;
  display: grid;
  width: min(360px, calc(100vw - 32px)) !important;
  max-height: min(70dvh, 560px) !important;
  gap: 8px;
  pointer-events: none;
}

#messagestack .ui.alert,
.ui.alert.boxconfirmation,
.ui.alert.boxinformation,
.ui.alert.boxwarning,
.ui.alert.boxerror {
  min-height: 48px;
  margin: 0 !important;
  padding: 12px 14px !important;
  color: var(--ayu-ink) !important;
  background: var(--ayu-surface) !important;
  border: 1px solid var(--ayu-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(23, 31, 50, .14);
  line-height: 20px;
  pointer-events: auto;
}

#messagestack .ui.alert.loading { color: var(--ayu-muted) !important; }
#messagestack .ui.alert.alert-success,
.ui.alert.boxconfirmation { background: var(--ayu-positive-bg) !important; border-color: #b9dfc7 !important; }
#messagestack .ui.alert.alert-info,
.ui.alert.boxinformation { background: var(--ayu-info-bg) !important; border-color: #bdd8fa !important; }
#messagestack .ui.alert.alert-warning,
.ui.alert.boxwarning { background: var(--ayu-warning-bg) !important; border-color: #ead28c !important; }
#messagestack .ui.alert.alert-danger,
.ui.alert.boxerror { background: var(--ayu-negative-bg) !important; border-color: #efc0ba !important; }

#ayu-connectivity-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

#ayu-connectivity-status > span { min-width: 0; }

#layout-list[data-ayu-busy-overlay="true"] .messagelist {
  opacity: .58;
  pointer-events: none;
}

#layout-list[data-ayu-busy-overlay="true"]::after {
  content: "Загружаем письма…";
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  padding: 11px 15px 11px 42px;
  color: var(--ayu-muted);
  background: var(--ayu-surface);
  border: 1px solid var(--ayu-line);
  border-radius: 10px;
  box-shadow: var(--ayu-shadow);
  transform: translate(-50%, -50%);
}

#layout-list[data-ayu-busy-overlay="true"]::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: calc(50% - 8px);
  left: calc(50% - 63px);
  width: 16px;
  height: 16px;
  border: 2px solid var(--ayu-line);
  border-top-color: var(--ayu-action);
  border-radius: 50%;
  animation: ayu-spin .8s linear infinite;
}

#layout-list .listing .empty,
#layout-list .messagelist tr.empty td {
  height: auto !important;
  min-height: 180px;
  padding: 56px 24px !important;
  color: var(--ayu-muted) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  white-space: normal;
}

@keyframes ayu-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  #messagestack {
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
  }
  #messagestack .ui.alert { min-height: 56px; border-radius: 12px !important; }
  #ayu-connectivity-status { align-items: flex-start; }
  #layout-list .listing .empty,
  #layout-list .messagelist tr.empty td { min-height: 220px; padding: 72px 20px !important; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --ayu-row-h: 72px; }
  body.task-mail #layout {
    display: grid !important;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--ayu-header-h) minmax(0, 1fr);
    padding: 0;
    background: var(--ayu-shell);
    overflow: hidden;
  }
  body.task-mail #layout-menu {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  body.task-mail #layout-sidebar,
  body.task-mail #layout-list,
  body.task-mail #layout-content {
    position: relative !important;
    grid-column: 1;
    grid-row: 2;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  body.task-mail #layout-sidebar:not(.selected),
  body.task-mail #layout-list:not(.selected),
  body.task-mail #layout-content:not(.selected) { display: none !important; }
  body.task-mail #layout-sidebar.selected,
  body.task-mail #layout-list.selected,
  body.task-mail #layout-content.selected { display: flex !important; }
  .ayu-productbar { gap: 8px; padding: 0 8px !important; }
  .ayu-brand { width: var(--ayu-rail-w); min-width: var(--ayu-rail-w); gap: 0; }
  .ayu-brand-word { display: none; }
  .ayu-brand #logo { width: 44px !important; height: 44px !important; }
  .ayu-productbar #taskmenu > a { width: 44px !important; padding: 0 !important; justify-content: center; }
  .ayu-productbar #taskmenu > a .inner { font-size: 0; }
  .ayu-productbar #taskmenu .special-buttons > a.logout {
    width: 44px !important;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
  }
  .ayu-productbar #taskmenu .special-buttons > a.logout .inner { font-size: 0; }
  .ayu-global-search { width: min(300px, 34vw); }
  body.task-mail #layout-sidebar { width: var(--ayu-rail-w); min-width: var(--ayu-rail-w); }
  .ayu-sidebar-compose { width: 44px; margin: 0 4px 12px; padding: 0; }
  .ayu-sidebar-compose span:last-child { display: none; }
  #folderlist-content { padding: 0 4px 12px; }
  #mailboxlist.listing li > a { min-height: 44px; padding: 0; text-align: center; }
  #mailboxlist.listing li > a .name { display: none; }
  body.task-mail #layout-sidebar.selected {
    position: absolute !important;
    z-index: 65;
    top: var(--ayu-header-h);
    right: auto;
    bottom: 0;
    left: 0;
    width: min(340px, 88vw) !important;
    max-width: min(340px, 88vw) !important;
    height: calc(100dvh - var(--ayu-header-h));
    background: #fff !important;
    box-shadow: 12px 0 32px rgba(23, 31, 50, .18);
  }
  body.task-mail #layout-sidebar.selected > .header {
    display: flex !important;
    height: 56px !important;
    min-height: 56px !important;
    align-items: center;
    padding: 0 58px 0 18px !important;
  }
  body.task-mail #layout-sidebar.selected > .header > .header-title {
    display: block !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
  }
  body.task-mail #layout-sidebar.selected > .ayu-folder-drawer-close {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 8px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--ayu-text);
    font: 400 32px/1 Arial, sans-serif;
    cursor: pointer;
  }
  body.task-mail #layout-sidebar.selected > .ayu-folder-drawer-close:hover { background: var(--ayu-surface-hover); }
  body.task-mail #layout-sidebar.selected > .ayu-folder-drawer-close:focus-visible {
    outline: 2px solid var(--ayu-action);
    outline-offset: -2px;
  }
  body.task-mail #layout-sidebar.selected .ayu-sidebar-compose {
    width: calc(100% - 28px);
    height: 48px;
    margin: 12px 14px;
    padding: 0 14px;
  }
  body.task-mail #layout-sidebar.selected .ayu-sidebar-compose span:last-child { display: inline; }
  body.task-mail #layout-sidebar.selected #folderlist-content { padding: 0 14px 20px; }
  body.task-mail #layout-sidebar.selected #mailboxlist.listing li > a {
    min-height: 48px;
    justify-content: flex-start;
    padding: 0 12px;
    line-height: 48px;
    text-align: left;
  }
  body.task-mail #layout-sidebar.selected #mailboxlist.listing li > a .name { display: inline; }
  #layout-content > .header #mailtoolbar > a,
  #layout-content > .header #mailtoolbar > .dropbutton,
  #layout-content > .header #mailtoolbar > .dropbutton > a:not(.dropdown) {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    flex: 0 0 44px;
    padding: 0 !important;
  }
  #layout-content > .header #mailtoolbar .inner,
  #layout-content > .header #mailtoolbar > .dropbutton > a.dropdown,
  #layout-content > .header #mailtoolbar > .spacer { display: none !important; }
  .messagelist tbody tr,
  .messagelist tbody td { height: var(--ayu-row-h); max-height: var(--ayu-row-h); }
  .messagelist tbody td.subject {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 24px 22px;
    align-content: center;
    column-gap: 10px;
    padding: 8px 14px 8px 12px;
  }
  .ayu-row-avatar { grid-column: 1; grid-row: 1 / -1; width: 40px; height: 40px; font-size: 14px; }
  .messagelist tbody td.subject > .fromto { grid-column: 2; grid-row: 1; }
  .messagelist tbody td.subject > .date,
  .messagelist tbody td.subject > .size { grid-column: 3; grid-row: 1; font-size: 12px; }
  .messagelist tbody td.subject > .subject { grid-column: 2 / 4; grid-row: 2; }
  .ayu-compact-density { --ayu-row-h: 60px; }
  .ayu-settings-content { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 767px) {
  :root { --ayu-header-h: 56px; --ayu-row-h: 80px; }
  body.task-mail #layout {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }
  body.task-mail #layout-menu { display: none !important; }
  body.task-mail #layout-menu.selected {
    position: absolute !important;
    z-index: 70;
    inset: 0 auto 0 0;
    display: flex !important;
    width: min(320px, 88vw) !important;
    max-width: min(320px, 88vw) !important;
    height: 100dvh !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px !important;
    background: #fff !important;
    box-shadow: 12px 0 32px rgba(23, 31, 50, .18);
  }
  body.task-mail #layout-menu.selected > .ayu-task-drawer-close,
  body.task-mail #layout-sidebar.selected > .ayu-folder-drawer-close {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 8px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--ayu-text);
    font: 400 32px/1 Arial, sans-serif;
    cursor: pointer;
  }
  body.task-mail #layout-menu.selected > .ayu-task-drawer-close:hover,
  body.task-mail #layout-sidebar.selected > .ayu-folder-drawer-close:hover { background: var(--ayu-surface-hover); }
  body.task-mail #layout-menu.selected > .ayu-task-drawer-close:focus-visible,
  body.task-mail #layout-sidebar.selected > .ayu-folder-drawer-close:focus-visible {
    outline: 2px solid var(--ayu-action);
    outline-offset: -2px;
  }
  body.task-mail #layout-menu.selected .ayu-brand {
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding-right: 48px;
  }
  body.task-mail #layout-menu.selected .ayu-brand-word { display: block; }
  body.task-mail #layout-menu.selected #taskmenu {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  body.task-mail #layout-menu.selected #taskmenu > a {
    display: flex !important;
    width: 100% !important;
    min-height: 48px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }
  body.task-mail #layout-menu.selected #taskmenu > a .inner { font-size: 16px; }
  body.task-mail #layout-menu.selected #taskmenu .special-buttons {
    display: flex !important;
    width: 100%;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--ayu-line-soft);
  }
  body.task-mail #layout-menu.selected #taskmenu .special-buttons > a.logout {
    display: flex !important;
    width: 100% !important;
    min-height: 48px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }
  body.task-mail #layout-menu.selected #taskmenu .special-buttons > a.logout .inner { font-size: 16px; }
  body.task-mail #layout-sidebar,
  body.task-mail #layout-list,
  body.task-mail #layout-content {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh;
    flex: none !important;
  }
  body.task-mail #layout-sidebar:not(.selected),
  body.task-mail #layout-list:not(.selected),
  body.task-mail #layout-content:not(.selected) { display: none !important; }
  body.task-mail #layout-sidebar.selected,
  body.task-mail #layout-list.selected,
  body.task-mail #layout-content.selected { display: flex !important; }
  .ayu-productbar { height: var(--ayu-header-h) !important; gap: 6px; padding: 0 8px !important; }
  .ayu-brand { width: 44px; min-width: 44px; gap: 0; }
  .ayu-brand #logo { width: 38px !important; height: 38px !important; }
  .ayu-brand-word,
  .ayu-productbar #taskmenu,
  .ayu-global-search { display: none !important; }
  body.task-mail #layout-list,
  body.task-mail #layout-content { border-radius: 0 !important; }
  body.task-mail #layout-sidebar {
    width: min(340px, 88vw);
    max-width: min(340px, 88vw);
    background: #fff !important;
  }
  body.task-mail #layout-sidebar.selected {
    z-index: 65;
    width: min(340px, 88vw) !important;
    max-width: min(340px, 88vw) !important;
    box-shadow: 12px 0 32px rgba(23, 31, 50, .18);
  }
  body.task-mail #layout-sidebar > .header {
    display: flex !important;
    height: 56px !important;
    min-height: 56px !important;
    align-items: center;
    padding: 0 58px 0 18px !important;
  }
  body.task-mail #layout-sidebar > .header > .header-title {
    display: block !important;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ayu-sidebar-compose { width: calc(100% - 28px); height: 48px; margin: 12px 14px; }
  #folderlist-content { padding: 0 14px 20px; }
  #mailboxlist.listing li > a { min-height: 48px; padding: 0 12px; line-height: 48px; }
  #layout-list > .header,
  #layout-content > .header { height: 56px !important; min-height: 56px !important; }
  #layout-list > .header {
    display: grid !important;
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
    gap: 4px;
    padding: 0 4px !important;
  }
  #layout-list > .header > .task-menu-button { grid-column: 1; }
  #layout-list > .header > .back-sidebar-button { grid-column: 2; }
  #layout-list > .header > .toolbar-button.refresh,
  #layout-list > .header > .toolbar.menu { display: none !important; }
  #layout-list > .header > .header-title {
    display: block !important;
    grid-column: 3;
    align-self: center;
    margin: 0 !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-align: left !important;
  }
  #layout-list > .header > .toolbar-menu-button { grid-column: 4; justify-self: end; }
  #layout-list > .searchbar {
    height: 46px;
    min-height: 46px;
    margin: 8px;
  }
  #layout-list > .searchbar input,
  #layout-list > .searchbar a.button { height: 44px; }
  #layout-list > .searchbar a.button {
    width: 44px;
    min-width: 44px;
    flex: 0 0 44px;
  }
  .messagelist tbody tr,
  .messagelist tbody td { height: var(--ayu-row-h); max-height: var(--ayu-row-h); }
  .messagelist tbody td.subject {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 24px 22px;
    align-content: center;
    column-gap: 10px;
    padding: 10px 14px 10px 12px;
  }
  .ayu-row-avatar { grid-column: 1; grid-row: 1 / -1; width: 40px; height: 40px; font-size: 14px; }
  .messagelist tbody td.subject > .fromto { grid-column: 2; grid-row: 1; font-size: 15px; }
  .messagelist tbody td.subject > .date,
  .messagelist tbody td.subject > .size { grid-column: 3; grid-row: 1; font-size: 12px; }
  .messagelist tbody td.subject > .subject { grid-column: 2 / 4; grid-row: 2; font-size: 14px; }
  .messagelist tbody td.flags { width: 32px; padding: 0 4px; }
  .ayu-compact-density { --ayu-row-h: 68px; }
  #message-header { padding: 0 16px; }
  #message-header > h2.subject { margin: 14px 0 16px; font-size: 19px; line-height: 25px; }
  #message-content { padding: 22px 16px calc(80px + env(safe-area-inset-bottom)); }
  #messagebody { font-size: 15px; }
  #layout-content > .header {
    gap: 2px;
    padding: 0 4px !important;
    overflow: hidden;
  }
  #layout-content > .header > .back-list-button {
    width: 44px !important;
    min-width: 44px;
    flex: 0 0 44px;
    padding: 0 !important;
  }
  #layout-content > .header > .back-list-button .inner { display: none; }
  #layout-content > .header #mailtoolbar,
  #layout-content > .header #toolbar-menu {
    display: flex !important;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #layout-content > .header #mailtoolbar::-webkit-scrollbar,
  #layout-content > .header #toolbar-menu::-webkit-scrollbar { display: none; }
  #layout-content > .header #mailtoolbar > a,
  #layout-content > .header #mailtoolbar > .dropbutton,
  #layout-content > .header #mailtoolbar > .dropbutton > a:not(.dropdown),
  #layout-content > .header #toolbar-menu > li,
  #layout-content > .header #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large),
  #layout-content > .header #toolbar-menu > li > .dropbutton,
  #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    flex: 0 0 44px;
    padding: 0 !important;
  }
  #layout-content > .header #mailtoolbar .inner,
  #layout-content > .header #toolbar-menu .inner,
  #layout-content > .header #toolbar-menu .folder-selector-link,
  #layout-content > .header #mailtoolbar > .dropbutton > a.dropdown,
  #layout-content > .header #toolbar-menu > li > .dropbutton > a.dropdown,
  #layout-content > .header #mailtoolbar > .spacer,
  #layout-content > .header #toolbar-menu > li.spacer { display: none !important; }
  #layout-list > .header a.button,
  #layout-content > .header a.button,
  #layout-list > .header .toolbar a,
  #layout-content > .header .toolbar a {
    display: inline-flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  body.task-mail #layout-list > .header > a.back-sidebar-button { display: inline-flex !important; }
  body.task-mail #layout-list > .header > a.toolbar-button.refresh { display: none !important; }
  body.task-mail.action-compose #layout-content { position: fixed; z-index: 80; inset: 0; width: 100%; max-width: none; height: auto; max-height: none; border-radius: 0; transform: none !important; }
  body.task-mail.action-compose #layout-content > .header { padding: 0 8px !important; }
  body.task-mail.action-compose #layout-content > .header .task-menu-button { display: none !important; }
  body.task-mail.action-compose #layout-content > .header .header-title {
    padding: 0 6px !important;
    font-size: 16px;
  }
  body.task-mail.action-compose #toolbar-menu.toolbar { flex: 0 0 auto; }
  body.task-mail.action-compose #toolbar-menu.toolbar > li { display: none !important; }
  body.task-mail.action-compose #toolbar-menu.toolbar > li:has(a.attach) { display: block !important; }
  body.task-mail.action-compose #toolbar-menu.toolbar > li:has(a.save) { display: none !important; }
  body.task-mail.action-compose #toolbar-menu.toolbar a,
  body.task-mail.action-compose #messagetoolbar.toolbar a,
  body.task-mail.action-compose #layout-content > .header .toolbar-menu-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }
  body.task-mail.action-compose .ayu-compose-window-actions button[data-ayu-compose="minimize"],
  body.task-mail.action-compose .ayu-compose-window-actions button[data-ayu-compose="expand"] { display: none; }
  body.task-mail.action-compose .ayu-compose-window-actions { width: 44px; height: 44px; }
  body.task-mail.action-compose .ayu-compose-window-actions button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  body.task-mail.action-compose #compose-content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.task-mail.action-compose .formbuttons {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex !important;
    height: calc(64px + env(safe-area-inset-bottom));
    min-height: calc(64px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ayu-line);
  }
  body.task-mail.action-compose .formbuttons .button,
  body.task-mail.action-compose .formbuttons .btn {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  body.task-mail.action-compose .compose-headers .form-control,
  body.task-mail.action-compose .recipient-input { min-height: 48px; }
  body.task-mail.action-compose .ayu-compose-recipient-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  body.task-mail.action-compose .ayu-compose-recipient-actions {
    justify-content: flex-end;
    overflow-x: auto;
  }
  body.task-mail.action-compose .ayu-compose-recipient-actions button {
    min-width: 44px;
    min-height: 44px;
  }
  body.task-mail.action-compose #signature.ayu-compose-signature-preview[data-ayu-signature-format="html"] { width: calc(100% - 28px); margin-right: 14px !important; margin-left: 14px !important; }

  .ayu-settings-sheet { display: block; background: var(--ayu-shell); }
  .ayu-settings-sheet[hidden] { display: none; }
  .ayu-settings-sheet > aside { display: none; }
  .ayu-settings-sheet > main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    border-radius: 0;
  }
  .ayu-settings-sheet > main > header { min-height: 68px; padding: 10px 14px; }
  .ayu-settings-sheet > main > header h3 { font-size: 18px; }
  .ayu-settings-content { display: block; padding: 0 14px calc(32px + env(safe-area-inset-bottom)); }
  .ayu-settings-content > section { margin-bottom: 14px; padding: 18px; }
  .ayu-setting-row { min-height: 72px; }
}

/* Personal contacts. Keep the native Roundcube address book commands and
   replace only Elastic's panel geometry and presentation. */
body.task-addressbook #layout-sidebar,
body.task-addressbook #layout-list,
body.task-addressbook #layout-content {
  min-width: 0;
  color: var(--ayu-ink);
  border-color: var(--ayu-line) !important;
}

body.task-addressbook #layout-sidebar { background: var(--ayu-shell) !important; }
body.task-addressbook #layout-list,
body.task-addressbook #layout-content { background: var(--ayu-surface) !important; overflow: hidden; }

body.task-addressbook #layout-sidebar > .header,
body.task-addressbook #layout-list > .header,
body.task-addressbook #layout-content > .header {
  display: flex !important;
  height: 48px !important;
  min-height: 48px !important;
  align-items: center;
  gap: 4px;
  padding: 0 10px !important;
  color: var(--ayu-ink);
  background: var(--ayu-surface) !important;
  border-color: var(--ayu-line) !important;
  box-shadow: none !important;
}

body.task-addressbook #layout-sidebar > .header { background: var(--ayu-shell) !important; }
body.task-addressbook #layout-sidebar > .header > .header-title,
body.task-addressbook #layout-list > .header > .header-title,
body.task-addressbook #layout-content > .header > .header-title {
  position: static !important;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 !important;
  overflow: hidden;
  color: var(--ayu-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: left !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.task-addressbook #layout-sidebar > .header a.button,
body.task-addressbook #layout-list > .header a.button,
body.task-addressbook #layout-content > .header a.button,
body.task-addressbook #layout-content > .header .toolbar a,
body.task-addressbook #layout-content > .header .toolbar button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 40px;
  height: 40px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px !important;
  color: var(--ayu-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--ayu-radius-control);
  white-space: nowrap;
}

body.task-addressbook #layout-sidebar > .header a.button:hover,
body.task-addressbook #layout-list > .header a.button:hover,
body.task-addressbook #layout-content > .header a.button:hover,
body.task-addressbook #layout-content > .header .toolbar a:hover,
body.task-addressbook #layout-content > .header .toolbar button:hover { background: var(--ayu-surface-hover) !important; }

body.task-addressbook #layout-content > .header .toolbar {
  display: flex !important;
  min-width: 0;
  height: 100%;
  align-items: center;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
}

body.task-addressbook #layout-list > .searchbar {
  min-height: 44px;
  margin: 8px 10px;
  background: var(--ayu-shell) !important;
  border: 0 !important;
  border-radius: 10px;
}

body.task-addressbook #layout-list > .searchbar input { min-height: 44px; color: var(--ayu-ink); }
body.task-addressbook #directorylist { padding: 0 10px 16px; }
body.task-addressbook #directorylist li { margin: 2px 0; border: 0; border-radius: var(--ayu-radius-control); overflow: hidden; }
body.task-addressbook #directorylist li > a {
  min-height: 40px;
  padding: 0 10px;
  color: var(--ayu-ink);
  background: transparent;
  border: 0;
  border-radius: inherit;
  line-height: 40px;
}
body.task-addressbook #directorylist li > a:hover { background: var(--ayu-surface-hover); }
body.task-addressbook #directorylist li.selected > a { background: var(--ayu-surface-active) !important; font-weight: 500; }

body.task-addressbook #contacts-table { width: 100%; }
body.task-addressbook #contacts-table tr { height: 64px; }
body.task-addressbook #contacts-table td { border-bottom: 1px solid var(--ayu-line-soft); }
body.task-addressbook #contacts-table td.selection { width: 36px; padding-left: 12px; }
body.task-addressbook #contacts-table td.name {
  display: flex;
  min-width: 0;
  height: 64px;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 4px;
  overflow: hidden;
  color: var(--ayu-ink);
  font-size: 15px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.task-addressbook #contacts-table tr:hover td { background: var(--ayu-surface-hover) !important; }
body.task-addressbook #contacts-table tr.selected td,
body.task-addressbook #contacts-table tr.focused td { background: var(--ayu-info-bg) !important; }
.ayu-contact-avatar {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  color: #fff;
  background: var(--ayu-avatar-bg, #5f69c6);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

body.task-addressbook #layout-list .listing .empty {
  min-height: 220px;
  padding: 72px 28px !important;
  color: var(--ayu-muted) !important;
  border: 0 !important;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  white-space: normal;
}

body.task-addressbook #contact-frame { width: 100% !important; background: var(--ayu-surface); }
body.task-addressbook.action-show.formcontainer,
body.task-addressbook.action-edit.formcontainer,
body.task-addressbook.action-add.formcontainer {
  color: var(--ayu-ink);
  background: var(--ayu-surface) !important;
}
body.task-addressbook.formcontainer .formcontent { max-width: 820px; margin: 0 auto; padding: 28px 32px 96px; }
body.task-addressbook.formcontainer .contact-header { margin-bottom: 22px; }
body.task-addressbook.formcontainer .contactfieldgroup { border-color: var(--ayu-line-soft); }
body.task-addressbook.formcontainer .form-control,
body.task-addressbook.formcontainer .custom-select { min-height: 44px; border-color: var(--ayu-line); border-radius: 9px; }
body.task-addressbook.formcontainer .formbuttons {
  position: sticky;
  z-index: 3;
  bottom: 0;
  min-height: 64px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--ayu-line);
}
body.task-addressbook.formcontainer .formbuttons button { min-height: 44px; border-radius: 9px; }

/* Native sender quick-add. Elastic emits the real add-contact command but hides
   its anchor globally; AYU exposes it as a compact, named action beside the
   sender without replacing Roundcube's command or persistence path. */
body.task-mail.action-show a.rcmaddcontact,
body.task-mail.action-preview a.rcmaddcontact {
  display: inline-grid !important;
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin-left: 8px;
  place-items: center;
  color: var(--ayu-muted);
  border: 1px solid transparent;
  border-radius: 9px;
  vertical-align: middle;
  text-decoration: none;
}
body.task-mail.action-show a.rcmaddcontact::before,
body.task-mail.action-preview a.rcmaddcontact::before {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
body.task-mail.action-show a.rcmaddcontact:hover,
body.task-mail.action-show a.rcmaddcontact:focus-visible,
body.task-mail.action-preview a.rcmaddcontact:hover,
body.task-mail.action-preview a.rcmaddcontact:focus-visible {
  color: var(--ayu-action);
  background: var(--ayu-info-bg);
  border-color: var(--ayu-focus);
}

@media (max-width: 767px) {
  body.task-mail.action-show a.rcmaddcontact,
  body.task-mail.action-preview a.rcmaddcontact {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

@media (min-width: 1025px) {
  body.task-addressbook #layout {
    display: grid !important;
    width: 100%;
    height: 100dvh;
    grid-template-columns: 260px minmax(330px, 390px) minmax(480px, 1fr);
    grid-template-rows: var(--ayu-header-h) minmax(0, 1fr);
    padding: 0 8px 8px 0;
    background: var(--ayu-shell);
    overflow: hidden;
  }
  body.task-addressbook #layout-menu { grid-column: 1 / -1; grid-row: 1; }
  body.task-addressbook #layout-sidebar { grid-column: 1; grid-row: 2; }
  body.task-addressbook #layout-list { grid-column: 2; grid-row: 2; border-radius: var(--ayu-radius-panel) 0 0 var(--ayu-radius-panel); }
  body.task-addressbook #layout-content { grid-column: 3; grid-row: 2; border-radius: 0 var(--ayu-radius-panel) var(--ayu-radius-panel) 0; }
  body.task-addressbook #layout-menu,
  body.task-addressbook #layout-sidebar,
  body.task-addressbook #layout-list,
  body.task-addressbook #layout-content {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    flex: none !important;
    justify-self: stretch;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.task-addressbook #layout {
    display: grid !important;
    width: 100%;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--ayu-header-h) minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
  }
  body.task-addressbook #layout-menu { position: static !important; grid-column: 1; grid-row: 1; width: auto !important; }
  body.task-addressbook #layout-sidebar,
  body.task-addressbook #layout-list,
  body.task-addressbook #layout-content {
    position: relative !important;
    grid-column: 1;
    grid-row: 2;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 0 !important;
  }
  body.task-addressbook #layout-sidebar:not(.selected),
  body.task-addressbook #layout-list:not(.selected),
  body.task-addressbook #layout-content:not(.selected) { display: none !important; }
  body.task-addressbook #layout-sidebar.selected,
  body.task-addressbook #layout-list.selected,
  body.task-addressbook #layout-content.selected { display: flex !important; }
}

/* Tablet/phone address-book navigation is a touch surface. Elastic's native
   footer pager and several header/search menu anchors are 35–40px by default;
   keep their native commands but raise the hit area to the product minimum. */
@media (max-width: 1024px) {
  body.task-addressbook .ayu-global-search { height: 44px; min-height: 44px; }
  body.task-addressbook #layout-sidebar > .header a.button,
  body.task-addressbook #layout-list > .header a.button,
  body.task-addressbook #layout-content > .header a.button,
  body.task-addressbook #layout-list > .searchbar a.button {
    display: inline-flex !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
  }
  body.task-addressbook #directorylist li > a {
    display: flex;
    min-height: 44px;
    align-items: center;
    line-height: 44px;
  }
  body.task-addressbook #layout-list .pagenav.menu.footer {
    min-height: 52px;
    align-items: center;
  }
  body.task-addressbook #layout-list .pagenav.menu.footer > a {
    display: inline-flex;
    flex: 0 0 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  body.task-addressbook #layout { position: relative; display: block !important; width: 100%; height: 100dvh; padding: 0; overflow: hidden; }
  body.task-addressbook #layout-menu { display: none !important; }
  body.task-addressbook #layout-sidebar,
  body.task-addressbook #layout-list,
  body.task-addressbook #layout-content { position: absolute !important; inset: 0; width: 100% !important; max-width: none !important; height: 100dvh !important; border-radius: 0 !important; }
  body.task-addressbook #layout-sidebar:not(.selected),
  body.task-addressbook #layout-list:not(.selected),
  body.task-addressbook #layout-content:not(.selected) { display: none !important; }
  body.task-addressbook #layout-sidebar.selected,
  body.task-addressbook #layout-list.selected,
  body.task-addressbook #layout-content.selected { display: flex !important; }
  body.task-addressbook #layout-sidebar > .header,
  body.task-addressbook #layout-list > .header,
  body.task-addressbook #layout-content > .header { height: 56px !important; min-height: 56px !important; }
  body.task-addressbook #layout-content > .header .toolbar {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.task-addressbook #layout-content > .header .toolbar::-webkit-scrollbar { display: none; }
  body.task-addressbook #layout-content > .header .toolbar a,
  body.task-addressbook #layout-content > .header .toolbar button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px;
    padding: 0 !important;
  }
  body.task-addressbook #layout-content > .header > .toolbar-menu-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }
  body.task-addressbook.formcontainer #bottomBar {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  body.task-addressbook #layout-content > .header .toolbar .inner { display: none !important; }
  body.task-addressbook #contacts-table tr,
  body.task-addressbook #contacts-table td.name { height: 72px; }
  body.task-addressbook.formcontainer .formcontent { padding: 20px 16px 88px; }
}

/* Company Calendar — keep the same AYU product shell as Mail and Contacts. */
body.task-calendar #layout {
  display: grid !important;
  width: 100%;
  height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--ayu-header-h) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: var(--ayu-shell);
  overflow: hidden;
}

body.task-calendar #layout-menu {
  position: static !important;
  z-index: 20;
  grid-column: 1;
  grid-row: 1;
  width: auto !important;
  min-width: 0 !important;
  height: var(--ayu-header-h) !important;
}

body.task-calendar #layout-content {
  position: relative !important;
  inset: auto !important;
  grid-column: 1;
  grid-row: 2;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0 12px 12px;
  border-radius: var(--ayu-radius-panel);
  box-shadow: inset 0 0 0 1px var(--ayu-line-soft);
}

@media (max-width: 767px) {
  body.task-calendar #layout {
    display: block !important;
    height: 100dvh;
    padding: 0;
  }

  body.task-calendar #layout-menu {
    position: fixed !important;
    z-index: 80;
    inset: 0 auto 0 0;
    display: none !important;
    width: min(88vw, 360px) !important;
    height: 100dvh !important;
    padding: 72px 20px 24px !important;
    background: var(--ayu-surface) !important;
    box-shadow: 12px 0 36px rgb(35 43 55 / 18%);
  }

  body.task-calendar #layout-menu.selected { display: flex !important; }
  body.task-calendar #layout-menu.selected > .ayu-calendar-drawer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--ayu-ink);
    background: var(--ayu-surface-soft);
    border: 0;
    border-radius: 12px;
    font-size: 28px;
  }

  body.task-calendar #layout-menu.selected .ayu-brand {
    width: auto;
    min-width: 0;
    align-self: flex-start;
  }

  body.task-calendar #layout-menu.selected #taskmenu {
    display: flex !important;
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  body.task-calendar #layout-menu.selected #taskmenu > a,
  body.task-calendar #layout-menu.selected #taskmenu .special-buttons > a {
    width: 100% !important;
    min-height: 44px;
    justify-content: flex-start;
    border-radius: 10px !important;
  }

  body.task-calendar #layout-menu.selected #taskmenu > a .inner,
  body.task-calendar #layout-menu.selected #taskmenu .special-buttons > a .inner { font-size: 16px; }
  body.task-calendar #layout-menu.selected #taskmenu .special-buttons { margin-top: auto; }
  body.task-calendar #layout-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

html[data-ayu-session-state="logout-pending"] body.task-addressbook #layout,
html[data-ayu-session-state="cached"] body.task-addressbook #layout,
html[data-ayu-session-state="revalidating"] body.task-addressbook #layout,
html[data-ayu-session-state="logout-pending"] body.task-settings #layout,
html[data-ayu-session-state="cached"] body.task-settings #layout,
html[data-ayu-session-state="revalidating"] body.task-settings #layout,
html[data-ayu-session-state="logout-pending"] body.task-calendar #layout,
html[data-ayu-session-state="cached"] body.task-calendar #layout,
html[data-ayu-session-state="revalidating"] body.task-calendar #layout {
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-ayu-session-state="logout-pending"] body.task-addressbook::after,
html[data-ayu-session-state="cached"] body.task-addressbook::after,
html[data-ayu-session-state="revalidating"] body.task-addressbook::after,
html[data-ayu-session-state="logout-pending"] body.task-settings::after,
html[data-ayu-session-state="cached"] body.task-settings::after,
html[data-ayu-session-state="revalidating"] body.task-settings::after,
html[data-ayu-session-state="logout-pending"] body.task-calendar::after,
html[data-ayu-session-state="cached"] body.task-calendar::after,
html[data-ayu-session-state="revalidating"] body.task-calendar::after {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ayu-ink);
  background: var(--ayu-shell);
  content: "Проверяем сессию…";
  font: 600 16px/1.4 Helvetica, Arial, sans-serif;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
 * AYU Mail dev.29 — coherent mail workspace
 *
 * This is the visual integration layer for the actual Elastic DOM. Earlier
 * releases proved individual behaviours; this section gives Inbox, Read,
 * Compose and Appearance one shared grid, density and interaction language.
 * AYU identity stays in the mark/name; mail actions remain neutral/blue.
 * ------------------------------------------------------------------------ */
:root {
  --ayu-v29-canvas: #f2f3f5;
  --ayu-v29-surface: #ffffff;
  --ayu-v29-hover: #f5f6f8;
  --ayu-v29-selected: #e9ebef;
  --ayu-v29-selected-soft: #f0f5fc;
  --ayu-v29-line: #e3e5e9;
  --ayu-v29-ink: #292b2f;
  --ayu-v29-muted: #767b84;
  --ayu-v29-list-w: clamp(420px, 32vw, 520px);
  --ayu-v29-row: 56px;
  --ayu-v29-split-row: 88px;
  --ayu-v29-control: 44px;
  --ayu-v29-panel-radius: 16px;
}

body.task-mail {
  color: var(--ayu-v29-ink);
  background: var(--ayu-v29-canvas) !important;
  font-size: 15px;
  line-height: 20px;
}

body.task-mail #layout-menu.ayu-productbar {
  height: 62px !important;
  gap: 16px;
  padding: 0 18px !important;
  background: var(--ayu-v29-canvas) !important;
}

body.task-mail .ayu-brand {
  width: 214px;
  min-width: 214px;
  gap: 10px;
}

body.task-mail .ayu-brand #logo {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px;
}

body.task-mail .ayu-brand-word {
  color: var(--ayu-v29-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
}

body.task-mail .ayu-productbar #taskmenu { gap: 6px; }
body.task-mail .ayu-productbar #taskmenu > a,
body.task-mail .ayu-productbar #taskmenu .special-buttons > a {
  min-height: 42px;
  padding: 0 16px !important;
  border-radius: 21px !important;
  font-size: 15px;
  font-weight: 500;
}

body.task-mail .ayu-productbar #taskmenu > a::before { color: currentColor; opacity: .86; }
body.task-mail .ayu-productbar #taskmenu > a.selected {
  background: #dfe2e7 !important;
  font-weight: 600;
}

body.task-mail .ayu-global-search {
  width: clamp(280px, 24vw, 390px);
  height: 44px;
  flex: 0 1 auto;
  padding: 0 14px;
  background: #e4e6ea;
  border-radius: 12px;
  font-size: 15px;
}

@media (min-width: 1025px) {
  body.task-mail #layout {
    grid-template-columns: 232px var(--ayu-v29-list-w) minmax(420px, 1fr);
    grid-template-rows: 62px minmax(0, 1fr);
    padding: 0 10px 10px 0;
    background: var(--ayu-v29-canvas);
  }

  html:not(.ayu-column-view) body.task-mail.action-none #layout-list,
  html:not(.ayu-column-view) body.task-mail:not(.action-none):not(.action-compose) #layout-content {
    border-radius: var(--ayu-v29-panel-radius);
  }

  html.ayu-column-view body.task-mail #layout-list {
    border-radius: var(--ayu-v29-panel-radius) 0 0 var(--ayu-v29-panel-radius);
  }

  html.ayu-column-view body.task-mail #layout-content {
    border-radius: 0 var(--ayu-v29-panel-radius) var(--ayu-v29-panel-radius) 0;
  }
}

body.task-mail #layout-sidebar {
  padding-top: 0;
  background: var(--ayu-v29-canvas) !important;
}

body.task-mail .ayu-sidebar-compose {
  width: 200px;
  height: 44px;
  margin: 0 16px 14px;
  color: var(--ayu-v29-ink);
  background: var(--ayu-v29-surface);
  border: 1px solid #d7dae0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 28, 45, .04);
  font-size: 15px;
  font-weight: 500;
}

body.task-mail .ayu-sidebar-compose:hover {
  color: var(--ayu-v29-ink);
  background: var(--ayu-v29-hover);
  border-color: #c9cdd4;
}

body.task-mail #folderlist-content { padding: 0 16px 18px; }
body.task-mail #mailboxlist.listing li { margin: 2px 0; border-radius: 10px; }
body.task-mail #mailboxlist.listing li > a {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 40px;
}

body.task-mail #mailboxlist.listing li.selected > a,
body.task-mail #mailboxlist.listing li.selected > a:hover {
  background: var(--ayu-v29-selected) !important;
  font-weight: 600;
}

body.task-mail #mailboxlist .unreadcount {
  min-width: 24px;
  height: 24px;
  margin-top: 8px;
  padding: 0 7px;
  color: var(--ayu-v29-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
}

body.task-mail #layout-list,
body.task-mail #layout-content {
  background: var(--ayu-v29-surface) !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(20, 28, 45, .03);
}

body.task-mail #layout-list > .header,
body.task-mail #layout-content > .header {
  height: 52px !important;
  min-height: 52px !important;
  gap: 4px;
  padding: 0 14px !important;
  background: var(--ayu-v29-surface) !important;
  border-bottom: 1px solid var(--ayu-v29-line) !important;
}

body.task-mail #layout-list > .header .toolbar.menu,
body.task-mail #layout-content > .header .toolbar.menu { gap: 2px; }

body.task-mail #layout-list > .header .toolbar.menu > a,
body.task-mail #layout-list > .header > a.button,
body.task-mail #layout-content > .header .toolbar.menu > a,
body.task-mail #layout-content > .header .toolbar.menu > .dropbutton > a,
body.task-mail #layout-content > .header > a.button,
body.task-mail #layout-content > .header #toolbar-menu > li > a:not(.hidden):not(.hidden-big):not(.hidden-large),
body.task-mail #layout-content > .header #toolbar-menu > li > .dropbutton > a {
  min-width: 40px;
  height: 40px !important;
  min-height: 40px;
  padding: 0 10px !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

body.task-mail #layout-list > .searchbar {
  height: 44px;
  min-height: 44px;
  margin: 10px 12px;
  background: #f0f1f3;
  border-radius: 12px;
}

body.task-mail #layout-list > .searchbar input,
body.task-mail #layout-list > .searchbar a.button {
  height: 42px;
  min-height: 42px;
  font-size: 15px;
}

body.task-mail .messagelist tbody tr,
body.task-mail .messagelist tbody td {
  height: var(--ayu-v29-row);
  max-height: var(--ayu-v29-row);
}

body.task-mail .messagelist tbody tr {
  cursor: pointer;
  outline: 0 !important;
  box-shadow: none !important;
}

body.task-mail .messagelist tbody tr > td {
  border-bottom: 1px solid var(--ayu-v29-line) !important;
  box-shadow: none !important;
}

body.task-mail .messagelist tr:hover > td { background: var(--ayu-v29-hover) !important; }
body.task-mail .messagelist tr.selected > td,
body.task-mail .messagelist tr.focused > td {
  color: var(--ayu-v29-ink) !important;
  background: var(--ayu-v29-selected-soft) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.task-mail .messagelist tr.selected > td:first-child,
body.task-mail .messagelist tr.focused > td:first-child { box-shadow: inset 3px 0 0 var(--ayu-action) !important; }

body.task-mail .messagelist tbody td.subject { padding: 0 16px; }
body.task-mail .messagelist tbody td.subject > .fromto,
body.task-mail .messagelist tbody td.subject > .subject {
  color: var(--ayu-v29-ink);
  font-size: 15px;
  line-height: 20px;
}

body.task-mail .messagelist tbody td.subject > .date,
body.task-mail .messagelist tbody td.subject > .size {
  color: var(--ayu-v29-muted);
  font-size: 13px;
  line-height: 20px;
}

body.task-mail .ayu-row-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36);
}

@media (min-width: 1025px) {
  html:not(.ayu-column-view) body.task-mail .messagelist tbody td.subject {
    grid-template-columns: 40px minmax(170px, 24%) minmax(220px, 1fr) 90px;
    column-gap: 14px;
  }

  html.ayu-column-view body.task-mail .messagelist tbody tr,
  html.ayu-column-view body.task-mail .messagelist tbody td {
    height: var(--ayu-v29-split-row);
    max-height: var(--ayu-v29-split-row);
  }

  html.ayu-column-view body.task-mail .messagelist tbody td.subject {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: 24px 24px;
    align-content: center;
    column-gap: 12px;
    padding: 10px 14px;
  }

  html.ayu-column-view body.task-mail .ayu-row-avatar {
    width: 40px;
    height: 40px;
  }

  html.ayu-column-view body.task-mail .messagelist tbody td.subject > .fromto {
    align-self: end;
    font-weight: 500;
  }

  html.ayu-column-view body.task-mail .messagelist tbody td.subject > .subject {
    align-self: start;
    color: #4b4f56;
    font-size: 14px;
  }

  html.ayu-compact-density:not(.ayu-column-view) body.task-mail { --ayu-v29-row: 44px; }
  html.ayu-column-view.ayu-compact-density body.task-mail { --ayu-v29-split-row: 72px; }
}

body.task-mail #layout-content > .content.frame-content,
body.task-mail #layout-content > .content {
  background: var(--ayu-v29-surface) !important;
}

body.task-mail #message-header {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0 36px;
}

body.task-mail #message-header > h2.subject {
  margin: 28px 0 24px;
  color: var(--ayu-v29-ink);
  font-size: 23px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -.2px;
}

body.task-mail #message-header > .header { min-height: 52px; gap: 14px; }
body.task-mail .ayu-reader-avatar,
body.task-mail #message-header .contactphoto {
  width: 44px;
  height: 44px;
}

body.task-mail #message-header .header-summary .from { font-size: 15px; font-weight: 600; }
body.task-mail #message-content {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 34px 36px 56px;
}

body.task-mail #messagebody {
  max-width: 820px;
  color: var(--ayu-v29-ink);
  font-size: 15px;
  line-height: 1.62;
}

body.task-mail #attachment-list .attachment {
  min-height: 60px;
  background: var(--ayu-v29-hover);
  border-color: var(--ayu-v29-line);
  border-radius: 12px;
}

/* Compose belongs to the same surface system as the reader, not to a stock
   Elastic overlay. Keep all native commands and fields; normalize geometry. */
@media (min-width: 1025px) {
  body.task-mail.action-compose #layout-content {
    width: min(880px, calc(100vw - 48px)) !important;
    height: min(760px, calc(100dvh - 64px)) !important;
    max-width: 880px !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 72px rgba(24, 31, 47, .24) !important;
  }
}

body.task-mail.action-compose #layout-content > .header {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 14px !important;
  border-radius: 16px 16px 0 0;
}

body.task-mail.action-compose #layout-content > .header .header-title {
  padding: 0 10px !important;
  font-size: 16px;
  font-weight: 600;
}

body.task-mail.action-compose .ayu-compose-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  font-size: 14px;
}

body.task-mail.action-compose .compose-headers { border-bottom-color: var(--ayu-v29-line); }
body.task-mail.action-compose .compose-headers .form-group {
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--ayu-v29-line);
}

body.task-mail.action-compose .compose-headers .col-form-label {
  width: 86px;
  flex: 0 0 86px;
  color: var(--ayu-v29-muted);
  font-size: 14px;
}

body.task-mail.action-compose .compose-headers .form-control,
body.task-mail.action-compose .recipient-input {
  min-height: 46px;
  padding: 10px 0;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 15px;
}

body.task-mail.action-compose #composebody { padding: 22px 24px; font-size: 15px; line-height: 1.55; }
body.task-mail.action-compose .formbuttons {
  min-height: 68px;
  flex-basis: 68px;
  padding: 12px 18px;
  border-top: 1px solid var(--ayu-v29-line);
}

body.task-mail.action-compose .formbuttons .button,
body.task-mail.action-compose .formbuttons .btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
}

/* Appearance is a product setting, so it reuses the mail sheet rather than a
   visually unrelated dashboard card. */
body.task-mail .ayu-settings-sheet { background: rgba(25, 30, 39, .44); }
body.task-mail .ayu-settings-sheet > aside,
body.task-mail .ayu-settings-sheet > main {
  min-height: min(440px, 100dvh);
  max-height: 680px;
}

body.task-mail .ayu-settings-sheet > aside {
  padding: 22px 14px;
  border-radius: 18px 0 0 0;
}

body.task-mail .ayu-settings-sheet > main {
  background: var(--ayu-v29-canvas);
  border-radius: 0 18px 0 0;
}

body.task-mail .ayu-settings-sheet > main > header { min-height: 78px; padding: 14px 30px; }
body.task-mail .ayu-settings-content { max-width: 1040px; gap: 20px; padding: 0 30px 40px; }
body.task-mail .ayu-settings-content > section {
  padding: 24px;
  border: 1px solid rgba(20, 28, 45, .03);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 28, 45, .03);
}

body.task-mail .ayu-setting-row { min-height: 70px; }

@media (min-width: 768px) and (max-width: 1180px) {
  body.task-mail .ayu-global-search { width: clamp(220px, 28vw, 300px); }
  body.task-mail .ayu-brand-word { display: none; }
  body.task-mail .ayu-brand { width: 52px; min-width: 52px; }
  body.task-mail .ayu-productbar #taskmenu > a { padding: 0 12px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.task-mail #layout-list,
  body.task-mail #layout-content { border-radius: 0 !important; }
  body.task-mail #layout-list > .header,
  body.task-mail #layout-content > .header { height: 56px !important; min-height: 56px !important; }
  body.task-mail .messagelist tbody tr,
  body.task-mail .messagelist tbody td { height: 72px; max-height: 72px; }
  body.task-mail .messagelist tbody td.subject { padding-inline: 18px; }
  body.task-mail #message-header,
  body.task-mail #message-content { width: min(100%, 820px); }
}

@media (max-width: 767px) {
  :root { --ayu-v29-row: 78px; --ayu-v29-split-row: 78px; }
  body.task-mail #layout-list,
  body.task-mail #layout-content { background: #fff !important; }
  body.task-mail #layout-list > .header,
  body.task-mail #layout-content > .header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 8px !important;
  }
  body.task-mail #layout-list > .searchbar {
    height: 46px;
    min-height: 46px;
    margin: 8px 10px 10px;
  }
  body.task-mail #layout-list > .searchbar input,
  body.task-mail #layout-list > .searchbar a.button { height: 44px; min-height: 44px; }
  body.task-mail .messagelist tbody tr,
  body.task-mail .messagelist tbody td { height: var(--ayu-v29-row); max-height: var(--ayu-v29-row); }
  body.task-mail .messagelist tbody td.subject {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: 24px 24px;
    align-content: center;
    column-gap: 10px;
    padding: 9px 12px;
  }
  body.task-mail .ayu-row-avatar { width: 40px; height: 40px; }
  body.task-mail .messagelist tbody td.subject > .fromto { align-self: end; font-weight: 600; }
  body.task-mail .messagelist tbody td.subject > .subject {
    align-self: start;
    color: #4b4f56;
    font-size: 14px;
  }
  html.ayu-compact-density body.task-mail { --ayu-v29-row: 68px; }
  body.task-mail #message-header { padding: 0 18px; }
  body.task-mail #message-header > h2.subject { margin: 20px 0 18px; font-size: 20px; line-height: 27px; }
  body.task-mail #message-content { padding: 26px 18px 96px; }
  body.task-mail #messagebody { font-size: 15px; line-height: 1.58; }
  body.task-mail.action-compose #layout-content > .header { border-radius: 0; }
  body.task-mail.action-compose .compose-headers .form-group { padding: 0 14px; }
  body.task-mail.action-compose .compose-headers .col-form-label { width: 70px; flex-basis: 70px; }
  body.task-mail.action-compose #composebody { padding: 18px 16px; }
  body.task-mail.action-compose .formbuttons { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  body.task-mail .ayu-settings-sheet > main > header { padding: 10px 14px; }
  body.task-mail .ayu-settings-content { padding: 0 12px calc(28px + env(safe-area-inset-bottom)); }
  body.task-mail .ayu-settings-content > section { padding: 18px; border-radius: 14px; }
}

/* ------------------------------------------------------------------------
 * AYU Mail dev.35 — owner-visible Inbox correction
 *
 * The column preference controls the reading state, not the empty state. A
 * desktop Inbox with no open message must use the whole work surface instead
 * of reserving half of it for Roundcube's blank reader illustration. When a
 * message is opened, the existing split list + reader contract is preserved.
 * ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
  html.ayu-column-view body.task-mail.action-none #layout-list {
    display: flex !important;
    grid-column: 2 / 4;
    border-radius: var(--ayu-v29-panel-radius);
  }

  html.ayu-column-view body.task-mail.action-none #layout-content {
    display: none !important;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody tr,
  html.ayu-column-view body.task-mail.action-none .messagelist tbody td {
    height: var(--ayu-v29-row);
    max-height: var(--ayu-v29-row);
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject {
    display: grid;
    grid-template-columns: 40px minmax(170px, 24%) minmax(220px, 1fr) 90px;
    grid-template-rows: 1fr;
    align-items: center;
    align-content: stretch;
    column-gap: 14px;
    padding: 0 16px;
  }

  html.ayu-column-view body.task-mail.action-none .ayu-row-avatar {
    width: 38px;
    height: 38px;
    grid-column: 1;
    grid-row: 1;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .fromto {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-weight: 500;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .subject {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    color: var(--ayu-v29-ink);
    font-size: 15px;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .date,
  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .size {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    font-size: 13px;
  }

  html.ayu-column-view.ayu-compact-density body.task-mail.action-none {
    --ayu-v29-row: 44px;
  }

  /* Mail.ru's desktop product bar is text-first. Elastic's icon font made the
     Russian labels look cramped and even clipped Calendar/Settings. */
  body.task-mail .ayu-productbar #taskmenu > a:not(.logout)::before {
    display: none !important;
    content: none !important;
  }

  body.task-mail .ayu-productbar #taskmenu > a {
    width: auto !important;
    max-width: none !important;
    gap: 0;
  }
}

/* ------------------------------------------------------------------------
 * AYU Mail dev.38 — Inbox as a product, not a stretched Roundcube table
 *
 * The previous empty-reader correction made useful room, but retained the
 * wide administrative table, two competing searches and Elastic's red
 * whole-row flagged state. This final layer keeps the native DOM/commands
 * while giving the Inbox one clear search, a balanced message grid and
 * explicit selected / unread / flagged semantics.
 * ------------------------------------------------------------------------ */
:root {
  --ayu-v38-canvas: #f2f3f5;
  --ayu-v38-surface: #ffffff;
  --ayu-v38-ink: #25272a;
  --ayu-v38-muted: #646b75;
  --ayu-v38-line: #e3e5e9;
  --ayu-v38-hover: #f6f7f9;
  --ayu-v38-selected: #eef4ff;
  --ayu-v38-link: #006bd6;
  --ayu-v38-flag: #a35f00;
  --ayu-v38-negative: #d83b32;
  --ayu-v38-row: 48px;
  --ayu-v38-split-row: 88px;
  --ayu-v29-row: var(--ayu-v38-row);
  --ayu-v29-split-row: var(--ayu-v38-split-row);
  --ayu-v29-selected-soft: var(--ayu-v38-selected);
}

body.task-mail,
body.task-mail button,
body.task-mail input,
body.task-mail optgroup,
body.task-mail select,
body.task-mail textarea,
body.task-mail .popover,
body.task-mail .ui-widget {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

body.task-mail {
  color: var(--ayu-v38-ink);
  background: var(--ayu-v38-canvas) !important;
  font-size: 14px;
}

/* One search is enough. Keep the native Roundcube search because it owns
   search options, reset and server-side filtering; remove only the injected
   decorative shortcut from the product bar. */
body.task-mail .ayu-global-search {
  display: none !important;
}

body.task-mail #layout-menu.ayu-productbar {
  gap: 12px;
  border-bottom: 1px solid rgba(37, 39, 42, .04) !important;
}

body.task-mail .ayu-productbar #taskmenu > a,
body.task-mail .ayu-productbar #taskmenu .special-buttons > a {
  min-height: 40px;
  padding-inline: 14px !important;
  border-radius: 12px !important;
  font-size: 14px;
  font-weight: 500;
}

body.task-mail .ayu-productbar #taskmenu > a.selected {
  color: var(--ayu-v38-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(20, 28, 45, .08);
}

/* Logout must remain easy to find, but it is not the primary mail action. */
body.task-mail .ayu-productbar #taskmenu .special-buttons > a.logout {
  color: var(--ayu-v38-muted) !important;
  background: transparent !important;
}

body.task-mail .ayu-productbar #taskmenu .special-buttons > a.logout:hover,
body.task-mail .ayu-productbar #taskmenu .special-buttons > a.logout:focus-visible {
  color: var(--ayu-v38-negative) !important;
  background: #fff0ee !important;
}

body.task-mail #layout-list,
body.task-mail #layout-content {
  box-shadow: 0 1px 2px rgba(20, 28, 45, .06);
}

/* Folder context and bulk actions start at the left. Refresh and overflow are
   utilities and remain at the right. This removes the owner-visible empty
   toolbar desert without changing command anchors. */
body.task-mail #layout-list > .header {
  height: 48px !important;
  min-height: 48px !important;
  padding-inline: 16px !important;
}

body.task-mail #layout-list > .header > .header-title {
  max-width: 240px;
  flex: 0 1 auto;
  margin-right: 8px !important;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.15px;
}

body.task-mail #layout-list > .header > .header-title:not(:empty) {
  display: inline-flex !important;
  align-items: center;
}

body.task-mail #layout-list > .header > .header-title:empty {
  display: none !important;
}

body.task-mail #layout-list > .header .toolbar.menu {
  flex: 0 0 auto;
  margin-left: 0;
}

body.task-mail #layout-list > .header > a.button.refresh,
body.task-mail #layout-list > .header > a.toolbar-button.refresh {
  margin-left: auto;
}

body.task-mail #layout-list > .header .toolbar.menu > a,
body.task-mail #layout-list > .header > a.button {
  height: 38px !important;
  min-height: 38px;
  max-width: none !important;
  color: var(--ayu-v38-muted) !important;
  border-radius: 9px;
}

body.task-mail #layout-list > .header .toolbar.menu > a:hover,
body.task-mail #layout-list > .header > a.button:hover {
  color: var(--ayu-v38-ink) !important;
  background: var(--ayu-v38-hover) !important;
}

body.task-mail #layout-list > .searchbar {
  width: min(420px, calc(100% - 32px));
  height: 42px;
  min-height: 42px;
  margin: 12px 16px 14px;
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: 11px;
}

body.task-mail #layout-list > .searchbar:focus-within {
  background: #fff;
  border-color: var(--ayu-action);
  box-shadow: 0 0 0 3px rgba(8, 119, 255, .12);
}

body.task-mail #layout-list > .searchbar input,
body.task-mail #layout-list > .searchbar a.button {
  height: 40px;
  min-height: 40px;
  font-size: 14px;
}

body.task-mail .messagelist {
  color: var(--ayu-v38-ink);
  background: var(--ayu-v38-surface);
}

body.task-mail .messagelist tbody tr,
body.task-mail .messagelist tbody td {
  height: var(--ayu-v29-row);
  max-height: var(--ayu-v29-row);
}

body.task-mail .messagelist tbody tr > td {
  color: var(--ayu-v38-ink) !important;
  background: var(--ayu-v38-surface) !important;
  border-bottom-color: var(--ayu-v38-line) !important;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

body.task-mail .messagelist tbody tr:hover > td {
  background: var(--ayu-v38-hover) !important;
}

body.task-mail .messagelist tbody tr.selected > td,
body.task-mail .messagelist tbody tr.focused > td,
body.task-mail .messagelist tbody tr.selected:hover > td,
body.task-mail .messagelist tbody tr.focused:hover > td {
  color: var(--ayu-v38-ink) !important;
  background: var(--ayu-v38-selected) !important;
}

body.task-mail .messagelist tbody tr.selected > td:first-child,
body.task-mail .messagelist tbody tr.focused > td:first-child {
  box-shadow: inset 3px 0 0 var(--ayu-action) !important;
}

body.task-mail .messagelist tbody tr:focus-visible > td {
  box-shadow: inset 0 0 0 2px var(--ayu-action) !important;
}

/* Elastic paints every cell in a flagged row red. In mail UX that reads as
   an error. Keep normal content ink and reserve amber for the flag itself. */
body.task-mail .messagelist tbody tr.flagged:not(.deleted) > td,
body.task-mail .messagelist tbody tr.flagged:not(.deleted) td.subject span.fromto,
body.task-mail .messagelist tbody tr.flagged:not(.deleted) td.subject span.subject,
body.task-mail .messagelist tbody tr.flagged:not(.deleted) td.subject span.subject a {
  color: var(--ayu-v38-ink) !important;
}

body.task-mail .messagelist tbody tr.flagged:not(.deleted) td.subject span.date,
body.task-mail .messagelist tbody tr.flagged:not(.deleted) td.subject span.size {
  color: var(--ayu-v38-muted) !important;
}

body.task-mail .messagelist span.flagged,
body.task-mail .messagelist span.flagged::before,
body.task-mail .messagelist tr.flaggedroot:not(:hover) span.unflagged::before {
  color: var(--ayu-v38-flag) !important;
}

/* Elastic hides the flag control on touch layouts. AYU keeps a dedicated
   native flag slot, so retain the state indicator instead of a blank slot. */
html.touch body.task-mail .messagelist tbody td.flags > .flag,
html.layout-phone body.task-mail .messagelist tbody td.flags > .flag {
  visibility: visible;
}

body.task-mail .messagelist tbody td.subject > .fromto,
body.task-mail .messagelist tbody td.subject > .subject,
body.task-mail .messagelist tbody td.subject > .subject a {
  color: var(--ayu-v38-ink) !important;
  font-size: 14px;
  line-height: 20px;
}

body.task-mail .messagelist tbody td.subject > .fromto {
  position: relative;
  font-weight: 500;
}

body.task-mail .messagelist tbody tr.unread td.subject > .fromto,
body.task-mail .messagelist tbody tr.unread td.subject > .subject,
body.task-mail .messagelist tbody tr.unread td.subject > .subject a {
  font-weight: 600;
}

body.task-mail .messagelist tbody tr.unread td.subject > .fromto::before {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 6px;
  height: 6px;
  background: var(--ayu-action);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

body.task-mail .messagelist tbody td.subject > .date,
body.task-mail .messagelist tbody td.subject > .size {
  color: var(--ayu-v38-muted) !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

/* Elastic puts the native status icon inside the widescreen subject wrapper.
   Hide only its classless placeholder; unread/thread-unread/deleted/replied/
   forwarded remain visible information. */
body.task-mail .messagelist td.subject span.msgicon.status:not(.unread):not(.unreadchildren):not(.deleted):not(.replied):not(.forwarded) {
  display: none !important;
}

body.task-mail .messagelist td.subject span.msgicon.status.unread,
body.task-mail .messagelist td.subject span.msgicon.status.unreadchildren {
  color: var(--ayu-action) !important;
}

body.task-mail .messagelist td.subject span.msgicon.status.deleted {
  color: var(--ayu-v38-muted) !important;
}

body.task-mail .messagelist td.subject span.msgicon.status.replied,
body.task-mail .messagelist td.subject span.msgicon.status.forwarded {
  color: var(--ayu-v38-muted) !important;
}

/* Elastic's 2rem status box is taller than AYU's 40px compact row once table
   cell padding is included. Keep the native glyph, but bound its line box so
   density preferences remain real rather than cosmetic. */
body.task-mail .messagelist td.subject span.msgicon.status::before,
body.task-mail .messagelist td.subject span.msgicon.status::after {
  height: 18px;
  line-height: 18px;
}

body.task-mail .ayu-row-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  box-shadow: none;
}

@media (min-width: 1025px) {
  /* Mail.ru keeps the only mail search in the product bar. Keep the native
     Roundcube control (and therefore real server filtering/options), but
     place that control in the same desktop band instead of spending a
     second full-width row above the messages. */
  body.task-mail #layout-list > .searchbar {
    position: fixed;
    z-index: 104;
    top: 10px;
    right: 120px;
    width: clamp(260px, 26vw, 420px);
    margin: 0;
  }

  html.ayu-column-view body.task-mail.action-none #layout-list {
    grid-column: 2 / 4;
  }

  html.ayu-column-view body.task-mail.action-none #layout-content {
    display: none !important;
  }

  /* The split list is a compact 420–520px surface. Keep the folder name
     readable and collapse only controls that already carry native icons;
     their accessible labels stay in the DOM. */
  html.ayu-column-view body.task-mail.action-show #layout-list > .header > .header-title {
    min-width: 84px;
    flex: 0 0 84px;
  }

  html.ayu-column-view body.task-mail.action-show #layout-list > .header .toolbar.menu > a,
  html.ayu-column-view body.task-mail.action-show #layout-list > .header > a.toolbar-menu-button {
    width: 40px !important;
    min-width: 40px;
    max-width: 40px !important;
    flex: 0 0 40px;
    padding-inline: 0 !important;
    overflow: hidden;
  }

  html.ayu-column-view body.task-mail.action-show #layout-list > .header .toolbar.menu > a .inner,
  html.ayu-column-view body.task-mail.action-show #layout-list > .header > a.toolbar-menu-button .inner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject,
  html:not(.ayu-column-view) body.task-mail.action-none .messagelist tbody td.subject {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(180px, 240px) minmax(0, 1fr) 96px;
    grid-template-rows: 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 0 20px;
  }

  html.ayu-column-view body.task-mail.action-none .ayu-row-avatar,
  html:not(.ayu-column-view) body.task-mail.action-none .ayu-row-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .fromto,
  html:not(.ayu-column-view) body.task-mail.action-none .messagelist tbody td.subject > .fromto {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .subject,
  html:not(.ayu-column-view) body.task-mail.action-none .messagelist tbody td.subject > .subject {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .date,
  html.ayu-column-view body.task-mail.action-none .messagelist tbody td.subject > .size,
  html:not(.ayu-column-view) body.task-mail.action-none .messagelist tbody td.subject > .date,
  html:not(.ayu-column-view) body.task-mail.action-none .messagelist tbody td.subject > .size {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  html.ayu-column-view.ayu-compact-density body.task-mail.action-none,
  html:not(.ayu-column-view).ayu-compact-density body.task-mail.action-none {
    --ayu-v38-row: 40px;
    --ayu-v29-row: var(--ayu-v38-row);
  }

  /* Opening a message keeps the proven split reader geometry. */
  html.ayu-column-view body.task-mail.action-show .messagelist tbody tr,
  html.ayu-column-view body.task-mail.action-show .messagelist tbody td {
    height: var(--ayu-v29-split-row);
    max-height: var(--ayu-v29-split-row);
  }
}

body.task-mail .messagelist tbody td.flags {
  width: 44px;
  padding-inline: 8px;
}

/* Widescreen Elastic stacks flag and attachment slots. Its 1.7em defaults
   add up to more than 48px and make compact density impossible, so keep both
   native command slots while bounding each line inside AYU row tokens. */
body.task-mail .messagelist tbody td.flags > span {
  height: 18px;
  line-height: 18px;
}

body.task-mail #layout-list > .footer,
body.task-mail #layout-list .pagenav.menu.footer {
  min-height: 44px;
  color: var(--ayu-v38-muted);
  background: var(--ayu-v38-surface) !important;
  border-top: 1px solid var(--ayu-v38-line);
  box-shadow: none;
}

body.task-mail #layout-list .pagenav a {
  min-width: 36px;
  min-height: 36px;
  border-radius: 9px;
}

/* Keep native attachment metadata readable as two values. Roundcube may
   render the filename and size as adjacent spans with no text node between
   them, which otherwise produces strings such as "file.pdf1,8 МБ". */
body.task-mail #attachment-list .attachment-name + .attachment-size {
  margin-inline-start: 6px;
}

body.task-mail #attachment-list .attachment-name {
  color: var(--ayu-v38-link) !important;
}

body.task-mail #attachment-list .attachment-size {
  color: var(--ayu-v38-muted) !important;
}

body.task-mail #attachment-list a,
body.task-mail #messagebody a {
  color: var(--ayu-v38-link);
}

@media (max-width: 1024px) {
  /* Elastic positions the native flags cell over the row in touch layouts.
     Reserve that 44px command slot plus the normal 14px gutter so dates and
     sizes stay completely readable instead of rendering underneath it. */
  body.task-mail .messagelist tbody td.subject {
    padding-right: 58px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --ayu-v38-row: 72px;
  }

  html.ayu-compact-density {
    --ayu-v38-row: 64px;
  }

  /* Tablet has enough horizontal room for explicit product navigation.
     Labels are faster to understand than three unrelated glyphs and preserve
     the same native Roundcube task anchors. */
  body.task-mail .ayu-productbar #taskmenu > a,
  body.task-mail .ayu-productbar #taskmenu .special-buttons > a.logout {
    width: auto !important;
    min-width: 44px;
    max-width: none !important;
    gap: 7px;
    padding-inline: 12px !important;
  }

  body.task-mail .ayu-productbar #taskmenu > a .inner,
  body.task-mail .ayu-productbar #taskmenu .special-buttons > a.logout .inner {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  body.task-mail #layout-list > .searchbar {
    width: calc(100% - 28px);
    max-width: none;
    margin-inline: 14px;
  }

  body.task-mail #layout-content > .header > .back-list-button {
    width: 44px !important;
    min-width: 44px;
    max-width: 44px !important;
  }

  body.task-mail #layout-list > .header .toolbar.menu > a,
  body.task-mail #layout-list > .header > a.button {
    min-width: 44px;
    min-height: 44px;
  }

  body.task-mail #layout-content > .header > .back-list-button {
    min-height: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --ayu-v38-row: 78px;
  }

  html.ayu-compact-density {
    --ayu-v38-row: 68px;
  }

  body.task-mail #layout-list > .header {
    height: 56px !important;
    min-height: 56px !important;
    padding-inline: 8px !important;
  }

  body.task-mail #layout-list > .header > .header-title {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    overflow: hidden;
    margin-right: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.task-mail #layout-list > .header .toolbar.menu {
    margin-left: auto;
  }

  /* The four-column phone header has three icon-only navigation controls.
     Preserve their text for assistive technology, but do not let the visible
     labels escape the 44px grid tracks and collide with the folder title. */
  body.task-mail #layout-list > .header > .task-menu-button,
  body.task-mail #layout-list > .header > .back-sidebar-button,
  body.task-mail #layout-list > .header > .toolbar-menu-button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    overflow: hidden;
    justify-content: center;
  }

  body.task-mail #layout-list > .header > .task-menu-button .inner,
  body.task-mail #layout-list > .header > .back-sidebar-button .inner,
  body.task-mail #layout-list > .header > .toolbar-menu-button .inner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.task-mail #layout-content > .header > .back-list-button {
    height: 44px !important;
    min-height: 44px !important;
  }

  body.task-mail #layout-list > .searchbar {
    width: calc(100% - 20px);
    max-width: none;
    height: 46px;
    min-height: 46px;
    margin: 8px 10px 10px;
  }

  body.task-mail #layout-list > .searchbar input,
  body.task-mail #layout-list > .searchbar a.button,
  body.task-mail #layout-list > .header .toolbar.menu > a,
  body.task-mail #layout-list > .header > a.button {
    min-width: 44px;
    min-height: 44px;
  }

  body.task-mail .messagelist tbody tr.unread td.subject > .fromto::before {
    left: -8px;
  }
}