/* ════════════════════════════════════════════════════════════════
   DocuSense — UI/UX Refinement Layer  (Grammarly-inspired)
   Loaded AFTER main.css. Pure visual/layout polish — no markup logic.
   Goals: calm, airy, professional surfaces for editors / QA / IDs.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Airier panel sizing */
  --sidebar-w:   300px;
  --comment-w:   368px;
  --rail-w:      46px;
  --header-h:    56px;
  --tab-h:       48px;

  /* Softer radii */
  --border-r:     10px;
  --border-r-sm:  7px;
  --border-r-lg:  14px;

  /* Calmer surfaces & hairlines */
  --c-bg:           #F3F6FA;
  --c-surface-2:    #F7F9FC;
  --c-border:       #E4E9F1;
  --c-border-light: #EEF2F8;

  /* Gentler shadows (Grammarly uses very soft elevation) */
  --shadow-sm:  0 1px 2px rgba(27,62,122,0.05), 0 1px 3px rgba(27,62,122,0.04);
  --shadow-md:  0 2px 8px rgba(27,62,122,0.07), 0 1px 3px rgba(27,62,122,0.05);
  --shadow-lg:  0 10px 30px rgba(27,62,122,0.10);
  --shadow-pop: 0 20px 48px rgba(20,35,70,0.18);
}

html { font-size: 14px; }

/* ───────────────────────────────────────────────────────────────
   HEADER — a touch calmer
─────────────────────────────────────────────────────────────── */
#ds-header { padding: 0 18px; gap: 14px; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 14px rgba(15,30,60,0.12); }
.ds-header-btn { width: 34px; height: 34px; border-radius: 8px; }
.btn-run-check { padding: 8px 18px; border-radius: 8px; letter-spacing: 0.3px; }

/* ───────────────────────────────────────────────────────────────
   PANEL HEADERS  (shared left + right)
─────────────────────────────────────────────────────────────── */
.ds-panel-header {
  height: 46px;
  padding: 0 10px 0 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border-light);
}
.ds-panel-header h3 { font-size: 11px; letter-spacing: 1px; color: var(--c-text-mid); }
.ds-panel-toggle {
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--c-text-muted);
}
.ds-panel-toggle:hover { background: var(--c-primary-pale); color: var(--c-primary-light); }
.ds-panel-toggle svg { width: 14px; height: 14px; }

/* ───────────────────────────────────────────────────────────────
   LEFT PANEL — accordion sections
─────────────────────────────────────────────────────────────── */
#ds-left { border-right: 1px solid var(--c-border); }
.ds-left-inner { padding: 8px 10px 16px; }
.ds-section { border-bottom: 1px solid var(--c-border-light); }
.ds-section:last-child { border-bottom: none; }
.ds-section-head {
  padding: 11px 8px;
  border-radius: 8px;
  gap: 9px;
}
.ds-section-head:hover { background: var(--c-surface-2); }
.ds-section.open > .ds-section-head { background: transparent; }
.ds-section-head span { font-size: 12.5px; font-weight: 600; }
.ds-section-body { padding: 2px 8px 12px; }

.ds-upload-zone-sm {
  border: 1.5px dashed var(--c-border);
  border-radius: 10px;
  padding: 16px 12px;
  background: var(--c-surface-2);
}
.ds-upload-zone-sm svg { width: 22px; height: 22px; margin-bottom: 6px; opacity: 0.8; }
.ds-upload-zone-sm p { font-size: 11px; line-height: 1.5; }

.ds-rule-item { padding: 7px 2px; gap: 9px; }
.ds-rule-item-text { font-size: 12px; }

/* ───────────────────────────────────────────────────────────────
   COLLAPSE / EXPAND RAILS  (both panels)
   Collapsed panel fully retracts; a slim rail provides re-expand.
─────────────────────────────────────────────────────────────── */
#ds-left.collapsed,
#ds-right.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border: none !important;
  overflow: hidden;
}
.ds-expand-rail {
  width: var(--rail-w);
  min-width: var(--rail-w);
  background: var(--c-surface);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.ds-expand-rail.left  { border-right: 1px solid var(--c-border); }
.ds-expand-rail.right { border-left: 1px solid var(--c-border); }
.ds-expand-rail:hover { background: var(--c-primary-pale); }
.ds-expand-rail .rail-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-pale);
  color: var(--c-primary-light);
  flex-shrink: 0;
}
.ds-expand-rail:hover .rail-btn { background: var(--c-primary-light); color: #fff; }
.ds-expand-rail .rail-btn svg { width: 15px; height: 15px; }
.ds-expand-rail .rail-label {
  writing-mode: vertical-rl;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  color: var(--c-text-muted);
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
}
.ds-expand-rail .rail-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--c-high);
  border-radius: 9px;
  min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ───────────────────────────────────────────────────────────────
   TAB BAR
─────────────────────────────────────────────────────────────── */
#ds-tab-bar {
  height: var(--tab-h);
  padding: 0 14px;
  gap: 4px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}
