/* =============================================================================
   FSMC — First Specialist Medical Clinics  |  Roundcube Webmail Skin
   Based on the My Clinic skin, recolored to the FSMC maroon brand palette.
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */
:root {
  /* Maroon brand (dark -> light) */
  --p900: #2c0712;
  --p800: #3a0a1c;   /* main-active (selected / deepest) */
  --p700: #551029;   /* main (sidebar bg) */
  --p600: #551029;   /* primary (links, buttons) */
  --p500: #7a1a3d;   /* main-hover */
  --p400: #a33a5c;
  --p300: #c98298;
  --p200: #e6c3ce;
  --p100: #f5e8ec;   /* selection bg (selected mail row) */
  --p50:  #fbf3f5;

  /* Gold accent (star / flag) */
  --g700: #7c6730;
  --g600: #997e44;
  --g500: #c0a060;   /* accent */
  --g400: #cdb479;
  --g300: #dac897;
  --g200: #e9dcbd;
  --g100: #f3ecd9;
  --g50:  #faf6ec;

  /* Neutrals */
  --bg:      #f7f7f7;
  --surface: #ffffff;
  --border:  #e0e0e0;
  --text:    #333333;
  --muted:   #777777;

  /* Status */
  --red:     #c0392b;
  --red-bg:  #fdecea;
  --green:   #1e8449;
  --green-bg:#eafaf1;

  /* Layout */
  --h-header:    52px;
  --w-taskmenu:  64px;
  --w-sidebar:   220px;
  --w-list:      380px;
  --h-statusbar: 26px;

  /* Type */
  --font: 'Google Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs:   13px;

  /* Radii */
  --r2:  2px;
  --r4:  4px;
  --r6:  6px;
  --r8:  8px;
  --r12: 12px;
  --r99: 99px;

  /* Shadows */
  --s1: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --s2: 0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);
  --s3: 0 8px 28px rgba(0,0,0,.16), 0 4px 8px rgba(0,0,0,.10);
}

/* =============================================================================
   2. RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--fs);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--p600); text-decoration: none; transition: color .15s; }
a:hover { color: var(--p500); text-decoration: underline; }
img { max-width: 100%; height: auto; vertical-align: middle; }
ul, ol { list-style: none; }
::selection { background: var(--p100); color: var(--p900); }

/* =============================================================================
   3. APP SHELL — CSS GRID
   ============================================================================= */
#layout {
  display: grid;
  grid-template-columns: var(--w-taskmenu) var(--w-sidebar) 1fr;
  grid-template-rows: var(--h-header) 1fr var(--h-statusbar);
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh; /* tracks the *visible* viewport (excludes mobile address bar) */
  height: var(--app-height, 100dvh); /* JS-measured exact height (most reliable) */
  overflow: hidden;
}

/* =============================================================================
   4. HEADER  (#layout-menu — row 1, spans all columns)
   ============================================================================= */
#layout-menu {
  grid-column: 1 / -1;
  grid-row: 1;
  background: linear-gradient(135deg, var(--p800) 0%, var(--p600) 100%);
  border-bottom: 2px solid var(--g500);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  box-shadow: var(--s1);
  z-index: 10;
}

#layout-menu .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--g200);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

/* The logo object renders as the <img> itself (img#logo.logo), so constrain
   the image element directly — not a child img. */
#layout-menu .logo,
#layout-menu #logo,
#layout-menu img.logo,
#layout-menu .logo img {
  height: 30px;
  max-height: 30px;
  width: auto;
  flex-shrink: 0;
}
/* FSMC mark is solid maroon, so it disappears on the maroon header — sit it in a
   white rounded chip so it stays visible. */
#layout-menu #logo,
#layout-menu img.logo,
#layout-menu .logo img {
  height: 28px;
  max-height: 28px;
  background: #fff;
  padding: 4px 7px;
  border-radius: var(--r6);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
#layout-menu .logo:hover { color: var(--g100); text-decoration: none; }

/* Logo links back to the mail (inbox) view */
#layout-menu .logo-link {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
#layout-menu .logo-link:hover { opacity: .85; }

/* Brand name beside the logo (English + Arabic) */
#layout-menu .brand-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  flex-shrink: 0;
  margin-inline-start: 2px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
}

#layout-menu .brand-name .brand-en {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}

#layout-menu .brand-name .brand-ar {
  color: var(--g300);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
}

/* The popover-header is a mobile-only back button — always hidden on desktop */
.popover-header { display: none !important; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions a,
.header-actions button {
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r4);
  padding: 5px 14px;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; /* FIXED: explicit props, no layout transitions */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.header-actions a:hover,
.header-actions button:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
}

/* =============================================================================
   5. TASK SWITCHER  (#taskmenu — row 2, column 1)
   ============================================================================= */
#taskmenu {
  grid-row: 2;
  grid-column: 1;
  background: var(--p900);
  border-right: 1px solid var(--p800);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

#taskmenu::-webkit-scrollbar { display: none; }

#taskmenu a,
#taskmenu .button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 48px;
  border-radius: var(--r6);
  color: rgba(255,255,255,.5);
  font-size: 10px; /* FIXED: 9px label was illegible */
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; /* FIXED: explicit props, no layout transitions */
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  font-family: var(--font);
  padding: 5px 2px 4px;
  gap: 2px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
}

#taskmenu a:hover,
#taskmenu .button:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
  border-left-color: var(--g400);
  text-decoration: none;
}

#taskmenu a.selected,
#taskmenu a.active,
#taskmenu .button.selected,
#taskmenu .button.active {
  background: var(--p800);
  color: #fff;
  border-left-color: var(--g500);
}

#taskmenu .inner {
  display: block;
  font-size: 10px; /* FIXED: 8px was illegible */
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#taskmenu .material-icons { font-size: 20px; line-height: 1; }

/* Task-rail icons (Material) — rendered above the text label */
#taskmenu a::before {
  font-family: 'Material Icons';
  font-size: 21px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#taskmenu a.compose::before  { content: 'edit'; }
#taskmenu a.mail::before     { content: 'mail'; }
#taskmenu a.contacts::before { content: 'contacts'; }
#taskmenu a.settings::before { content: 'settings'; }
#taskmenu a.about::before    { content: 'info'; }
#taskmenu a.logout::before   { content: 'logout'; }

/* Group compose button separately */
#taskmenu .action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Push about/logout to bottom */
#taskmenu .special-buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* =============================================================================
   6. SIDEBAR  (#layout-sidebar — row 2, column 2)
   ============================================================================= */
#layout-sidebar {
  grid-row: 2;
  grid-column: 2;
  background: var(--p700);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.06);
}

#layout-sidebar .header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 40px;
  min-height: 40px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  overflow: hidden;
}

#layout-sidebar .header .header-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(255,255,255,.65);
  font-weight: 600;
}

#layout-sidebar .header .button {
  color: rgba(255,255,255,.4);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s, color .15s; /* FIXED: explicit props */
  text-decoration: none;
  flex-shrink: 0;
  font-size: 12px;
}

#layout-sidebar .header .button:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Hide "Back" button on desktop — only needed on mobile */
#layout-sidebar .header .back-list-button { display: none; }

/* Folder scroller */
#folderlist-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Folder tree */
.treelist,
.folderlist {
  padding: 4px 0;
  margin: 0;
}

.treelist li,
.folderlist li {
  list-style: none;
  margin: 0;
}

.treelist li a,
.folderlist li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 16px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .12s, color .12s, border-color .12s; /* FIXED: explicit props */
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
}

.treelist li a:hover,
.folderlist li a:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
  text-decoration: none;
}

.treelist li.selected > a,
.folderlist li.selected > a,
.treelist li a.selected,
.folderlist li a.selected {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-left-color: var(--g500);
  font-weight: 600;
}

/* Unread count badge */
.treelist li a .unreadcount,
.folderlist li a .unreadcount {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--g500);
  color: var(--p900);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--r99);
  min-width: 16px;
  text-align: center;
  line-height: 1.6;
}

/* Folder-type icons (Material) */
.folderlist li > a::before {
  font-family: 'Material Icons';
  content: 'folder';
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: .9;
}
.folderlist li.inbox   > a::before { content: 'inbox'; }
.folderlist li.drafts  > a::before { content: 'drafts'; }
.folderlist li.sent    > a::before { content: 'send'; }
.folderlist li.junk    > a::before { content: 'report'; }
.folderlist li.trash   > a::before { content: 'delete'; }
.folderlist li.archive > a::before { content: 'archive'; }

/* Subfolder indentation (icons keep their own width, so nudge text in) */
.treelist li li a,
.folderlist li li a {
  padding-left: 28px;
}

.treelist li li li a,
.folderlist li li li a {
  padding-left: 40px;
}

/* Expand/collapse dropdown arrow for folders that contain subfolders.
   Roundcube injects <div class="treetoggle collapsed|expanded"> only when a
   folder actually has children, so this arrow appears for those rows only. */
.treelist li,
.folderlist li {
  position: relative;
}

.treelist li > div.treetoggle,
.folderlist li > div.treetoggle {
  position: absolute;
  top: 0;
  bottom: auto;
  right: 6px;
  height: 34px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: rgba(255,255,255,.45);
  transition: color .12s;
}

.treelist li > div.treetoggle:hover,
.folderlist li > div.treetoggle:hover {
  color: rgba(255,255,255,.95);
}

.treelist li > div.treetoggle::before,
.folderlist li > div.treetoggle::before {
  font-family: 'Material Icons';
  content: 'chevron_right';
  font-size: 18px;
  line-height: 1;
}

.treelist li > div.treetoggle.expanded::before,
.folderlist li > div.treetoggle.expanded::before {
  content: 'expand_more';
}

/* Keep folder name / unread badge clear of the arrow */
.treelist li:has(> div.treetoggle) > a,
.folderlist li:has(> div.treetoggle) > a {
  padding-right: 30px;
}

/* Sidebar footer (quota) */
#layout-sidebar .footer {
  padding: 6px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 10px;
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
}

#quotadisplay { font-size: 10px; }

/* =============================================================================
   7. CONTENT AREA  (#layout-list — row 2, column 3)
      Inner grid: message list panel (left) | preview pane (right)
   ============================================================================= */
#layout-list {
  grid-row: 2;
  grid-column: 3;
  display: grid;
  grid-template-columns: var(--w-list) 1fr;
  overflow: hidden;
  background: var(--surface);
}

/* -------------------------------------------------------------------
   7a. MESSAGE LIST PANEL  (left column of inner grid)
   ------------------------------------------------------------------- */
#messagelist-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  min-width: 0;
}

/* Toolbar above message list */
#messagelist-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--p600);
  min-height: 40px;
  flex-shrink: 0;
}

#messagelist-header .header-title {
  flex: 1;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#messagelist-header .button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.0);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r4);
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; /* FIXED: explicit props */
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

#messagelist-header .button:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
}

#messagelist-header .button.selected,
#messagelist-header .button.active {
  background: rgba(255,255,255,.18);
  color: var(--g200);
}

/* Disable hidden desktop-only nav buttons */
#messagelist-header .back-sidebar-button,
#messagelist-header .task-menu-button,
#messagelist-header .toolbar-menu-button { display: none; }

/* Search bar */
.searchbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  background: var(--p50);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* The search input is wrapped in a <form>; that form is the real flex child
   of .searchbar, so it must grow for the input to actually get wider. */
.searchbar form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  margin: 0;
}

.searchbar form input[type="text"],
.searchbar form input[type="search"],
.searchbar input[type="text"],
.searchbar input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r99);
  padding: 5px 13px;
  font-size: 12px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color .15s, box-shadow .15s; /* FIXED: explicit props */
  min-width: 0;
}

.searchbar input:focus {
  border-color: var(--p400);
  box-shadow: 0 0 0 2px var(--p100);
  outline: none;
}

.searchbar .button {
  flex-shrink: 0;
  color: var(--muted);
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s, color .15s; /* FIXED: explicit props */
  font-size: 12px;
  text-decoration: none;
  padding: 0;
}

