/* WATU Mail — logged-in theme on top of Roundcube Elastic.
   Bar: Gmail (Material 3). Rail + folders sit on the canvas; list and reading
   pane are bordered cards with gutters. Light + dark from the same tokens.
   `:root:root` prefix outranks Elastic's `html.dark-mode #id el` rules. */

:root {
  --w-canvas: #f3f6fb;
  --w-surface: #ffffff;
  --w-raised: #ffffff;
  --w-line: #dfe4ea;
  --w-row-line: #edf0f3;
  --w-ink: #1b1f24;
  --w-ink-2: #3f4650;
  --w-ink-3: #6b737d;
  --w-hover: rgba(27, 31, 36, .06);
  --w-blue: #1d6bff;
  --w-blue-2: #0a56e8;
  --w-blue-ink: #0b2a6f;
  --w-pill: #dbe7ff;
  --w-row-unread: #ffffff;
  --w-row-read: #f8fafc;
  --w-row-sel: #dbe7ff;
  --w-search: #e9eef6;
  --w-card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --w-pop-shadow: 0 10px 30px -8px rgba(16, 24, 40, .25), 0 2px 6px rgba(16, 24, 40, .08);
  --w-radius: 16px;
}
html.dark-mode {
  --w-canvas: #0f1215;
  --w-surface: #1a1e23;
  --w-raised: #22272d;
  --w-line: #2b3138;
  --w-row-line: #252a30;
  --w-ink: #e8eaed;
  --w-ink-2: #c3c8ce;
  --w-ink-3: #8f979f;
  --w-hover: rgba(255, 255, 255, .07);
  --w-blue: #4c8dff;
  --w-blue-2: #2f74f5;
  --w-blue-ink: #cfe0ff;
  --w-pill: #23385c;
  --w-row-unread: #1f242a;
  --w-row-read: #1a1e23;
  --w-row-sel: #23385c;
  --w-search: #252a30;
  --w-card-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
  --w-pop-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6);
}

/* ---------- base ---------- */
:root:root body { background: var(--w-canvas); color: var(--w-ink); -webkit-font-smoothing: antialiased; }
:root:root #layout { background: var(--w-canvas); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(127, 135, 145, .35); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

:root:root .btn, :root:root .button.mainaction { border-radius: 999px; font-weight: 600; text-transform: none; letter-spacing: .1px; }
:root:root .btn-primary, :root:root .btn.mainaction, :root:root .button.mainaction {
  background: linear-gradient(180deg, var(--w-blue), var(--w-blue-2)); border-color: transparent; color: #fff;
}
:root:root .btn-primary:hover, :root:root .btn.mainaction:hover { filter: brightness(1.06); }
:root:root .btn-secondary { background: var(--w-surface); border-color: var(--w-line); color: var(--w-ink); }
:root:root .form-control, :root:root .custom-select { border-radius: 10px; border-color: var(--w-line); background-color: var(--w-surface); color: var(--w-ink); }
:root:root .form-control:focus, :root:root .custom-select:focus { border-color: var(--w-blue); box-shadow: 0 0 0 3px rgba(29, 107, 255, .18); }
:root:root .popover, :root:root .popupmenu, :root:root .ui-dialog { border: 1px solid var(--w-line); border-radius: 14px; box-shadow: var(--w-pop-shadow); background: var(--w-raised); }
:root:root .ui-dialog .ui-dialog-titlebar { border-radius: 14px 14px 0 0; background: var(--w-raised); border-bottom: 1px solid var(--w-line); }
:root:root .popover .listing li a, :root:root .popupmenu .listing li a { color: var(--w-ink); }
:root:root .popover .listing li a:hover, :root:root .menu li a:hover { background: var(--w-hover); }
#messagestack div { border-radius: 12px; box-shadow: var(--w-pop-shadow); font-weight: 500; }

/* =====================================================================
   Desktop shell
   ===================================================================== */
