/* freeDMS — minimal, dependency-free stylesheet (low overhead, no CDN). */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #1f2933;
  --muted: #647280;
  --line: #dfe4ea;
  --brand: #1f6feb;
  --brand-dark: #1457c4;
  --crm: #16a34a;
  --ok: #137a52;
  --warn: #9a6700;
  --err: #b42318;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0 1.25rem; min-height: 56px;
}
.brand { display: flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--ink); font-size: 1.1rem; }
.brand-mark {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  background: var(--brand); color: #fff; border-radius: 7px; font-weight: 700;
}
.brand-word { font-weight: 600; letter-spacing: -.01em; }
/* freeCRM section: green app icon (set in base.html when in the CRM module). */
.brand-crm .brand-mark { background: var(--crm); }
.auth-brand .brand-word { font-weight: 600; }
.navwrap { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 1rem; }
.mainnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.mainnav a { text-decoration: none; color: var(--muted); padding: .4rem .6rem; border-radius: 7px; white-space: nowrap; }
.mainnav a:hover { background: var(--bg); color: var(--ink); }
.usermenu { display: flex; align-items: center; gap: .9rem; }
.usermenu a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.usermenu a:hover { color: var(--ink); }
.inline { display: inline; margin: 0; }
.linkbtn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.linkbtn:hover { color: var(--err); }

/* Hamburger toggle (shown on mobile only; CSS-only via the checkbox hack) */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; user-select: none; margin-left: auto;
  padding: .5rem; border-radius: 8px; }
.nav-burger:hover { background: var(--bg); }
.nav-burger-bar, .nav-burger-bar::before, .nav-burger-bar::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .15s, opacity .15s;
}
.nav-burger-bar { position: relative; }
.nav-burger-bar::before { position: absolute; top: -7px; }
.nav-burger-bar::after { position: absolute; top: 7px; }