.searchbar .button:hover {
  background: var(--p100);
  color: var(--p600);
}

/* Search options panel (shown/hidden via .hidden class by Roundcube JS) */
#searchmenu {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  padding: 10px 12px;
  font-size: 12px;
  flex-shrink: 0;
}

#searchmenu.hidden { display: none !important; }

#searchmenu .formcontent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#searchmenu .proplist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style: none;
}

#searchmenu .proplist li { list-style: none; }

#searchmenu .proplist li label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  user-select: none;
}

#searchmenu .proplist li label:hover { color: var(--p600); }

#searchmenu .input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

#searchmenu .input-group-text {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 70px;
}

#searchmenu .custom-select,
#searchmenu select {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r4);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}

#searchmenu .formbuttons {
  text-align: right;
  padding-top: 4px;
}

/* Message list scroller */
#messagelist-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Message list — widescreen compact rows.
   Roundcube renders each row with all the data inside a single td.subject as
   stacked spans (.fromto / .date / .size / .subject), plus a td.flags. The
   <thead> only drives column sorting, so we hide it (sort via the Options
   menu) and lay each row out as a 2-line card: sender + date on top,
   subject below. */
#messagelist {
  width: 100%;
  display: block;
  border-collapse: collapse;
}

/* Hide the sort-header and its sticky clone (#messagelist-fixedcopy) */
#messagelist thead,
#messagelist-fixedcopy { display: none; }

#messagelist tbody { display: block; }

#messagelist tbody tr {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  min-height: 52px; /* FIXED: finger-tappable rows on mobile */
  border-bottom: 1px solid var(--p50);
  cursor: pointer;
  transition: background .1s;
}

#messagelist tbody tr:hover { background: var(--p50); }

#messagelist tbody tr.selected {
  background: var(--p100) !important;
  outline: none;
  border-left: 3px solid var(--g500);
  padding-left: 11px;
}

/* No focus rectangle around the selected/focused row or its cells */
#messagelist tbody tr,
#messagelist tbody tr.focused,
#messagelist tbody tr td,
#messagelist tbody tr td.subject[tabindex] { outline: none !important; }

#messagelist tbody tr.deleted td { text-decoration: line-through; opacity: .55; }

/* Subject cell holds the whole row as stacked spans → 2-line grid */
#messagelist tbody td.subject {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "from date"
    "subj subj";
  gap: 2px 8px;
  padding: 0;
}

#messagelist td.subject > .fromto {
  grid-area: from;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#messagelist td.subject > .date {
  grid-area: date;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

#messagelist td.subject > .size { display: none; }

#messagelist td.subject > .subject {
  grid-area: subj;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#messagelist td.subject > .subject a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

#messagelist td.subject > .subject a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unread → bolder, darker, with a small gold marker dot */
#messagelist td.subject .msgicon.status { display: none; }
#messagelist tbody tr.unread td.subject > .fromto { font-weight: 700; }
#messagelist tbody tr.unread td.subject > .subject a { color: var(--p800); font-weight: 600; }
#messagelist tbody tr.unread td.subject > .subject::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g500);
}

/* Flag / attachment indicators on the right edge */
#messagelist tbody td.flags {
  order: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0 0;
  width: 18px;
}

#messagelist td.flags .flagged::before {
  font-family: 'Material Icons';
  content: 'star';
  font-size: 15px;
  line-height: 1;
  color: var(--g600);
}

/* Pagination / page nav */
#countdisplay,
.pagenav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 3px 8px;
  min-height: 32px;
  background: var(--p50);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}

.pagenav a,
.pagenav button,
.pagenav .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  color: var(--p600);
  background: transparent;
  border: none;
  padding: 0 4px;
  border-radius: var(--r4);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s;
}

/* Hide the textual button labels; show compact arrow icons instead */
.pagenav a .inner,
.pagenav button .inner { display: none; }

.pagenav a::before {
  font-family: 'Material Icons';
  font-size: 18px;
  line-height: 1;
  font-weight: normal;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

.pagenav a.firstpage::before { content: 'first_page'; }
.pagenav a.prevpage::before  { content: 'chevron_left'; }
.pagenav a.nextpage::before  { content: 'chevron_right'; }
.pagenav a.lastpage::before  { content: 'last_page'; }

/* Count text grows to fill the centre of the bar */
.pagenav .pagenav-text {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 11px;
}

/* Current-page number input */
.pagenav input.form-control {
  width: 44px;
  flex: 0 0 auto;
  height: 24px;
  text-align: center;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: var(--r4);
  background: var(--surface);
  color: var(--text);
}

.pagenav a:hover,
.pagenav button:hover { background: var(--p100); }

.pagenav a.disabled,
.pagenav button.disabled {
  color: var(--muted);
  opacity: .35;
  pointer-events: none;
}

/* -------------------------------------------------------------------
   7b. MESSAGE PREVIEW PANE  (right column of inner grid)
   ------------------------------------------------------------------- */
#layout-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  min-width: 0;
}

/* Preview toolbar */
#layout-content .header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 10px;
  background: var(--p50);
  border-bottom: 1px solid var(--border);
  min-height: 46px;
  flex-shrink: 0;
}

#layout-content .header .header-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--p700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide mobile back button on desktop */
#layout-content .header .back-list-button { display: none; }

/* Toolbar buttons */
.toolbar.menu,
#mailtoolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1px;
  min-width: 0; /* FIXED: allow shrink so the toolbar can scroll instead of wrapping */
  overflow-x: auto; /* FIXED: scroll horizontally on narrow panes rather than wrapping into a 2nd row */
  scrollbar-width: none; /* keep the toolbar itself visually clean */
}
.toolbar.menu::-webkit-scrollbar,
#mailtoolbar::-webkit-scrollbar { display: none; }

.toolbar a,
.toolbar .button,
#mailtoolbar a,
#mailtoolbar .button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--r4);
  font-size: 12px;
  color: var(--p700);
  text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s; /* FIXED: explicit props */
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--font);
  white-space: nowrap;
  line-height: 1.4;
}

.toolbar a:hover,
.toolbar .button:hover,
#mailtoolbar a:hover,
#mailtoolbar .button:hover {
  background: var(--p100);
  border-color: var(--p200);
  color: var(--p700);
  text-decoration: none;
}

.toolbar a.disabled,
.toolbar .button.disabled,
#mailtoolbar a.disabled,
#mailtoolbar .button.disabled {
  color: var(--muted);
  opacity: .5;
  pointer-events: none;
}

.toolbar .spacer {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 3px;
  flex-shrink: 0;
}

/* Drop-button (reply-all / forward split button) */
.dropbutton {
  display: inline-flex;
  align-items: stretch;
}

.dropbutton > a:first-child,
.dropbutton > .button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dropbutton .dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--p600);
  background: transparent;
  border: 1px solid transparent;
  border-top-right-radius: var(--r4);
  border-bottom-right-radius: var(--r4);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
  font-size: 10px;
  text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s; /* FIXED: explicit props */
}

.dropbutton .dropdown:hover {
  background: var(--p100);
  border-color: var(--p200);
  color: var(--p700);
}

/* Preview iframe wrapper */
.iframe-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#messagecontframe {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* =============================================================================
   8. POPUP MENUS  — CRITICAL: hidden by default; Roundcube JS shows/hides them
   ============================================================================= */
.popupmenu {
  display: none;   /* JS overrides to display:block when menu is opened */
  position: absolute;
  z-index: 2000;
  background: var(--p900);
  border: 1px solid var(--p700);
  border-radius: var(--r8);
  box-shadow: var(--s3);
  min-width: 180px;
  padding: 4px 0;
  overflow: hidden;
}

/* Voice headings inside menus are for screen readers only.
   FIXED: use the sr-only pattern instead of display:none so screen
   readers still announce the heading. */
.popupmenu h3.voice {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.popupmenu ul,
.popupmenu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popupmenu li { list-style: none; }

.popupmenu li a,
.popupmenu a.button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background .1s;
  background: transparent;
  border: none;
  font-family: var(--font);
  width: 100%;
  text-align: left;
  white-space: nowrap;
  line-height: 1.4;
}

.popupmenu li a:hover,
.popupmenu a.button:hover {
  background: var(--p700);
  color: var(--g200);
  text-decoration: none;
}

.popupmenu li a.disabled,
.popupmenu a.button.disabled {
  opacity: .4;
  pointer-events: none;
}

.popupmenu li.separator,
.popupmenu .separator {
  height: 1px;
  background: var(--p700);
  margin: 3px 0;
  list-style: none;
  border: none;
}

/* List "Options" popup: a small form (sort column / order / threads) rendered
   inside the dark popup, so the labels and selects need readable styling.
   FIXED: merged the two duplicate #listoptions-menu blocks into this canonical one. */
#listoptions-menu {
  padding: 12px 14px;
  min-width: 260px;
}
#listoptions-menu .form-group,
#listoptions-menu .form-group.row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#listoptions-menu .form-group:last-child,
#listoptions-menu .form-group.row:last-child { margin-bottom: 0; }
#listoptions-menu .col-form-label {
  flex: 0 0 90px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#listoptions-menu select {
  flex: 1;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--p600);
  border-radius: var(--r4);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}

/* Floating popups toggled by the skin's own JS (ui.js setup_menus).
   .mc-popup-open forces them visible; positioning is set inline. */
.popupmenu.mc-popup-open { display: block; }

/* Dimmed backdrop shown behind bottom-sheet popups on phones. */
#mc-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 2500;
}

/* On phones popups dock to the bottom of the screen as a full-width sheet. */
.popupmenu.mc-popup-sheet {
  position: fixed;
  left: 0 !important;
  right: 0;
  bottom: 0;
  top: auto !important;
  width: 100%;
  min-width: 0;
  max-height: 75vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 3000;
}
.popupmenu.mc-popup-sheet li a,
.popupmenu.mc-popup-sheet a.button { padding: 13px 20px; font-size: 15px; }
.popupmenu.mc-popup-sheet.propform { padding-top: 16px; }

/* Page-jump selector: list items are plain text <li>, not links */
#pagejump-selector {
  min-width: 60px;
  max-height: 260px;
  overflow-y: auto;
}

#pagejump-selector ul { padding: 4px 0; }

#pagejump-selector li {
  list-style: none;
  padding: 6px 18px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: background .1s;
}

#pagejump-selector li:hover,
#pagejump-selector li.selected {
  background: var(--p700);
  color: var(--g200);
}

/* FIXED: removed duplicate #listoptions-menu block (merged into section 8 canonical block above) */

/* Upload form popup */
#uploadform {
  padding: 14px;
  min-width: 240px;
}

#uploadform input[type="file"] {
  font-size: 12px;
  color: rgba(255,255,255,.8);
}

/* =============================================================================
   9. STATUS BAR
   ============================================================================= */
#statusbar {
  grid-column: 1 / -1;
  grid-row: 3;
  background: var(--p900);
  border-top: 1px solid var(--p800);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 16px;
  font-size: 10px;
  color: rgba(255,255,255,.35);
  z-index: 5;
}

#statusbar a { color: rgba(255,255,255,.45); }
#statusbar a:hover { color: var(--g300); text-decoration: none; }

/* =============================================================================
   10. GLOBAL INPUTS & BUTTONS
   ============================================================================= */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
select {
  border: 1px solid var(--border);
  border-radius: var(--r4);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font);
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--p400);
  box-shadow: 0 0 0 3px var(--p100);
  outline: none;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--p300);
}

/* FIXED: keyboard-only focus ring. Replaces ad-hoc outline:none resets while
   preserving a visible focus indicator for keyboard navigation (WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid var(--p400);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

input::placeholder,
textarea::placeholder { color: var(--muted); opacity: .65; }

input[type="checkbox"],
input[type="radio"] { cursor: pointer; }

.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r4);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; /* FIXED: explicit props */
  border: 1px solid transparent;
  line-height: 1.4;
  text-decoration: none;
}

