/* Leshem Shamayim webmail theme — Roundcube Elastic */
:root {
  --lsm-navy: #172554;
  --lsm-blue: #2563eb;
  --lsm-blue-dark: #1d4ed8;
  --lsm-purple: #6842db;
  --lsm-purple-soft: #eee9ff;
  --lsm-bg: #f4f6fb;
  --lsm-surface: #ffffff;
  --lsm-text: #222222;
  --lsm-muted: #64748b;
  --lsm-border: #dbe2ee;
  --lsm-focus: #93c5fd;
  --lsm-danger: #b91c1c;
  --lsm-radius: 14px;
  --lsm-shadow: 0 10px 30px rgba(23, 37, 84, .10);
}

html,
body {
  direction: rtl;
  color: var(--lsm-text) !important;
  background: var(--lsm-bg) !important;
  font-family: Arial, "Noto Sans Hebrew", "Segoe UI", sans-serif !important;
}

body,
button,
input,
select,
textarea {
  font-family: inherit !important;
}

/* Keep addresses and technical identifiers readable inside an RTL interface. */
.email,
.adr,
.message-partheaders .header-value,
input[name="_user"],
input[name="_to"],
input[name="_cc"],
input[name="_bcc"] {
  unicode-bidi: plaintext;
}

a { color: var(--lsm-blue-dark); }
a:hover { color: var(--lsm-purple); }

input,
select,
textarea,
.input-group-text {
  border-color: var(--lsm-border) !important;
  border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  border-color: var(--lsm-blue) !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .7) !important;
  outline: 0 !important;
}

.btn-primary,
.button.mainaction,
button.mainaction,
input.mainaction {
  color: #fff !important;
  background: linear-gradient(135deg, var(--lsm-blue-dark), var(--lsm-purple)) !important;
  border-color: transparent !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .2);
  font-weight: 700 !important;
}

.btn-primary:hover,
.button.mainaction:hover,
button.mainaction:hover,
input.mainaction:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
}

.btn-secondary,
.button:not(.mainaction) {
  border-color: var(--lsm-border) !important;
  border-radius: 10px !important;
}

/* Login */
.task-login {
  background:
    radial-gradient(circle at 85% 15%, rgba(104, 66, 219, .13), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(37, 99, 235, .12), transparent 32%),
    linear-gradient(145deg, #f6f3ff, #eef6ff) !important;
}

.task-login #layout-content {
  background: transparent !important;
}

.task-login #login-form {
  width: min(92vw, 460px) !important;
  padding: 38px 42px 30px !important;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(219, 226, 238, .9);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(23, 37, 84, .16);
}

.task-login #logo {
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 auto 26px !important;
}

.task-login .form-control {
  height: 48px;
  background: #fff !important;
  text-align: right;
}

.task-login .input-group {
  margin-bottom: 14px;
}

.task-login .input-group-prepend,
.task-login .input-group-text {
  color: var(--lsm-navy) !important;
  background: #eef2ff !important;
}

.task-login #login-footer {
  color: var(--lsm-muted) !important;
  margin-top: 20px;
}

.task-login .lsm-password-reset {
  display: block;
  margin: 14px auto 0;
  text-align: center;
  color: var(--lsm-blue-dark) !important;
  font-weight: 700;
  text-decoration: none;
}

/* Main application shell */
#layout {
  background: var(--lsm-bg) !important;
}

#layout-menu {
  color: #fff !important;
  background: linear-gradient(180deg, var(--lsm-navy), #243b7a) !important;
  box-shadow: -4px 0 20px rgba(15, 23, 42, .14);
}

#layout-menu .popover-header,
#layout-menu .special-buttons,
#layout-menu .menu.toolbar {
  background: transparent !important;
}

#layout-menu a,
#layout-menu button {
  color: rgba(255, 255, 255, .88) !important;
  border-radius: 11px !important;
}

#layout-menu a:hover,
#layout-menu button:hover,
#layout-menu .selected a,
#layout-menu a.selected {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--lsm-surface) !important;
  border-color: var(--lsm-border) !important;
}

#layout-sidebar,
#layout-list {
  box-shadow: 0 1px 0 rgba(23, 37, 84, .04);
}

.header,
.listbox .header,
.content .header,
.box-header {
  color: var(--lsm-navy) !important;
  background: #fff !important;
  border-color: var(--lsm-border) !important;
  font-weight: 700;
}

.header .toolbar a,
.header .toolbar button,
.toolbar a,
.toolbar button {
  border-radius: 9px !important;
}

.searchbar,
.searchform {
  direction: rtl;
  background: #f8fafc !important;
  border-color: var(--lsm-border) !important;
  border-radius: 12px !important;
}

/* Folders, contacts and message lists */
.listing li,
.listing tr td,
.messagelist tr td {
  border-color: #edf1f7 !important;
}

.listing li > a,
.listing tbody td,
.messagelist tbody td {
  color: var(--lsm-text) !important;
}

.listing li:hover,
.listing tr:hover td,
.messagelist tr:hover td {
  background: #f5f7ff !important;
}

.listing li.selected,
.listing li.selected > a,
.listing tr.selected td,
.messagelist tr.selected td {
  color: var(--lsm-navy) !important;
  background: var(--lsm-purple-soft) !important;
}

.listing li.selected {
  border-radius: 10px;
}

.folderlist li a {
  text-align: right;
}

.folderlist li.selected > a {
  box-shadow: inset -4px 0 0 var(--lsm-purple);
}

.messagelist td.subject span.subject,
.messagelist td.fromto span {
  unicode-bidi: plaintext;
  text-align: right;
}

.messagelist tr.unread td {
  color: var(--lsm-navy) !important;
  font-weight: 700;
}

.quota-widget .bar .value {
  background: linear-gradient(90deg, var(--lsm-blue), var(--lsm-purple)) !important;
}

/* Reading and composing messages */
.message-partheaders,
.message-header,
.message-part {
  border-color: var(--lsm-border) !important;
}

.message-partheaders {
  background: #f8fafc !important;
  border-radius: 13px;
  margin: 12px;
}

.message-partheaders .header-title,
.message-partheaders .header-name {
  color: var(--lsm-muted) !important;
  text-align: right;
}

.message-partheaders .subject {
  color: var(--lsm-navy) !important;
  font-weight: 700;
}

#compose-content,
.compose-content {
  background: #fff !important;
}

#compose-headers {
  background: #f8fafc !important;
  border: 1px solid var(--lsm-border) !important;
  border-radius: 14px;
  margin: 12px;
  padding: 12px;
}

#compose-headers label,
.compose-headers label {
  color: var(--lsm-navy) !important;
  text-align: right !important;
  font-weight: 700;
}

#composebody,
.mce-content-body {
  direction: rtl;
  text-align: right;
}

.tox-tinymce,
.mce-tinymce {
  border-color: var(--lsm-border) !important;
  border-radius: 12px !important;
}

.attachmentslist li,
.attachment-list li {
  background: #f8fafc !important;
  border-color: var(--lsm-border) !important;
  border-radius: 10px;
}

/* Dialogs, menus and notifications */
.popover,
.dropdown-menu,
.ui-dialog,
.menu.pagenav {
  border-color: var(--lsm-border) !important;
  border-radius: var(--lsm-radius) !important;
  box-shadow: var(--lsm-shadow) !important;
}

.popover,
.dropdown-menu,
.ui-dialog,
.ui-dialog-content {
  direction: rtl;
  text-align: right;
}

.ui-dialog-titlebar {
  color: var(--lsm-navy) !important;
  background: #f8fafc !important;
  border-color: var(--lsm-border) !important;
}

#messagestack .notice,
#messagestack .confirmation,
#messagestack .alert {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--lsm-shadow);
}

#messagestack .confirmation { background: #dcfce7 !important; color: #166534 !important; }
#messagestack .warning { background: #fef3c7 !important; color: #92400e !important; }
#messagestack .error,
#messagestack .alert { background: #fee2e2 !important; color: var(--lsm-danger) !important; }

