@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Instrument+Sans:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────
   Logistics AI Agent — blue-on-white operations console
   ───────────────────────────────────────────────────────────── */
:root {
  --cp-blue:      #2563EB;
  --cp-blue-600:  #1D4ED8;
  --cp-blue-700:  #1E40AF;
  --cp-ink:       #0B1B3F;   /* deep navy text */
  --cp-ink-soft:  #33436A;
  --cp-muted:     #6B7A9C;
  --cp-line:      #E3EAF6;
  --cp-line-2:    #EDF2FB;
  --cp-surface:   #FFFFFF;
  --cp-tint:      #F5F8FF;
  --cp-tint-2:    #EAF1FF;
  --cp-violet:    #6D3BEB;
  --cp-violet-bg: #F1ECFE;
  --cp-green:     #0F9D6C;
  --cp-green-bg:  #E4F7EF;
  --cp-amber:     #B7791F;
  --cp-danger:    #C4304A;
  --cp-danger-bg: #FCEBEE;
  /* Checkbox fill inside the composer's shipment editor. App-blue at 12-15px reads
     as a wall of colour when a dozen boxes are ticked at once, and none of these is
     an action — they're state. Grey-blue keeps a white tick legible on top. */
  --cp-check:     #6B7A9C;
  --ring:         0 0 0 4px rgba(37,99,235,.16);
  --sh-sm:  none;
  --sh-md:  0 1px 2px rgba(11,27,63,.05), 0 4px 12px rgba(11,27,63,.05);
  --sh-lg:  0 6px 22px rgba(11,27,63,.08), 0 2px 6px rgba(11,27,63,.04);
  --r-lg: 18px; --r-md: 13px; --r-sm: 9px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The UA's [hidden] rule is display:none at the lowest precedence, so ANY author
   `display:` on the same element silently defeats it — and much of this UI is toggled
   by setting .hidden from script (the status warning, the signal chip, the spinner,
   filtered rows). Losing that quietly means a warning banner shows when there is
   nothing to warn about, which is worse than no banner at all. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.6 'Instrument Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--cp-ink);
  background: #F3F7FF;
  background-image:
    radial-gradient(60rem 40rem at 88% -8%,  rgba(37,99,235,.10),  transparent 60%),
    radial-gradient(52rem 40rem at -6% 6%,   rgba(109,59,235,.07), transparent 55%),
    radial-gradient(48rem 36rem at 50% 118%, rgba(37,99,235,.06),  transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Column layout so the "Powered by" footer sits at the bottom of short pages
     (sign-in, error) instead of floating mid-screen or dropping below the fold. */
  display: flex; flex-direction: column;
}
main, .auth-wrap { flex: 1 0 auto; }

::selection { background: var(--cp-tint-2); color: var(--cp-blue-700); }

/* ── Header ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 15px clamp(18px, 5vw, 44px);
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cp-line);
}
.brandmark { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandmark .logo {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(150deg, var(--cp-blue), var(--cp-blue-700));
}
.brandmark .logo svg { width: 21px; height: 21px; display: block; }
header h1 {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  margin: 0; color: var(--cp-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The client's brand, set beside the product name behind a divider — co-branded,
   so it reads as their tool without the product losing its own name. */
header h1 .brand-tag {
  padding-left: 11px; border-left: 1px solid var(--cp-line);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px; font-weight: 500; color: var(--cp-ink-soft);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  header h1 .brand-tag { display: none; }   /* product name wins on a phone */
}
nav { display: flex; align-items: center; gap: 12px; font-size: 13.5px; flex: none; }
nav .who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font-weight: 500; max-width: 42vw;
}
nav .who .dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600;
  background: linear-gradient(150deg, var(--cp-blue), var(--cp-violet));
}
nav .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav a { color: var(--cp-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
nav a:hover { color: var(--cp-blue-600); }
nav .back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--cp-blue-600); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--cp-line); background: #fff; transition: .15s;
}
nav .back:hover { background: var(--cp-tint); border-color: #CBD9F2; }

/* ── Layout ─────────────────────────────────────────────── */
main { max-width: 860px; margin: clamp(22px, 5vw, 40px) auto 72px; padding: 0 clamp(16px, 5vw, 24px); }

.page-head { margin: 4px 0 22px; }
.page-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -.03em;
  margin: 0 0 6px; color: var(--cp-ink); line-height: 1.1;
}
.page-head p { margin: 0; color: var(--cp-muted); font-size: 14.5px; }
/* A thread subject is arbitrary length — smaller than a page title, and allowed
   to wrap rather than being clipped. */
