/* CSS Variables — scoped to the Letter Review page ONLY.
   These were previously on :root, which leaked this page's navy theme into the
   global design system: letter-review.css is loaded app-wide in App.razor and
   loads after design-tokens.css, so its :root override turned --color-primary
   (Engage blue #2563eb) into navy for EVERY page's .btn-primary. Scoping to
   .review-container (the page's root element) keeps the navy look here while
   leaving the global token untouched. Do NOT move these back to :root.

   The page-local primary tones are also namespaced --lr-* (lr = letter-review)
   so they can never again collide with the global --color-primary token names.
   Note: --color-primary-bg / --color-primary-hover used elsewhere in this file
   are the GLOBAL design tokens (intentional) — only the bare --color-primary
   and --color-primary-light were the page-local overrides. */
.review-container {
    --lr-primary: #1e3a5f;
    --lr-primary-light: #2d5a87;
    --color-accent: #3b82f6;
    --color-accent-hover: var(--lr-primary);
    --color-success: var(--color-success-light);
    --color-warning: var(--color-warning);
    --color-danger: #ef4444;

    --color-bg: #f8fafc;
    --color-bg-paper: #ffffff;
    --color-bg-sidebar: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;

    --color-text: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;

    /* AI Change Highlight Colors */
    --color-ai-field: var(--color-primary-bg);
    --color-ai-field-border: #3b82f6;
    --color-ai-generated: var(--color-warning-bg);
    --color-ai-generated-border: var(--color-warning);
    --color-ai-suggestion: var(--color-success-bg);
    --color-ai-suggestion-border: var(--color-success-light);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-paper: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Georgia', 'Times New Roman', serif;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    --sidebar-width: 350px;
}

/* Layout */
.review-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 2200px;
    margin: 0 auto;
    overflow: hidden;
}

/* Action Bar */
.action-bar {
    display: flex;
    /* Stretch children vertically so the center workflow slot can fill the full
       60px height. Left/right clusters re-center their own contents below. */
    align-items: stretch;
    justify-content: space-between;
    height: 60px;
    min-height: 60px;
    flex-shrink: 0;
    padding: 0 20px;
    background: var(--color-bg-paper);
    border-bottom: 1px solid var(--color-border);
    /* Own stacking context above the editor/clause content below, so header
       dropdowns (the Send menu) render over the panel content instead of behind
       it (e.g. the "Engage Suggest Clauses" button). Stays well below modals (999999+). */
    position: relative;
    z-index: 1100;
}

.action-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Left cluster shouldn't elastically grow — center slot takes leftover space. */
    flex-shrink: 0;
}

.action-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* "External Reviewer" action dropdown — consolidates Send / View Changes /
   Re-Send into one button to keep the action bar uncluttered. */
.ext-reviewer-dropdown {
    position: relative;
    display: inline-flex;
    /* Own stacking context ABOVE the full-viewport .ext-reviewer-overlay (z-index 1000) so the
       menu items win the hit-test — otherwise the transparent overlay sits over the menu and
       swallows hover/clicks (menu is visible but nothing is clickable). */
    z-index: 1002;
}

.ext-reviewer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative; /* anchor for the #119 reviewer-responded dot */
}

.ext-reviewer-caret {
    margin-left: 2px;
}

/* #119: small Engage-blue dot signalling the external reviewer has responded.
   On the toggle button it sits at the top-right corner (like the dot over the
   "A" in the Engage logo); inline in the menu it trails the View Changes label. */
.ext-reviewer-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary);
    flex: 0 0 auto;
}

.ext-reviewer-toggle .ext-reviewer-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    box-shadow: 0 0 0 2px var(--bg-primary, #ffffff); /* halo so it reads against the button */
}

.ext-reviewer-dot-inline {
    margin-left: auto; /* push to the trailing edge of the View Changes item */
}

/* Click-catcher so clicking anywhere else closes the menu. */
.ext-reviewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.ext-reviewer-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1001;
    min-width: 210px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-bg-paper, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
}

.ext-reviewer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.ext-reviewer-item i {
    font-size: 14px;
    color: var(--color-primary);
}

.ext-reviewer-item:hover:not(:disabled) {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary);
}

.ext-reviewer-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ext-reviewer-item:disabled i {
    color: var(--text-muted, #9ca3af);
}

.ext-reviewer-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--color-border, #e5e7eb);
}

