/* ==========================================================================
   components.css — all UI components for EML_SRV
   Naming: BEM — .block, .block__element, .block--modifier, state .is-*
   Depends on tokens.css + base.css.
   ========================================================================== */

/* ============================ SIDEBAR ==================================== */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: width var(--t-base);
}
.app.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--topbar-h);
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.sidebar__logo {
  width: 26px; height: 26px;
  border-radius: var(--r-md);
  background: var(--c-text);
  color: var(--c-text-inverse);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar__brand-text { min-width: 0; overflow: hidden; }
.sidebar__name {
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  letter-spacing: .04em; color: var(--c-text); white-space: nowrap;
}
.sidebar__subtitle {
  font-size: var(--fs-label); color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.app.is-collapsed .sidebar__brand-text { display: none; }

.sidebar__nav { padding: var(--sp-2) 0; flex: 1; }
.sidebar__group-label {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .08em; color: var(--c-text-faint); text-transform: uppercase;
  padding: 10px 18px 4px; white-space: nowrap; overflow: hidden;
}
.app.is-collapsed .sidebar__group-label { text-align: center; padding: 10px 0 4px; }

.sidebar__item {
  display: flex; align-items: center; gap: 10px;
  height: 32px; margin: 1px var(--sp-2);
  padding: 0 10px 0 11px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  color: var(--c-text-secondary);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  background: transparent;
  width: calc(100% - var(--sp-4));
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar__item:hover { background: var(--c-surface-hover); text-decoration: none; }
.sidebar__item-label { flex: 1; white-space: nowrap; }
.sidebar__item-count {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--c-text-muted); background: #f0f1f4;
  border-radius: var(--r-pill); padding: 1px 6px;
}
.sidebar__item.is-active {
  color: var(--c-text); font-weight: var(--fw-semibold);
  background: var(--c-accent-soft);
  border-left-color: var(--c-accent);
  padding-left: 9px;
}
.app.is-collapsed .sidebar__item { justify-content: center; padding: 0; gap: 0; }
.app.is-collapsed .sidebar__item-label,
.app.is-collapsed .sidebar__item-count { display: none; }

.sidebar__footer { border-top: 1px solid var(--c-border); padding: var(--sp-2); flex-shrink: 0; }
.sidebar__collapse {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 30px; padding: 0 11px;
  border: none; background: transparent; border-radius: 7px;
  color: var(--c-text-muted); font-size: var(--fs-body);
}
.sidebar__collapse:hover { background: var(--c-surface-hover); }
.sidebar__collapse-label { flex: 1; text-align: left; white-space: nowrap; }
.app.is-collapsed .sidebar__collapse { justify-content: center; padding: 0; gap: 0; }
.app.is-collapsed .sidebar__collapse-label { display: none; }
.app.is-collapsed .sidebar__collapse .icon { transform: rotate(180deg); }

/* tooltip shown only when collapsed */
.sidebar__item, .sidebar__collapse { position: relative; }
.app.is-collapsed .sidebar__item[data-tip]:hover::after,
.app.is-collapsed .sidebar__collapse[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--c-text); color: var(--c-text-inverse);
  font-size: var(--fs-label); font-weight: var(--fw-medium);
  padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap;
  z-index: var(--z-tooltip); box-shadow: var(--shadow-pop);
}

/* ============================ STAT CARDS ================================= */
.stats { display: flex; gap: 10px; padding: 14px var(--sp-5) 0; }
.stat {
  flex: 1; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 7px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.stat__label {
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-text-muted);
}
.stat__value { font-size: var(--fs-num); font-weight: var(--fw-bold); letter-spacing: .01em; color: var(--c-text); }
.stat__value--muted { color: var(--c-text-secondary); }
.stat__value--warn  { color: var(--c-warn-fg); }
.stat__value--pos   { color: var(--c-pos-fg); }

/* ============================ BUTTONS =================================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h); padding: 0 12px;
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--c-surface-hover); }
.btn .icon { width: 13px; height: 13px; stroke-width: 1.6; }

.btn--primary {
  color: var(--c-text-inverse); background: var(--c-accent);
  border-color: var(--c-accent); font-weight: var(--fw-semibold); padding: 0 13px;
}
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--c-text-secondary); }
.btn--ghost:hover { background: var(--c-surface-hover); }

.btn--danger { color: var(--c-err-fg); border-color: var(--c-err-border); }
.btn--danger:hover { background: #fdf3f3; }

.btn--sm { height: 23px; padding: 0 9px; font-size: var(--fs-label); font-weight: var(--fw-semibold); border-radius: var(--r-sm); }
.btn--sm .icon { width: 11px; height: 11px; stroke-width: 1.7; }

.btn:disabled, .btn.is-disabled { color: var(--c-text-muted); background: var(--c-surface); cursor: not-allowed; opacity: 1; }
.btn--primary:disabled { background: #aebfe9; border-color: #aebfe9; color: #fff; }

/* icon-only square button (edit / delete in tables) */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: var(--c-text-secondary);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-icon:hover { background: var(--c-surface-hover); color: var(--c-text); }
.btn-icon--danger:hover { background: #fdf3f3; color: var(--c-err-fg); border-color: var(--c-err-border); }
.btn-icon .icon { width: 13px; height: 13px; stroke-width: 1.6; }

/* close button (drawers) */
.btn-close {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); background: var(--c-surface);
  border-radius: var(--r-md); color: var(--c-text-secondary);
}
.btn-close:hover { background: var(--c-surface-hover); }
.btn-close .icon { width: 14px; height: 14px; stroke-width: 1.7; }

/* ============================ FORM CONTROLS ============================= */
.field { display: block; }
.field__label {
  display: block; font-size: var(--fs-label); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted);
  margin-bottom: 5px;
}
.field__label-opt { font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; color: var(--c-text-faint); }