.ds-tab {
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: 0;
  font-size: 12.5px;
  gap: 7px;
  align-self: center;
  height: 34px;
}
.ds-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.ds-tab.active {
  background: var(--c-primary-pale);
  color: var(--c-primary);
  border-color: transparent;
  font-weight: 600;
}
.ds-tab.active svg { color: var(--c-primary-light); }
.ds-tab .tab-badge {
  min-width: 18px; height: 18px;
  border-radius: 9px;
  font-size: 10px;
}

/* ───────────────────────────────────────────────────────────────
   CENTER — document viewer canvas
─────────────────────────────────────────────────────────────── */
#ds-center { background: var(--c-bg); }
#ds-doc-viewer { padding: 28px 24px 48px; gap: 18px; }

.ds-doc-page {
  max-width: 800px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
}
.ds-page-header { padding: 8px 18px; }
.ds-page-content { padding: 30px 38px; font-size: 14px; line-height: 1.85; }

/* Document info / action bars */
.ds-doc-info-bar, .ds-doc-action-bar { max-width: 800px; border-radius: 10px; padding: 10px 16px; }

/* Highlight markers — calmer, Grammarly-like underline emphasis.
   These are the ONLY in-document indicators (no inline cards). */
.ds-highlight {
  background: rgba(245,166,35,0.16);
  border-bottom: 2px solid var(--c-accent);
  border-radius: 2px;
  padding: 0 0.5px;
}
.ds-highlight:hover { background: rgba(245,166,35,0.30); }
.ds-highlight.critical { background: rgba(192,57,43,0.12); }
.ds-highlight.high     { background: rgba(231,76,60,0.12); }
.ds-highlight.medium   { background: rgba(230,126,34,0.14); }
.ds-highlight.low      { background: rgba(39,174,96,0.12); }

/* Upload hero */
.ds-upload-hero { max-width: 640px; padding: 56px 40px; border-radius: 16px; border-width: 2px; }
.ds-upload-hero-icon { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 18px; }
.ds-upload-hero h2 { font-size: 20px; }
.ds-upload-hero p { font-size: 13.5px; }

/* ───────────────────────────────────────────────────────────────
   SHARED TAB HERO  (Style / Guidelines / Theory empty states)
   Consistent "upload + run + view" experience across every tab.
─────────────────────────────────────────────────────────────── */
.ds-tab-hero-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
}
.ds-tab-hero {
  width: 100%;
  max-width: 560px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 36px 32px;
  text-align: center;
}
.ds-tab-hero .hero-icon {
  width: 60px; height: 60px;
  border-radius: 15px;
  background: var(--c-primary-pale);
  border: 1.5px solid rgba(59,114,212,0.18);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.ds-tab-hero .hero-icon svg { width: 28px; height: 28px; color: var(--c-primary-light); }
.ds-tab-hero h3 { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.ds-tab-hero p  { font-size: 13px; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 8px; }
.ds-tab-hero .hero-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.ds-tab-hero .hero-note {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--c-border-light);
  font-size: 11.5px; color: var(--c-text-muted); line-height: 1.6;
}
.ds-tab-hero .hero-note strong { color: var(--c-text-mid); }

/* ───────────────────────────────────────────────────────────────
   RIGHT PANEL — Comments  (Grammarly-style cards)
─────────────────────────────────────────────────────────────── */
#ds-right { border-left: 1px solid var(--c-border); }

#ds-comment-filters {
  padding: 12px 14px;
  gap: 8px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border-light);
}
.ds-comment-search { padding: 8px 10px 8px 32px; font-size: 12px; border-radius: 8px; }
.ds-filter-row { gap: 8px; }
.ds-filter-select {
  padding: 7px 9px;
  font-size: 11.5px;
  border-radius: 8px;
  color: var(--c-text-mid);
}
.ds-filter-select:hover { border-color: var(--c-primary-light); }

#ds-comment-list { padding: 12px; gap: 10px; }

/* Stats bar */
.ds-comment-stats { padding: 2px 2px 6px; margin-bottom: 4px; }
.ds-stats-row { gap: 6px; }
.ds-stat-chip { padding: 3px 9px; border-radius: 20px; font-size: 10px; }
.ds-stats-progress { height: 4px; }

/* Comment card */
.ds-comment-card {
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ds-comment-card:hover { box-shadow: var(--shadow-md); transform: none; border-color: var(--c-border); }
.ds-comment-card.active,
.ds-comment-card.expanded { box-shadow: var(--shadow-md); }
.ds-comment-card.active { border-color: var(--c-primary-light); box-shadow: 0 0 0 3px rgba(59,114,212,0.14), var(--shadow-md); }

.ds-cc-head { gap: 7px; margin-bottom: 8px; align-items: center; }
.ds-crit-badge { padding: 3px 8px; border-radius: 6px; font-size: 9px; }
.ds-cc-tab { font-size: 9.5px; padding: 2px 7px; border-radius: 6px; text-transform: capitalize; }
.ds-cc-detected { padding: 2px 7px; border-radius: 6px; }
.ds-cc-page { font-size: 10px; }
.ds-cc-expand-btn { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }

.ds-cc-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 7px; }