/* Destructive "Cancel Review" item (#116). */
.ext-reviewer-item-danger {
    color: var(--color-danger, #dc2626);
}

.ext-reviewer-item-danger i {
    color: var(--color-danger, #dc2626);
}

.ext-reviewer-item-danger:hover:not(:disabled) {
    background: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger-dark, #b91c1c);
}

.ext-reviewer-item-danger:hover:not(:disabled) i {
    color: var(--color-danger-dark, #b91c1c);
}

/* Center slot for the workflow progress indicator. Claims all leftover space
   between left (back + title) and right (actions) AND stretches to the full
   height of the action bar so the workflow pill reads as a full-height
   focal element. */
.action-bar-center {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;      /* keep the existing dots-fill-height behaviour */
    justify-content: center;
    gap: 12px;                 /* breathing room between label and the dots */
    min-width: 0;
    padding: 0 16px;
}

/* Small uppercase muted label that sits to the LEFT of the workflow dots.
   Style matches the rest of the in-app secondary-meta labels (uppercase,
   letter-spaced, muted) so it reads as a caption, not a button. The label
   self-centers vertically within the stretched action-bar row so it lines
   up with the dots (which fill the full row height) and with the icon
   buttons on either side of the bar. */
.pathway-progress-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    flex: 0 0 auto;
    align-self: center;
    line-height: 1;
}

/* When the workflow pill lives in the action-bar-center slot, override the
   compact pill padding/border-radius so it spans full height with the dots
   centered within. The original .workflow-progress style (small chip with
   999px radius) only applies when it's NOT inside the center slot — e.g.
   if anyone embeds the component elsewhere it still looks pill-shaped. */
.action-bar-center > .workflow-progress {
    height: 100%;
    border-radius: 0;
    border: none;
    /* Remove the side dividers entirely — the colored dots are sufficient
       focal point without bracketing borders. */
    background: transparent;
    padding: 0 24px;
}

.action-bar-center > .workflow-progress.preview {
    background: transparent;
}

.action-bar-center > .workflow-progress.no-workflow {
    background: transparent;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-back:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.document-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.title-input {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--radius-sm);
    min-width: 300px;
    outline: none;
}

.title-input:hover {
    background: var(--color-bg);
}

.title-input:focus {
    background: var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.save-status {
    font-size: 12px;
    padding-left: 8px;
    color: var(--color-success);
}

.save-status.unsaved {
    color: var(--color-warning, var(--color-warning));
}

.save-status.message {
    color: var(--color-success);
    font-weight: 500;
}

/* Buttons — see design-tokens.css for canonical button rules. */

/* Icon-only modifier — collapses .btn-secondary into a square icon button.
   Used in the action bar for Preview / Download Word / History to reclaim
   horizontal space; the title attribute still surfaces what each one does. */
.btn-secondary.btn-icon-only {
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.btn-secondary.btn-icon-only > svg,
.btn-secondary.btn-icon-only > .spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Equalize action-bar button heights. Most buttons (Save, Send for Review,
   Send for Signature) use an inline 18px <svg> icon, but Submit / Cancel /
   Approve / Reject use Bootstrap-icon <i class="bi"> glyphs. Left at the
   default 14px button font-size those glyphs are smaller, so their buttons
   render a few px shorter than the svg-icon ones. Pinning the bar's bi glyphs
   to the same 18px icon box gives every action button an identical height. */
.action-bar-right .bi {
    font-size: 18px;
    line-height: 1;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.btn-icon:hover {
    background: var(--color-bg);
}

/* Read-only banner — sits between the action bar and the review content
   when the workflow restricts editing. Quiet amber/slate palette so it
   informs without alarming; explicit lock icon + reason text gives the
   user the "why" they were missing. */
.readonly-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    /* Engage blue info band (design tokens, not hard-coded hex) — informs
       without alarming and matches the "External Review" status badge. */
    background: var(--color-primary-bg-subtle);
    border-bottom: 1px solid var(--color-primary-bg);
    color: var(--color-info-text);
    font-size: 13px;
    flex-shrink: 0;
}

.readonly-banner-icon {
    font-size: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.readonly-banner-body strong {
    font-weight: 600;
    margin-right: 4px;
    color: var(--color-info-text);
}

.readonly-banner-detail {
    color: var(--color-info-text);
}

/* Main Content */
.review-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* Important for flex child scrolling */
}

/* Visual treatment for the editor when the user can't edit. The TinyMCE
   iframe is locked at the JS level but looks identical to edit mode at
   a glance — these styles add unambiguous cues:
     - subtle striped background behind the paper (the "you can't write here" cue)
     - desaturated toolbar so it reads as inactive
     - a "Read only" watermark badge in the paper's top-right corner
   Combined with the banner above, leaves no doubt the editor is locked. */
.review-content.is-readonly .tinymce-paper-wrapper {
    position: relative;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 14px,
            rgba(148, 163, 184, 0.06) 14px,
            rgba(148, 163, 184, 0.06) 28px
        ),
        var(--color-bg-subtle, #f9fafb);
    /* Engage-blue frame around the letter so the locked state is obvious at a
       glance, consistent with the read-only banner + "Read only" badge (#115). */
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

.review-content.is-readonly .tinymce-paper-wrapper::before {
    content: "Read only";
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 4px 22px;
    /* Engage-blue badge (tokens) so it matches the read-only banner + frame. */
    background: var(--color-primary-bg-subtle);
    color: var(--color-info-text);
    border: 1px solid var(--color-primary-bg);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    /* Lock icon as background SVG so we don't need to inject markup into the wrapper.
       Fill is Engage blue (#2563eb) to match the badge text/border. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%232563eb'><path d='M8 1a3 3 0 0 0-3 3v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-3-3zm-2 6V4a2 2 0 0 1 4 0v3H6z'/></svg>");
    background-repeat: no-repeat;
    background-position: 6px 50%, 0 0;
}

/* Mute the TinyMCE toolbar when read-only so it reads as inactive. The
   actual disable comes from TinyMCE's readonly mode; this is purely visual
   reinforcement. */
.review-content.is-readonly .tox-tinymce {
    opacity: 0.85;
    filter: saturate(0.5);
}

/* Sidebars */
.metadata-panel, .suggestions-panel, .client-sidebar {
    width: var(--sidebar-width);
    background: var(--color-bg-sidebar);
    overflow-y: auto;
    position: relative;
}

.metadata-panel {
    border-right: 1px solid var(--color-border);
}

.suggestions-panel, .client-sidebar {
    border-left: 1px solid var(--color-border);
}

.panel-content {
    padding: 12px;
}

.panel-section {
    margin-bottom: 24px;
}

.panel-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.panel-section h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.section-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-accent);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
}

/* AI Changes Summary */
.ai-changes-summary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 16px;
}

.ai-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ai-summary-header svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

.ai-summary-header span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.ai-summary-stats {
    display: flex;
    gap: 16px;
}

.ai-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ai-stat-dot.field { background: var(--color-ai-field-border); }
.ai-stat-dot.generated { background: var(--color-ai-generated-border); }
.ai-stat-dot.suggestion { background: var(--color-ai-suggestion-border); }

.ai-stat span {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.ai-stat strong {
    font-weight: 600;
    color: var(--color-text);
}

/* Legend */
.highlight-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-swatch {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid;
}

.legend-swatch.field {
    background: var(--color-ai-field);
    border-color: var(--color-ai-field-border);
}

.legend-swatch.generated {
    background: var(--color-ai-generated);
    border-color: var(--color-ai-generated-border);
}

.legend-swatch.suggestion {
    background: var(--color-ai-suggestion);
    border-color: var(--color-ai-suggestion-border);
}

.legend-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* AI Changes List */
.ai-changes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-change-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-change-item:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.ai-change-item.active {
    border-color: var(--color-accent);
    background: rgba(59, 130, 246, 0.05);
}

.change-indicator {
    width: 4px;
    height: 100%;
    min-height: 32px;
    border-radius: 2px;
    flex-shrink: 0;
}

.change-indicator.field { background: var(--color-ai-field-border); }
.change-indicator.generated { background: var(--color-ai-generated-border); }
.change-indicator.suggestion { background: var(--color-ai-suggestion-border); }

.change-content {
    flex: 1;
    min-width: 0;
}

.change-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.change-type.field { color: var(--color-ai-field-border); }
.change-type.generated { color: var(--color-ai-generated-border); }
.change-type.suggestion { color: var(--color-ai-suggestion-border); }

.change-field {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
}

.change-value {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.change-location {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* Inserted Fields Panel */
.inserted-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--color-ai-field);
    border: 1px solid var(--color-ai-field-border);
    border-left: 3px solid var(--color-ai-field-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.field-item:hover {
    background: #bfdbfe;
}

.field-item.editing {
    background: #e0f2fe;
    border-color: var(--color-accent);
}

.field-value {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.field-value .edit-icon {
    opacity: 0;
    transition: opacity var(--transition-fast);
    color: var(--color-text-muted);
}

.field-item:hover .field-value .edit-icon {
    opacity: 0.6;
}

.field-value:hover .edit-icon {
    opacity: 1 !important;
}

.field-value-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: white;
    outline: none;
    min-width: 0;
}

.field-value-input:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.field-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
}

.field-code {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-ai-field-border);
}

.field-value {
    font-size: 12px;
    color: var(--color-text-secondary);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta Sections */
.meta-section {
    margin-bottom: 16px;
}

.meta-section label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.meta-section input, .meta-section select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg-paper);
}

.meta-section input:focus, .meta-section select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Editor Area */
.editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Important for flex child scrolling */
    order: 2;
}

.document-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1;
    color: #6b7280;
    font-size: 14px;
}

.editor-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--color-bg-secondary, #f8f9fa);
    color: #6b7280;
    font-size: 14px;
    border-radius: 4px;
}