.btn:hover { text-decoration: none; }
.btn:focus { outline: none; box-shadow: 0 0 0 3px var(--p100); }

.btn-primary,
button.btn-primary {
  background: var(--p600);
  color: #fff;
  border-color: var(--p600);
}

.btn-primary:hover { background: var(--p500); border-color: var(--p500); }

.btn-secondary {
  background: transparent;
  color: var(--p600);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--p50);
  border-color: var(--p300);
  color: var(--p600);
}

.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: #a93226; border-color: #a93226; }

/* Roundcube uses class="icon search" on the search button */
button.icon.search {
  background: var(--p600);
  color: #fff;
  border-color: var(--p600);
}

button.icon.search:hover { background: var(--p500); }

/* =============================================================================
   11. DIALOGS (jQuery UI)
   ============================================================================= */
.ui-dialog {
  border: none !important;
  border-radius: var(--r8) !important;
  box-shadow: var(--s3) !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--surface) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(135deg, var(--p800), var(--p600)) !important;
  border-bottom: 2px solid var(--g500) !important;
  padding: 12px 16px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ui-dialog .ui-dialog-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
}

.ui-dialog .ui-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,.7) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

.ui-dialog .ui-dialog-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 20px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  overflow-y: auto !important;
}

.ui-dialog .ui-dialog-buttonpane {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 16px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.ui-dialog .ui-dialog-buttonset { display: flex; gap: 8px; }

/* FIXED: jQuery UI dialog buttons rendered as tiny, unstyled default buttons.
   Theme them as proper touch-sized buttons; the primary (.mainaction) button
   gets the gold gradient, destructive actions go red. */
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonset button {
  padding: 8px 18px !important;
  min-height: 38px;
  border-radius: var(--r4) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  background: var(--surface) !important;
  color: var(--p600) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonset button:hover {
  background: var(--p50) !important;
  border-color: var(--p300) !important;
  color: var(--p600) !important;
}
.ui-dialog .ui-dialog-buttonpane button.mainaction,
.ui-dialog .ui-dialog-buttonpane button.btn-primary,
.ui-dialog .ui-dialog-buttonpane button.save,
.ui-dialog .ui-dialog-buttonpane button.send {
  background: linear-gradient(135deg, var(--p600), var(--p800)) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}
.ui-dialog .ui-dialog-buttonpane button.mainaction:hover,
.ui-dialog .ui-dialog-buttonpane button.btn-primary:hover,
.ui-dialog .ui-dialog-buttonpane button.save:hover,
.ui-dialog .ui-dialog-buttonpane button.send:hover {
  filter: brightness(1.08);
  box-shadow: var(--s2);
  color: #fff !important;
}
.ui-dialog .ui-dialog-buttonpane button.delete,
.ui-dialog .ui-dialog-buttonpane button.btn-danger {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

/* FIXED: hide the unstyled resize grip — dialogs aren't meant to be hand-resized
   in this skin and the default jQuery UI handle looks broken. */
.ui-dialog .ui-resizable-handle { display: none !important; }

/* FIXED: framed dialog content (insert-contacts, folder picker, etc.) is an
   iframe — make it fill the dialog and drop the 20px padding that boxed it in. */
.ui-dialog .ui-dialog-content iframe {
  width: 100% !important;
  border: none;
  display: block;
}
.ui-dialog .ui-dialog-content:has(> iframe) { padding: 0 !important; }

.ui-widget { font-family: var(--font) !important; font-size: var(--fs) !important; }
.ui-widget-content { background: var(--surface) !important; color: var(--text) !important; }
.ui-widget-header { background: var(--p600) !important; color: #fff !important; border: none !important; }
.ui-widget-overlay { background: rgba(44,7,18,.55) !important; z-index: 1998 !important; }

.ui-state-default,
.ui-widget-content .ui-state-default {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover {
  background: var(--p50) !important;
  border-color: var(--p200) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  background: var(--p600) !important;
  color: #fff !important;
  border-color: var(--p600) !important;
}

.ui-corner-all { border-radius: var(--r4) !important; }

/* FIXED: on phones, jQuery UI sizes dialogs with inline width/height/top/left,
   producing an oversized floating box. Turn every dialog into a clean
   full-screen sheet: pinned title bar, scrollable content that fills, and a
   pinned action bar with full-width touch buttons. */
@media (max-width: 768px) {
  .ui-dialog.ui-widget {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .ui-dialog .ui-dialog-titlebar { flex: 0 0 auto; }
  .ui-dialog .ui-dialog-content {
    flex: 1 1 auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .ui-dialog .ui-dialog-content iframe { height: 100% !important; min-height: 50vh; }
  .ui-dialog .ui-dialog-buttonpane {
    flex: 0 0 auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .ui-dialog .ui-dialog-buttonpane button,
  .ui-dialog .ui-dialog-buttonset button {
    flex: 1 1 auto;
    min-height: 46px !important;
  }
  /* Larger, easier-to-hit close target */
  .ui-dialog .ui-dialog-titlebar-close { width: 34px !important; height: 34px !important; }
}

/* =============================================================================
   12. NOTIFICATIONS / TOASTS
   ============================================================================= */
#messagestack {
  position: fixed;
  top: calc(var(--h-header) + 12px);
  right: 16px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}

#messagestack > div {
  pointer-events: auto;
  background: var(--surface);
  border-radius: var(--r8);
  box-shadow: var(--s2);
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text);
  border-left: 4px solid var(--p500);
  font-family: var(--font);
  animation: slideIn .25s ease;
}

#messagestack > div.error { border-left-color: var(--red); }
#messagestack > div.confirmation { border-left-color: var(--green); }
#messagestack > div.loading { border-left-color: var(--g500); }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* =============================================================================
   13. LOGIN PAGE
   ============================================================================= */
body.task-login {
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(192,160,96,.22), transparent 60%),
    linear-gradient(135deg, var(--p900) 0%, var(--p700) 48%, var(--p600) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  display: block;          /* not flex: #statusbar is a sibling of #layout and
                              would otherwise become a competing flex item */
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  padding: 0;
}

body.task-login #layout {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
  min-width: 0;
}

/* The status bar lives outside #layout on the login page and shows nothing
   useful pre-auth — hide it so it doesn't draw a stray bar. */
body.task-login #statusbar { display: none; }

#layout-content.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  box-sizing: border-box;
}

/* ---- Two-column shell: brand panel + form panel ----------------------------
   No background / no overflow-clip on the shell itself: each panel paints its
   own rounded corners. This avoids the 1px anti-alias seam that a clipped,
   contrasting-background parent leaves on rounded corners. Shadow only. */
.login-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 940px;
  max-width: 100%;
  min-width: 0;
  min-height: 560px;
  margin: 0 auto; /* FIXED: center the shell so it never goes edge-to-edge at 940-1100px */
  background: transparent;
  border-radius: 22px;
  box-shadow:
    0 24px 60px rgba(44, 7, 18, .45),
    0 4px 14px rgba(44, 7, 18, .25);
  /* FIXED: fill-mode "backwards" (not "both") so the card does NOT keep an
     identity transform after the intro. A lingering transform keeps the whole
     card on its own GPU layer, which Chromium repaints out of order during a
     browser zoom — flashing the page background in front of the form. */
  animation: loginRise .5s cubic-bezier(.2, .7, .3, 1) backwards;
}

@keyframes loginRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Brand panel (left) ---------------------------------------------------- */
.login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 44px;
  min-width: 0;
  color: #fff;
  /* FIXED: the decorative glows are painted as background gradients on this
     panel itself, instead of separate blurred .blob elements. A background can
     never be promoted to its own compositor layer and can never paint outside
     the panel's rounded box, so it cannot drift in front of the form during
     browser zoom or trackpad pinch-zoom. No clip-path / contain / isolation
     (and the GPU layers they created) are needed anymore. */
  background:
    radial-gradient(280px 280px at 100% -5%, rgba(192,160,96,.30), transparent 60%),
    radial-gradient(240px 240px at -5% 105%, rgba(122,26,61,.32), transparent 60%),
    radial-gradient(180px 180px at 55% 45%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(155deg, var(--p800) 0%, var(--p600) 60%, var(--p500) 100%);
  border-radius: 22px 0 0 22px;
  overflow: hidden;
}

/* The decorative glow now lives on .login-brand's own background, so these
   blob elements are hidden (kept in the DOM only as harmless empty spans). */
.login-brand-deco { display: none; }

.login-brand-deco .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
}

.blob-1 {
  width: 260px; height: 260px;
  top: -70px; right: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(192,160,96,.55), transparent 70%);
}

.blob-2 {
  width: 200px; height: 200px;
  bottom: -50px; left: -40px;
  background: radial-gradient(circle at 40% 40%, rgba(122,26,61,.6), transparent 70%);
}

.blob-3 {
  width: 130px; height: 130px;
  top: 45%; left: 55%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 70%);
}

/* FIXED: honor reduced-motion — neutralize the card rise-in animation.
   (The decorative blobs are now static, so there is no blob motion to disable
   and no permanently-composited layers to mis-paint during browser zoom.) */
@media (prefers-reduced-motion: reduce) {
  @keyframes loginRise { from { opacity: 1; transform: none; } }
}

.login-brand-inner { position: relative; z-index: 1; }

.brand-mark {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin-bottom: 22px;
  background: #fff;
  padding: 15px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}

/* FIXED: renamed .brand-name -> .login-brand-name to avoid colliding with the
   header bar's #layout-menu .brand-name (section 4).
   NOTE: the login HTML template's brand element class must match (.login-brand-name). */
.login-brand-name {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: .01em;
}

.login-brand-name span {
  display: block;
  font-size: 20px;
  color: var(--g200);
  font-weight: 600;
  margin-top: 2px;
}

.brand-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin-bottom: 26px;
}

.brand-social {
  display: flex;
  flex-direction: row;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.brand-social li {
  list-style: none;
}

.brand-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.brand-social a:hover {
  background: linear-gradient(135deg, var(--g300), var(--g500));
  border-color: transparent;
  transform: translateY(-2px);
}

.brand-social svg {
  display: block;
}

.login-brand-foot {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}

/* ---- Form panel (right) ---------------------------------------------------- */
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 44px;
  min-width: 0;
  background: var(--surface);
  border-radius: 0 22px 22px 0;
  position: relative;   /* FIXED: stack the form panel above the brand panel so
                           decorations can never appear in front of the form */
  z-index: 1;
}

.login-card {
  width: 100%;
  max-width: 340px;
  min-width: 0;
}

.login-card-mark {
  display: none;          /* shown only on stacked/mobile layout */
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
}

/* FSMC full horizontal lockup shown at the top of the white login card */
.login-fulllogo {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  margin: 0 auto 22px;
}

.login-card .logo {        /* Roundcube-injected fallback logo */
  display: block;
  text-align: center;
  margin-bottom: 12px;
}

.login-card .logo img { max-height: 56px; }

.login-logo {
  color: var(--p700);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}

.login-logo span {
  display: block;
  font-size: 16px;
  color: var(--g600);
  font-weight: 600;
  margin-top: 1px;
}

.login-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 26px;
}

/* Roundcube generates a propform table for the login form.
   Force the whole table to block flow so it can't expand to the
   intrinsic width of the size="40" inputs (which caused overflow). */
.login-card form.propform table,
.login-card form.propform tbody {
  display: block;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.login-card form.propform tr { display: block; margin-bottom: 14px; }

.login-card form.propform td.title {
  display: block;
  padding: 0 0 6px;
  color: var(--p700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  width: auto;
}

.login-card form.propform td.input { display: block; padding: 0; }

.login-card form.propform td.input input:not([type="submit"]),
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r8);
  background: var(--p50);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.login-card form.propform td.input input:not([type="submit"]):focus,
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="email"]:focus {
  border-color: var(--p400);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--p100);
  outline: none;
}