.input, .select, .textarea {
  width: 100%; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text);
}
.input, .select { height: var(--control-h); padding: 0 9px; font-size: var(--fs-body); }
.input--mono { font-family: var(--font-mono); font-size: var(--fs-label); }
.textarea { padding: 9px; font-size: var(--fs-body); line-height: var(--lh-loose); resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--c-text-faint); }

/* invalid styling */
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--c-err-border); background: #fffafa; }
.field__error { font-size: var(--fs-label); color: var(--c-err-fg); margin-top: 4px; }

/* select with chevron */
.select-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.select { appearance: none; padding-right: 26px; cursor: pointer; }
.select-wrap .icon {
  position: absolute; right: 9px; pointer-events: none;
  width: 12px; height: 12px; stroke-width: 1.6; color: var(--c-text-muted);
}

/* search input with leading icon */
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 9px; pointer-events: none; width: 13px; height: 13px; stroke-width: 1.7; color: var(--c-text-muted); }
.search .input { padding-left: 28px; }

/* inline labelled select inside toolbar (inbox filter) */
.inline-select { position: relative; display: flex; align-items: center; }
.inline-select > .icon-lead { position: absolute; left: 8px; pointer-events: none; width: 13px; height: 13px; stroke-width: 1.6; color: var(--c-text-muted); }
.inline-select > .icon-trail { position: absolute; right: 8px; pointer-events: none; width: 12px; height: 12px; stroke-width: 1.6; color: var(--c-text-muted); }
.inline-select .select { padding-left: 27px; }

/* ---- toggle switch ---- */
.toggle {
  display: inline-block; position: relative;
  width: 26px; height: 15px; border-radius: var(--r-pill);
  background: var(--c-border-strong); border: none; padding: 0; flex-shrink: 0;
  transition: background var(--t-fast);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left var(--t-fast);
}
.toggle.is-on { background: var(--c-accent); }
.toggle.is-on::after { left: 13px; }
.toggle:disabled { opacity: .5; cursor: not-allowed; }

.toggle-row { display: flex; align-items: center; gap: 7px; font-size: var(--fs-body); color: var(--c-text-secondary); cursor: pointer; }

/* card-style toggle (label + description + switch) */
.toggle-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; border: 1px solid var(--c-border); border-radius: 7px; cursor: pointer;
}
.toggle-card__title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-text); }
.toggle-card__desc  { font-size: var(--fs-label); color: var(--c-text-muted); margin-top: 1px; }

/* ---- checkbox ---- */
.checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--c-text-secondary); cursor: pointer; }
.checkbox__box {
  width: 14px; height: 14px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.checkbox__box .icon { width: 9px; height: 9px; stroke: #fff; stroke-width: 3.2; opacity: 0; }
.checkbox.is-checked .checkbox__box { background: var(--c-accent); border-color: var(--c-accent); }
.checkbox.is-checked .checkbox__box .icon { opacity: 1; }

/* control pill that wraps an inline checkbox/toggle in the toolbar */
.control-pill {
  display: flex; align-items: center; gap: 7px;
  height: var(--control-h); padding: 0 10px;
  font-size: var(--fs-body); color: var(--c-text-secondary);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.control-pill .input { width: 34px; height: 20px; text-align: center; padding: 0; }

/* ============================ BADGES / PILLS ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 18px; padding: 0 8px;
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  border-radius: var(--r-pill); background: var(--c-neutral-bg); color: var(--c-neutral-fg);
  white-space: nowrap;
}
.badge--pos     { background: var(--c-pos-bg);  color: var(--c-pos-fg); }
.badge--warn    { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.badge--err     { background: var(--c-err-bg);  color: var(--c-err-fg); }
.badge--neutral { background: var(--c-neutral-bg); color: var(--c-neutral-fg); }
.badge--outline { background: transparent; color: var(--c-text-muted); border: 1px solid var(--c-border-strong); }
.badge__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.badge__dot--pos  { background: var(--c-dot-pos); }
.badge__dot--warn { background: var(--c-dot-warn); }
.badge__dot--muted{ background: var(--c-dot-muted); }

/* ============================ CARDS ==================================== */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.card--pad { padding: 13px 15px; }
.card__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-text); }
.card__hint  { font-size: var(--fs-label); color: var(--c-text-muted); }

.card--accent { background: var(--c-accent-soft-2); border-color: var(--c-accent-border); border-radius: var(--r-xl); padding: 14px 15px; }

.section-eyebrow {
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-faint);
}
.divider { height: 1px; background: var(--c-border-faint); }

