/* Shared UI kit: modal, confirm dialog, popover, select, tooltip, snackbar, skeleton, spinner, the "New reply" pill
   (`.rply-`, components/reply-mark.js) and email attachment chips (`.matt-`, components/file-item.js).
   Colours only via tokens.css. */

.ic { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.ic svg { width: 16px; height: 16px; }

/* ---- Modal: slides down from the top edge, bottom corners rounded ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--backdrop); opacity: 0;
  display: flex; justify-content: center; align-items: flex-start;
  transition: opacity var(--t-med) var(--ease-enter);
}
.modal-backdrop.is-open { opacity: 1; }
.modal-backdrop.is-closing { opacity: 0; transition: opacity var(--t-med) var(--ease-exit); }
.modal {
  background: var(--bg-surface); box-shadow: var(--shadow-modal);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  max-height: calc(100vh - var(--sp-9)); display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease-enter);
}
.modal-backdrop.is-open .modal { transform: translateY(0); }
.modal-backdrop.is-closing .modal { transform: translateY(-100%); transition: transform var(--t-slow) var(--ease-exit); }
/* UX-005: 48px header, 24px close at 16px from the right; 56px grey footer with a top line. */
.modal-head {
  display: flex; align-items: center; gap: var(--sp-4); flex: none; box-sizing: border-box;
  height: var(--modal-head-h); padding: 0 var(--sp-6); border-bottom: 1px solid var(--border);
}
.modal-title {
  margin: 0; flex: 1; min-width: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-x {
  width: 24px; height: 24px; padding: 0; flex: none; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.modal-x:hover { background: var(--bg-hover); color: var(--text); }
.modal-x:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.modal-body { padding: var(--sp-6); overflow: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); flex: none; box-sizing: border-box;
  height: var(--modal-foot-h); padding: 0 var(--sp-6); border-top: 1px solid var(--border);
  background: var(--modal-foot-bg); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal-foot-left { flex: 1; display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.modal-error { color: var(--red); font-size: var(--fs-sm); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--label-fs); color: var(--text); font-weight: var(--fw-regular); }
/* Placeholders in every form field use the soft grey (UX-005). */
.modal .input::placeholder, .modal textarea::placeholder, .modal .lookup-input::placeholder,
.notif-panel .input::placeholder, .popover .input::placeholder { color: var(--placeholder-soft); }
.modal .select-label.is-placeholder { color: var(--placeholder-soft); }

/* ---- Confirm dialog (Keep editing / Discard) ---- */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: var(--z-confirm);
  background: var(--backdrop); opacity: 0; display: grid; place-items: center;
  transition: opacity var(--t-med) var(--ease-enter);
}
.confirm-backdrop.is-open { opacity: 1; }
.confirm {
  width: min(480px, calc(100vw - 32px)); background: var(--bg-surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal); padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transform: translateY(-8px); transition: transform var(--t-med) var(--ease-enter);
}
.confirm-backdrop.is-open .confirm { transform: none; }
.confirm-title { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.confirm-text { color: var(--text-2); }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); margin-top: var(--sp-5); }

/* ---- Popover: fade + 8px move toward the anchor, 100ms ---- */
.popover {
  position: fixed; z-index: var(--z-popover);
  min-width: 200px;
  background: var(--bg-surface); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow);
  opacity: 0; transition: opacity var(--t-fast) var(--ease-enter), transform var(--t-fast) var(--ease-enter);
}
.popover[data-side="bottom"] { transform: translateY(-8px); }
.popover[data-side="top"] { transform: translateY(8px); }
.popover[data-side="right"] { transform: translateX(-8px); }
.popover[data-side="left"] { transform: translateX(8px); }
.popover.is-open { opacity: 1; transform: none; }
.popover.is-closing { opacity: 0; }

/* Menu rows inside popovers (More flyout, "..." menus, split-button menus): full-width rows,
   no inset pills; hover and keyboard focus = the shared solid blue menu row. */
