/**
 * chost skin - design layer over the Elastic base
 * Implements the webmail.chost.cz design (Gmail-like mockup):
 * purple accent, Manrope, rounded content cards, pill search, dark mode.
 * Loaded after styles.css from includes/layout.html.
 */

/* ===== Fonts ===== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(../fonts/material-symbols-outlined.woff2?v=2) format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ===== Design tokens (mockup palette) ===== */
:root {
  --ch-accent: #7c3aed;
  --ch-accent-hover: #6d28d9;
  --ch-accent-ink: #4c1d95;
  --ch-accent-soft: #f2edfd;
  --ch-accent-soft-strong: #e4d9fb;
  --ch-star: #f5a524;
  --ch-bg-app: #f7f6fb;
  --ch-bg-hover: #f1ecfb;
  --ch-bg-selected: #e4d9fb;
  --ch-bg-read: #f4f2f9;
  --ch-bg-unread: #ffffff;
  --ch-bg-card: #ffffff;
  --ch-border: #e9e6f1;
  --ch-border-strong: #dcd7e8;
  --ch-text-primary: #1c1727;
  --ch-text-secondary: #69647a;
  --ch-text-tertiary: #948fa3;
  --ch-shadow-1: 0 1px 2px 0 rgba(40,20,70,.10), 0 1px 3px 1px rgba(40,20,70,.08);
  --ch-shadow-2: 0 4px 14px 0 rgba(40,20,70,.12);
  --ch-shadow-3: 0 12px 32px 0 rgba(30,15,55,.20);
  --ch-radius-lg: 20px;
}
html.dark-mode {
  --ch-accent: #a879f7;
  --ch-accent-hover: #b98cf9;
  --ch-accent-ink: #e6dbfc;
  --ch-accent-soft: #2c2440;
  --ch-accent-soft-strong: #392f52;
  --ch-bg-app: #18151f;
  --ch-bg-hover: #27212f;
  --ch-bg-selected: #382d4d;
  --ch-bg-read: #211c2a;
  --ch-bg-unread: #1b1722;
  --ch-bg-card: #1b1722;
  --ch-border: #312a3d;
  --ch-border-strong: #443a54;
  --ch-text-primary: #eeeaf6;
  --ch-text-secondary: #a79fbb;
  --ch-text-tertiary: #847c98;
}

/* ===== Cursor: hand on interactive elements ===== */
a,
button,
[role="button"],
[onclick],
.btn,
.icon-btn,
.ch-compose-btn,
.ch-tb-btn,
.listing li a,
.folderlist li a,
.messagelist tr.message,
.messagelist tr.message td,
.contactlist li a,
input[type="checkbox"],
input[type="radio"],
label.checkbox-wrap,
.star-btn {
  cursor: pointer;
}
a.disabled,
button:disabled,
.btn.disabled {
  cursor: default;
}

/* ===== No underline on icon/control links (bootstrap adds it on hover) ===== */
.ch-cp-btn, .ch-cp-btn:hover, .ch-cp-btn:focus,
.ch-cb, .ch-cb:hover, .ch-cb:focus,
.ch-tb-btn, .ch-tb-btn:hover, .ch-tb-btn:focus,
.ch-tags-toggle, .ch-tags-toggle:hover,
.ch-tags-menu a, .ch-tags-menu a:hover,
.ch-label a, .ch-label a:hover, .ch-label a:focus,
.ch-label-add, .ch-label-add:hover,
.ch-label-del, .ch-label-del:hover,
.ch-more-toggle a, .ch-more-toggle a:hover,
.ch-starred a, .ch-starred a:hover,
.ch-compose-btn, .ch-compose-btn:hover,
.ch-cc-links a, .ch-cc-links a:hover,
.ch-tb-logo, .ch-tb-logo:hover,
.ch-selectall {
  text-decoration: none !important;
}

/* ===== Base ===== */
body,
button, input, select, textarea,
.form-control {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif !important;
}
body {
  color: var(--ch-text-primary);
  background-color: var(--ch-bg-app) !important;
}
html.dark-mode body {
  background-color: #131019 !important;
  color: var(--ch-text-primary);
}
a { color: var(--ch-accent); }
a:hover { color: var(--ch-accent-hover); }

/* ===== Layout: app background + rounded content cards ===== */
#layout { background-color: var(--ch-bg-app); }
html.dark-mode #layout { background-color: #131019; }

#layout-sidebar {
  background-color: var(--ch-bg-app);
  border-right: 0;
}
#layout-list,
#layout-content {
  background-color: var(--ch-bg-card);
  border-right: 0;
}
/* ===== Desktop restructure: topbar + no rail (mockup layout) ===== */
#chost-topbar { display: none; }

@media screen and (min-width: 769px) {
  /* hide the vertical task rail; its functions live in the topbar */
  #layout-menu { display: none !important; }

  #chost-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--ch-bg-app);
    z-index: 10;
  }
  html.dark-mode #chost-topbar { background: #131019; }

  #layout { padding-top: 64px; }

  .ch-tb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    text-decoration: none;
    width: 230px;
    flex-shrink: 0;
  }
  .ch-tb-logo:hover { background: var(--ch-bg-hover); }
  .ch-tb-logo img { height: 28px; width: auto; display: block; }
  .ch-tb-logotext {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ch-text-primary);
    white-space: nowrap;
  }

  #chost-topbar-search {
    flex: 1 1 auto;
    max-width: 720px;
    margin: 0 auto;
    min-width: 0;
  }
  #chost-topbar-search .searchbar {
    margin: 0 !important;
    height: 46px;
    display: flex;
    align-items: center;
    border-radius: 999px !important;
  }
  #chost-topbar-search .searchbar input {
    font-size: 15px;
    flex: 1;
    width: 100%;
    display: block !important;
  }
  #chost-topbar-search .searchbar {
    position: static !important;
    width: 100% !important;
  }
  #chost-topbar-search .searchbar form {
    display: flex !important;
    align-items: center;
    flex: 1;
    width: 100%;
  }

  .ch-tb-right {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .ch-tb-btn {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ch-text-secondary);
    text-decoration: none;
  }
  .ch-tb-btn:hover { background: var(--ch-bg-hover); color: var(--ch-text-primary); }
  .ch-tb-btn .inner { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
  .ch-tb-btn::before {
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    line-height: 1;
    font-feature-settings: 'liga';
  }
  .ch-tb-btn.theme::before { content: "dark_mode"; }
  .ch-tb-btn.theme.is-dark::before { content: "light_mode"; }
  .ch-tb-btn.contacts::before { content: "person"; }
  .ch-tb-btn.settings::before { content: "settings"; }
  .ch-tb-btn.logout::before { content: "logout"; }
  .ch-tb-btn.logout:hover { color: #e11d48; }

  /* sidebar: mockup style - starts with the compose button, no header
     (except when identity_switch renders its account dropdown there) */
  body.task-mail #layout-sidebar > .header { display: none; }
  body.task-mail #layout-sidebar > .header:has(#identity_switch_menu) {
    display: flex !important;
    align-items: center;
    padding: 8px 12px 0;
    border: 0 !important;
    height: auto !important;
  }
  #identity_switch_menu {
    border: 1px solid var(--ch-border-strong) !important;
    border-radius: 10px !important;
    font-size: 13px;
    color: var(--ch-text-primary);
    cursor: pointer;
    background: var(--ch-bg-card) !important;
  }
  #layout-sidebar { max-width: 256px; min-width: 230px; }

  /* content card (main window only - never inside the preview iframe) */
  html:not(.iframe) #layout-list,
  html:not(.iframe) #layout-content {
    margin: 0 10px 0 0;
    border-radius: var(--ch-radius-lg) var(--ch-radius-lg) 0 0;
    box-shadow: 0 1px 2px 0 rgba(40,20,70,.06);
    overflow: hidden;
    max-width: none;
  }
  /* inside the preview iframe: full-bleed, seamlessly attached to the toolbar */
  html.iframe #layout,
  html.iframe body { background: var(--ch-bg-card) !important; }
  html.iframe #layout-content {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Mockup behavior on the mail task: folders (left) + message list fill the
     width; opening a message (chost.js, single click) hides the list and shows
     the detail in its place. Folders stay. No persistent preview pane. */
  body.task-mail #layout-sidebar { flex: 0 0 256px !important; width: 256px !important; max-width: 256px !important; }
  body.task-mail #layout-list { flex: 1 1 auto !important; max-width: none !important; }

  html:not(.iframe) body.task-mail.action-none:not(.ch-preview-open) #layout-content,
  html:not(.iframe) body.task-mail.action-list:not(.ch-preview-open) #layout-content { display: none !important; }
  html:not(.iframe) body.task-mail.ch-preview-open #layout-list { display: none !important; }
  html:not(.iframe) body.task-mail.ch-preview-open #layout-content {
    display: flex !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 10px 0 0 !important;
    border-radius: var(--ch-radius-lg) var(--ch-radius-lg) 0 0;
  }
  html:not(.iframe) body.task-mail.ch-preview-open #layout-sidebar {
    display: flex !important;
    visibility: visible !important;
  }
  /* Back button must be visible in the message view (Elastic hides it on wide
     screens, but we hide the list, so it's the only way back). */
  html:not(.iframe) body.task-mail.ch-preview-open #layout-content > .header { display: flex !important; }
  html:not(.iframe) body.task-mail.ch-preview-open #layout-content .back-list-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: -1;
  }
}
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-color: var(--ch-bg-card);
}