/* RTL corrections for Elastic's flex layouts. */
.toolbar,
.menu,
.pagenav,
.header,
.footer,
.form-group,
.input-group {
  direction: rtl;
}

.input-group > .form-control:not(:last-child) {
  border-radius: 0 10px 10px 0 !important;
}

.input-group > .input-group-append:last-child > .btn,
.input-group > .input-group-prepend:first-child > .input-group-text {
  border-radius: 10px 0 0 10px !important;
}

@media screen and (max-width: 768px) {
  .task-login #login-form {
    padding: 28px 22px 22px !important;
    border-radius: 20px;
  }

  #layout-menu {
    box-shadow: none;
  }

  #layout-sidebar,
  #layout-list,
  #layout-content {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #compose-headers,
  .message-partheaders {
    margin: 8px;
    border-radius: 11px;
  }

  .toolbar a,
  .toolbar button {
    min-width: 42px;
    min-height: 42px;
  }
}

/* Dropdown containment: top-toolbar sizing must never leak into its menus. */
.toolbar .popupmenu,
.toolbar .popover,
.toolbar .dropdown-menu,
.toolbar .menu:not(.toolbar) {
  box-sizing: border-box !important;
  min-width: 230px !important;
  max-width: 330px !important;
  padding: 6px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16) !important;
  overflow-x: hidden !important;
}

.toolbar .popupmenu ul,
.toolbar .popover ul,
.toolbar .dropdown-menu ul,
.toolbar .menu:not(.toolbar) ul {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toolbar .popupmenu li,
.toolbar .popover li,
.toolbar .dropdown-menu li,
.toolbar .menu:not(.toolbar) li {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 1px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: initial !important;
}

.toolbar .popupmenu li > a,
.toolbar .popover li > a,
.toolbar .dropdown-menu li > a,
.toolbar .menu:not(.toolbar) li > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  color: #334155 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  transform: none !important;
}

.toolbar .popupmenu li > a:hover,
.toolbar .popover li > a:hover,
.toolbar .dropdown-menu li > a:hover,
.toolbar .menu:not(.toolbar) li > a:hover {
  color: #312e81 !important;
  background: #eef1f8 !important;
  box-shadow: none !important;
  transform: none !important;
}

.toolbar .popupmenu li > a::before,
.toolbar .popover li > a::before,
.toolbar .dropdown-menu li > a::before,
.toolbar .menu:not(.toolbar) li > a::before {
  display: inline-flex !important;
  flex: 0 0 30px !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: 30px !important;
  height: 26px !important;
  margin: 0 0 0 9px !important;
  font-size: 1.18rem !important;
  line-height: 26px !important;
}

.toolbar .popupmenu li > a .inner,
.toolbar .popover li > a .inner,
.toolbar .dropdown-menu li > a .inner,
.toolbar .menu:not(.toolbar) li > a .inner {
  display: block !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.toolbar .popupmenu li.separator,
.toolbar .popover li.separator,
.toolbar .dropdown-menu li.separator,
.toolbar .menu:not(.toolbar) li.separator {
  height: 1px !important;
  margin: 5px 8px !important;
  background: #e8ecf2 !important;
}

.toolbar .popupmenu li.disabled,
.toolbar .popover li.disabled,
.toolbar .dropdown-menu li.disabled,
.toolbar .menu:not(.toolbar) li.disabled {
  opacity: .46 !important;
}

@media screen and (max-width: 768px) {
  .toolbar .popupmenu,
  .toolbar .popover,
  .toolbar .dropdown-menu,
  .toolbar .menu:not(.toolbar) {
    min-width: 220px !important;
    max-width: min(92vw, 320px) !important;
  }
}

/* Gmail-inspired, while retaining the Leshem Shamayim identity */
:root {
  --mail-canvas: #f6f8fc;
  --mail-hover: #edf2fa;
  --mail-selected: #e9e7ff;
  --mail-search: #eaf1fb;
}

html,
body,
#layout {
  background: var(--mail-canvas) !important;
  font-family: "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif !important;
}

/* Light application rail, with the brand colors used only as accents. */
#layout-menu {
  color: var(--lsm-navy) !important;
  background: #f8faff !important;
  border-left: 1px solid #e3e8f2 !important;
  box-shadow: none !important;
}

#layout-menu .popover-header,
#layout-menu .special-buttons,
#layout-menu .menu.toolbar {
  background: #f8faff !important;
}

#layout-menu a,
#layout-menu button {
  color: #334155 !important;
  margin: 3px 7px !important;
  border-radius: 0 999px 999px 0 !important;
}

#layout-menu a:hover,
#layout-menu button:hover {
  color: var(--lsm-accent-strong) !important;
  background: #edf2ff !important;
}

#layout-menu .selected a,
#layout-menu a.selected {
  color: #312e81 !important;
  background: #e5e2ff !important;
  font-weight: 750 !important;
}

/* Gmail-like compose pill, branded in Leshem Shamayim purple. */
#layout-menu a.compose,
#layout-menu .compose a,
.toolbar a.compose {
  min-width: 132px;
  min-height: 52px;
  padding: 0 20px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #7156d9) !important;
  border: 0 !important;
  border-radius: 17px !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .22) !important;
  font-weight: 750 !important;
}

#layout-menu a.compose:hover,
#layout-menu .compose a:hover,
.toolbar a.compose:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #4338ca, #6546cc) !important;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .28) !important;
}

/* Main panes sit on a soft canvas like Gmail, with a single white inbox card. */
#layout-sidebar,
#layout-list,
#layout-content {
  background: #fff !important;
  border-color: #e5eaf2 !important;
}

#layout-list,
#layout-content {
  box-shadow: 0 1px 4px rgba(30, 41, 59, .055) !important;
}

#layout-list > .header,
#layout-content > .header,
#layout-sidebar > .header,
.listbox > .header {
  background: #fff !important;
  border-bottom-color: #edf0f5 !important;
  box-shadow: none !important;
}

/* Gmail toolbar: quiet circular icons, purple only when selected. */
.toolbar a.button,
.toolbar button,
.toolbar .button,
.header a.button,
.header button,
.pagenav a,
.pagenav button {
  min-width: 40px;
  min-height: 40px;
  margin: 2px !important;
  color: #475569 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.toolbar a.button:hover,
.toolbar button:hover,
.toolbar .button:hover,
.header a.button:hover,
.header button:hover,
.pagenav a:hover,
.pagenav button:hover {
  color: #312e81 !important;
  background: #e8ecf5 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none;
}

/* Do not turn ordinary mail actions into large gradient buttons. */
.toolbar a.reply,
.toolbar a.send,
.toolbar button.send,
.toolbar .button.save {
  color: #475569 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.toolbar a.reply:hover,
.toolbar a.send:hover,
.toolbar button.send:hover,
.toolbar .button.save:hover {
  color: #312e81 !important;
  background: #e8ecf5 !important;
}

/* Wide, calm Gmail-style search field. */
.searchbar,
.searchform {
  min-height: 48px;
  background: var(--mail-search) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.searchbar:focus-within,
.searchform:focus-within {
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(30, 41, 59, .16) !important;
}

.searchbar input,
.searchform input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Compact inbox rows, clean separators and Gmail-like selection. */
.messagelist {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  padding: 0 !important;
}

.messagelist tbody tr td {
  height: 54px;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  background: #fff;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid #eceff4 !important;
  border-radius: 0 !important;
}

.messagelist tbody tr:hover td {
  background: #f3f6fb !important;
  border-bottom-color: #e3e8f0 !important;
  box-shadow: inset 0 1px 0 #e9edf3, inset 0 -1px 0 #e9edf3;
}

.messagelist tbody tr.selected td {
  background: var(--mail-selected) !important;
  border-bottom-color: #d9d4ff !important;
}

.messagelist tbody tr.unread td {
  background: #fff !important;
  font-weight: 750;
}

.messagelist tbody tr:not(.unread) td {
  background: #f9fafc !important;
  color: #64748b !important;
}

/* Folder rows are pill-shaped, but stay subtle. */
.folderlist li,
.folderlist li > a {
  border-radius: 0 999px 999px 0 !important;
}

.folderlist li > a {
  min-height: 40px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.folderlist li.selected > a {
  color: #312e81 !important;
  background: #e5e2ff !important;
  box-shadow: inset -4px 0 0 #5b4bdb !important;
}

/* Menus float like Gmail popovers, with softer rows. */
.popover,
.dropdown-menu,
.popupmenu,
.menu.pagenav {
  padding: 8px !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18) !important;
}

.popover .menu li,
.dropdown-menu a,
.popupmenu a,
.menu a {
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 7px !important;
}

.popover .menu li:hover,
.dropdown-menu a:hover,
.popupmenu a:hover,
.menu a:hover {
  color: #1e293b !important;
  background: #edf1f6 !important;
}

/* Keep the branded reading and compose cards — this is where we differ from Gmail. */
#compose-headers,
.message-partheaders {
  border: 1px solid #e3e7f0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fff, #faf9ff) !important;
  box-shadow: 0 6px 20px rgba(67, 56, 202, .055) !important;
}

.pagenav {
  background: #fff !important;
  box-shadow: 0 -1px 0 #edf0f5 !important;
}

@media screen and (min-width: 769px) {
  #layout-list {
    border-radius: 16px 0 0 16px !important;
    overflow: hidden;
  }
}

/* Final layout polish: keep permanent sidebars out of popover styling. */
#layout-menu.popover,
#layout-sidebar.popover {
  padding: 0 !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* The 78px application rail is intentionally icon-only. */
#layout-menu {
  width: 78px !important;
  min-width: 78px !important;
  overflow: visible !important;
}

#layout-menu .menu.toolbar,
#layout-menu .special-buttons {
  padding: 6px 0 !important;
}