.login-card .btn-login,
.login-card input[type="submit"],
.login-card button[type="submit"] {
  width: 100%;
  background: linear-gradient(135deg, var(--p600), var(--p800));
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 12px;
  font-size: 14px;
  border-radius: var(--r8);
  box-shadow: 0 6px 16px rgba(85,16,41,.28);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: transform .12s, box-shadow .15s, filter .15s;
  margin-top: 8px;
}

.login-card .btn-login:hover,
.login-card input[type="submit"]:hover,
.login-card button[type="submit"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 9px 22px rgba(85,16,41,.36);
}

.login-card .btn-login:active,
.login-card input[type="submit"]:active,
.login-card button[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(85,16,41,.3);
}

.login-card .formbuttons {
  margin-top: 4px;
  padding: 0;
  border-top: none;
  background: none;
  display: block;
}

/* Optional select fields (host / language) rendered by Roundcube */
.login-card form.propform td.input select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r8);
  background: var(--p50);
  border: 1.5px solid var(--border);
}

#login-footer,
.login-footer {
  text-align: center;
  margin-top: 22px;
  font-size: 11px;
  color: var(--muted);
}

#login-footer a,
.login-footer a { color: var(--p400); }
#login-footer a:hover,
.login-footer a:hover { color: var(--p600); }

/* =============================================================================
   14. COMPOSE WINDOW
   ============================================================================= */
#compose {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  background: var(--surface);
  border-radius: var(--r12);
  box-shadow: var(--s3);
  width: 660px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(var(--app-height, 100dvh) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#compose .compose-header,
.compose-header-bar {
  background: linear-gradient(135deg, var(--p800), var(--p600));
  border-bottom: 2px solid var(--g500);
  padding: 12px 16px;
  color: var(--g200);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.compose-fields {
  background: var(--g50);
  border-bottom: 1px solid var(--g200);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.compose-fields .field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compose-fields .field-row label {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  min-width: 50px;
}

.compose-fields .field-row input {
  flex: 1;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 3px 0;
  font-size: 13px;
  box-shadow: none;
}

.compose-fields .field-row input:focus {
  border-bottom-color: var(--p500);
  box-shadow: none;
}

#compose-body,
.compose-body {
  flex: 1;
  border: none;
  resize: none;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  padding: 14px 16px;
  background: var(--surface);
  box-shadow: none;
}

.compose-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  flex-shrink: 0;
}

.btn-send {
  background: linear-gradient(135deg, var(--g500), var(--g700));
  color: var(--p900);
  font-weight: 700;
  border: none;
  border-radius: var(--r99);
  padding: 8px 24px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; /* FIXED: explicit props */
}

.btn-send:hover { opacity: .9; box-shadow: var(--s2); }

/* =============================================================================
   15. ATTACHMENTS
   ============================================================================= */
.attachmentslist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}

.attachmentslist .attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r4);
  padding: 5px 10px;
  font-size: 12px;
  color: var(--g700);
  transition: border-color .12s;
}

.attachmentslist .attachment:hover { border-color: var(--g400); }

.attachmentslist .attachment a.delete,
.attachmentslist .attachment a.cancelupload {
  color: var(--red);
  opacity: .55;
}

.attachmentslist .attachment a.delete:hover,
.attachmentslist .attachment a.cancelupload:hover { opacity: 1; }

/* =============================================================================
   16. CONTACTS & SETTINGS
   ============================================================================= */
#contacts-table { width: 100%; border-collapse: collapse; }

#contacts-table tr {
  border-bottom: 1px solid var(--p50);
  transition: background .1s;
  cursor: pointer;
}

#contacts-table tr:hover { background: var(--p50); }
#contacts-table tr.selected { background: var(--p100); }
#contacts-table td { padding: 9px 12px; font-size: 13px; color: var(--text); }

.contact-head {
  background: var(--g50);
  border-radius: var(--r6);
  padding: 14px 18px;
  margin: 10px;
  box-shadow: var(--s1);
}

/* Settings sections list */
#settings-sections li { list-style: none; }

#settings-sections li a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r4);
  margin: 1px 6px;
  transition: background-color .12s, color .12s; /* FIXED: explicit props */
}

#settings-sections li a:hover {
  background: var(--p50);
  color: var(--p600);
  text-decoration: none;
}

#settings-sections li.selected a {
  background: var(--p600);
  color: #fff;
  border-left: 3px solid var(--g500);
  font-weight: 600;
}

/* Settings/propform tables */
.propform td.title {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px 6px 0;
  white-space: nowrap;
  vertical-align: top;
}

.propform td { padding: 5px 8px; font-size: 13px; }
.propform input, .propform select, .propform textarea { width: 100%; }

/* =============================================================================
   17. SCROLLBARS
   ============================================================================= */
/* FIXED: scope custom scrollbars to real scroll containers only — the previous
   global `*` selector restyled inputs and buttons unnecessarily. */
.scroller::-webkit-scrollbar,
#messagelist-content::-webkit-scrollbar,
#folderlist-content::-webkit-scrollbar,
#messagelist::-webkit-scrollbar,
#taskmenu::-webkit-scrollbar,
#compose-content::-webkit-scrollbar,
.popupmenu::-webkit-scrollbar { width: 5px; height: 5px; }

.scroller::-webkit-scrollbar-track,
#messagelist-content::-webkit-scrollbar-track,
#folderlist-content::-webkit-scrollbar-track,
#messagelist::-webkit-scrollbar-track,
#taskmenu::-webkit-scrollbar-track,
#compose-content::-webkit-scrollbar-track,
.popupmenu::-webkit-scrollbar-track { background: transparent; }

.scroller::-webkit-scrollbar-thumb,
#messagelist-content::-webkit-scrollbar-thumb,
#folderlist-content::-webkit-scrollbar-thumb,
#messagelist::-webkit-scrollbar-thumb,
#taskmenu::-webkit-scrollbar-thumb,
#compose-content::-webkit-scrollbar-thumb,
.popupmenu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.scroller::-webkit-scrollbar-thumb:hover,
#messagelist-content::-webkit-scrollbar-thumb:hover,
#folderlist-content::-webkit-scrollbar-thumb:hover,
#messagelist::-webkit-scrollbar-thumb:hover,
#taskmenu::-webkit-scrollbar-thumb:hover,
#compose-content::-webkit-scrollbar-thumb:hover,
.popupmenu::-webkit-scrollbar-thumb:hover { background: var(--p300); }

.scroller,
#messagelist-content,
#folderlist-content,
#messagelist,
#compose-content,
.popupmenu { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* =============================================================================
   18. RTL  [dir="rtl"]
   ============================================================================= */
[dir="rtl"] { direction: rtl; text-align: right; }

[dir="rtl"] #taskmenu {
  border-right: none;
  border-left: 1px solid var(--p800);
}

[dir="rtl"] #taskmenu a,
[dir="rtl"] #taskmenu .button {
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] #taskmenu a:hover,
[dir="rtl"] #taskmenu .button:hover { border-right-color: var(--g400); }

[dir="rtl"] #taskmenu a.selected,
[dir="rtl"] #taskmenu a.active { border-right-color: var(--g500); }

[dir="rtl"] #layout-sidebar {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,.06);
}

[dir="rtl"] .treelist li a,
[dir="rtl"] .folderlist li a {
  border-left: none;
  border-right: 3px solid transparent;
  padding: 7px 16px 7px 12px;
}

[dir="rtl"] .treelist li.selected > a,
[dir="rtl"] .folderlist li.selected > a { border-right-color: var(--g500); }

[dir="rtl"] .treelist li a .unreadcount,
[dir="rtl"] .folderlist li a .unreadcount { margin-left: 0; margin-right: auto; }

[dir="rtl"] .treelist li > div.treetoggle,
[dir="rtl"] .folderlist li > div.treetoggle { right: auto; left: 6px; }

[dir="rtl"] .treelist li > div.treetoggle::before,
[dir="rtl"] .folderlist li > div.treetoggle::before { content: 'chevron_left'; }

[dir="rtl"] .treelist li > div.treetoggle.expanded::before,
[dir="rtl"] .folderlist li > div.treetoggle.expanded::before { content: 'expand_more'; }

[dir="rtl"] .treelist li:has(> div.treetoggle) > a,
[dir="rtl"] .folderlist li:has(> div.treetoggle) > a { padding-right: 16px; padding-left: 30px; }

[dir="rtl"] #messagelist tbody tr.selected { border-left: none; border-right: 3px solid var(--g500); padding-left: 14px; padding-right: 11px; }

[dir="rtl"] #messagestack { right: auto; left: 16px; }

[dir="rtl"] .header-actions { margin-left: 0; margin-right: auto; }

/* Login: brand sits on the right in RTL, so flip the side corner radii */
[dir="rtl"] .login-brand { border-radius: 0 22px 22px 0; }
[dir="rtl"] .login-panel { border-radius: 22px 0 0 22px; }

[dir="rtl"] #settings-sections li.selected a {
  border-left: none;
  border-right: 3px solid var(--g500);
}

[dir="rtl"] .propform td.title { text-align: right; padding-right: 0; padding-left: 12px; }

[dir="rtl"] .compose-fields .field-row { flex-direction: row-reverse; }

/* =============================================================================
   19. RESPONSIVE (≤ 768px)
   ============================================================================= */