.menu { list-style: none; margin: 0; padding: var(--sp-4) 0; display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%;
  min-height: var(--menu-row-h); padding: 0 var(--sp-6); border: 0; border-radius: 0;
  background: none; color: var(--text); text-align: left; cursor: pointer; text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible, .menu-item.is-highlighted {
  background: var(--menu-hover-bg); color: var(--menu-hover-text); text-decoration: none; outline: none;
}
.menu-item svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
.menu-item:hover svg, .menu-item:focus-visible svg, .menu-item.is-highlighted svg { color: var(--menu-hover-text); }
.menu-item:disabled, .menu-item[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.menu-item:disabled:hover, .menu-item[aria-disabled="true"]:hover { background: none; color: var(--text-muted); }
.menu-item:disabled svg { color: var(--text-muted); }
.menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-divider { height: 1px; margin: var(--sp-4) 0; background: var(--border); flex: none; }
.menu-pill {
  margin-left: auto; flex: none; height: 18px; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  background: var(--menu-pill-bg); color: var(--text-inverse);
  font-size: 10px; line-height: 18px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.3px;
}
.menu-item:hover .menu-pill, .menu-item:focus-visible .menu-pill { background: var(--text-inverse); color: var(--menu-hover-bg); }

/* ---- Select ---- */
.select-trigger {
  display: inline-flex; align-items: center; gap: var(--sp-4); width: 100%;
  height: var(--control-h); padding: 0 var(--sp-5) 0 var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface);
  box-shadow: var(--shadow-button); cursor: pointer; text-align: left;
}
.select-trigger:hover { border-color: var(--border-strong); }
.select-trigger:focus-visible, .select-trigger.is-open { border-color: var(--border-focus); outline: none; }
.select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-label.is-placeholder { color: var(--text-muted); }
.select-caret { display: inline-grid; place-items: center; flex: none; width: 8px; height: 8px; color: var(--text); }
.select-caret svg { width: 8px; height: 8px; }
.select-trigger:disabled { background: var(--field-disabled-bg); cursor: default; color: var(--text-muted); }
.select-trigger:disabled .select-caret { color: var(--text-muted); }
.select-box { padding: var(--sp-4) 0; display: flex; flex-direction: column; gap: var(--sp-4); max-width: 360px; }
.select-search { height: var(--control-h); margin: 0 var(--sp-4); width: auto; }
.select-list { list-style: none; margin: 0; padding: 0; max-height: 272px; overflow: auto; outline: none; }
.select-option {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--menu-option-h); padding: 0 var(--sp-6); border-radius: 0; cursor: pointer;
}
.select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-option.is-selected { font-weight: var(--fw-semibold); }
/* BUG-152: the check is a fixed 16px box that never shrinks, however long the option label is. */
.select-check {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px;
  color: var(--menu-check); margin-left: auto; margin-right: calc(var(--sp-5) - var(--sp-6));
}
.select-check svg { width: 16px; height: 16px; display: block; }
.select-option.is-selected:not(.is-highlighted) { background: none; }
.select-option.is-highlighted { background: var(--menu-hover-bg); color: var(--menu-hover-text); }
.select-option.is-highlighted .select-check { color: var(--menu-hover-text); }
.select-empty { padding: var(--sp-3) var(--sp-6); color: var(--text-muted); }

/* ---- Tooltip ---- */
.tooltip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  max-width: 280px; padding: var(--sp-2) var(--sp-4);
  background: var(--tooltip-bg); color: var(--text-inverse); border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold);
  opacity: 0; transition: opacity var(--t-fast) var(--ease-enter);
}
.tooltip.is-open { opacity: 1; }
.tooltip-key {
  min-width: 16px; height: 16px; padding: 0 var(--sp-2); border-radius: var(--r-sm);
  background: var(--tooltip-key-bg); display: inline-grid; place-items: center; font-size: var(--fs-xs);
}