#layout-menu .menu.toolbar li,
#layout-menu .special-buttons li {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#layout-menu .menu.toolbar a,
#layout-menu .special-buttons a,
#layout-menu a.compose,
#layout-menu .compose a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 6px auto !important;
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

#layout-menu .menu.toolbar a .inner,
#layout-menu .special-buttons a .inner,
#layout-menu a.compose .inner,
#layout-menu .compose a .inner {
  display: none !important;
}

#layout-menu .menu.toolbar a::before,
#layout-menu .special-buttons a::before,
#layout-menu a.compose::before,
#layout-menu .compose a::before {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
}

#layout-menu a.compose,
#layout-menu .compose a {
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #7156d9) !important;
  box-shadow: 0 6px 15px rgba(79, 70, 229, .22) !important;
}

#layout-menu .selected a,
#layout-menu a.selected {
  color: #4338ca !important;
  background: #e5e2ff !important;
  box-shadow: inset -3px 0 0 #5b4bdb !important;
}

/* Reset folder/navigation rows that inherited dropdown-menu dimensions. */
#layout-sidebar .menu,
#layout-sidebar .listing,
#layout-sidebar .folderlist {
  padding: 8px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#layout-sidebar .menu li,
#layout-sidebar .listing li,
#layout-sidebar .folderlist li {
  min-height: 0 !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  box-shadow: none !important;
}

#layout-sidebar .menu li > a,
#layout-sidebar .listing li > a,
#layout-sidebar .folderlist li > a {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#layout-sidebar .menu li > a:hover,
#layout-sidebar .listing li > a:hover,
#layout-sidebar .folderlist li > a:hover {
  color: #312e81 !important;
  background: #eef1f8 !important;
  transform: none !important;
}

#layout-sidebar .menu li.selected > a,
#layout-sidebar .listing li.selected > a,
#layout-sidebar .folderlist li.selected > a {
  color: #312e81 !important;
  background: #e5e2ff !important;
  box-shadow: inset -4px 0 0 #5b4bdb !important;
}

/* Give icon + caption toolbars enough room; never let selected actions become blocks. */
#layout > div > .header,
#layout-list > .header,
#layout-content > .header,
#layout-sidebar > .header,
.listbox > .header {
  min-height: 72px !important;
  height: 72px !important;
  overflow: visible !important;
}

.toolbar,
.toolbar ul {
  min-height: 68px !important;
  overflow: visible !important;
}

.toolbar li {
  height: 68px !important;
  vertical-align: top !important;
}

.toolbar a.button,
.toolbar > a,
.toolbar li > a,
.toolbar button,
.toolbar .button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  max-width: 82px !important;
  width: auto !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 3px 2px !important;
  padding: 5px 8px !important;
  border-radius: 12px !important;
  line-height: 1.15 !important;
  overflow: visible !important;
}

.toolbar a::before,
.toolbar button::before,
.toolbar .button::before {
  float: none !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 27px !important;
  margin: 0 0 3px !important;
  line-height: 27px !important;
}

.toolbar a .inner,
.toolbar button .inner,
.toolbar .button .inner {
  display: block !important;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .77rem !important;
  line-height: 1.1 !important;
}

.toolbar a.selected,
.toolbar .button.selected,
.toolbar a.active,
.toolbar .button.active,
#messagetoolbar.toolbar a.selected,
#messagetoolbar.toolbar a.active {
  color: #4338ca !important;
  background: #e8e5ff !important;
  border: 0 !important;
  box-shadow: inset 0 -3px 0 #6d5ce7 !important;
}

.toolbar .dropbutton {
  height: 62px !important;
  margin: 3px 2px !important;
  border-radius: 12px !important;
  overflow: visible !important;
}

.toolbar .dropbutton > a:not(.dropdown) {
  margin: 0 !important;
}

.toolbar .dropbutton > a.dropdown {
  min-width: 22px !important;
  width: 22px !important;
  height: 62px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

.toolbar .dropbutton > a.dropdown::before {
  height: 62px !important;
  margin: 0 !important;
  line-height: 62px !important;
}

/* Keep search and list/footer bars from colliding with adjacent controls. */
.searchbar,
.searchform {
  box-sizing: border-box !important;
  margin: 8px 14px !important;
}

.pagenav {
  min-height: 52px !important;
  height: 52px !important;
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
  .toolbar a .inner,
  .toolbar button .inner,
  .toolbar .button .inner {
    display: none !important;
  }

  .toolbar a.button,
  .toolbar > a,
  .toolbar li > a,
  .toolbar button,
  .toolbar .button {
    min-width: 46px !important;
    width: 46px !important;
    padding: 5px !important;
  }
}

@media screen and (max-width: 768px) {
  #layout-menu { width: auto !important; min-width: 0 !important; }
  #layout > div > .header,
  #layout-list > .header,
  #layout-content > .header,
  #layout-sidebar > .header,
  .listbox > .header { min-height: 58px !important; height: 58px !important; }
  .toolbar, .toolbar ul, .toolbar li { min-height: 58px !important; height: 58px !important; }
  .toolbar a .inner, .toolbar button .inner, .toolbar .button .inner { display: none !important; }
  .toolbar a.button, .toolbar > a, .toolbar li > a, .toolbar button, .toolbar .button {
    min-width: 44px !important; width: 44px !important; height: 52px !important; min-height: 52px !important;
  }
}

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

/* Modern 2026 interaction layer */
:root {
  --lsm-accent: #5b4bdb;
  --lsm-accent-strong: #4338ca;
  --lsm-accent-soft: #f0edff;
  --lsm-surface-soft: #f8f9fd;
  --lsm-shadow-soft: 0 8px 24px rgba(23, 37, 84, .08);
}

/* Give every action a light, tactile button surface. */
.toolbar a.button,
.toolbar button,
.toolbar .button,
.header a.button,
.header button,
.pagenav a,
.pagenav button {
  min-width: 42px;
  min-height: 42px;
  margin: 3px 2px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease !important;
}

.toolbar a.button:hover,
.toolbar button:hover,
.toolbar .button:hover,
.header a.button:hover,
.header button:hover,
.pagenav a:hover,
.pagenav button:hover {
  color: var(--lsm-accent-strong) !important;
  background: var(--lsm-accent-soft) !important;
  border-color: #ddd6fe !important;
  box-shadow: 0 5px 14px rgba(67, 56, 202, .11) !important;
  transform: translateY(-1px);
}

.toolbar a.button:active,
.toolbar button:active,
.toolbar .button:active {
  transform: translateY(0) scale(.97);
  box-shadow: none !important;
}

.toolbar a.button.disabled,
.toolbar button:disabled,
.toolbar .button.disabled {
  opacity: .38 !important;
  filter: grayscale(.25);
  box-shadow: none !important;
  transform: none !important;
}

/* The primary actions should be instantly recognizable. */
.toolbar a.compose,
.toolbar a.send,
.toolbar button.send,
.toolbar .button.save,
.toolbar a.reply {
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border-color: transparent !important;
  box-shadow: 0 7px 18px rgba(79, 70, 229, .22) !important;
}

.toolbar a.compose:hover,
.toolbar a.send:hover,
.toolbar button.send:hover,
.toolbar .button.save:hover,
.toolbar a.reply:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
}