/* Editor Toolbar */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--color-bg-paper);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--color-border);
    margin: 0 8px;
}

.toolbar-spacer {
    flex: 1;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.toolbar-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.toolbar-btn .btn-text {
    font-size: 13px;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
    margin-left: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.zoom-control button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.zoom-control button:hover {
    background: var(--color-bg);
}

/* Document Wrapper */
.document-wrapper {
    flex: 1;
    /* TinyMCE's iframe owns its own scrollbar; previously we also had
       overflow-y: auto here, which produced a second, non-functional
       outer scrollbar because mouse-wheel events were captured by the
       editor iframe. Hide it so only TinyMCE's scrollbar is visible. */
    overflow: hidden;
    /* Symmetric 15px padding around the paper. Now that the paper no longer
       overflows (we removed the inch-based min-height on .document-paper),
       the padding-bottom shows correctly. 15px is tight enough to maximize
       document space while still giving the user a clear gray strip on all
       sides. */
    padding: 15px;
    display: flex;
    justify-content: center;
    background: var(--border-primary);
    min-height: 0; /* Important for flex child sizing */
}

/* Document Paper */
.document-paper {
    width: 100%;
    max-width: 1200px;
    /* Stretch to fit the wrapper's content area. Previously had min-height: 12.5in
       which forced the paper to be ~1200px tall — bigger than any normal viewport
       — so the paper overflowed INTO the .document-wrapper's padding-bottom
       (overflow: hidden clips at the padding-box border, not the content edge).
       That covered the bottom gray strip we WANT visible. Letting the paper fit
       the visible canvas via height: 100% means TinyMCE inside still handles
       document scrolling, but the wrapper's padding-bottom stays visible as
       gray below the paper, so the user can tell when they've reached the
       end of the document area. */
    height: 100%;
    min-height: 0;
    background: var(--color-bg-paper);
    box-shadow: var(--shadow-paper);
    padding: 60px 80px;
    font-family: var(--font-serif);
    font-size: 12pt;
    line-height: 1.6;
    color: #333;
    display: flex;
    flex-direction: column;
}

/* Letterhead */
.letterhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--text-faint);
    min-height: 60px;
    gap: 20px;
}

.letterhead-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.letterhead-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 9pt;
    color: var(--text-secondary);
    line-height: 1.4;
}

.letterhead-image {
    max-width: 150px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.letterhead-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    background: var(--bg-secondary);
    border: 1px dashed var(--text-faint);
    border-radius: 4px;
}

.no-letterhead-text {
    font-size: 10px;
    color: var(--text-placeholder);
    font-style: italic;
}

.office-name {
    font-weight: 600;
    font-size: 10pt;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.office-address {
    white-space: pre-line;
    margin-bottom: 2px;
}

.office-contact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 8pt;
    color: var(--text-muted);
}

.firm-name {
    font-family: var(--font-sans);
    font-size: 18pt;
    font-weight: 700;
    color: var(--lr-primary);
    letter-spacing: 2px;
}

