/* ============================================================
   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;
  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;
}

.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;
}

/* 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;
}

.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);
}

/* ---------- 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: 40%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.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__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;
}

/* 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-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;
}

.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-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, with the action icons floating INSIDE the
   right end of each field. */
.compose-fields {
  padding: .75rem .9rem .25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* Fixed-width label cell so the rows line up like a table */
.compose-row .input-group-text {
  flex: 0 0 6.6rem;
  justify-content: flex-start;
  font-size: .85rem;
}

.compose-input-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
}

.compose-input-wrap .form-control {
  font-size: .9rem;
  width: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-right: 70px; /* room for the in-field icons */
}

/* Icons visually contained at the end of the text box (as in Antmail) */
.compose-field-icons {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

.compose-icon {
  color: var(--theme, #0b5ed7);
  cursor: pointer;
  font-size: 1.1rem;
  user-select: none;
  outline: none;
}

.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-attach-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.compose-attach-plus {
  font-size: 12px;
  font-weight: 700;
}

.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(320px, 1fr));
  gap: 1rem;
}

.account-card {
  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;
}

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

.account-card__detail {
  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-form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}

.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%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .compose-row .input-group-text {
    flex-basis: 4.6rem;
  }

  /* Account switcher: shrink and ellipsise inside the bar instead of
     pushing the whole page 30px off-screen */
  .utility-nav__left {
    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: 0 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 {
    padding: .3rem .6rem;
    font-size: 1.05rem;
  }

  /* 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;
  }
}