/* A calmer top command bar with clearer grouping. */
#layout-list > .header,
#layout-content > .header,
#layout-sidebar > .header,
.listbox > .header {
  min-height: 58px;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid #e9edf5 !important;
  box-shadow: 0 3px 12px rgba(23, 37, 84, .035);
}

.toolbar {
  gap: 3px;
  align-items: center;
}

.toolbar .dropbutton,
.toolbar .dropbutton > a,
.toolbar .dropbutton > button {
  border-radius: 13px !important;
}

/* Search becomes a distinct lightweight control. */
.searchbar,
.searchform {
  min-height: 44px;
  margin: 7px 10px !important;
  padding-inline: 8px !important;
  background: #f5f7fb !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.searchbar:focus-within,
.searchform:focus-within {
  background: #fff !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .11) !important;
}

/* Folder navigation: spacious rows and a soft selected state. */
.folderlist {
  padding: 10px 8px !important;
}

.folderlist li {
  margin: 3px 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.folderlist li > a {
  min-height: 46px;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.folderlist li > a:hover {
  color: var(--lsm-accent-strong) !important;
  background: #f6f4ff !important;
  transform: translateX(-2px);
}

.folderlist li.selected > a {
  color: var(--lsm-accent-strong) !important;
  background: linear-gradient(90deg, #f3f0ff, #ebe7ff) !important;
  box-shadow: inset -4px 0 0 var(--lsm-accent) !important;
  font-weight: 700;
}

/* Message rows behave like clean selectable cards. */
.messagelist {
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
  padding: 4px 8px !important;
}

.messagelist tbody tr td {
  height: 62px;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  background: #fff;
  border-top: 1px solid #edf0f6 !important;
  border-bottom: 1px solid #edf0f6 !important;
  transition: background-color .16s ease, border-color .16s ease;
}

.messagelist tbody tr td:first-child {
  border-radius: 0 12px 12px 0;
}

.messagelist tbody tr td:last-child {
  border-radius: 12px 0 0 12px;
}

.messagelist tbody tr:hover td {
  background: #f8f7ff !important;
  border-color: #e2ddff !important;
}

.messagelist tbody tr.selected td {
  background: linear-gradient(90deg, #f1edff, #e9e5ff) !important;
  border-color: #d9d1ff !important;
}

.messagelist tbody tr.unread td.subject span.subject {
  color: #172554 !important;
  font-weight: 800;
}

/* Dropdowns and contextual action menus. */
.popover,
.dropdown-menu,
.popupmenu,
.menu.pagenav {
  padding: 7px !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(23, 37, 84, .16) !important;
  backdrop-filter: blur(14px);
}

.popover .menu li,
.dropdown-menu a,
.popupmenu a,
.menu a {
  min-height: 42px;
  margin: 2px 0 !important;
  padding: 10px 13px !important;
  border-radius: 11px !important;
  transition: background-color .15s ease, color .15s ease;
}

.popover .menu li:hover,
.dropdown-menu a:hover,
.popupmenu a:hover,
.menu a:hover {
  color: var(--lsm-accent-strong) !important;
  background: var(--lsm-accent-soft) !important;
}

/* Compose and reading surfaces feel like modern documents. */
#compose-headers,
.message-partheaders {
  padding: 16px !important;
  background: linear-gradient(180deg, #fbfcff, #f7f8fc) !important;
  border-color: #e4e9f2 !important;
  border-radius: 17px !important;
  box-shadow: var(--lsm-shadow-soft);
}

#composebody {
  min-height: 320px;
  padding: 18px !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .035);
}

/* Refined page controls at the bottom. */
.pagenav {
  padding: 5px 9px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-top: 1px solid #e8ecf3 !important;
}

.pagenav .pagejumper,
.pagenav input {
  min-width: 62px;
  border-radius: 999px !important;
  background: #eef2ff !important;
  text-align: center;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .toolbar a.button,
  .toolbar button,
  .toolbar .button { margin: 2px 1px !important; border-radius: 11px !important; }
  .messagelist { padding: 2px 4px !important; }
  .messagelist tbody tr td { height: 56px; }
  .folderlist { padding: 6px 4px !important; }
}

/* Final hard reset for floating toolbar menus.
 * Roundcube may move these menus outside their original toolbar when opened.
 * Keep toolbar-card sizing off menu row wrappers in both DOM positions. */
.popupmenu li,
.dropdown-menu li,
.popover:not(#layout-menu):not(#layout-sidebar) .menu li,
.toolbar .menu:not(.toolbar) li {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.popupmenu li::before,
.popupmenu li::after,
.dropdown-menu li::before,
.dropdown-menu li::after,
.popover:not(#layout-menu):not(#layout-sidebar) .menu li::before,
.popover:not(#layout-menu):not(#layout-sidebar) .menu li::after,
.toolbar .menu:not(.toolbar) li::before,
.toolbar .menu:not(.toolbar) li::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.popupmenu li > a,
.dropdown-menu li > a,
.popover:not(#layout-menu):not(#layout-sidebar) .menu li > a,
.toolbar .menu:not(.toolbar) li > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.popupmenu li > a:hover,
.dropdown-menu li > a:hover,
.popover:not(#layout-menu):not(#layout-sidebar) .menu li > a:hover,
.toolbar .menu:not(.toolbar) li > a:hover {
  color: #312e81 !important;
  background: #f1efff !important;
}

.popupmenu .dropbutton,
.dropdown-menu .dropbutton,
.popover:not(#layout-menu):not(#layout-sidebar) .menu .dropbutton,
.toolbar .menu:not(.toolbar) .dropbutton {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.popupmenu li.separator,
.dropdown-menu li.separator,
.popover:not(#layout-menu):not(#layout-sidebar) .menu li.separator,
.toolbar .menu:not(.toolbar) li.separator {
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 5px 8px !important;
  background: #e8ebf2 !important;
}

/* Full-width inbox: when the message list is the active view, remove the
 * unused preview column and let the list consume the complete work area.
 * The standalone message template has no active #layout-list, so opened
 * messages continue to use the full #layout-content view. */
body.task-mail #layout-list.selected {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  border-inline-end: 0 !important;
}

body.task-mail #layout-list.selected ~ #layout-content:not(.selected) {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

/* Rounded message cards. Paint the row itself instead of every table cell,
 * otherwise the individual cell backgrounds flatten the outer corners. */
.messagelist {
  border-collapse: separate !important;
  border-spacing: 0 9px !important;
  padding: 6px 14px 10px !important;
  background: transparent !important;
}

.messagelist tbody tr {
  background: #f8fafc !important;
  border-radius: 17px !important;
  box-shadow: 0 2px 8px rgba(30, 41, 59, .065),
              0 0 0 1px rgba(226, 232, 240, .92) !important;
  overflow: hidden !important;
  transition: background-color .16s ease, box-shadow .16s ease,
              transform .16s ease !important;
}

.messagelist tbody tr.unread {
  background: #fff !important;
}

.messagelist tbody tr:hover {
  background: #f5f3ff !important;
  box-shadow: 0 6px 16px rgba(76, 65, 140, .11),
              0 0 0 1px #ddd7ff !important;
  transform: translateY(-1px);
}

.messagelist tbody tr.selected {
  background: linear-gradient(90deg, #eeeaff, #e3ddff) !important;
  box-shadow: 0 5px 15px rgba(91, 70, 190, .15),
              0 0 0 1px #cbc2ff !important;
}

.messagelist tbody tr > td,
.messagelist tbody tr.unread > td,
.messagelist tbody tr:not(.unread) > td,
.messagelist tbody tr:hover > td,
.messagelist tbody tr.selected > td {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.messagelist tbody tr > td:first-child {
  border-start-start-radius: 17px !important;
  border-end-start-radius: 17px !important;
  overflow: hidden !important;
}

.messagelist tbody tr > td:last-child {
  border-start-end-radius: 17px !important;
  border-end-end-radius: 17px !important;
  overflow: hidden !important;
}

/* Clear message metadata hierarchy: sender + sent date on the first line,
 * followed by the subject on its own line. */
.messagelist tbody td.subject {
  align-content: center !important;
  align-items: center !important;
  column-gap: 22px !important;
  row-gap: 2px !important;
  padding: 10px 16px !important;
  direction: rtl !important;
}

.messagelist tbody td.subject span.fromto {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 180px !important;
  padding: 0 !important;
  color: #475569 !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
  text-align: right !important;
}

.messagelist tbody td.subject span.date {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-inline-start: auto !important;
  color: #64748b !important;
  font-size: .88rem !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
}

.messagelist tbody td.subject span.subject {
  order: 10 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  color: #172554 !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  text-align: right !important;
}

.messagelist tbody td.subject span.fromto::before,
.messagelist tbody td.subject span.date::before,
.messagelist tbody td.subject span.subject::before {
  color: #312e81 !important;
  font-weight: 800 !important;
}

.messagelist tbody td.subject span.fromto::before {
  content: "מאת: " !important;
}

.messagelist tbody td.subject span.date::before {
  content: "נשלח: " !important;
}

.messagelist tbody td.subject span.subject::before {
  content: "נושא: " !important;
}

.messagelist tbody tr.unread td.subject span.fromto,
.messagelist tbody tr.unread td.subject span.subject {
  color: #0f172a !important;
  font-weight: 800 !important;
}

@media screen and (max-width: 700px) {
  .messagelist tbody td.subject {
    column-gap: 10px !important;
    padding: 8px 10px !important;
  }

  .messagelist tbody td.subject span.fromto {
    min-width: 110px !important;
  }

  .messagelist tbody td.subject span.date {
    font-size: .8rem !important;
  }
}

/* --------------------------------------------------------------------------
 * Modern compose screen
 * Scoped to action-compose so inbox, reading view and settings stay unchanged.
 * -------------------------------------------------------------------------- */
body.task-mail.action-compose {
  --compose-border: #e1e7f0;
  --compose-soft: #f7f8fc;
  --compose-accent: #4f46e5;
  --compose-accent-dark: #3730a3;
}

body.task-mail.action-compose #layout-content {
  background: #f4f6fb !important;
}

body.task-mail.action-compose #layout-content > .header {
  min-height: 64px !important;
  padding: 7px 18px !important;
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid #e6eaf1 !important;
  box-shadow: 0 4px 18px rgba(23, 37, 84, .05) !important;
}

body.task-mail.action-compose #layout-content > .header .header-title {
  color: #172554 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

body.task-mail.action-compose #messagetoolbar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body.task-mail.action-compose #messagetoolbar > a,
body.task-mail.action-compose #messagetoolbar > .dropbutton,
body.task-mail.action-compose #messagetoolbar > .dropbutton > a {
  border-radius: 12px !important;
}

body.task-mail.action-compose #messagetoolbar > a:not(.disabled) {
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid #e4e9f1 !important;
}

body.task-mail.action-compose #messagetoolbar > a:not(.disabled):hover,
body.task-mail.action-compose #messagetoolbar > a:not(.disabled):focus-visible {
  color: var(--compose-accent-dark) !important;
  background: #efedff !important;
  border-color: #d8d2ff !important;
}

body.task-mail.action-compose #compose-content {
  box-sizing: border-box !important;
  padding: 22px 24px 28px !important;
  background:
    radial-gradient(circle at 7% 6%, rgba(99, 102, 241, .06), transparent 28%),
    #f4f6fb !important;
}

body.task-mail.action-compose #compose-content > form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

body.task-mail.action-compose #compose-headers {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 9px 20px !important;
  background: #fff !important;
  border: 1px solid var(--compose-border) !important;
  border-radius: 19px !important;
  box-shadow: 0 8px 26px rgba(23, 37, 84, .07) !important;
}

body.task-mail.action-compose #compose-headers .form-group {
  align-items: center !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #edf0f5 !important;
}

body.task-mail.action-compose #compose-headers .form-group:last-child {
  border-bottom: 0 !important;
}

body.task-mail.action-compose #compose-headers label {
  box-sizing: border-box !important;
  flex: 0 0 88px !important;
  width: 88px !important;
  max-width: 88px !important;
  padding: 0 4px 0 14px !important;
  color: #475569 !important;
  font-size: .9rem !important;
  font-weight: 750 !important;
  text-align: right !important;
}

body.task-mail.action-compose #compose-headers .form-group > .col-10 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

body.task-mail.action-compose #compose-headers .input-group {
  align-items: center !important;
  width: 100% !important;
  min-height: 43px !important;
  background: #f8fafc !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.task-mail.action-compose #compose-headers .input-group:focus-within {
  background: #fff !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .10) !important;
}

body.task-mail.action-compose #compose-headers input,
body.task-mail.action-compose #compose-headers textarea,
body.task-mail.action-compose #compose-headers .form-control,
body.task-mail.action-compose #compose-headers .recipient-input {
  min-height: 41px !important;
  padding: 8px 12px !important;
  color: #1f2937 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-align: right !important;
}

body.task-mail.action-compose #compose_subject input,
body.task-mail.action-compose #compose-subject {
  min-height: 46px !important;
  padding: 8px 13px !important;
  background: #f8fafc !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: #172554 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

body.task-mail.action-compose #compose_subject input:focus,
body.task-mail.action-compose #compose-subject:focus {
  background: #fff !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .10) !important;
}

body.task-mail.action-compose #compose-headers .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 2px !important;
  padding: 0 !important;
  color: #526078 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
}