/* Headers of the columns */
#layout > div > .header {
  background-color: transparent;
  border-bottom: 1px solid var(--ch-border);
  color: var(--ch-text-primary);
}
#layout-sidebar > .header {
  border-bottom: 0;
  font-weight: 700;
}
#layout > div > .footer {
  background-color: transparent;
  border-top: 1px solid var(--ch-border);
  color: var(--ch-text-secondary);
}
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background-color: transparent;
  color: var(--ch-text-primary);
}

/* ===== Task menu (left rail) ===== */
#layout-menu,
#taskmenu {
  background-color: var(--ch-bg-app) !important;
}
html.dark-mode #layout-menu,
html.dark-mode #taskmenu {
  background-color: #131019 !important;
}
#layout-menu .popover-header {
  background-color: var(--ch-bg-app) !important;
}
html.dark-mode #layout-menu .popover-header {
  background-color: #131019 !important;
}
#taskmenu a {
  color: var(--ch-text-secondary);
  border-radius: 12px;
  margin: 2px 4px;
  width: auto;
}
#taskmenu a:hover {
  color: var(--ch-accent-ink);
  background-color: var(--ch-bg-hover);
}
#taskmenu a.selected {
  color: var(--ch-accent-ink);
  background-color: var(--ch-accent-soft-strong);
}
#taskmenu a.compose {
  color: #fff;
  background-color: var(--ch-accent);
  box-shadow: var(--ch-shadow-1);
}
#taskmenu a.compose:hover {
  background-color: var(--ch-accent-hover);
  box-shadow: var(--ch-shadow-2);
  color: #fff;
}
#taskmenu a.logout { color: var(--ch-text-secondary); }
#taskmenu a.logout:hover { color: #e11d48; background-color: var(--ch-bg-hover); }

/* ===== Folder list / listings ===== */
.listing li a,
.listing tbody td {
  color: var(--ch-text-primary);
}
.folderlist li a {
  border-radius: 10px;
  margin: 1px 8px;
  width: auto;
  font-weight: 500;
  color: var(--ch-text-primary);
}
.folderlist li a:hover,
.listing li a:hover {
  background-color: var(--ch-bg-hover);
}
/* no blue focus/active flash on sidebar items; focus must NOT look selected
   (a clicked link keeps :focus and would stay "marked") */
.folderlist li a:active,
#mailboxlist li a:active,
.listing li a:active {
  background-color: var(--ch-bg-hover) !important;
}
.folderlist li a:focus,
#mailboxlist li a:focus,
.listing li a:focus {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
}
.folderlist li.selected > a:focus,
#mailboxlist li.selected > a:focus {
  background-color: var(--ch-accent-soft) !important;
}
.folderlist li.selected > a,
.folderlist li a.selected,
#mailboxlist li.selected > a,
#mailboxlist li a.selected,
.listing li.selected > a,
.listing li a.selected {
  background-color: var(--ch-accent-soft) !important;
  color: var(--ch-accent-ink) !important;
  font-weight: 700;
}
.folderlist li a.selected::before,
#mailboxlist li a.selected::before { color: var(--ch-accent-ink) !important; }
.folderlist li a { position: relative; }
.folderlist li a .unreadcount,
span.unreadcount {
  background-color: var(--ch-accent) !important;
  color: #fff !important;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  margin: 0 !important;
  min-width: 20px;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 6px !important;
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
}
.folderlist li.selected > a .unreadcount {
  background-color: var(--ch-accent-ink) !important;
}