@media (max-width: 768px) {
  #layout {
    grid-template-columns: 0 0 1fr;
  }

  #layout-list {
    grid-template-columns: 1fr;
  }

  #layout-content { display: none; }

  body.show-preview #layout-list { grid-template-columns: 0 1fr; }
  body.show-preview #layout-content { display: flex; }
  body.show-preview #messagelist-panel { display: none; }

  /* Standalone message view (double-click → action=show) is a full page,
     not a preview pane, so it never gets .show-preview. Reveal it. */
  body.task-mail.action-show #layout-content { display: flex; }

  /* A framed content page (single-click message preview = action=preview, plus
     contact/settings detail panes) loaded into the iframe IS the entire view —
     there is no list to toggle to. Its own <body> never gets .show-preview or
     .action-show, so the generic "#layout-content { display:none }" above hid
     it, making single-click preview look like a blank page on mobile. Always
     show the content pane inside a framed page. */
  html.iframe #layout-content { display: flex !important; }

  #layout-content .header .back-list-button { display: inline-flex; }
  #layout-sidebar .header .back-list-button { display: inline-flex; }

  #messagelist-header .back-sidebar-button,
  #messagelist-header .task-menu-button,
  #messagelist-header .toolbar-menu-button { display: inline-flex; }

  /* App/task switcher becomes a slide-in left drawer (opened by the
     hamburger button), mirroring the stock Elastic theme. */
  #taskmenu {
    position: fixed;
    top: var(--h-header);
    bottom: 0;
    left: 0;
    width: 240px;
    max-width: 80vw;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    z-index: 110;
    border-right: 1px solid var(--p800);
    padding: 10px 8px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--s3);
    grid-row: auto;
    grid-column: auto;
  }

  body.show-menu #taskmenu { transform: translateX(0); }

  /* Flatten wrapper spans so every entry is a direct child of the column */
  #taskmenu .action-buttons,
  #taskmenu .special-buttons {
    display: contents;
  }

  #taskmenu a, #taskmenu .button {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    min-height: 48px; /* FIXED: raise mobile drawer touch target to WCAG 44px+ minimum */
    gap: 14px;
    border-left: 3px solid transparent;
    border-top: none;
    padding: 8px 14px;
    font-size: 13px;
  }

  #taskmenu a::before { width: 24px; text-align: center; font-size: 22px; }

  #taskmenu .inner {
    max-width: none;
    font-size: 13px;
  }

  #taskmenu a.selected, #taskmenu a.active,
  #taskmenu .button.selected, #taskmenu .button.active {
    border-top: none;
    border-left-color: var(--g500);
  }

  /* Dim backdrop behind either open drawer */
  body.show-menu::after,
  body.show-sidebar::after {
    content: '';
    position: fixed;
    inset: var(--h-header) 0 0 0;
    background: rgba(0, 0, 0, .42);
    z-index: 100;
    cursor: pointer; /* FIXED: signal that tapping the backdrop closes the drawer */
  }

  /* Folder list slides in from side */
  #layout-sidebar {
    position: fixed;
    top: var(--h-header);
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    z-index: 110;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--s3);
  }

  body.show-sidebar #layout-sidebar { transform: translateX(0); }

  /* RTL: both drawers slide in from the right edge */
  [dir="rtl"] #taskmenu {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--p800);
    transform: translateX(100%);
  }
  [dir="rtl"] body.show-menu #taskmenu { transform: translateX(0); } /* FIXED: removed redundant body.show-menu[dir="rtl"] form */

  [dir="rtl"] #layout-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir="rtl"] body.show-sidebar #layout-sidebar { transform: translateX(0); } /* FIXED: removed redundant body.show-sidebar[dir="rtl"] form for consistency */

  [dir="rtl"] #taskmenu a, [dir="rtl"] #taskmenu .button {
    border-left: none;
    border-right: 3px solid transparent;
  }
  [dir="rtl"] #taskmenu a.selected, [dir="rtl"] #taskmenu a.active,
  [dir="rtl"] #taskmenu .button.selected, [dir="rtl"] #taskmenu .button.active {
    border-left: none;
    border-right-color: var(--g500);
  }

  /* FIXED: pagination controls were only 24px tall — enlarge for touch (WCAG 2.5.5) */
  .pagenav a,
  .pagenav button,
  .pagenav .button {
    min-height: 44px;
    padding: 0 10px;
  }

  /* FIXED: search action buttons enlarged from 24x24 to a comfortable touch size */
  .searchbar .button {
    width: 36px;
    height: 36px;
  }

  /* FIXED: keep toasts off the screen edge on phones */
  #messagestack {
    left: 12px;
    right: 12px;
    max-width: none;
  }

  /* FIXED: suppress the fixed centered compose modal on mobile so it doesn't
     conflict with the full-page compose layout (body.action-compose) */
  #compose {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    border-radius: 0;
  }

  /* FIXED: clear the iOS home indicator under the Send/Save bar */
  .formbuttons {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* Stack the two panels vertically */
  .login-shell {
    grid-template-columns: 1fr;
    width: 440px;
    max-width: 100%;
    min-height: 0;
  }

  /* Brand panel becomes a header strip */
  .login-brand {
    padding: 30px 28px 26px;
    text-align: center;
    align-items: center;
    border-radius: 22px 22px 0 0;
  }

  .login-panel { border-radius: 0 0 22px 22px; }

  .login-brand-inner { display: flex; flex-direction: column; align-items: center; }
  .brand-mark { width: 58px; height: 58px; margin-bottom: 12px; }
  .login-brand-name { font-size: 23px; margin-bottom: 10px; } /* FIXED: renamed from .brand-name */
  .login-brand-name span { font-size: 16px; } /* FIXED: renamed from .brand-name */
  .brand-tagline { font-size: 13px; margin-bottom: 0; }
  .brand-social,
  .login-brand-foot { display: none; }

  .login-panel { padding: 30px 28px 34px; }
  .login-card { max-width: 100%; }

  /* Brand strip already shows the name and logo — drop the duplicates */
  .login-logo { display: none; }
  .login-card-mark { display: none; } /* brand-mark in the stacked header already shows the logo */
  .login-subtitle { margin-bottom: 22px; font-size: 13px; }
}

@media (max-width: 480px) {
  body.task-login { padding: 0; }

  /* Rounded card centered with a little breathing room (not full-bleed). */
  #layout-content.login-page { padding: 14px; }

  .login-shell {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    border-radius: 18px;
  }

  .login-brand {
    padding: 28px 22px 24px;
    border-radius: 18px 18px 0 0;
  }

  .login-panel {
    padding: 26px 22px 32px;
    border-radius: 0 0 18px 18px;
  }

  .login-brand-name { font-size: 22px; } /* FIXED: renamed from .brand-name */
  .login-brand-name span { font-size: 15px; } /* FIXED: renamed from .brand-name */

  /* 16px inputs prevent iOS Safari auto-zoom on focus */
  .login-card form.propform td.input input,
  .login-card input[type="text"],
  .login-card input[type="password"],
  .login-card input[type="email"] {
    font-size: 16px;
  }

  /* FIXED: icon-only toolbars on the smallest phones to save horizontal room */
  #messagelist-header .toolbar a .inner,
  #messagelist-header .refresh .inner,
  #mailtoolbar a .inner { display: none; }

  /* Responsive form helpers: on the smallest screens, stacked labels keep
     settings/preferences usable without horizontal scrolling. */
  .form-group.row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .form-group.row .col-form-label { flex: 0 0 auto; max-width: 100%; }
  .form-group.row .col-sm-4,
  .form-group.row .col-sm-8,
  .form-group.row .col-2,
  .form-group.row .col-6,
  .form-group.row .col-10 { flex: 1 1 auto; max-width: 100%; }

  /* Propform row fix: collapse cells to stack vertically */
  .propform tr { display: block; margin-bottom: 12px; }
  .propform td { display: block; padding: 2px 0; }
  .propform td.title { padding-bottom: 0; width: auto; }

  /* Same for input-group wrapping */
  .input-group { flex-wrap: wrap; }
  .input-group .input-group-prepend { width: 100%; }
  .input-group .input-group-text { border-radius: var(--r4); border-right: 1px solid var(--border); }
  .input-group .custom-select,
  .input-group select,
  .input-group input { border-radius: var(--r4); }

  /* Compact search options on phones */
  .searchoptions .input-group .input-group-prepend { width: 100%; }
  .searchoptions .input-group .input-group-prepend label { width: 100%; }
}


/* =============================================================================
   19b. ADDED — Tablet (769px – 1024px)
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Narrow the panels so the 3-column layout fits without overflow */
  #layout {
    --w-sidebar: 190px;
    --w-list: 260px;
  }
  /* Message list toolbar: hide text labels, keep icons */
  #messagelist-header .toolbar a .inner,
  #messagelist-header .refresh .inner { display: none; }
  #mailtoolbar a .inner { display: none; }
  #addressbooktoolbar a .inner { display: none; }
}

/* =============================================================================
   19c. ADDED — Small laptop (1025px – 1280px)
   ============================================================================= */
@media (min-width: 1025px) and (max-width: 1280px) {
  #layout { --w-list: 300px; }
}


/* =============================================================================
   19d. ADDED — Popover / dropdown menu responsive (matching Elastic's pattern)
   ============================================================================= */
/* On phones, dropdown popovers slide in from the right as a side drawer,
   rather than floating anchored to the trigger. This prevents them overflowing
   the viewport and makes them easier to use one-handed. */
@media (max-width: 768px) {
  .popover:not(.select-menu) {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 272px;
    max-width: 80vw;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    margin: 0 !important;
    transform: none !important;
    z-index: 1301;
  }
  .popover:not(.select-menu) .arrow { display: none !important; }
  .popover:not(.select-menu) .popover-header {
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: linear-gradient(135deg, var(--p800), var(--p600));
    color: var(--g200);
    font-weight: 700;
    font-size: 14px;
    padding: 0 14px;
    min-height: 46px;
  }
  .popover:not(.select-menu) .popover-header a {
    color: var(--g200);
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .popover-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 9, 41, .55);
    z-index: 1300;
  }
}

/* =============================================================================
   20. PRINT
   ============================================================================= */
body.action-print #layout-sidebar,
body.action-print #taskmenu,
body.action-print #messagelist-panel,
body.action-print #statusbar { display: none !important; }

body.action-print #layout { display: block; height: auto; }
body.action-print #layout-list { display: block; }
body.action-print #layout-content { box-shadow: none; border: none; }

/* =============================================================================
   21. UTILITIES
   ============================================================================= */
.voice,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hidden   { display: none !important; }
.d-none   { display: none !important; }

/* Responsive visibility helpers -- match Elastic's convention so ".hidden-small"
   hides elements on phones/tablets where the corresponding layout state
   (layout-phone, layout-small) is active. */
.hidden-phone  { display: none !important; }
.hidden-small  { display: none !important; }
.hidden-lbs    { display: inline-block !important; }
.hidden-big    { display: inline-block !important; }
.hidden-large  { display: inline-block !important; }
@media (min-width: 481px) {
  .hidden-phone { display: inline-block !important; }
}
@media (min-width: 769px) {
  .hidden-small { display: inline-block !important; }
  .hidden-lbs   { display: none !important; }
}
@media (min-width: 1025px) {
  .hidden-big   { display: none !important; }
  .hidden-large { display: inline-block !important; }
}
@media (min-width: 1201px) {
  .hidden-large { display: none !important; }
}
#supportlink { display: none; }

.noscriptwarning {
  color: var(--red);
  text-align: center;
  padding: 20px;
  font-weight: 600;
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--p200);
  border-top-color: var(--p500);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

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

/* Input groups (used in search form and settings) */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group-prepend {
  display: flex;
  align-items: center;
}

.input-group-text {
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--r4) 0 0 var(--r4);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.input-group .custom-select,
.input-group select,
.input-group input {
  border-radius: 0 var(--r4) var(--r4) 0;
  flex: 1;
  min-width: 0;
}

/* Form rows (Bootstrap-compatible).
   FIXED: consolidated all .form-group / .col-* / .form-check helpers here
   (previously duplicated in section 27). This is now the single source of truth. */
.form-group { margin-bottom: 14px; }
.form-group.row { display: flex; align-items: center; gap: 10px; }
.form-group.row.form-check { align-items: center; }
.col-form-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.col-sm-4 { flex: 0 0 110px; }
.col-sm-8 { flex: 1; }
.col-2  { flex: 0 0 150px; max-width: 150px; }
.col-6  { flex: 1; min-width: 0; }
.col-10 { flex: 1; min-width: 0; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check-input { width: auto !important; }
.custom-select { background: var(--surface); }

/* proplist (settings/search checkboxes) */
.proplist { list-style: none; padding: 0; }
.proplist li { list-style: none; }

/* with-sublist toggle */
.proplist li.with-sublist { position: relative; }
.proplist li.with-sublist .dropdown {
  margin-left: 2px;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
}
.proplist li .proplist.d-none { display: none !important; }
.proplist li .proplist {
  padding-left: 16px;
  margin-top: 4px;
}

/* Quota progress bar */
.quota-widget { font-size: 10px; color: rgba(255,255,255,.35); }

/* =============================================================================
   22. SHELL PLACEMENT FOR MULTI-PANEL SCREENS
       Address book / Settings use THREE sibling panels
       (#layout-sidebar + #layout-list + #layout-content) so they need a
       4-column grid. Compose uses content + right-hand options panel.
   ============================================================================= */
body.task-addressbook #layout,
body.task-settings #layout {
  grid-template-columns: var(--w-taskmenu) var(--w-sidebar) var(--w-list) 1fr;
}

body.task-addressbook #layout-list,
body.task-settings #layout-list {
  grid-row: 2;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}

body.task-addressbook #layout-content,
body.task-settings #layout-content {
  grid-row: 2;
  grid-column: 4;
}

/* Compose: form takes the main area, options/attachments on the right */
body.action-compose #layout {
  grid-template-columns: var(--w-taskmenu) 1fr 300px;
}
body.action-compose #layout-content { grid-row: 2; grid-column: 2; }
body.action-compose #layout-sidebar {
  grid-row: 2;
  grid-column: 3;
  border-right: none;
  border-left: 1px solid rgba(255,255,255,.06);
}

/* Standalone pages opened without the app chrome (extwin / new window) */
#layout:not(:has(#layout-menu)) { display: block; height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); overflow: hidden; }
#layout:not(:has(#layout-menu)) > #layout-content { height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); }
#layout > .frame-content { grid-column: 1 / -1; grid-row: 2; overflow-y: auto; }

/* Compose opened in its own window (extwin): the standalone rule above collapses
   #layout to display:block, which makes the compose form and the options/
   attachments rail stack on top of each other. Restore the clean two-pane layout
   (form fills the window, options rail pinned to the right). */
