:root {
  --bg: #e3e0dd;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --ink: #000a62;
  --text: #000a62;
  --muted: #4f5b88;
  --brand: #0468ff;
  --brand-soft: #dce9ff;
  --accent: #ff9522;
  --ok: #016355;
  --warn: #ff9522;
  --bad: #4d1773;
  --line: rgba(0, 10, 98, 0.14);
  --shadow: 0 10px 24px rgba(0, 10, 98, 0.08);
  --brand-rgb: 4, 104, 255;
  --ink-rgb: 0, 10, 98;
  --accent-rgb: 255, 149, 34;
  --ok-rgb: 1, 99, 85;
  --bad-rgb: 77, 23, 115;
  --muted-rgb: 79, 91, 136;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --logo-serif: "Iowan Old Style", "Times New Roman", "Georgia", serif;
  --toast-success: #016355;
  --toast-error: #b42318;
  --toast-warn: #ff9522;
  --toast-info: #0468ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { font-size: 13px; }
body {
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(var(--brand-rgb), 0.11), transparent 35%),
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.11), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button {
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: var(--brand);
  color: #fff;
}
button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.muted { color: var(--muted); }
.hidden { display: none !important; }

.ui-fa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  min-width: 1em;
  line-height: 1;
  vertical-align: -0.125em;
}

/* ── Custom scrollbars (webkit) ─────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--line);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 999px;
  opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* ── Toast notification system ───────────────────────────────── */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 10, 98, 0.14);
  font-size: 13px;
  line-height: 1.45;
  pointer-events: all;
  animation: toastSlideIn 0.22s ease forwards;
  position: relative;
  overflow: hidden;
}

.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.toast.toast-success::before { background: var(--toast-success); }
.toast.toast-error::before   { background: var(--toast-error); }
.toast.toast-warn::before    { background: var(--toast-warn); }
.toast.toast-info::before    { background: var(--toast-info); }

.toast-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-text {
  flex: 1;
  color: var(--text);
}

.toast-dismiss {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0;
  margin-top: -1px;
  opacity: 0.6;
  transition: opacity 0.12s;
}

.toast-dismiss:hover {
  opacity: 1;
}

.toast.toast-hide {
  animation: toastSlideOut 0.2s ease forwards;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ───── Letter Card (shared by chat modal + process-trail) ───── */
.letter-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 8px 0 4px;
}
.letter-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.06), rgba(var(--brand-rgb), 0.02));
  border-bottom: 1px solid var(--line);
}
.letter-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.letter-card-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--brand);
  font-size: 14px;
}
.letter-card-heading {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
}
.letter-card-chip {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.08);
  border-radius: 999px;
}
.letter-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.letter-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.letter-copy-btn:hover {
  background: rgba(var(--brand-rgb), 0.06);
  border-color: rgba(var(--brand-rgb), 0.3);
}
.letter-copy-btn i {
  font-size: 11px;
}
.letter-copy-btn-ok {
  background: rgba(var(--ok-rgb), 0.12) !important;
  border-color: rgba(var(--ok-rgb), 0.45) !important;
  color: var(--ok) !important;
}
a.letter-copy-btn { text-decoration: none; }
.letter-copy-btn-outlook,
a.letter-copy-btn.letter-copy-btn-outlook,
a.letter-copy-btn.letter-copy-btn-outlook:visited {
  background: #0078D4;
  border-color: #0078D4;
  color: #fff !important;
}
.letter-copy-btn-outlook:hover,
a.letter-copy-btn.letter-copy-btn-outlook:hover {
  background: #106EBE;
  border-color: #106EBE;
  color: #fff !important;
}
.letter-copy-btn-outlook,
.letter-copy-btn-outlook * { color: #fff !important; }
/* Settlement-notice PDF attachment chip inside the chat letter card. */
.letter-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 8px 12px;
  background: #f0f7f0;
  border: 1px solid #c8e0cc;
  border-left: 3px solid #2d7a3a;
  border-radius: 6px;
  font-size: 12px;
}
.letter-attachment i.fa-paperclip { color: #2d7a3a; }
.letter-attachment .letter-attach-name { font-weight: 600; word-break: break-all; }
.letter-attachment .letter-attach-size { color: var(--muted, #6b7280); font-size: 11px; }
.letter-attachment .letter-attach-download {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 5px;
  background: #2d7a3a;
  color: #fff;
  font-weight: 600;
  font-size: 11.5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.letter-attachment .letter-attach-download:hover { background: #24632d; }
.letter-attachment .letter-attach-download i { color: #fff; }
.letter-headers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--line);
  background: rgba(var(--brand-rgb), 0.015);
  font-size: 12px;
}
.letter-header-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 10px;
}
.letter-header-row > span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.letter-header-row > strong {
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.letter-header-muted {
  font-weight: 400 !important;
  color: var(--muted) !important;
  font-size: 11px;
}
.letter-stale-warning {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.letter-body-wrap {
  padding: 14px 16px 16px;
  background: #fafaf7;
}
.letter-salutation,
.letter-closing,
.letter-signature,
.letter-signature-org {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
}
.letter-salutation {
  margin-bottom: 8px;
}
.letter-closing {
  margin-top: 10px;
}
.letter-signature {
  font-weight: 600;
  margin-top: 4px;
}
.letter-signature-org {
  color: var(--muted);
}
.letter-body {
  margin: 0 0 8px;
  padding: 0;
  font-family: "Segoe UI", "Calibri", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
}
.letter-body .letter-doc-name {
  display: inline-block;
  font-weight: 700;
  color: #0f172a;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #fde68a;
}
@media (max-width: 620px) {
  .letter-card-head {
    flex-direction: column;
    align-items: stretch;
  }
  .letter-header-row {
    grid-template-columns: 70px 1fr;
  }
}

/* ── Powered by Concierto badge ─────────────────────────────────
   Injected via /static/js/powered-by.js in the top-right of every
   page so the platform attribution stays consistent across views.
   Pinned (fixed position) so it doesn't fight any page header
   layout. Translucent background blends with both the light dash
   and the dark agent-page banner. */
.powered-by-concierto {
  position: fixed;
  bottom: 14px;
  right: 16px;
  top: auto;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 10, 98, 0.7);
  letter-spacing: 0.2px;
  pointer-events: none;
  user-select: none;
}
.powered-by-concierto .pbc-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  color: rgba(0, 10, 98, 0.6);
}
.powered-by-concierto .pbc-logo {
  height: 28px;
  width: auto;
  display: block;
}
/* When the badge sits over a dark backdrop (chat page agent banner) the
   palette inverts so the wordmark stays legible. */
body.has-dark-header .powered-by-concierto {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
}
body.has-dark-header .powered-by-concierto .pbc-label {
  color: rgba(255, 255, 255, 0.78);
}
body.has-dark-header .powered-by-concierto .pbc-logo {
  filter: brightness(0) invert(1);
}
/* Chat page variant — pinned top-right of the dark agent banner with a
   little extra breathing room above the wordmark and away from the card
   border so the badge doesn't visually clip into the header edge. */
.powered-by-concierto.powered-by-concierto--chat {
  top: 24px;
  right: 28px;
  bottom: auto;
}
@media (max-width: 720px) {
  .powered-by-concierto .pbc-label { display: none; }
  .powered-by-concierto { padding: 6px 10px; }
  .powered-by-concierto .pbc-logo { height: 22px; }
}