/*
 * Webmail at webmail.<domain>. INSPINIA's own palette and type (Open Sans,
 * #676a6c text, #1ab394 primary, #e7eaec rules, #f3f3f4 bands), drawn as a
 * three-pane mail client: folders, the list, and the open message, under a
 * top bar that carries the search. The app fills the window and each pane
 * scrolls on its own, so the list stays where it was while a message is read.
 * Loaded after style.css and admin-overrides.css, scoped under body.webmail.
 */

.webmail {
  --wm-primary: var(--navy);
  --wm-primary-dark: var(--navy-dark);
  --wm-primary-soft: var(--navy-tint);
  --wm-text: var(--lp-text);
  --wm-strong: var(--lp-dark);
  --wm-muted: var(--lp-muted);
  --wm-rule: var(--lp-border);
  --wm-band: var(--lp-gray);
  --wm-side: #f8f8f9;
  --wm-hover: #f7f9fa;
  --wm-star: var(--warning);
  --wm-radius: var(--r-lg);     /* search, Compose, folders, menus, cards */
  --wm-radius-sm: var(--r-md);   /* small buttons, checkboxes, fields */
  --wm-top: 60px;
}

/* The template on the scales, for webmail only. These rules sat in
   admin-overrides.css until the dashboards went back to the template's own
   look; webmail was drawn on top of them, so they moved here unchanged. */
body { font-size: var(--fs-base); }
/* The template draws h1 and h2 at weight 100, which Open Sans has no cut for:
   the browser fell back to 300 and page titles read as grey hairlines. */
h1, h2 { font-weight: 600; letter-spacing: -0.01em; color: var(--lp-dark); }
.page-heading h2 { font-size: var(--fs-3xl); }
h3, h4, h5 { color: var(--lp-dark); }

.btn { border-radius: var(--r-md); }
.form-control { font-size: var(--fs-base); border-radius: var(--r-md); }
.form-control:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.label, .badge { border-radius: var(--r-sm); }
.dropdown-menu { border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.modal-content { border-radius: var(--r-lg); }
.alert { border-radius: var(--r-md); }

/* Panels: a rounded white card on the resting shadow, in place of the square
   box under a 2px grey rule. The corners are rounded on the first and last
   part rather than by clipping the ibox, so a dropdown inside one still opens
   past its edge. */
.ibox { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ibox-title { border-top-width: 0; }
.ibox > :first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.ibox > :last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.ibox-content { border-bottom-width: 0; }

body.webmail:not(.wm-login-page) { background: #fff; overflow: hidden; }

/* ── App frame ────────────────────────────────────────────────────────── */

.webmail .wm-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.webmail .wm-shell {
  flex: 1; min-height: 0;
  /* Folders, the list, the divider, the message. The list's width is
     --wm-list-w, which dragging the divider sets (js/webmail.js) and the
     browser remembers per mailbox host. */
  --wm-list-w: 400px;
  display: grid; grid-template-columns: 250px minmax(280px, var(--wm-list-w)) 0 minmax(0, 1fr);
}

/* The divider: a hairline on the list's edge with a wider grab area, as
   Gmail's split pane. It takes no column width of its own. */
.webmail .wm-resizer {
  position: relative; z-index: 3; width: 0; cursor: col-resize; outline: 0;
  touch-action: none;
}
.webmail .wm-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; }
.webmail .wm-resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: transparent; transition: background-color .12s;
}
.webmail .wm-resizer:hover::after, .webmail .wm-resizer:focus-visible::after, .webmail.is-resizing .wm-resizer::after { background: var(--wm-primary); }
/* While dragging, a message's iframe must not swallow the pointer, and text
   must not be selected under it. */
.webmail.is-resizing { cursor: col-resize; user-select: none; }
.webmail.is-resizing iframe { pointer-events: none; }
.webmail .wm-flash { margin:0; border-radius:0; }

/* ── Top bar ──────────────────────────────────────────────────────────── */

.webmail .wm-top {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; align-items: center;
  height: var(--wm-top); flex-shrink: 0;
  background: var(--wm-side); border-bottom: 1px solid var(--wm-rule);
}
.webmail .wm-brand { display: flex; align-items: center; gap:10px; padding:0 20px; color: var(--wm-strong); min-width: 0; }
.webmail .wm-brand:hover { color: var(--wm-strong); }
.webmail .wm-brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius:var(--wm-radius);
  background: var(--wm-primary); color: #fff; font-size:var(--fs-base);
}
.webmail .wm-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.webmail .wm-brand-text strong { font-size:var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webmail .wm-brand-text small { font-size:var(--fs-2xs); color: var(--wm-primary); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Starts on the line between the folders and the list, so the search reads
   as belonging to the list it searches. */
.webmail .wm-search { position: relative; max-width: 760px; width: 100%; margin:0 0 0 -1px; }
.webmail .wm-search > .fa-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--wm-muted); font-size:var(--fs-sm); }
.webmail .wm-search input {
  width: 100%; height: 36px; padding:0 35px 0 40px;
  font-size:var(--fs-sm); color: var(--wm-strong);
  background: #fff; border: 1px solid var(--wm-rule); border-radius:var(--wm-radius);
  outline: 0; transition: border-color .15s, box-shadow .15s;
}
.webmail .wm-search input::placeholder { color: var(--wm-muted); }
.webmail .wm-search input:focus { border-color: var(--wm-primary); box-shadow: 0 0 0 3px var(--wm-primary-soft); }
.webmail .wm-search input::-webkit-search-cancel-button { display: none; }
.webmail .wm-search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--wm-muted); }