@media (min-width: 769px) {
  body.action-compose #layout:not(:has(#layout-menu)) {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: 100%;
  }
  body.action-compose #layout:not(:has(#layout-menu)) > #layout-content {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 0;
  }
  body.action-compose #layout:not(:has(#layout-menu)) > #layout-sidebar {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    min-height: 0;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,.06);
  }
  [dir="rtl"] body.action-compose #layout:not(:has(#layout-menu)) > #layout-sidebar {
    border-left: none;
    border-right: 1px solid rgba(255,255,255,.06);
  }
}

/* =============================================================================
   23. LIST PANELS  (#layout-list for address book / settings / folders…)
   ============================================================================= */
#layout-list > .header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--p600);
  min-height: 40px;
  flex-shrink: 0;
}

#layout-list > .header .header-title {
  flex: 1;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#layout-list > .header .button,
#layout-list > .header .toolbar a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.82);
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r4);
  padding: 4px 9px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s; /* FIXED: explicit props */
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

#layout-list > .header .button:hover,
#layout-list > .header .toolbar a:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
}

#layout-list > .header .button.disabled,
#layout-list > .header .toolbar a.disabled { opacity: .5; pointer-events: none; }

/* Contact-list header "Select" button → icon-above-label, like the mailbox bar.
   FIXED: merged here from section 35 (was duplicated). */
#layout-list > .header .toolbar a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 44px;
}
#layout-list > .header .toolbar a .inner { font-size: 9px; font-weight: 600; }
#layout-list > .header .toolbar a::before {
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#layout-list > .header .toolbar a.select::before { content: 'checklist'; }

/* Hide mobile-only nav buttons on desktop */
#layout-list > .header .back-sidebar-button,
#layout-list > .header .task-menu-button,
#layout-list > .header .toolbar-menu-button { display: none; }

/* Scroller fills remaining panel height */
#layout-list .scroller { flex: 1; min-height: 0; overflow-y: auto; }

#layout-list .footer { padding: 6px 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); flex-shrink: 0; }
#layout-list .footer .quota-widget,
#layout-list .footer #quotadisplay { color: var(--muted); }

/* Generic .listing tables / lists inside the light list panel */
#layout-list .listing { width: 100%; border-collapse: collapse; }
#layout-list .listing tr,
#layout-list .listing > li { border-bottom: 1px solid var(--p50); cursor: pointer; transition: background .1s; }
#layout-list .listing td { padding: 10px 14px; font-size: 13px; color: var(--text); }
#layout-list .listing > li > a,
#layout-list .listing > li > span { display: block; padding: 10px 14px; font-size: 13px; color: var(--text); text-decoration: none; }
#layout-list .listing tr:hover,
#layout-list .listing > li:hover { background: var(--p50); }
#layout-list .listing tr.selected,
#layout-list .listing > li.selected { background: var(--p100); box-shadow: inset 3px 0 0 var(--g500); }
#layout-list .listing tr.selected td,
#layout-list .listing > li.selected > a { color: var(--p800); font-weight: 600; }
#layout-list .listing tr.unread td { font-weight: 700; }

/* Folder manager subscription tree sits on a light panel — re-tint the tree */
#layout-list .treelist li a,
#layout-list .folderlist li a { color: var(--text); border-left-color: transparent; }
#layout-list .treelist li a:hover,
#layout-list .folderlist li a:hover { background: var(--p50); color: var(--p700); }
#layout-list .treelist li.selected > a,
#layout-list .folderlist li.selected > a { background: var(--p100); color: var(--p800); border-left-color: var(--g500); }
#layout-list .treelist .unreadcount,
#layout-list .folderlist .unreadcount { background: var(--g500); color: var(--p900); }
#layout-list .subscribed input,
#subscription-table input[type="checkbox"] { width: auto; }

/* Detail-pane iframes (contact / preferences / folder info) */
.iframe-wrapper iframe,
#contact-frame,
#preferences-frame { flex: 1; border: none; width: 100%; height: 100%; display: block; }

/* =============================================================================
   24. SETTINGS — sidebar tabs (#settings-menu) on the dark rail
   ============================================================================= */
#layout-sidebar #settings-menu { padding: 4px 0; margin: 0; }
#layout-sidebar #settings-menu li { list-style: none; }
#layout-sidebar #settings-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .12s, color .12s, border-color .12s; /* FIXED: explicit props */
  min-height: 36px;
}
#layout-sidebar #settings-menu li a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
#layout-sidebar #settings-menu li.selected a,
#layout-sidebar #settings-menu li a.selected {
  background: rgba(255,255,255,.10);
  color: var(--g200);
  border-left-color: var(--g500);
  font-weight: 600;
}

/* =============================================================================
   25. MESSAGE VIEW  (message.html — rendered framed in the preview pane)
   ============================================================================= */
html.iframe { height: 100%; }
html.iframe body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  padding: 0;
}
html.iframe #layout-content { flex: 1; min-height: 0; }
html.iframe .frame-content,
html.iframe .formcontent,
html.iframe .print-content { flex: 1; min-height: 0; overflow-y: auto; }

/* Standalone message view (double-click → action=show, not framed):
   only #taskmenu is placed in the grid, so #layout-content would otherwise
   auto-flow into the 220px sidebar column. Make it span the remaining width. */
body.task-mail.action-show #layout-content {
	grid-row: 2;
	grid-column: 2 / -1;
	min-width: 0;
}
/* The toolbar stays fixed; only the message body scrolls. Without this the
   non-framed page has no scroll container and #layout-content clips it. */
body.task-mail.action-show #layout-content > .frame-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

#message-header {
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--p50) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
}

#message-header .subject {
  font-size: 18px;
  font-weight: 700;
  color: var(--p800);
  line-height: 1.35;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#message-header .subject .extwin {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--p600);
  background: var(--p100);
  border: 1px solid var(--border);
  border-radius: var(--r99);
  padding: 4px 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
#message-header .subject .extwin:hover { background: var(--p600); color: #fff; border-color: var(--p600); }

#message-header .header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  min-height: 0;
  flex-wrap: nowrap;
}

.contactphoto {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--p200), var(--p100));
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--s1);
}
.contactphoto img { width: 100%; height: 100%; object-fit: cover; }

#message-header .header-content { flex: 1; min-width: 0; font-size: 13px; }

.header-summary {
  font-weight: 700;
  font-size: 14px;
  color: var(--p700);
  margin-bottom: 8px;
  line-height: 1.4;
}
.header-summary .date,
.header-summary .adr { color: var(--muted); font-weight: 500; }

/* Detailed headers are collapsed by default and revealed via the toggle link */
.header-headers { width: 100%; border-collapse: collapse; display: none; }
#message-header .header-content.details-view .header-summary { display: none; }
#message-header .header-content.details-view .header-headers { display: table; }
.header-headers td {
  padding: 3px 0;
  font-size: 13px;
  vertical-align: top;
  color: var(--text);
  border: none;
  line-height: 1.45;
}
.header-headers td:first-child,
.header-headers .header-title {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
  padding-right: 14px;
  padding-top: 4px;
  width: 1%;
}
.header-headers a { color: var(--p600); text-decoration: none; }
.header-headers a:hover { color: var(--g600); text-decoration: underline; }

.header-links {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.header-links a {
  color: var(--p600);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--r99);
  background: var(--p50);
  border: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.header-links a:hover { background: var(--p100); color: var(--p700); }

#message-content { display: flex; flex-direction: column; }
#message-content .leftcol { padding: 10px 18px 0; }
#message-content .rightcol { padding: 8px 18px 20px; min-width: 0; }
#messagebody { font-size: 14px; line-height: 1.75; color: var(--text); }
#messagebody iframe { width: 100%; border: none; }
.message-htmlpart, .message-part { line-height: 1.75; }


/* Tighten up message-header spacing on narrow screens to prevent the
   contact photo / summary from colliding with the window edge. */
@media (max-width: 768px) {
  #message-header { padding: 12px 14px; }
  #message-header .subject { font-size: 15px; gap: 8px; margin-bottom: 10px; }
  #message-header .subject .extwin { font-size: 10.5px; padding: 3px 8px; }
  #message-header .header { gap: 10px; }
  .contactphoto { width: 38px; height: 38px; }
  .header-summary { font-size: 12px; }
  .header-links { gap: 5px; font-size: 11px; padding-top: 6px; margin-top: 8px; }
  .header-links a { padding: 2px 7px; }
  #message-content .leftcol { padding: 6px 12px 0; }
  #message-content .rightcol { padding: 6px 12px 14px; }
  #messagebody { font-size: 13px; line-height: 1.6; }

  /* Headers meta table -> make cells stack so long To/Cc do not overflow */
  .header-headers td { display: block; width: 100%; padding: 1px 0; }
  .header-headers td:first-child,
  .header-headers .header-title { width: auto; padding-right: 0; }
}
/* =============================================================================
   26. COMPOSE  (compose.html — full page; options panel on the right rail)
   ============================================================================= */
body.action-compose #layout-content { display: flex; flex-direction: column; overflow: hidden; }
#compose-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.compose-headers {
  background: var(--g50);
  border-bottom: 1px solid var(--g200);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compose-headers .form-group.row { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; }
.compose-headers .col-form-label,
.compose-headers .col-2 {
  flex: 0 0 64px;
  max-width: 64px;
  text-align: right;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  padding: 0;
}
.compose-headers .col-10 { flex: 1; min-width: 0; }
.compose-headers .input-group { display: flex; align-items: stretch; width: 100%; }
.compose-headers input,
.compose-headers textarea,
.compose-headers .form-control {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r4);
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.compose-headers input:focus,
.compose-headers textarea:focus,
.compose-headers .form-control:focus {
  border-color: var(--p400);
  box-shadow: 0 0 0 3px var(--p100);
  outline: none;
}

/* Recipient (autocomplete) widget */
.recipient-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r4);
  padding: 3px 6px;
  background: var(--surface);
}
.recipient-input input { border: none; flex: 1; min-width: 110px; box-shadow: none; padding: 3px; }
.recipient-input input:focus { box-shadow: none; }
.recipient-input .recipient,
.recipient-input li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--p100);
  color: var(--p800);
  border-radius: var(--r99);
  padding: 2px 8px;
  font-size: 12px;
  list-style: none;
}
.recipient-input .recipient .button,
.recipient-input li a { color: var(--p500); cursor: pointer; }

/* From-line autocomplete list popup */
.ac-results { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r6); box-shadow: var(--s2); z-index: 2500; }
.ac-results li { padding: 7px 12px; font-size: 13px; cursor: pointer; list-style: none; }
.ac-results li:hover,
.ac-results li.selected { background: var(--p50); color: var(--p700); }

.input-group-append { display: flex; align-items: stretch; }
.input-group-append .input-group-text {
  border-radius: 0 var(--r4) var(--r4) 0;
  border-left: none;
  background: var(--p50);
  color: var(--p600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.input-group-append .input-group-text:hover { background: var(--p100); color: var(--p700); }

#composebodycontainer { flex: 1; min-height: 260px; display: flex; flex-direction: column; padding: 0; }
textarea#composebody {
  flex: 1;
  width: 100%;
  border: none;
  resize: none;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  box-shadow: none;
}
textarea#composebody:focus { box-shadow: none; }

/* Make the form scroll internally and pin the Send footer at the bottom */
body.action-compose #compose-content { overflow: hidden; }
body.action-compose #compose-content > form.formcontent {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
}
body.action-compose #compose-headers,
body.action-compose #compose-objects { flex-shrink: 0; }
body.action-compose #composebodycontainer { flex: 1; min-height: 160px; }
body.action-compose .formbuttons { flex-shrink: 0; }