@media screen and (min-width: 769px) {
/* ===== Message list (single-line Gmail-style rows) =====
   Elastic packs sender/subject/date into a wrapping flex block inside td.subject.
   We override it into one horizontal line: sender | subject + snippet | date. */
.messagelist { border-collapse: collapse; }
.messagelist thead { display: none; } /* mockup has no column header row */

.messagelist tr.message {
  background-color: var(--ch-bg-read);
  border-bottom: 1px solid var(--ch-bg-app);
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px 0 4px;
}
.messagelist tr.message.unread { background-color: var(--ch-bg-unread); }
.messagelist tr.message:hover { background-color: var(--ch-bg-hover); }
/* row highlight ONLY for checkbox-selection (body.ch-cb-select via chost.js) */
.messagelist tr.message.selected { background-color: transparent; }
body.ch-cb-select .messagelist tr.message:has(td.selection input:checked) {
  background-color: var(--ch-bg-selected) !important;
  color: var(--ch-text-primary);
}
/* while the message is loading, show the empty white pane (no old content) */
body.ch-loading #messagecontframe { opacity: 0; }

/* all cells: reset table styling, order via flex `order` (independent of DOM) */
.messagelist tr.message td {
  border: 0 !important;
  vertical-align: middle;
  width: auto;
  height: auto;
  padding: 0;
  font-size: 14px !important;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* purple unread indicator bar on the very left */
.messagelist tr.message::before {
  content: "";
  order: -5;
  flex: 0 0 3px;
  align-self: stretch;
  margin: 6px 4px 6px 0;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.messagelist tr.message.unread::before { background: var(--ch-accent); }

.messagelist td.selection { order: -4; flex: 0 0 32px; text-align: center; }
.messagelist td.status,
.messagelist td.flag     { order: -3; flex: 0 0 28px; text-align: center; }
.messagelist td.threads,
.messagelist td.size     { display: none; }

/* sender, fixed width */
.messagelist td.fromto {
  order: 1;
  flex: 0 0 190px;
  padding-right: 12px !important;
  color: var(--ch-text-primary) !important;
}
/* subject + snippet share the middle, take all remaining space */
.messagelist td.subject {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
  padding: 0 !important;
}
.messagelist td.subject span.subject {
  flex: 0 1 auto;
  width: auto !important;
  color: var(--ch-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messagelist td.subject a { color: inherit; }

/* label chips in list rows (chost_tags) */
.messagelist td.subject .ch-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 6px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--chip-c, #7c3aed) 16%, white);
  color: color-mix(in srgb, var(--chip-c, #7c3aed) 65%, black);
  line-height: 1.4;
  white-space: nowrap;
}
html.dark-mode .messagelist td.subject .ch-chip {
  background: color-mix(in srgb, var(--chip-c, #7c3aed) 30%, black);
  color: color-mix(in srgb, var(--chip-c, #7c3aed) 55%, white);
}

/* tag menu (list header) */
.ch-tags-btn { position: relative; display: inline-flex; }
#messagelist-header .ch-tags-toggle {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-secondary);
  text-decoration: none;
}
#messagelist-header .ch-tags-toggle:hover { background: var(--ch-bg-hover); color: var(--ch-text-primary); }
#messagelist-header .ch-tags-toggle::before {
  font-family: 'Material Symbols Outlined';
  content: 'label';
  font-size: 22px;
  line-height: 1;
  font-feature-settings: 'liga';
}
.ch-tags-menu {
  position: fixed; /* escapes the list card's overflow:hidden; JS sets top/left */
  min-width: 180px;
  background: var(--ch-bg-card);
  border: 1px solid var(--ch-border);
  border-radius: 14px;
  box-shadow: var(--ch-shadow-2);
  padding: 6px;
  z-index: 200;
}
.ch-tags-menu.hidden { display: none; }
.ch-tags-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ch-text-primary);
  cursor: pointer;
  text-decoration: none;
}
.ch-tags-menu a:hover { background: var(--ch-bg-hover); }
.ch-tags-menu .ch-tag-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.ch-tags-menu a.active { font-weight: 700; }
.ch-tags-menu a.active::after {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-size: 16px;
  margin-left: auto;
  color: var(--ch-accent);
}
} /* end desktop-only: message rows + tags menu */

/* sidebar label filter active state */
.ch-label a.active {
  background: var(--ch-accent-soft);
  color: var(--ch-accent-ink);
  font-weight: 700;
}
/* label icon: outline by default, filled when the filter is active */
.ch-label .ch-label-dot::before {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}
.ch-label a.active .ch-label-dot::before {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}

/* labels title row with the add (+) button */
.ch-labels-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.ch-label-add {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-tertiary);
  text-decoration: none;
  cursor: pointer;
}
.ch-label-add:hover { background: var(--ch-bg-hover); color: var(--ch-text-primary); }
.ch-label-add::before {
  font-family: 'Material Symbols Outlined';
  content: 'add';
  font-size: 18px;
  font-feature-settings: 'liga';
}

/* delete control on label rows (hover only) */
.ch-label-del {
  display: none;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
}
.ch-label a:hover .ch-label-del { display: inline-flex; }
.ch-label-del:hover { background: var(--ch-bg-hover); color: #e11d48; }
.ch-label-del::before {
  font-family: 'Material Symbols Outlined';
  content: 'close';
  font-size: 14px;
  font-feature-settings: 'liga';
  pointer-events: none;
}
.ch-label .ch-label-name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* add-label form */
.ch-label-form {
  margin: 6px 16px 4px;
  padding: 10px;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: var(--ch-bg-card);
}
.ch-label-form input {
  width: 100%;
  border: 1px solid var(--ch-border-strong);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  background: transparent;
  color: var(--ch-text-primary);
  box-sizing: border-box;
}
.ch-label-form input:focus { outline: none; border-color: var(--ch-accent); }
.ch-label-colors { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.ch-color {
  width: 20px; height: 20px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
}
.ch-color.picked { border-color: var(--ch-text-primary); }
.ch-label-save {
  background: var(--ch-accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ch-label-save:hover { background: var(--ch-accent-hover); }

.messagelist td.subject .ch-snippet {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ch-text-secondary);
  font-weight: 400 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
/* attachment marker + date on the right */
.messagelist td.attachment { order: 3; flex: 0 0 auto; padding: 0 6px; }
.messagelist td.date {
  order: 4;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px !important;
  font-size: 12px !important;
  color: var(--ch-text-secondary) !important;
}

/* read messages: muted, so unread clearly stands out */
.messagelist tr.message:not(.unread) td.fromto,
.messagelist tr.message:not(.unread) td.subject span.subject {
  font-weight: 400;
  color: var(--ch-text-secondary);
}
/* unread: strong bold + full-contrast text */
.messagelist tr.unread td.fromto,
.messagelist tr.unread td.subject span.subject {
  font-weight: 800 !important;
  color: var(--ch-text-primary) !important;
}
.messagelist tr.unread td.date {
  font-weight: 700 !important;
  color: var(--ch-text-primary) !important;
}
.messagelist tr.unread td.subject .ch-snippet {
  font-weight: 400 !important;
  color: var(--ch-text-secondary) !important;
}

/* star column: always show an outline star, gold + filled when flagged */
.messagelist td.flag { order: -2; flex: 0 0 30px; text-align: center; }
.messagelist td.flag span { cursor: pointer; display: inline-block; line-height: 1; }
.messagelist td.flag span::before {
  font-family: 'Material Symbols Outlined' !important;
  content: 'star' !important;
  font-size: 19px !important;
  color: var(--ch-text-tertiary) !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}
.messagelist td.flag span.flagged::before {
  color: var(--ch-star) !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}
.messagelist td.flag span:hover::before { color: var(--ch-star) !important; }

/* ===== List toolbar: minimal (like mockup) =====
   [select-all] [refresh] ................. [1-50 z N] [<] [>] */
#messagelist-header {
  justify-content: flex-start !important;
  align-items: center;
  gap: 2px;
  padding: 6px 12px !important;
}
#messagelist-header .toolbar.menu a .inner,
#messagelist-header .toolbar.menu a .voice,
#messagelist-header a.refresh .inner { display: none !important; }
#messagelist-header .toolbar.menu a,
#messagelist-header a.refresh {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  line-height: 1;
}
#messagelist-header .toolbar.menu a.threads,
#messagelist-header .toolbar.menu a.select,
#messagelist-header .toolbar.menu a.options { display: none !important; }
#messagelist-header .header-title { display: none !important; }

/* select-all checkbox (custom, added by chost.js) */
.ch-selectall {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.ch-selectall input { position: absolute; opacity: 0; width: 24px; height: 24px; cursor: pointer; margin: 0; }
.ch-selectall .ch-cb {
  width: 18px; height: 18px;
  border: 2px solid var(--ch-text-tertiary);
  border-radius: 5px;
  display: block;
  position: relative;
  background: transparent;
  pointer-events: none;
}
.ch-selectall input:checked + .ch-cb { background: var(--ch-accent); border-color: var(--ch-accent); }
.ch-selectall input:checked + .ch-cb::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ch-selectall:hover .ch-cb { border-color: var(--ch-text-primary); }

/* pagination moved into the header (chost.js) */
.pagenav.ch-in-header {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
}
.pagenav.ch-in-header a.firstpage,
.pagenav.ch-in-header a.lastpage,
.pagenav.ch-in-header input { display: none !important; }
.pagenav.ch-in-header .pagenav-text {
  font-size: 13px;
  color: var(--ch-text-secondary);
  white-space: nowrap;
  margin-right: 6px;
}
.pagenav.ch-in-header a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-secondary);
}
.pagenav.ch-in-header a:hover { background: var(--ch-bg-hover); color: var(--ch-text-primary); }
.pagenav.ch-in-header a .inner { display: none; }

/* per-row checkboxes always visible (WITHOUT elastic's 'withselection' mode,
   which would hijack row clicks; the checkbox input itself still multi-selects) */
.messagelist tr.message td.selection {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
}
/* custom checkbox: the tick is shown ONLY for checkbox-made selections
   (body.ch-cb-select) - a plain row click must not visually "check" it */
.messagelist tr.message td.selection input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 2px solid var(--ch-text-tertiary);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  display: inline-block;
}
.messagelist tr.message td.selection input:hover { border-color: var(--ch-text-primary); }
body.ch-cb-select .messagelist tr.message td.selection input:checked {
  background-color: var(--ch-accent);
  border-color: var(--ch-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Topbar search: wide centered pill ===== */
#chost-topbar-search .searchbar,
#chost-topbar-search .searchbar.menu {
  position: static !important;
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(40,20,70,.06);
  padding: 0 6px 0 16px !important;
}
#chost-topbar-search .searchbar > a.button,
#chost-topbar-search .searchbar .options-button,
#chost-topbar-search .searchbar .search-input-group > a { flex: 0 0 auto; }
#chost-topbar-search form,
#chost-topbar-search .search-input,
#chost-topbar-search .search-input-group { flex: 1 1 auto !important; display: flex !important; align-items: center; width: 100% !important; }
#chost-topbar-search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 15px !important;
  height: 44px !important;
}

/* remove the elastic hover action menu on message rows (unwanted) */
.listing-hover-menu,
.menu.listing-hover-menu { display: none !important; }

/* selection checkboxes: visible per row (JS adds .withselection). Show them
   subtly, fully visible on hover / when selected, like the mockup. */
.messagelist.withselection td.selection { display: flex; align-items: center; justify-content: center; }
.messagelist td.selection .custom-control,
.messagelist td.selection input[type="checkbox"] { opacity: .55; transition: opacity .12s; }
.messagelist tr.message:hover td.selection .custom-control,
.messagelist tr.message:hover td.selection input,
.messagelist tr.message.selected td.selection .custom-control,
.messagelist tr.message.selected td.selection input { opacity: 1; }

} /* end desktop-only: star/toolbar/selectall/pagenav/checkboxes */

/* elastic hover action menu on rows is unwanted everywhere */
.listing-hover-menu, .menu.listing-hover-menu { display: none !important; }

/* ===== Searchbar (pill) ===== */
.searchbar {
  background-color: var(--ch-bg-app) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  margin: 6px 10px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.searchbar:focus-within {
  background-color: var(--ch-bg-card) !important;
  border-color: var(--ch-accent) !important;
  box-shadow: 0 0 0 3px var(--ch-accent-soft);
}
.searchbar input {
  background: transparent !important;
  color: var(--ch-text-primary) !important;
}
html.dark-mode .searchbar { background-color: var(--ch-bg-hover) !important; }

/* ===== Toolbars & icon buttons ===== */
#layout > div > .header a.button,
.toolbar a.button {
  color: var(--ch-text-secondary);
  border-radius: 50%;
}
#layout > div > .header a.button:hover,
.toolbar a.button:not(.disabled):hover {
  color: var(--ch-text-primary);
  background-color: var(--ch-bg-hover);
}

/* ===== Buttons ===== */
.btn-primary,
button.btn.btn-primary {
  background-color: var(--ch-accent) !important;
  border-color: var(--ch-accent) !important;
  border-radius: 10px;
  font-weight: 600;
  color: #fff !important;
}
.btn-primary:hover,
button.btn.btn-primary:hover {
  background-color: var(--ch-accent-hover) !important;
  border-color: var(--ch-accent-hover) !important;
  box-shadow: var(--ch-shadow-1);
}
.btn-secondary,
button.btn.btn-secondary {
  border-radius: 10px;
  font-weight: 600;
}
.btn-danger, button.btn.btn-danger { border-radius: 10px; font-weight: 600; }

/* ===== Forms ===== */
.form-control,
input.form-control,
select.custom-select,
textarea.form-control {
  border-color: var(--ch-border-strong);
  border-radius: 10px;
  color: var(--ch-text-primary);
  background-color: var(--ch-bg-card);
}
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-color: var(--ch-accent);
  box-shadow: 0 0 0 3px var(--ch-accent-soft);
  outline: none;
}
html.dark-mode .form-control,
html.dark-mode input.form-control,
html.dark-mode select.custom-select,
html.dark-mode textarea.form-control {
  background-color: var(--ch-bg-read);
  border-color: var(--ch-border-strong);
  color: var(--ch-text-primary);
}
input[type="checkbox"]:checked,
.custom-control-input:checked ~ .custom-control-label::before {
  accent-color: var(--ch-accent);
  background-color: var(--ch-accent);
  border-color: var(--ch-accent);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ch-accent);
  border-color: var(--ch-accent);
}

/* ===== Popup menus / dialogs ===== */
.popupmenu,
.popover {
  border-radius: 14px;
  box-shadow: var(--ch-shadow-2);
  border: 1px solid var(--ch-border);
  background-color: var(--ch-bg-card);
}
.popupmenu .menu li a,
.popover .menu li a {
  color: var(--ch-text-primary);
}
.popupmenu .menu li a:hover,
.popover .menu li a:hover {
  background-color: var(--ch-bg-hover);
  color: var(--ch-accent-ink);
}
.ui-dialog {
  border-radius: var(--ch-radius-lg);
  box-shadow: var(--ch-shadow-3);
  border: 1px solid var(--ch-border);
  background: var(--ch-bg-card);
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--ch-accent-soft);
  color: var(--ch-accent-ink);
  border-bottom: 1px solid var(--ch-border);
  font-weight: 700;
}

/* ===== Pagenav / footers ===== */
.pagenav .buttons,
.pagenav {
  color: var(--ch-text-secondary);
}

/* ===== Quota ===== */
.quota-widget { color: var(--ch-text-tertiary); }

/* ===== Scrollbars ===== */
* {
  scrollbar-color: var(--ch-border-strong) transparent;
}

/* ===== Message view (iframe content) ===== */
#message-header .subject,
#message-header > .subject a {
  color: var(--ch-text-primary);
  font-weight: 700;
  letter-spacing: -.2px;
}
#messagebody { color: var(--ch-text-primary); }