body.task-mail.action-compose #compose-headers .input-group-text:hover,
body.task-mail.action-compose #compose-headers .input-group-text:focus-visible {
  color: var(--compose-accent-dark) !important;
  background: #ebe9ff !important;
  box-shadow: none !important;
}

body.task-mail.action-compose #composebodycontainer {
  flex: 1 1 auto !important;
  min-height: 360px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--compose-border) !important;
  border-radius: 19px !important;
  box-shadow: 0 10px 30px rgba(23, 37, 84, .075) !important;
  overflow: hidden !important;
}

body.task-mail.action-compose #composebody {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 390px !important;
  padding: 22px 24px !important;
  color: #1f2937 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  direction: rtl !important;
  text-align: right !important;
  resize: vertical !important;
}

body.task-mail.action-compose #composebody:focus {
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .22) !important;
}

body.task-mail.action-compose #composebodycontainer .tox-tinymce,
body.task-mail.action-compose #composebodycontainer .mce-tinymce {
  min-height: 390px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.task-mail.action-compose #composebodycontainer .tox-editor-header,
body.task-mail.action-compose #composebodycontainer .mce-toolbar-grp {
  background: #f8fafc !important;
  border-bottom: 1px solid #e8edf4 !important;
  box-shadow: none !important;
}

body.task-mail.action-compose #composebodycontainer .tox-toolbar__primary,
body.task-mail.action-compose #composebodycontainer .tox-toolbar-overlord {
  background: #f8fafc !important;
}

body.task-mail.action-compose #compose-content .formbuttons {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

body.task-mail.action-compose #compose-content .formbuttons .send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #6d28d9) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 9px 22px rgba(79, 70, 229, .24) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