/* ============================ TABLES =================================== */
.table-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 7px; overflow: hidden;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.table-scroll { flex: 1; min-height: 0; }     /* uses .scroll-y */
.table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.table th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--c-surface); text-align: left;
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-text-muted);
  padding: 9px 12px; border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.table td {
  padding: 8px 12px; font-size: var(--fs-body); color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--c-border-faint);
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr:hover { background: var(--c-row-hover); }
.table tbody tr.is-selected { background: var(--c-accent-soft); }
.table .td-mono { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-text-secondary); letter-spacing: -.01em; }
.table .td-num  { text-align: right; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-text-secondary); }
.table .td-strong { font-weight: var(--fw-semibold); }
.td-error-note { font-size: var(--fs-label); color: var(--c-err-fg); margin-top: 4px; white-space: normal; line-height: var(--lh-tight); }

.table-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px; border-top: 1px solid var(--c-border);
  font-size: var(--fs-label); color: var(--c-text-muted);
}
.table-foot__live { display: flex; align-items: center; gap: 5px; }

/* ============================ SEGMENTED CONTROL ======================== */
.segmented { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--c-surface-alt); border-radius: 7px; }
.segmented__btn {
  padding: 0 9px; height: 22px; display: inline-flex; align-items: center;
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  border: none; background: transparent; border-radius: var(--r-sm);
  color: var(--c-text-muted);
}
.segmented__btn.is-active { color: var(--c-text); background: var(--c-surface); box-shadow: var(--shadow-seg); }

/* ============================ STATE BLOCKS ============================= */
.state {
  flex: 1; min-height: 0; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center; padding: 40px;
}
.state__icon {
  width: 46px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #f4f5f7; color: var(--c-text-faint);
}
.state__icon .icon { width: 22px; height: 22px; stroke-width: 1.4; }
.state__icon--err { background: var(--c-err-bg); color: var(--c-err-fg); }
.state__title { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--c-text); }
.state__desc { font-size: var(--fs-label); color: var(--c-text-muted); margin-top: 4px; max-width: 340px; }
.state__actions { display: flex; gap: 7px; }

/* skeleton rows */
.skel-head { display: flex; gap: 12px; padding: 9px 13px; border-bottom: 1px solid var(--c-border); }
.skel-bar { height: 9px; border-radius: 3px; background: var(--c-surface-alt); }
.skel-row { display: flex; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--c-border-faint); animation: eml-skel 1.3s ease-in-out infinite; }
.skel-row .skel-bar { height: 8px; }
.skel-spinner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-top: 1px solid var(--c-border); font-size: var(--fs-label); color: var(--c-text-muted); }
.skel-spinner .icon { animation: eml-spin .8s linear infinite; stroke-width: 2; }
.spin { animation: eml-spin .7s linear infinite; }

/* skeleton card (inquiries) */
.skel-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 15px; animation: eml-skel 1.3s ease-in-out infinite; }

/* ============================ DRAWERS ================================= */
.drawer-host { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer-host.is-open { display: block; }
.drawer-host__scrim { position: absolute; inset: 0; background: rgba(20,26,38,.22); animation: eml-fade var(--t-fast); }
.drawer-host__rail {
  position: absolute; top: 0; right: 0; height: 100vh;
  display: flex; align-items: stretch; max-width: 100vw;
}

.drawer {
  background: var(--c-surface); border-left: 1px solid var(--c-border);
  box-shadow: var(--shadow-drawer); height: 100vh;
  display: flex; flex-direction: column;
  animation: eml-drwr var(--t-base);
}
.drawer--primary { width: 482px; max-width: 94vw; }
.drawer--inquiry { width: 472px; max-width: 54vw; }
.drawer--side    { width: 627px; max-width: 60vw; box-shadow: var(--shadow-drawer-2); animation: eml-drwrL var(--t-base); }

/* Drag handle on the left edge of the rightmost pane — resize the drawer width. */
.drawer-resizer { position: absolute; top: 0; left: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.drawer-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--t-fast); }
.drawer-resizer:hover::after { background: var(--c-accent); }
.drawer-host.is-resizing { cursor: col-resize; }
.drawer-host.is-resizing, .drawer-host.is-resizing * { user-select: none; }
.drawer-host.is-resizing .drawer { animation: none; }