/* ===== Status messages / toasts ===== */
#messagestack div {
  border-radius: 12px;
  box-shadow: var(--ch-shadow-2);
  font-weight: 600;
}

/* ===== Compose ===== */
#compose-content { background-color: var(--ch-bg-card); }
.compose-headers td, .compose-headers label { color: var(--ch-text-secondary); }

/* ===== Layout: sidebar compose button (mockup "Napsat") ===== */
.ch-compose-wrap {
  padding: 10px 14px 16px;
  flex-shrink: 0;
}
a.ch-compose-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 22px 0 20px;
  border-radius: 14px;
  background: var(--ch-accent);
  box-shadow: var(--ch-shadow-1);
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow .15s, background .15s, transform .1s;
}
a.ch-compose-btn:hover {
  background: var(--ch-accent-hover);
  box-shadow: var(--ch-shadow-2);
  color: #fff;
}
a.ch-compose-btn:active { transform: scale(.98); }
a.ch-compose-btn::before {
  content: "edit";
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  line-height: 1;
  font-feature-settings: 'liga';
}
/* hide the default compose FAB in the task rail on desktop (we have the sidebar button) */
@media screen and (min-width: 769px) {
  #taskmenu span.action-buttons { display: none; }
}

#layout-sidebar > .header .header-title.username {
  font-weight: 700;
  font-size: 13px;
  color: var(--ch-text-secondary);
  text-align: left;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Folder list spacing like mockup nav */
#folderlist-content { padding: 0 4px; }
.folderlist li a { line-height: 38px; height: 38px; }