/* The "smart" attachment upload input is triggered via JS — keep it offscreen */
body.action-compose #uploadform {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form action bar (Send / Save) */
.formbuttons {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.formbuttons .float-right { margin-left: auto; }

/* Primary calls-to-action use the gold gradient with dark-purple text */
.btn-primary.send,
.btn.send,
.btn-primary.submit,
button.btn-primary.submit,
button.icon.search,
.btn-primary.icon.search {
  background: linear-gradient(135deg, var(--g400), var(--g600));
  color: var(--p900);
  border: none;
  font-weight: 700;
}
.btn-primary.send:hover,
.btn.send:hover,
.btn-primary.submit:hover,
button.icon.search:hover,
.btn-primary.icon.search:hover { filter: brightness(1.05); box-shadow: var(--s2); color: var(--p900); }
.btn-primary.send { border-radius: var(--r99); padding: 9px 26px; }

/* Compose options/attachments rail (dark) */
body.action-compose #layout-sidebar .header { color: rgba(255,255,255,.6); }
body.action-compose #layout-sidebar .scroller { flex: 1; overflow-y: auto; padding: 12px; }
#compose-attachments .upload-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#compose-attachments .hint,
#compose-attachments .upload-form > span { color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.5; }
#compose-attachments .btn.attach,
.btn-secondary.attach {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22);
}
#compose-attachments .btn.attach:hover,
.btn-secondary.attach:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); }
#compose-options { padding-top: 4px; }
#compose-options .form-group.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#compose-options .col-form-label,
#compose-options label { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600; }
#compose-options select,
#compose-options .custom-select,
#compose-options input[type="text"] {
  background: var(--p800);
  color: #fff;
  border: 1px solid var(--p600);
}
#compose-options .form-check { justify-content: flex-end; }

/* Editor (TinyMCE) chrome kept simple & inside the body container */
.mce-tinymce, .tox-tinymce { border: none !important; }

/* =============================================================================
   27. FORMS  (contact edit, settings prefs, identities, folders, responses)
       — these render framed inside the detail iframe (.formcontent + .formbuttons)
   ============================================================================= */
html.iframe body > .formcontent,
html.iframe body > form.formcontent { padding: 18px 22px; }
.formcontent { padding: 16px 20px; }

.propform { font-size: 13px; }
.propform fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: var(--surface);
  padding: 8px 18px 16px;
  margin: 0 0 18px;
}
.propform legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--p700);
  padding: 2px 8px;
  letter-spacing: .01em;
}
.propform table { width: 100%; border-collapse: collapse; }
.propform td { padding: 6px 8px; vertical-align: middle; }
/* FIXED: removed duplicate .propform td.title (vertical-align consolidated to section 16, which keeps vertical-align: top) */
.propform input[type="text"],
.propform input[type="email"],
.propform input[type="password"],
.propform input[type="number"],
.propform input[type="tel"],
.propform input[type="url"],
.propform select,
.propform textarea,
.propform .form-control { width: 100%; }

/* On phones the framed edit forms (identity / folder / response / preferences)
   stack the label above its field instead of squeezing a 2-column table.
   Scoped to html.iframe so it only affects the framed forms, where the media
   query resolves against the iframe's own (full-width) viewport. */
@media (max-width: 768px) {
  html.iframe .propform table,
  html.iframe .propform tbody,
  html.iframe .propform tr,
  html.iframe .propform td { display: block; width: auto; }
  html.iframe .propform td.title {
    white-space: normal;
    padding: 8px 0 2px;
    text-align: left;
  }
  html.iframe .propform td { padding: 0 0 8px; }
  [dir="rtl"] html.iframe .propform td.title { text-align: right; }
}

/* Bootstrap-style rows used across the forms.
   FIXED: .form-group / .form-group.row / .col-2 / .col-6 / .col-10 /
   .col-form-label / .form-check* / .custom-select deduplicated — see section 21. */

/* Contact detail / edit header */
.contact-header { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.contact-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--p100);
  box-shadow: var(--s1);
  border: 2px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-header .contact-head {
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.contact-head .fn,
.contact-head .composite-name,
.contact-head .name { font-size: 20px; font-weight: 700; color: var(--p800); line-height: 1.2; }
.contact-head .source,
.contact-head .organization,
.contact-head .jobtitle { color: var(--muted); font-size: 13px; }

/* Tabbed sections inside contact view */
.tabbed > .tablink,
.tabbed .tabsbar a,
ul.tabbed > li > a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.tabbed > .tablink.selected,
.tabbed .tabsbar a.selected,
ul.tabbed > li.selected > a { color: var(--p700); border-bottom-color: var(--g500); font-weight: 600; }

/* =============================================================================
   28. ABOUT / PLUGIN / RECORDS TABLES / MISC FRAMES
   ============================================================================= */
.frame-content { padding: 0px 0px; }

/* Responsive contact table (narrow screens): stack cell into label/data rows
   so the table stays readable without horizontal scrolling. */
@media (max-width: 768px) {
  .contact-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .contact-header .contact-head { text-align: center; }
  .contact-head .fn,
  .contact-head .composite-name,
  .contact-head .name { font-size: 17px; }
  .contact-photo { width: 68px; height: 68px; }

  /* Contact property table -> stacked */
  #contacts-table td { padding: 6px 10px; font-size: 12px; }

  .records-table th,
  .records-table td { padding: 5px 8px; font-size: 11px; }
}
.frame-content .sysname { font-size: 16px; color: var(--p700); margin: 16px 0 6px; }
.frame-content .copyright,
.frame-content .license { color: var(--muted); font-size: 12px; line-height: 1.6; }
.frame-content .readtext h3 { font-size: 13px; color: var(--p600); margin: 16px 0 8px; }

.records-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.records-table th,
.records-table td { padding: 7px 12px; border-bottom: 1px solid var(--p50); text-align: left; font-size: 12px; }
.records-table th { color: var(--p600); background: var(--p50); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.records-table tr:hover td { background: var(--p50); }

/* Attachment / message-part preview frame fills its pane */
#messagepartframe { flex: 1; border: none; width: 100%; height: 100%; display: block; }

/* =============================================================================
   29. RTL OVERRIDES — new screens
   ============================================================================= */
[dir="rtl"] body.task-addressbook #layout-list,
[dir="rtl"] body.task-settings #layout-list { border-right: none; border-left: 1px solid var(--border); }

[dir="rtl"] body.action-compose #layout-sidebar { border-left: none; border-right: 1px solid rgba(255,255,255,.06); }

[dir="rtl"] #layout-list .listing tr.selected,
[dir="rtl"] #layout-list .listing > li.selected { box-shadow: inset -3px 0 0 var(--g500); }

[dir="rtl"] #layout-list .treelist li.selected > a,
[dir="rtl"] #layout-list .folderlist li.selected > a { border-left-color: transparent; border-right-color: var(--g500); }

[dir="rtl"] #layout-sidebar #settings-menu li.selected a,
[dir="rtl"] #layout-sidebar #settings-menu li a.selected { border-left: none; border-right: 3px solid var(--g500); }

[dir="rtl"] .compose-headers .col-form-label,
[dir="rtl"] .compose-headers .col-2 { text-align: left; }

[dir="rtl"] .header-headers td:first-child,
[dir="rtl"] .header-headers .header-title { padding-right: 0; padding-left: 12px; }

[dir="rtl"] .input-group-append .input-group-text { border-radius: var(--r4) 0 0 var(--r4); }

[dir="rtl"] #message-header .subject .extwin { margin-left: 0; margin-right: auto; }

[dir="rtl"] .contact-header { flex-direction: row; }

[dir="rtl"] .propform td.title { padding: 6px 0 6px 14px; text-align: right; }

[dir="rtl"] .records-table th,
[dir="rtl"] .records-table td { text-align: right; }

/* =============================================================================
   30. RESPONSIVE — new screens (≤ 768px)  mirror the mailbox strategy
   ============================================================================= */
@media (max-width: 768px) {
  body.task-addressbook #layout,
  body.task-settings #layout { grid-template-columns: 0 0 0 1fr; }

  body.task-addressbook #layout-list,
  body.task-settings #layout-list { grid-column: 4; border-right: none; }

  body.task-addressbook #layout-content,
  body.task-settings #layout-content { display: none; }

  body.task-addressbook.show-preview #layout-list,
  body.task-settings.show-preview #layout-list { display: none; }
  body.task-addressbook.show-preview #layout-content,
  body.task-settings.show-preview #layout-content { display: flex; grid-column: 4; }

  body.action-compose #layout { grid-template-columns: 0 1fr 0; }

  /* show the mobile nav buttons in list headers */
  #layout-list > .header .back-sidebar-button,
  #layout-list > .header .task-menu-button,
  #layout-list > .header .toolbar-menu-button { display: inline-flex; }
}

/* =============================================================================
   31. SPLIT-BUTTON DROPDOWN — collapse the screen-reader label to a caret
       (keeps reply-all / forward toolbars from overflowing)
   ============================================================================= */
.dropbutton .dropdown .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.dropbutton .dropdown::after { content: "\25BE"; font-size: 9px; line-height: 1; }

/* =============================================================================
   32. POLISH — Material-icon search buttons & hidden desktop nav labels
   ============================================================================= */
/* Search bar action buttons (reset / options / find) → Material Icons */
.searchbar .button { position: relative; }
.searchbar .button .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.searchbar .button::before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
.searchbar .button.reset::before   { content: 'close'; }
.searchbar .button.options::before { content: 'tune'; }
.searchbar .button.search::before  { content: 'search'; }
.searchbar .button.search { background: var(--p600); color: #fff; }
.searchbar .button.search::before { color: #fff; }
.searchbar .button.search:hover { background: var(--p500); }

/* Sidebar "Actions" (folder/group options) button → icon */
#layout-sidebar .header .sidebar-menu .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
#layout-sidebar .header .sidebar-menu::before {
  font-family: 'Material Icons';
  content: 'more_vert';
  font-size: 17px;
  line-height: 1;
}

/* Desktop: hide the text-label "Menu" / "Back" buttons that belong to mobile.
   (Mail's #messagelist-header overrides re-show its own on mobile in §19.) */
.task-menu-button,
.toolbar-menu-button,
.header .back-content-button { display: none; }

/* =============================================================================
   33. MAIL TOOLBAR ICONS — icon-above-label buttons (like the stock theme)
   ============================================================================= */

/* --- Message-list header: Select / Threads / Options / Refresh ---
   These sit on the dark purple bar, so make the labels white + add icons. */
#messagelist-header .toolbar a,
#messagelist-header .refresh {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 44px;
  padding: 3px 7px;
  border-radius: var(--r4);
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s; /* FIXED: explicit props */
  line-height: 1.15;
}

#messagelist-header .toolbar a:hover,
#messagelist-header .refresh:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

#messagelist-header .toolbar a.disabled { opacity: .55; pointer-events: none; }

#messagelist-header .toolbar a .inner,
#messagelist-header .refresh .inner {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

#messagelist-header .toolbar a::before,
#messagelist-header .refresh::before {
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#messagelist-header .select::before  { content: 'checklist'; }
#messagelist-header .threads::before { content: 'forum'; }
#messagelist-header .options::before { content: 'tune'; }
#messagelist-header .refresh::before { content: 'refresh'; }

/* --- Preview/message toolbar: Reply / Reply all / Forward / Delete / Mark / More --- */
#mailtoolbar > a,
#mailtoolbar > .button,
#mailtoolbar .dropbutton > a:first-child {
  flex-direction: column;
  gap: 1px;
  min-width: 46px;
  padding: 4px 8px;
}

#mailtoolbar a .inner {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
}

#mailtoolbar a::before {
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#mailtoolbar .reply::before       { content: 'reply'; }
#mailtoolbar .reply-all::before   { content: 'reply_all'; }
#mailtoolbar .forward::before     { content: 'forward'; }
#mailtoolbar .delete::before      { content: 'delete'; }
#mailtoolbar .print::before       { content: 'print'; }
#mailtoolbar .markmessage::before { content: 'label'; }
#mailtoolbar .more::before        { content: 'more_horiz'; }
#mailtoolbar .prev::before        { content: 'navigate_before'; }
#mailtoolbar .next::before        { content: 'navigate_next'; }

/* Keep the split-button caret centered next to the taller icon button */
#mailtoolbar .dropbutton .dropdown { align-self: stretch; }