body.task-mail.action-compose #compose-content .formbuttons .send:hover,
body.task-mail.action-compose #compose-content .formbuttons .send:focus-visible {
  background: linear-gradient(135deg, #4338ca, #5b21b6) !important;
  box-shadow: 0 11px 26px rgba(79, 70, 229, .30) !important;
  transform: translateY(-1px) !important;
}

body.task-mail.action-compose #compose-content .formbuttons .extwin {
  min-width: 44px !important;
  min-height: 44px !important;
  color: #526078 !important;
  background: #fff !important;
  border: 1px solid var(--compose-border) !important;
  border-radius: 12px !important;
}

body.task-mail.action-compose #layout-sidebar {
  background: #f8f9fc !important;
  border-left: 1px solid #e3e8f0 !important;
}

body.task-mail.action-compose #layout-sidebar > .header {
  min-height: 58px !important;
  background: #fff !important;
}

body.task-mail.action-compose #layout-sidebar .scroller {
  padding: 14px !important;
}

body.task-mail.action-compose #compose-attachments,
body.task-mail.action-compose #compose-options {
  margin-bottom: 14px !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid var(--compose-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 18px rgba(23, 37, 84, .055) !important;
}

body.task-mail.action-compose #compose-attachments .attach {
  width: 100% !important;
  min-height: 44px !important;
  color: #3730a3 !important;
  background: #f0edff !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
}

body.task-mail.action-compose #compose-options .form-group {
  align-items: center !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #edf0f5 !important;
}

body.task-mail.action-compose #compose-options .form-group:last-child {
  border-bottom: 0 !important;
}

body.task-mail.action-compose #compose-options label {
  color: #475569 !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
}

body.task-mail.action-compose #compose-options select {
  min-height: 40px !important;
  background-color: #f8fafc !important;
  border-color: #e1e7f0 !important;
  border-radius: 11px !important;
}

body.task-mail.action-compose #composestatusbar {
  color: #64748b !important;
  font-size: .8rem !important;
}

@media screen and (max-width: 768px) {
  body.task-mail.action-compose #compose-content {
    padding: 10px 9px 18px !important;
  }

  body.task-mail.action-compose #compose-headers {
    padding: 6px 11px !important;
    border-radius: 15px !important;
  }

  body.task-mail.action-compose #compose-headers .form-group {
    min-height: 50px !important;
  }

  body.task-mail.action-compose #compose-headers label {
    flex-basis: 62px !important;
    width: 62px !important;
    max-width: 62px !important;
    padding-left: 7px !important;
    font-size: .82rem !important;
  }

  body.task-mail.action-compose #composebodycontainer {
    min-height: 330px !important;
    border-radius: 15px !important;
  }

  body.task-mail.action-compose #composebody {
    min-height: 340px !important;
    padding: 17px 16px !important;
  }

  body.task-mail.action-compose #compose-content .formbuttons {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    margin: 10px -2px -8px !important;
    padding: 10px 2px 8px !important;
    background: linear-gradient(180deg, rgba(244,246,251,0), #f4f6fb 26%) !important;
  }

  body.task-mail.action-compose #compose-content .formbuttons .send {
    min-width: 118px !important;
  }
}

/* Permanent actions on every message card.  The stock Roundcube hover menu
 * is a single floating element, so it is hidden and replaced by a dedicated
 * action group inserted into each row by custom.js. */
.listing-hover-menu {
  display: none !important;
}

.messagelist tbody tr > .lsm-row-actions {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  left: 18px !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  width: 92px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid #e1e5ed !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 11px rgba(30, 41, 59, .1) !important;
  transform: translateY(-50%) !important;
}

.lsm-row-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  color: #334155 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.lsm-row-action::before {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-family: Icons !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.lsm-row-action.flag::before,
.lsm-row-action.unflag::before {
  content: "\f024" !important;
}

.lsm-row-action.delete::before {
  content: "\f2ed" !important;
  font-weight: 400 !important;
}

.lsm-row-action.undo::before {
  content: "\f0e2" !important;
}

.lsm-row-action.unflag {
  color: #d97706 !important;
}

.lsm-row-action:hover,
.lsm-row-action:focus-visible {
  color: #4338ca !important;
  background: #eeeaff !important;
  outline: 0 !important;
}

.lsm-row-action.delete:hover,
.lsm-row-action.delete:focus-visible {
  color: #dc2626 !important;
  background: #fee2e2 !important;
}

@media screen and (max-width: 700px) {
  .messagelist tbody tr > .lsm-row-actions {
    left: 8px !important;
    width: 88px !important;
  }
}

/* Single-layer card rendering for table rows.
 * Chromium does not clip a <tr> background to border-radius, which created a
 * square rectangle over the rounded shadow. Paint the cells instead. */
.messagelist tbody tr,
.messagelist tbody tr.unread,
.messagelist tbody tr:hover,
.messagelist tbody tr.selected {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 5px rgba(30, 41, 59, .075));
  overflow: visible !important;
}

.messagelist tbody tr > td,
.messagelist tbody tr:not(.unread) > td {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.messagelist tbody tr.unread > td {
  background: #fff !important;
}

.messagelist tbody tr:hover > td {
  background: #f5f3ff !important;
  border-color: #ddd7ff !important;
}

.messagelist tbody tr.selected > td {
  background: #e9e5ff !important;
  border-color: #c9c0ff !important;
}

.messagelist tbody tr > td:first-child {
  border-radius: 0 17px 17px 0 !important;
  border-right: 1px solid #e2e8f0 !important;
}

.messagelist tbody tr > td:last-child {
  border-radius: 17px 0 0 17px !important;
  border-left: 1px solid #e2e8f0 !important;
}

.messagelist tbody tr:hover > td:first-child,
.messagelist tbody tr.selected > td:first-child {
  border-right-color: inherit !important;
}

.messagelist tbody tr:hover > td:last-child,
.messagelist tbody tr.selected > td:last-child {
  border-left-color: inherit !important;
}

/* Unified message card box.
 * The subject cell is flex-based while Roundcube's auxiliary cells are table
 * cells. Turning the complete row into a flex box gives every cell one height
 * and lets one border-radius clip both physical edges correctly. */
.messagelist tbody {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

.messagelist tbody tr,
.messagelist tbody tr.unread,
.messagelist tbody tr:hover,
.messagelist tbody tr.selected {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 86px !important;
  margin: 0 0 9px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 17px !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 7px rgba(30, 41, 59, .075) !important;
  filter: none !important;
  overflow: hidden !important;
  transform: none !important;
}

.messagelist tbody tr.unread {
  background: #fff !important;
}

.messagelist tbody tr:hover {
  background: #f5f3ff !important;
  border-color: #d8d1ff !important;
  box-shadow: 0 5px 14px rgba(76, 65, 140, .11) !important;
}

.messagelist tbody tr.selected {
  background: #e9e5ff !important;
  border-color: #c5bbff !important;
  box-shadow: 0 5px 14px rgba(91, 70, 190, .13) !important;
}

.messagelist tbody tr > td,
.messagelist tbody tr.unread > td,
.messagelist tbody tr:not(.unread) > td,
.messagelist tbody tr:hover > td,
.messagelist tbody tr.selected > td {
  align-self: stretch !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 84px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.messagelist tbody tr > td.subject {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

.messagelist tbody tr > td:first-child,
.messagelist tbody tr > td:last-child {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Uniform inbox actions: every visible command reserves the same card-sized
 * footprint. Disabled commands keep their footprint but use a muted style. */
#messagelist-header {
  align-items: center !important;
  gap: 5px !important;
}

#messagelist-header > .toolbar.menu {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 78px !important;
  min-height: 78px !important;
}

#messagelist-header > .toolbar.menu > a,
#messagelist-header > a.button.refresh {
  display: flex !important;
  flex: 0 0 82px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin: 3px 0 !important;
  padding: 7px 5px 6px !important;
  color: #4338ca !important;
  background: #f1efff !important;
  border: 1px solid #e3deff !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 0 #6855df, 0 7px 16px rgba(79, 70, 229, .1) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
}

#messagelist-header > .toolbar.menu > a::before,
#messagelist-header > a.button.refresh::before {
  display: block !important;
  flex: 0 0 31px !important;
  width: 31px !important;
  height: 31px !important;
  margin: 0 auto 3px !important;
  font-size: 1.75rem !important;
  line-height: 31px !important;
  text-align: center !important;
}

#messagelist-header > .toolbar.menu > a .inner,
#messagelist-header > a.button.refresh .inner {
  display: block !important;
  width: 100% !important;
  height: 21px !important;
  margin: 0 !important;
  font-size: .93rem !important;
  line-height: 21px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#messagelist-header > .toolbar.menu > a:not(.disabled):hover,
#messagelist-header > a.button.refresh:not(.disabled):hover {
  color: #312e81 !important;
  background: #e8e3ff !important;
  border-color: #cec4ff !important;
  box-shadow: 0 4px 0 #5744ca, 0 9px 18px rgba(79, 70, 229, .16) !important;
  transform: translateY(-1px) !important;
}