@media screen and (min-width: 1024px) {
  /* rail */
  :root:root #layout-menu, :root:root #layout-menu .popover-header, :root:root #taskmenu,
  :root:root #taskmenu .special-buttons, :root:root #taskmenu .action-buttons {
    background: var(--w-canvas) !important; border: 0 !important; box-shadow: none !important;
  }
  :root:root #layout-menu { width: 84px; min-width: 84px; }
  :root:root #layout-menu .popover-header { padding: 16px 0 12px; }
  :root:root #layout-menu #logo { width: 40px; height: 40px; border-radius: 11px; margin: 0 auto; }
  :root:root #taskmenu a { color: var(--w-ink-2); background: transparent !important; border: 0 !important; padding: 6px 0 !important; margin: 4px 0; font-size: 12px; font-weight: 600; height: auto !important; line-height: 1.2; display: block; text-align: center; }
  :root:root #taskmenu a .inner { display: block; position: static; color: inherit; }
  :root:root #taskmenu a.selected { color: var(--w-ink); }
  :root:root #taskmenu a.logout { color: #d14343; }

  /* folder column — on canvas, separated from the list card by the gutter + card border */
  :root:root #layout-sidebar { background: var(--w-canvas); border: 0; margin: 8px 0 8px 0; }
  :root:root #layout-sidebar > .header, :root:root #layout-sidebar > .footer { background: var(--w-canvas); border: 0; }
  :root:root #layout-sidebar .header-title { color: var(--w-ink); font-weight: 700; font-size: 15px; }
  :root:root #layout-sidebar .listing li { background: transparent !important; border: 0; }
  :root:root #layout-sidebar .listing li a { color: var(--w-ink-2); border-radius: 0 999px 999px 0; margin-right: 14px; height: 36px; line-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
  :root:root #layout-sidebar .listing li a:hover { background: var(--w-hover); color: var(--w-ink); }
  :root:root #layout-sidebar .listing li.selected > a, :root:root #layout-sidebar .listing li.selected > div > a { background: var(--w-pill); color: var(--w-blue-ink); font-weight: 700; }
  :root:root #layout-sidebar .unreadcount { background: transparent !important; color: inherit !important; font-weight: 700; }
  :root:root #layout-sidebar .footer, :root:root #quotadisplay { color: var(--w-ink-3); }

  /* cards: list + reading pane */
  :root:root #layout-list, :root:root #layout-content {
    background: var(--w-surface); border: 1px solid var(--w-line) !important; border-radius: var(--w-radius);
    box-shadow: var(--w-card-shadow); overflow: hidden; margin: 10px 10px 10px 0;
  }
  :root:root #layout-sidebar + #layout-list, :root:root #layout-sidebar + #layout-content { margin-left: 6px; }
  :root:root #layout-list > .header, :root:root #layout-content > .header,
  :root:root #layout-list > .footer, :root:root #layout-content > .footer {
    background: var(--w-surface); border-color: var(--w-line); color: var(--w-ink);
  }
  :root:root #layout-list > .header, :root:root #layout-content > .header { border-bottom: 1px solid var(--w-line); min-height: 60px; }
  :root:root #layout-list > .footer, :root:root #layout-content > .footer { border-top: 1px solid var(--w-line); }
  :root:root .header .header-title { color: var(--w-ink); font-weight: 700; }
}

/* ---------- search ---------- */
:root:root .searchbar { background: var(--w-search); border-radius: 999px; border: 0; }
:root:root .searchbar:focus-within { background: var(--w-surface); box-shadow: 0 0 0 1px var(--w-line), var(--w-card-shadow); }
:root:root .searchbar input { background: transparent; border: 0; color: var(--w-ink); }
:root:root .searchbar input:focus { box-shadow: none; }
@media screen and (min-width: 1024px) { :root:root #messagelist-header .searchbar { margin: 10px 12px; height: 44px; } }

/* ---------- message list ---------- */
:root:root #messagelist, :root:root #messagelist-content { background: var(--w-surface); }
:root:root #messagelist tr td { background: var(--w-row-read); border-bottom: 1px solid var(--w-row-line); color: var(--w-ink-3); }
:root:root #messagelist tr.unread td { background: var(--w-row-unread); }
:root:root #messagelist tr .fromto, :root:root #messagelist tr span.subject a { color: var(--w-ink-2); }
:root:root #messagelist tr.unread .fromto, :root:root #messagelist tr.unread span.subject a { color: var(--w-ink); font-weight: 700; }
:root:root #messagelist td.subject span.date { color: var(--w-ink-3); font-size: 12px; font-weight: 500; }
:root:root #messagelist tr.unread td.subject span.date { color: var(--w-ink); font-weight: 700; }
:root:root #messagelist tr:hover td { box-shadow: inset 0 1px 0 var(--w-line), inset 0 -1px 0 var(--w-line); }
:root:root #messagelist tr.selected td, :root:root #messagelist tr.focused.selected td { background: var(--w-row-sel) !important; color: var(--w-ink); }
:root:root #messagelist tr.focused > td:first-child { box-shadow: inset 3px 0 0 var(--w-blue); }
:root:root #messagelist span.msgicon.status { display: none; }
:root:root #messagelist td.selection { width: 0; padding: 0; }
:root:root #messagelist td.flags { width: 34px; padding-right: 12px; }
:root:root #messagelist tr.w-has-av td.subject { position: relative; padding: 12px 8px 12px 66px !important; }
.w-av {
  position: absolute; left: 18px; top: 50%; margin-top: -18px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px;
}
:root:root #messagelist tr.unread .w-av:after {
  content: ""; position: absolute; left: -12px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--w-blue);
}
:root:root .pagenav, :root:root #messagelist-footer { color: var(--w-ink-3); }

