/* ============================================================
   Antiot Email — styling based on the OneStop design system.

   ============ ONE-COLOUR THEME ============
   Change the SINGLE background value in the rule below and the
   whole site re-themes itself:
     - navbar, buttons, footer, pills change instantly (this rule)
     - the Antiot logo, links, headings, borders take the same
       colour, and selected/hovered email rows take lighter tints —
       all derived automatically by a watcher in site.js within
       ~0.3s of your edit (no browser refresh needed).

   The gold contrast colour (titles/badges shown ON the theme
   colour) is separate — see the "THEME CONTRAST" rule below.
   ============================================ */

/* >>> THE theme colour — edit this one value <<< */
.site-nav,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.site-footer,
.dropdown-item.active,
.dropdown-item:active,
.account-card__badge {
  background: #0b5ed7;
}

/* Everything below derives from the colour above via site.js:
   --theme        the navbar colour itself
   --theme-dark   ~28% darker
   --theme-light  ~87% lighter (selected email row)
   --theme-lighter ~94% lighter (row hover)
   The hex fallbacks only apply for the instant before JS runs. */

/* THEME as TEXT on white: brand logo, links, icons, headings */
.utility-brand,
.utility-brand:hover,
.utility-brand:focus,
a,
.feature-card .bi,
.attachment-chip:hover,
.settings-form-grid h3 {
  color: var(--theme, #563d7c);
}

/* THEME as BORDER: selected email row, attachment chips */
.mail-row.selected {
  border-left: 3px solid var(--theme, #563d7c);
}

.attachment-chip:hover {
  border-color: var(--theme, #563d7c);
}

/* THEME CONTRAST (gold): titles/text shown on the theme colour —
   edit this value separately if you change to a light theme colour */
.site-nav .navbar-brand,
.site-nav .navbar-brand:hover,
.site-nav .navbar-brand:focus,
.site-footer,
.account-card__badge {
  color: #ffe484;
}

.site-nav .nav-badge {
  background: #ffe484;
  color: var(--theme-dark, #40295f);
}

/* Landing-page hero gradient (darker shade -> theme) */
.home-hero {
  background: linear-gradient(135deg, var(--theme-dark, #40295f) 0%, var(--theme, #563d7c) 60%, var(--theme, #563d7c) 130%);
}

/* TOOLBAR BARS — one shared background for the three bars across the top of
   the mail panel: the folder-title bar ("Inbox" + Check mail), the select-all
   bar and the reading-pane button bar. Experiment with this one value. */
/* CARD BACKGROUND — one value to experiment with: everything in the mail
   card EXCEPT the selected-email band — the "Inbox / Check mail" title bar,
   the select-all bar and the not-in-focus email rows. */
.mail-toolbar,
.mail-status,
.mail-row {
  background: #f7f7f7;
}

/* SELECTED-EMAIL BAND — the open list row, the Reply/Forward button bar and
   the reading pane are WHITE so the email in focus stands out of the card
   and connects to its content on the right. (The body iframe is white too —
   emails bring their own background.) */
.mail-row.selected,
.mail-reading__actions,
.mail-reading {
  background: #ffffff;
}

/* ============== END OF THEME SECTION ============== */

.utility-nav {
  background: #ffffff;
  border-bottom-color: #dde2de;
}

.utility-brand,
.utility-brand:hover,
.utility-brand:focus {
  text-decoration: none;
}

.utility-nav .nav-link,
.utility-nav .nav-link-button {
  color: #1f261f;
}

.utility-nav .nav-link:hover,
.utility-nav .nav-link:focus,
.utility-nav .nav-link.active,
.utility-nav .nav-link-button:hover,
.utility-nav .nav-link-button:focus,
.utility-nav .nav-link-button.active {
  color: #183d31;
  background: #edf0ef;
}

.utility-nav .nav-item:not(:last-child)::after {
  background: rgba(31, 38, 31, .2);
}

.site-nav {
  box-shadow: 0 1px 0 rgba(24, 61, 49, .16);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff;
  border-color: transparent;
}

.site-nav .navbar-brand .bi {
  color: #ffffff;
}

.site-nav .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .88);
}

.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link:focus,
.site-nav .navbar-nav .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}

.site-nav .nav-item:not(:last-child)::after {
  background: rgba(255, 255, 255, .18);
}

/* Neutral scaffolding tokens (text, borders, surfaces) — same as OneStop */
:root {
  --ink: #1d1f1f;
  --muted: #68706d;
  --line: #dde2de;
  --surface: #ffffff;
  --surface-alt: #f3f5f2;
  --page: #f6f7f5;
  --shadow-sm: 0 8px 22px rgba(29, 31, 31, .06);
}

/* Fixed app shell: the page itself never scrolls. Header and footer are
   always visible; <main> is the only scroll region for plain pages, and the
   mail views fit it exactly so their inner panes scroll instead. */
html {
  font-size: 16px;
  height: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overflow: hidden;
  color: var(--ink);
  background: var(--page);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  display: flex;
  flex-direction: column;
}

body > header,
body > .site-footer {
  flex: 0 0 auto;
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

a:hover {
  color: #b73b2f;
}

.btn {
  border-radius: 4px;
  font-weight: 600;
}

/* All outline (transparent) buttons get a white resting background so they
   stand off tinted bars; their coloured hover/active fills still apply */
.btn-outline-primary:not(:hover):not(:active),
.btn-outline-secondary:not(:hover):not(:active),
.btn-outline-success:not(:hover):not(:active),
.btn-outline-danger:not(:hover):not(:active),
.btn-outline-dark:not(:hover):not(:active) {
  background-color: #ffffff;
}

/* Disabled outline buttons: Bootstrap fades the WHOLE button to 65% opacity,
   which lets the bar colour bleed through. Keep the background solid white
   and fade only the text/border instead. */
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled,
.btn-outline-success:disabled,
.btn-outline-danger:disabled,
.btn-outline-dark:disabled {
  background-color: #ffffff;
  opacity: 1;
  color: color-mix(in srgb, var(--bs-btn-disabled-color) 45%, #ffffff);
  border-color: color-mix(in srgb, var(--bs-btn-disabled-border-color) 40%, #ffffff);
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .08);
}

/* ---------- Utility (white) navbar ---------- */

.utility-nav {
  min-height: 2.35rem;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.utility-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Brand + account switcher grouped on the left, above the email list */
.utility-nav__left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.account-tools-group {
  display: flex;
  align-items: center;
  gap: .18rem;
  min-width: 0;
}

.utility-brand {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 400;
}

.utility-brand .bi {
  font-size: 1.2rem;
}

.utility-nav__links {
  gap: .1rem;
  margin-left: 0 !important;
}

.utility-nav .nav-link,
.utility-nav .nav-link-button {
  font-size: .8rem;
  font-weight: 500;
  border-radius: 4px;
  padding: .32rem .6rem;
}

.utility-nav .nav-link:hover,
.utility-nav .nav-link:focus,
.utility-nav .nav-link.active,
.utility-nav .nav-link-button:hover,
.utility-nav .nav-link-button:focus,
.utility-nav .nav-link-button.active {
  text-decoration: none;
}

.utility-nav .nav-item {
  display: inline-flex;
  align-items: center;
}

.utility-nav .nav-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.15rem;
  margin: 0 .42rem;
}

/* ---------- Purple main navbar ---------- */

.site-nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 400;
}

.site-nav .navbar-brand .bi {
  font-size: 1.3rem;
}

.site-nav .nav-link {
  font-size: .9rem;
  font-weight: 500;
  border-radius: 4px;
  padding-right: .9rem;
  padding-left: .9rem;
}

.site-nav .nav-item {
  display: flex;
  align-items: center;
}

.site-nav .nav-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.5rem;
  margin: 0 .65rem;
  border-radius: 999px;
}

/* Contacts / Blocked icons at the right-hand end of the main navbar */
.main-nav__people .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-right: .7rem;
  padding-left: .7rem;
}

.main-nav__people .nav-link .bi {
  font-size: 1.2rem;
  line-height: 1;
}

.main-nav__people .nav-item:not(:last-child)::after {
  margin: 0 .3rem;
}

/* The word shows only in the collapsed (phone/tablet) menu */
.main-nav__people-label {
  display: none;
}

/* Count badges on the purple navbar folder links */
.site-nav .nav-badge {
  display: inline-block;
  margin-left: .25rem;
  font-size: .68rem;
  font-weight: 700;
  min-width: 1.4rem;
  text-align: center;
  padding: .1rem .38rem;
  border-radius: 999px;
  vertical-align: text-top;
}

/* Account switcher dropdown in the white utility navbar */
.utility-nav .account-switcher.show .nav-link-button {
  color: #183d31;
  background: #edf0ef;
}

/* The envelope glyph is short and wide, so it reads smaller than the
   person-circle next to it at the same font-size — bump it slightly. */
.utility-nav .account-switcher .bi {
  font-size: .9rem;
  vertical-align: -.12em;
}

.account-switcher__label {
  vertical-align: middle;
}

.account-switcher__menu {
  min-width: 20rem;
}

.utility-tools__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0 !important;
  font-size: 1rem !important;
}

.utility-tools.show .utility-tools__button {
  color: #183d31;
  background: #edf0ef;
}

.utility-tools__menu {
  min-width: 13rem;
}

.sync-health-dot {
  display: inline-block;
  width: .58rem;
  height: .58rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: #8a9390;
  box-shadow: 0 0 0 2px rgba(138, 147, 144, .14);
  vertical-align: .02em;
  flex: 0 0 auto;
}

.sync-health-dot--healthy { background: #25834f; box-shadow: 0 0 0 2px rgba(37, 131, 79, .14); }
.sync-health-dot--stale { background: #bc7a13; box-shadow: 0 0 0 2px rgba(188, 122, 19, .14); }
.sync-health-dot--error { background: #bd3d32; box-shadow: 0 0 0 2px rgba(189, 61, 50, .14); }
.sync-health-dot--starting { background: #718096; }

.sync-health-summary {
  padding: .5rem 1rem;
  color: var(--muted);
  font-size: .78rem;
  white-space: normal;
}

.sync-health-summary--healthy { color: #216b43; }
.sync-health-summary--stale { color: #8b5b10; }
.sync-health-summary--error { color: #a02f27; }

.account-health-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot name unread" "dot meta unread";
  align-items: center;
  column-gap: .25rem;
}

.account-health-item .sync-health-dot { grid-area: dot; }
.account-health-item__name { grid-area: name; overflow: hidden; text-overflow: ellipsis; }
.account-health-item__meta { grid-area: meta; opacity: .75; }
.account-health-item__unread {
  grid-area: unread;
  min-width: 1.6rem;
  padding: .08rem .38rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
}

.dropdown-item.active .account-health-item__unread { background: rgba(255, 255, 255, .2); }

.account-chip {
  display: inline-block;
  margin-right: .4rem;
  padding: .08rem .35rem;
  border: 1px solid #cfd9e8;
  border-radius: 999px;
  background: #edf3fb;
  color: #315b8c;
  font-size: .66rem;
  font-weight: 700;
}

.mail-rule-note {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .76rem;
}

.rule-form {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1.6fr .9fr .55fr auto;
  gap: .75rem;
  align-items: end;
}

.rule-form__submit { padding-bottom: .02rem; }

.export-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(9rem, 1fr)) auto;
  gap: .75rem;
  align-items: end;
}

.export-form__submit { padding-bottom: .02rem; }

.activity-table td:first-child { white-space: nowrap; color: var(--muted); font-size: .82rem; }

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.security-card__heading {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.security-card__heading > i {
  color: var(--theme, #0b5ed7);
  font-size: 1.45rem;
}

@media (max-width: 991.98px) {
  .rule-form { grid-template-columns: 1fr 1fr; }
  .export-form { grid-template-columns: 1fr 1fr; }
  .security-grid { grid-template-columns: 1fr; }
}

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(29, 31, 31, .16);
  font-size: .9rem;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
}

.nav-logout {
  margin: 0;
}

.nav-link-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.muted {
  color: var(--muted);
}

/* Compose contact picker rows: checkbox level with the name, address on its own line */
.contact-pick {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .45rem .25rem;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
}

.contact-pick:last-child {
  border-bottom: 0;
}

.contact-pick .form-check-input {
  flex: 0 0 auto;
  margin: .25rem 0 0;
}

.contact-pick__text {
  min-width: 0;
}

.contact-pick__name {
  display: block;
}

.contact-pick__email {
  display: block;
  color: #0d6efd;
  font-size: .875rem;
  overflow-wrap: anywhere;
}

/* Contact already in the recipient field: shown ticked but not selectable */
.contact-pick--added {
  cursor: default;
}

.contact-pick--added .contact-pick__name,
.contact-pick--added .contact-pick__email {
  color: #8a9199;
}

.contact-pick__note {
  display: block;
  color: #8a9199;
  font-size: .75rem;
  font-style: italic;
}

.contact-pick-heading {
  padding: .5rem .25rem .2rem;
  color: #6c757d;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Suggestions under To / CC / BCC while typing */
.recipient-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  margin-top: 2px;
  background: #ffffff;
  border: 1px solid #c9d1da;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  overflow: hidden;
}

.recipient-suggest__item {
  padding: .4rem .65rem;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
}

.recipient-suggest__item:last-child {
  border-bottom: 0;
}

.recipient-suggest__item.is-active {
  background: #e7f0fd;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: .7rem 0;
  font-size: .85rem;
}

.site-footer__brand {
  color: #ffffff;
}

/* ---------- Generic page sections (landing, forms) ---------- */

.section {
  padding: 3rem 0;
}

main > .section:first-child {
  padding-top: 1.5rem;
}

.eyebrow {
  margin: 0 0 .65rem;
  color: #d6a743;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08rem;
  text-transform: uppercase;
}

.home-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
}

.home-hero__content {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.home-hero h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .98;
  font-weight: 900;
}

.hero-copy {
  max-width: 620px;
  margin: 1.2rem 0 1.8rem;
  color: rgba(255, 255, 255, .9);
  font-size: 1.18rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.feature-card .bi {
  font-size: 1.6rem;
}

.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: .6rem 0 .35rem;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}

.empty-state {
  color: var(--muted);
  text-align: center;
  padding: 2.5rem 1rem;
}

/* ---------- Mail app shell (single column; folders live on the navbar) ---------- */

/* flex-basis 0 (not auto) is what stops long lists stretching the page:
   the shell takes exactly the space left between header and footer. */
.mail-shell {
  flex: 1 1 0;
  display: flex;
  min-height: 0;
  width: 100%;
  padding: 1rem;
}

/* Match the navbar's px-lg-4 side padding so panel edges line up with the links */
@media (min-width: 992px) {
  .mail-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Main mail panel */
.mail-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mail-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--line);
}

.mail-toolbar__title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 .5rem 0 0;
}

/* Folder email count after the title ("Inbox 3888") — replaced the navbar
   badges (12 Jul 26). Kept visible even at 0 via data-show-zero. */
.mail-title-count {
  font-weight: 600;
  color: var(--muted);
}

.mail-toolbar .btn {
  font-size: .8rem;
  padding: .3rem .6rem;
}

.mail-toolbar__search {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}

/* Always-visible search, right-aligned in the select-all bar; sized to
   match the buttons beside it */
.mail-status__search {
  margin-left: auto;
  font-size: .78rem;
  padding: .28rem .6rem;
  height: auto;
  width: 13rem;
  max-width: 55%;
}

/* Bulk-action buttons (Delete Selected, Restore Selected, …) sit in the
   grey select-all bar, right after the checkbox */
.mail-status__bulk {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .75rem;
}

/* Match the select-all checkbox to the size of the row checkboxes (1rem) —
   it otherwise scales down with the bar's smaller font */
.mail-status .form-check-input {
  width: 1rem;
  height: 1rem;
}

/* Same button sizing as the reading-pane action buttons; white background
   so the outline buttons stand off the grey bar (hover fill still applies) */
.mail-status__bulk .btn {
  font-size: .78rem;
  padding: .28rem .6rem;
  white-space: nowrap;
}

.mail-status__bulk .btn:not(:hover):not(:active) {
  background-color: #ffffff;
}

/* Same fixed height as .mail-reading__actions so the grey select-all bar and
   the reading-pane button bar form one continuous band across the split */
.mail-status {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--muted);
  padding: 0 .85rem 0 .75rem; /* left matches the list rows so checkboxes line up */
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 3.05rem;
}

/* Checkbox-to-text gap matches the checkbox-to-content gap in the rows */
.mail-status label {
  gap: .55rem !important;
}

/* Split: list + reading pane */
.mail-split {
  flex: 1 1 0;
  display: flex;
  min-height: 0;
}

.mail-list-wrap {
  position: relative;
  flex: 0 0 40%;
  max-width: 70%;
  min-width: 18rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.mail-splitter {
  position: relative;
  z-index: 4;
  flex: 0 0 5px;
  margin-left: -3px;
  margin-right: -2px;
  cursor: col-resize;
  touch-action: none;
}

.mail-splitter::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  background: transparent;
}

.mail-splitter:hover::after,
.mail-splitter:focus-visible::after,
.is-resizing-mail .mail-splitter::after { background: var(--theme, #0b5ed7); }
.is-resizing-mail { cursor: col-resize; user-select: none; }

.mail-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Discreet floating "back to top" for the list pane */
.back-to-top {
  position: absolute;
  right: .9rem;
  bottom: .9rem;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--muted);
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(29, 31, 31, .18);
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease;
  z-index: 5;
}

.back-to-top:hover {
  opacity: 1;
  color: var(--ink);
}

.mail-row {
  display: flex;
  gap: .55rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid #eceee9;
  cursor: pointer;
  align-items: flex-start;
}

/* Row backgrounds are set in the THEME SECTION at the top of this file
   (CARD BACKGROUND + SELECTED-EMAIL BAND) — no hover overlays by choice. */
.mail-row.selected {
  padding-left: calc(.75rem - 3px);
}

.mail-row:focus-visible {
  outline: 2px solid var(--theme, #0b5ed7);
  outline-offset: -2px;
}

.mail-row__check {
  margin-top: .2rem;
}

.mail-row__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* ONE shared text style for everything in the email list rows — black,
   normal weight. All row text (sender, email address, subject, attachment
   line, day/date/time, size) inherits from here; modify this rule to
   restyle the whole list, or add per-element rules below to differentiate. */
.mail-row {
  /* read emails: slightly muted near-black so unread (theme colour) stands out */
  color: #3a3a3a;
  font-weight: 400;
}

/* Unread rows, Outlook-style (trial 12 Jul 26): bold sender + theme-coloured
   left edge bar + theme-coloured subject; other text stays dark. The previous
   treatment (whole row in theme colour) was: color: var(--theme, #0b5ed7); */
.mail-row.unread {
  border-left: 3px solid var(--theme, #0b5ed7);
  padding-left: calc(.75rem - 3px);
}

.mail-row.unread .mail-row__from {
  font-weight: 700;
  color: #1d1f1f;
}

.mail-row.unread .mail-row__subject {
  color: var(--theme, #0b5ed7);
}

/* The DD/MM/YY date line is theme-blue on EVERY row (read or not), so dates
   are easy to spot when scanning the list */
.mail-row .row-date {
  color: var(--theme, #0b5ed7);
}

.mail-row__from {
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-row__email {
  font-size: .7rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-row__subject {
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-row__attach {
  font-size: .72rem;
}

.mail-row__attach .bi-paperclip {
  margin-right: .2rem;
}

/* Embedded (signature) images — muted, clearly NOT an attachment */
.mail-row__embedded {
  font-size: .72rem;
  color: var(--muted);
}

.mail-row__embedded .bi {
  margin-right: .2rem;
}

/* Right-hand column: stacked day / DD/MM/YY / time, plus size */
.mail-row__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: .7rem;
  line-height: 1.3;
  white-space: nowrap;
}

.mail-row__side .row-size {
  margin-top: .15rem;
}

.mail-list__loading,
.mail-list__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

/* Reading pane */
.mail-reading {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mail-reading__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  gap: .6rem;
}

.mail-reading__placeholder .bi {
  font-size: 2.6rem;
  color: #cfc6df;
}

/* Per-email action buttons above the reading pane (Antmail layout).
   Fixed height matching .mail-status so both bars align across the split. */
.mail-reading__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .4rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  height: 3.05rem;
}

.mail-reading__actions .btn {
  white-space: nowrap;
}

.mail-reading__actions .btn {
  font-size: .78rem;
  padding: .28rem .6rem;
}

.mobile-reading-back {
  display: none;
}

/* Icon-only actions are still real buttons, so they work with the keyboard
   and assistive technology without gaining a heavy default button chrome. */
.preview-action-icon,
.person-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: .25rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  line-height: 1;
}

.preview-action-icon {
  font-size: 1.3rem;
}

.preview-action-label { display: none; }

.preview-action-icon:hover,
.person-add-icon:hover {
  background: var(--theme-lighter, #f2f6fd);
}

.preview-action-icon:focus-visible,
.person-add-icon:focus-visible,
.compose-icon:focus-visible {
  outline: 2px solid var(--theme, #0b5ed7);
  outline-offset: 2px;
}

/* Green XML-style headers icon, as in Antmail */
.mail-reading__actions .headers-icon {
  margin-left: .3rem;
  font-size: 1.3rem;
  color: #198754;
  cursor: pointer;
  user-select: none;
}

.mail-reading__header {
  flex: 0 0 auto;
  padding: .7rem 1rem .6rem;
  border-bottom: 1px solid var(--line);
}

/* From/To/CC/Subject/Sent meta block — each row gets a subtle divider.
   Cells stretch to the full row height (no align-items: start) so the
   label's underline meets the value's even when an icon makes the value
   cell taller; content is vertically centred to keep baselines level. */
.mail-meta-grid {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  font-size: .82rem;
}

.mail-meta-grid .meta-label,
.mail-meta-grid .meta-value {
  display: flex;
  align-items: center;
  padding: .3rem 0 .3rem;
  border-bottom: 1px solid #eceee9;
}

.mail-meta-grid > :nth-last-child(-n+2) {
  border-bottom: 0;
}

.mail-meta-grid .meta-label {
  font-weight: 700;
  color: var(--ink);
}

.mail-meta-grid .meta-value {
  min-width: 0;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.mail-meta-grid .meta-value--split {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: .5rem;
}

.meta-pipe {
  color: #adb5bd;
  /* flex parents drop whitespace text nodes, so the gap must be margin, not spaces */
  margin: 0 .3rem;
}

/* Green add-to-contacts icon on the From/To row */
.person-add-icon {
  font-size: 1.1rem;
  color: #198754;
  cursor: pointer;
  transition: transform .15s ease;
}

.person-add-icon:hover {
  transform: scale(1.2);
}

.attach-label-icon {
  font-size: 1.1rem;
  color: #0b5ed7;
}

/* Card-style attachments in the reading pane */
.attachments-block {
  width: 100%;
  min-width: 0;
}

.attachments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .4rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
}

.attachments-download-all {
  white-space: nowrap;
}

.attachments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.attachment-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}

.attachment-card__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.attachment-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.attachment-card__name {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.attachment-card__size {
  font-size: .72rem;
  color: var(--muted);
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  padding: .25rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.attachment-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  line-height: 1;
}

.attachment-chip__remove:hover {
  background: #f1f3f2;
  color: #b73b2f;
}

.attachment-chip__remove:focus-visible {
  outline: 2px solid var(--theme, #0b5ed7);
  outline-offset: 1px;
}

.mail-reading__body {
  flex: 1 1 auto;
  min-height: 0;
}

.mail-reading__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ---------- Compose ---------- */

.compose-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Compose form, Antmail-faithful (13 Jul 26): input-group rows whose labels
   are attached table-style cells. Since 4 Oct 26 the label cell IS the action
   (To/CC/BCC open contacts, Subject opens saved subjects, Attach opens the
   file chooser) so the control sits by the label on wide screens. */
.compose-fields {
  padding: .75rem .9rem .25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* From is fixed for the loaded account: plain text, no field chrome.
   The label and value line up with the label cells and input text below. */
.compose-from-row {
  display: flex;
  align-items: center;
  min-height: 1.7rem;
}

.compose-from-label {
  flex: 0 0 8.25rem;
  padding-left: calc(.75rem + 1px);
  color: #6c757d;
  font-size: .85rem;
}

.compose-optional-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 .2rem;
  font-size: .76rem;
  text-decoration: none;
}

/* Fixed-width label cell so the rows line up like a table */
.compose-row {
  flex-wrap: nowrap;
}

.compose-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.compose-label-short,
.compose-formatting-toggle {
  display: none;
}

.compose-row .input-group-text {
  flex: 0 0 8.25rem;
  justify-content: flex-start;
  font-size: .85rem;
}

/* Label cell that is itself the button (contacts / attach) */
.compose-label-btn {
  gap: .45rem;
  color: #212529;
  cursor: pointer;
}

/* Word first, icon at the field end of the cell, in line with the Subject icons */
.compose-label-btn .bi {
  margin-left: auto;
  color: var(--theme, #0b5ed7);
  font-size: 1.05rem;
  line-height: 1;
}

.compose-label-btn:hover {
  background: #e7f0fd;
  color: #084298;
}

.compose-label-btn:active {
  background: #d3e3fb;
}

.compose-label-btn:focus-visible {
  outline: 2px solid var(--theme, #0b5ed7);
  outline-offset: -2px;
}

/* Saved subjects / templates popups on compose: save box above the list */
.saved-add {
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #ececec;
}

.saved-add__hint {
  margin-top: .3rem;
  color: #6c757d;
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.saved-item__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.saved-item__actions {
  display: flex;
  flex: 0 0 auto;
  gap: .25rem;
}

.saved-footer {
  justify-content: flex-start;
  padding: .35rem .75rem;
}

/* Subjects and templates page (settings menu) */
.saved-text-add {
  display: flex;
  gap: .5rem;
  max-width: 46rem;
}

/* Buttons keep to one line; the text box takes the remaining width */
.saved-text-add .btn,
.saved-text-row .btn,
.saved-text-heading .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.saved-text-add .form-control,
.saved-text-row__edit .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.saved-text-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.saved-text-list {
  margin-top: .9rem;
  border-top: 1px solid #ececec;
}

.saved-text-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid #ececec;
}

.saved-text-row__edit {
  display: flex;
  flex: 1 1 auto;
  gap: .5rem;
  min-width: 0;
  max-width: 46rem;
}

.saved-text-row > form:last-child {
  margin-left: auto;
}

.saved-text-row__name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.saved-text-row__name a {
  font-weight: 600;
  text-decoration: none;
}

.saved-text-row__name .muted {
  font-size: .8rem;
}

/* Mail archive page */
.archive-account {
  margin-left: .25rem;
  font-size: .85rem;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.archive-fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px solid #ececec;
  font-size: .88rem;
}

.archive-fact:last-child {
  border-bottom: 0;
}

.archive-fact span {
  color: #6c757d;
}

.archive-quota {
  margin: .25rem 0 .6rem;
}

.archive-quota__bar,
.archive-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9ecef;
}

.archive-quota__bar span,
.archive-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--theme, #0b5ed7);
  transition: width .4s ease;
}

.archive-quota__bar span.is-high {
  background: #c0392b;
}

.archive-quota__text {
  margin-top: .35rem;
  font-size: .88rem;
  font-weight: 600;
}

.archive-progress {
  margin: .4rem 0 .6rem;
  max-width: 40rem;
}

.archive-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.archive-form__row .form-control,
.archive-form__row .form-select {
  width: auto;
}

.archive-form__row input[type="date"] {
  min-width: 11rem;
}

.archive-confirm {
  max-width: 10rem;
}

.archive-preview {
  margin-top: .4rem;
  font-size: .85rem;
  min-height: 1.2rem;
}

.archive-range {
  margin: .25rem 0 .4rem 1.5rem;
}

.archive-select {
  min-width: 9rem;
}

.archive-automation .archive-form__row {
  margin-bottom: .5rem;
}

.archive-state {
  display: inline-block;
  margin-right: .3rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: #e9ecef;
  font-size: .75rem;
  font-weight: 700;
}

.archive-state--completed { background: #d8f3dc; color: #1b5e20; }
.archive-state--running, .archive-state--queued, .archive-state--cancelling { background: #e7f0fd; color: #084298; }
.archive-state--failed { background: #fde2e1; color: #842029; }

.template-edit-name {
  max-width: 30rem;
  margin-bottom: 1rem;
}


.compose-input-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.compose-input-wrap .form-control {
  font-size: .9rem;
  width: 100%;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.compose-from-value {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: calc(.75rem + 1px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
}

.compose-icon {
  color: var(--theme, #0b5ed7);
  cursor: pointer;
  font-size: 1.1rem;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .12rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  line-height: 1;
}

.compose-icon:hover {
  color: var(--theme-dark, #084298);
  background: var(--theme-lighter, #f2f6fd);
}

.compose-icon--lg {
  font-size: 1.3rem;
}

/* Attach-files row: a form-control-styled box the chips render into */
.compose-attach-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  min-height: calc(1.5em + .75rem + 2px);
  font-size: .9rem;
}

.compose-editor-wrap {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  margin: .6rem .9rem .9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Auth pages (login / register) ---------- */

.auth-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.8rem 1.4rem;
}

/* The Antiot ant brand, centred above the form, in the theme colour */
.auth-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--theme, #0b5ed7);
  margin-bottom: .35rem;
}

.auth-card__title {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.auth-card__errors:not(:empty) {
  margin-bottom: .75rem;
  font-size: .85rem;
}

.auth-card__footer {
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

/* ---------- Contacts ---------- */

.contacts-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.contacts-table {
  width: 100%;
  font-size: .88rem;
  border-collapse: collapse;
}

.contacts-table th {
  position: sticky;
  top: 0;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding: .55rem .75rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04rem;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}

.contacts-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #eceee9;
  vertical-align: middle;
}

.contacts-table tbody tr:hover {
  background: var(--theme-lighter, #f4f1f8);
}

/* ---------- Account cards (Settings) ---------- */

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}

.account-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.account-card__name {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.account-card__badge {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05rem;
  padding: .15rem .5rem;
  border-radius: 999px;
}

.account-card__detail {
  overflow-wrap: anywhere;
  font-size: .82rem;
  color: var(--muted);
}

.account-card__actions {
  display: flex;
  gap: .4rem;
  margin-top: .7rem;
  flex-wrap: wrap;
}

.account-card__actions .btn {
  font-size: .78rem;
  padding: .28rem .6rem;
}

/* ---------- Settings pages ----------
   Every page under the settings cog uses the same shell as Contacts and New
   message: one .mail-panel with the grey .mail-toolbar title bar, then a
   scrolling .settings-body holding an intro line and ruled-off sections. */
/* Title bars are one height whether or not they carry buttons */
.settings-panel .mail-toolbar {
  min-height: 3.2rem;
}

.settings-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
  font-size: .9rem;
}

.settings-intro {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .88rem;
}

.settings-section {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.settings-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.settings-section__title {
  margin: 0 0 .7rem;
  font-size: .95rem;
  font-weight: 700;
}

.settings-body .form-label {
  margin-bottom: .25rem;
  font-size: .82rem;
  font-weight: 600;
}

.settings-body .form-control,
.settings-body .form-select,
.settings-body .table {
  font-size: .9rem;
}

.settings-body .btn {
  font-size: .82rem;
  padding: .35rem .7rem;
}

.settings-body .table th {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}

.settings-form-grid h3 {
  grid-column: span 1;
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Toasts ---------- */

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.app-toast {
  min-width: 260px;
  max-width: 380px;
  padding: .65rem .9rem;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: .86rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast--success { background: #245c46; }
.app-toast--error { background: #b73b2f; }

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
  .mail-shell {
    padding: .6rem;
  }

  .mail-split {
    flex-direction: column;
  }

  .mail-list-wrap {
    flex: 0 0 50%;
    max-width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mail-splitter { display: none; }

  .settings-form-grid {
    grid-template-columns: 1fr;
  }

  .compose-row .input-group-text,
  .compose-from-label {
    flex-basis: 6.2rem;
  }

  .compose-label-full { display: none; }
  .compose-label-short { display: inline; }

  /* Account switcher: shrink and ellipsise inside the bar instead of
     pushing the whole page 30px off-screen */
  .utility-nav__left {
    flex: 1 1 0;
  }

  .account-tools-group {
    flex: 1 1 0;
  }

  .utility-nav__inner {
    gap: .5rem;
  }

  .utility-nav .account-switcher {
    min-width: 6.5rem; /* the switcher must never vanish — it is the only account UI */
    flex: 1 1 auto;
  }

  .utility-nav .account-switcher .nav-link-button {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* On phones the signed-in email is redundant — hide it (only when the
     account switcher is present, i.e. signed in) so the switcher keeps the
     room. Log out stays. Logged-out pages (Register/Log in) are unaffected. */
  .utility-nav__inner:has(.account-switcher) .utility-nav__links .nav-item:first-child {
    display: none;
  }

  .utility-nav__links {
    min-width: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
  }

  /* Compact navbars so the mail panel keeps its height on phones */
  .main-nav {
    padding-top: .3rem;
    padding-bottom: .3rem;
  }

  .main-nav .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6rem;
    padding: .38rem .8rem;
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
  }

  .main-nav .navbar-toggler:hover,
  .main-nav .navbar-toggler:focus {
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
  }

  .main-nav .navbar-collapse .navbar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
    width: 100%;
    padding: .55rem 0 .2rem;
  }

  .main-nav .nav-item {
    display: block;
    min-width: 0;
  }

  .main-nav .navbar-collapse .main-nav__people {
    padding-top: .22rem;
  }

  .main-nav__people .nav-link {
    display: flex;
    justify-content: center;
  }

  .main-nav__people-label {
    display: inline;
    margin-left: .4rem;
  }

  .main-nav .nav-item:not(:last-child)::after {
    content: none;
    display: none;
  }

  .main-nav .nav-link {
    display: block;
    width: 100%;
    padding: .52rem .65rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    text-align: center;
  }

  .main-nav .navbar-nav .nav-link:hover,
  .main-nav .navbar-nav .nav-link:focus,
  .main-nav .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, .16);
  }

  /* Select-all bar: allow wrapping; the search box drops onto its own
     full-width row instead of overflowing to the right */
  .mail-status {
    height: auto;
    min-height: 3.05rem;
    flex-wrap: wrap;
    padding-top: .4rem;
    padding-bottom: .4rem;
    row-gap: .35rem;
  }

  .mail-status__search {
    flex: 1 1 100%;
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }

  /* Contacts: drop the wide reference columns (Company/Phone/Notes) and let
     name/email wrap, so the table fits without sideways scrolling */
  .contacts-table th:nth-child(4), .contacts-table td:nth-child(4),
  .contacts-table th:nth-child(5), .contacts-table td:nth-child(5),
  .contacts-table th:nth-child(6), .contacts-table td:nth-child(6) {
    display: none;
  }

  .contacts-table td {
    word-break: break-word;
  }
}

/* On phones the list and reading pane each need the full available height.
   Opening a message switches to the reader; its Back button returns to the
   list while preserving the open/selected message. */
@media (max-width: 767.98px) {
  .mail-list-wrap {
    display: flex;
    flex: 1 1 0;
    max-width: 100%;
    border-bottom: 0;
  }

  .mail-reading {
    display: none;
    flex: 1 1 0;
  }

  .mail-panel.is-reading .mail-list-wrap {
    display: none;
  }

  .mail-panel.is-reading .mail-reading {
    display: flex;
  }

  .mobile-reading-back {
    display: inline-flex;
    align-items: center;
  }

  .mail-reading__actions {
    padding: 0 .6rem;
  }
}

/* Phone layouts keep controls within their containers and allow the compose
   document to scroll vertically when recipients, tools or the keyboard need room. */
@media (max-width: 767.98px) {
  main, .mail-shell, .mail-toolbar__search, .settings-form-grid > *,
  .rule-form > *, .export-form > *, .security-grid > * {
    min-width: 0;
  }

  .mail-shell { padding: .4rem; }
  .mail-toolbar { padding: .5rem; }

  input.form-control, textarea.form-control, select.form-select,
  .compose-input-wrap .form-control { font-size: 1rem; }

  .btn, .nav-link-button, .main-nav .navbar-toggler,
  .compose-icon, .preview-action-icon, .person-add-icon {
    min-height: 44px;
  }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
  .compose-icon, .preview-action-icon, .person-add-icon { min-width: 44px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > .btn { flex: 1 1 auto; }

  .utility-nav > .utility-nav__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .2rem .5rem;
  }

  .utility-nav__left { display: contents; }
  .utility-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .utility-nav__links { grid-column: 2; grid-row: 1; }
  .account-tools-group { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: .4rem; }
  .utility-nav .account-switcher { min-width: 0; }
  .utility-nav .account-switcher .nav-link-button { width: 100%; text-align: left; }
  .utility-nav .utility-tools__button { width: 44px; height: 44px; }
  .utility-nav .account-switcher, .utility-nav .utility-tools { position: static; }

  .utility-nav .dropdown-menu {
    inset: 100% .5rem auto .5rem !important;
    transform: none !important;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - 9rem);
    overflow-y: auto;
  }

  .utility-nav .dropdown-item { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .main-nav .nav-link { min-height: 44px; }
  .main-nav .navbar-collapse { max-height: 55dvh; overflow-y: auto; }
  .site-footer { padding: .35rem 0; font-size: .75rem; }

  .mail-shell:has(.compose-panel) { flex: 1 0 auto; }
  .compose-panel { overflow: visible; }
  .compose-heading { flex: 1 1 100%; justify-content: space-between; }
  .compose-heading .mail-toolbar__title { flex: 0 0 auto; }
  #compose-status { min-width: 0; font-size: .75rem; text-align: right; overflow-wrap: anywhere; }

  .compose-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1 1 100%;
    margin: 0;
    gap: .4rem;
  }

  .compose-actions .btn { width: 100%; margin: 0; padding: .45rem .2rem; font-size: .85rem; }
  .compose-fields { flex: 0 0 auto; padding: .4rem .5rem 0; gap: .4rem; }
  .compose-from-row { flex-wrap: wrap; }
  .compose-optional-toggle { order: -1; flex: 0 0 100%; justify-content: flex-end; font-size: .85rem; padding: .25rem .5rem; }
  .compose-from-label { flex-basis: 5rem; padding-left: calc(.45rem + 1px); font-size: .8rem; }
  .compose-from-value { padding: .3rem .5rem; font-size: .9rem; }
  .compose-row .input-group-text { flex-basis: 5rem; min-width: 0; padding: .4rem .45rem; font-size: .8rem; }
  .compose-label-btn { gap: .3rem; }
  .compose-row .form-control { min-height: 44px; }
  .compose-input-wrap .form-control { padding-left: .5rem; }
  .compose-input-wrap .compose-attach-box { font-size: .85rem; }

  .attachment-chip { max-width: 100%; min-width: 0; flex-wrap: wrap; border-radius: 8px; padding: .15rem .35rem; }
  .attachment-chip__name { min-width: 0; overflow-wrap: anywhere; flex: 1 1 5rem; }
  .attachment-chip__remove { min-width: 44px; min-height: 44px; margin-left: auto; }

  .compose-editor-wrap { flex: 1 0 auto; min-height: 16rem; margin: .5rem; overflow: visible; }
  .compose-formatting-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .5rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #f8f9fa;
    color: var(--theme, #0b5ed7);
    font-size: .85rem;
    font-weight: 600;
    text-align: left;
  }

  .compose-formatting-toggle .bi-chevron-down { margin-left: auto; }
  .compose-formatting-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
  .compose-formatting-toggle:focus-visible { outline: 2px solid var(--theme, #0b5ed7); outline-offset: -2px; }
  .compose-panel:not(.is-formatting-expanded) #compose-editor .rte-toolbar { display: none !important; }

  .mail-status__bulk { min-width: 0; max-width: 100%; flex-wrap: wrap; margin-left: 0; }
  .mail-status__bulk .btn { white-space: normal; }
  .mail-status > label { min-height: 44px; }
  .mail-status__search { min-height: 44px; }
  .mail-reading { overflow-y: auto; }
  .mail-reading__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    padding: .4rem .5rem;
    overflow: visible;
  }
  .mail-reading__actions > * { min-width: 0; width: 100%; }
  .mail-reading__actions .btn { white-space: normal; padding: .35rem .2rem; }
  .mail-reading__actions .preview-action-icon {
    gap: .3rem;
    border: 1px solid var(--line);
    font-size: .85rem;
  }
  .preview-action-label { display: inline; }
  .mail-reading__header { padding: .5rem; }
  .mail-reading__body { flex: 1 0 18rem; min-height: 18rem; }
  .mail-meta-grid { grid-template-columns: 3.7rem minmax(0, 1fr); }
  .mail-meta-grid .meta-value > * { min-width: 0; max-width: 100%; }
  .attachment-card { width: 100%; }
  .attachment-card__info { flex: 1; }
  .attachment-card__name { white-space: normal; overflow-wrap: anywhere; }

  #contacts-panel .mail-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #contacts-panel .mail-toolbar__title, #contacts-panel .mail-toolbar__search { grid-column: 1 / -1; }
  #contacts-panel .mail-toolbar__search { margin: 0; }
  #contacts-panel .mail-toolbar__search input { width: 100%; }
  .contacts-table { table-layout: fixed; }
  .contacts-table th, .contacts-table td { padding: .4rem .25rem; }
  .contacts-table th:first-child { width: 2rem !important; }
  .contacts-table th:last-child { width: 3.25rem !important; }
  .contacts-table th { white-space: normal; }
  .contacts-table [data-edit] { min-width: 44px; }

  .settings-body { padding: .75rem; }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-form__row .form-control, .archive-form__row .form-select { flex: 1 1 10rem; }
  .account-card { padding: .8rem; }
  .account-card__actions > * { flex: 1 1 auto; }
  .account-card__actions form .btn { width: 100%; }
  .rule-form, .export-form { grid-template-columns: minmax(0, 1fr); }
  .security-grid .btn { max-width: 100%; white-space: normal; }
  .modal-dialog { margin: .5rem; }
  .modal-dialog-scrollable { height: calc(100dvh - 1rem); }
  .modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .modal-content { max-width: 100%; }
  .modal-header { gap: .5rem; }
  .modal-header .btn-close { min-width: 44px; min-height: 44px; padding: 0; flex-shrink: 0; }
  .modal-body { overflow-wrap: anywhere; }
  .modal-body .list-group-item > span { min-width: 0; overflow-wrap: anywhere; }
  #contact-form .row > .col { flex: 0 0 100%; }
  .auth-wrap { align-items: flex-start; padding: 1rem .5rem; }
  .auth-card { padding: 1rem; }
  .toast-stack { left: .5rem; right: .5rem; bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .app-toast { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .app-toast,
  .person-add-icon,
  .back-to-top {
    transition: none;
  }
}