/* Original text — quoted "problem" block */
.ds-cc-original {
  font-size: 12px;
  font-family: var(--font-body);
  background: var(--c-high-bg);
  border-left: 3px solid var(--c-high);
  border-radius: 0 7px 7px 0;
  padding: 7px 10px;
  margin-bottom: 7px;
  color: var(--c-text-mid);
  line-height: 1.5;
}
/* Suggested fix — green "solution" block */
.ds-cc-suggestion {
  font-size: 12px;
  font-family: var(--font-body);
  background: var(--c-low-bg);
  border-left: 3px solid var(--c-low);
  border-radius: 0 7px 7px 0;
  padding: 7px 10px 7px 12px;
  margin-bottom: 10px;
  color: #1d7a4d;
  line-height: 1.5;
  font-weight: 500;
}

/* Action buttons — soft pills */
.ds-cc-actions { gap: 6px; }
.ds-cc-btn {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.ds-cc-btn.accept  { background: var(--c-low);  color: #fff; }
.ds-cc-btn.accept:hover { background: #1f9e5c; filter: none; }
.ds-cc-btn.reject  { background: var(--c-surface-2); color: var(--c-text-mid); border: 1px solid var(--c-border); }
.ds-cc-btn.done    { background: var(--c-surface-2); color: var(--c-text-mid); border: 1px solid var(--c-border); }
.ds-cc-btn.reply   { background: var(--c-surface-2); color: var(--c-text-mid); border: 1px solid var(--c-border); }
.ds-cc-btn.delete  { background: transparent; color: var(--c-text-muted); margin-left: auto; padding: 6px 8px; }
.ds-cc-btn.delete:hover { background: var(--c-critical-bg); color: var(--c-critical); filter: none; }
.ds-cc-btn:hover { filter: brightness(0.97); }

.ds-cc-detail { border-radius: 9px; padding: 10px 12px; margin: 8px 0; }
.ds-cc-status-label { padding: 3px 9px; border-radius: 20px; }

/* Empty state */
.ds-comments-empty { padding: 56px 24px; gap: 14px; }
.ds-comments-empty svg { width: 48px; height: 48px; }
.ds-comments-empty p { font-size: 12.5px; }

/* Quick-actions footer + bulk bar */
#ds-bulk-bar { padding: 8px 12px; gap: 6px; }

/* ───────────────────────────────────────────────────────────────
   MODALS / POPUPS
─────────────────────────────────────────────────────────────── */
.ds-modal-overlay { background: rgba(15,28,55,0.5); backdrop-filter: blur(6px); }
.ds-modal { border-radius: 16px; box-shadow: var(--shadow-pop); }
.ds-modal-head { padding: 18px 22px; }
.ds-modal-head h2 { font-size: 16px; }
.ds-modal-body { padding: 22px; }
.ds-modal-footer { padding: 14px 22px; gap: 10px; }

.ds-field input, .ds-field select, .ds-field textarea { padding: 9px 11px; border-radius: 8px; font-size: 13px; }
.ds-btn { padding: 9px 18px; border-radius: 9px; }
.ds-btn-xs { padding: 6px 11px; border-radius: 7px; }

/* Rule-manager top tabs → segmented control look */
#modal-rules .ds-modal-body > div:first-child { gap: 4px; background: var(--c-surface-2); padding: 5px; border-radius: 10px; border: 1px solid var(--c-border-light); margin-bottom: 18px !important; }
#modal-rules .ds-modal-body > div:first-child .ds-btn-xs { border: none; flex: 1; justify-content: center; padding: 7px 6px; }
#modal-rules .ds-modal-body > div:first-child .ds-btn-xs.ghost { background: transparent; }
#modal-rules .ds-modal-body > div:first-child .ds-btn-xs.ghost:hover { background: var(--c-surface); }
#modal-rules .ds-modal-body > div:first-child .ds-btn-xs.primary { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-sm); }

/* Rules view rows */
.ds-rule-view-row { padding: 11px 4px; border-bottom: 1px solid var(--c-border-light); }
.ds-rule-view-row:last-child { border-bottom: none; }

/* AI mode cards */
.ds-ai-mode-card { border-radius: 12px; padding: 14px; }

/* ───────────────────────────────────────────────────────────────
   AI badge / status bar
─────────────────────────────────────────────────────────────── */
.ds-ai-badge { border-radius: 20px; padding: 5px 12px; }
#ds-status-bar { height: 26px; }

/* ───────────────────────────────────────────────────────────────
   SCROLLBARS — slightly more visible but still slim
─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3dbe7; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #b8c3d4; background-clip: padding-box; }

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE — keep rails usable on smaller screens
─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --sidebar-w: 270px; --comment-w: 340px; }
}