/**
 * ProseMirror Editor — Clinical Design System Integration
 *
 * ARCHITECTURE: Bridges to main design system (variables.css) for consistency
 * WHY: Unified dark mode, typography, and colors across the application
 * NOTE: Uses --pm-* namespace but values come from design system variables
 */

/* ===== DESIGN TOKENS (Bridged to variables.css) ===== */
:root {
    /* Typography - Use app's font stack */
    --pm-font-body: var(--font-sans);
    --pm-font-ui: var(--font-sans);
    --pm-font-mono: var(--font-mono);

    /* Core Palette - Bridge to design system */
    --pm-ink: var(--text-primary);
    --pm-ink-soft: var(--text-secondary);
    --pm-ink-muted: var(--text-tertiary);
    --pm-surface: var(--bg-primary);
    --pm-surface-raised: var(--bg-secondary);
    --pm-surface-sunken: var(--bg-tertiary);

    /* Borders */
    --pm-border: var(--border-light);
    --pm-border-subtle: var(--border-light);
    --pm-border-strong: var(--border-medium);

    /* Primary Accent - Use design system's teal accent */
    --pm-accent: var(--accent-600);
    --pm-accent-hover: var(--accent-700);
    --pm-accent-soft: var(--accent-100);
    --pm-accent-glow: rgba(13, 148, 136, 0.25);

    /* Clinical Section Colors */
    --pm-section-hpi: #3b82f6;
    --pm-section-assessment: var(--warning-500);
    --pm-section-plan: var(--success-500);
    --pm-section-exam: #8b5cf6;

    /* Semantic - Bridge to design system */
    --pm-success: var(--success-600);
    --pm-success-soft: var(--success-100);
    --pm-danger: var(--error-600);
    --pm-danger-soft: var(--error-100);

    /* Shadows - Use design system shadows */
    --pm-shadow-sm: var(--shadow-sm);
    --pm-shadow-md: var(--shadow-md);
    --pm-shadow-lg: var(--shadow-lg);
    --pm-shadow-glow: 0 0 0 3px var(--pm-accent-glow);

    /* Timing - Keep custom easing curves */
    --pm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --pm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Spacing - Use design system radius */
    --pm-radius-sm: var(--radius-md);
    --pm-radius-md: var(--radius-lg);
    --pm-radius-lg: var(--radius-xl);
}


/* ===== EDITOR CONTAINER ===== */
.note-output-section {
    background: var(--pm-surface);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-md);
    overflow: hidden;
    position: relative;
}

/* ===== PROSEMIRROR CORE ===== */
.ProseMirror {
    font-family: var(--pm-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--pm-ink);

    /* Refined surface with subtle texture */
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, transparent 100px),
        var(--pm-surface);

    padding: 2rem 2.5rem;
    min-height: 400px;
    height: 100%;
    overflow-y: auto;

    /* Elegant border treatment */
    border: 1px solid var(--pm-border);
    border-top: none;
    border-radius: 0 0 var(--pm-radius-lg) var(--pm-radius-lg);

    outline: none;
    transition: background 0.3s var(--pm-ease-out);

    /* Smooth scrolling */
    scroll-behavior: smooth;

    /* Optimized text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Whitespace handling */
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Focus state with glow */
.ProseMirror:focus,
.ProseMirror.ProseMirror-focused {
    background: var(--pm-surface);
    box-shadow: inset 0 1px 0 var(--pm-accent-soft);
}

/* Empty state placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--pm-ink-muted);
    font-style: italic;
    pointer-events: none;
    height: 0;
    float: left;
}


/* ===== TYPOGRAPHY SYSTEM ===== */

/* Headers - Bold geometric contrast */
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4 {
    font-family: var(--pm-font-ui);
    font-weight: 600;
    color: var(--pm-ink);
    letter-spacing: -0.02em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.ProseMirror h1 {
    font-size: 1.625rem;
    font-weight: 700;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--pm-border);
}

/* Accent line on left of H1 */
.ProseMirror h1::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 0.25rem;
    bottom: 0.75rem;
    width: 4px;
    background: linear-gradient(180deg, var(--pm-accent) 0%, transparent 100%);
    border-radius: 2px;
}