/* ---------- settings / contacts lists ---------- */
:root:root #settings-menu li, :root:root #sections-table td, :root:root .listing li { border-color: var(--w-row-line); }
:root:root #settings-menu li a, :root:root .listing li a { color: var(--w-ink-2); }
:root:root #settings-menu li.selected, :root:root .listing li.selected, :root:root #sections-table tr.selected td { background: var(--w-row-sel) !important; }
:root:root #settings-menu li.selected a, :root:root .listing li.selected > a { color: var(--w-ink); font-weight: 600; }
:root:root .propform .form-group label, :root:root .propform td.title { color: var(--w-ink-2); font-weight: 600; }
:root:root .formcontent, :root:root .formbuttons { background: transparent; }

/* =====================================================================
   Lucide icons (watu_icons.js)
   ===================================================================== */
[data-wic]:before { content: none !important; display: none !important; }
.w-ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; stroke-width: 1.9; transform-origin: 50% 50%; }

#taskmenu .w-pill {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; margin: 0 auto 6px; border-radius: 16px;
  color: var(--w-ink-2); transition: background .15s, box-shadow .15s, transform .15s;
}
:root:root #taskmenu a:hover .w-pill { background: var(--w-hover); }
:root:root #taskmenu a.selected .w-pill { background: var(--w-pill); color: var(--w-blue-ink); }
/* compose = primary action button, never looks "selected" */
:root:root #taskmenu a.compose .w-pill {
  width: 56px; height: 56px; border-radius: 18px; color: #fff;
  background: linear-gradient(180deg, var(--w-blue), var(--w-blue-2)) !important;
  box-shadow: 0 8px 18px -6px rgba(29, 107, 255, .6);
}
:root:root #taskmenu a.compose:hover .w-pill { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(29, 107, 255, .7); }
:root:root #taskmenu a.compose { color: var(--w-ink); margin-bottom: 14px; }
#taskmenu a.compose .w-ic { width: 24px; height: 24px; }
:root:root #taskmenu a.logout .w-pill { color: #d14343; }

#mailboxlist li > a[data-wic], #settings-menu li > a[data-wic] { position: relative; padding-left: 54px !important; }
#mailboxlist li > a[data-wic] > .w-ic, #settings-menu li > a[data-wic] > .w-ic { position: absolute; left: 22px; top: 50%; margin-top: -9px; width: 18px; height: 18px; }

@media screen and (min-width: 1024px) {
  .toolbar:not(#taskmenu) a[data-wic], a.refresh[data-wic] {
    display: inline-flex !important; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px;
    padding: 0 !important; margin: 0 2px; border-radius: 50% !important; color: var(--w-ink-2);
  }
  .toolbar:not(#taskmenu) a[data-wic] .inner, a.refresh[data-wic] .inner { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .toolbar:not(#taskmenu) a[data-wic]:not(.disabled):hover, a.refresh[data-wic]:hover { background: var(--w-hover); color: var(--w-ink); }
  .toolbar:not(#taskmenu) a[data-wic].disabled { opacity: .35; }
  .toolbar:not(#taskmenu) a.dropdown { width: 18px !important; min-width: 18px !important; margin-left: -8px !important; }
  .toolbar a[data-wic].hidden-big, .toolbar a[data-wic].hidden-large { display: none !important; }
}
.toolbar a[data-wic].hidden { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  [data-wic]:not(.disabled):hover .w-ic, [data-wic].w-play .w-ic { animation-duration: .6s; animation-timing-function: cubic-bezier(.25, 1, .5, 1); animation-fill-mode: both; }
  [data-anim="wiggle"]:hover .w-ic, [data-anim="wiggle"].w-play .w-ic { animation-name: w-wiggle; }
  [data-anim="lift"]:hover .w-ic, [data-anim="lift"].w-play .w-ic { animation-name: w-lift; }
  [data-anim="pop"]:hover .w-ic, [data-anim="pop"].w-play .w-ic { animation-name: w-pop; }
  [data-anim="turn"]:hover .w-ic, [data-anim="turn"].w-play .w-ic { animation-name: w-turn; animation-duration: .8s; }
  [data-anim="spin"]:hover .w-ic, [data-anim="spin"].w-play .w-ic { animation-name: w-spin; animation-duration: .7s; animation-timing-function: ease-in-out; }
  [data-anim="tilt"]:hover .w-ic, [data-anim="tilt"].w-play .w-ic { animation-name: w-tilt; }
  [data-anim="nudge-r"]:hover .w-ic, [data-anim="nudge-r"].w-play .w-ic { animation-name: w-nudge-r; }
  [data-anim="nudge-l"]:hover .w-ic, [data-anim="nudge-l"].w-play .w-ic { animation-name: w-nudge-l; }
  [data-anim="drop"]:hover .w-ic, [data-anim="drop"].w-play .w-ic { animation-name: w-drop; }
  [data-anim="fly"]:hover .w-ic, [data-anim="fly"].w-play .w-ic { animation-name: w-fly; animation-duration: .7s; }
  [data-anim="shake"]:hover .w-ic, [data-anim="shake"].w-play .w-ic { animation-name: w-shake; animation-timing-function: ease-in-out; }
}
@keyframes w-wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-12deg) } 60% { transform: rotate(9deg) } }
@keyframes w-lift { 0%, 100% { transform: translateY(0) } 45% { transform: translateY(-3px) } }
@keyframes w-pop { 0%, 100% { transform: scale(1) } 45% { transform: scale(1.18) } }
@keyframes w-turn { from { transform: rotate(0) } to { transform: rotate(90deg) } }
@keyframes w-spin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@keyframes w-tilt { 0%, 100% { transform: rotate(0) } 40% { transform: rotate(-14deg) } 70% { transform: rotate(6deg) } }
@keyframes w-nudge-r { 0%, 100% { transform: translateX(0) } 45% { transform: translateX(3px) } }
@keyframes w-nudge-l { 0%, 100% { transform: translateX(0) } 45% { transform: translateX(-3px) } }
@keyframes w-drop { 0%, 100% { transform: translateY(0) } 35% { transform: translateY(3px) } 65% { transform: translateY(-1px) } }
@keyframes w-fly { 0% { transform: translate(0, 0); opacity: 1 } 45% { transform: translate(7px, -7px); opacity: 0 } 46% { transform: translate(-7px, 7px); opacity: 0 } 100% { transform: translate(0, 0); opacity: 1 } }
@keyframes w-shake { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-8deg) } 40% { transform: rotate(8deg) } 60% { transform: rotate(-5deg) } 80% { transform: rotate(4deg) } }