/* "Se hvězdičkou" virtual folder */
#mailboxlist .ch-starred a {
  display: flex !important;
  align-items: center;
  gap: 14px;
}
#mailboxlist .ch-starred a::before { display: none !important; content: none !important; }
.ch-starred-icon { display: inline-flex; align-items: center; }
.ch-starred-icon::before {
  font-family: 'Material Symbols Outlined';
  content: 'star';
  font-size: 20px;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: var(--ch-text-secondary);
}
#mailboxlist .ch-starred.selected > a {
  background-color: var(--ch-accent-soft) !important;
  color: var(--ch-accent-ink) !important;
  font-weight: 700;
}
#mailboxlist .ch-starred.selected .ch-starred-icon::before {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: var(--ch-accent-ink);
}

/* "Více" toggle + collapsed extra folders (Spam/Koš) */
#mailboxlist .ch-more-toggle a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  height: 38px !important;
  line-height: 38px !important;
  width: auto !important;
  margin: 1px 8px;
  padding: 0 12px !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ch-text-secondary);
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
#mailboxlist .ch-more-toggle a::before { display: none !important; content: none !important; }
#mailboxlist .ch-more-toggle a:hover { background: var(--ch-bg-hover); }
.ch-more-icon { display: inline-flex; align-items: center; }
.ch-more-icon::before {
  font-family: 'Material Symbols Outlined';
  content: 'expand_more';
  font-size: 20px;
}
.ch-more-toggle.open .ch-more-icon::before { content: 'expand_less'; }
#mailboxlist.ch-more-collapsed .ch-more-extra { display: none !important; }

/* "Štítky" section */
.ch-labels { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ch-border); }
.ch-labels-title {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--ch-text-tertiary);
}
.ch-labels-list { list-style: none; margin: 0; padding: 0; }
.ch-label a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  margin: 1px 8px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ch-text-primary);
  cursor: pointer;
}
.ch-label a:hover { background: var(--ch-bg-hover); }
.ch-label-dot::before {
  font-family: 'Material Symbols Outlined';
  content: 'label';
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
  color: inherit;
}

/* Message list header: lighter, no heavy border */
#messagelist-header { border-bottom: 0 !important; }
#layout-list > .searchbar { flex-shrink: 0; }

@media screen and (min-width: 769px) {
/* ===== Message list: table (list layout) ===== */
.messagelist thead th,
.messagelist thead td {
  background: var(--ch-bg-card) !important;
  color: var(--ch-text-secondary) !important;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--ch-border) !important;
}
.messagelist thead th a { color: var(--ch-text-secondary) !important; }
.messagelist tbody tr td {
  height: 42px;
  vertical-align: middle;
}
.messagelist td.size { color: var(--ch-text-tertiary); font-size: 12px; }
.messagelist td.date { color: var(--ch-text-secondary); font-size: 12px; }
.messagelist tr.unread td.date { color: var(--ch-text-primary); font-weight: 700; }

/* focus ring recolor */
.listing tbody tr:focus,
.listing li a:focus {
  outline-color: var(--ch-accent-soft-strong);
}

/* kill ugly blue selection artifacts:
   1) no native text-selection while clicking rows
   2) selected/focused rows use the purple palette, never elastic blue */
.messagelist tr.message,
.messagelist tr.message td {
  user-select: none;
  -webkit-user-select: none;
}
body.ch-cb-select .messagelist tr.message:has(td.selection input:checked),
body.ch-cb-select .messagelist tr.message:has(td.selection input:checked):hover {
  background-color: var(--ch-bg-selected) !important;
}
.messagelist tr.message.selected td,
.messagelist tr.message.selected td.subject span,
.messagelist tr.message.selected td.fromto,
.messagelist tr.message.selected td.date {
  background: transparent !important;
  color: var(--ch-text-primary) !important;
}
.messagelist tr.message.selected td.subject .ch-snippet { color: var(--ch-text-secondary) !important; }

/* focus ring only while navigating with the keyboard (html.ch-kbnav) */
.messagelist tbody tr:focus,
.messagelist tbody tr.focused {
  outline: none !important;
  box-shadow: none !important;
}
html.ch-kbnav .messagelist tbody tr:focus,
html.ch-kbnav .messagelist tbody tr.focused {
  box-shadow: inset 0 0 0 2px var(--ch-accent-soft-strong) !important;
}
::selection { background: var(--ch-accent-soft-strong); color: var(--ch-text-primary); }