/* Layout */
.content { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.footer {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: .75rem 1.25rem; color: var(--muted); font-size: .85rem;
}
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-header h1 { margin: 0; font-size: 1.5rem; }
.subtitle { margin: .25rem 0 0; color: var(--muted); }
/* Section header: a section title with an action (e.g. "New") aligned to the right. */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 .75rem; }
.section-header h2 { margin: 0; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--brand); transform: translateY(-2px); }
.card-icon { font-size: 1.6rem; }
.card h2 { margin: .4rem 0 .25rem; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Panels & detail lists */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.detail-list { display: grid; grid-template-columns: 180px 1fr; gap: .5rem 1rem; margin: 0 0 1rem; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.data-table th { background: #fafbfc; color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.data-table tr:last-child td { border-bottom: none; }

/* Forms / buttons */
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: #fff; }
.filterbar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filterbar input { width: auto; flex: 1; min-width: 160px; }
.btn { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-sm { padding: .3rem .7rem; font-size: .85rem; }
/* `.btn`'s display would otherwise override the UA `[hidden]` rule, leaving a
   button with the `hidden` attribute visible (cf. `.ai-panel[hidden]`). */
.btn[hidden] { display: none; }

/* Badges & states */
.badge { display: inline-block; padding: .1rem .5rem; margin: 0 .2rem .2rem 0; background: #eef2f7; border-radius: 999px; font-size: .78rem; color: var(--muted); }
.empty-state { text-align: center; color: var(--muted); padding: 2rem 1rem; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.msg { padding: .6rem .9rem; border-radius: 8px; margin-bottom: .5rem; border: 1px solid var(--line); }
.msg-success { background: #e7f6ee; border-color: #b6e3ca; color: var(--ok); }
.msg-error, .msg-danger { background: #fdeceb; border-color: #f6c5c0; color: var(--err); }
.msg-warning { background: #fdf6e3; border-color: #f1deb0; color: var(--warn); }
.msg-info { background: #eaf2fd; border-color: #c3dbf8; color: var(--brand-dark); }

/* Auth */
.auth-card { max-width: 380px; margin: 3rem auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.auth-brand { font-size: 1.2rem; margin-bottom: 1rem; display: flex; gap: .4rem; align-items: center; }
.auth-card h1 { margin: 0 0 1rem; font-size: 1.3rem; }
.auth-card label { display: block; margin: .75rem 0 .25rem; font-size: .85rem; color: var(--muted); }
.auth-card .btn { width: 100%; margin-top: 1.25rem; text-align: center; }
.auth-note { margin-top: 1rem; font-size: .8rem; color: var(--muted); }

/* Pagination */
.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.25rem; color: var(--muted); }
.pagination a { color: var(--brand); text-decoration: none; }

/* Lifecycle / status pills (shared vocabulary for feature apps) */
.pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill-draft { background: #eef2f7; color: #5b6b7b; }
.pill-in_review, .pill-reviewed { background: #fdf6e3; color: var(--warn); }
.pill-for_approval { background: #eae3fb; color: #6b46c1; }
.pill-approved, .pill-effective { background: #e7f6ee; color: var(--ok); }
.pill-superseded, .pill-obsolete, .pill-archived, .pill-cancelled { background: #f0f1f3; color: var(--muted); }

/* Sentiment chips (account news) — reuse the message colour vocabulary */
.sentiment { display: inline-block; flex: none; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.sentiment-positive { background: #e7f6ee; color: var(--ok); }
.sentiment-neutral { background: #eef2f7; color: var(--muted); }
.sentiment-negative { background: #fdeceb; color: var(--err); }
/* "Straight from the company" badge on IR/press-sourced news */
.news-company { display: inline-block; flex: none; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #eae3fb; color: #6b46c1; }

/* Account newsfeed (home panel, account page, full feed) */
.news-list { display: flex; flex-direction: column; gap: .9rem; margin: .5rem 0 1rem; }
/* Auto-scrolling viewport: JS caps the height to a few cards and drives the
   scroll. `scroll-behavior: auto` keeps the seamless loop instant (smooth would
   animate the wrap into a visible spring-back). */
.news-list[data-autoscroll] { overflow-y: auto; scrollbar-width: thin; scroll-behavior: auto; }
.news-item { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.news-item-head { display: flex; align-items: baseline; gap: .5rem; }
.news-item-title { font-weight: 600; text-decoration: none; color: var(--brand); }
.news-item-title:hover { text-decoration: underline; }
.news-item-meta { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); }
.news-item-meta a { color: var(--brand); text-decoration: none; }
.news-item-summary { margin: .45rem 0 0; font-size: .9rem; line-height: 1.45; }
.news-list-compact .news-item { padding: .55rem .7rem; }
.news-list-compact .news-item-summary { font-size: .85rem; }
.feature-more { font-size: .8rem; color: var(--brand); text-decoration: none; white-space: nowrap; }
.feature-more:hover { text-decoration: underline; }

/* Wide tables scroll horizontally inside their wrapper (added by base.html JS) */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* In-browser document viewer */
.viewer-panel { padding: .5rem; }
.doc-viewer { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.doc-viewer-imgwrap { text-align: center; }
.doc-viewer-img { max-width: 100%; max-height: 78vh; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 640px) { .doc-viewer { height: 68vh; } }

/* pdf.js canvas viewer (works on mobile + desktop) */
.pdf-toolbar { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.pdf-canvas-container {
  max-height: 80vh; overflow: auto; background: #525659; border-radius: 8px;
  padding: .5rem; text-align: center; -webkit-overflow-scrolling: touch;
}
.pdf-canvas-container .pdf-page {
  display: block; margin: 0 auto .5rem; width: 100%; height: auto;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
@media (max-width: 640px) { .pdf-canvas-container { max-height: 72vh; } }

/* ======================================================================
   Responsive / mobile
   ====================================================================== */
@media (max-width: 820px) {
  /* Collapse the nav behind the hamburger. */
  .nav-burger { display: block; }
  .navwrap {
    display: none; flex-basis: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: .5rem;
  }
  .nav-toggle:checked ~ .navwrap { display: flex; }

  /* When open, morph the burger into an X. */
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar { background: transparent; }
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar::after { top: 0; transform: rotate(-45deg); }

  .mainnav, .usermenu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .usermenu { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem; }
  .mainnav a, .usermenu a, .usermenu .inline { display: block; width: 100%; }
  .mainnav a, .usermenu a, .linkbtn {
    padding: .85rem .5rem; border-radius: 8px; font-size: 1rem; min-height: 44px;
    display: flex; align-items: center; box-sizing: border-box;
  }
  .linkbtn { width: 100%; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .content { padding: 1rem .85rem; }

  /* Page headers: title over full-width actions. */
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header h1 { font-size: 1.3rem; }
  .page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .page-actions .btn, .page-actions form, .page-actions .inline { flex: 1 1 auto; }
  .page-actions .btn { text-align: center; }

  /* Detail lists stack: label above value. */
  .detail-list { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .detail-list dt { margin-top: .6rem; font-weight: 600; color: var(--muted); }
  .detail-list dt:first-child { margin-top: 0; }

  /* Tables keep their columns and scroll sideways rather than squashing. */
  .data-table th, .data-table td { white-space: nowrap; }

  /* Filter bars and inline action forms stack to full width. */
  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar input, .filterbar select, .filterbar .btn { width: 100%; }

  /* Comfortable tap targets for all controls. */
  .btn, button, input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px avoids iOS zoom */
  .btn { padding: .65rem 1rem; }

  /* Panels & forms a touch tighter. */
  .panel { padding: 1rem; }
  .auth-card { margin: 1.5rem auto; padding: 1.5rem; }

  .footer { flex-direction: column; gap: .2rem; text-align: center; }
}

/* ======================================================================
   freeCRM home — feature panels (Next best actions / News) + draggable
   quick-access cards. These classes are used only on the CRM home page, so
   they lean on the CRM green accent (--crm) to reinforce the module identity.
   ====================================================================== */
.home-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.feature-panel { display: flex; flex-direction: column; }
.feature-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.feature-head h2 { margin: 0; font-size: 1.15rem; }
.feature-icon { margin-right: .15rem; }
.badge-soon { background: #eef2f7; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; font-size: .64rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 999px; white-space: nowrap; }
.feature-lead { margin: .35rem 0 .9rem; color: var(--muted); font-size: .9rem; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.feature-item { display: flex; gap: .6rem; align-items: flex-start; }
.feature-item-icon { font-size: 1.05rem; line-height: 1.4; flex: 0 0 auto; }
.feature-item-body { display: flex; flex-direction: column; min-width: 0; }
.feature-item-body a { color: var(--ink); text-decoration: none; font-weight: 600; }
.feature-item-body a:hover { color: var(--crm); }
.feature-item-body small { color: var(--muted); }
/* Faint ghost rows that anchor where real items will land (paired with the
   "Coming soon" badge so they read as placeholders, not a loading spinner). */
.feature-skeleton { position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: .2rem 0 .2rem 1.4rem; opacity: .5; }
.feature-skeleton::before { content: ""; position: absolute; left: 0; top: .2rem;
  width: .85rem; height: .85rem; border-radius: 50%; background: var(--line); }
.feature-skeleton span { display: block; height: .55rem; border-radius: 4px; background: var(--line); }
.feature-skeleton span:first-child { width: 72%; }
.feature-skeleton span:last-child { width: 46%; }
.feature-empty { color: var(--muted); font-size: .82rem; padding-top: .45rem; }

/* Quick-access card grid */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.qa-card { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); transition: border-color .15s, transform .15s, box-shadow .15s; }
.qa-card:hover { border-color: var(--crm); transform: translateY(-2px); }
.qa-card-link { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem;
  text-decoration: none; color: var(--ink); }
.qa-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.qa-text { display: flex; flex-direction: column; min-width: 0; }
.qa-label { font-weight: 600; }
.qa-desc { color: var(--muted); font-size: .8rem; }
/* Grip handle: the only drag affordance, so a swipe on the card body still
   scrolls on touch. Hidden until hover on fine pointers; always shown on touch. */
.qa-handle { position: absolute; top: .3rem; right: .3rem; width: 1.7rem; height: 1.7rem;
  display: flex; align-items: center; justify-content: center; padding: 0; border: none;
  background: none; color: var(--muted); font-size: 1rem; line-height: 1; border-radius: 6px;
  cursor: grab; opacity: 0; transition: opacity .15s; touch-action: none; }
.qa-card:hover .qa-handle { opacity: .6; }
.qa-handle:hover { opacity: 1; background: var(--bg); }
.qa-handle:active { cursor: grabbing; }
@media (hover: none) { .qa-handle { opacity: .5; } }
/* The lifted card (position:fixed is applied inline by the drag script). */
.qa-dragging { z-index: 1000; pointer-events: none; transform: none;
  border-color: var(--crm); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.qa-placeholder { border: 2px dashed var(--crm); border-radius: var(--radius);
  background: rgba(22, 163, 74, .06); }

@media (max-width: 720px) {
  .home-feature-row { grid-template-columns: 1fr; }
}

/* System Options form */
.option-row { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.option-row:last-child { border-bottom: 0; }
.option-label { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.option-row input[type="checkbox"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; min-height: 0; }
.option-input { display: block; margin-top: .35rem; max-width: 12rem; padding: .4rem .5rem;
  border: 1px solid var(--line); border-radius: 6px; }
.option-help { margin: .35rem 0 0; max-width: 48rem; }

/* ---------------------------------------------------------------- AI agent */
#ai-fab-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; }
.ai-fab { width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 1.5rem; line-height: 52px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.ai-fab:hover { background: var(--brand-dark); }
.ai-fab:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
.ai-panel { position: fixed; right: 1rem; bottom: 4.75rem; width: min(380px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 6rem)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.2); overflow: hidden; }
/* The `display: flex` above overrides the UA stylesheet's `[hidden] { display: none }`,
   so the panel's `hidden` attribute needs a more specific rule to actually collapse it. */
.ai-panel[hidden] { display: none; }
/* On phones the panel takes most of the screen so the chat is easy to read/use. */
@media (max-width: 640px) {
  .ai-panel { left: .5rem; right: .5rem; bottom: .5rem; width: auto;
    max-height: calc(100vh - 1rem); height: 82vh; }
  .ai-panel { max-height: calc(100dvh - 1rem); height: 82dvh; }
  .ai-msg { max-width: 92%; font-size: 1rem; }
}
.ai-panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.ai-head-actions { display: flex; align-items: center; gap: .6rem; }
.ai-badge { background: var(--brand); color: #fff; font-size: .62rem; font-weight: 700;
  padding: .05rem .35rem; border-radius: 4px; vertical-align: middle; letter-spacing: .03em; }
.ai-log { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column;
  gap: .5rem; }
.ai-hint { color: var(--muted); font-size: .85rem; margin: 0; }
.ai-msg { padding: .45rem .65rem; border-radius: 10px; max-width: 85%; font-size: .9rem;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-user { align-self: flex-end; background: var(--brand); color: #fff; }
.ai-bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
.ai-msg strong { font-weight: 700; }
.ai-msg code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em; background: rgba(0,0,0,.06); padding: .05rem .3rem; border-radius: 4px; }
.ai-msg .ai-tablewrap { overflow-x: auto; margin: .3rem 0; }
.ai-msg .ai-table { border-collapse: collapse; font-size: .85em; }
.ai-msg .ai-table th, .ai-msg .ai-table td { border: 1px solid var(--line);
  padding: .15rem .45rem; text-align: left; white-space: nowrap; }
.ai-msg .ai-table th { background: rgba(0,0,0,.04); font-weight: 600; }
.ai-notice { color: var(--warn); }
.ai-step { align-self: flex-start; font-size: .82rem; color: var(--ok); }
.ai-step.err { color: var(--err); }
/* "Working…" indicator shown while the agent runs (animated bouncing dots). */
.ai-typing { align-self: flex-start; display: inline-flex; gap: 4px; align-items: center;
  padding: .55rem .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: ai-typing-bounce 1.2s infinite ease-in-out both; }
.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes ai-typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-typing span { animation: none; opacity: .55; } }
.ai-confirm { align-self: stretch; border: 1px solid var(--warn); border-radius: 8px;
  padding: .55rem .7rem; background: #fff8e6; }
.ai-confirm-q { margin: 0 0 .45rem; font-size: .88rem; }
.ai-confirm-risk { float: right; text-transform: uppercase; font-size: .62rem; font-weight: 700;
  color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: .02rem .3rem; }
.ai-confirm-pre { display: block; font-size: .78rem; background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .5rem; margin-bottom: .5rem; overflow-x: auto; }
/* Editable confirm form: a label-over-input field per proposed argument. */
.ai-cf { display: flex; flex-direction: column; gap: .12rem; margin-bottom: .45rem; }
.ai-cf-label { font-size: .72rem; font-weight: 600; color: var(--muted); }
.ai-cf input[type="text"], .ai-cf input[type="number"], .ai-cf select, .ai-cf textarea {
  width: 100%; padding: .35rem .45rem; font-size: .85rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; }
.ai-cf textarea { resize: vertical; }
.ai-cf-check { flex-direction: row; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.ai-cf-check input { width: auto; min-height: 0; flex: 0 0 auto; }
.ai-cf-check .ai-cf-label { font-size: .85rem; color: var(--ink); }
.ai-confirm form > .btn { margin-top: .35rem; }
.ai-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--line); align-items: center; }
.ai-input { flex: 1; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; }
.ai-send { white-space: nowrap; }
/* The shared `.linkbtn` is forced to width:100% inside the mobile-nav media query
   (≤820px). The AI panel reuses `.linkbtn` for its icon/attach buttons, so opt them
   back out — otherwise on phones the 📎 button fills the row and crushes the input. */
.ai-panel .linkbtn { width: auto; }
.ai-attach { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; padding: .2rem .25rem; cursor: pointer; }
.ai-attach-chip { display: flex; align-items: center; gap: .35rem; margin: 0 .6rem; padding: .3rem .5rem;
  background: var(--surface, #f5f5f5); border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; }
.ai-attach-chip[hidden] { display: none; }   /* author display:flex would otherwise beat [hidden] */
.ai-attach-chip .ai-attach-x { margin-left: auto; }
.ai-attach-tag { opacity: .75; font-style: italic; }

/* voice chat mode */
.ai-voice-toggle { font-size: 1rem; line-height: 1; padding: 0 .15rem; }
.ai-voice-toggle[aria-pressed="true"] { color: var(--brand); }
.ai-voice-toggle[disabled] { opacity: .4; cursor: not-allowed; }
.ai-voice-orb { margin: .5rem .8rem 0; padding: .5rem .7rem; border-radius: 8px;
  font-size: .85rem; font-weight: 600; text-align: center; }
.ai-voice-orb:empty { display: none; }
.ai-voice-orb.listening { background: #e6f0ff; color: var(--brand-dark); }
.ai-voice-orb.thinking  { background: #fff8e6; color: var(--warn); }
.ai-voice-orb.speaking  { background: #e7f7ef; color: var(--ok); }
.ai-voice-orb.confirm   { background: #fff8e6; color: var(--warn); }
.ai-voice-orb.listening::before { content: "🎙 "; }
.ai-voice-orb.listening, .ai-voice-orb.speaking { animation: ai-pulse 1.2s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* In voice mode, foreground the orb and de-emphasise the text bubbles; the
   transcript stays in the DOM and reappears when voice mode is switched off.
   The confirm card is kept visible because the user must tap it. */
.ai-panel.ai-voice-on .ai-log .ai-msg,
.ai-panel.ai-voice-on .ai-log .ai-step,
.ai-panel.ai-voice-on .ai-log .ai-typing,
.ai-panel.ai-voice-on .ai-log .ai-hint { display: none; }
.ai-panel.ai-voice-on .ai-log .ai-confirm { display: block; }
@media (prefers-reduced-motion: reduce) { .ai-voice-orb { animation: none !important; } }
.ai-config-toggle.active { color: var(--brand); }
.ai-config-indicator { margin: .4rem .8rem 0; padding: .35rem .6rem; border-radius: 6px;
  background: #fff8e6; color: var(--warn); font-size: .8rem; font-weight: 600; text-align: center; }

/* --------------------------------------------------------------------------- *
   Activity sidebar (freeCRM contact/account detail): two-column layout, threaded
   activities and editable status. Built on the shared design tokens.
 * --------------------------------------------------------------------------- */
.small { font-size: .85rem; }

/* CRM detail pages break out of the 1100px content cap to use the full viewport,
   so the activity sidebar is a true flush-right rail — not a nudge to the left. */
.content-wide { max-width: none; }
.crm-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1.5rem; align-items: start; }
.crm-detail-main { min-width: 0; }

/* Detail label/value block (all CRM detail pages). Previously an unstyled <dl>
   that stacked in a thin strip; lay it out as label/value pairs flowing across
   the available width so wide pages don't waste horizontal space. */
.detail-grid { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.detail-grid dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; align-items: baseline; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }
@media (min-width: 700px)  { .detail-grid dl { grid-template-columns: max-content 1fr max-content 1fr; } }
@media (min-width: 1200px) { .detail-grid dl { grid-template-columns: repeat(3, max-content 1fr); } }

/* Sticky, independently scrollable right rail that fills the viewport height. */
.activity-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.activity-sidebar .section-header { margin: 0 0 .5rem; }
.activity-section { margin-top: 1rem; }
.activity-section h3 { margin: 0 0 .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

/* Type-filter chips reuse the .badge base; the active one is brand-filled. */
.activity-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }
.activity-chips .badge { cursor: pointer; }
.activity-chips .chip-active { background: var(--brand); color: #fff; }

/* Compose / reveal panels (log activity, reply, follow-up) via <details>. */
.activity-new { margin-bottom: 1rem; }
.activity-compose { margin-top: .4rem; }
.activity-compose > summary { cursor: pointer; color: var(--brand); font-size: .85rem; list-style: none; display: inline-block; }
.activity-compose > summary::-webkit-details-marker { display: none; }
.activity-new > summary { font-weight: 600; font-size: .9rem; }
.activity-compose[open] > summary { margin-bottom: .4rem; }
.activity-compose form { display: grid; gap: .4rem; }
/* Edit panel: pack the type/direction/status selects onto one wrapping row. */
.activity-compose .edit-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.activity-compose .edit-row select { width: auto; flex: 1 1 90px; min-width: 90px; }

/* One activity row */
.activity-item { padding: .5rem 0; border-top: 1px solid var(--line); }
.activity-item:first-child { border-top: none; }
.activity-head { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.activity-subject { font-weight: 600; margin: .2rem 0; }
.activity-meta { margin-top: .15rem; }
.activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
.activity-actions .activity-status-form { display: inline-flex; gap: .25rem; align-items: center; }
.activity-actions select { width: auto; padding: .2rem .35rem; font-size: .8rem; }
.linkbtn-ok { color: var(--ok); }
.linkbtn-ok:hover { color: var(--ok); text-decoration: underline; }

/* Direction glyphs (received vs sent) */
.dir { font-size: .72rem; font-weight: 700; }
.dir-in { color: var(--brand); }
.dir-out { color: var(--muted); }

/* Thread card: master + nested replies/follow-ons */
.activity-thread { border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem .7rem; margin-bottom: .6rem; }
.activity-replies { border-left: 2px solid var(--line); margin: 0 0 .2rem .3rem; padding-left: .7rem; }

/* Activity status pills (extend the shared vocabulary; .pill-cancelled exists) */
.pill-pending   { background: #fdf6e3; color: var(--warn); }
.pill-completed { background: #e7f6ee; color: var(--ok); }
.pill-overdue   { background: #fdeceb; color: var(--err); }

/* @mentions — rendered tokens + the inline typeahead dropdown */
.mention { color: var(--brand); font-weight: 600; text-decoration: none; }
.mention:hover { text-decoration: underline; }
.mention-user { cursor: default; }
.mention-menu {
  position: absolute; z-index: 60; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20, 40, 70, .14);
  min-width: 220px; max-width: 320px; max-height: 220px; overflow-y: auto;
}
.mention-opt {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; padding: .35rem .6rem; cursor: pointer;
}
.mention-opt.active, .mention-opt:hover { background: var(--bg); }
.mention-opt-label { font-weight: 600; }
.mention-opt-sub { color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* Notes section (contact/account detail) */
.notes-section { margin-top: 1.5rem; }
.note-new { margin: .3rem 0 .6rem; }
.notes-list { margin-top: .3rem; }
.note-item { border-top: 1px solid var(--line); padding: .55rem 0; }
.note-item:first-child { border-top: none; }
.note-item.pinned { background: #fffdf3; border: 1px solid #f3e7c4; border-radius: 8px; padding: .55rem .7rem; margin-bottom: .4rem; }
.note-body { white-space: normal; overflow-wrap: anywhere; }
.note-meta { margin-top: .3rem; }
.note-meta form.inline { display: inline; }
.check { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.check input { width: auto; }

/* Collapse to a single column on narrow screens (align with existing 820 bp). */
@media (max-width: 900px) {
  .crm-detail-layout { grid-template-columns: 1fr; }
  .activity-sidebar { position: static; max-height: none; }
}

/* ======================================================================
   Next Best Action panels (home worklist + account/contact record panels).
   Reuses .panel / .feature-panel; adds the ranked list, priority badges and
   the inline accept / snooze / dismiss controls. See docs/CRM_NBA.md.
   ====================================================================== */
.nba-panel { margin-bottom: 1.25rem; }
.nba-count { background: var(--crm); color: #fff; font-weight: 700; }
.nba-allclear { margin: .5rem 0 0; color: var(--ok); }
.nba-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; }
/* A tinted left rule keys each row to its priority without shouting. */
.nba-item { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0 .6rem .6rem;
  border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.nba-item:first-child { border-top: none; }
.nba-prio-high { border-left-color: var(--err); }
.nba-prio-medium { border-left-color: var(--warn); }
.nba-prio-low { border-left-color: var(--line); }
.nba-item-icon { font-size: 1.1rem; line-height: 1.4; flex: 0 0 auto; }
.nba-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nba-item-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.nba-item-title { color: var(--ink); text-decoration: none; font-weight: 600; }
.nba-item-title:hover { color: var(--crm); text-decoration: underline; }
.nba-reason { color: var(--muted); margin-top: .15rem; }
.nba-ai { cursor: help; }
/* Priority badges reuse the .badge pill base with state colours. */
.badge-priority { text-transform: uppercase; font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
.badge-priority-high { background: #fdeceb; color: var(--err); }
.badge-priority-medium { background: #fdf6e3; color: var(--warn); }
.badge-priority-low { background: #eef2f7; color: var(--muted); }
/* Compact, right-aligned inline controls. The mobile-nav rule forces .linkbtn to
   width:100%, so opt these back to auto (same fix as the AI panel). */
.nba-item-actions { display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
.nba-item-actions .linkbtn { width: auto; font-size: .95rem; line-height: 1; }
.nba-snooze:hover { color: var(--warn); }

/* ======================================================================
   eSignature envelopes — recipient rows, drag-chip field placement, and the
   standalone signer portal (docs/EXTERNAL_ESIGNATURES.md). Reuses .panel /
   .btn / .data-table / .auth-card; chips carry their recipient colour inline.
   ====================================================================== */
.esign-suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.esign-external-fields { display: flex; gap: .4rem; flex-wrap: wrap; }
.esign-external-fields[hidden], .esign-internal-fields[hidden] { display: none; }
.esign-placement-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
.esign-palette { position: sticky; top: 1rem; }
.esign-pages { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.esign-page { position: relative; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
.esign-page img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.esign-page-number { position: absolute; right: .4rem; bottom: .3rem; font-size: .7rem;
  color: var(--muted); background: rgba(255, 255, 255, .85); padding: 0 .3rem; border-radius: 3px; }
.sig-chip { display: flex; align-items: center; gap: .3rem; border: 2px dashed currentColor;
  border-radius: 6px; padding: .3rem .55rem; font-size: .85rem; font-weight: 600;
  background: rgba(255, 255, 255, .88); cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; margin: .3rem 0;
  overflow: hidden; white-space: nowrap; }
.sig-chip[hidden] { display: none; }
.sig-chip-done { opacity: .45; }
.sig-chip-placed { position: absolute; margin: 0; z-index: 5; }
.sig-chip-ghost { position: fixed; z-index: 100; pointer-events: none; opacity: .8; margin: 0; }
@media (max-width: 900px) {
  .esign-placement-layout { grid-template-columns: 1fr; }
  .esign-palette { position: static; }
}
/* Signer portal (standalone pages, gate-page pattern; reuse .auth-card). */
.portal-card { max-width: 760px; margin: 2rem auto; }
.portal-doc { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.portal-doc img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.portal-consent { display: flex; gap: .5rem; align-items: flex-start;
  background: var(--panel, #f8fafc); border: 1px solid var(--line);
  border-radius: 6px; padding: .6rem .8rem; margin: .8rem 0; }
.otp-input { font-size: 1.4rem; letter-spacing: .4em; text-align: center; }