.firm-address {
    text-align: right;
    font-size: 9pt;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* TinyMCE Paper Mode - matches Template Editor exactly */
.document-paper.tinymce-paper-mode {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.document-paper.tinymce-paper-mode .letter-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.document-paper.tinymce-paper-mode .letter-content-wrapper .tox-tinymce {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Removed min-height: 800px — same reasoning as .document-paper above.
       flex: 1 makes the editor fill the wrapper, and the iframe inside has
       its own scroll for long documents. Forcing 800px caused the editor to
       overflow narrow viewports. */
    min-height: 0;
}

.document-paper.tinymce-paper-mode .tox .tox-edit-area__iframe {
    background-color: white;
}

.document-paper.tinymce-paper-mode .tox .tox-toolbar-overlord {
    padding: 0;
    background: var(--bg-secondary) !important;
}

.document-paper.tinymce-paper-mode .tox .tox-toolbar__primary {
    background: none;
}

.document-paper.tinymce-paper-mode .tox .tox-editor-header {
    border-bottom: 1px solid var(--border-primary) !important;
    box-shadow: none !important;
}

/* Letter Content - Standard mode with letterhead/signature */
.letter-content-wrapper {
    min-height: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.letter-content-wrapper .tox-tinymce {
    flex: 1;
    border: 1px solid var(--border-primary) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    min-height: 400px;
}

.letter-content-wrapper .tox .tox-edit-area__iframe {
    background-color: white;
}

/* TinyMCE toolbar styling */
.letter-content-wrapper .tox .tox-toolbar-overlord {
    padding: 0;
}

.letter-content-wrapper .tox .tox-toolbar__primary {
    background: none;
}

.letter-content-wrapper .tox .tox-toolbar__group {
    padding: 0 4px;
}

.letter-content-wrapper .tox .tox-tbtn {
    height: 28px;
    width: auto;
    min-width: 28px;
}

.letter-content-wrapper .tox .tox-tbtn svg {
    transform: scale(0.85);
}

.letter-content-wrapper .tox .tox-tbtn--select {
    padding: 0 4px;
}

.letter-content-wrapper .tox .tox-editor-header {
    border-bottom: 1px solid var(--border-primary);
    box-shadow: none;
}

/* Legacy contenteditable styling (kept for fallback) */
.letter-content {
    min-height: 400px;
    outline: none;
}

.letter-content p {
    margin-bottom: 16px;
}

.letter-content ul {
    margin-bottom: 16px;
    padding-left: 24px;
}

.letter-content li {
    margin-bottom: 4px;
}

/* AI Highlight Styles */
.ai-field,
.inserted-field {
    background: var(--color-ai-field);
    border-bottom: 2px solid var(--color-ai-field-border);
    padding: 1px 4px;
    border-radius: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.ai-field:hover,
.inserted-field:hover {
    background: #bfdbfe;
}

.ai-field.highlighted,
.inserted-field.highlighted {
    background: #93c5fd;
    box-shadow: 0 0 0 2px var(--color-ai-field-border);
}

.ai-generated {
    background: var(--color-ai-generated);
    border-bottom: 2px solid var(--color-ai-generated-border);
    padding: 1px 4px;
    border-radius: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-generated:hover {
    background: #fde68a;
}

.ai-generated.highlighted {
    background: #fcd34d;
    box-shadow: 0 0 0 2px var(--color-ai-generated-border);
}

.ai-suggestion {
    background: var(--color-ai-suggestion);
    border-bottom: 2px solid var(--color-ai-suggestion-border);
    padding: 1px 4px;
    border-radius: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-suggestion:hover {
    background: #a7f3d0;
}

.ai-suggestion.highlighted {
    background: #6ee7b7;
    box-shadow: 0 0 0 2px var(--color-ai-suggestion-border);
}

/* Tooltip for AI highlights */
.ai-field::after,
.inserted-field::after,
.ai-generated::after,
.ai-suggestion::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--color-text);
    color: white;
    font-family: var(--font-sans);
    font-size: 11px;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 100;
}

.ai-field:hover::after,
.inserted-field:hover::after,
.ai-generated:hover::after,
.ai-suggestion:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Signature Block */
.signature-block {
    margin-top: 48px;
    width: 250px;
}

.signature-line {
    width: 100%;
    height: 1px;
    background: #333;
    margin-bottom: 8px;
}

.signature-name {
    font-weight: 600;
}

.signature-title {
    font-size: 11pt;
    color: var(--color-text-secondary);
}

/* Panel Tabs */
.panel-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.panel-tabs button {
    flex: 1;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.panel-tabs button.active {
    background: var(--color-accent);
    color: white;
}

/* Accepted AI content - no highlight */
.ai-accepted {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0;
}

.ai-accepted::after {
    display: none;
}

/* Accept/Revert buttons on hover */
.ai-change-item .change-actions {
    display: none;
    gap: 4px;
    margin-top: 8px;
}

.ai-change-item:hover .change-actions {
    display: flex;
}

.change-actions button {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-accept {
    background: var(--color-success);
    color: white;
    border: none;
}

.btn-accept:hover {
    background: var(--color-success);
}

.btn-revert {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.btn-revert:hover {
    background: var(--color-bg);
    border-color: var(--color-text-muted);
}

/* Accept All button */
.btn-accept-all {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--color-success);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-accept-all:hover {
    background: var(--color-success);
}

/* Collapsible sections */
.section-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.section-toggle svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.section-toggle.collapsed svg {
    transform: rotate(-90deg);
}

/* Signature Button - matches btn-primary style */
.btn-signature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-signature:hover {
    background: var(--color-accent-hover);
}

.btn-signature:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.2s ease;
    pointer-events: auto;
    isolation: isolate;
}

.modal-overlay * {
    pointer-events: auto;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Signature Modal */
.signature-modal {
    background: var(--color-bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 420px;
    max-height: 56vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease;
    pointer-events: auto;
    position: relative;
    z-index: 10000;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signature-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.signature-modal .modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    pointer-events: auto;
    z-index: 100001;
}

.modal-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.signature-modal .modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.signature-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.signature-modal .modal-footer button {
    pointer-events: auto;
    cursor: pointer;
}

/* Form Elements */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg-paper);
    transition: all var(--transition-fast);
    pointer-events: auto;
    cursor: text;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.document-info {
    padding: 10px 12px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
}

/* Alert Messages */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-top: 16px;
}

.alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--color-success);
}

/* Spinner */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Required Field Indicator */
.required {
    color: var(--color-danger);
    font-weight: 600;
}

/* Input Error State */
.input-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.input-error:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Field Error Message */
.field-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-danger);
}

/* ========================================
   Client Relationship Sidebar Styles
   ======================================== */

.client-sidebar {
    width: 340px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid var(--color-border);
    border-left: none;
    overflow: hidden;
    overflow-y: hidden; /* Override the parent auto setting */
    order: 1;
}

.client-sidebar .sidebar-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    flex-shrink: 0;
}

.client-sidebar .letter-prop-field input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-sidebar .letter-prop-field input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.client-sidebar .letter-prop-field input:disabled {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.btn-batch-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #fff;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-batch-nav:hover:not(:disabled) {
    background: #dbeafe;
    border-color: #93c5fd;
}

.btn-batch-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Sidebar Scrollbar */
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Sidebar Scrollbar */
.client-sidebar .sidebar-sections::-webkit-scrollbar {
    width: 6px;
}

.client-sidebar .sidebar-sections::-webkit-scrollbar-track {
    background: transparent;
}

.client-sidebar .sidebar-sections::-webkit-scrollbar-thumb {
    background: var(--text-faint);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   AI INSIGHTS PANEL - NEW DESIGN
   ═══════════════════════════════════════════════════════════════ */

.insights-panel {
    width: 380px;
    background: white;
    border-left: 1px solid var(--color-border);
    border-right: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    order: 3;
}

.insights-panel .panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.insights-panel .panel-header h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.insights-panel .panel-header h2 svg {
    color: #6366f1;
}

.insights-panel .insight-count {
    background: #6366f1;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.insights-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px;
    flex-shrink: 0;
}

.insight-tab {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
}

.insight-tab:hover {
    color: var(--text-secondary);
}

.insight-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 500;
}

.insights-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.insight-category {
    margin-bottom: 20px;
}

.insight-category .category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.insight-category .category-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.insight-category .category-count {
    font-size: 11px;
    color: var(--text-placeholder);
    margin-left: 6px;
}

/* Insight Cards - Draggable */
.insight-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: grab;
    transition: all 0.15s;
    position: relative;
}

.insight-card:hover {
    border-color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

.insight-card:active {
    cursor: grabbing;
}

.insight-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.insight-card.inserted {
    background: var(--color-success-bg);
    border-color: #a7f3d0;
}

.insight-card.inserted .insight-badge {
    background: var(--color-success-text);
    color: white;
}

.insight-type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.insight-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 4px;
}

.insight-badge.rate { background: var(--color-primary-bg); color: var(--color-info-text); }
.insight-badge.term { background: var(--color-warning-bg); color: var(--color-warning-text); }
.insight-badge.risk { background: var(--color-danger-bg); color: var(--color-danger-dark); }
.insight-badge.history { background: #f3e8ff; color: #6b21a8; }
.insight-badge.suggestion { background: var(--color-success-bg); color: var(--color-success-text); }

.insight-source {
    font-size: 11px;
    color: var(--text-placeholder);
}

.insight-card .insight-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}

.insight-card .insight-content strong {
    color: var(--text-primary);
}

.insight-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.insight-confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.confidence-bar {
    width: 40px;
    height: 4px;
    background: var(--border-primary);
    border-radius: 2px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: var(--color-success-light);
    border-radius: 2px;
}

.insight-actions {
    display: flex;
    gap: 4px;
}