/* ===== Message view toolbar: left-aligned, Material icons, label right of icon ===== */
html:not(.iframe) body.task-mail #layout-content > .header {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 2px;
  padding: 6px 12px !important;
  height: 58px !important;
  min-height: 58px !important;
  line-height: normal !important;
  overflow: visible !important;
}
/* back button: same 40px circle style as the inbox toolbar */
html:not(.iframe) body.task-mail #layout-content > .header a.back-list-button {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  color: var(--ch-text-secondary);
  overflow: visible !important;
}
html:not(.iframe) body.task-mail #layout-content > .header a.back-list-button:hover {
  background: var(--ch-bg-hover);
  color: var(--ch-text-primary);
}
html:not(.iframe) body.task-mail #layout-content > .header a.back-list-button::before {
  font-family: 'Material Symbols Outlined' !important;
  content: 'arrow_back' !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-feature-settings: 'liga';
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
html:not(.iframe) body.task-mail #layout-content > .header a.back-list-button .inner { display: none !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu {
  display: flex !important;
  align-items: center !important;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap;
  overflow: visible;
  position: static !important;
  top: auto !important;
  height: auto !important;
  line-height: normal !important;
  transform: none !important;
  align-self: center !important;
  list-style: none;
}
/* buttons are wrapped in <li> - make the wrappers neutral flex cells */
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu li,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu span.dropbutton {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* no underline, no leftover elastic backgrounds/borders on the buttons */
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a:hover,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a:focus,
html:not(.iframe) body.task-mail #layout-content > .header a.back-list-button,
html:not(.iframe) body.task-mail #layout-content > .header a.back-list-button:hover {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a {
  background: transparent;
}
/* simplify: single Forward / Reply-all buttons, no dropdown variants */
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.dropdown {
  display: none !important;
}
/* Reply-all only makes sense with multiple recipients (chost.js sets the class) */
html:not(.iframe) body.task-mail:not(.ch-multi-rcpt) #layout-content > .header .toolbar.menu a.reply-all {
  display: none !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 20px;
  color: var(--ch-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1 !important;
  overflow: visible !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto;
  align-self: center !important;
  text-overflow: clip !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a:hover {
  background: var(--ch-bg-hover);
  color: var(--ch-text-primary);
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a::before {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-feature-settings: 'liga';
  text-transform: none;
  letter-spacing: normal;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a .inner {
  display: inline !important;
  font-size: 14px;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  text-indent: 0 !important;
  white-space: nowrap;
}
/* list controls do not belong in the message view toolbar */
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.select,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.threads,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.options {
  display: none !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.reply::before { content: 'reply' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.reply-all::before { content: 'reply_all' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.forward::before { content: 'forward' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.delete::before { content: 'delete' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.print::before { content: 'print' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.markmessage::before { content: 'mark_email_read' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.more::before { content: 'more_vert' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.prev::before { content: 'chevron_left' !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.next::before { content: 'chevron_right' !important; }
/* icon-only buttons */
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.prev .inner,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.next .inner,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.more .inner,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.print .inner,
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.dropdown .inner {
  display: none !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.dropdown {
  padding: 0 4px !important;
}
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.dropdown::before { content: 'expand_more' !important; font-size: 16px !important; }
html:not(.iframe) body.task-mail #layout-content > .header .toolbar.menu a.compose { display: none !important; }

} /* end desktop-only: list table + message-view toolbar */

/* ===== Compose: underlined fields like mockup ===== */
#compose-headers .form-control,
#compose-headers .input-group .form-control,
#compose_from select.form-control {
  border: 0;
  border-bottom: 1px solid var(--ch-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#compose-headers .form-control:focus {
  border-bottom-color: var(--ch-accent);
  box-shadow: none;
}
#compose-headers .col-form-label { color: var(--ch-text-secondary); font-weight: 600; }
#composebodycontainer textarea {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

/* ===== Message view (detail) ===== */
#message-header {
  border-bottom: 1px solid var(--ch-border);
}
#message-header .subject a,
#messageheader .subject,
h2.subject {
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ch-text-primary);
}
#message-header .header-content .from,
.message-partheaders {
  color: var(--ch-text-secondary);
}
#messagebody .message-part,
#messagebody .message-htmlpart {
  color: var(--ch-text-primary);
  line-height: 1.6;
}
/* reply buttons area */
#message-footer .buttons a.button,
.message-footer .btn {
  border: 1.5px solid var(--ch-border-strong);
  border-radius: 12px;
  font-weight: 600;
  color: var(--ch-text-secondary);
}
#message-footer .buttons a.button:hover {
  background: var(--ch-accent-soft);
  border-color: var(--ch-accent);
  color: var(--ch-accent-ink);
}

/* ===== Logo ===== */
#layout-menu .popover-header img {
  max-height: 40px;
  padding: 10px 6px 6px;
}
/* logo keeps its original colors in dark mode (owner's request) */
html.dark-mode #layout-menu .popover-header img,
html.dark-mode #logo,
html.dark-mode .ch-tb-logo img {
  filter: none !important;
}

/* compose page inside the floating panel (extwin): slim toolbar with the
   useful actions (attach, signature, save draft, options); no big title */
body.ch-extwin { background: var(--ch-bg-card) !important; }
body.ch-extwin #compose-content { border: 0; }
body.ch-extwin #layout-content > .header {
  display: flex !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: 44px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ch-border) !important;
  justify-content: flex-start !important;
  padding: 0 8px !important;
}
body.ch-extwin #layout-content > .header .header-title { display: none !important; }
body.ch-extwin #layout-content > .header a.task-menu-button { display: none !important; }
body.ch-extwin #layout-content > .header .toolbar.menu,
body.ch-extwin #layout-content > .header .toolbar.menu.popupmenu {
  display: flex !important;
  align-items: center;
  gap: 2px;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.ch-extwin #layout-content > .header .toolbar.menu a {
  width: 38px; height: 38px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-secondary);
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
}
body.ch-extwin #layout-content > .header .toolbar.menu a::before { font-size: 18px; margin: 0 !important; }
body.ch-extwin #layout-content > .header .toolbar.menu a:hover { background: var(--ch-bg-hover); color: var(--ch-text-primary); }
body.ch-extwin #layout-content > .header .toolbar.menu a .inner { display: none !important; }
body.ch-extwin #layout-content > .header .toolbar.menu .spacer { display: none; }
body.ch-extwin #layout-content > .header .toolbar.menu a.attach {
  display: inline-flex !important;
}
body.ch-extwin #layout-content > .header .toolbar.menu li,
body.ch-extwin #layout-content > .header .toolbar.menu li.hidden-small {
  display: inline-flex !important;
  list-style: none;
  margin: 0; padding: 0;
}
body.ch-extwin #layout-content > .header .toolbar.menu li.hidden-big { display: none !important; }
body.ch-extwin #layout-content > .header .toolbar.menu a.encrypt,
body.ch-extwin #layout-content > .header .toolbar.menu a.dropdown,
body.ch-extwin #layout-content > .header a.toolbar-menu-button { display: none !important; }

/* dark searchbar override lives with the topbar rules */
html.dark-mode #chost-topbar-search .searchbar,
html.dark-mode #chost-topbar-search .searchbar.menu {
  background: var(--ch-bg-hover) !important;
  box-shadow: none;
}

/* ===== Gmail-style compose page (inside the floating panel) ===== */
body.ch-gmail #layout-content > .header { display: none !important; }
body.ch-gmail #compose_from { display: none !important; }
body.ch-gmail .compose-headers .col-form-label,
body.ch-gmail .compose-headers label { display: none !important; }
body.ch-gmail .compose-headers .col-10 {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
}
body.ch-gmail .compose-headers .form-group.row {
  margin: 0 !important;
  border-bottom: 1px solid var(--ch-border);
  padding: 4px 8px;
}
body.ch-gmail .compose-headers .input-group,
body.ch-gmail .compose-headers ul.form-control,
body.ch-gmail .compose-headers input.form-control,
body.ch-gmail #compose-subject {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body.ch-gmail .compose-headers .input-group-append { display: none !important; }
body.ch-gmail #compose-subject { font-size: 14px; padding: 10px 8px; }
body.ch-gmail .ch-cc-links {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
}
body.ch-gmail .ch-cc-links a {
  font-size: 13px;
  color: var(--ch-text-secondary);
  text-decoration: none;
}
body.ch-gmail .ch-cc-links a:hover { color: var(--ch-accent-ink); }

/* editor: clean body, toolbar hidden until the A button toggles it */
body.ch-gmail:not(.ch-show-toolbar) .tox-editor-header { display: none !important; }
body.ch-gmail .tox-tinymce { border: 0 !important; }
body.ch-gmail .formbuttons { display: none !important; }
body.ch-gmail #compose-content { padding-bottom: 66px; }

/* bottom action bar */
.ch-cp-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px 14px;
  background: var(--ch-bg-card);
  border-top: 1px solid var(--ch-border);
  z-index: 30;
}
.ch-cp-bottom .ch-send {
  background: var(--ch-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-right: 10px;
}
.ch-cp-bottom .ch-send:hover { background: var(--ch-accent-hover); box-shadow: var(--ch-shadow-1); }
.ch-cp-bottom .ch-cb {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-secondary);
  text-decoration: none;
}
.ch-cp-bottom .ch-cb:hover { background: var(--ch-bg-hover); color: var(--ch-text-primary); }
.ch-cp-bottom .ch-cb::before {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
  font-feature-settings: 'liga';
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap;
}
.ch-cb-format::before { content: 'format_color_text'; }
.ch-cb-attach::before { content: 'attach_file'; }
.ch-cb-link::before { content: 'insert_link'; }
.ch-cb-emoji::before { content: 'mood'; }
.ch-cb-trash::before { content: 'delete'; }
.ch-cb-spacer { flex: 1; }
.ch-cp-bottom .ch-cb-trash:hover { color: #e11d48; }
body.ch-gmail.ch-show-toolbar .ch-cb-format { background: var(--ch-accent-soft); color: var(--ch-accent-ink); }

/* ===== Floating compose panel (mockup) ===== */
.ch-compose-panel {
  position: fixed;
  bottom: 0;
  right: 24px;
  width: 620px;
  height: 620px;
  max-height: calc(100vh - 80px);
  background: var(--ch-bg-card);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--ch-shadow-3);
  display: flex;
  flex-direction: column;
  z-index: 60;
  overflow: hidden;
  border: 1px solid var(--ch-border);
  border-bottom: 0;
}
.ch-compose-panel.minimized { height: 44px; }
.ch-compose-panel.minimized .ch-cp-frame { display: none; }
.ch-compose-panel.maximized {
  width: min(960px, calc(100vw - 48px));
  height: calc(100vh - 100px);
}
.ch-cp-header {
  background: var(--ch-accent-soft);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 6px 0 16px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.ch-cp-title {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  color: var(--ch-accent-ink);
}
.ch-cp-actions { display: flex; align-items: center; }
.ch-cp-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-accent-ink);
  text-decoration: none;
}
.ch-cp-btn:hover { background: var(--ch-accent-soft-strong); }
.ch-cp-btn::before {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  line-height: 1;
  font-feature-settings: 'liga';
}
.ch-cp-min::before { content: 'minimize'; }
.ch-cp-max::before { content: 'open_in_full'; }
.ch-cp-close::before { content: 'close'; }
.ch-cp-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--ch-bg-card);
}