.page-head h2.subject {
  font-size: clamp(20px, 3vw, 26px); line-height: 1.2;
  white-space: normal; overflow-wrap: break-word;
}
.count-chip {
  font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500;
  color: var(--cp-blue-700); background: var(--cp-tint-2);
  border: 1px solid #D3E0FA; padding: 2px 9px; border-radius: 7px; margin-left: 8px;
  vertical-align: middle;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}

/* ── Filter chips ───────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font: 500 13.5px 'Instrument Sans', sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { background: var(--cp-tint); border-color: #CBD9F2; }
.filter-chip .n {
  font-family: 'Geist Mono', monospace; font-size: 11.5px;
  color: var(--cp-muted); transition: color .15s;
}
.filter-chip.active {
  background: var(--cp-blue); border-color: var(--cp-blue); color: #fff;
}
.filter-chip.active .n { color: rgba(255,255,255,.75); }
.filter-chip.active:hover { background: var(--cp-blue-600); border-color: var(--cp-blue-600); }
.filter-chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* Draw the eye to Generate follow-up when one is actually overdue. */
.btn.primary-ghost {
  border-color: #F0DCAF; background: #FDF4E3; color: var(--cp-amber);
}
.btn.primary-ghost:hover { background: #FBEDD2; }

/* ── Pager ──────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin: 26px 0 10px;
}
.pg, .pg-num {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font: 500 13.5px 'Instrument Sans', sans-serif;
  transition: background .15s, border-color .15s, color .15s;
}
.pg:hover, .pg-num:hover { background: var(--cp-tint); border-color: #CBD9F2; color: var(--cp-blue-700); }
.pg.disabled { opacity: .45; pointer-events: none; }
.pg-nums { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-num { min-width: 38px; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 12.5px; }
.pg-num.current {
  background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; cursor: default;
}
.pg-num.current:hover { background: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }
.pg-gap { color: var(--cp-muted); padding: 0 2px; }
.pg-note { text-align: center; color: var(--cp-muted); font-size: 12.5px; margin: 0; }
@media (max-width: 560px) {
  .pg-nums { display: none; }      /* Previous/Next is enough on a phone */
}