#messagelist-header > .toolbar.menu > a.disabled,
#messagelist-header > a.button.refresh.disabled {
  color: #9298a1 !important;
  background: #f7f8fa !important;
  border-color: #eceff3 !important;
  box-shadow: 0 2px 0 #d9dee6 !important;
  opacity: .62 !important;
  transform: none !important;
}

/* Compact correction: Roundcube can wrap toolbar links, so target the named
 * commands as well as direct children and give every command one light size. */
#messagelist-header .toolbar.menu a.select,
#messagelist-header .toolbar.menu a.threads,
#messagelist-header .toolbar.menu a.options,
#messagelist-header > a.button.refresh {
  display: flex !important;
  flex: 0 0 66px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 4px 2px !important;
  padding: 6px 4px 5px !important;
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  border-radius: 13px !important;
  box-shadow: 0 2px 7px rgba(67, 56, 202, .11) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
}

#messagelist-header .toolbar.menu a.select::before,
#messagelist-header .toolbar.menu a.threads::before,
#messagelist-header .toolbar.menu a.options::before,
#messagelist-header > a.button.refresh::before {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 2px !important;
  font-size: 1.55rem !important;
  line-height: 28px !important;
}

#messagelist-header .toolbar.menu a.select .inner,
#messagelist-header .toolbar.menu a.threads .inner,
#messagelist-header .toolbar.menu a.options .inner,
#messagelist-header > a.button.refresh .inner {
  display: block !important;
  width: 100% !important;
  height: 19px !important;
  font-size: .84rem !important;
  line-height: 19px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#messagelist-header .toolbar.menu a.select:not(.disabled):hover,
#messagelist-header .toolbar.menu a.threads:not(.disabled):hover,
#messagelist-header .toolbar.menu a.options:not(.disabled):hover,
#messagelist-header > a.button.refresh:not(.disabled):hover {
  color: #312e81 !important;
  background: #ebe7ff !important;
  border-color: #cec5ff !important;
  box-shadow: 0 4px 11px rgba(67, 56, 202, .15) !important;
  transform: translateY(-1px) !important;
}

#messagelist-header .toolbar.menu a.select.disabled,
#messagelist-header .toolbar.menu a.threads.disabled,
#messagelist-header .toolbar.menu a.options.disabled,
#messagelist-header > a.button.refresh.disabled {
  color: #969ba3 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: .72 !important;
  transform: none !important;
}

/* Remove the second layer created by Roundcube's dropbutton wrapper. */
#messagelist-header .toolbar.menu .dropbutton {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 66px !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 4px 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

#messagelist-header .toolbar.menu .dropbutton > a.select,
#messagelist-header .toolbar.menu .dropbutton > a.threads,
#messagelist-header .toolbar.menu .dropbutton > a.options {
  flex: 0 0 66px !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
}

#messagelist-header .toolbar.menu .dropbutton > a.dropdown {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

#messagelist-header .toolbar.menu a.select::after,
#messagelist-header .toolbar.menu a.threads::after,
#messagelist-header .toolbar.menu a.options::after,
#messagelist-header > a.button.refresh::after,
#messagelist-header .toolbar.menu .dropbutton::before,
#messagelist-header .toolbar.menu .dropbutton::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make popup commands participate in the toolbar exactly like Refresh.
 * Their primary links already own data-popup, so the secondary dropdown
 * anchor and its layout wrapper are unnecessary. */
#messagelist-header .toolbar.menu .dropbutton {
  display: contents !important;
}

#messagelist-header .toolbar.menu .dropbutton > a.dropdown {
  display: none !important;
}

#messagelist-header .toolbar.menu a.select,
#messagelist-header .toolbar.menu a.options,
#messagelist-header > a.button.refresh {
  flex: 0 0 66px !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 4px 2px !important;
  padding: 6px 4px 5px !important;
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  border-radius: 13px !important;
  box-shadow: 0 2px 7px rgba(67, 56, 202, .11) !important;
  opacity: 1 !important;
}

/* Authoritative inbox action reset using Roundcube's real generated IDs.
 * This intentionally outranks the generic .active/.selected toolbar rules. */
#messagelist-header > .toolbar.menu {
  align-self: center !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  width: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Roundcube wraps Select/Thread/Options in 42px list items.  Keep those
 * wrappers the same measured 66x64 footprint as the direct Refresh link so
 * they cannot clip the card or expose a second rectangular layer. */
#messagelist-header > #toolbar-list-menu > li {
  position: relative !important;
  display: flex !important;
  flex: 0 0 66px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  box-sizing: border-box !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#messagelist-header a[data-popup="listselect-menu"],
#messagelist-header #listmenulink,
#messagelist-header > a.button.refresh {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 66px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 6px 4px 5px !important;
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  border-bottom: 1px solid #e3defe !important;
  border-radius: 13px !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

#messagelist-header a[data-popup="listselect-menu"]::before,
#messagelist-header #listmenulink::before,
#messagelist-header > a.button.refresh::before {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 2px !important;
  line-height: 28px !important;
}

#messagelist-header a[data-popup="listselect-menu"] > .inner,
#messagelist-header #listmenulink > .inner,
#messagelist-header > a.button.refresh > .inner {
  display: block !important;
  width: 100% !important;
  height: 19px !important;
  line-height: 19px !important;
  text-align: center !important;
}

/* A disabled command keeps the same single card and geometry; only its
 * foreground is muted.  This prevents the button from visibly jumping when
 * a message is selected. */
#messagelist-header a[data-popup="listselect-menu"].disabled {
  color: #969ba3 !important;
  background: #f5f3ff !important;
  border-color: #e3defe !important;
  opacity: 1 !important;
}

#messagelist-header a[data-popup="listselect-menu"].active,
#messagelist-header a[data-popup="listselect-menu"].selected,
#messagelist-header #listmenulink.active,
#messagelist-header #listmenulink.selected,
#messagelist-header > a.button.refresh.active,
#messagelist-header > a.button.refresh.selected {
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  box-shadow: none !important;
}

#messagelist-header a[data-popup="listselect-menu"]::after,
#messagelist-header #listmenulink::after,
#messagelist-header > a.button.refresh::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#messagelist-header a[data-popup="listselect-menu"]:not(.disabled):hover,
#messagelist-header #listmenulink:not(.disabled):hover,
#messagelist-header > a.button.refresh:not(.disabled):hover {
  color: #312e81 !important;
  background: #ebe7ff !important;
  border-color: #cec5ff !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Final measured cascade guard.
 * Earlier legacy rules contain four class selectors and therefore used to
 * beat the newer declarations even though they appeared first.  Repeating
 * the same ID is valid CSS specificity and keeps this narrowly scoped to the
 * inbox header without changing any other Roundcube toolbar. */
#messagelist-header#messagelist-header > #toolbar-list-menu > li {
  display: flex !important;
  flex: 0 0 66px !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#messagelist-header#messagelist-header a[data-popup="listselect-menu"],
