/* dsign Xchange portal — layered on top of /portal/static/css/portal.css */

* { box-sizing: border-box; }
body { margin: 0; background: #eef1f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1e293b; }

/* ── Header ──────────────────────────────────────────────── */
.xc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px; background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: #fff; box-shadow: 0 2px 12px rgba(30, 58, 138, 0.25);
}
.xc-brand { display: flex; align-items: center; gap: 10px; }
.xc-brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
}
.xc-brand-mark svg { width: 23px; height: 23px; }
.xc-brand-text { font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.xc-brand-accent { color: #93c5fd; font-weight: 400; }

.xc-user { display: flex; align-items: center; gap: 14px; }

/* Header menu dropdown (Templates + future actions). position:relative here
   is enough — unlike the row "…" menu further down, the header is not inside
   an overflow:hidden card, so this can stay nested instead of being appended
   to document.body. */
.xc-menu { position: relative; display: inline-flex; }
.xc-menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: #fff; border: 1px solid #e2e5ea; border-radius: 9px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.16); padding: 5px; min-width: 190px;
}
.xc-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 9px 11px; border-radius: 6px; font-size: 13.5px; color: #1e293b;
  font-family: inherit;
}
.xc-menu-item:hover { background: #eff6ff; color: #1e40af; }
.xc-menu-sep { height: 1px; background: #e9edf2; margin: 5px 4px; }
.xc-menu-item-danger { color: #b42318; }
.xc-menu-item-danger:hover { background: #fef2f2; color: #991b1b; }
.xc-user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.xc-user-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.xc-user-avatar:empty { display: none; }
/* Name over email (2026-09-07). line-height is tightened because the chip
   now holds two stacked lines inside a fixed-height header — the default
   spacing made it taller than the header's other controls. */
.xc-user-identity { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.xc-user-name { opacity: 0.95; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-user-email {
  font-size: 11px; opacity: 0.7; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xc-user-email:empty { display: none; }

.xc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 7px; border: 1px solid #d0d5dd; background: #fff;
  cursor: pointer; font-size: 13px; font-weight: 600; color: #334155;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.xc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,23,42,.08); }
.xc-btn:active { transform: translateY(0); }
.xc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.xc-btn-primary { background: linear-gradient(135deg, #1e40af, #2563eb); border-color: #1e40af; color: #fff; }
.xc-btn-primary:hover { box-shadow: 0 6px 16px rgba(37,99,235,.3); }
.xc-btn-secondary { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.xc-btn-danger { background: #fff; border-color: #dc2626; color: #dc2626; }
.xc-btn-danger:hover { background: #fef2f2; }
.xc-btn-ghost { background: transparent; border: none; color: rgba(255,255,255,.85); box-shadow: none; }
.xc-btn-ghost:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.xc-detail-panel .xc-btn-ghost { color: #64748b; }
.xc-detail-panel .xc-btn-ghost:hover { background: #f1f5f9; }
/* Same override, for the ghost buttons that now live in the permanent
   preview pane instead of a .xc-detail-panel modal (2026-09-02) — Close,
   Details, and every step's Cancel/Resend button. Without this they'd
   inherit the base .xc-btn-ghost color meant for the dark header bar
   (near-white), unreadable against this pane's white background. */
.xc-preview-pane .xc-btn-ghost { color: #64748b; }
.xc-preview-pane .xc-btn-ghost:hover { background: #f1f5f9; }

.xc-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
  background: #dc2626; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}
.xc-badge:empty { display: none; }
/* Blue variant (2026-09-02 feedback) — red is reserved for "needs your
   signature" (To Sign subfolder); Inbox/Sent top-level counts and the
   per-sender Inbox subfolders are informational, not an action prompt. */
.xc-badge.xc-badge-info { background: #2563eb; }

/* ── Outlook-style 3-pane shell (2026-09-02) ─────────────────
   sidebar (folders) / list (items in the selected folder) / preview
   (Preview & Sign, permanently mounted instead of a modal overlay).
   data-active-pane drives the narrow-screen single-pane fallback — see
   @media below; ignored at desktop widths, where the grid just shows all
   three columns at once. */
.xc-shell {
  display: grid; grid-template-columns: 220px 360px 1fr;
  height: calc(100vh - 61px); /* 61px ≈ .xc-header height */
  max-width: 1600px; margin: 0 auto;
}

/* .xc-alert stays the INLINE, in-context message style — the error shown
   next to the OTP field, inside the compose/template modals, the "preview not
   available" note, etc. Transient app-wide feedback is a toast instead (see
   .xc-toasts below); the two were the same element until 2026-09-07. */
.xc-alert { padding: 11px 15px; border-radius: 8px; margin: 12px 26px 0; font-size: 13px; font-weight: 500; }
.xc-alert.error { background: #fee2e2; color: #991b1b; }
.xc-alert.success { background: #dcfce7; color: #166534; }
.xc-alert.warning { background: #fef3c7; color: #92400e; }

/* ── Toast notifications (2026-09-07) ─────────────────────────
   One channel for every transient message (showAlert() in app.js). Was a
   banner in normal flow between the header and the shell, so each message
   pushed the entire layout down and let it snap back when it timed out.
   Fixed-position now — nothing reflows. z-index sits above .xc-overlay
   (1000) and the row "…" menu (2000) so a toast triggered by an action
   inside a modal is still visible. The container ignores pointer events so
   it never blocks clicks on whatever is underneath; individual toasts take
   them back, to be dismissable. */
.xc-toasts {
  position: fixed; top: 14px; right: 14px; z-index: 3000;
  display: flex; flex-direction: column; gap: 8px;
  width: min(380px, calc(100vw - 28px));
  pointer-events: none;
}
.xc-toast {
  pointer-events: auto; cursor: pointer;
  padding: 11px 15px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1px solid transparent; box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  overflow-wrap: anywhere;
  animation: xc-toast-in .18s ease-out;
}
.xc-toast.success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.xc-toast.error   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.xc-toast.warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.xc-toast.xc-toast-out { animation: xc-toast-out .18s ease-in forwards; }

/* Enters by dropping in from above, so a new toast reads as arriving into
   the stack rather than blinking into place. */
@keyframes xc-toast-in  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes xc-toast-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .xc-toast, .xc-toast.xc-toast-out { animation: none; }
}

/* ── Confirmation dialog (2026-09-07) ─────────────────────────
   Replaces native confirm(). Narrower than the standard .xc-detail-panel
   (which is sized for document/timeline content) — a question with two
   answers shouldn't occupy a 560px sheet. */
.xc-confirm-panel { width: min(440px, 100%); padding: 24px 26px; }
.xc-confirm-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #0f172a; }
.xc-confirm-message { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #475569; }
.xc-confirm-message:empty { display: none; }
/* Confirm sits last (right) — the standard position for the action being
   asked about; Cancel keeps the quieter secondary treatment. */
.xc-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.xc-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 90px 20px; color: #94a3b8; text-align: center;
}
.xc-empty svg { color: #cbd5e1; }
.xc-empty p { font-size: 14px; font-weight: 500; margin: 0; }

/* ── Pane 1: sidebar (folder nav tree) ──────────────────────── */
.xc-sidebar {
  background: #fff; border-right: 1px solid #e2e5ea; overflow-y: auto;
  padding: 10px 8px;
}
.xc-compose-btn { width: 100%; margin-bottom: 10px; }
.xc-nav { list-style: none; margin: 0; padding: 0; }
.xc-nav-item { margin-bottom: 1px; }
.xc-nav-row { display: flex; align-items: center; gap: 2px; }
.xc-nav-expand {
  flex-shrink: 0; width: 20px; height: 26px; padding: 0; border: none; background: none;
  cursor: pointer; color: #94a3b8; display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.xc-nav-expand svg { transform: rotate(90deg); transition: transform .12s ease; }
.xc-nav-expand.xc-collapsed svg { transform: rotate(0deg); }
.xc-nav-expand:hover { color: #1e40af; background: #eff6ff; }
.xc-nav-expand-spacer { flex-shrink: 0; width: 20px; }
/* Compact pass (2026-09-03 feedback): font-size/padding/icon size all
   trimmed down together so the row shrinks as a unit instead of just
   looking cramped — icon size overrides the 15x15 baked into each SVG's own
   width/height attribute in index.html (CSS wins over presentation attrs). */
.xc-nav-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border: none; background: none; cursor: pointer; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: #475569; text-align: left;
}
.xc-nav-link:hover { background: #f1f5f9; }
/* Bold marks the currently-open item only — every row used to be bold
   regardless of selection, so nothing stood out (2026-09-02 feedback). */
.xc-nav-link.active { background: #eff6ff; color: #1e40af; font-weight: 700; }
.xc-nav-link svg { opacity: .8; flex-shrink: 0; width: 13px; height: 13px; }
.xc-nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Indented well past where the parent row's own icon starts (20px expand
   button + 8px link padding = 28px) so sub-items read as clearly nested
   under Inbox rather than flush with it (2026-09-02 feedback — 24px wasn't
   enough once the subitem's own padding was added on top, it landed at the
   same visual column as the parent's icon). */
.xc-nav-subitems {
  list-style: none; margin: 1px 0 3px; padding: 0 0 0 38px;
}
.xc-nav-subitems.xc-collapsed { display: none; }
.xc-nav-subitem {
  display: flex; align-items: center; gap: 5px; width: 100%; text-align: left;
  padding: 5px 8px; border: none; background: none; cursor: pointer; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; color: #64748b;
}
.xc-nav-subitem:hover { background: #f1f5f9; color: #1e40af; }
.xc-nav-subitem.active { background: #eff6ff; color: #1e40af; font-weight: 700; }
.xc-nav-subitem .xc-nav-label { flex: 1 1 auto; }
.xc-subfolder-count { color: #94a3b8; font-weight: 700; flex-shrink: 0; }
.xc-nav-subitem.active .xc-subfolder-count { color: #2563eb; }
.xc-subfolder-unread {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 14px; height: 14px; padding: 0 4px;
  background: #dc2626; color: #fff; border-radius: 999px; font-size: 9px; font-weight: 700;
}
/* Blue variant (2026-09-02 feedback) — see .xc-badge-info above; used for
   per-sender subfolders so a to-sign item's red badge (already shown once on
   To Sign) doesn't also read as urgent a second time under its sender's row. */
.xc-subfolder-unread.xc-subfolder-unread-info { background: #2563eb; }

/* ── Pane 2: item list ───────────────────────────────────────── */
.xc-list-pane { background: #f8fafc; border-right: 1px solid #e2e5ea; overflow-y: auto; }
/* Sticky, not a separate flex row above a scrolling list — .xc-list-pane
   stays a single scroll container (simplest, no extra wrapper needed) and
   this just pins itself to the top of it as the list scrolls underneath. */
.xc-search-bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e5ea; color: #94a3b8;
}
.xc-search-bar svg { flex-shrink: 0; }
/* Fills all remaining space up to the All/Unread filters (2026-09-02 —
   an earlier fixed 120px basis left the box sitting around half the
   column's width with dead space before the filters). */
.xc-search-input {
  flex: 1 1 auto; min-width: 40px; border: none; background: none; outline: none;
  font-size: 13px; font-family: inherit; color: #1e293b;
  /* Explicit: the box carries `readonly` until first focus (anti-autofill,
     see index.html), which would otherwise give it a default arrow cursor
     and read as disabled. */
  cursor: text;
}
.xc-search-input::placeholder { color: #94a3b8; }
/* Chrome-autofill detection hook (2026-09-02) — Chrome applies
   :-webkit-autofill the instant it fills a field, so attaching an animation
   to it gives us an `animationstart` event at exactly that moment. app.js
   listens for animationName === 'xcAutofillStart' and clears the box
   synchronously. The animation itself is intentionally a no-op (it only
   needs to exist and fire); the real prevention is the `readonly` attribute
   in index.html — this is the fallback for any fill that still lands.
   Also neutralises Chrome's yellow autofill background, which would
   otherwise flash even though the text is cleared. */
@keyframes xcAutofillStart { from { opacity: 1; } to { opacity: 1; } }
.xc-search-input:-webkit-autofill {
  animation-name: xcAutofillStart; animation-duration: .001s;
  -webkit-text-fill-color: #1e293b;
  box-shadow: 0 0 0 1000px #f8fafc inset;
}
/* All/Unread — apply on top of whatever search/subfolder already filtered
   to (2026-09-02). No margin-left:auto needed — the input's own flex:1
   already consumes all remaining space, so these naturally end up flush
   against the bar's right edge. */
.xc-list-filters { display: flex; gap: 2px; flex-shrink: 0; }
.xc-list-filter {
  border: none; background: none; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  font-size: 12px; font-style: italic; font-weight: 500; color: #94a3b8; font-family: inherit;
}
.xc-list-filter:hover { background: #eef2f7; color: #475569; }
.xc-list-filter.active { font-weight: 700; color: #1e40af; }
.xc-item-list { list-style: none; margin: 0; padding: 0; }
.xc-item-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid #eef0f4; cursor: pointer; background: #fff;
  transition: background .1s;
}
.xc-item-row:hover { background: #f8fafc; }
/* Unread (status still 'delivered') — matches the definition already used
   for the folder/subfolder unread badge counts, so a row's shading and the
   number pointing at it always agree. */
.xc-item-row.xc-unread { background: #e2e8f0; }
.xc-item-row.xc-unread:hover { background: #d7dfe9; }
/* Currently open in the preview pane (2026-09-02) — declared after .xc-unread
   so it wins when a row happens to be both (e.g. the instant after clicking
   an unread row, just before it's marked seen and re-rendered). */
.xc-item-row.xc-selected, .xc-item-row.xc-selected:hover {
  background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb;
}
.xc-item-main { min-width: 0; flex: 1 1 auto; }
.xc-item-title {
  font-weight: 600; color: #1e293b; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xc-item-subtitle {
  margin-top: 4px; font-size: 12px; color: #94a3b8; line-height: 1.5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
}
.xc-darhiv-link { color: #2563eb; }
.xc-item-side {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.xc-item-date { font-size: 11.5px; color: #1e293b; white-space: nowrap; }
.xc-item-date.xc-deadline-overdue { color: #dc2626; font-weight: 700; }

.xc-row-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.xc-row-action {
  background: none; border: none; cursor: pointer; padding: 5px; border-radius: 6px;
  color: #94a3b8; display: inline-flex; flex-shrink: 0;
}
.xc-row-action:hover { color: #1e40af; background: #eff6ff; }
.xc-row-delete {
  background: none; border: none; cursor: pointer; padding: 5px; border-radius: 6px;
  color: #cbd5e1; display: inline-flex; flex-shrink: 0;
}
.xc-row-delete:hover { color: #dc2626; background: #fef2f2; }

/* Per-row expand-arrow flyout trigger (2026-09-04, plan §4.4) — same
   rotating-triangle visual idiom as .xc-nav-expand in the sidebar, but this
   one opens the shared floating _openRowMenu() flyout (send/receive-only
   actions), not an inline expand/collapse of a sibling list. Visible on
   desktop too, unlike .xc-row-more-btn below which is mobile-only. */
.xc-row-expand-arrow svg { transform: rotate(90deg); }
.xc-row-expand-arrow.xc-open svg { transform: rotate(0deg); }

/* Unused since 2026-09-05 (the list-pane title shows the envelope's own
   subject now, not a filename + count suffix — see _formatDocumentsTitle())
   — kept in case a future "+N more" style element wants the same look. */
.xc-doc-count { color: #94a3b8; font-weight: 500; font-size: 12px; }

/* Icon strip above the preview pane (2026-09-04, plan §4.3) — one pill per
   document in a multi-document envelope; hidden entirely (see index.html)
   when there's only one, so the single-document case looks pixel-identical
   to before. Compacted (2026-09-05 feedback) — this row was taking more
   vertical space than the document identity it represents warrants. */
.xc-doc-strip {
  display: flex; gap: 5px; flex-wrap: wrap; padding: 5px 0; margin-bottom: 4px;
  border-bottom: 1px solid #eef0f4;
}
.xc-doc-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 1px solid #d0d5dd; border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 11.5px; font-weight: 500; color: #475569; max-width: 220px;
}
.xc-doc-pill:hover { background: #f8fafc; border-color: #bfdbfe; }
.xc-doc-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-doc-pill-active { background: #eff6ff; border-color: #2563eb; color: #1e40af; }
.xc-doc-pill-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; flex-shrink: 0; font-size: 9px; color: #94a3b8;
}
.xc-doc-pill-status.xc-doc-pill-signed {
  background: #16a34a; color: #fff; border-radius: 999px;
}
.xc-doc-pill-status.xc-doc-pill-needed {
  background: #1e3a8a; color: #fff; border-radius: 999px;
}

/* "Actions" trigger — hidden on desktop (the icon row above is used
   instead), shown in its place on narrow screens (see @media below).
   Deliberately a solid, bordered button (not a bare icon) so it reads as
   tappable at a glance — a row of near-invisible dots was easy to miss. */
.xc-row-more { display: none; }
.xc-row-more-btn {
  background: #f1f5f9; border: 1px solid #e2e5ea; cursor: pointer; border-radius: 7px;
  color: #475569; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
}
.xc-row-more-btn:hover, .xc-row-more-btn.xc-open { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
/* Rendered as a SINGLE shared element appended to document.body (see
   _openRowMenu() in app.js) and positioned via getBoundingClientRect(),
   instead of nested + position:absolute under the button — .xc-list-pane
   has overflow-y:auto, which clipped the menu's lower items whenever a row
   was near the bottom of the list. */
.xc-row-menu {
  display: none; position: fixed;
  background: #fff; border: 1px solid #e2e5ea; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.16); min-width: 170px; overflow: hidden; z-index: 2000;
}
.xc-row-menu.xc-open { display: block; }
.xc-row-menu-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: none; cursor: pointer; font-size: 13px; color: #334155;
}
.xc-row-menu-item:hover { background: #f8fafc; }
.xc-row-menu-item.xc-row-menu-item-danger { color: #dc2626; }

/* Detail header's "Options" dropdown (2026-09-06) — same visual language as
   .xc-row-menu above, but anchored (position:absolute, not the shared fixed
   element pattern) since this one lives inline in the header bar rather than
   needing to escape a scroll-clipping ancestor. */
.xc-detail-more-wrap { position: relative; display: inline-block; }
.xc-detail-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e2e5ea; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.16); min-width: 210px;
  padding: 6px; z-index: 40; flex-direction: column; gap: 2px;
}
.xc-detail-more-menu .xc-btn {
  width: 100%; justify-content: flex-start; border: none; box-shadow: none;
  border-radius: 6px; padding: 9px 10px;
}
.xc-detail-more-menu .xc-btn:hover { transform: none; box-shadow: none; background: #f8fafc; }

.xc-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.xc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xc-status-delivered { background: #dbeafe; color: #1e40af; }
.xc-status-opened { background: #e0e7ff; color: #3730a3; }
.xc-status-signing { background: #fef3c7; color: #92400e; }
.xc-status-signed, .xc-status-returned { background: #dcfce7; color: #166534; }
.xc-status-expired { background: #fee2e2; color: #991b1b; }
.xc-status-cancelled, .xc-status-purged { background: #f1f5f9; color: #64748b; }
.xc-status-rejected { background: #fee2e2; color: #991b1b; }
.xc-status-queued { background: #f1f5f9; color: #64748b; }
.xc-status-draft { background: #f1f5f9; color: #64748b; }
.xc-status-bounced { background: #fee2e2; color: #991b1b; }

.xc-deadline-overdue { color: #dc2626; font-weight: 700; }

/* ── Envelope signing-order timeline (2+ recipients on one send) ──────── */
.xc-timeline { display: flex; overflow-x: auto; padding: 4px 0 12px; margin-bottom: 4px; }
.xc-timeline-step { display: flex; flex-direction: column; align-items: center; flex: 1 0 92px; min-width: 92px; position: relative; }
.xc-timeline-step:not(:first-child)::before {
  content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px;
  background: #e2e8f0; z-index: 0;
}
.xc-timeline-step.xc-tl-signed:not(:first-child)::before,
.xc-timeline-step.xc-tl-queued:not(:first-child)::before { background: #e2e8f0; }
.xc-timeline-dot {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; z-index: 1; border: 3px solid #fff; box-shadow: 0 0 0 1px #e2e8f0;
}
.xc-tl-signed .xc-timeline-dot { background: #16a34a; }
.xc-tl-waiting .xc-timeline-dot { background: #f59e0b; }
.xc-tl-sent .xc-timeline-dot { background: #2563eb; }
.xc-tl-queued .xc-timeline-dot { background: #cbd5e1; }
.xc-tl-blocked .xc-timeline-dot { background: #dc2626; }
.xc-timeline-name {
  margin-top: 6px; font-size: 11.5px; color: #475569; text-align: center; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xc-timeline-name.xc-tl-viewer { font-weight: 700; color: #1e293b; }
.xc-timeline-status { font-size: 10.5px; color: #94a3b8; text-align: center; margin-top: 1px; }
.xc-timeline-meta { font-size: 12px; color: #64748b; margin: -6px 0 8px; }

/* ── Pane 3: preview & sign ─────────────────────────────────
   Permanently mounted (2026-09-02) — was a modal overlay (#xc-detail-overlay)
   before; the exact same inner elements/logic now live here instead, shown/
   hidden via #xc-preview-empty ↔ #xc-preview-content rather than an
   overlay's display toggle. */
.xc-preview-pane {
  overflow-y: auto; background: #fff; padding: 22px 28px; position: relative;
  display: flex; flex-direction: column;
}
.xc-preview-pane .xc-empty { padding: 0; height: 100%; justify-content: center; flex: 1 1 auto; }
/* #xc-preview-content is the flex item that actually holds the header bar +
   document + steps (#xc-preview-empty is its sibling, shown instead until
   something is selected) — it needs to BE a flex column itself so
   #xc-preview-pages (flex:1 1 auto, min-height:0 — see further below) can
   grow to fill whatever space the header + current step's own controls
   don't need, instead of a fixed vh guess. The document is the most
   important thing to see while confirming/signing, so it gets the space,
   and the controls just sit anchored at the bottom (per the user,
   2026-08-30, originally for the old modal — same reasoning applies here). */
#xc-preview-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Header compacted (2026-09-05 feedback) — this bar + the doc strip below it
   were eating too much of the vertical space the actual document preview
   should get; every dimension here is intentionally tighter than the
   .xc-detail-panel modal's own (larger) heading styles elsewhere in this
   file, which stay untouched. */
.xc-detail-header-bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #eef0f4;
}
.xc-detail-header-info { min-width: 0; flex: 1 1 320px; }
.xc-detail-header-info h2 { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; color: #0f172a; }
.xc-detail-meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px;
  font-size: 11px; color: #64748b;
}
.xc-detail-meta-item strong { color: #1e293b; font-weight: 600; }
.xc-detail-meta-item.xc-deadline-overdue, .xc-detail-meta-item.xc-deadline-overdue strong { color: #dc2626; }
.xc-detail-header-bar .xc-detail-actions { margin: 0; flex: 0 1 auto; justify-content: flex-end; }
/* Smaller than the base .xc-btn used elsewhere (Compose/Templates modals
   etc., deliberately untouched) — scoped to just this header's own action
   row so the size reduction doesn't leak into unrelated buttons. */
.xc-detail-header-bar .xc-btn { padding: 5px 10px; font-size: 12px; gap: 4px; }
.xc-detail-header-bar .xc-btn svg { width: 12px; height: 12px; }

/* ── Mobile-only pane back buttons (see @media below) ───────── */
.xc-pane-back {
  display: none; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: #2563eb; font-size: 13px; font-weight: 600; padding: 10px 2px 14px; font-family: inherit;
}

/* ── Mobile-only preview topbar (2026-09-06, see @media below) ─────────────
   Hidden entirely outside the mobile breakpoint — on desktop, #xc-detail-close
   and .xc-detail-more-wrap (Options) stay in their normal spot inside
   #xc-detail-header-bar (JS never moves them there). */
#xc-preview-topbar { display: none; }

/* ── Detail overlay (still used by Details/Templates/Intake/password-change) ── */
.xc-overlay {
  position: fixed; inset: 0; background: rgba(15,17,21,0.52);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 20px; backdrop-filter: blur(1px);
}
.xc-detail-panel {
  background: #fff; border-radius: 14px; padding: 26px 28px; width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto; position: relative;
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
}
/* Fixed (not max-) height: the Details modal (#xc-info-overlay, the one
   remaining .xc-wide consumer after Preview & Sign moved into the permanent
   pane above) needs a consistent size regardless of how much timeline/
   history content it's showing (confirmed by the user while testing,
   2026-08-30). A fixed height plus the existing overflow-y:auto keeps the
   modal the same size throughout — deliberately NOT applied to the narrower
   .xc-pw-panel (password-change form), which stays content-sized via the
   base rule's max-height so a 2-field form doesn't sit in mostly-empty
   space. */
.xc-detail-panel.xc-wide {
  width: min(760px, 100%); height: 88vh; max-height: 88vh;
  display: flex; flex-direction: column;
}
/* Field designer modal (composed-snacking-walrus.md, 2026-09-01) — needs far
   more room than .xc-wide to position fields precisely on a rendered PDF
   page; a 260px sidebar next to a 640px-tall preview wasn't enough. */
.xc-detail-panel.xc-xlarge {
  width: min(1440px, 96vw); height: 92vh; max-height: 92vh;
  display: flex; flex-direction: column;
}
.xc-intake-designer-body {
  flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; align-items: stretch; margin-top: 10px;
}
.xc-intake-designer-pages-panel {
  flex: 1 1 auto; min-width: 0; height: 100%; overflow: auto;
  border: 1px solid #d0d5dd; border-radius: 8px; background: #f8fafc; padding: 14px;
}
.xc-intake-designer-sidebar { width: 300px; flex: 0 0 auto; height: 100%; overflow-y: auto; padding-right: 2px; }
.xc-detail-panel h2 { font-size: 19px; margin: 0 0 14px; padding-right: 28px; color: #0f172a; }
.xc-detail-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; padding: 0;
  border-radius: 8px; font-size: 15px;
}
.xc-detail-meta p { font-size: 13.5px; color: #475569; margin: 0 0 6px; line-height: 1.5; }
.xc-detail-meta strong { color: #1e293b; }
.xc-detail-actions { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.xc-events-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin: 20px 0 8px; }
.xc-events { list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: #64748b; }
.xc-events li { padding: 6px 0; border-bottom: 1px solid #f2f4f7; }
.xc-events li:last-child { border-bottom: none; }

.xc-step {
  border-top: 1px solid #eef0f4; padding-top: 18px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}

/* Signing steps overlay (2026-09-03 feedback) — OTP / position-pick /
   disclaimer used to sit in normal flow below the document, pushing it down
   one step at a time. Now they drop down as one banner from the top of the
   preview pane, over the header bar (document name/details), and stay open
   across all 3 steps until the signing flow ends (resetSigningSteps() in
   app.js closes it — cancel, completion, or error all route through there).
   Absolute against #xc-preview-content (position:relative, above) so top:0
   lines up exactly with where the header bar starts, inside the pane's own
   padding, rather than the pane's outer edge. */
.xc-signing-overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding: 22px 28px; border-radius: 0 0 14px 14px;
  background: #eaf1fd; border: 1px solid #bfdbfe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .22s ease;
}
.xc-signing-overlay.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* Document name, pinned at the overlay's top-left across every step — the
   overlay hides the header bar that otherwise carries it (2026-09-03). */
.xc-signing-doc-name {
  display: flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; color: #1e3a8a; min-width: 0;
}
.xc-signing-doc-name svg { flex: 0 0 auto; opacity: .75; }
.xc-signing-doc-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Steps no longer sit below other content once inside the overlay banner —
   the divider line and top spacing made sense as a continuation under the
   document, not as the top of a self-contained banner. */
.xc-signing-overlay .xc-step { border-top: none; padding-top: 0; margin-top: 0; }
.xc-step-icon {
  width: 40px; height: 40px; border-radius: 10px; background: #eff6ff; color: #2563eb;
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.help { font-size: 13px; color: #64748b; margin: 0 0 10px; line-height: 1.5; }

.xc-otp-row { align-items: center; gap: 10px; display: flex; }
.xc-otp-input {
  flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #d0d5dd; border-radius: 8px;
  font-size: 20px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums;
}
.xc-otp-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

.xc-notice {
  font-size: 13px; color: #475569; line-height: 1.55; background: #f8fafc;
  border: 1px solid #eef0f4; border-radius: 8px; padding: 12px 14px; margin-bottom: 4px;
}
.xc-disclaimer-row {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; cursor: pointer;
  font-size: 12.5px; color: #475569; line-height: 1.5;
}
.xc-disclaimer-row input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #2563eb; cursor: pointer; }

/* ── Templates modal (plan §3.3) ────────────────────────────── */
.xc-field { display: block; margin-bottom: 14px; }
.xc-field-label {
  display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px;
}
.xc-field input[type="text"], .xc-field input[type="number"], .xc-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #1e293b; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.xc-field textarea { resize: vertical; }
.xc-field input:focus, .xc-field textarea:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.xc-field-hint { display: block; font-size: 12px; color: #94a3b8; margin-top: 5px; line-height: 1.4; }

.xc-tpl-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }

/* Compose modal (2026-09-04) — file chip list + recipient rows */
.xc-compose-chips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.xc-compose-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid #e2e5ea; border-radius: 7px; background: #f8fafc;
  font-size: 13px; color: #334155;
}
.xc-compose-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-compose-chip-remove { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 14px; flex-shrink: 0; }
.xc-compose-chip-remove:hover { color: #dc2626; }
.xc-compose-recipient-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px; }
.xc-tpl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid #eef0f4; border-radius: 10px; background: #f8fafc;
}
.xc-tpl-item-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.xc-tpl-item-meta { display: block; font-size: 12px; color: #94a3b8; margin-top: 3px; line-height: 1.5; }
.xc-tpl-empty { padding: 18px 0; text-align: center; color: #94a3b8; font-size: 13px; }
.xc-tpl-delete {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1px solid #fecaca; background: #fff; color: #dc2626; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.xc-tpl-delete:hover { background: #fef2f2; }

.xc-preview-pages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #eef1f6;
  border: 1px solid #eef0f4; border-radius: 8px; padding: 14px; margin-bottom: 16px;
  /* Reserves the vertical scrollbar's space permanently so clientWidth is
     the same before and after pages are appended — _renderPreviewPdf()
     measures the available page width from it, and without this the first
     measurement (taken while no scrollbar existed yet) was too wide by the
     scrollbar's width, overflowing horizontally the moment one appeared. */
  scrollbar-gutter: stable;
}
.xc-preview-pages .help { margin: 0; }
.xc-preview-page-wrap {
  position: relative; margin: 0 auto 14px; background: #fff;
  box-shadow: 0 1px 6px rgba(15,23,42,.18);
  /* Guarantees a page can never be wider than the pane, whatever width it
     was rendered at — so resizing the window/pane can't reintroduce a
     horizontal scrollbar. The wrap has no explicit height (see
     _renderPreviewPdf()); the canvas below supplies the aspect ratio. */
  max-width: 100%;
}
/* Only during ClickToSign's position-picking step — otherwise this is a
   plain read-only preview, a crosshair cursor there would be misleading. */
.xc-preview-page-wrap.xc-preview-interactive { cursor: crosshair; }
.xc-preview-page-wrap:last-child { margin-bottom: 0; }
.xc-preview-page-wrap canvas { display: block; width: 100%; height: auto; }
.xc-preview-page-num {
  position: absolute; top: 6px; left: 6px; background: rgba(15,23,42,.65); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; pointer-events: none;
}
.xc-sig-box {
  position: absolute; border: 2px dashed #2563eb; background: rgba(37,99,235,.14);
  color: #1e3a8a; font-size: 8px; font-weight: 600; line-height: 1.35;
  padding: 3px 5px; white-space: pre-line; overflow: hidden;
  /* Sized by its own text content (2026-09-03 feedback) rather than a fixed
     220x60pt box that left a lot of empty space around a short name/email —
     see _renderSigBoxAt() in app.js, which measures the resulting rendered
     size (in PDF points) and sends it along with the click position so the
     actually-applied signature (routes/xchange.py) matches this preview
     instead of always using its own fixed 220x60pt default. max-width/height
     are a safety cap only (an unusually long name/email stays readable and
     never grows past most of the page), not the normal sizing mechanism. */
  width: max-content; height: max-content; max-width: 70%; max-height: 40%;
  /* Draggable (2026-09-01) — was pointer-events:none (box couldn't be
     interacted with at all, only replaced by a fresh click elsewhere on the
     page). auto + cursor:move signal it can be picked up and fine-tuned;
     touch-action:none stops touchscreens from scrolling the preview instead
     of dragging the box mid-gesture. */
  pointer-events: auto; cursor: move; touch-action: none;
  box-shadow: 0 0 0 1px rgba(37,99,235,.2);
  transition: box-shadow .12s ease;
}
.xc-sig-box:hover, .xc-sig-box:active { box-shadow: 0 0 0 1px rgba(37,99,235,.4), 0 4px 14px rgba(37,99,235,.25); }

/* ── Intake template field designer (composed-snacking-walrus.md, 2026-09-01) ── */
.xc-intake-page-wrap {
  position: relative; margin: 0 auto 14px; background: #fff;
  box-shadow: 0 1px 6px rgba(15,23,42,.18); cursor: crosshair;
}
.xc-intake-page-wrap:last-child { margin-bottom: 0; }
.xc-intake-page-wrap canvas { display: block; width: 100%; height: auto; }
.xc-intake-page-num {
  position: absolute; top: 6px; left: 6px; background: rgba(15,23,42,.65); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; pointer-events: none;
}
.xc-field-box {
  position: absolute; box-sizing: border-box; border: 2px dashed #16a34a;
  background: rgba(22,163,74,.14); color: #14532d; font-size: 10px; font-weight: 600;
  line-height: 1.3; padding: 2px 4px; overflow: hidden;
  pointer-events: auto; cursor: move; touch-action: none;
  box-shadow: 0 0 0 1px rgba(22,163,74,.2); transition: box-shadow .12s ease;
}
.xc-field-box:hover, .xc-field-box:active { box-shadow: 0 0 0 1px rgba(22,163,74,.4), 0 4px 14px rgba(22,163,74,.22); }
.xc-field-box.xc-field-required { border-style: solid; }
.xc-field-box .xc-field-handle {
  position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px;
  border-radius: 50%; background: #16a34a; border: 2px solid #fff; cursor: nwse-resize;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.xc-field-box .xc-field-del-badge {
  position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; padding: 0;
  border-radius: 50%; background: #dc2626; border: 2px solid #fff; color: #fff;
  font-size: 9px; line-height: 1; cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); opacity: 0;
  transition: opacity .12s ease; touch-action: none;
}
.xc-field-box:hover .xc-field-del-badge, .xc-field-box:active .xc-field-del-badge { opacity: 1; }
.xc-field-box.xc-field-sigzone { border-color: #b45309; background: rgba(217,119,6,.16); color: #78350f; }
.xc-field-box.xc-field-sigzone .xc-field-handle { background: #b45309; }
.xc-field-box.xc-field-file { border-color: #7c3aed; background: rgba(124,58,237,.14); color: #4c1d95; }
.xc-field-box.xc-field-file .xc-field-handle { background: #7c3aed; }
.xc-field-row {
  display: flex; align-items: flex-start; gap: 6px; padding: 8px; border: 1px solid #eef0f4;
  border-radius: 8px; background: #f8fafc;
}
.xc-field-row-main { flex: 1 1 auto; min-width: 0; }
.xc-field-row input[type="text"], .xc-field-row select {
  width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid #d0d5dd;
  border-radius: 5px; font-size: 12px; margin-bottom: 4px; background: #fff;
}
.xc-field-row .checkbox-label { font-size: 11.5px; gap: 4px; }
.xc-field-row-numeric { display: flex; gap: 4px; margin-bottom: 4px; }
.xc-field-row-numeric input[type="number"] {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 5px 6px; border: 1px solid #d0d5dd;
  border-radius: 5px; font-size: 11.5px;
}
.xc-field-row-order { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.xc-field-row-move {
  width: 20px; height: 18px; padding: 0; border-radius: 4px; border: 1px solid #d0d5dd;
  background: #fff; color: #475569; font-size: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.xc-field-row-move:hover:not(:disabled) { background: #f1f5f9; }
.xc-field-row-move:disabled { opacity: .35; cursor: not-allowed; }
.xc-field-row-del {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border-radius: 6px;
  border: 1px solid #fecaca; background: #fff; color: #dc2626; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.xc-field-row-del:hover { background: #fef2f2; }

.xc-pw-panel { max-width: 420px; }
.xc-pw-panel label { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.xc-pw-panel input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d0d5dd;
  border-radius: 8px; font-size: 14px; margin-top: 2px;
}
.xc-pw-panel input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .xc-header { padding: 12px 14px; }
  .xc-brand-text { font-size: 16px; }
  .xc-user { gap: 8px; }
  .xc-user-name { max-width: 110px; font-size: 12px; }
  /* The second identity line is dropped on a phone header — it competes with
     the brand, the hamburger and Sign out for the same row, and truncating
     an email to ~110px shows too little of it to be worth the space. */
  .xc-user-email { display: none; }
  .xc-header .xc-btn-ghost { padding: 7px 10px; font-size: 12px; }
  /* The menu trigger becomes a pure hamburger — no room for its label next
     to the user chip and Sign out on a phone header. */
  .xc-menu-label { display: none; }
  .xc-alert { margin: 12px 14px 0; }

  /* Single-active-pane fallback (2026-09-02) — no room for sidebar + list +
     preview side by side on a phone. .xc-shell's data-active-pane (kept in
     sync by app.js on every folder/subfolder/item selection, plus the
     .xc-pane-back buttons below) picks which ONE of the three panes shows;
     the other two are display:none instead of sharing the viewport. */
  .xc-shell { display: block; height: auto; }
  .xc-sidebar, .xc-list-pane, .xc-preview-pane {
    display: none; width: 100%; height: calc(100vh - 53px); border-right: none;
  }
  .xc-shell[data-active-pane="sidebar"] .xc-sidebar { display: block; }
  .xc-shell[data-active-pane="list"] .xc-list-pane { display: block; }
  .xc-shell[data-active-pane="preview"] .xc-preview-pane { display: flex; }
  .xc-pane-back { display: flex; }

  .xc-item-row { padding: 12px 14px; }
  /* Actions collapse into the "…" menu instead of a row of icons — no room
     for several icons on a phone-width row. */
  .xc-row-actions { display: none; }
  .xc-row-more { display: block; }

  .xc-detail-header-bar { flex-direction: column; align-items: stretch; }
  /* flex:1 1 320px (base rule, desktop-only intent) sets a WIDTH preference
     in the desktop row layout — but flex-basis maps to HEIGHT once the
     parent switches to flex-direction:column just above, forcing this title
     block to a 320px-tall box even though its actual content (title + one
     meta line) is a fraction of that. This produced a large blank gap under
     the title on a phone (2026-09-06 report). Reset to a natural height. */
  .xc-detail-header-info { flex: 0 0 auto; }
  .xc-preview-pane { padding: 16px 14px; }

  /* Compact 2-row mobile topbar (2026-09-06 restructure, follow-up same day
     — List moved up next to ✕). Row 1: List (back) left, Close (✕) enlarged
     right. Row 2: Options alone, right-aligned — _syncMobilePreviewTopbar()
     (app.js) moves the real #xc-detail-close and .xc-detail-more-wrap nodes
     into these two rows at this breakpoint. */
  #xc-preview-topbar { display: flex; flex-direction: column; }
  #xc-preview-topbar-close-row { display: flex; align-items: center; justify-content: space-between; }
  #xc-preview-topbar-nav-row { display: flex; align-items: center; justify-content: flex-end; }
  #xc-preview-topbar-close-row #xc-detail-close { font-size: 18px; padding: 8px 12px; }

  .xc-detail-panel { padding: 20px 16px; border-radius: 12px; }
  .xc-overlay { padding: 10px; }
  .xc-detail-actions { flex-direction: column; }
  .xc-detail-actions .xc-btn { width: 100%; }
  /* The preview pane's OWN header action row (Sign/ClickToSign/Approve/
     Fill-in/Add file/Options/...) shares the .xc-detail-actions class with
     modal OK/Cancel button rows, but must NOT get that same full-width
     vertical stacking — it already wraps compactly at the base rule
     (.xc-detail-header-bar .xc-detail-actions, non-mobile). Without this
     override, several buttons stacking full-width one per line inside the
     header pushed it to ~75% of the phone screen's height, leaving almost
     nothing for the actual document preview below it (2026-09-06 report).
     Reset back to a normal wrapping row here. */
  .xc-detail-header-bar .xc-detail-actions { flex-direction: row; flex-wrap: wrap; }
  .xc-detail-header-bar .xc-detail-actions .xc-btn { width: auto; }
  .xc-otp-row { flex-wrap: wrap; }
  /* .xc-signing-overlay kept its full 22px/28px desktop padding regardless
     of viewport — .xc-preview-pane's OWN padding is already reduced to
     16px/14px on mobile just above, but the overlay sits INSIDE that
     (already narrower) box and added its unchanged 28px of horizontal
     padding on top, squeezing its content (OTP input, Resend button, etc.)
     into a noticeably tighter box than everything around it. Combined with
     .xc-otp-input's fixed min-width:auto default (a flex item's default —
     fixed now above via min-width:0, but this report predates that on a
     narrow enough phone the 6-digit input, 20px font + 8px letter-spacing,
     could still be wider than what was left), content overflowed the
     overlay's own edges instead of wrapping — reading as parts of the
     overlay being cut off on the sides (2026-09-06 report). Matching the
     pane's own mobile padding removes that extra squeeze. */
  .xc-signing-overlay { padding: 16px 14px; }
  .xc-preview-pages { padding: 10px; }
}