.webmail .wm-me { padding:0 20px 0 15px; }
.webmail .wm-me-toggle {
  display: flex; align-items: center; gap:10px;
  padding:4px 5px; border: 0; background: none; color: var(--wm-strong); cursor: pointer; border-radius:var(--wm-radius);
}
.webmail .wm-me-toggle:hover, .webmail .wm-me-toggle[aria-expanded="true"] { background: var(--wm-band); }
.webmail .wm-me-toggle .wm-avatar { width: 32px; height: 32px; font-size:var(--fs-xs); }
.webmail .wm-me-address { font-size:var(--fs-sm); font-weight: 600; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webmail .wm-me-toggle .fa-angle-down { color: var(--wm-muted); font-size:var(--fs-base); }
.webmail .wm-menu { min-width: 220px; padding:5px 0; border: 1px solid var(--wm-rule); border-radius:var(--wm-radius); box-shadow:var(--shadow-sm); font-size:var(--fs-sm); }
.webmail .wm-menu .dropdown-item { display: flex; align-items: center; gap:10px; padding:5px 10px; border-radius:var(--wm-radius-sm); color: var(--wm-text); }
.webmail .wm-menu .dropdown-item:hover { background: var(--wm-hover); color: var(--wm-strong); }
.webmail .wm-menu .dropdown-item.text-danger:hover { color: var(--danger) !important; }
.webmail .wm-menu .fa { color: var(--wm-muted); }
.webmail .wm-menu-who { display: block; padding:4px 10px 5px; font-size:var(--fs-2xs); color: var(--wm-muted); line-height: 1.5; }
.webmail .wm-menu-who strong { color: var(--wm-strong); font-size:var(--fs-xs); }

/* The sign-in and server-unavailable cards. */
.webmail .wm-card { margin-bottom:20px; border: 1px solid var(--wm-rule); border-radius:var(--wm-radius); background: #fff; overflow: hidden; }
.webmail .wm-card > .ibox-content { border: 0; }

/* Bootstrap's buttons and fields, on the same corner scale. */
.webmail .btn { border-radius:var(--wm-radius-sm); }
.webmail .wm-compose, .webmail .btn-lg { border-radius:var(--wm-radius); }
.webmail .form-control { border-radius:var(--wm-radius-sm); }

/* ── Folders ──────────────────────────────────────────────────────────── */

.webmail .wm-side {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  padding:15px; background: var(--wm-side); border-right: 1px solid var(--wm-rule);
}
.webmail .wm-compose {
  display: flex; align-items: center; justify-content: center; gap:10px;
  height: 36px; margin-bottom:15px; font-size:var(--fs-sm); font-weight: 600; border-radius:var(--wm-radius);
  box-shadow:var(--shadow-sm);
}
.webmail .wm-folders { list-style: none; margin:0; padding:0; }
.webmail .wm-folders li + li { margin-top:2px; }
.webmail .wm-folders a {
  display: flex; align-items: center; gap:10px;
  padding:10px 10px; border-radius:var(--wm-radius-sm);
  color: var(--wm-strong); font-size:var(--fs-sm);
}
.webmail .wm-folders a:hover { background: #eef0f1; }
.webmail .wm-folders .fa { color: var(--wm-text); font-size:var(--fs-base); width: 16px; }
.webmail .wm-folders li.active a { background: var(--wm-primary-soft); color: var(--wm-primary-dark); font-weight: 600; }
.webmail .wm-folders li.active .fa { color: var(--wm-primary); }
.webmail .wm-folder-name { flex: 1; }
.webmail .wm-count {
  min-width: 18px; height: 18px; padding:0 5px; border-radius:var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wm-band); color: var(--wm-text); font-size:var(--fs-2xs); font-weight: 700;
}
.webmail .wm-count-hot { background: var(--wm-primary); color: #fff; }
.webmail .wm-side-foot {
  margin-top:auto; padding:10px 4px 0; border-top: 1px solid var(--wm-rule);
  display: flex; flex-direction: column; gap:2px; font-size:var(--fs-2xs); color: var(--wm-muted);
}
.webmail .wm-side-foot strong { color: var(--wm-strong); font-size:var(--fs-xs); font-weight: 600; }
.webmail .wm-side-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Toolbar buttons ──────────────────────────────────────────────────── */

.webmail .wm-tool {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 30px; height: 30px; padding:0; border: 0; border-radius:50%;
  background: none; color: var(--wm-text); font-size:var(--fs-base); cursor: pointer;
  transition: background-color .12s, color .12s;
}
.webmail .wm-tool:hover { background: var(--wm-band); color: var(--wm-strong); }
.webmail .wm-tool:disabled, .webmail .wm-tool.is-disabled { opacity: .35; cursor: default; background: none; }
.webmail .wm-tool .fa-angle-left, .webmail .wm-tool .fa-angle-right { font-size:var(--fs-lg); }
.webmail .wm-tool-rule { width: 1px; height: 20px; margin:0 4px; background: var(--wm-rule); }

/* ── Message list ─────────────────────────────────────────────────────── */

.webmail .wm-listpane { min-height: 0; overflow-y: auto; border-right: 1px solid var(--wm-rule); background: #fff; }
.webmail .wm-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap:2px; flex-wrap: nowrap;
  min-height: 50px; padding:10px 10px 10px 15px;
  background: #fff; border-bottom: 1px solid var(--wm-rule);
}
.webmail .wm-check-all { display: inline-flex; align-items: center; margin:0 10px 0 0; cursor: pointer; }
.webmail .wm-toolbar .btn-xs { margin-left:5px; }
.webmail .wm-pager { display: flex; align-items: center; gap:2px; margin-left:auto; font-size:var(--fs-xs); color: var(--wm-muted); }
.webmail .wm-pager-count { margin-right:4px; white-space: nowrap; }
.webmail .wm-list-head { display: flex; align-items: baseline; justify-content: space-between; gap:10px; padding:10px 15px 5px; }
.webmail .wm-list-head h2 { margin:0; font-size:var(--fs-2xs); font-weight: 700; color: var(--wm-strong); text-transform: uppercase; letter-spacing: .06em; }
.webmail .wm-list-head span { font-size:var(--fs-xs); color: var(--wm-muted); }
.webmail .wm-list-head strong { color: var(--wm-primary); }

.webmail input[type="checkbox"] { width: 15px; height: 15px; border-radius:var(--r-sm); margin:0; accent-color: var(--wm-primary); cursor: pointer; }

.webmail .wm-list { list-style: none; margin:0; padding:0; }
.webmail .wm-row {
  position: relative; display: flex; gap:10px;
  padding:10px 15px; border-bottom: 1px solid var(--wm-rule);
  transition: background-color .12s;
}
.webmail .wm-row:hover { background: var(--wm-hover); }
.webmail .wm-row:has(input:checked) { background: #fdf8ec; }
.webmail .wm-row.is-open { background: var(--wm-primary-soft); box-shadow: inset 3px 0 0 var(--wm-primary); }
.webmail .wm-row-check { padding-top:2px; }
.webmail .wm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap:2px; color: var(--wm-text); }
.webmail .wm-row-main:hover, .webmail .wm-row-main:focus { color: var(--wm-text); }
/* The whole row opens the message; the checkbox sits above the link. */
.webmail .wm-row-main::after { content: ""; position: absolute; inset: 0; }
.webmail .wm-row-check { position: relative; z-index: 1; }
.webmail .wm-row-top, .webmail .wm-row-bottom { display: flex; align-items: center; gap:10px; min-width: 0; }
.webmail .wm-from-name { flex: 1; min-width: 0; font-size:var(--fs-sm); color: var(--wm-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webmail .wm-row-top time { flex-shrink: 0; font-size:var(--fs-2xs); color: var(--wm-muted); }
.webmail .wm-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius:50%; background: var(--wm-primary); }
.webmail .wm-subject { font-size:var(--fs-sm); color: var(--wm-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webmail .wm-preview { flex: 1; min-width: 0; font-size:var(--fs-xs); color: var(--wm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webmail .wm-row-bottom .fa { flex-shrink: 0; color: var(--wm-muted); font-size:var(--fs-sm); }
.webmail .wm-row-bottom .wm-star { color: var(--wm-star); }
.webmail .is-unread .wm-from-name, .webmail .is-unread .wm-subject { font-weight: 700; }
.webmail .is-unread .wm-row-top time { color: var(--wm-strong); font-weight: 600; }
.webmail .is-read .wm-from-name { font-weight: 600; }
.webmail .is-read .wm-subject { color: var(--wm-text); }

.webmail .wm-empty { padding:50px 20px; text-align: center; color: var(--wm-muted); }
.webmail .wm-empty > .fa { font-size:var(--fs-4xl); color: var(--lp-border); margin-bottom:10px; }
.webmail .wm-empty h3 { color: var(--wm-strong); font-weight: 400; font-size:var(--fs-lg); margin-bottom:4px; }

/* ── Avatars (INSPINIA's accent colours) ──────────────────────────────── */

.webmail .wm-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius:50%; vertical-align: middle;
  color: #fff; font-size:var(--fs-sm); font-weight: 600; letter-spacing: .02em;
}
.webmail .wm-avatar-sm { width: 28px; height: 28px; font-size:var(--fs-2xs); }
.webmail .wm-avatar-lg { width: 40px; height: 40px; font-size:var(--fs-base); }
.webmail .wm-tone-0 { background: var(--navy); }
.webmail .wm-tone-1 { background: #1c84c6; }
.webmail .wm-tone-2 { background: var(--info); }
.webmail .wm-tone-3 { background: var(--warning); }
.webmail .wm-tone-4 { background: var(--danger); }
.webmail .wm-tone-5 { background: var(--lp-dark); }

/* ── Reading pane ─────────────────────────────────────────────────────── */

.webmail .wm-reader { min-height: 0; overflow-y: auto; padding:20px 25px; background: #fff; }
.webmail .wm-reader-empty { display: flex; align-items: center; justify-content: center; }
.webmail .wm-back { display: none; }
.webmail .wm-message-head { padding-bottom:15px; border-bottom: 1px solid var(--wm-rule); }
.webmail .wm-message-subject {
  margin:0 0 15px; font-size:var(--fs-3xl); font-weight: 400; color: var(--wm-strong);
  line-height: 1.3; word-break: break-word;
}
.webmail .wm-message-subject .fa-star { color: var(--wm-star); font-size:var(--fs-xl); margin-left:10px; vertical-align: 2px; }
.webmail .wm-sender { display: flex; align-items: flex-start; gap:10px; }
.webmail .wm-sender .wm-avatar-lg { width: 40px; height: 40px; font-size:var(--fs-base); }
.webmail .wm-sender-text { flex: 1; min-width: 0; padding-top:1px; }
.webmail .wm-sender-line strong { color: var(--wm-strong); font-size:var(--fs-base); font-weight: 600; }
.webmail .wm-sender-email { color: var(--wm-muted); margin-left:4px; font-size:var(--fs-xs); }
.webmail .wm-recipients { margin-top:2px; color: var(--wm-muted); font-size:var(--fs-xs); }
.webmail .wm-recipients summary { display: inline-flex; align-items: center; gap:5px; cursor: pointer; list-style: none; max-width: 100%; }
.webmail .wm-recipients summary::-webkit-details-marker { display: none; }
.webmail .wm-recipients summary:hover { color: var(--wm-strong); }
.webmail .wm-recipients[open] summary .fa { transform: rotate(180deg); }
.webmail .wm-recipients dl {
  display: grid; grid-template-columns: auto 1fr; gap:4px 15px;
  margin:10px 0 0; padding:10px 10px; border: 1px solid var(--wm-rule); border-radius:var(--wm-radius-sm);
  font-size:var(--fs-xs); word-break: break-word;
}
.webmail .wm-recipients dt { font-weight: 400; color: var(--wm-muted); }
.webmail .wm-recipients dd { margin:0; color: var(--wm-strong); }
.webmail .wm-sender-actions { display: flex; align-items: center; gap:2px; }
.webmail .wm-sent-at { margin-right:5px; color: var(--wm-muted); font-size:var(--fs-xs); white-space: nowrap; }
.webmail .wm-sender-actions .fa-reply { font-size:var(--fs-base); }
.webmail .wm-sender-actions .fa-ellipsis-v { font-size:var(--fs-base); }
.webmail .wm-message-body { padding:20px 0; }
.webmail .wm-message-text { white-space: pre-line; color: #3a3d3f; font-size:var(--fs-sm); line-height: 1.6; max-width: 760px; word-break: break-word; }
.webmail .mail-html { display: block; width: 100%; min-height: 480px; border: 0; }

.webmail .wm-attachments { padding:0 0 15px; }
.webmail .wm-attachments h5 { font-size:var(--fs-2xs); font-weight: 600; color: var(--wm-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom:10px; }
.webmail .wm-attachment-list { display: flex; flex-wrap: wrap; gap:10px; }
.webmail .wm-attachment {
  display: flex; align-items: center; gap:10px; width: 240px; max-width: 100%;
  padding:10px 10px; border: 1px solid var(--wm-rule); border-radius:var(--wm-radius);
  color: var(--wm-text); background: #fff; transition: border-color .12s, box-shadow .12s;
}
.webmail .wm-attachment:hover { border-color: var(--wm-primary); box-shadow:var(--shadow-sm); color: var(--wm-strong); }
.webmail .wm-attachment-icon { font-size:var(--fs-2xl); color: var(--danger); width: 20px; text-align: center; }
.webmail .wm-attachment-icon.fa-file-image-o { color: #1c84c6; }
.webmail .wm-attachment-icon.fa-file-word-o { color: #1c84c6; }
.webmail .wm-attachment-icon.fa-file-excel-o { color: var(--navy); }
.webmail .wm-attachment-icon.fa-file-o, .webmail .wm-attachment-icon.fa-file-archive-o { color: var(--wm-muted); }
.webmail .wm-attachment-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.webmail .wm-attachment-name { font-size:var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wm-strong); }
.webmail .wm-attachment-text small { color: var(--wm-muted); }
.webmail .wm-attachment-get { color: var(--wm-muted); }
.webmail .wm-attachment:hover .wm-attachment-get { color: var(--wm-primary); }
.webmail .wm-reply-bar { display: flex; gap:10px; padding:15px 0 0; border-top: 1px solid var(--wm-rule); }

/* ── Conversations ────────────────────────────────────────────────────── */

/* How many messages a conversation holds, beside its people in the list and
   its subject in the reader, as Gmail's grey count. */
.webmail .wm-thread-count {
  flex-shrink: 0; display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--lp-gray); color: var(--wm-muted); font-size: var(--fs-2xs); font-weight: 600;
  line-height: 18px; text-align: center; vertical-align: middle;
}
.webmail .wm-message-subject .wm-thread-count { margin-left: 8px; vertical-align: 4px; }
.webmail .wm-thread-head { display: flex; align-items: flex-start; gap: 10px; }
.webmail .wm-thread-head .wm-message-subject { flex: 1; min-width: 0; }

/* Earlier messages fold to one line; the newest is drawn whole below them. */
.webmail .wm-msg { border-bottom: 1px solid var(--wm-rule); }
.webmail .wm-msg-latest { border-bottom: 0; padding-top: 15px; }
.webmail .wm-msg-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none;
}
.webmail .wm-msg-line::-webkit-details-marker { display: none; }
.webmail .wm-msg-line:hover .wm-msg-who strong { text-decoration: underline; }
.webmail .wm-msg-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.webmail .wm-msg-who strong { flex-shrink: 0; color: var(--wm-strong); font-size: var(--fs-sm); font-weight: 600; }
.webmail .wm-msg-to { display: none; color: var(--wm-muted); font-size: var(--fs-xs); }
.webmail .wm-msg-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--wm-muted); font-size: var(--fs-xs); }
.webmail .wm-msg[open] .wm-msg-preview { display: none; }
.webmail .wm-msg[open] .wm-msg-to { display: inline; }
.webmail .wm-msg-line time, .webmail .wm-msg-clip { flex-shrink: 0; color: var(--wm-muted); font-size: var(--fs-2xs); }
.webmail .wm-msg-detail { padding: 0 0 10px 38px; }
.webmail .wm-msg-addresses {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0;
  color: var(--wm-muted); font-size: var(--fs-2xs); word-break: break-word;
}
.webmail .wm-msg-addresses dd { margin: 0; color: var(--wm-strong); }
.webmail .wm-msg-detail .wm-message-body { padding: 12px 0; }
.webmail .wm-msg-actions { display: flex; gap: 6px; }

/* Opening a conversation in place: the reader dims while the next one loads. */
.webmail .wm-reader.is-loading { opacity: .55; transition: opacity .15s; }

/* ── Compose ──────────────────────────────────────────────────────────── */

.webmail .wm-composer { grid-column: 2 / -1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; margin:0; background: #fff; }
.webmail .wm-composer-head {
  display: flex; align-items: center; justify-content: space-between; gap:10px;
  min-height: 50px; padding:10px 20px; border-bottom: 1px solid var(--wm-rule);
}
.webmail .wm-title h2 { margin:0; font-size:var(--fs-xl); font-weight: 400; color: var(--wm-strong); }
.webmail .wm-head-actions { display: flex; gap:5px; }
.webmail .wm-fields { border-bottom: 1px solid var(--wm-rule); }
.webmail .wm-field { display: flex; align-items: center; padding:0 20px; border-bottom: 1px solid #f1f2f3; min-height: 40px; }
.webmail .wm-field:last-child { border-bottom: 0; }
.webmail .wm-field-label { width: 60px; flex-shrink: 0; margin:0; color: var(--wm-muted); font-weight: 400; }
.webmail .wm-field-static { color: var(--wm-strong); }
.webmail .wm-field .form-control { border: 0; box-shadow: none; padding:10px 0; height: auto; background: transparent; }
.webmail .wm-field .form-control:focus { box-shadow: none; }
.webmail .wm-field:focus-within { box-shadow: inset 2px 0 0 var(--wm-primary); }
.webmail .wm-field.has-error .wm-field-label { color: var(--danger); }
.webmail .wm-field-error { padding:4px 20px 5px 80px; font-size:var(--fs-2xs); color: var(--danger); background: #fdf3f4; }
.webmail .wm-body { border: 0; border-radius:0; padding:15px 20px; flex: 1; min-height: 320px; resize: none; font-size:var(--fs-sm); line-height: 1.6; color: #3a3d3f; }
.webmail .wm-body:focus { box-shadow: none; }
.webmail .wm-compose-foot {
  display: flex; align-items: center; gap:10px; flex-wrap: wrap;
  padding:10px 20px; border-top: 1px solid var(--wm-rule); background: #fafbfb;
}
.webmail .wm-attach {
  position: relative; margin:0; padding:5px 10px; cursor: pointer;
  border: 1px dashed #cfd4d8; border-radius:var(--wm-radius-sm); color: var(--wm-text); font-weight: 400;
}
.webmail .wm-attach:hover { border-color: var(--wm-primary); color: var(--wm-primary); }
.webmail .wm-attach input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.webmail .wm-attach-names { font-size:var(--fs-2xs); color: var(--wm-strong); }

/* ── Server unavailable ───────────────────────────────────────────────── */

.webmail .wm-unavailable { grid-column: 1 / -1; align-self: start; width: 100%; max-width: 560px; margin:60px auto; text-align: center; }
.webmail .wm-unavailable .ibox-content { padding:40px 30px; }
.webmail .wm-unavailable-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom:15px; border-radius:50%;
  background: #fdf3f4; color: var(--danger); font-size:var(--fs-4xl);
}
.webmail .wm-unavailable h2 { font-weight: 300; color: var(--wm-strong); }
.webmail .wm-unavailable-detail { margin-top:20px; text-align: left; color: var(--wm-muted); font-size:var(--fs-xs); }
.webmail .wm-unavailable-detail summary { cursor: pointer; text-align: center; }
.webmail .wm-unavailable-detail pre { margin-top:10px; padding:10px; background: var(--wm-band); border-radius:var(--wm-radius); white-space: pre-wrap; }

/* ── Sign in ──────────────────────────────────────────────────────────── */

.wm-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding:30px 15px; }
.webmail .wm-login { width: 100%; max-width: 400px; }
.webmail .wm-login-card { box-shadow:var(--shadow-sm); }
.webmail .wm-login-card .ibox-content { padding:30px 25px 25px; }
.webmail .wm-login-mark {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin:0 auto 15px; border-radius:var(--wm-radius);
  background: var(--wm-primary); color: #fff; font-size:var(--fs-xl);
}
.webmail .wm-login-title { margin:0; text-align: center; font-size:var(--fs-3xl); font-weight: 300; color: var(--wm-strong); }
.webmail .wm-login-domain { margin:4px 0 20px; text-align: center; color: var(--wm-primary); font-weight: 600; }
.webmail .wm-login-form label { font-weight: 600; font-size:var(--fs-xs); color: var(--wm-strong); }
.webmail .wm-input-icon { position: relative; }
.webmail .wm-input-icon > .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--wm-muted); }
.webmail .wm-input-icon .form-control { height: 36px; padding-left:35px; font-size:var(--fs-sm); }
.webmail .wm-login-submit { height: 36px; margin-top:15px; font-size:var(--fs-sm); font-weight: 600; border-radius:var(--wm-radius); }
.webmail .wm-login-submit .fa { margin-left:5px; }
.webmail .wm-login-foot { margin-top:15px; text-align: center; font-size:var(--fs-2xs); color: var(--wm-muted); }

/* ── Smaller screens ──────────────────────────────────────────────────── */

.webmail .wm-compose-fab, .webmail .wm-sent-at-sm { display: none; }

@media (max-width: 1199px) {
  .webmail .wm-shell { --wm-list-w: 340px; grid-template-columns: 210px minmax(260px, var(--wm-list-w)) 0 minmax(0, 1fr); }
  .webmail .wm-top { grid-template-columns: 210px minmax(0, 1fr) auto; }
  .webmail .wm-me-address { display: none; }
  .webmail .wm-pager-count { display: none; }
  .webmail .wm-reader { padding:20px; }
}

/* Phones and small tablets: one pane at a time, as phone mail apps draw it.
   The list, or the open message with a way back to it; the page scrolls as a
   whole, with the bars that matter held at the top and bottom of the screen. */
@media (max-width: 991px) {
  body.webmail:not(.wm-login-page) { overflow: auto; background: #fff; }
  .webmail .wm-app { height: auto; min-height: 100vh; }

  /* Top bar: brand and account on one row, search under them. */
  .webmail .wm-top { grid-template-columns: minmax(0, 1fr) auto; height: auto; row-gap:10px; padding:10px 0 10px; }
  .webmail .wm-brand { padding:0 15px; gap:10px; }
  .webmail .wm-brand-mark { width: 32px; height: 32px; font-size:var(--fs-base); }
  .webmail .wm-brand-text strong { font-size:var(--fs-base); }
  .webmail .wm-search { grid-column: 1 / -1; grid-row: 2; max-width: none; width: auto; margin:0 15px; }
  .webmail .wm-search input { height: 38px; font-size:var(--fs-lg); padding-left:40px; }
  .webmail .wm-me { padding:0 10px 0 0; }
  .webmail .wm-me-toggle .wm-avatar { width: 30px; height: 30px; }

  /* Folders: a strip of chips that scrolls sideways; Compose becomes the
     round button in the corner. */
  .webmail .wm-shell { display: block; }
  .webmail .wm-resizer { display: none; }
  .webmail .wm-side {
    flex-direction: row; align-items: center; padding:10px 15px;
    overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--wm-rule);
  }
  .webmail .wm-side::-webkit-scrollbar { display: none; }
  .webmail .wm-side > .wm-compose, .webmail .wm-side-foot { display: none; }
  .webmail .wm-folders { display: flex; gap:5px; }
  .webmail .wm-folders li + li { margin-top:0; }
  .webmail .wm-folders a { padding:5px 10px; gap:5px; white-space: nowrap; font-size:var(--fs-xs); border-radius:var(--r-lg); background: #fff; border: 1px solid var(--wm-rule); }
  .webmail .wm-folders li.active a { border-color: transparent; }
  .webmail .wm-folders .fa { font-size:var(--fs-xs); width: auto; }
  .webmail .wm-count { min-width: 18px; height: 18px; padding:0 5px; font-size:var(--fs-2xs); }

  .webmail .wm-compose-fab {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20;
    display: inline-flex; align-items: center; gap:10px; height: 46px; padding:0 20px;
    border-radius:var(--r-pill); background: var(--wm-primary); color: #fff; font-size:var(--fs-sm); font-weight: 600;
    box-shadow:var(--shadow-sm);
  }
  /* Hidden beside an open message: its Reply and Forward bar takes that corner. */
  .webmail .wm-listpane.has-open + .wm-compose-fab { display: none; }
  .webmail .wm-compose-fab:hover, .webmail .wm-compose-fab:focus { color: #fff; background: var(--wm-primary-dark); }

  /* The list: toolbar stays on one line and sticks while scrolling. */
  .webmail .wm-listpane, .webmail .wm-reader, .webmail .wm-composer { overflow: visible; border-right: 0; }
  .webmail .wm-listpane { padding-bottom:90px; }
  .webmail .wm-listpane.has-open, .webmail .wm-reader-empty { display: none; }
  .webmail .wm-toolbar { flex-wrap: nowrap; min-height: 48px; padding:5px 10px 5px 15px; }
  .webmail .wm-tool { width: 34px; height: 34px; }
  .webmail .wm-tool-rule { margin:0 2px; }
  .webmail .wm-pager-count { display: inline; font-size:var(--fs-2xs); }
  .webmail .wm-list-head { padding:10px 15px 5px; }
  .webmail .wm-row { gap:10px; padding:10px 15px; }
  .webmail .wm-row-check { padding-top:3px; }
  .webmail .wm-from-name, .webmail .wm-subject { font-size:var(--fs-base); }
  .webmail .wm-preview { font-size:var(--fs-sm); }
  .webmail .wm-row-top time { font-size:var(--fs-xs); }

  /* An open message: back link held at the top, Reply and Forward at the bottom. */
  .webmail .wm-reader { padding:0 15px 90px; }
  .webmail .wm-back {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap:5px; margin:0 -15px 15px; padding:0 15px; height: 46px;
    background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--wm-rule);
    color: var(--wm-primary); font-weight: 600; font-size:var(--fs-sm);
  }
  .webmail .wm-back .fa { font-size:var(--fs-xl); }
  .webmail .wm-message-subject { font-size:var(--fs-2xl); margin-bottom:10px; }
  .webmail .wm-message-subject .fa-star { font-size:var(--fs-lg); }
  .webmail .wm-message-head { padding-bottom:10px; }
  .webmail .wm-message-body { padding:15px 0; }
  .webmail .wm-message-text { font-size:var(--fs-base); line-height: 1.6; }
  .webmail .mail-html { min-height: 60vh; }
  .webmail .wm-attachment { width: 100%; }
  .webmail .wm-reply-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px;
    background: #fff; border-top: 1px solid var(--wm-rule); box-shadow: 0 -2px 10px rgba(47, 64, 80, .06);
  }
  .webmail .wm-reply-bar .btn { flex: 1; height: 40px; border-radius:var(--wm-radius); display: inline-flex; align-items: center; justify-content: center; gap:5px; font-size:var(--fs-sm); }

  /* Compose: 16px fields so iOS does not zoom in, Send held at the bottom. */
  .webmail .wm-composer { min-height: calc(100vh - 160px); }
  .webmail .wm-composer-head { min-height: 48px; padding:5px 10px 5px 15px; }
  .webmail .wm-title h2 { font-size:var(--fs-lg); }
  .webmail .wm-head-actions .btn-primary { display: none; }
  .webmail .wm-field { padding:0 15px; min-height: 44px; }
  .webmail .wm-field-label { width: 56px; }
  .webmail .wm-field .form-control, .webmail .wm-body { font-size:var(--fs-lg); }
  .webmail .wm-body { padding:10px 15px; min-height: 45vh; }
  .webmail .wm-field-error { padding-left:70px; }
  .webmail .wm-compose-foot {
    position: sticky; bottom: 0; z-index: 5;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); flex-wrap: nowrap;
  }
  .webmail .wm-compose-foot small { display: none; }
  .webmail .wm-attach-names { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .webmail .wm-compose-foot .btn-primary { height: 38px; padding:0 20px; }
}

@media (max-width: 575px) {
  .webmail .wm-brand-text small, .webmail .wm-hide-sm { display: none; }
  .webmail .wm-sent-at, .webmail .wm-sender-actions .wm-tool-rule { display: none; }
  .webmail .wm-sender { gap:10px; }
  .webmail .wm-sender .wm-avatar-lg { width: 36px; height: 36px; font-size:var(--fs-sm); }
  .webmail .wm-sender-line strong { font-size:var(--fs-base); }
  .webmail .wm-sender-email { display: block; margin:0; font-size:var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .webmail .wm-sent-at-sm { display: block; margin-top:2px; font-size:var(--fs-xs); color: var(--wm-muted); }
  .webmail .wm-msg-detail { padding-left: 0; }
  .webmail .wm-row-top time { font-size:var(--fs-2xs); }
  .webmail .wm-unavailable { margin:20px 15px; width: auto; }
}

@media print {
  body.webmail { overflow: visible; }
  .webmail .wm-app { height: auto; }
  .webmail .wm-top, .webmail .wm-side, .webmail .wm-listpane, .webmail .wm-sender-actions, .webmail .wm-reply-bar, .webmail .wm-back, .webmail .wm-compose-fab { display: none !important; }
  .webmail .wm-shell { display: block; }
  .webmail .wm-reader { overflow: visible; padding:0; }
}

/* Live search: rows the typed term does not match are hidden at once, until
   the server's own results for it arrive. */
.webmail .wm-row[hidden] { display: none; }
.webmail .wm-listpane.is-searching .wm-list-head span::after { content: " · searching…"; color: var(--wm-muted); }
.webmail .wm-search-clear[hidden] { display: none; }