.insight-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: white;
    color: var(--text-placeholder);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.insight-action:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.insight-action.insert {
    background: #6366f1;
    color: white;
}

.insight-action.insert:hover {
    background: #4f46e5;
}

.drag-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-placeholder);
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   LETTER CONTENT - AI HIGHLIGHT STYLES (NEW)
   ═══════════════════════════════════════════════════════════════ */

/* AI Inserted Content - Green highlight */
.ai-inserted {
    background: linear-gradient(120deg, var(--color-success-bg) 0%, #a7f3d0 100%);
    padding: 2px 4px;
    border-radius: 4px;
    position: relative;
}

.ai-inserted::after {
    content: "AI";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 9px;
    font-weight: 600;
    background: var(--color-success-light);
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-sans);
}

/* AI Suggestion - Yellow dashed underline */
.ai-suggestion-highlight {
    background: linear-gradient(120deg, var(--color-warning-bg) 0%, #fde68a 100%);
    padding: 2px 4px;
    border-radius: 4px;
    border-bottom: 2px dashed var(--color-warning);
    cursor: pointer;
}

.ai-suggestion-highlight:hover {
    background: #fde68a;
}

/* AI Warning - Red highlight */
.ai-warning {
    background: linear-gradient(120deg, var(--color-danger-bg) 0%, var(--color-danger-border) 100%);
    padding: 2px 4px;
    border-radius: 4px;
}

/* Drop zone indicator in letter */
.letter-drop-zone {
    min-height: 40px;
    border: 2px dashed var(--text-faint);
    border-radius: 8px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-placeholder);
    font-size: 13px;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.letter-drop-zone.active {
    border-color: #6366f1;
    background: #eef2ff;
    color: #6366f1;
}

/* Editable sections in letter */
.editable-section {
    position: relative;
    padding: 8px 12px;
    margin: -8px -12px;
    border-radius: 6px;
    transition: all 0.15s;
}

.editable-section:hover {
    background: var(--color-warning-bg);
}

.editable-section:focus {
    outline: none;
    background: var(--color-warning-bg);
    box-shadow: 0 0 0 2px var(--color-warning);
}

/* Completed/Signed Letter Styles */
.completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success) 100%);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.completed-badge svg {
    stroke: white;
}

.save-status.completed {
    color: var(--color-success);
    font-weight: 500;
}

.title-input[readonly] {
    background: transparent;
    cursor: default;
    color: var(--color-text);
}

/* ============================================
   Clauses Tab in Left Sidebar
   ============================================ */

/* Tab badge for clause count */
.insight-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: var(--color-success);
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
}

/* Clauses category container */
.clauses-category {
    padding-top: 1vh;
    padding-bottom: 8px;
}

.clauses-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Clause subsections */
.clause-subsection {
    margin-bottom: 16px;
}

.clause-subsection.recommended .subsection-header {
    color: var(--color-success);
}

.clause-subsection.added-clauses .subsection-header {
    color: var(--color-success-text);
}

.subsection-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 4px;
}

.subsection-header svg {
    flex-shrink: 0;
}

/* Clause search */
.clause-search {
    position: relative;
    margin-bottom: 12px;
}

.clause-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-placeholder);
    pointer-events: none;
}

.clause-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-size: 12px;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.clause-search input:focus {
    outline: none;
    border-color: var(--lr-primary);
    box-shadow: var(--shadow-focus);
}

.clause-search input::placeholder {
    color: var(--text-placeholder);
}

/* Clause drag item - matches template editor clause-item pattern */
.clause-drag-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background: white;
    border-bottom: 1px solid var(--border-primary);
    border-left: 3px solid transparent;
    margin-bottom: 0;
    cursor: grab;
    transition: all 0.2s ease;
}