.ProseMirror h2 {
    font-size: 1.375rem;
    color: var(--pm-ink);
}

.ProseMirror h3 {
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pm-ink-soft);
}

/* Small accent dot before H3 */
.ProseMirror h3::before {
    content: '●';
    font-size: 0.5rem;
    color: var(--pm-accent);
    margin-right: 0.5rem;
    vertical-align: middle;
}

.ProseMirror h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pm-ink);
}

/* Body text */
.ProseMirror p {
    margin: 0.625rem 0;
    orphans: 3;
    widows: 3;
}

/* Emphasis marks */
.ProseMirror strong {
    font-weight: 600;
    color: var(--pm-ink);
}

.ProseMirror em {
    font-style: italic;
    color: var(--pm-ink-soft);
}

.ProseMirror u {
    text-decoration: underline;
    text-decoration-color: var(--pm-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}


/* ===== LISTS ===== */

.ProseMirror ul,
.ProseMirror ol {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}

.ProseMirror li {
    margin: 0.375rem 0;
    padding-left: 0.5rem;
    position: relative;
}

.ProseMirror ul > li::marker {
    color: var(--pm-accent);
}

.ProseMirror ol > li::marker {
    color: var(--pm-accent);
    font-weight: 600;
    font-family: var(--pm-font-ui);
}

.ProseMirror li p {
    margin: 0.25rem 0;
}

/* Nested lists */
.ProseMirror ul ul,
.ProseMirror ol ol,
.ProseMirror ul ol,
.ProseMirror ol ul {
    margin: 0.25rem 0;
}


/* ===== CLINICAL SECTION MARKERS ===== */

.ProseMirror .clinical-section {
    position: relative;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    border-radius: var(--pm-radius-md);
    border-left: 4px solid var(--pm-accent);
    background: linear-gradient(135deg, var(--pm-surface-raised) 0%, var(--pm-surface) 100%);
    box-shadow: var(--pm-shadow-sm);
}

/* Subtle corner accent */
.ProseMirror .clinical-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 100% 0%, var(--pm-accent-soft) 0%, transparent 70%);
    border-radius: 0 var(--pm-radius-md) 0 0;
    pointer-events: none;
}

.ProseMirror .clinical-section.hpi {
    border-left-color: var(--pm-section-hpi);
}

.ProseMirror .clinical-section.hpi::after {
    background: radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
}

.ProseMirror .clinical-section.assessment {
    border-left-color: var(--pm-section-assessment);
}

.ProseMirror .clinical-section.assessment::after {
    background: radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
}

.ProseMirror .clinical-section.plan {
    border-left-color: var(--pm-section-plan);
}

.ProseMirror .clinical-section.plan::after {
    background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
}


/* ===== TRACK CHANGES / SUGGESTIONS ===== */

.ProseMirror .suggestion {
    padding: 1px 4px;
    border-radius: 3px;
    transition: all 0.2s var(--pm-ease-out);
}

.ProseMirror .suggestion.insert {
    background: var(--pm-success-soft);
    border-bottom: 2px solid var(--pm-success);
    animation: suggestion-pulse 0.5s var(--pm-ease-out);
}

.ProseMirror .suggestion.delete {
    background: var(--pm-danger-soft);
    text-decoration: line-through;
    text-decoration-color: var(--pm-danger);
    opacity: 0.8;
}

.ProseMirror .suggestion:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

@keyframes suggestion-pulse {
    0% { background: var(--pm-success); color: white; }
    100% { background: var(--pm-success-soft); color: inherit; }
}


/* ===== DIFF HIGHLIGHTING ===== */
/* Used by highlightDiff() in pm-editor.js for accept/reject modal */

.diff-added {
    background: var(--pm-success-soft);
    font-weight: 600;
    border-radius: 2px;
    padding: 1px 2px;
}

.diff-removed {
    background: var(--pm-danger-soft);
    text-decoration: line-through;
    text-decoration-color: var(--pm-danger);
    border-radius: 2px;
    padding: 1px 2px;
}