.drawer__head {
  position: sticky; top: 0; z-index: var(--z-sticky); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border); padding: 13px 16px; flex-shrink: 0;
}
.drawer__head-row { display: flex; align-items: flex-start; gap: 10px; }
.drawer__eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.drawer__eyebrow-label { font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-text-faint); }
.drawer__title { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--c-text); line-height: var(--lh-tight); }
.drawer__subtitle { font-size: var(--fs-label); color: var(--c-text-muted); margin-top: 2px; }
.drawer__title-grow { flex: 1; min-width: 0; }
.drawer__body { flex: 1; padding: 14px 16px; overflow-y: auto; overflow-x: hidden; } /* + .scroll-y */
.drawer__foot {
  position: sticky; bottom: 0; background: var(--c-surface);
  border-top: 1px solid var(--c-border); padding: 11px 16px;
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.drawer__foot-spacer { flex: 1; }

/* meta grid (key/value) */
.meta { display: grid; grid-template-columns: 64px 1fr; gap: 7px 12px; font-size: var(--fs-body); }
.meta--narrow { grid-template-columns: 58px 1fr; gap: 6px 12px; }
.meta__k { font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-faint); padding-top: 1px; }
.meta__v { color: var(--c-text); }

/* sub-panel inside drawer (AI analysis / reply / original) */
.panel { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--c-bg); border-bottom: 1px solid var(--c-border);
}
.panel__title { display: flex; align-items: center; gap: 7px; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-text); }
.panel__title .icon { color: var(--c-text-secondary); }
.panel__body { padding: 12px; }

.kv-eyebrow { font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-faint); margin-bottom: 4px; }
.kv-eyebrow + .kv-text { margin-bottom: 11px; }
.kv-text { font-size: var(--fs-body); color: var(--c-text-secondary); line-height: var(--lh-loose); }
.kv-text--strong { color: #3b4250; }
.kv-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 11px; }

/* error box inside analysis */
.errbox { display: flex; gap: 8px; padding: 9px 10px; background: var(--c-err-bg); border: 1px solid var(--c-err-border); border-radius: var(--r-md); margin-bottom: 12px; }
.errbox .icon { color: var(--c-err-fg); flex-shrink: 0; margin-top: 1px; }
.errbox__title { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--c-err-fg); }
.errbox__detail { font-size: var(--fs-label); color: #9a4b43; margin-top: 2px; font-family: var(--font-mono); }

/* notice (remote images blocked / api hint) */
.notice {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--c-info-bg); border: 1px solid var(--c-info-border); border-radius: var(--r-md);
  font-size: var(--fs-label); color: var(--c-info-fg); margin-bottom: 10px;
}
.notice .icon { flex-shrink: 0; }
.notice__grow { flex: 1; }
.notice__action { font-weight: var(--fw-semibold); color: var(--c-accent); cursor: pointer; text-decoration: underline; background: none; border: none; }

/* original message frame (Outlook-like) + sandboxed iframe */
.orig-frame { padding: 10px 12px; background: var(--c-surface-alt); }
.orig-iframe {
  width: 100%; border: 1px solid var(--c-border-strong); border-radius: 5px;
  box-shadow: var(--shadow-card); background: #fff; display: block;
  /* expanded + responsive to viewport height (overrides the fixed attribute) */
  height: clamp(360px, 60vh, 900px);
}
/* in the side-by-side (inquiry) pane, let the original message fill the column */
.drawer--side .orig-iframe { height: clamp(420px, 72vh, 1000px); }

/* extracted-rate confirmation strip (side panel) */
.extract-strip {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; background: var(--c-accent-soft); border: 1px solid var(--c-accent-border);
  border-radius: 7px; margin-bottom: 14px;
}
.extract-strip .icon { color: var(--c-accent); flex-shrink: 0; }
.extract-strip__text { font-size: var(--fs-label); color: var(--c-accent); font-weight: var(--fw-semibold); }

/* ============================ INQUIRY CARDS =========================== */
/* Appearance — palette radio cards. */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-width: 760px; }
.theme-card { position: relative; text-align: left; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 11px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.theme-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-pop); }
.theme-card.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.theme-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* mini UI preview (uses the palette's own colors, inline) */
.theme-preview { height: 44px; border-radius: var(--r-md); border: 1px solid var(--c-border-faint);
  display: flex; align-items: center; gap: 7px; padding: 0 9px; margin-bottom: 2px; }
.theme-preview__btn { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: #fff;
  padding: 3px 9px; border-radius: var(--r-sm); }
.theme-preview__pill { font-size: var(--fs-label); font-weight: var(--fw-semibold);
  padding: 3px 9px; border-radius: var(--r-pill); }
.theme-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-card__name { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--c-text); }
.theme-card__check { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label);
  font-weight: var(--fw-semibold); color: var(--c-accent); }
.theme-card__check svg { width: 13px; height: 13px; }
.theme-card__desc { font-size: var(--fs-label); color: var(--c-text-secondary); line-height: var(--lh-base); }
.theme-card__hex { font-size: var(--fs-label); font-family: var(--font-mono); color: var(--c-text-muted); }

/* Unified Settings screen — horizontal tab bar (one tab per section). */
.settings-tabs { display: flex; gap: 2px; flex-wrap: wrap; flex: 0 0 auto;
  padding: 12px 20px 0; border-bottom: 1px solid var(--c-border); }
.settings-tab { font-size: 12px; font-weight: var(--fw-semibold); color: var(--c-text-muted);
  padding: 8px 14px; border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast); }