/* ---- Snackbar (toast): bottom-left, slides up 400ms ---- */
.toasts {
  position: fixed; left: var(--sp-7); bottom: var(--sp-7); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-4); pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 288px; max-width: 568px; min-height: 48px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
  background: var(--bg-dark); color: var(--text-inverse); border-radius: var(--r-md);
  box-shadow: var(--shadow-floating);
  display: flex; align-items: center; gap: var(--sp-4);
  animation: toast-in var(--t-toast) ease;
  transition: opacity 200ms var(--ease-exit), transform 200ms var(--ease-exit);
}
.toast.is-leaving { opacity: 0; transform: translateY(16px); }
.toast-text { flex: 1; min-width: 0; }
.toast .toast-action {
  background: none; border: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  color: var(--blue-toast-link); font-weight: var(--fw-semibold); cursor: pointer;
}
.toast .toast-action:hover { background: rgba(255, 255, 255, 0.08); }
.toast .toast-close {
  width: var(--control-h); height: var(--control-h); border: 0; border-radius: var(--r-md);
  background: none; color: var(--text-inverse); display: grid; place-items: center; cursor: pointer; opacity: 0.8;
}
.toast .toast-close:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }
.toast .toast-close svg { width: 16px; height: 16px; }
/* A second line under the message (toast(msg, {below})): e.g. the Leads list's optional "Why the change?". */
.toast.has-below { flex-wrap: wrap; }
.toast .toast-below { flex-basis: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 0 var(--sp-2); }
@keyframes toast-in { from { transform: translateY(100px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Skeleton + spinner ---- */
.skeleton { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) 0; }
.skeleton-bar {
  height: 12px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.spinner {
  display: inline-block; flex: none; border-radius: 50%;
  border: 2px solid var(--skeleton-base); border-top-color: var(--green);
  animation: spin 2s cubic-bezier(0.5, 0.1, 0.3, 0.9) infinite;
}
.spinner.spinner-on-green { border-color: rgba(255, 255, 255, 0.35); border-top-color: var(--text-inverse); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .modal, .popover, .confirm, .toast, .modal-backdrop, .confirm-backdrop { transition: none; animation: none; }
}

/* ---- Kit test page ---- */
.kit-grid { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }
.kit-card {
  background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-raised);
  padding: var(--sp-6); width: 300px; display: flex; flex-direction: column; gap: var(--sp-5);
}
.kit-card h3 { margin: 0; font-size: var(--fs-lg); }
.kit-tip { align-self: flex-start; padding: var(--sp-2) var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.modal-fields { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ---- "New reply" pill (Build A, components/reply-mark.js): same size as the NEW pill so rows don't jump ---- */
.rply-pill {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--reply-blue); color: var(--text-inverse);
  font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold); letter-spacing: 0.03em; text-transform: uppercase;
}
.rply-pill .rply-ic, .rply-pill .rply-ic svg { width: 10px; height: 10px; display: block; }
.rply-title { display: inline-flex; align-items: center; gap: var(--sp-4); min-width: 0; max-width: 100%; }
.rply-title > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rply-row-bold { font-weight: var(--fw-semibold); }

/* ---- Email attachment chips (History email item + Mail reading pane; components/file-item.js) ---- */
.matt-list { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); }
.matt-chip {
  display: inline-flex; align-items: center; gap: var(--sp-3); box-sizing: border-box; height: 28px; max-width: 100%;
  padding: 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface);
  text-decoration: none; color: var(--link);
}
.matt-chip:hover { background: var(--bg-hover); }
.matt-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.matt-chip .ic, .matt-chip .ic svg { width: 14px; height: 14px; color: var(--text-2); }
.matt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--link); }
.matt-size { flex: none; color: var(--text-muted); font-size: var(--fs-sm); }
.matt-missing { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
/* A client document is missing: readable --text-2 with an amber warning icon in front, not pale grey (fix round). */
.matt-missing-line { display: flex; align-items: flex-start; gap: var(--sp-2); }
.matt-missing-line .matt-warn-ic, .matt-missing-line .matt-warn-ic svg { flex: none; width: 14px; height: 14px; color: var(--yellow-icon); }
.matt-missing-line .matt-warn-ic { margin-top: 1px; }
.matt-clip { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; color: var(--text-2); font-size: var(--fs-sm); }
.matt-clip .ic, .matt-clip .ic svg { width: 14px; height: 14px; }