/* ===== Mobile: no left rail; hamburger opens a top-sheet menu ===== */
@media screen and (max-width: 768px) {
  #layout-menu:not(.popover) { display: none !important; }
  a.task-menu-button { display: inline-flex !important; }

  #layout-menu.popover {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
    z-index: 300;
    background: var(--ch-bg-card) !important;
    border-radius: 0 0 18px 18px;
    box-shadow: var(--ch-shadow-3);
    padding: 4px 8px 14px;
  }
  #layout-menu.popover .popover-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    height: 48px;
    padding: 0 !important;
  }
  #layout-menu.popover .popover-header img { max-height: 30px; }
  #layout-menu.popover .popover-header a { display: none !important; }

  #layout-menu.popover #taskmenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100% !important;
    background: transparent !important;
  }
  #layout-menu.popover #taskmenu span.action-buttons,
  #layout-menu.popover #taskmenu span.special-buttons { display: contents !important; }
  #layout-menu.popover #taskmenu a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto !important;
    min-width: 64px;
    height: auto !important;
    padding: 10px 10px !important;
    margin: 2px !important;
    border-radius: 12px;
    font-size: 11px;
    color: var(--ch-text-secondary);
    text-decoration: none !important;
  }
  #layout-menu.popover #taskmenu a::before {
    margin: 0 !important;
    height: auto !important;
    font-size: 22px;
  }
  #layout-menu.popover #taskmenu a .inner {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    font-size: 11px;
  }
  #layout-menu.popover #taskmenu a.selected {
    background: var(--ch-accent-soft) !important;
    color: var(--ch-accent-ink) !important;
  }
  #ch-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 250;
  }

  /* sheet header: bigger clickable logo + visible close (×) */
  #layout-menu.popover .popover-header {
    justify-content: space-between !important;
    padding: 2px 4px !important;
    height: 52px !important;
  }
  #layout-menu.popover .popover-header img {
    max-height: 40px !important;
    max-width: 160px !important;
    padding: 4px 8px;
    cursor: pointer;
  }
  #layout-menu.popover .popover-header a.cancel {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: var(--ch-text-secondary);
    font-size: 0;
  }
  #layout-menu.popover .popover-header a.cancel::before {
    font-family: 'Material Symbols Outlined';
    content: 'close';
    font-size: 24px;
    font-feature-settings: 'liga';
  }
  #layout-menu.popover .popover-header a.cancel .inner { display: none !important; }

  /* Napsat tile: readable white on purple */
  #layout-menu.popover #taskmenu a.compose {
    background: var(--ch-accent) !important;
    color: #fff !important;
  }
  #layout-menu.popover #taskmenu a.compose::before { color: #fff !important; }
  #layout-menu.popover #taskmenu a.compose .inner { color: #fff !important; }

  /* list header: no 3-dots options button on the mailbox overview */
  #layout-list .header a.toolbar-menu-button { display: none !important; }

  /* tap on a row: NO visual change at all (no blue, no grey flash) */
  * { -webkit-tap-highlight-color: transparent !important; }
  .messagelist tr.message.selected,
  .messagelist tr.message.focused,
  .messagelist tr.message:focus,
  .messagelist tr.message:active {
    background: var(--ch-bg-read) !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .messagelist tr.message.unread.selected,
  .messagelist tr.message.unread:active,
  .messagelist tr.message.unread.focused {
    background: var(--ch-bg-unread) !important;
  }
  .messagelist tr.message.selected td,
  .messagelist tr.message.selected td span,
  .messagelist tr.message:active td,
  .messagelist tr.message:active td span {
    background: transparent !important;
  }

  /* list header: refresh out (pull-to-refresh exists), hamburger takes its place */
  #layout-list .header a.refresh { display: none !important; }
  #layout-list .header a.task-menu-button {
    order: 99;
    margin-left: auto !important;
  }

  /* compose FAB (pencil): brand purple, not elastic blue */
  .floating-action-buttons a.button,
  .floating-action-buttons a.button.create,
  .floating-action-buttons a.button:focus {
    background: var(--ch-accent) !important;
    color: #fff !important;
    box-shadow: var(--ch-shadow-2) !important;
  }

  /* pull-to-refresh indicator */
  #ch-ptr {
    display: none;
    text-align: center;
    padding: 10px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-text-secondary);
  }
  #ch-ptr.show { display: block; }
}

/* no loading spinner/toast flashes anywhere (GLOBAL - also mobile!) */
.iframe-loader { display: none !important; }
#messagestack .loading { display: none !important; }

/* ===== Mobile message rows: two-line Gmail-like layout =====
   (layout=desktop renders table columns which get crushed on phones) */
@media screen and (max-width: 768px) {
  .messagelist thead { display: none !important; }
  .messagelist tr.message {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--ch-border);
    background: var(--ch-bg-read);
    position: relative;
  }
  .messagelist tr.message.unread { background: var(--ch-bg-unread); }
  .messagelist tr.message.unread::after {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ch-accent);
  }
  .messagelist tr.message td {
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto;
    line-height: 1.4;
  }
  .messagelist td.threads,
  .messagelist td.size,
  .messagelist td.selection,
  .messagelist td.status { display: none !important; }
  .messagelist td.fromto {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--ch-text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .messagelist tr.unread td.fromto { font-weight: 800; }
  .messagelist td.date {
    order: 2;
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 12px !important;
    color: var(--ch-text-secondary) !important;
    white-space: nowrap;
  }
  .messagelist tr.unread td.date { color: var(--ch-text-primary) !important; font-weight: 700; }
  .messagelist td.flag { order: 3; flex: 0 0 22px; text-align: right; }
  .messagelist td.attachment { order: 4; flex: 0 0 auto; margin-left: 4px; }
  .messagelist td.subject span.msgicon,
  .messagelist td.subject span.branch { display: none !important; }
  .messagelist td.subject {
    order: 5;
    flex: 1 1 100% !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0;
    line-height: 1.35 !important;
    font-size: 13px !important;
    color: var(--ch-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .messagelist td.subject span.subject {
    color: var(--ch-text-primary);
    font-size: 13px !important;
    width: auto !important;
  }
  .messagelist tr.unread td.subject span.subject { font-weight: 700; }
}

/* ===== Dark mode: hard overrides over elastic's dark palette =====
   Elastic's dark rules carry the html.dark-mode prefix and outrank our
   unprefixed component rules - this layer re-asserts the chost palette. */
html.dark-mode body,
html.dark-mode #layout { background: #131019 !important; }
html.dark-mode #layout-sidebar { background: #131019 !important; }
html.dark-mode #layout-list,
html.dark-mode #layout-content { background: var(--ch-bg-card) !important; }
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: transparent !important;
  color: var(--ch-text-primary) !important;
  border-color: var(--ch-border) !important;
}
html.dark-mode a { color: var(--ch-accent); }

/* message list */
html.dark-mode .messagelist tr.message { background: var(--ch-bg-read) !important; border-color: #131019 !important; }
html.dark-mode .messagelist tr.message.unread { background: var(--ch-bg-unread) !important; }
html.dark-mode .messagelist tr.message:hover { background: var(--ch-bg-hover) !important; }
html.dark-mode body.ch-cb-select .messagelist tr.message:has(td.selection input:checked) { background: var(--ch-bg-selected) !important; }
html.dark-mode .messagelist td,
html.dark-mode .messagelist td.subject span.subject,
html.dark-mode .messagelist td.fromto { color: var(--ch-text-primary) !important; background: transparent !important; }
html.dark-mode .messagelist td.date,
html.dark-mode .messagelist td.subject .ch-snippet { color: var(--ch-text-secondary) !important; }
html.dark-mode .messagelist thead th,
html.dark-mode .messagelist thead td { background: var(--ch-bg-card) !important; color: var(--ch-text-secondary) !important; }

/* folders / listings */
html.dark-mode .folderlist li a,
html.dark-mode .listing li a { background: transparent !important; color: var(--ch-text-primary) !important; }
html.dark-mode .folderlist li a:hover,
html.dark-mode .listing li a:hover { background: var(--ch-bg-hover) !important; }
html.dark-mode .folderlist li a:active,
html.dark-mode #mailboxlist li a:active,
html.dark-mode .listing li a:active {
  background: var(--ch-bg-hover) !important;
}
html.dark-mode .folderlist li a:focus,
html.dark-mode #mailboxlist li a:focus,
html.dark-mode .listing li a:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
html.dark-mode .folderlist li.selected > a:focus,
html.dark-mode #mailboxlist li.selected > a:focus {
  background: var(--ch-accent-soft) !important;
}
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li a.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li a.selected {
  background: var(--ch-accent-soft) !important;
  color: var(--ch-accent-ink) !important;
}
html.dark-mode .listing tbody td { background: transparent !important; color: var(--ch-text-primary) !important; }

/* search */
html.dark-mode .searchbar { background: var(--ch-bg-hover) !important; border-color: transparent !important; }
html.dark-mode .searchbar input { background: transparent !important; color: var(--ch-text-primary) !important; }

/* toolbars */
html.dark-mode #layout > div > .header a.button,
html.dark-mode .toolbar a.button,
html.dark-mode #layout-content > .header .toolbar.menu a { color: var(--ch-text-secondary) !important; background: transparent; }
html.dark-mode #layout > div > .header a.button:hover,
html.dark-mode .toolbar a.button:not(.disabled):hover,
html.dark-mode #layout-content > .header .toolbar.menu a:hover {
  background: var(--ch-bg-hover) !important;
  color: var(--ch-text-primary) !important;
}