.settings-tab:hover { color: var(--c-text); }
.settings-tab.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* Inquiry form — agent picker (chips + search results). */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--fw-semibold);
  background: var(--c-accent-soft); color: var(--c-accent); border: 1px solid var(--c-accent-border);
  border-radius: 999px; padding: 3px 6px 3px 10px; max-width: 100%; }
.chip__x { display: inline-flex; border: none; background: transparent; cursor: pointer; color: inherit; padding: 0; opacity: .7; }
.chip__x:hover { opacity: 1; }
.chip__x svg { width: 13px; height: 13px; }

/* Signature editor + reply composer: never underline links/emails (per spec). */
.sig-editor a, .reply-sig a, .reply-editor a { text-decoration: none !important; }
.sig-editor:focus, .reply-editor:focus { outline: none; border-color: var(--c-accent); }
.sig-editor img, .reply-editor img { max-width: 100%; height: auto; }

/* Attachment indicator inside an email row. */
.att-ico { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--c-text-muted); }
.att-ico svg { width: 13px; height: 13px; }

/* AI-failure warning banner inside an email view. */
.ai-warn { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 14px;
  background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--r-md); color: #9a3412; }
.ai-warn > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.ai-warn__grow { flex: 1; min-width: 0; }
.ai-warn__title { font-weight: var(--fw-semibold); font-size: 12px; }
.ai-warn__detail { font-size: 11px; opacity: .9; word-break: break-word; }

/* Emails screen: date group-header rows + sent/received direction icons. */
.email-group.is-clickable { cursor: pointer; }
.email-group.is-clickable:hover td { background: var(--c-surface-hover); }
.email-group__chev { display: inline-flex; transition: transform .15s; }
.email-group__chev svg { width: 12px; height: 12px; }
.email-group td { background: var(--c-surface-alt); color: var(--c-text-muted); font-size: 10px;
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 14px; border-bottom: 1px solid var(--c-border); }
.dir-ico { display: inline-flex; vertical-align: middle; }
.dir-ico svg { width: 13px; height: 13px; }
.dir-ico--out { color: var(--c-accent); }
.dir-ico--in { color: var(--c-text-muted); }

/* Incoterm radio-group pills (New inquiry form). */
.inco-pill { font-size: 11px; font-weight: var(--fw-semibold); padding: 6px 12px; border: 1px solid var(--c-border);
  border-radius: 999px; background: var(--c-surface); color: var(--c-text-muted); cursor: pointer; }
.inco-pill:hover { border-color: var(--c-accent-border); }
.inco-pill.is-active { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); }

.agent-results { max-height: 200px; overflow-y: auto; border: 1px solid var(--c-border); border-radius: var(--r-md);
  margin-bottom: 8px; display: flex; flex-direction: column; }
.agent-results:empty { display: none; }
.agent-row { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 7px 10px; background: var(--c-surface);
  border: none; border-bottom: 1px solid var(--c-border-faint); cursor: pointer; }
.agent-row:last-child { border-bottom: none; }
.agent-row:hover { background: var(--c-accent-soft); }
.agent-row__name { font-size: 12px; font-weight: var(--fw-semibold); color: var(--c-text); }
.agent-row__mail { font-size: 10px; color: var(--c-text-muted); font-family: var(--font-mono); }