/* login guard (login screen itself: watu-auth.css) */
body.task-login:not(.wl-ready) #layout-content { opacity: 0; }
body.task-login #layout-content > #logo, body.task-login #login-footer { display: none; }
.wa-split .btn, .wa-split .button.mainaction { text-transform: none !important; }
.wa-split #login-form { position: static !important; top: auto !important; margin: 0 !important; max-width: none; width: 100%; text-align: left; }
.wa-split #login-form table { display: none; }
:root:root body.task-login { background: #fff; }

/* responsive hiding must beat the icon-button display rule */
@media screen and (min-width: 1024px) {
  :root:root .toolbar:not(#taskmenu) a[data-wic].hidden-big, :root:root .toolbar:not(#taskmenu) a[data-wic].hidden-large { display: none !important; }
}
:root:root .toolbar:not(#taskmenu) a[data-wic].hidden { display: none !important; }

/* =====================================================================
   Reading pane (preview / show) — Gmail bar
   ===================================================================== */
:root:root body.action-preview, :root:root body.action-show { background: var(--w-surface); }
:root:root body.action-preview #layout-content, :root:root body.action-show #layout-content { background: var(--w-surface); border: 0 !important; box-shadow: none; margin: 0; }
:root:root body.action-preview .frame-content, :root:root body.action-show #layout-content > .content { padding: 28px 40px 48px; max-width: 920px; }
:root:root #message-header { background: transparent; border: 0; padding: 0; margin-bottom: 8px; }
:root:root #message-header h2.subject { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.3px; color: var(--w-ink); margin: 0 0 22px; padding: 0; }
:root:root #message-header h2.subject a.extwin { opacity: .45; font-size: 13px; vertical-align: middle; }
:root:root #message-header h2.subject a.extwin:hover { opacity: 1; }
:root:root #message-header .header { display: flex; align-items: flex-start; gap: 14px; }
:root:root #message-header img.contactphoto { display: none; }
.w-pav { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; }
:root:root #message-header .header-content { flex: 1; min-width: 0; padding: 0; margin: 0; }
:root:root #message-header .header-summary { color: var(--w-ink-3); font-size: 13.5px; line-height: 1.5; }
:root:root #message-header .header-summary a, :root:root #message-header .header-summary .adr { color: var(--w-ink); font-weight: 600; text-decoration: none; }
:root:root #message-header .header-links { margin-top: 6px; }
:root:root #message-header .header-links a {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--w-ink-3); text-decoration: none;
  padding: 3px 10px; border-radius: 999px; background: var(--w-hover); margin-right: 6px;
}
:root:root #message-header .header-links a:before { display: none; }
:root:root #message-header .header-links a:hover { color: var(--w-ink); }
:root:root #message-header table.header-headers { color: var(--w-ink-2); font-size: 13px; }
:root:root #message-content { border-top: 1px solid var(--w-row-line); padding-top: 22px; margin-top: 18px; }
:root:root #messagebody, :root:root #messagebody .pre, :root:root #messagebody div.message-part {
  font-size: 15px; line-height: 1.65; color: var(--w-ink); font-family: inherit; background: transparent; padding: 0; border: 0;
}
:root:root #messagebody .pre { white-space: pre-wrap; }
:root:root #messagebody a { color: var(--w-blue); }
:root:root #messagebody blockquote { border-left: 3px solid var(--w-line); color: var(--w-ink-3); padding-left: 14px; margin-left: 0; }
:root:root #message-objects .boxwarning, :root:root #message-objects .alert {
  border: 1px solid var(--w-line); background: var(--w-hover); color: var(--w-ink-2); border-radius: 12px; font-size: 13px;
}
:root:root .message-partheaders, :root:root #message-content .attachmentslist li { border-radius: 10px; }
:root:root #message-content .attachmentslist li { border: 1px solid var(--w-line); background: var(--w-surface); }
.w-replybar { display: flex; gap: 10px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--w-row-line); }
.w-replybar button {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--w-line); background: var(--w-surface); color: var(--w-ink); font: inherit; font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.w-replybar button:hover { background: var(--w-hover); border-color: var(--w-ink-3); }
.w-replybar button.primary { background: var(--w-pill); border-color: transparent; color: var(--w-blue-ink); }
.w-replybar svg { width: 18px; height: 18px; }