/* popups / dialogs / dropdowns */
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .dropdown-menu,
html.dark-mode .ui-dialog,
html.dark-mode .ui-widget-content,
html.dark-mode .ch-tags-menu {
  background: #241f2e !important;
  color: var(--ch-text-primary) !important;
  border-color: var(--ch-border) !important;
}
html.dark-mode .popupmenu .menu li a,
html.dark-mode .popover .menu li a,
html.dark-mode .dropdown-item,
html.dark-mode .ch-tags-menu a { color: var(--ch-text-primary) !important; background: transparent !important; }
html.dark-mode .popupmenu .menu li a:hover,
html.dark-mode .popover .menu li a:hover,
html.dark-mode .dropdown-item:hover,
html.dark-mode .ch-tags-menu a:hover { background: var(--ch-bg-hover) !important; }
html.dark-mode .ui-dialog .ui-dialog-titlebar {
  background: var(--ch-accent-soft) !important;
  color: var(--ch-accent-ink) !important;
  border-color: var(--ch-border) !important;
}

/* forms / buttons */
html.dark-mode .form-control,
html.dark-mode input.form-control,
html.dark-mode select.custom-select,
html.dark-mode textarea.form-control {
  background: var(--ch-bg-read) !important;
  border-color: var(--ch-border-strong) !important;
  color: var(--ch-text-primary) !important;
}
html.dark-mode .btn-secondary,
html.dark-mode button.btn.btn-secondary {
  background: var(--ch-bg-hover) !important;
  border-color: var(--ch-border-strong) !important;
  color: var(--ch-text-primary) !important;
}
html.dark-mode .input-group-text { background: var(--ch-bg-hover) !important; border-color: var(--ch-border-strong) !important; color: var(--ch-text-secondary) !important; }

/* pagenav */
html.dark-mode .pagenav,
html.dark-mode .pagenav a,
html.dark-mode .pagenav-text { color: var(--ch-text-secondary) !important; background: transparent !important; }
html.dark-mode .pagenav.ch-in-header a:hover { background: var(--ch-bg-hover) !important; }

/* message view (also inside the preview iframe page) */
html.dark-mode #message-header { border-color: var(--ch-border) !important; }
html.dark-mode #message-header .subject,
html.dark-mode #message-header .subject a,
html.dark-mode #messagebody,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart { color: var(--ch-text-primary) !important; background: transparent !important; }
html.dark-mode .header-links a { color: var(--ch-accent) !important; }
html.dark-mode.iframe body,
html.dark-mode.iframe #layout-content { background: var(--ch-bg-card) !important; }

/* mobile top-sheet menu */
html.dark-mode #layout-menu.popover { background: #241f2e !important; }
html.dark-mode #layout-menu.popover #taskmenu a { color: var(--ch-text-secondary) !important; }
html.dark-mode #layout-menu.popover .popover-header img { filter: none; }

/* compose (floating panel page + bottom bar) */
html.dark-mode .ch-compose-panel { background: var(--ch-bg-card); border-color: var(--ch-border); }
html.dark-mode body.ch-extwin { background: var(--ch-bg-card) !important; }
html.dark-mode .ch-cp-bottom { background: var(--ch-bg-card) !important; border-color: var(--ch-border) !important; }
html.dark-mode body.ch-gmail .compose-headers .form-group.row { border-color: var(--ch-border) !important; }
html.dark-mode .tox .tox-edit-area__iframe { background: var(--ch-bg-card) !important; }

/* toasts */
html.dark-mode #messagestack div { background: #eeeaf6 !important; color: #1b1722 !important; }

/* sidebar: no elastic borders/separator lines, proper pill for the active item */
html.dark-mode #mailboxlist li,
html.dark-mode .folderlist li,
html.dark-mode .listing li {
  border: 0 !important;
  background: transparent !important;
}
html.dark-mode .folderlist li a,
html.dark-mode #mailboxlist li a {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px;
}
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li a.selected,
html.dark-mode #mailboxlist li.selected > a {
  background: var(--ch-accent-soft) !important;
  color: var(--ch-accent-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.dark-mode .nav-divider { background: var(--ch-border); }

/* label names are normal text; only the dot carries the color */
html.dark-mode #ch-labels .ch-label a,
html.dark-mode #ch-labels .ch-label-name { color: var(--ch-text-primary) !important; }
html.dark-mode #ch-labels .ch-label a.active { color: var(--ch-accent-ink) !important; }
html.dark-mode .ch-labels-title { color: var(--ch-text-tertiary) !important; }
html.dark-mode .ch-more-toggle a,
html.dark-mode .ch-starred a { color: var(--ch-text-primary) !important; }

/* inputs: neutral placeholder/caret (no elastic green) */
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode .searchbar input::placeholder {
  color: var(--ch-text-tertiary) !important;
  opacity: 1;
}
html.dark-mode input,
html.dark-mode textarea { caret-color: var(--ch-text-primary); }

/* mobile tap highlight in dark */
@media screen and (max-width: 768px) {
  html.dark-mode .messagelist tr.message.selected,
  html.dark-mode .messagelist tr.message.focused,
  html.dark-mode .messagelist tr.message:active {
    background: var(--ch-bg-hover) !important;
  }
  html.dark-mode #ch-ptr { color: var(--ch-text-secondary); }
}

/* ===== Misc dark-mode fixes ===== */
html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .messagelist .subject span.subject,
html.dark-mode .messagelist span.fromto {
  color: var(--ch-text-primary);
}
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog {
  background-color: #241f2e;
}