/* Big centered modal (expand email for easier reading). */
.modal-host { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; }
.modal-host[hidden] { display: none; }
.modal-host__scrim { position: absolute; inset: 0; background: rgba(15, 18, 23, .55); backdrop-filter: blur(2px); }
.modal-host__body { position: relative; z-index: 1; display: flex; max-width: 94vw; max-height: 92vh; }
.email-modal.drawer { width: min(1120px, 94vw); height: 92vh; max-width: 94vw; border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.email-modal.drawer .drawer__body { flex: 1; min-height: 0; }
.email-modal .orig-iframe { height: 60vh !important; max-height: none !important; }

/* EN / عربي language toggle for AI text blocks. */
.lang-toggle { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.lang-btn { font-size: 10px; font-weight: var(--fw-semibold); padding: 2px 8px; background: var(--c-surface);
  color: var(--c-text-muted); border: none; cursor: pointer; line-height: 1.6; }
.lang-btn + .lang-btn { border-left: 1px solid var(--c-border); }
.lang-btn.is-active { background: var(--c-accent-soft); color: var(--c-accent); }
.lang-btn:disabled { opacity: .6; cursor: default; }

/* Drawer loading state — centered spinner while detail data is fetched. */
.drawer__loading { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; min-height: 240px; color: var(--c-text-muted); }
.drawer__loading svg { width: 26px; height: 26px; }
.drawer__loading-text { font-size: var(--fs-label); }

.inq-list { display: flex; flex-direction: column; gap: 10px; }

/* Inquiries: card grid (3 columns, responsive down to 1). */
.inq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
@media (max-width: 1240px) { .inq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .inq-grid { grid-template-columns: minmax(0, 1fr); } }
.inq-grid .inq-card__top { flex-wrap: wrap; gap: 6px 8px; }
.inq-grid .inq-card__foot { flex-wrap: wrap; gap: 8px 14px; }

/* Shipments: card grid (4 columns, responsive down to 1). */
.ship-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
@media (max-width: 1540px) { .ship-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1140px) { .ship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ship-grid { grid-template-columns: minmax(0, 1fr); } }
/* Tighter card internals so narrower grid cells don't overflow. */
.ship-grid .inq-card__top { flex-wrap: wrap; gap: 6px 8px; }
.ship-grid .inq-card__foot { flex-wrap: wrap; gap: 8px 14px; }
.inq-card {
  width: 100%; text-align: left; display: block;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 13px 15px; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.inq-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-pop); }
.inq-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.inq-card__ref { font-size: var(--fs-num); font-weight: var(--fw-bold); color: var(--c-text); font-family: var(--font-mono); letter-spacing: -.01em; }
.inq-card__time { font-size: var(--fs-label); color: var(--c-text-faint); font-family: var(--font-mono); }
.inq-card__route { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-route); color: var(--c-text-secondary); margin-bottom: 7px; }
.inq-card__summary { font-size: var(--fs-body); color: var(--c-text-secondary); line-height: var(--lh-base); margin-bottom: 11px; }
.inq-card__foot { display: flex; align-items: center; gap: 18px; padding-top: 10px; border-top: 1px solid var(--c-border-faint); }
.inq-stat { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--c-text-muted); }
.inq-stat strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.inq-card__best { display: flex; align-items: center; gap: 7px; }
.inq-card__best-label { font-size: var(--fs-label); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.inq-card__best-val { font-weight: var(--fw-bold); color: var(--c-accent); }
.inq-card__best-val--none { font-weight: var(--fw-semibold); color: var(--c-text-faint); }
.inq-card__best-src { font-size: var(--fs-label); color: var(--c-text-faint); }

/* best-rate highlighted card in drawer */
.bestrate { border: 1px solid var(--c-accent-border); background: var(--c-accent-soft-2); border-radius: var(--r-xl); padding: 13px 14px; }
.bestrate__eyebrow { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--c-accent); margin-bottom: 9px; }
.bestrate__row { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.bestrate__val { font-size: var(--fs-num); font-weight: var(--fw-bold); color: var(--c-accent); letter-spacing: .01em; }
.bestrate__src { font-size: var(--fs-label); color: var(--c-text-secondary); }
.bestrate__reason { font-size: var(--fs-label); color: var(--c-text-secondary); line-height: var(--lh-loose); }

/* rate comparison helper note */
.table-note { padding: 7px 12px; border-top: 1px solid var(--c-border); font-size: var(--fs-label); color: var(--c-text-faint); background: #fafbfc; }

/* ============================ ACCORDION (by sender) ==================== */
.acc { display: flex; flex-direction: column; gap: 7px; }
.acc__item { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.acc__head {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; background: #fafbfc; border: none; cursor: pointer;
}
.acc__head:hover { background: var(--c-surface-hover); }
.acc__chev { flex-shrink: 0; color: var(--c-text-muted); stroke-width: 1.8; transition: transform var(--t-fast); }
.acc__item.is-open .acc__chev { transform: rotate(180deg); }
.acc__sender { flex: 1; min-width: 0; }
.acc__name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-text); }
.acc__email { font-size: var(--fs-label); color: var(--c-text-faint); }
.acc__meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.acc__count { font-size: var(--fs-label); color: var(--c-text-muted); }
.acc__best { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--c-accent); font-family: var(--font-mono); }
.acc__panel { border-top: 1px solid var(--c-border-faint); display: none; }
.acc__item.is-open .acc__panel { display: block; }
.acc__msg {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px 9px 32px; background: none; border: none;
  border-bottom: 1px solid #f4f5f7; cursor: pointer;
}
.acc__msg:last-child { border-bottom: none; }
.acc__msg:hover { background: var(--c-row-hover); }
.acc__msg-main { flex: 1; min-width: 0; }
.acc__msg-subj { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-text); }
.acc__msg-snip { font-size: var(--fs-label); color: var(--c-text-muted); }
.acc__msg-date { font-size: var(--fs-label); color: var(--c-text-faint); font-family: var(--font-mono); flex-shrink: 0; white-space: nowrap; }

/* ============================ FORM SECTIONS (drawers/screens) ========== */
.form-section-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-text); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; }
.form-section-title .icon { color: var(--c-text-muted); stroke-width: 1.6; }
.form-grid { display: grid; gap: 11px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--host-port { grid-template-columns: 1fr 88px; }
.form-grid--end { align-items: end; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: 11px; }

/* design-tokens reference page helpers */
.ds-grid { display: grid; gap: 10px; }
.swatch { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.swatch__chip { height: 48px; border-bottom: 1px solid var(--c-border-faint); }
.swatch__meta { padding: 8px 10px; }
.swatch__name { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--c-text); }
.swatch__val { font-size: var(--fs-label); color: var(--c-text-muted); font-family: var(--font-mono); }

/* generic content gutter for non-table screens */
.content { flex: 1; min-height: 0; padding: 14px var(--sp-5) 18px; }
.content--narrow { max-width: 760px; }
.caption-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--c-text-muted); }
.caption-row .icon { flex-shrink: 0; stroke-width: 1.5; }