/* folder column = its own card; rail stays alone on the canvas */
@media screen and (min-width: 1024px) {
  :root:root #layout-sidebar {
    background: var(--w-surface); border: 1px solid var(--w-line) !important; border-radius: var(--w-radius);
    box-shadow: var(--w-card-shadow); overflow: hidden; margin: 10px 0 10px 0;
  }
  :root:root #layout-sidebar > .header, :root:root #layout-sidebar > .footer { background: var(--w-surface); }
  :root:root #layout-sidebar > .header { border-bottom: 1px solid var(--w-line); min-height: 60px; }
  :root:root #layout-sidebar > .footer { border-top: 1px solid var(--w-line); }
  :root:root #layout-sidebar .scroller { padding-top: 8px; }
  :root:root #layout-sidebar + #layout-list, :root:root #layout-sidebar + #layout-content { margin-left: 10px; }
  :root:root #layout-menu { padding-right: 2px; }
}

/* compose: quiet white action button (never looks like the active section) */
@media screen and (min-width: 1024px) {
  :root:root #taskmenu a.compose .w-pill {
    width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 6px;
    background: var(--w-surface) !important; color: var(--w-blue) !important;
    border: 1px solid var(--w-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .06);
  }
  :root:root #taskmenu a.compose:hover .w-pill { transform: translateY(-1px); border-color: var(--w-blue); box-shadow: 0 6px 14px -4px rgba(29, 107, 255, .35); }
  :root:root #taskmenu a.compose .w-ic { width: 22px; height: 22px; }
  :root:root #taskmenu a.compose { margin-bottom: 18px; color: var(--w-ink-2); }
  /* thin divider between compose and the sections */
  :root:root #taskmenu .action-buttons { padding-bottom: 6px; margin-bottom: 6px; position: relative; }
  :root:root #taskmenu .action-buttons:after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: var(--w-line); }
}

/* =====================================================================
   Compose — Gmail bar: borderless header rows, clean editor, Send pill
   ===================================================================== */
:root:root body.action-compose #compose-content { padding: 6px 28px 24px; background: var(--w-surface); }
:root:root #compose-headers .form-group.row { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--w-row-line); align-items: center; flex-wrap: nowrap; }
:root:root #compose-headers .form-group.row > label.col-form-label { flex: 0 0 76px; max-width: 76px; padding: 0; color: var(--w-ink-3); font-weight: 500; font-size: 14px; }
:root:root #compose-headers .form-group.row > .col-10 { flex: 1 1 auto; max-width: none; padding: 0; }
:root:root #compose-headers .form-control, :root:root #compose-headers .custom-select, :root:root #compose-headers .recipient-input {
  border: 0 !important; background-color: transparent !important; box-shadow: none !important; font-size: 15px; color: var(--w-ink); padding-left: 0; min-height: 40px;
}
:root:root #compose-headers #compose_subject .form-control { font-weight: 600; }
:root:root #compose-headers .input-group-append, :root:root #compose-headers .input-group-append a, :root:root #compose-headers .input-group-append .input-group-text {
  background: transparent !important; border: 0 !important; color: var(--w-ink-3);
}
:root:root #compose-headers .input-group-append a { border-radius: 50% !important; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
:root:root #compose-headers .input-group-append a:hover { background: var(--w-hover) !important; color: var(--w-ink); }
:root:root .recipient-input li.recipient { background: var(--w-hover); border: 0; border-radius: 999px; padding: 2px 10px; color: var(--w-ink); font-size: 13.5px; }
:root:root #composebodycontainer { border: 0; margin-top: 4px; }
:root:root #composebodycontainer .editor-toolbar { background: transparent; border: 0; border-bottom: 1px solid var(--w-row-line); border-radius: 0; }
:root:root #composebody, :root:root #composebodycontainer textarea {
  border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 18px 2px !important;
  font: 15px/1.65 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--w-ink); min-height: 360px; resize: vertical;
}
:root:root .tox.tox-tinymce { border: 0 !important; border-radius: 0 !important; }
:root:root .tox .tox-editor-header { box-shadow: none !important; border-bottom: 1px solid var(--w-row-line) !important; background: transparent !important; }
:root:root .tox .tox-toolbar, :root:root .tox .tox-toolbar__primary, :root:root .tox .tox-toolbar-overlord { background: transparent !important; }
:root:root .tox .tox-tbtn { border-radius: 8px !important; color: var(--w-ink-2) !important; }
:root:root .tox .tox-tbtn:hover { background: var(--w-hover) !important; }
:root:root .tox .tox-statusbar { border-top: 1px solid var(--w-row-line) !important; background: transparent !important; }
:root:root body.action-compose .formbuttons { padding: 18px 0 0; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; }
:root:root body.action-compose .formbuttons button.send {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 28px 0 22px; font-size: 15px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(29, 107, 255, .7);
}
:root:root body.action-compose .formbuttons button.send .w-ic { width: 18px; height: 18px; }
:root:root body.action-compose .formbuttons a.extwin { color: var(--w-ink-3); font-weight: 600; font-size: 13px; }
/* attachments & options panel */
:root:root #compose-attachments.file-upload { border: 1.5px dashed var(--w-line); border-radius: 16px; background: var(--w-canvas); padding: 22px 16px; text-align: center; }
:root:root #compose-attachments .upload-form { display: flex; flex-direction: column; align-items: center; gap: 10px; }
:root:root #compose-attachments .upload-form > .w-ic { width: 34px; height: 34px; color: var(--w-blue); stroke-width: 1.6; }
:root:root #compose-attachments .hint { color: var(--w-ink-3); font-size: 13px; }
:root:root #compose-attachments:after, :root:root #compose-attachments .upload-form:after, :root:root #compose-attachments .droptarget:before { display: none !important; content: none !important; }
:root:root #compose-attachments button.attach { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--w-surface); border: 1px solid var(--w-line); color: var(--w-ink); font-weight: 600; }
:root:root #compose-attachments button.attach .w-ic { width: 16px; height: 16px; }
:root:root body.action-compose #layout-sidebar .formcontent, :root:root body.action-compose #layout-sidebar .propform { font-size: 14px; color: var(--w-ink-2); }

