.citation-bar-label{ width:140px; font-size:0.88rem; }
.citation-bar-label.is-emphasis{ font-weight:600; }
.citation-bar-track{ flex:1; background:var(--line-dark); border-radius:4px; height:10px; overflow:hidden; }
.citation-bar-fill{ height:100%; }
.citation-bar-value{ width:50px; text-align:right; font-family:var(--font-mono); font-size:0.85rem; }
.mono-inline{ font-family:var(--font-mono); }

/* Basic modal overlay (evidence/detail modals such as AI Visibility's
   citation-evidence popup). Minimal by design — extend if a second modal
   use case needs more (focus trap, animation, etc). */
.modal-overlay{
  position:fixed; inset:0; background:var(--scrim); z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.modal-overlay.u-hidden{ display:none; }
.modal-box{ max-width:560px; width:90%; max-height:80vh; overflow-y:auto; }

/* Recommendation row (AI Visibility audit recommendations list). */
.rec-row{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-dark,rgba(255,255,255,0.08)); }

/* Revenue Intelligence stage/breakdown rows. */
.revenue-row{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.revenue-row.has-top-border{ border-top:1px solid var(--line-dark); }
.revenue-row-label{ min-width:260px; }
.revenue-row-value{ font-size:1.1rem; }
.revenue-stat{ font-size:1.5rem; }
.panel.is-danger{ border-color:var(--danger); }
.danger-text{ color:var(--danger-text); }
.field-flex{ flex:1 1 220px; min-width:180px; }
.field-label-sm{ display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:4px; }

/* Small input width utilities (inline numeric/short-text fields in forms). */
.input-w-xs{ width:70px; }
.input-w-sm{ width:90px; }
.stat-grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.u-my-tight{ margin:2px 0; }
.bordered-row{ border-top:1px solid var(--border); }
.text-right{ text-align:right; }
.panel.is-inset{ background:var(--surface-2); }
.revenue-row.has-bottom-border{ border-bottom:1px solid var(--line-dark); }
.revenue-stat-lg{ font-size:2rem; font-weight:700; }
.input-inline-md{ max-width:300px; display:inline-block; }

/* Grid form layouts and inline single-button forms (competitor edit/manage forms). */
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid-4{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; }
.field-span-full{ grid-column:1 / -1; }
.badge.is-middle{ vertical-align:middle; }
.form-inline{ display:inline; }

/* Cards-grid layout modifiers used by the journeys "other forks" and
   "exit points" sections. */
.cards-grid.is-auto-fill-300{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.cards-grid.is-two-col{ grid-template-columns:1fr 1fr; margin-top:0; }
.card.is-inset{ background:var(--surface-2); }
.u-mt-0{ margin-top:0; }

/* Content 360 overview grid (app/intelligence/content-360.php cards). */
.c360-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.panel.is-subdued{ opacity:0.85; }

/* Comment import layout (paste vs auto-extract two-column grid). */
.form-grid-2-wide{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.textarea-mono{ width:100%; font-family:var(--font-mono); font-size:0.85rem; }
.spinner-dot{ display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:middle; margin-right:8px; }

/* ==========================================================================
   APP SHELL — skip link (§58) and notification drawer (§30–32).
   Both reuse existing primitives: .sr-only-focusable (foundation.css) and
   .ui-drawer / .notif-* (components.css / notifications.css) — no new
   design language introduced.
   ========================================================================== */
.app-skip-link{
  z-index:var(--z-command);
  background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:0 0 8px 0;
  font-family:var(--font-body,inherit); font-weight:600; font-size:0.9rem;
  text-decoration:none;
}
.notif-drawer .ui-drawer-body{ padding:8px 0; }
.notif-drawer .notif-filter-tabs{ padding:0 22px 12px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.notif-drawer .notif-item{ padding:12px 22px; }
.notif-drawer .notif-empty,
.notif-drawer .notif-error{ padding:32px 22px; text-align:center; color:var(--text-muted,var(--text)); opacity:0.75; }
.notif-drawer .notif-skeleton{ padding:12px 22px; }
.notif-drawer .notif-skeleton .skeleton-line{ height:12px; margin:8px 0; border-radius:4px; background:var(--surface-3); animation:notif-skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes notif-skeleton-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
@media (prefers-reduced-motion: reduce){ .notif-drawer .skeleton-line{ animation:none; } }

/* ==========================================================================
   COPILOT DRAWER (§35–40) — deterministic assistant, not a chat product.
   Reuses .notif-item-top / -title / -summary / -actions (notifications.css)
   for result rows so a risk/opportunity/notification item looks the same
   wherever it's shown, and .ui-drawer for the shell (components.css above).
   ========================================================================== */
.copilot-subtitle{ display:block; font-size:.72rem; color:var(--text-muted); margin-top:2px; font-weight:400; }
.copilot-messages{ display:flex; flex-direction:column; gap:10px; padding:16px 22px; }
.copilot-msg{ max-width:88%; padding:9px 13px; border-radius:12px; font-size:.9rem; line-height:1.45; white-space:pre-wrap; }
.copilot-msg--assistant{ background:var(--surface-2); color:var(--text); align-self:flex-start; border-bottom-left-radius:4px; }
.copilot-msg--user{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-bottom-right-radius:4px; }
.copilot-msg.is-pending{ opacity:.65; }
.copilot-prompts{ display:flex; flex-wrap:wrap; gap:8px; }
.copilot-items{ display:flex; flex-direction:column; gap:10px; }
.copilot-item{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface); }
.copilot-action-done{ font-size:.78rem; color:var(--success,var(--text-muted)); font-weight:600; align-self:center; }
.copilot-input-row{ gap:8px; }
.copilot-input-row input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:.88rem; background:var(--surface); color:var(--text); }
.copilot-input-row input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
@media (prefers-reduced-motion: reduce){ .copilot-msg{ transition:none; } }

/* ========================================================================== 
   CANONICAL UI DRAWER — Phase 2 application-shell primitive
   Restores the shared drawer shell used by Notifications, Copilot and Evidence.
   Closed drawers stay out of document flow; components.js toggles .is-open.
   ========================================================================== */
.ui-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  background:var(--scrim,rgba(15,23,42,.42));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--duration-fast,180ms) var(--ease-out,ease),
             visibility 0s linear var(--duration-fast,180ms);
}
.ui-drawer-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--duration-fast,180ms) var(--ease-out,ease),
             visibility 0s linear 0s;
}
.ui-drawer{
  position:relative;
  width:min(440px,100vw);
  max-width:100%;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface,#fff);
  color:var(--text,#111827);
  border-left:1px solid var(--border,#e5e7eb);
  box-shadow:var(--shadow-xl,-16px 0 48px rgba(15,23,42,.16));
  overflow:hidden;
  transform:translateX(100%);
  transition:transform var(--duration-normal,220ms) var(--ease-out,ease);
}
.ui-drawer-overlay.is-open .ui-drawer{ transform:translateX(0); }
.ui-drawer-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff);
}
.ui-drawer-title{
  margin:0;
  color:var(--text,#111827);
  font-size:1rem;
  font-weight:650;
  line-height:1.3;
}
.ui-drawer-body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:18px 22px;
}
.ui-drawer-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border-top:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff);
}