/* ===== auth screens (login / unlock) ===================================== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--c-bg); }
.auth-card { width: 320px; max-width: 92vw; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 24px; box-shadow: 0 10px 34px rgba(20, 30, 50, 0.10); }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.auth-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--c-accent); color: var(--c-text-inverse); display: flex; align-items: center; justify-content: center; }
.auth-logo .icon { width: 16px; height: 16px; }
.auth-name { font-size: 12px; font-weight: 700; color: var(--c-text); }
.auth-sub { font-size: 10px; color: var(--c-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-title { font-size: 12px; font-weight: 600; color: var(--c-text); margin-bottom: 14px; }
.auth-hint { font-size: 10px; color: var(--c-text-muted); margin: -8px 0 14px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-err { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--c-err-fg); background: var(--c-err-bg); border: 1px solid var(--c-err-border); border-radius: 7px; padding: 7px 9px; }
.auth-err .icon { width: 13px; height: 13px; flex: none; }
.auth-link { font-size: 10px; color: var(--c-accent); text-align: center; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-locked-user { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--c-border-faint); border-radius: 8px; }

/* sidebar logged-in user + logout */
.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 8px 6px; margin-top: 6px; }
.sidebar__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: var(--c-text-inverse); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.sidebar__user-info { flex: 1; min-width: 0; overflow: hidden; }
.sidebar__user-name { font-size: 10px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-title { font-size: 10px; color: var(--c-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__logout { background: none; border: none; color: var(--c-text-faint); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.sidebar__logout:hover { background: var(--c-surface-hover); color: var(--c-text); }
.sidebar__logout .icon { width: 14px; height: 14px; }
.app.is-collapsed .sidebar__user-info { display: none; }

/* full-area busy indicator shown while a page fetches its data */
.page-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 60vh; color: var(--c-text-muted); font-size: var(--fs-label); }
.page-loading .icon { width: 16px; height: 16px; }

/* thin top progress bar shown on navigation + page data load */
.topbar-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left center; opacity: 0; z-index: 9999; transition: transform .2s ease, opacity .35s ease; pointer-events: none; }

/* invalid input highlight (e.g. empty required field on add) */
.input--err { border-color: var(--c-err-border) !important; box-shadow: 0 0 0 2px var(--c-err-bg); }

/* collapsible AI Analysis card header */
.panel__head--toggle { cursor: pointer; user-select: none; }
.panel__head--toggle:hover .panel__title { color: var(--c-text); }
.panel__chev { display: inline-flex; align-items: center; transition: transform .15s ease; color: var(--c-text-faint); }
.panel__chev .icon { width: 13px; height: 13px; }

/* ============================ DASHBOARD / CHARTS ======================= */
.dash { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); align-content: start; }
.dash__cell { min-width: 0; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
@media (max-width: 1180px) {
  .col-3 { grid-column: span 6; } .col-4 { grid-column: span 6; }
  .col-5, .col-7, .col-8 { grid-column: span 12; }
}
@media (max-width: 720px) { .dash__cell { grid-column: span 12 !important; } }

/* KPI card */
.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; height: 100%; }
.kpi__label { font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-text-muted); }
.kpi__value { font-size: var(--fs-num); font-weight: var(--fw-bold); letter-spacing: .01em; color: var(--c-text); }
.kpi__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.kpi__delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.kpi__delta .icon { width: 12px; height: 12px; stroke-width: 1.8; }
.kpi__delta--up   { color: var(--c-pos-fg); }
.kpi__delta--down { color: var(--c-err-fg); }
.kpi__hint { font-size: var(--fs-label); color: var(--c-text-faint); }

/* panel header used across dashboard cards */
.chart-card { padding: 14px 15px; height: 100%; display: flex; flex-direction: column; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chart-title { display: flex; align-items: center; gap: 7px; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-text); }
.chart-title .icon { color: var(--c-text-muted); }
.chart-sub { font-size: var(--fs-label); color: var(--c-text-faint); }

/* legend chips */
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--c-text-secondary); }
.legend__swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* column (volume) chart — pure CSS bars */
.colchart { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.colchart__col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; position: relative; }
.colchart__bar { width: 100%; border-radius: 2px 2px 0 0; background: var(--c-surface-alt); transition: opacity var(--t-fast); }
.colchart__bar--primary { background: var(--c-accent); }
.colchart__bar--soft { background: #c9dcfb; }
.colchart__col:hover .colchart__bar { opacity: .82; }
.colchart__axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-label); color: var(--c-text-faint); }