/* =============================================================================
   34. MOBILE HEADER NAV — hamburger / folder / back rendered as icons
   ============================================================================= */
@media (max-width: 768px) {
  /* The list "more" button is redundant on touch (its actions already sit
     inline on the bar or in the content toolbar) — drop it everywhere. */
  #messagelist-header .toolbar-menu-button,
  #layout-list > .header .toolbar-menu-button { display: none !important; }

  /* Strip the pill styling off the nav buttons so they read as plain icons */
  #messagelist-header .task-menu-button,
  #messagelist-header .back-sidebar-button,
  #layout-list > .header .task-menu-button,
  #layout-list > .header .back-sidebar-button,
  #layout-content .header .back-list-button,
  #layout-sidebar .header .back-list-button,
  .header .back-content-button {
    border: none;
    background: transparent;
    padding: 5px;
    min-width: 36px;
    justify-content: center;
  }

  /* Visually hide the text label (kept for screen readers) */
  #messagelist-header .task-menu-button .inner,
  #messagelist-header .back-sidebar-button .inner,
  #layout-list > .header .task-menu-button .inner,
  #layout-list > .header .back-sidebar-button .inner,
  #layout-content .header .back-list-button .inner,
  #layout-sidebar .header .back-list-button .inner,
  .header .back-content-button .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #messagelist-header .task-menu-button::before,
  #messagelist-header .back-sidebar-button::before,
  #layout-list > .header .task-menu-button::before,
  #layout-list > .header .back-sidebar-button::before,
  .header .back-list-button::before,
  .header .back-content-button::before {
    font-family: 'Material Icons';
    font-size: 22px;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
  }

  #messagelist-header .task-menu-button::before,
  #layout-list > .header .task-menu-button::before   { content: 'menu'; }
  /* The "open the secondary nav" button is contextual: folders in mail,
     the settings tabs in settings, the groups list in the address book. */
  #messagelist-header .back-sidebar-button::before,
  #layout-list > .header .back-sidebar-button::before { content: 'folder'; }
  body.task-settings #layout-list > .header .back-sidebar-button::before { content: 'tune'; }
  body.task-addressbook #layout-list > .header .back-sidebar-button::before { content: 'groups'; }
  .header .back-list-button::before,
  .header .back-content-button::before { content: 'arrow_back'; }

  /* Icon colours per header background */
  #messagelist-header .task-menu-button,
  #messagelist-header .back-sidebar-button,
  #layout-list > .header .task-menu-button,
  #layout-list > .header .back-sidebar-button { color: #fff; }
  #layout-content .header .back-list-button,
  .header .back-content-button { color: var(--p700); }
  #layout-sidebar .header .back-list-button { color: rgba(255, 255, 255, .7); }
}

/* =============================================================================
   35. ADDRESS BOOK TOOLBARS — icon-above-label buttons (match the mail view)
   ============================================================================= */
#addressbooktoolbar > a,
#addressbooktoolbar > .button,
#addressbooktoolbar .dropbutton > a:first-child {
  flex-direction: column;
  gap: 1px;
  min-width: 46px;
  padding: 4px 8px;
}

#addressbooktoolbar a .inner {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
}

#addressbooktoolbar a::before {
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#addressbooktoolbar .create::before { content: 'person_add'; }
#addressbooktoolbar .print::before  { content: 'print'; }
#addressbooktoolbar .delete::before { content: 'delete'; }
#addressbooktoolbar .search::before { content: 'search'; }
#addressbooktoolbar .import::before { content: 'upload'; }
#addressbooktoolbar .export::before { content: 'download'; }
#addressbooktoolbar .more::before   { content: 'more_horiz'; }

#addressbooktoolbar .dropbutton .dropdown { align-self: stretch; }

/* =============================================================================
   35b. SETTINGS CONTENT-HEADER TOOLBARS — identities / folders / responses
        (create / delete / purge) get icon-above-label buttons too.
   ============================================================================= */
#identitiestoolbar > a,
#identitiestoolbar > .button,
#folderstoolbar > a,
#folderstoolbar > .button,
#responsestoolbar > a,
#responsestoolbar > .button {
  flex-direction: column;
  gap: 1px;
  min-width: 46px;
  padding: 4px 8px;
}
#identitiestoolbar a .inner,
#folderstoolbar a .inner,
#responsestoolbar a .inner { font-size: 9px; font-weight: 600; line-height: 1.15; }
#identitiestoolbar a::before,
#folderstoolbar a::before,
#responsestoolbar a::before {
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#identitiestoolbar .create::before,
#folderstoolbar .create::before,
#responsestoolbar .create::before { content: 'add'; }
#identitiestoolbar .delete::before,
#folderstoolbar .delete::before,
#responsestoolbar .delete::before { content: 'delete'; }
#folderstoolbar .purge::before { content: 'delete_sweep'; }

/* Floating "create" action button — only shown on phones (the real create
   button it proxies lives in the content toolbar, hidden behind the list). */
.mc-fab { display: none; }
@media (max-width: 768px) {
  body.task-settings .mc-fab,
  body.task-addressbook .mc-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--g500);
    color: var(--p900);
    box-shadow: var(--s3);
    z-index: 90;
    cursor: pointer;
    transition: transform .12s, background .12s;
  }
  body.task-settings .mc-fab:active,
  body.task-addressbook .mc-fab:active { transform: scale(.94); }
  .mc-fab::before {
    font-family: 'Material Icons';
    content: 'add';
    font-size: 27px;
    line-height: 1;
  }
  .mc-fab.disabled { opacity: .4; pointer-events: none; }
  [dir="rtl"] body.task-settings .mc-fab,
  [dir="rtl"] body.task-addressbook .mc-fab { right: auto; left: 18px; }
  /* Hide it while editing an item or when a drawer is open */
  body.show-preview .mc-fab,
  body.show-menu .mc-fab,
  body.show-sidebar .mc-fab { display: none; }
}

/* FIXED: removed duplicate "Contact-list header Select button" block —
   merged into section 23. */

/* =============================================================================
   36. COMPOSE TOOLBAR + mobile nav
   ============================================================================= */
/* Compose toolbar (#messagetoolbar): icon-above-label, like the mail toolbar */
#messagetoolbar > a,
#messagetoolbar > .button,
#messagetoolbar .dropbutton > a:first-child {
  flex-direction: column;
  gap: 1px;
  min-width: 46px;
  padding: 4px 8px;
}
#messagetoolbar a .inner { font-size: 9px; font-weight: 600; line-height: 1.15; }
#messagetoolbar a::before {
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
#messagetoolbar .options::before    { content: 'tune'; }
#messagetoolbar .save::before,
#messagetoolbar .draft::before      { content: 'save'; }
#messagetoolbar .attach::before     { content: 'attach_file'; }
#messagetoolbar .signature::before  { content: 'edit_note'; }
#messagetoolbar .responses::before  { content: 'quickreply'; }
#messagetoolbar .spellcheck::before { content: 'spellcheck'; }
#messagetoolbar .encrypt::before    { content: 'lock'; }
#messagetoolbar .dropbutton .dropdown { align-self: stretch; }

@media (max-width: 768px) {
  /* Reveal + iconify the compose header nav (hamburger app-menu + back-to-editor) */
  #layout-content .header .task-menu-button { display: inline-flex; }
  .header .back-content-button { display: inline-flex; }

  #layout-content .header .task-menu-button,
  #layout-content .header .back-content-button {
    border: none;
    background: transparent;
    padding: 5px;
    min-width: 36px;
    justify-content: center;
    color: var(--p700);
  }
  #layout-content .header .task-menu-button .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #layout-content .header .task-menu-button::before {
    font-family: 'Material Icons';
    content: 'menu';
    font-size: 22px;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
  }

  /* Options/attachments rail slides in from the right on phones */
  body.action-compose #layout-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  body.action-compose.show-sidebar #layout-sidebar { transform: translateX(0); }
}

/* =============================================================================
   37. COMPOSE — recipient field buttons as icons + mobile layout/scroll fix
   ============================================================================= */
/* The To/Cc/Bcc append buttons (edit-identity, add-contact, add-header, delete)
   were showing their full text label, which made them huge. Render them as
   compact square icon buttons instead. */
.input-group-append .input-group-text.icon {
  padding: 0;
  min-width: 38px;
  justify-content: center;
}
.input-group-append .input-group-text.icon .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.input-group-append .input-group-text.icon::before {
  font-family: 'Material Icons';
  font-size: 18px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
.input-group-append .input-group-text.edit::before          { content: 'edit'; }
.input-group-append .input-group-text.add::before           { content: 'add'; }
.input-group-append .input-group-text.add.recipient::before { content: 'person_add'; }
.input-group-append .input-group-text.delete::before        { content: 'close'; }

@media (max-width: 768px) {
  /* On phones, drop the fixed-height nested-flex panes (which trapped scrolling
     and squashed the editor) and let the whole compose form scroll naturally. */
  body.action-compose #layout-content { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.action-compose #layout-content > .header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--p50);
  }
  body.action-compose #compose-content,
  body.action-compose #compose-content > form.formcontent {
    display: block;
    overflow: visible;
    min-height: 0;
    flex: none;
  }
  body.action-compose #composebodycontainer {
    display: block;
    flex: none;
    min-height: 0;
  }

  /* Give the message editor a comfortable, finger-friendly height with
     normal-sized, readable body text (so typing doesn't look magnified). */
  textarea#composebody {
    min-height: 38vh;
    height: auto;
    flex: none;
    font-size: 16px;
    line-height: 1.6;
    padding: 12px 14px;
  }
  body.action-compose .mce-tinymce,
  body.action-compose .tox-tinymce,
  body.action-compose #composebodycontainer .mce-edit-area,
  body.action-compose #composebodycontainer .tox-edit-area,
  body.action-compose #composebodycontainer iframe {
    min-height: 38vh !important;
  }

  /* Pin the Send/Save bar to the bottom so it's always reachable — the tall
     editor otherwise captures touch-scroll and hides it off-screen. */
  body.action-compose .formbuttons {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: var(--bg);
    box-shadow: 0 -2px 10px rgba(44, 7, 18, .12);
  }

  /* FIXED: compose looked oversized/"magnified" on phones. Tighten the header
     block so From / To / Subject read as compact mail fields, not desktop rows. */
  body.action-compose .compose-headers {
    padding: 8px 12px;
    gap: 6px;
  }
  body.action-compose .compose-headers .form-group.row { flex-direction: row; gap: 8px; }
  body.action-compose .compose-headers .col-form-label,
  body.action-compose .compose-headers .col-2 {
    flex: 0 0 50px;
    max-width: 50px;
    font-size: 12px;
  }

  /* Uniform, compact field height. 16px text keeps inputs readable AND prevents
     iOS Safari from zooming in (auto-magnifying) when a field is focused. */
  body.action-compose .compose-headers input,
  body.action-compose .compose-headers .form-control,
  body.action-compose .recipient-input input {
    font-size: 16px;
    padding: 7px 10px;
  }
  body.action-compose .recipient-input {
    min-height: 40px;
    padding: 2px 6px;
  }
  body.action-compose .recipient-input input { padding: 5px 4px; min-width: 90px; }

  /* Append buttons (add contact / new recipient) sized to match the field */
  body.action-compose .input-group-append .input-group-text.icon { min-width: 40px; }

  /* Compose toolbar → clean icon row. The verbose labels ("Options and
     attachments", "Responses"…) otherwise wrap and dominate the bar. Scroll
     horizontally if the icons don't all fit. */
  body.action-compose #messagetoolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.action-compose #messagetoolbar::-webkit-scrollbar { display: none; }
  body.action-compose #messagetoolbar a .inner { display: none; }
  body.action-compose #messagetoolbar > a,
  body.action-compose #messagetoolbar > .button,
  body.action-compose #messagetoolbar .dropbutton > a:first-child {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    justify-content: center;
  }
  body.action-compose #messagetoolbar a::before { font-size: 22px; }
}