.diff-context {
    color: var(--pm-ink-muted);
}


/* ===== SELECTION ===== */

.ProseMirror ::selection {
    background: var(--pm-accent-soft);
}

.ProseMirror ::-moz-selection {
    background: var(--pm-accent-soft);
}


/* ===== TOOLBAR ===== */

.pm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;

    /* Refined toolbar surface */
    background: linear-gradient(180deg, var(--pm-surface) 0%, var(--pm-surface-raised) 100%);
    border: 1px solid var(--pm-border);
    border-bottom: 1px solid var(--pm-border-strong);
    border-radius: var(--pm-radius-lg) var(--pm-radius-lg) 0 0;

    box-shadow: var(--pm-shadow-sm);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.pm-toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;

    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pm-radius-sm);

    color: var(--pm-ink-soft);
    font-size: 1.125rem;

    cursor: pointer;
    transition: all 0.15s var(--pm-ease-out);
    position: relative;
}

.pm-toolbar-button:hover {
    color: var(--pm-ink);
    background: var(--pm-surface-sunken);
    border-color: var(--pm-border);
    transform: translateY(-1px);
}

.pm-toolbar-button:active {
    transform: translateY(0) scale(0.95);
}

.pm-toolbar-button.active {
    color: white;
    background: var(--pm-accent);
    border-color: var(--pm-accent-hover);
    box-shadow: var(--pm-shadow-sm), 0 0 0 2px var(--pm-accent-soft);
}

.pm-toolbar-button.active:hover {
    background: var(--pm-accent-hover);
}

.pm-toolbar-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.pm-toolbar-button i {
    position: relative;
    z-index: 1;
}

.pm-toolbar-separator {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent 0%, var(--pm-border) 20%, var(--pm-border) 80%, transparent 100%);
    margin: 0 0.5rem;
}


/* ===== STREAMING GENERATION OVERLAY ===== */

.streaming-generation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    /* Frosted glass effect */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 1.5rem 2rem;
    border-radius: var(--pm-radius-lg) var(--pm-radius-lg) 0 0;
    border-bottom: 1px solid var(--pm-border);
    box-shadow: var(--pm-shadow-lg);

    animation: overlay-enter 0.4s var(--pm-ease-spring);
}

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

.streaming-generation-overlay.fade-out {
    animation: overlay-exit 0.3s var(--pm-ease-out) forwards;
}

@keyframes overlay-exit {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.streaming-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    font-family: var(--pm-font-ui);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--pm-ink);
}

.streaming-header i {
    font-size: 1.5rem;
    color: var(--pm-accent);
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.streaming-header button {
    margin-left: auto;
    font-family: var(--pm-font-ui);
}

.streaming-progress-container {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--pm-surface-sunken);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.streaming-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s var(--pm-ease-out);
    position: relative;

    /* Animated gradient */
    background: linear-gradient(
        90deg,
        var(--pm-accent) 0%,
        var(--pm-section-plan) 50%,
        var(--pm-accent) 100%
    );
    background-size: 200% 100%;
    animation: progress-shimmer 2s linear infinite;
}

@keyframes progress-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.streaming-progress-text {
    position: absolute;
    top: -24px;
    right: 0;
    font-family: var(--pm-font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pm-accent);
}

.streaming-stats {
    display: flex;
    gap: 1rem;
    font-family: var(--pm-font-ui);
    font-size: 0.875rem;
    color: var(--pm-ink-muted);
    align-items: center;
}

.streaming-stats span {
    font-family: var(--pm-font-mono);
    font-weight: 500;
    color: var(--pm-ink-soft);
}

.streaming-error {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: var(--pm-danger-soft);
    border-left: 4px solid var(--pm-danger);
    border-radius: var(--pm-radius-sm);
    font-family: var(--pm-font-ui);
    font-weight: 500;
    color: var(--pm-danger);
}

.streaming-error i {
    font-size: 1.375rem;
}


/* ===== EDIT BUTTON (Selection Context) ===== */