/* Notification drawer filter row lives outside .ui-drawer-body. */
.notif-filter-tabs{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 22px;
  border-bottom:1px solid var(--border,#e5e7eb);
  background:var(--surface,#fff);
}
.notif-filter-tabs button{
  appearance:none;
  border:1px solid var(--border,#e5e7eb);
  border-radius:999px;
  background:var(--surface,#fff);
  color:var(--text-secondary,var(--text,#111827));
  padding:6px 11px;
  font:inherit;
  font-size:.78rem;
  line-height:1.2;
  cursor:pointer;
}
.notif-filter-tabs button:hover{ border-color:var(--border-strong,var(--border,#d1d5db)); }
.notif-filter-tabs button.active,
.notif-filter-tabs button[aria-selected="true"]{
  border-color:var(--accent,#6d4aff);
  background:var(--accent,#6d4aff);
  color:var(--accent-ink,#fff);
}

/* Keep drawer controls usable even if a page has unusually broad button rules. */
.ui-drawer [data-drawer-close]{ flex:0 0 auto; }
.ui-drawer-footer .btn-link{ white-space:nowrap; }

@media (max-width:640px){
  .ui-drawer{
    width:100vw;
    max-width:none;
    border-left:0;
  }
  .ui-drawer-header{ padding:16px 18px; }
  .ui-drawer-body{ padding:16px 18px; }
  .ui-drawer-footer{ padding:14px 18px; }
  .notif-filter-tabs{ padding:10px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .ui-drawer-overlay,
  .ui-drawer{
    transition:none;
  }
}