/* horizontal bar list (categories, inboxes, senders) */
.hbar { display: flex; flex-direction: column; gap: 11px; }
.hbar__row { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 10px; }
.hbar__label { font-size: var(--fs-body); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { height: 8px; border-radius: var(--r-pill); background: var(--c-surface-alt); overflow: hidden; }
.hbar__fill { height: 100%; border-radius: var(--r-pill); background: var(--c-accent); }
.hbar__fill--soft { background: #9fc0f6; }
.hbar__val { font-size: var(--fs-label); font-family: var(--font-mono); color: var(--c-text-secondary); text-align: right; }

/* donut (reply mix) */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut { width: 116px; height: 116px; flex-shrink: 0; position: relative; }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut__num { font-size: var(--fs-num); font-weight: var(--fw-bold); color: var(--c-text); }
.donut__cap { font-size: var(--fs-label); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.donut-legend__row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; font-size: var(--fs-label); }
.donut-legend__name { color: var(--c-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend__val { color: var(--c-text); font-weight: var(--fw-semibold); font-family: var(--font-mono); }

/* stacked sentiment bar */
.stackbar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--c-surface-alt); }
.stackbar__seg { height: 100%; }

/* gauge (AI success) */
.gauge { display: flex; align-items: center; gap: 16px; }
.gauge__svg { width: 92px; height: 92px; flex-shrink: 0; }
.gauge__track { stroke: var(--c-surface-alt); }
.gauge__val { stroke: var(--c-accent); stroke-linecap: round; }
.gauge__meta { display: flex; flex-direction: column; gap: 9px; }

/* heatmap */
.heat { display: inline-grid; gap: 4px; }
.heat__rowlabel, .heat__collabel { font-size: var(--fs-label); color: var(--c-text-faint); font-family: var(--font-mono); }
.heat__cell { width: 100%; height: 18px; border-radius: 3px; min-width: 22px; }
.heat__scale { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-label); color: var(--c-text-faint); }
.heat__scale-chip { width: 14px; height: 10px; border-radius: 2px; }

/* mini stat rows (AI panel) */
.ministat { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--c-border-faint); }
.ministat:last-child { border-bottom: none; }
.ministat__k { font-size: var(--fs-label); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ministat__v { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-text); font-family: var(--font-mono); }

/* shipment confirmation-details grid (2 columns) */
.kv-grid--conf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (max-width: 520px) { .kv-grid--conf { grid-template-columns: 1fr; } }

/* shipment "confirmed with agent" banner */
.agent-banner { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 14px;
  background: var(--c-pos-bg); border: 1px solid var(--c-pos-border); border-radius: 8px; }
.agent-banner .icon { width: 15px; height: 15px; color: var(--c-pos-fg); flex: none; }

/* inbox fetch-error alert (fixed, bottom center) */
.alert-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  max-width: 660px; width: calc(100% - 40px);
  background: var(--c-err-bg); border: 1px solid var(--c-err-border); color: var(--c-err-fg);
  border-radius: 9px; padding: 11px 38px 11px 13px; box-shadow: var(--shadow-pop);
  z-index: 9998; display: flex; flex-direction: column; gap: 6px; }
.alert-bar__head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.alert-bar__head .icon { width: 14px; height: 14px; flex: none; }
.alert-bar__row { display: flex; align-items: baseline; gap: 8px; font-size: 10px; padding-left: 22px; }
.alert-bar__acct { font-weight: 600; font-family: var(--font-mono); flex: none; }
.alert-bar__msg { color: var(--c-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-bar__close { position: absolute; top: 7px; right: 7px; background: none; border: none;
  color: var(--c-err-fg); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.alert-bar__close:hover { background: rgba(192,57,43,.1); }
.alert-bar__close .icon { width: 13px; height: 13px; }

/* shipment tracking timeline */
.track { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
.track__item { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; padding: 9px 0; position: relative; }
.track__item:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -9px; width: 1px; background: var(--c-border); }
.track__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); margin: 4px 0 0 3px; flex: none; }
.track__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track__status { font-size: 11px; font-weight: 600; color: var(--c-text); }
.track__meta { font-size: 10px; color: var(--c-text-secondary); }
.track__body .badge { align-self: flex-start; }

/* Latest-tracking strip (shipment cards + drawer header). --ok = has a recent
   update; --missing = amber nudge for Operations to check & update tracking. */
.trk-strip { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border-radius: 8px; text-align: left; }
.trk-strip > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.trk-strip__grow { min-width: 0; flex: 1; }
.trk-strip__status { font-size: 11px; font-weight: var(--fw-semibold); color: var(--c-text); }
.trk-strip__meta { font-size: 10px; color: var(--c-text-secondary); margin-top: 1px; }
.trk-strip--ok { background: var(--c-accent-soft); border: 1px solid var(--c-accent-border); }
.trk-strip--ok > svg { color: var(--c-accent); }
.trk-strip--missing { background: var(--c-warn-bg); border: 1px solid transparent; }
.trk-strip--missing > svg { color: var(--c-warn-fg); }
.trk-strip--missing .trk-strip__status { color: var(--c-warn-fg); }
.trk-strip--missing .trk-strip__meta { color: var(--c-warn-fg); opacity: .85; }

.btn-icon--xs { width: 20px; height: 20px; }
.btn-icon--xs .icon { width: 11px; height: 11px; }

/* muted badge (archived shipments) */
.badge--muted { background: var(--c-surface-alt); color: var(--c-text-muted); }