#editBtn {
    position: absolute;
    z-index: 200;

    padding: 0.5rem 1rem;
    background: var(--pm-ink);
    color: white;

    border: none;
    border-radius: var(--pm-radius-md);

    font-family: var(--pm-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;

    cursor: pointer;
    box-shadow: var(--pm-shadow-lg);

    display: none;
    transition: all 0.2s var(--pm-ease-spring);
}

/* Floating arrow */
#editBtn::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--pm-ink);
}

#editBtn:hover {
    background: var(--pm-accent);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--pm-shadow-lg), 0 0 0 3px var(--pm-accent-soft);
}

#editBtn:hover::after {
    border-top-color: var(--pm-accent);
}

#editBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#editBtn::before {
    content: '✎';
    margin-right: 0.375rem;
    font-size: 0.875rem;
}


/* ===== CANCEL BUTTON ===== */

#editCancelBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;

    padding: 0.75rem 1.5rem;
    background: var(--pm-danger);
    color: white;

    border: none;
    border-radius: 100px;

    font-family: var(--pm-font-ui);
    font-size: 0.875rem;
    font-weight: 600;

    cursor: pointer;
    box-shadow: var(--pm-shadow-lg), 0 0 0 4px var(--pm-danger-soft);
    z-index: 1000;

    display: none;
    transition: all 0.2s var(--pm-ease-spring);
}

#editCancelBtn:hover {
    background: #b91c1c;
    transform: scale(1.05);
    box-shadow: var(--pm-shadow-lg), 0 0 0 6px var(--pm-danger-soft);
}

#editCancelBtn:active {
    transform: scale(0.98);
}


/* ===== SCROLLBAR STYLING ===== */

.ProseMirror::-webkit-scrollbar {
    width: 8px;
}

.ProseMirror::-webkit-scrollbar-track {
    background: transparent;
}

.ProseMirror::-webkit-scrollbar-thumb {
    background: var(--pm-border-strong);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.ProseMirror::-webkit-scrollbar-thumb:hover {
    background: var(--pm-ink-muted);
    background-clip: content-box;
}


/* ===== DARK MODE ===== */
/* NOTE: Dark mode is handled automatically via bridged CSS variables from variables.css.
   The [data-theme="dark"] selector in variables.css updates all base variables,
   which cascade through the --pm-* bridges defined above. */


/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .ProseMirror {
        font-size: 15px;
        padding: 1.25rem 1.5rem;
        line-height: 1.7;
    }

    .ProseMirror h1::before {
        left: -1.5rem;
    }

    .pm-toolbar {
        padding: 0.625rem 0.75rem;
        gap: 0.25rem;
    }

    .pm-toolbar-button {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .pm-toolbar-separator {
        margin: 0 0.25rem;
    }

    #editBtn {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    #editCancelBtn {
        bottom: 1rem;
        right: 1rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
    }

    .streaming-generation-overlay {
        padding: 1.25rem 1.5rem;
    }
}


/* ===== PRINT STYLES ===== */

@media print {
    .pm-toolbar,
    .streaming-generation-overlay,
    #editBtn,
    #editCancelBtn {
        display: none !important;
    }

    .ProseMirror {
        border: none;
        box-shadow: none;
        padding: 0;
        font-size: 11pt;
        line-height: 1.5;
    }

    .ProseMirror h1,
    .ProseMirror h2,
    .ProseMirror h3 {
        page-break-after: avoid;
    }

    .ProseMirror h1::before,
    .ProseMirror h3::before {
        display: none;
    }
}


/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for keyboard navigation */
.pm-toolbar-button:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
}

#editBtn:focus-visible,
#editCancelBtn:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}


/* ===== EDITOR TIPS BANNER ===== */
/* Onboarding help for AI-powered editing features */

.editor-tips-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(14, 165, 233, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--pm-ink);
}

.editor-tips-banner.hidden {
    display: none;
}

.editor-tips-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.editor-tips-content i {
    color: #3b82f6;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.editor-tips-content span {
    color: var(--pm-ink-soft);
}

.editor-tips-content strong {
    color: var(--pm-ink);
    font-weight: 600;
}

.editor-tips-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--pm-ink-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.editor-tips-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pm-ink);
}

.editor-tips-dismiss i {
    font-size: 0.9rem;
}