/* ==========================================================================
   Mail client — Communication HUB > Mail
   ==========================================================================
   Ported from the approved interactive mockup (see DOCS/EMAIL_INTEGRATION_PLAN.md).

   Hand-authored "is-" classes, NOT Tailwind utilities. This panel loads
   Filament's prebuilt CSS and has no Tailwind build for custom views, so
   utilities such as flex or rounded-lg do not exist in the served stylesheet
   and a view written in them renders as unstyled text.

   Every rule is scoped under .is-mail. The palette lives on that container
   rather than :root so it cannot repaint the rest of the admin, and dark mode
   keys off Filament's .dark class rather than a media query, so the in-app
   theme toggle decides the theme rather than the operating system.

   Four panes at desktop width. The context pane is the whole reason this
   screen exists rather than leaving people in Outlook, so it is the LAST to
   collapse: below 1340px it does not disappear, it moves inline above the
   messages.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────
   ImmigraSuite Mail — interactive mockup
   Accent inherited from the product (teal #0f766e). Neutrals are
   biased green so they read as chosen, not defaulted. IBM Plex
   Sans for the UI, Plex Mono for identifiers — matching how the
   File Note PDF already treats case numbers and TRNs.
   ───────────────────────────────────────────────────────────── */

.is-mail-page,
.is-mail{
  --ground:    #eef2f1;
  --surface:   #ffffff;
  --surface-2: #f6f9f8;
  --raised:    #ffffff;
  --ink:       #14201e;
  --ink-2:     #465854;
  --ink-3:     #7c8f8a;
  --line:      #dde5e3;
  --line-2:    #eaf0ef;
  --accent:    #0f766e;
  --accent-ink:#0b5a54;
  --accent-bg: #dcefec;
  --sel:       #e4f1ee;
  --warn:      #b45309;
  --warn-bg:   #fdf2e2;
  --good:      #15803d;
  --good-bg:   #e5f4ea;
  --alert:     #be123c;
  --alert-bg:  #fdeaee;
  --shadow:    0 1px 2px rgba(14,30,28,.06), 0 8px 24px rgba(14,30,28,.07);
}
.dark .is-mail-page,
.dark .is-mail{
  --ground:    #0b100f;
  --surface:   #141d1b;
  --surface-2: #101917;
  --raised:    #1a2523;
  --ink:       #e2ecea;
  --ink-2:     #9db0ab;
  --ink-3:     #6c807b;
  --line:      #23302d;
  --line-2:    #1b2624;
  --accent:    #45b3a5;
  --accent-ink:#7fd3c7;
  --accent-bg: #14312d;
  --sel:       #16302c;
  --warn:      #e0a260;
  --warn-bg:   #2e2314;
  --good:      #6cc48b;
  --good-bg:   #142b1c;
  --alert:     #f2879f;
  --alert-bg:  #331520;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
}
.is-mail, .is-mail *{ box-sizing: border-box; }
.is-mail{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.is-mail-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* :where() keeps this reset at zero specificity. The mockup had "body button"
   (two elements) which .btn beat on class specificity; scoping it turned it
   into ".is-mail button" (class + element), which then BEAT .is-mail-btn and
   stripped the border and background off every button on the screen. */
.is-mail :where(button){ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.is-mail :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* ── mockup strip ─────────────────────────────────────────── */
/* ── shell ────────────────────────────────────────────────── */
.is-mail{
  display: grid;
  grid-template-columns: 218px 348px minmax(780px, 1fr) 296px;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100vh - 13rem);
  min-height: 34rem;
  background: var(--ground);
}
/* The panes keep the widths they were designed at, whatever the screen.
   The mockup dropped panes as the viewport narrowed; scrolling the box
   sideways instead means the layout a person learns is the same layout on
   every machine, and the context pane — the whole reason this exists rather
   than Outlook — is never the thing that disappears.

   The minmax floor on the message column is what creates the overflow: the
   tracks add up to more than the container, so .is-mail scrolls rather than
   squeezing the columns. A min-width here would not work, because the element
   doing the scrolling cannot also be the element refusing to shrink. */
/* ── rail ─────────────────────────────────────────────────── */
.is-mail-rail{
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  overflow-y: auto;
}
.is-mail-rail-group + .is-mail-rail-group{ margin-top: 20px; }
.is-mail-rail-label{
  font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 8px; margin-bottom: 6px;
}
.is-mail-rail-item{
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border-radius: 7px;
  color: var(--ink-2); font-size: 13px; text-align: left;
  transition: background .12s, color .12s;
}
.is-mail-rail-item:hover{ background: var(--line-2); color: var(--ink); }
.is-mail-rail-item[aria-current="true"]{ background: var(--sel); color: var(--accent-ink); font-weight: 600; }
.is-mail-rail-item .is-mail-dot{ width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.is-mail-rail-item .is-mail-n{
  margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.is-mail-rail-item[aria-current="true"] .is-mail-n{ color: var(--accent); }
.is-mail-rail-item .is-mail-n.is-mail-hot{
  background: var(--accent); color: #fff; border-radius: 9px;
  padding: 1px 6px; font-weight: 600;
}
.dark .is-mail-rail-item .is-mail-n.is-mail-hot,
.dark .is-mail-rail-item .is-mail-n.is-mail-hot{ color: #06110f; }
/* ── list ─────────────────────────────────────────────────── */
.is-mail-list-col{
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.is-mail-list-head{
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.is-mail-list-head h2{ margin: 0; font-size: 14.5px; font-weight: 600; }
.is-mail-list-head .is-mail-count{ font-size: 11.5px; color: var(--ink-3); }
.is-mail-search{
  margin-left: auto; position: relative;
}
.is-mail-search input{
  width: 122px; padding: 5px 9px 5px 26px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 12px;
}
.is-mail-search svg{ position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.is-mail-threads{ overflow-y: auto; flex: 1; min-height: 0; }
.is-mail-thread{
  display: block; width: 100%; text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  transition: background .1s;
}
.is-mail-thread:hover{ background: var(--surface-2); }
.is-mail-thread[aria-selected="true"]{ background: var(--sel); border-left-color: var(--accent); }
.is-mail-thread-top{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.is-mail-thread-from{ font-weight: 600; font-size: 13px; color: var(--ink); }
.is-mail-thread.is-mail-unread .is-mail-thread-from::before{
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
}
.is-mail-thread:not(.is-mail-unread) .is-mail-thread-from{ font-weight: 400; color: var(--ink-2); }
.is-mail-thread-time{ margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.is-mail-thread-subject{
  font-size: 12.5px; color: var(--ink); margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-mail-thread:not(.is-mail-unread) .is-mail-thread-subject{ color: var(--ink-2); }
.is-mail-thread-preview{
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-mail-thread-meta{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.is-mail-tag{
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  padding: 1.5px 6px; border-radius: 5px; white-space: nowrap;
}
.is-mail-tag-case{ background: var(--accent-bg); color: var(--accent-ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.is-mail-tag-none{ background: var(--warn-bg); color: var(--warn); }
.is-mail-tag-wait{ background: var(--warn-bg); color: var(--warn); }
.is-mail-tag-done{ background: var(--good-bg); color: var(--good); }
.is-mail-tag-alert{ background: var(--alert-bg); color: var(--alert); }
.is-mail-clip{ font-size: 11px; color: var(--ink-3); }
.is-mail-who{
  margin-left: auto; font-size: 10.5px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 4px;
}
.is-mail-avatar{
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 600;
  display: grid; place-items: center; flex: 0 0 auto;
}
.dark .is-mail-avatar,
.dark .is-mail-avatar{ color: #06110f; }
.is-mail-typing{ color: var(--accent); font-weight: 600; }
.is-mail-typing .is-mail-pulse{
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 3px;
  animation: is-mail-pulse 1.4s ease-in-out infinite;
}
@keyframes is-mail-pulse{
 0%,
100%{ opacity: .35 }
50%{ opacity: 1 }
}
/* ── message pane ─────────────────────────────────────────── */
.is-mail-msg-col{
  background: var(--surface); display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}
.is-mail-msg-head{
  padding: 14px 20px 12px; border-bottom: 1px solid var(--line);
}
.is-mail-msg-subject{ margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
/* One line, always. Wrapping put four buttons on a second row and made the
   header look like a toolbar that had outgrown its space — which it had. The
   rarely-used actions now live behind the overflow menu instead. */
.is-mail-msg-actions{ display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.is-mail-msg-actions .is-mail-clip{ margin-left: auto; white-space: nowrap; }
.is-mail-btn{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; color: var(--ink-2);
  transition: background .12s, border-color .12s, color .12s;
}
.is-mail-btn:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.is-mail-btn-primary{
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.is-mail-btn-primary:hover{ background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.dark .is-mail-btn-primary,
.dark .is-mail-btn-primary{ color: #06110f; }
.dark .is-mail-btn-primary:hover,
.dark .is-mail-btn-primary:hover{ color: #06110f; }
.is-mail-btn-sm{ padding: 3px 8px; font-size: 11.5px; }
.is-mail-msg-body{ overflow-y: auto; flex: 1; min-height: 0; padding: 16px 20px 22px; }
.is-mail-message{ border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 12px; }
.is-mail-message.is-mail-collapsed{ background: var(--surface-2); }
.is-mail-message-head{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; width: 100%; text-align: left;
}
.is-mail-message-who{ min-width: 0; }
.is-mail-message-who .is-mail-n{ font-weight: 600; font-size: 13px; }
.is-mail-message-who .is-mail-a{ font-size: 11.5px; color: var(--ink-3); }
.is-mail-message-when{ margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.is-mail-message-text{ padding: 0 14px 14px; font-size: 13.5px; color: var(--ink-2); }
.is-mail-message-text p{ margin: 0 0 10px; }
.is-mail-message-text p:last-child{ margin-bottom: 0; }
.is-mail-message.is-mail-collapsed .is-mail-message-text{ display: none; }
.is-mail-message.is-mail-out{ border-color: var(--accent-bg); }
.is-mail-message.is-mail-out .is-mail-message-head{ background: var(--accent-bg); border-radius: 9px 9px 0 0; }
.is-mail-attach-row{ display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 13px; }
.is-mail-attach{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); font-size: 11.5px;
}
.is-mail-attach .is-mail-nm{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.is-mail-attach .is-mail-sz{ color: var(--ink-3); }
.is-mail-attach :where(button){ color: var(--accent); font-size: 11px; font-weight: 600; }
/* reply composer */
.is-mail-composer{
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--surface); overflow: hidden; margin-top: 4px;
}
.is-mail-composer-head{
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; background: var(--accent-bg);
  font-size: 12px; color: var(--accent-ink);
}
.is-mail-composer-head b{ font-weight: 600; }
.is-mail-composer textarea{
  width: 100%; border: 0; resize: vertical; min-height: 110px;
  padding: 13px; font: inherit; font-size: 13.5px;
  background: var(--surface); color: var(--ink);
}
.is-mail-composer textarea:focus{ outline: none; }
.is-mail-composer-foot{
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 13px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.is-mail-composer-foot .is-mail-note{ margin-left: auto; font-size: 11px; color: var(--ink-3); }
/* ── matter context ───────────────────────────────────────── */
.is-mail-context-col{
  background: var(--surface-2); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 14px;
}
/* Kept in the markup, never shown: the collapsed layout it belonged to is
   gone, and the right-hand pane is now always present. */
.is-mail-context-inline{ display: none; }
.is-mail-ctx{
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow); overflow: hidden;
}
.is-mail-ctx-head{ padding: 12px 14px 11px; border-bottom: 1px solid var(--line-2); }
.is-mail-ctx-eyebrow{
  font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.is-mail-ctx-title{ font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.is-mail-ctx-sub{ font-size: 11.5px; color: var(--ink-3); }
.is-mail-ctx-rows{ padding: 4px 0; }
.is-mail-ctx-row{
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 14px; font-size: 12px;
}
.is-mail-ctx-row + .is-mail-ctx-row{ border-top: 1px solid var(--line-2); }
.is-mail-ctx-row dt{ color: var(--ink-3); flex: 0 0 84px; font-size: 11px; }
.is-mail-ctx-row dd{ margin: 0; color: var(--ink); text-align: right; margin-left: auto; }
.is-mail-ctx-row dd.is-mail-money{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.is-mail-ctx-row dd.is-mail-owing{ color: var(--alert); font-weight: 600; }
.is-mail-ctx-foot{ padding: 11px 14px; border-top: 1px solid var(--line-2); display: flex; gap: 6px; flex-wrap: wrap; }
.is-mail-ctx-empty{ padding: 18px 14px; text-align: center; }
.is-mail-ctx-empty p{ margin: 0 0 12px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.is-mail-filed{
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 9px 12px;
  background: var(--good-bg); border-radius: 9px;
  font-size: 11.5px; color: var(--good);
}
.is-mail-ctx-note{
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: 9px;
  font-size: 11px; color: var(--ink-3); line-height: 1.55;
}
.is-mail-ctx-note b{ color: var(--ink-2); }
.is-mail-toast{
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--ground);
  padding: 9px 16px; border-radius: 9px; font-size: 12.5px;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 50;
}
.is-mail-toast.is-mail-show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.is-mail-empty-pane{
  display: grid; place-items: center; height: 100%;
  padding: 40px 20px; text-align: center;
  color: var(--ink-3); font-size: 13px;
}
@media (prefers-reduced-motion: reduce){
 .is-mail, .is-mail *{ animation: none !important; transition: none !important; }
}

/* Mail bodies arrive with their own markup and routinely carry fixed widths
   that would otherwise scroll the whole panel sideways. */
.is-mail-msg-body .prose { overflow-wrap: anywhere; }
.is-mail-msg-body .prose table { display: block; overflow-x: auto; max-width: 100%; }
.is-mail-msg-body .prose img { max-width: 100%; height: auto; }


/* ── additions beyond the mockup ───────────────────────────────────────────
   States the mockup had no need to draw: a panel with no mailbox at all, a
   degraded mailbox, and the in-flight states Livewire introduces.
   ------------------------------------------------------------------------ */

.is-mail-truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* No mailbox connected, or the viewer is not a member of one. */
.is-mail-setup-empty{
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 34px 28px; text-align: center;
}
.is-mail-setup-empty-title{ margin: 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.is-mail-setup-empty-body{ margin: 6px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* A mailbox that is polling rather than subscribed still works — it is late,
   not broken — so this warns without shouting. */
.is-mail-rail-warning{
  margin-top: 18px; padding: 9px 10px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn);
  font-size: 11px; line-height: 1.45;
}
.is-mail-rail-warning b{ display: block; font-weight: 600; margin-bottom: 2px; }

.is-mail-search-clear{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 14px; line-height: 1;
}
.is-mail-search-clear:hover{ color: var(--ink); }

/* Livewire is fetching. Dim rather than blank: the old list stays readable,
   so the pane does not flash empty between keystrokes of a search. */
.is-mail-busy{ opacity: .5; transition: opacity .1s; }

.is-mail-select{
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px;
}

.is-mail-banner{
  margin-bottom: 14px; padding: 9px 12px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn); font-size: 11.5px;
}

/* Plain-text bodies carry their own line breaks and must keep them. */
.is-mail-plain{ white-space: pre-line; }

/* ── composer fields ─────────────────────────────────────────────────────── */

.is-mail-composer-fields{
  padding: 10px 13px; border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 7px;
}
.is-mail-field{ display: flex; align-items: center; gap: 9px; }
.is-mail-field label{ flex: 0 0 46px; font-size: 11px; color: var(--ink-3); }
.is-mail-field input{
  width: 100%; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 12px;
}
.is-mail-field input:focus{ outline: none; border-color: var(--accent); }

.is-mail-attach-remove{ color: var(--alert); font-size: 13px; line-height: 1; }
.is-mail-attach-remove:hover{ opacity: .7; }

/* The native file input is unstylable, so the label is the button and the
   input itself is hidden behind it. */
.is-mail-btn-file{ cursor: pointer; position: relative; overflow: hidden; }
.is-mail-btn-file input[type="file"]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.is-mail-btn-quiet{ border-color: transparent; background: transparent; color: var(--ink-3); }
.is-mail-btn-quiet:hover{ color: var(--alert); border-color: transparent; background: transparent; }

.is-mail-error{ margin: 0; padding: 0 13px 11px; font-size: 11px; color: var(--alert); }

/* The not-linked panel reuses the context header but must not read as an
   accent-coloured success state. */
.is-mail-ctx-eyebrow-warn{ color: var(--warn); }

/* ── Mail Setup: per-mailbox health cards ────────────────────────────────── */

.is-mail-status-grid{
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 4px;
}
.is-mail-status{
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 14px 16px;
}
.is-mail-status-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.is-mail-status-id{ min-width: 0; }
.is-mail-status-name{ font-weight: 600; font-size: 14px; color: var(--ink); }
.is-mail-status-address{
  font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-mail-status-rows{ margin: 12px 0 0; padding: 0; }
.is-mail-status-row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 12px;
}
.is-mail-status-row + .is-mail-status-row{ border-top: 1px solid var(--line-2); }
.is-mail-status-row dt{ color: var(--ink-3); }
.is-mail-status-row dd{ margin: 0; color: var(--ink); text-align: right; }
.is-mail-status-error{
  margin-top: 12px; padding: 9px 11px; border-radius: 8px;
  background: var(--alert-bg); color: var(--alert);
  font-size: 11.5px; line-height: 1.5;
}
.is-mail-status-error-when{ opacity: .75; }

.is-mail-form-actions{
  margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}

/* ── page fit ────────────────────────────────────────────────────────────── */

/* The page is declared fullHeight, so the grid fills what it is given rather
   than guessing at the chrome above it with a viewport calculation. */
.is-mail-page.fi-height-full .is-mail{ height: 100%; }

.is-mail{
  border: 1px solid var(--line);
  border-radius: 12px;
  /* NOT "overflow: hidden". The shorthand sets both axes, and being declared
     after the grid rule it silently replaced overflow-x: auto — so the panes
     were clipped at the edge of the box instead of scrolling, with no
     scrollbar and no context pane. The rounded corners still clip, because
     auto/hidden both establish a clipping context. */
  overflow-x: auto;
  overflow-y: hidden;
}

/* Nothing selected. The pane still has to say what it is for. */
.is-mail-ctx-placeholder{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 28px 20px; text-align: center;
}
.is-mail-ctx-placeholder-mark{ font-size: 26px; color: var(--ink-3); opacity: .55; margin-bottom: 10px; }
.is-mail-ctx-placeholder p{ margin: 0 0 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.is-mail-ctx-placeholder b{ color: var(--ink-2); font-size: 12.5px; font-weight: 600; }

/* ── the horizontal scrollbar ────────────────────────────────────────────── */

/* macOS uses overlay scrollbars: they fade in while scrolling and are invisible
   at rest, so the box looked like it had simply cut the context pane off with
   no way to reach it. Declaring ::-webkit-scrollbar opts this element out of
   overlay behaviour and keeps the bar on screen permanently — here that is the
   affordance itself, telling you there is more to the right. */
.is-mail{
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) var(--surface-2);
}
.is-mail::-webkit-scrollbar{ height: 12px; }
.is-mail::-webkit-scrollbar-track{
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.is-mail::-webkit-scrollbar-thumb{
  background: var(--ink-3);
  border: 3px solid var(--surface-2);
  border-radius: 6px;
}
.is-mail::-webkit-scrollbar-thumb:hover{ background: var(--ink-2); }

/* ── overflow menu ───────────────────────────────────────────────────────── */

.is-mail-menu{ position: relative; }
.is-mail-menu-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 15px; line-height: 1;
}
.is-mail-menu-btn:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.is-mail-menu-list{
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 30;
  min-width: 178px; padding: 5px;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: var(--shadow);
}
.is-mail-menu-item{
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink-2);
}
.is-mail-menu-item:hover{ background: var(--sel); color: var(--accent-ink); }
.is-mail-menu-sep{ height: 1px; margin: 4px 6px; background: var(--line-2); }
.is-mail-menu-item.is-mail-menu-danger:hover{ background: var(--alert-bg); color: var(--alert); }

/* ── delivery notices ────────────────────────────────────────────────────── */

/* A bounce belongs on the file, but it is not a party to the conversation.
   Rendered as a strip rather than a message card so nobody reads "Microsoft
   Outlook" as a third person in a client thread. */
.is-mail-notice{
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 12px; padding: 10px 13px;
  background: var(--warn-bg); border: 1px solid var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  font-size: 12px; color: var(--warn); line-height: 1.5;
}
.is-mail-notice-mark{ flex: 0 0 auto; font-size: 13px; }
.is-mail-notice b{ display: block; font-weight: 600; margin-bottom: 2px; }
.is-mail-notice-when{ display: block; margin-top: 3px; opacity: .8; font-size: 11px; }

/* ── check for new mail ──────────────────────────────────────────────────── */

.is-mail-refresh{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 14px; line-height: 1;
}
.is-mail-refresh:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.is-mail-refresh:disabled{ opacity: .55; cursor: default; }
.is-mail-refresh-busy{ display: inline-block; animation: is-mail-spin .9s linear infinite; }

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