/* ── Thread list rows ───────────────────────────────────── */
.thread-list { display: flex; flex-direction: column; gap: 12px; }
a.row-card {
  position: relative; display: grid;
  grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--r-md); padding: 16px 18px 16px 20px;
  text-decoration: none; color: inherit; overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s;
  animation: rise .5s both cubic-bezier(.2,.7,.3,1);
}
a.row-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cp-line); transition: background .16s;
}
a.row-card.awaiting::before { background: linear-gradient(var(--cp-blue), var(--cp-violet)); }
a.row-card:hover {
  transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #CBD9F2;
}
a.row-card:hover .chev { transform: translateX(3px); color: var(--cp-blue-600); }
.avatar {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: 17px; color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  background: linear-gradient(150deg, #4C7DF0, var(--cp-blue-700));
}
.avatar.carrier { background: linear-gradient(150deg, #8A63F0, var(--cp-violet)); }
.row-main { min-width: 0; }
.row-main .meta { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.subj {
  font-weight: 600; font-size: 15.5px; color: var(--cp-ink); margin: 0;
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-main .from {
  margin: 2px 0 0; color: var(--cp-muted); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-main .from b { color: var(--cp-ink-soft); font-weight: 600; }
.chev { color: #B9C6E2; transition: transform .16s, color .16s; flex: none; }

/* ── Pills / tags ───────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.pill.need   { background: var(--cp-blue); color: #fff; }
.pill.wait   { background: var(--cp-tint); color: var(--cp-muted); border: 1px solid var(--cp-line); }
/* Carrier has gone quiet past the threshold — amber, not red: it's a nudge, not a
   failure. */
.pill.due    { background: #FDF4E3; color: var(--cp-amber); border: 1px solid #F0DCAF; }
.pill .ping  { position: relative; width: 7px; height: 7px; }
.pill .ping::before, .pill .ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
}
.pill .ping::after { animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.time { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--cp-muted); }
.msg-count { display: inline-flex; align-items: center; gap: 4px; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--cp-muted); }
.msg-count svg { opacity: .8; }

/* ── Conversation ───────────────────────────────────────── */
.convo { display: flex; flex-direction: column; gap: 18px; padding: 4px; }
.msg { display: flex; gap: 13px; max-width: 88%; animation: rise .45s both cubic-bezier(.2,.7,.3,1); }
.msg .mono {
  width: 38px; height: 38px; border-radius: 11px; flex: none; margin-top: 2px;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  background: linear-gradient(150deg, #4C7DF0, var(--cp-blue-700));
}
.msg.carrier .mono { background: linear-gradient(150deg, #8A63F0, var(--cp-violet)); }
.msg.other .mono   { background: linear-gradient(150deg, #8493B4, #55637E); }
.bubble {
  background: #fff; border: 1px solid var(--cp-line); border-radius: 4px 15px 15px 15px;
  padding: 13px 16px; box-shadow: var(--sh-sm); min-width: 0;
}
.bubble .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.bubble .who { font-weight: 600; font-size: 13.5px; color: var(--cp-ink); word-break: break-word; }
.bubble .addr {
  margin: 0 0 9px; padding: 7px 10px; display: grid; gap: 2px;
  background: var(--cp-tint); border: 1px solid var(--cp-line-2); border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.5;
}
.bubble .addr div { display: flex; gap: 6px; min-width: 0; }
.bubble .addr dt {
  flex: none; width: 34px; margin: 0; color: var(--cp-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; padding-top: 1px;
}
.bubble .addr dd { margin: 0; color: var(--cp-ink-soft); word-break: break-word; }
.bubble .body { white-space: pre-wrap; margin: 0; color: var(--cp-ink-soft); font-size: 14.5px; word-wrap: break-word; }

/* Rich (HTML) bodies. The sender's own `style` attributes are stripped during
   sanitization, so everything a carrier's mail client emitted is restyled here —
   which is why an incoming table reads like the rest of the console instead of
   like whatever Outlook decided. `pre-wrap` is off: real block elements handle
   the line breaks now, and keeping it would double every gap. */
.bubble .body.rich { white-space: normal; }
.bubble .body.rich > :first-child { margin-top: 0; }
.bubble .body.rich > :last-child { margin-bottom: 0; }
.bubble .body.rich p, .bubble .body.rich div { margin: 0 0 8px; }
.bubble .body.rich ul, .bubble .body.rich ol { margin: 0 0 8px; padding-left: 20px; }
.bubble .body.rich a { color: var(--cp-blue-600); text-decoration: underline; }
.bubble .body.rich h1, .bubble .body.rich h2, .bubble .body.rich h3,
.bubble .body.rich h4, .bubble .body.rich h5, .bubble .body.rich h6 {
  font: 600 15px/1.4 'Bricolage Grotesque', sans-serif; color: var(--cp-ink); margin: 12px 0 6px;
}
.bubble .body.rich pre, .bubble .body.rich code {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px;
}
.bubble .body.rich pre { overflow-x: auto; background: var(--cp-tint); padding: 8px 10px; border-radius: var(--r-sm); }
.bubble .body.rich hr { border: 0; border-top: 1px solid var(--cp-line); margin: 12px 0; }
/* NOT every <table> in an email is data. Signatures and layout wrappers are built
   out of tables, and sanitizing strips the `border="0"` / `style="border:none"` that
   said "draw no lines" — so styling every table boxes the sender's signature block,
   including cells whose remote logo we dropped. Only a table that looks like a real
   grid gets the data treatment: one with header cells, or one with at least two rows
   AND some row of at least two cells. A single-column signature table matches
   neither and renders transparently, which is what its author intended. */
   NOTE for anyone editing these selectors: `:has()` must NOT be nested inside
   `:has()` — that is invalid, and because an invalid selector kills the WHOLE
   comma-separated rule, it silently un-styles every table including the ones with
   real headers. `:has(td + td)` already means "some row has two adjacent cells",
   since those two cells can only be siblings within one row. */
.bubble .body.rich table { border-collapse: collapse; margin: 10px 0; }
.bubble .body.rich table:has(th),
.bubble .body.rich table:has(tr + tr):has(td + td) {
  /* A wide scan grid scrolls inside the bubble rather than stretching it and putting
     the whole conversation into a horizontal scroll. */
  display: block; overflow-x: auto; max-width: 100%; font-size: 13px;
}
.bubble .body.rich table:has(th) :is(th, td),
.bubble .body.rich table:has(tr + tr):has(td + td) :is(th, td) {
  border: 1px solid var(--cp-line); padding: 5px 9px; text-align: left; vertical-align: top;
}
.bubble .body.rich th { background: var(--cp-tint); color: var(--cp-ink); font-weight: 600; white-space: nowrap; }
/* Signature logos and hub screenshots. Capped so a full-resolution photo (or a
   deliberately huge one) can't push the conversation around; `width`/`height`
   attributes from the sender survive sanitizing, hence the !important-free override
   via max-*. */
.bubble .body.rich img {
  max-width: 100%; max-height: 320px; width: auto; height: auto;
  vertical-align: middle; border-radius: 2px;
}

/* right-aligned "our" messages (brand / other = our side) */
.msg.brand, .msg.self { align-self: flex-end; flex-direction: row-reverse; }
.msg.brand .bubble, .msg.self .bubble {
  border-radius: 15px 4px 15px 15px;
  background: linear-gradient(180deg, #F7FAFF, var(--cp-tint));
  border-color: #D8E4FA;
}

.role {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 6px; padding: 2px 7px;
}
.role.carrier { background: var(--cp-violet-bg); color: var(--cp-violet); }
.role.brand   { background: var(--cp-green-bg);  color: var(--cp-green); }
.role.other   { background: var(--cp-tint-2);    color: var(--cp-ink-soft); }

/* ── Reply composer ─────────────────────────────────────── */
.composer { position: relative; overflow: hidden; }
.composer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cp-blue), var(--cp-violet));
}
.composer h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 16px;
  margin: 2px 0 2px; letter-spacing: -.01em;
}
.sugg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.badge-ai {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--cp-blue-700);
  background: var(--cp-tint-2); border: 1px solid #D3E0FA;
  padding: 5px 12px; border-radius: 999px;
}
.badge-ai svg { width: 14px; height: 14px; }
.signal-chip {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--cp-ink-soft);
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  padding: 3px 10px; border-radius: 7px;
}
.hint { color: var(--cp-muted); font-size: 13.5px; margin: 0 0 14px; }

textarea {
  width: 100%; background: #fff; color: var(--cp-ink);
  border: 1px solid var(--cp-line); border-radius: var(--r-md);
  padding: 14px 16px; font: 400 14.5px/1.65 'Instrument Sans', sans-serif;
  resize: vertical; transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none; border-color: var(--cp-blue); box-shadow: var(--ring); }
textarea::placeholder { color: #A9B6D2; }

/* Async draft: spinner in the badge while the reply is being drafted. */
.spinner {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid #C6D6F5; border-top-color: var(--cp-blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Shimmer on the disabled textarea while a draft is pending. */
textarea.shimmer {
  color: transparent; background:
    linear-gradient(100deg, var(--cp-tint) 30%, var(--cp-tint-2) 50%, var(--cp-tint) 70%)
    var(--cp-tint);
  background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Gentle fade-in when the drafted reply lands. */
.fade-in { animation: fadeIn .3s ease-out; }
@keyframes fadeIn { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
  textarea.shimmer { animation: none; }
  .fade-in { animation: none; }
}

.row { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--cp-ink-soft);
  border: 1px solid var(--cp-line); border-radius: var(--r-sm);
  padding: 11px 18px; cursor: pointer; text-decoration: none;
  font: 600 14px 'Instrument Sans', sans-serif; transition: .15s;
}
.btn:hover { background: var(--cp-tint); }
.btn.primary {
  color: #fff; border: 0;
  background: linear-gradient(150deg, var(--cp-blue), var(--cp-blue-600));
}
.btn.primary:hover { background: linear-gradient(150deg, var(--cp-blue-600), var(--cp-blue-700)); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { background: #fff; }

/* Regenerate: a quiet secondary action, right-aligned in the suggestion header. */
.btn.ghost { padding: 5px 12px; font-size: 12.5px; border-radius: 999px; }
.btn.regen { margin-left: auto; }
.btn.regen svg { width: 14px; height: 14px; }

/* ── Footer ─────────────────────────────────────────────── */
/* Vendor credit. Deliberately quiet — the client's brand leads in the header. */
.site-foot {
  flex: none; text-align: center; padding: 22px 20px 26px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted);
  border-top: 1px solid var(--cp-line-2);
}

/* ── States: empty, error, notice ───────────────────────── */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-left: 3px solid var(--cp-amber); border-radius: var(--r-md);
  padding: 18px 20px; color: var(--cp-ink-soft); box-shadow: var(--sh-sm);
}
.notice .ico { flex: none; color: var(--cp-amber); margin-top: 1px; }
.notice p { margin: 0; font-size: 14px; }
.empty {
  text-align: center; padding: 60px 24px; color: var(--cp-muted);
  background: var(--cp-surface); border: 1px dashed #CBD9F2; border-radius: var(--r-lg);
}
.empty .ico {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center; color: var(--cp-blue);
  background: var(--cp-tint-2); border: 1px solid #D3E0FA;
}
.empty h3 { font-family: 'Bricolage Grotesque', sans-serif; color: var(--cp-ink); margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.empty p { margin: 0; max-width: 42ch; margin-inline: auto; }
/* Error pages get a way back; the empty state doesn't need one. */
.empty .err-back { margin-top: 20px; }
/* Reply text handed back after a lost session — readable and selectable, clearly
   not a live composer. */
.recover { margin: 22px auto 0; max-width: 100%; text-align: left; }
.recover label {
  display: block; margin-bottom: 7px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted);
}
.recover textarea {
  width: 100%; resize: vertical; padding: 12px 14px;
  font: 14px/1.6 'Instrument Sans', sans-serif; color: var(--cp-ink-soft);
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  border-radius: var(--r-sm);
}
.err {
  color: var(--cp-danger); background: var(--cp-danger-bg);
  border: 1px solid #F3C6CF; border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin: 0 0 14px;
}
.warn {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--cp-amber); background: #FDF6E7;
  border: 1px solid #F0DEB0; border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin: 0 0 14px;
}
.warn svg { flex: none; margin-top: 1px; }

/* Attachment chips under a message body */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attachments .chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; text-decoration: none;
  background: var(--cp-tint); border: 1px solid var(--cp-line);
  color: var(--cp-ink-soft); font-size: 12.5px; font-weight: 500; transition: .15s;
}
.attachments .chip:hover { background: var(--cp-tint-2); border-color: #CBD9F2; color: var(--cp-blue-700); }
.attachments .chip svg { color: var(--cp-muted); flex: none; }
.attachments .chip .sz { color: var(--cp-muted); font-weight: 400; }
/* Files the supervisor picked — same chips, but not links, and each removable. */
.attachments.picked { margin-top: 8px; }
.attachments.picked:empty { margin-top: 0; }
.attachments.picked .chip { cursor: default; padding-right: 4px; }
.attachments.picked .chip .rm {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  margin-left: 2px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--cp-muted); cursor: pointer;
  font: 400 15px/1 'Instrument Sans', sans-serif; transition: .15s;
}
.attachments.picked .chip .rm:hover { background: var(--cp-danger-bg); color: var(--cp-danger); }
.attach-row .warn-text { color: var(--cp-danger); font-weight: 500; }

/* ── Recipients ─────────────────────────────────────────── */
.recipients { margin-bottom: 12px; border: 1px solid var(--cp-line); border-radius: var(--r-md); overflow: hidden; }
.rcpt { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--cp-surface); }
.rcpt + .rcpt { border-top: 1px solid var(--cp-line-2); }
.rcpt label {
  flex: none; width: 30px; font-size: 11px; font-weight: 600; color: var(--cp-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.rcpt input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 9px 0;
  font: 400 13.5px/1.5 'Instrument Sans', sans-serif; color: var(--cp-ink);
}
.rcpt input:focus { outline: none; }
.rcpt input::placeholder { color: #A9B6D2; }
.recipients:focus-within { border-color: var(--cp-blue); box-shadow: var(--ring); }

/* ── The mail body: prose + the table that gets appended ─── */
/* Joined into ONE block on purpose. The table isn't a side panel — it's part of the
   message, and the composer should show the shape of the mail that will actually go
   out. So the textarea loses its bottom edge and the table continues it. */
.mail-body.has-table textarea { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom-color: transparent; }
.body-table {
  margin-top: -1px; padding: 4px 14px 10px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line); border-top: 1px dashed var(--cp-line);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
/* The rendered mail table. Only shown above the inline row limit, where it carries the
   by-status summary that actually goes out — below the limit the editable grid IS the
   table, so a second copy would just be noise. */
.table-preview { max-height: 300px; overflow: auto; padding: 6px 0; }
.table-preview table { max-width: 100%; }

/* ── Editable shipment table ────────────────────────────── */
/* Values arrive from the live lookup; retyping one is recorded as an edit and shows up
   in the audit log, so the styling has to make an edited cell obvious at a glance. */
.table-editor { padding: 8px 0 2px; }

/* Deliberately recessive. Column choice is a rare tweak, so it must not compete with the
   grid or the reply body for attention — and a row of ticked boxes in the app's blue is
   exactly what the eye goes to first. So the ticks sit in grey and the divider that made
   this read as its own section is gone.
   It comes up to full strength on hover AND on keyboard focus, so it stays discoverable
   and reachable; nothing here is removed from the tab order. Colours stay at full opacity
   rather than being faded, because 11px text at reduced opacity stops meeting contrast. */
.col-toggles {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 0 0 6px; margin-bottom: 6px;
}
.col-toggles-label {
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cp-muted);
}
.check.tiny { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
              color: var(--cp-muted); cursor: pointer; }
.check.tiny input { accent-color: var(--cp-check); width: 12px; height: 12px; flex: none; }
.check.tiny:hover span { color: var(--cp-ink-soft); }

.grid-scroll { max-height: 340px; overflow: auto; }
.edit-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.edit-grid th {
  position: sticky; top: 0; z-index: 1;
  background: var(--cp-tint); color: var(--cp-ink-soft);
  text-align: left; font-weight: 600; white-space: nowrap;
  padding: 7px 9px; border-bottom: 1px solid var(--cp-line);
}
.edit-grid td {
  padding: 3px 5px; border-bottom: 1px solid var(--cp-line-2);
  vertical-align: middle; color: var(--cp-ink);
}
.edit-grid th.pick, .edit-grid td.pick { width: 30px; padding-left: 6px; text-align: center; }
.edit-grid td.pick input { accent-color: var(--cp-check); width: 15px; height: 15px; }
.edit-grid tr:last-child td { border-bottom: none; }

/* Left out of the mail. Greyed, never struck through: a strikethrough reads as "wrong"
   or "corrected", when the value is simply not going in this mail — and it made the
   figures hard to read back if you changed your mind.
   Dropped, not deleted: a row removed from the DOM could never be brought back. */
.edit-grid tr.row-dropped td { opacity: .4; }

.cellInput {
  width: 100%; min-width: 90px; background: transparent; color: inherit;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 5px 7px; font: 400 13px/1.4 'Instrument Sans', sans-serif;
  transition: border-color .12s, background .12s;
}
.cellInput:hover { border-color: var(--cp-line); background: var(--cp-tint); }
.cellInput:focus {
  outline: none; background: #fff;
  border-color: var(--cp-blue); box-shadow: var(--ring);
}
/* Typed over the lookup value. */
.cell-edited .cellInput { background: var(--cp-violet-bg); border-color: #D9CCFB; font-weight: 500; }
/* Hidden column: kept on screen so the checkbox that unhides it still has a target.
   Same greying as a dropped row, since it means the same thing. */
.col-hidden { opacity: .4; }

/* The lookup moved under an edit — the send is blocked until this is resolved. */
.cell-conflict .cellInput { background: var(--cp-danger-bg); border-color: #F2C0CA; }
.conflict-note {
  display: block; margin-top: 2px; padding-left: 7px;
  font-size: 11px; color: var(--cp-danger); white-space: nowrap;
}
.conflict-banner {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 13px; margin: 4px 0 10px;
  background: var(--cp-danger-bg); border: 1px solid #F2C0CA;
  border-radius: var(--r-md); font-size: 13px; color: var(--cp-ink);
}
.conflict-banner strong { color: var(--cp-danger); }
.conflict-banner span { color: var(--cp-ink-soft); line-height: 1.5; }
.conflict-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 3px; }
.conflict-actions .check { display: inline-flex; align-items: center; gap: 8px;
                          font-size: 12.5px; color: var(--cp-ink-soft); cursor: pointer; }
.conflict-actions .check input { accent-color: var(--cp-danger); width: 15px; height: 15px; }
.editor-hint { margin: 8px 0 0; font-size: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.body-table .check {
  display: flex; align-items: center; gap: 9px; margin-top: 8px;
  padding-top: 9px; border-top: 1px solid var(--cp-line-2);
  font-size: 12.5px; color: var(--cp-muted); cursor: pointer;
}
.body-table .check input { accent-color: var(--cp-check); width: 15px; height: 15px; flex: none; }
.body-table .check:hover span { color: var(--cp-ink-soft); }

/* ── Attach files ───────────────────────────────────────── */
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
/* A label wrapping a hidden input — so it needs the button's look without being one. */
.attach-btn { cursor: pointer; }
.attach-btn:focus-within { outline: none; box-shadow: var(--ring); border-color: var(--cp-blue); }

/* ── Login ──────────────────────────────────────────────── */
.auth-wrap { display: grid; place-items: center; padding: 40px 20px; }
.auth-card {
  position: relative; width: 100%; max-width: 440px; text-align: center;
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: 26px; padding: 44px 40px 38px;
  box-shadow: var(--sh-lg); overflow: hidden;
  animation: rise .6s both cubic-bezier(.2,.7,.3,1);
}
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--cp-violet), var(--cp-blue));
}
.auth-card .logo-lg {
  width: 64px; height: 64px; border-radius: 20px; margin: 6px auto 22px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--cp-blue), var(--cp-blue-700));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.auth-card .logo-lg svg { width: 34px; height: 34px; }
.auth-card .eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cp-blue-600); margin: 0 0 10px;
}
.auth-card h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: 26px; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; color: var(--cp-ink);
}
.auth-card p.lede { color: var(--cp-muted); font-size: 14.5px; margin: 0 auto 26px; max-width: 34ch; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 13px 20px; border-radius: 12px;
  background: linear-gradient(150deg, var(--cp-blue), var(--cp-blue-600));
  color: #fff; font: 600 15px 'Instrument Sans', sans-serif; text-decoration: none;
  box-shadow: 0 6px 18px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.28);
  transition: .16s;
}
.btn-google:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,99,235,.42); }
.btn-google .g { background: #fff; border-radius: 5px; width: 22px; height: 22px; display: grid; place-items: center; }
.btn-google .g svg { width: 14px; height: 14px; }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: var(--cp-muted); font-size: 12.5px; }
.auth-foot svg { width: 14px; height: 14px; color: var(--cp-green); }

/* ── Motion ─────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.thread-list a.row-card:nth-child(1) { animation-delay: .02s; }
.thread-list a.row-card:nth-child(2) { animation-delay: .07s; }
.thread-list a.row-card:nth-child(3) { animation-delay: .12s; }
.thread-list a.row-card:nth-child(4) { animation-delay: .17s; }
.thread-list a.row-card:nth-child(5) { animation-delay: .22s; }
.thread-list a.row-card:nth-child(n+6) { animation-delay: .26s; }
.convo .msg:nth-child(1){animation-delay:.03s} .convo .msg:nth-child(2){animation-delay:.09s}
.convo .msg:nth-child(3){animation-delay:.15s} .convo .msg:nth-child(n+4){animation-delay:.2s}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 560px) {
  .msg { max-width: 100%; }
  nav .who { display: none; }
  a.row-card { grid-template-columns: 42px 1fr; }
  a.row-card .chev { display: none; }
}