.clause-drag-item:hover {
    background: #f0f9ff;
    border-left-color: var(--lr-primary);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.clause-drag-item:active {
    cursor: grabbing;
}

.clause-drag-item.dragging {
    opacity: 0.4;
    background: var(--color-primary-bg);
    border-left: 3px solid var(--lr-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.clause-drag-item.added {
    background: var(--color-success-bg-subtle);
    border-left: 3px solid #22c55e;
    cursor: default;
}

.clause-drag-item.added:hover {
    background: #ecfdf5;
    border-left-color: #22c55e;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
}

/* Drag handle */
.clause-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
    color: var(--text-faint);
    padding-top: 2px;
    transition: color 0.15s;
}

.clause-drag-item:hover .clause-drag-handle {
    color: var(--text-muted);
}

.clause-drag-item.added .clause-drag-handle {
    color: #22c55e;
}

/* Clause content */
.clause-drag-content {
    flex: 1;
    min-width: 0;
}

.clause-drag-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.clause-drag-item.added .clause-drag-name {
    color: #166534;
}

.clause-drag-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* Engage AI mark shown next to clauses the AI suggested, and in the AI group headers.
   The suggestions now live inside the normal clause list instead of a separate panel. */
.engage-ai-badge {
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-left: 6px;
    flex-shrink: 0;
}
.subsection-header .engage-ai-badge {
    margin-left: 0;
    margin-right: 2px;
}

/* Small analysis caption under the "Engage suggested" group header. */
.ai-group-analysis {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 2px 0 8px;
}

/* AI-drafted "missing" clauses aren't in the library yet — subtle tint + no drag affordance. */
.clause-drag-item.drafted {
    background: var(--color-info-bg, #eff6ff);
    cursor: default;
}

/* Insert button */
.clause-insert-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--lr-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.clause-insert-btn:hover {
    background: var(--color-primary-hover);
    transform: scale(1.05);
}

.clause-subsection.recommended .clause-insert-btn {
    background: var(--color-success);
}

.clause-subsection.recommended .clause-insert-btn:hover {
    background: #047857;
}

/* Remove button */
.clause-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    color: var(--text-placeholder);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.clause-remove-btn:hover {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

/* Empty state */
.clause-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-placeholder);
    font-size: 12px;
}

/* Show more/less button */
.clause-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 6px 0;
    margin-top: 4px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.clause-show-more-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Drag hint */
.clause-drag-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-top: 12px;
    background: var(--bg-secondary);
    border: 1px dashed var(--text-faint);
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.clause-drag-hint svg {
    color: var(--text-placeholder);
}

/* AI Suggest Button (in category header) */
.btn-ai-suggest-sm {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 10px;
    background: var(--lr-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-ai-suggest-sm:hover:not(:disabled) {
    background: var(--color-primary-hover);
    transform: scale(1.05);
}

.btn-ai-suggest-sm:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-ai-suggest-sm svg {
    color: white;
    stroke: white;
}

.spinner-sm {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* AI Suggestions Panel (Letter Review) */
.ai-suggestions-panel-lr {
    background: var(--bg-secondary);
    border: 1px solid #4338ca33;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.ai-suggestions-header-lr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #4338ca15;
    border-bottom: 1px solid #4338ca22;
}

.ai-suggestions-title-lr {
    font-size: 11px;
    font-weight: 600;
    color: #818cf8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #818cf8;
    padding: 2px;
    line-height: 1;
    opacity: 0.7;
}

.ai-close-btn:hover {
    opacity: 1;
}

.ai-analysis-text {
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    border-bottom: 1px solid var(--border-primary);
}

.ai-section-label-lr {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-placeholder);
    padding: 8px 12px 4px;
}

.ai-suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
    transition: background 0.1s;
    cursor: grab;
}

.ai-suggest-item:active:not(.added):not(.drafted) {
    cursor: grabbing;
}

.ai-suggest-item.added,
.ai-suggest-item.drafted {
    cursor: default;
}

.ai-suggest-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
    color: var(--text-disabled);
    margin-top: 2px;
}

.ai-suggest-item:hover .ai-suggest-drag-handle {
    color: var(--text-muted);
}

.ai-suggest-item.added .ai-suggest-drag-handle {
    color: #22c55e;
}

.ai-suggest-item:last-child {
    border-bottom: none;
}

.ai-suggest-item:hover {
    background: var(--surface-2);
}

.ai-suggest-item.added {
    opacity: 0.5;
}

.ai-suggest-item.drafted {
    background: #78350f0a;
}

.ai-suggest-content {
    flex: 1;
    min-width: 0;
}

.ai-suggest-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.ai-suggest-reason {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.ai-suggest-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ai-confidence-badge {
    font-size: 10px;
    font-weight: 600;
    color: #818cf8;
    background: #4338ca15;
    padding: 2px 6px;
    border-radius: 8px;
}

.btn-accept-draft-sm {
    padding: 3px 8px;
    background: none;
    color: #818cf8;
    border: 1px solid #4338ca33;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-accept-draft-sm:hover {
    background: #4338ca15;
    border-color: #818cf8;
}

.ai-added-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── OCG Compliance Status Bar ─── */

/* Legacy panel styles removed — OCG now uses inline status bar */

.ocg-status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 20px;
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-primary, #e5e7eb);
    font-size: 13px;
    color: var(--text-secondary, #374151);
    position: relative;
}

.ocg-status-bar svg {
    flex-shrink: 0;
}

.ocg-status-loading {
    justify-content: center;
    color: var(--text-muted, #6b7280);
}

.ocg-bar-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-primary, #e5e7eb);
    border-top-color: var(--lr-primary, #2563eb);
    border-radius: 50%;
    animation: ocg-bar-spin 0.6s linear infinite;
}

@keyframes ocg-bar-spin {
    to { transform: rotate(360deg); }
}

.ocg-status-error {
    background: #fef2f2;
    color: #dc2626;
}

.ocg-status-ok {
    background: #ecfdf5;
    color: #059669;
}

.ocg-status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    transition: all 0.15s;
    font-family: var(--font-sans);
}

.ocg-status-item:hover {
    opacity: 0.8;
}

.ocg-status-item.compliant {
    color: #059669;
    background: #ecfdf5;
}

.ocg-status-item.caution {
    color: #d97706;
    background: #fffbeb;
}

.ocg-status-item.noncompliant {
    color: #dc2626;
    background: #fef2f2;
}

.ocg-status-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    position: absolute;
    right: 12px;
    transition: all 0.15s;
}

.ocg-status-dismiss:hover {
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-primary, #111827);
}

/* Inline client ID input in status bar */
.ocg-inline-clientid {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ocg-inline-clientid input {
    padding: 4px 10px;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-sans);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #111827);
    width: 140px;
}

.ocg-inline-clientid input:focus {
    outline: none;
    border-color: var(--lr-primary, #2563eb);
}

.ocg-inline-clientid button {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: var(--lr-primary, #2563eb);
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
}

.ocg-inline-clientid button:hover:not(:disabled) {
    background: var(--color-primary-hover, #1d4ed8);
}

.ocg-inline-clientid button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Active state for status item when list is expanded */
.ocg-status-item.active {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Expandable term list dropdown */
.ocg-term-dropdown {
    max-height: 280px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-primary, #e5e7eb);
    background: var(--bg-primary, #ffffff);
    padding: 8px 20px;
}

.ocg-term-row {
    padding: 10px 12px;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--bg-primary, #ffffff);
}

.ocg-term-row:last-child {
    margin-bottom: 0;
}

.ocg-term-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ocg-term-row-icon {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.ocg-term-row-icon.compliant { color: #059669; }
.ocg-term-row-icon.caution { color: #d97706; }
.ocg-term-row-icon.noncompliant { color: #dc2626; }

.ocg-term-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.ocg-term-row-category {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    background: var(--bg-tertiary, #f3f4f6);
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: auto;
}

.ocg-term-row-reasoning {
    font-size: 12px;
    color: var(--text-secondary, #374151);
    line-height: 1.4;
    margin-bottom: 6px;
}

.ocg-term-row-suggested {
    font-size: 12px;
    color: var(--text-secondary, #374151);
    padding: 6px 8px;
    background: var(--bg-secondary, #f9fafb);
    border-left: 3px solid var(--lr-primary, #2563eb);
    border-radius: 0 4px 4px 0;
    margin-bottom: 6px;
    line-height: 1.4;
}

.ocg-term-row-suggested-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted, #6b7280);
    margin-right: 4px;
}

.ocg-term-row-action,
.ocg-term-row-scroll {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 4px;
    background: var(--bg-primary, #ffffff);
    color: var(--lr-primary, #2563eb);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
    margin-right: 6px;
}

.ocg-term-row-action:hover,
.ocg-term-row-scroll:hover {
    background: var(--lr-primary, #2563eb);
    color: white;
    border-color: var(--lr-primary, #2563eb);
}

.ocg-term-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ocg-suggest-toggle {
    gap: 4px;
}

.ocg-suggest-toggle.active {
    background: var(--lr-primary, #2563eb);
    color: white;
    border-color: var(--lr-primary, #2563eb);
}

/* AI Suggest placement panel */
.ocg-placement-panel {
    margin-top: 8px;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-primary, #ffffff);
}

.ocg-placement-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6b7280);
    padding: 8px 10px 4px;
}

.ocg-placement-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-top: 1px solid var(--border-secondary, #f3f4f6);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: background 0.15s;
}

.ocg-placement-option:first-of-type {
    border-top: none;
}

.ocg-placement-option:hover {
    background: var(--bg-secondary, #f9fafb);
}

.ocg-placement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-primary-bg, #dbeafe);
    color: var(--lr-primary, #2563eb);
    flex-shrink: 0;
}

.ocg-placement-manual .ocg-placement-icon {
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-muted, #6b7280);
}

.ocg-placement-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ocg-placement-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.ocg-placement-desc {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
}

/* Sidebar tabs (Clauses / Compliance) */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-primary, #e5e7eb);
    padding: 0 8px;
    margin-bottom: 12px;
}

.sidebar-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.sidebar-tab:hover {
    color: var(--text-primary, #111827);
}

.sidebar-tab.active {
    color: var(--lr-primary, #2563eb);
    border-bottom-color: var(--lr-primary, #2563eb);
}

.sidebar-tab-badge {
    font-size: 10px;
    font-weight: 600;
    background: #ef4444;
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* OCG sidebar compliance panel */
.ocg-sidebar-panel {
    padding: 0;
}

.ocg-sidebar-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 10px;
}

.ocg-filter-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.ocg-filter-btn:hover {
    border-color: var(--text-muted, #6b7280);
}

.ocg-filter-btn.active {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: var(--text-secondary, #374151);
    color: var(--text-primary, #111827);
}

.ocg-filter-btn.noncompliant.active { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.ocg-filter-btn.caution.active { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.ocg-filter-btn.compliant.active { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }

.ocg-sidebar-terms {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Term group */
.ocg-term-group {
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}

.ocg-term-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    text-align: left;
    transition: background 0.15s;
}

.ocg-term-group-header:hover {
    background: var(--bg-tertiary, #f3f4f6);
}

.ocg-group-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
}

.ocg-group-chevron.open {
    transform: rotate(90deg);
}

.ocg-term-group-name {
    flex: 1;
}

.ocg-term-group-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    background: var(--bg-primary, #ffffff);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.ocg-term-group-items {
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ocg-term-group-items .ocg-term-row {
    margin-bottom: 0;
    border-radius: 4px;
}

/* OCG loading panel */
.ocg-loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}

.ocg-loading-panel p {
    margin: 14px 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.ocg-loading-panel span {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.ocg-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-primary, #e5e7eb);
    border-top-color: var(--lr-primary, #2563eb);
    border-radius: 50%;
    animation: ocg-loading-spin 0.7s linear infinite;
}

@keyframes ocg-loading-spin {
    to { transform: rotate(360deg); }
}

/* Raw terms (pre-analysis) */
.ocg-raw-terms-header {
    margin-bottom: 14px;
}

.ocg-raw-terms-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
    margin-bottom: 6px;
}

.ocg-raw-terms-info svg {
    color: var(--lr-primary, #2563eb);
    flex-shrink: 0;
}

.ocg-raw-terms-hint {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin: 0;
    line-height: 1.4;
}

.ocg-term-row-pending {
    border-color: var(--border-primary, #e5e7eb);
}

.ocg-term-row-icon.pending {
    color: var(--text-muted, #6b7280);
}

.ocg-term-row-pending {
    cursor: pointer;
}

.ocg-term-row-pending:hover {
    border-color: var(--border-strong, #d1d5db);
}

.ocg-term-expanded {
    border-color: var(--lr-primary, #2563eb) !important;
    background: var(--bg-secondary, #f9fafb);
}

.ocg-term-expanded .ocg-term-row-reasoning {
    max-height: none;
    white-space: pre-wrap;
}

/* Analyzed header */
.ocg-analyzed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ocg-analyzed-count {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

/* ════════════════════════════════════════════════════════════════════════
   Approval workflow — action-bar dots + approve/reject button variants.
   ════════════════════════════════════════════════════════════════════════ */
.workflow-progress {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background: var(--color-bg-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    flex-shrink: 0;
}

/* Subtle "where am I in the workflow" chip rendered in the document-title
   block. Quiet by design — small text, slate tones, a tiny pulsing dot to
   draw the eye when the user scans the title row. Reads as metadata on
   the document, NOT as a status alert. */
.workflow-position-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;            /* slate-500 */
    letter-spacing: 0.01em;
    cursor: help;
}

.workflow-position-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563eb;       /* Engage primary blue — default (in-progress) */
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
    flex-shrink: 0;
}

/* Only the in-progress chip pulses — finished states (approved/rejected/cancelled)
   are static dots since there's no "ongoing" action to call attention to. */
.workflow-position-chip.in-progress .workflow-position-dot {
    animation: workflow-position-pulse 2.4s ease-in-out infinite;
}

.workflow-position-chip.approved .workflow-position-dot {
    background: #10b981;       /* emerald-500, matches approved workflow dot */
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}
.workflow-position-chip.approved {
    color: #047857;            /* emerald-700 — slightly tinted text reinforces success */
}

.workflow-position-chip.rejected .workflow-position-dot {
    background: #f43f5e;       /* rose-500, matches rejected workflow dot */
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.14);
}
.workflow-position-chip.rejected {
    color: #be123c;            /* rose-700 */
}

.workflow-position-chip.cancelled .workflow-position-dot {
    background: #94a3b8;       /* slate-400 */
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.14);
}
.workflow-position-chip.cancelled {
    color: #64748b;            /* slate-500 — neutral grey for cancelled */
}

@keyframes workflow-position-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14); }
    50%      { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.06); }
}

.workflow-position-text {
    /* Truncate gracefully if step name + assignee gets long. */
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Preview mode — letter hasn't entered the workflow yet. Slightly muted so it
   reads as "this is what would happen" rather than "this is in progress". */
.workflow-progress.preview {
    background: transparent;
    border-style: dashed;
    opacity: 0.85;
}

.workflow-progress.preview .workflow-progress-label {
    color: var(--text-muted, #6b7280);
}

/* "No approval required" fallback pill — same shape as the dots container so
   the action bar slot stays visually consistent whether or not a workflow
   applies. Muted color signals "informational, no action needed". */
.workflow-progress.no-workflow {
    background: transparent;
    border: 1px dashed var(--color-border, #d1d5db);
    color: var(--text-muted, #6b7280);
    cursor: help;
}

.workflow-progress.no-workflow .bi {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
}

.workflow-progress.no-workflow .workflow-progress-label {
    color: var(--text-muted, #6b7280);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 12px;
}

.workflow-progress-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6b7280);
}

.workflow-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Workflow dot palette — refined emerald / slate / rose tones rather than
   primary green/blue/red. Softer hues, no thick borders, subtle inner
   shadow for depth. Reads as a polished status indicator instead of
   "primary alert colors slapped on circles." */
.workflow-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    transition: transform 0.12s, box-shadow 0.2s;
    cursor: help;
    letter-spacing: -0.02em;
}

.workflow-dot.upcoming {
    background: #f1f5f9;          /* slate-100 */
    color: #94a3b8;               /* slate-400 */
    border-color: #e2e8f0;        /* slate-200 */
}

.workflow-dot.current {
    background: #2563eb;          /* Engage primary blue */
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    animation: workflow-pulse 1.8s ease-in-out infinite;
}

.workflow-dot.approved {
    background: #10b981;          /* emerald-500 — cleaner than #16a34a green-600 */
    color: #fff;
    border-color: #10b981;
}

.workflow-dot.rejected {
    background: #f43f5e;          /* rose-500 — softer than #dc2626 red-600 */
    color: #fff;
    border-color: #f43f5e;
}

.workflow-dot.skipped {
    background: #f8fafc;          /* slate-50 */
    color: #cbd5e1;               /* slate-300 */
    border-color: #e2e8f0;
    opacity: 0.7;
}

.workflow-dot:hover { transform: scale(1.08); }

/* "You are here" focus highlight — applied to whichever step the letter
   currently sits at (current/rejected/final/cancelled depending on state).
   Subtle color-matched outer halo so the focus dot reads as elevated without
   adding any extra UI chrome. Each status gets its own halo color so the
   highlight reinforces the dot's existing color language. */

/* Default focus halo — slate, for "upcoming" / fallback states. */
.workflow-dot.is-focus {
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.22);
    transform: scale(1.08);
}

/* Current step — Engage blue, slightly stronger than the existing pulse since the
   focus AND pulse stack here. Override the default pulse keyframe's shadow
   with the focus shadow as the baseline so the pulse breathes around it. */
.workflow-dot.is-focus.current {
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.24);
    animation: workflow-pulse-focus 1.8s ease-in-out infinite;
}
@keyframes workflow-pulse-focus {
    0%, 100% { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.24); }
    50%      { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12); }
}

/* Approved focus — emerald halo when the workflow is complete (focus = last step). */
.workflow-dot.is-focus.approved {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.22);
}

/* Rejected focus — rose halo on the step that got rejected. */
.workflow-dot.is-focus.rejected {
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.22);
}
.workflow-dot .bi {
    font-size: 13px;
    line-height: 1;
    /* Slight emboss for legibility on the colored backgrounds. */
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
}

.workflow-dot-connector {
    width: 16px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}

.workflow-dot-connector.solid {
    background: #6ee7b7;          /* emerald-300 — softer than emerald-500 dots */
}

.workflow-dot-connector.dashed {
    background: transparent;
    border-top: 1px dashed #cbd5e1;  /* slate-300 — thinner dashes read sleeker */
    height: 0;
}

@keyframes workflow-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
    50%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08); }
}

/* Approve / Reject action-bar button variants. Sit alongside .btn-primary
   and .btn-secondary so they inherit the same height + padding. */
.btn-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-success, #16a34a);
    color: #fff;
    border: 1px solid var(--color-success, #16a34a);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-success:hover:not(:disabled) {
    background: #15803d;
    border-color: #15803d;
}

.btn-success:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--color-danger, #dc2626);
    border: 1px solid var(--color-danger, #dc2626);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-danger-outline:hover:not(:disabled) {
    background: var(--color-danger, #dc2626);
    color: #fff;
}

.btn-danger-outline:disabled { opacity: 0.5; cursor: not-allowed; }

/* Disabled send buttons get a subtle muted look so users see the gate clearly. */
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================
   Letter open — load smoothing (lowest-effort fade pass).

   When a user opens a letter, the page rendered in three jolts:
     1. Page shell + empty Properties panel snap in (~150ms after click)
     2. Properties data pops in once the API call returns (~1s)
     3. TinyMCE editor pops in once init finishes (~3s)

   Each pop felt unpolished. These rules add short opacity
   animations so the major reveals fade in instead of snapping.
   Pure CSS, no markup or code changes — `animation: ... both`
   only fires on first mount so subsequent re-renders are
   unaffected.

   `.tox-tinymce` is TinyMCE's own root element (created by JS,
   not Blazor), inserted into the DOM once init completes —
   making it the right hook for the editor's reveal.

   `prefers-reduced-motion` opts out for users who set it. */
@keyframes lr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.review-container {
    animation: lr-fade-in 180ms ease-out both;
}

.tox-tinymce {
    animation: lr-fade-in 220ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .review-container,
    .tox-tinymce {
        animation: none;
    }
}

/* #240: the container fades in once on load (above), but the async sub-panels populate a
   beat later as their API calls return — the pathway indicator and the clause list used to
   SNAP in. Give each a matching short fade so the staggered reveals read as an intentional
   cascade instead of jank. `both` fires once per element mount, so a panel animates when its
   data first lands, not on every re-render. */
.action-bar-center > *,
.action-bar-right > *,
.clauses-category .clause-subsection {
    animation: lr-fade-in 220ms ease-out both;
}

/* Subtle shimmer skeleton — reserves a slot's footprint while its data/permissions load so the
   real content fades into a held layout instead of snapping in and shoving neighbours. */
@keyframes lr-skeleton-shimmer {
    0%   { background-position: -180px 0; }
    100% { background-position: calc(180px + 100%) 0; }
}
.lr-skeleton {
    display: inline-block;
    background: linear-gradient(90deg, #e9edf2 25%, #f4f6f9 37%, #e9edf2 63%);
    background-size: 180px 100%;
    animation: lr-skeleton-shimmer 1.25s ease-in-out infinite;
    border-radius: 8px;
}
/* Holds the primary-action cluster's footprint while the workflow permissions resolve, so the
   Save / Approve / Submit buttons fade into a reserved space rather than popping in late. */
.action-bar-actions-skeleton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.action-bar-actions-skeleton .lr-skeleton {
    height: 34px;
}

@media (prefers-reduced-motion: reduce) {
    .action-bar-center > *,
    .action-bar-right > *,
    .clauses-category .clause-subsection {
        animation: none;
    }
    .lr-skeleton {
        animation: none;
        background: #e9edf2;
    }
}

/* #117: Comments tab in the right insights sidebar */
.insights-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--border-secondary, #f3f4f6);
    flex-shrink: 0;
}

.insights-tab {
    appearance: none;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.insights-tab:hover {
    color: var(--text-primary, #111827);
}

.insights-tab.active {
    color: var(--color-primary, #2563eb);
    border-bottom-color: var(--color-primary, #2563eb);
}

.insights-tab-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-info-text, #1e40af);
    background: var(--color-info-bg, #dbeafe);
    border-radius: var(--radius-full, 9999px);
    padding: 0 7px;
    min-width: 18px;
    text-align: center;
}

.insights-comments-footer {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-secondary, #f3f4f6);
    display: flex;
    justify-content: flex-end;
}

/* PDF Preview now uses the shared <Modal> (#301). Feature-scoped overrides on its CssClass:
   a wide frame and an edge-to-edge iframe body (the shared body has padding by default). */
.eng-modal.eng-pdf-preview-modal {
    width: 1100px;
    max-width: 90vw;
}

.eng-pdf-preview-modal .eng-modal-body {
    padding: 0 !important;
}