/* =====================================================================
   Toolbars: labelled, grouped, left-aligned (no hidden meanings)
   ===================================================================== */
@media screen and (min-width: 1024px) {
  :root:root #layout-list > .header, :root:root #layout-content > .header { justify-content: flex-start; }
  :root:root #layout-list > .header .toolbar, :root:root #layout-content > .header .toolbar {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 2px; margin: 0 12px; width: auto; position: static;
  }
  :root:root .toolbar:not(#taskmenu) a[data-wic], :root:root a.refresh[data-wic] {
    width: auto !important; min-width: 0; height: 36px; padding: 0 12px 0 10px !important; gap: 7px; border-radius: 10px !important;
    font-size: 13.5px; font-weight: 600; color: var(--w-ink-2); white-space: nowrap; margin: 0;
  }
  :root:root .toolbar:not(#taskmenu) a[data-wic] .inner, :root:root a.refresh[data-wic] .inner {
    position: static !important; width: auto; height: auto; overflow: visible; clip: auto; font: inherit; color: inherit; display: inline;
  }
  :root:root .toolbar:not(#taskmenu) a[data-wic] .w-ic { width: 18px; height: 18px; }
  :root:root .toolbar:not(#taskmenu) a[data-wic].disabled { opacity: .4; }
  /* attached caret buttons (Reply all ▾, Forward ▾) */
  :root:root .toolbar:not(#taskmenu) a.dropdown { width: 22px !important; min-width: 22px !important; height: 36px; margin: 0 6px 0 -6px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center; justify-content: center; }
  :root:root .toolbar:not(#taskmenu) a.dropdown:hover { background: var(--w-hover); }
  /* groups */
  :root:root #layout-content .toolbar a.delete, :root:root #layout-content .toolbar a.more,
  :root:root #layout-list .toolbar a.refresh, :root:root #layout-list .toolbar a.options { margin-left: 14px !important; position: relative; }
  :root:root #layout-content .toolbar a.delete:after, :root:root #layout-content .toolbar a.more:after,
  :root:root #layout-list .toolbar a.options:after {
    content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 1px; background: var(--w-line);
  }
  :root:root #layout-content .toolbar a.reply { color: var(--w-blue-ink); background: var(--w-pill); }
  :root:root #layout-content .toolbar a.reply.disabled { background: transparent; color: var(--w-ink-2); }
  :root:root #layout-content .toolbar a.delete:not(.disabled):hover { color: #c62828; background: rgba(198, 40, 40, .08); }
}

/* =====================================================================
   Polish pass: contrast, hover actions, press feedback, compose space
   ===================================================================== */
:root {
  --w-canvas: #eaeff6; --w-line: #d5dce5; --w-row-line: #e7ebf0;
  --w-ink: #0f141a; --w-ink-2: #2b333d; --w-ink-3: #5a646f;
  --w-row-read: #ffffff; --w-row-unread: #f4f8ff; --w-row-sel: #d6e4ff; --w-pill: #d6e4ff;
  --w-ease: cubic-bezier(.23, 1, .32, 1);
}
html.dark-mode { --w-canvas: #0b0e11; --w-row-unread: #1d2530; --w-row-read: #171b20; --w-surface: #171b20; --w-row-sel: #233a63; }

/* list: clearer hierarchy */
:root:root #messagelist tr td.subject .fromto { font-size: 14px; }
:root:root #messagelist tr.unread td.subject .fromto, :root:root #messagelist tr.unread td.subject span.subject a { font-weight: 700; color: var(--w-ink); }
:root:root #messagelist tr:not(.unread) td.subject .fromto { font-weight: 500; }
:root:root #messagelist tr.selected td { box-shadow: inset 0 0 0 0 transparent; }
:root:root #messagelist tr.selected > td:first-child, :root:root #messagelist tr.selected > td.subject { box-shadow: inset 3px 0 0 var(--w-blue) !important; }

/* Gmail-style hover actions (replace date on hover) */
.w-rowacts { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; background: inherit; padding-left: 8px; }
.w-rowacts button {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--w-ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color 150ms ease, transform 160ms var(--w-ease);
}
.w-rowacts button:hover { background: var(--w-hover); color: var(--w-ink); }
.w-rowacts button[data-act="del"]:hover { color: #c62828; background: rgba(198, 40, 40, .1); }
.w-rowacts button:active { transform: scale(.92); }
.w-rowacts svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  :root:root #messagelist tr:hover .w-rowacts { display: inline-flex; }
  :root:root #messagelist tr:hover td.subject span.date, :root:root #messagelist tr:hover td.subject span.size { visibility: hidden; }
}
:root:root #messagelist tr td.flags span.flag, :root:root #messagelist tr td.flags span.attachment { opacity: .7; }

/* press feedback everywhere it matters */
:root:root .btn, :root:root .toolbar a, :root:root #taskmenu a .w-pill, .w-replybar button, :root:root .formbuttons button {
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 160ms var(--w-ease);
}
:root:root .btn:active, :root:root .toolbar:not(#taskmenu) a:not(.disabled):active, :root:root #taskmenu a:active .w-pill,
.w-replybar button:active, :root:root .formbuttons button:active { transform: scale(.97); }

/* headers stronger */
@media screen and (min-width: 1024px) {
  :root:root #layout-sidebar .header-title { font-size: 15px; font-weight: 700; }
  :root:root #layout-sidebar .listing li a { color: var(--w-ink-2); font-weight: 500; }
}

/* compose: writing area dominates, options panel compact */
@media screen and (min-width: 1024px) {
  :root:root body.action-compose #layout-sidebar { flex: 0 0 300px !important; max-width: 300px; min-width: 300px; }
  :root:root body.action-compose #layout-sidebar .header-title { font-size: 14px; }
  :root:root body.action-compose #layout-sidebar .formcontent { padding: 14px; }
  :root:root body.action-compose #layout-sidebar .form-group.row { margin-bottom: 4px; }
}
:root:root #messagelist td.subject span.fromto, :root:root #messagelist td.subject span.subject { margin-left: 0 !important; padding-left: 0 !important; }
:root:root #messagelist td.subject span.fromto > span.adr { margin-left: 0; }
:root:root #messagelist td.subject .threads, :root:root #messagelist td.subject span.branch { display: none; }
@media (hover: hover) and (pointer: fine) { :root:root #messagelist tr:hover td.flags span.flag { visibility: hidden; } }
:root:root #messagelist tr.flagged td.flags span.flag { visibility: visible !important; color: #e8590c; opacity: 1; }

/* =====================================================================
   Header strips: one height, true vertical centering, split buttons
   ===================================================================== */
@media screen and (min-width: 1024px) {
  :root:root #layout-sidebar > .header, :root:root #layout-list > .header, :root:root #layout-content > .header {
    height: 60px !important; min-height: 60px; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;
  }
  :root:root #layout-list > .header .toolbar, :root:root #layout-content > .header .toolbar {
    height: 60px; display: flex; align-items: center; gap: 2px; margin: 0 !important; padding: 0;
  }
  :root:root .header .toolbar > li { display: flex; align-items: center; height: auto; margin: 0; padding: 0; float: none; }
  :root:root .header .toolbar > li.spacer { width: 1px; height: 22px; background: var(--w-line); margin: 0 8px; flex: none; }
  :root:root .header .toolbar > li > a, :root:root .header .toolbar > li > span > a, :root:root .header .toolbar > a { position: static !important; top: auto !important; }

  /* split buttons: [Reply all | ▾] read as one control */
  :root:root .header .toolbar span.dropbutton { display: inline-flex; align-items: center; border-radius: 10px; position: relative; }
  :root:root .header .toolbar span.dropbutton:hover { background: var(--w-hover); }
  :root:root .header .toolbar span.dropbutton > a[data-wic] { border-radius: 10px 0 0 10px !important; padding-right: 6px !important; }
  :root:root .header .toolbar span.dropbutton > a[data-wic]:hover { background: transparent; }
  :root:root .header .toolbar span.dropbutton > a.dropdown {
    position: static !important; width: 22px !important; min-width: 22px !important; height: 36px; margin: 0 !important; padding: 0 !important;
    border-radius: 0 10px 10px 0 !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--w-ink-3);
  }
  :root:root .header .toolbar span.dropbutton > a.dropdown:before { position: static !important; margin: 0 !important; font-size: 10px; line-height: 1; height: auto; width: auto; }
  :root:root .header .toolbar span.dropbutton > a.dropdown:hover { background: var(--w-hover); color: var(--w-ink); }

  /* no fake groups / no pre-highlighted Reply — spacer li does the grouping */
  :root:root #layout-content .toolbar a.delete, :root:root #layout-content .toolbar a.more,
  :root:root #layout-list .toolbar a.refresh, :root:root #layout-list .toolbar a.options { margin-left: 0 !important; }
  :root:root #layout-content .toolbar a.delete:after, :root:root #layout-content .toolbar a.more:after, :root:root #layout-list .toolbar a.options:after { content: none !important; }
  :root:root #layout-content .toolbar a.reply, :root:root #layout-content .toolbar a.reply.disabled { background: transparent; color: var(--w-ink-2); }
  :root:root #layout-content .toolbar a.more { margin-left: auto !important; }

  /* folder column title: left aligned, menu at the far right */
  :root:root #layout-sidebar > .header .header-title {
    position: static !important; flex: 1 1 auto; text-align: left; padding: 0 8px; margin: 0; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  :root:root #layout-sidebar > .header a.button { position: static !important; flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
  :root:root #layout-sidebar > .header a.button:hover { background: var(--w-hover); }

  /* list: search bar aligned with the toolbar padding */
  :root:root #messagelist-header { padding: 0; }
  :root:root #messagelist-header .searchbar { margin: 10px 10px 8px !important; }
}
@media screen and (min-width: 1024px) {
  :root:root #layout-sidebar > .header a.back-list-button, :root:root #layout-sidebar > .header a.task-menu-button,
  :root:root #layout-list > .header a.task-menu-button, :root:root #layout-list > .header a.back-sidebar-button,
  :root:root #layout-content > .header a.back-list-button { display: none !important; }
  :root:root #layout-sidebar > .header .header-title { display: block; text-align: left !important; font-size: 15px; }
  :root:root .header .toolbar, :root:root .header .toolbar > li, :root:root .header .toolbar a { border: 0 !important; box-shadow: none !important; }
  :root:root .header .toolbar:after, :root:root .header .toolbar:before { display: none !important; }
  /* clean chevron for split buttons */
  :root:root .header .toolbar span.dropbutton > a.dropdown:before { display: none !important; }
  :root:root .header .toolbar span.dropbutton > a.dropdown:after {
    content: ""; display: block; width: 6px; height: 6px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
    transform: translateY(-2px) rotate(45deg); position: static;
  }
}

/* spacing rhythm (8px grid) — Gmail-like breathing room */
@media screen and (min-width: 1024px) {
  :root:root #layout-sidebar > .header .header-title { margin: 0 !important; padding: 0 8px !important; }
  :root:root #layout-sidebar > .header { padding: 0 8px 0 12px; }
  :root:root #layout-sidebar .scroller { padding: 10px 0 8px; }
  :root:root #layout-sidebar .listing li a { margin: 2px 12px 2px 0; }

  /* search sits in its own band: 12px around, divider under it */
  :root:root #messagelist-header { padding: 12px 12px 12px !important; border-bottom: 1px solid var(--w-line); background: var(--w-surface); }
  :root:root #messagelist-header .searchbar { margin: 0 !important; height: 42px; display: flex; align-items: center; padding: 0 6px 0 14px; }
  :root:root #messagelist-header .searchbar input { height: 42px; font-size: 14px; }
  :root:root #messagelist-content { padding-top: 4px; }

  /* list rows: consistent 14px vertical rhythm */
  :root:root #messagelist tr.w-has-av td.subject { padding: 14px 12px 14px 68px !important; }
  :root:root #messagelist td.subject span.date { top: 14px; }

  /* reading pane header aligned to the same 24px inset as the content */
  :root:root body.action-preview .frame-content { padding: 24px 32px 48px !important; }
}
@media screen and (min-width: 1024px) {
  :root:root #layout-list > .searchbar {
    margin: 12px 12px 10px !important; height: 42px !important; border-radius: 999px; padding: 0 6px 0 14px;
    display: flex; align-items: center; flex: none; width: auto;
  }
  :root:root #layout-list > .searchbar input { height: 42px; font-size: 14px; }
  :root:root #layout-list > .searchbar + * { border-top: 1px solid var(--w-line); }
  :root:root #layout-sidebar > .header a.sidebar-menu { align-self: center; }
}
@media screen and (min-width: 1024px) { :root:root #layout-sidebar > .header a.sidebar-menu { margin: 0 !important; padding: 0 !important; top: auto !important; line-height: 36px; } :root:root #layout-sidebar > .header a.sidebar-menu:before { margin: 0 !important; line-height: 36px; position: static !important; } }