#messagelist-header#messagelist-header #listmenulink,
#messagelist-header#messagelist-header > a.button.refresh {
  display: flex !important;
  flex: 0 0 66px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 6px 4px 5px !important;
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
}

#messagelist-header#messagelist-header a[data-popup="listselect-menu"].disabled {
  color: #969ba3 !important;
  background: #f5f3ff !important;
  border-color: #e3defe !important;
  opacity: 1 !important;
}

#messagelist-header#messagelist-header a[data-popup="listselect-menu"]::before,
#messagelist-header#messagelist-header #listmenulink::before,
#messagelist-header#messagelist-header > a.button.refresh::before {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 2px !important;
  line-height: 28px !important;
}

#messagelist-header#messagelist-header a[data-popup="listselect-menu"] > .inner,
#messagelist-header#messagelist-header #listmenulink > .inner,
#messagelist-header#messagelist-header > a.button.refresh > .inner {
  width: 100% !important;
  height: 19px !important;
  margin: 0 !important;
  line-height: 19px !important;
  text-align: center !important;
}

/* Contextual bulk actions. They are inserted immediately beside the Select
 * control and only occupy space while one or more messages are selected. */
#messagelist-header#messagelist-header > #toolbar-list-menu > li.lsm-selection-action-item {
  display: flex !important;
  flex: 0 0 60px !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

#messagelist-header#messagelist-header > #toolbar-list-menu > li.lsm-selection-action-item[hidden] {
  display: none !important;
}

#messagelist-header#messagelist-header .lsm-selection-action {
  position: relative !important;
  display: flex !important;
  flex: 0 0 60px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 6px 3px 5px !important;
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  font: inherit !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

#messagelist-header#messagelist-header .lsm-selection-action::before {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 2px !important;
  font-family: Icons !important;
  font-size: 1.45rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 28px !important;
  text-align: center !important;
}

#messagelist-header#messagelist-header .lsm-selection-action > .inner {
  display: block !important;
  width: 100% !important;
  height: 19px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: .72rem !important;
  line-height: 19px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.delete::before {
  content: "\f2ed" !important;
  font-weight: 400 !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.read::before {
  content: "\f2b6" !important;
  font-weight: 400 !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.unread::before {
  content: "\f0e0" !important;
  font-weight: 400 !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.move::before {
  content: "\f07c" !important;
  font-weight: 400 !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.spam::before {
  content: "\f06d" !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.not-spam::before {
  content: "\f058" !important;
  font-weight: 400 !important;
}

#messagelist-header#messagelist-header .lsm-selection-action:hover,
#messagelist-header#messagelist-header .lsm-selection-action:focus-visible {
  color: #312e81 !important;
  background: #ebe7ff !important;
  border-color: #cec5ff !important;
  outline: 0 !important;
  transform: translateY(-1px) !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.delete:hover,
#messagelist-header#messagelist-header .lsm-selection-action.delete:focus-visible,
#messagelist-header#messagelist-header .lsm-selection-action.spam:hover,
#messagelist-header#messagelist-header .lsm-selection-action.spam:focus-visible {
  color: #b91c1c !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

#messagelist-header#messagelist-header .lsm-selection-action.not-spam:hover,
#messagelist-header#messagelist-header .lsm-selection-action.not-spam:focus-visible {
  color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

/* Keep the per-message action rail anchored to the physical left edge.
 * Roundcube updates only `top` while hovering a row, so left/right remain
 * stable and the controls never cover the sender/subject on the RTL side. */
.messagelist tbody td.subject {
  padding-left: 126px !important;
}

.listing-hover-menu {
  right: auto !important;
  left: 22px !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid #e1e5ed !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 16px rgba(30, 41, 59, .14) !important;
}

.listing-hover-menu span.txt {
  display: none !important;
}

.listing-hover-menu a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  color: #334155 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
}

.listing-hover-menu a.button::before {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.listing-hover-menu a.button:hover,
.listing-hover-menu a.button:focus {
  color: #4338ca !important;
  background: #eeeaff !important;
}

@media screen and (max-width: 700px) {
  .messagelist tbody td.subject {
    padding-left: 104px !important;
  }

  .listing-hover-menu {
    left: 10px !important;
  }
}

/* Final compose-toolbar normalization.
 * Match the inbox command cards exactly and keep each command on one layer. */
body.task-mail.action-compose #layout-content > .header {
  min-height: 78px !important;
  height: auto !important;
  padding: 4px 12px !important;
  overflow: visible !important;
}

body.task-mail.action-compose #messagetoolbar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 70px !important;
  padding: 3px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

body.task-mail.action-compose #messagetoolbar > a,
body.task-mail.action-compose #messagetoolbar > .dropbutton {
  position: relative !important;
  display: flex !important;
  flex: 0 0 66px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 6px 4px 5px !important;
  color: #4338ca !important;
  background: #f5f3ff !important;
  border: 1px solid #e3defe !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
}

body.task-mail.action-compose #messagetoolbar > a.disabled,
body.task-mail.action-compose #messagetoolbar > .dropbutton:has(> a.disabled) {
  color: #969ba3 !important;
  background: #f5f3ff !important;
  border-color: #e3defe !important;
  opacity: 1 !important;
}

body.task-mail.action-compose #messagetoolbar > a:not(.disabled):hover,
body.task-mail.action-compose #messagetoolbar > a:not(.disabled):focus-visible,
body.task-mail.action-compose #messagetoolbar > .dropbutton:not(:has(> a.disabled)):hover,
body.task-mail.action-compose #messagetoolbar > .dropbutton:not(:has(> a.disabled)):focus-within {
  color: #312e81 !important;
  background: #ebe7ff !important;
  border-color: #cec5ff !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

body.task-mail.action-compose #messagetoolbar > a::before,
body.task-mail.action-compose #messagetoolbar > .dropbutton > a:first-child::before {
  display: block !important;
  flex: 0 0 28px !important;
  float: none !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 2px !important;
  font-size: 1.45rem !important;
  line-height: 28px !important;
  text-align: center !important;
}

body.task-mail.action-compose #messagetoolbar > a > .inner,
body.task-mail.action-compose #messagetoolbar > .dropbutton > a:first-child > .inner {
  display: block !important;
  width: 100% !important;
  height: 19px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 19px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* A dropbutton is the card. Its links are transparent controls inside it,
 * preventing the white/purple double-layer artifact seen in older toolbars. */
body.task-mail.action-compose #messagetoolbar > .dropbutton > a {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.task-mail.action-compose #messagetoolbar > .dropbutton > a:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.task-mail.action-compose #messagetoolbar > .dropbutton > a.dropdown {
  position: absolute !important;
  left: 2px !important;
  right: auto !important;
  bottom: 2px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

body.task-mail.action-compose #messagetoolbar > .dropbutton > a.dropdown:hover,
body.task-mail.action-compose #messagetoolbar > .dropbutton > a.dropdown:focus-visible {
  background: rgba(79, 70, 229, .12) !important;
}

body.task-mail.action-compose #messagetoolbar > .dropbutton > a.dropdown > .inner {
  display: none !important;
}

body.task-mail.action-compose #messagetoolbar > .spacer {
  flex: 0 0 4px !important;
  width: 4px !important;
  min-width: 4px !important;
  height: 48px !important;
  margin: 0 1px !important;
  background: transparent !important;
  border: 0 !important;
}

/* Keep the status text and the title outside the card row. */
body.task-mail.action-compose #composestatusbar {
  inset-inline-start: 16px !important;
  bottom: 2px !important;
  max-width: 260px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media screen and (max-width: 768px) {
  body.task-mail.action-compose #layout-content > .header {
    min-height: 72px !important;
    padding-inline: 7px !important;
  }

  body.task-mail.action-compose #messagetoolbar {
    gap: 4px !important;
    max-width: calc(100vw - 104px) !important;
  }

  body.task-mail.action-compose #messagetoolbar > a,
  body.task-mail.action-compose #messagetoolbar > .dropbutton {
    flex-basis: 60px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    border-radius: 12px !important;
  }
}