/* ==========================================================================
   NOTE RAIL - Inline AI Note Generation Rail
   EvroDark-inspired slideout rail pattern (2026-02)

   ARCHITECTURE: Inline rail beside clinical grid, expands/collapses with transition
   WHY: Less disruptive than overlay modal - user can see patient data alongside note
   TRADEOFF: Uses horizontal space vs overlay approach
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS VARIABLES - Rail-specific tokens
   -------------------------------------------------------------------------- */
:root {
    /* Rail dimensions */
    --rail-width-collapsed: 44px;
    --rail-width-expanded: 420px;
    --rail-transition-duration: 300ms;
    --rail-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Status colors (mapped to SOL palette) */
    --rail-status-idle: var(--sol-text-tertiary, #64748b);
    --rail-status-generating: var(--sol-info, #3b82f6);
    --rail-status-ready: var(--sol-stable, #22c55e);
    --rail-status-editing: var(--sol-warning, #f59e0b);

    /* Rail backgrounds */
    --rail-bg: var(--sol-bg-tertiary, #1c1f2a);
    --rail-bg-header: var(--sol-bg-secondary, #161922);
    --rail-border: var(--sol-border, rgba(255, 255, 255, 0.1));
}

/* --------------------------------------------------------------------------
   RAIL CONTAINER
   -------------------------------------------------------------------------- */
.note-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--rail-bg);
    border-left: 1px solid var(--rail-border);
    overflow: hidden;

    /* Smooth width transition */
    width: var(--rail-width-collapsed);
    transition: width var(--rail-transition-duration) var(--rail-transition-easing),
                border-color var(--rail-transition-duration) ease;
}

.note-rail.expanded {
    width: var(--rail-width-expanded);
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
}

/* Responsive widths */
@media (min-width: 1600px) {
    .note-rail.expanded {
        width: 480px;
    }
}

@media (max-width: 1200px) {
    .note-rail.expanded {
        width: 360px;
    }
}

/* --------------------------------------------------------------------------
   STATUS EDGE - Vertical gradient accent line
   -------------------------------------------------------------------------- */
.note-rail-edge {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity var(--rail-transition-duration) ease,
                background var(--rail-transition-duration) ease;
}

.note-rail.expanded .note-rail-edge {
    opacity: 0.9;
}

/* Status-based edge colors */
.note-rail[data-status="idle"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(100, 116, 139, 0.6),
        transparent
    );
}

.note-rail[data-status="generating"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(59, 130, 246, 0.9),
        rgba(59, 130, 246, 0)
    );
    animation: rail-edge-pulse 1.5s ease-in-out infinite;
}

.note-rail[data-status="ready"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(34, 197, 94, 0.9),
        rgba(34, 197, 94, 0)
    );
}

.note-rail[data-status="editing"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(245, 158, 11, 0.9),
        rgba(245, 158, 11, 0)
    );
}

@keyframes rail-edge-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   RAIL HEADER
   -------------------------------------------------------------------------- */
.note-rail-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--rail-bg-header);
    border-bottom: 1px solid var(--rail-border);
    min-height: 44px;
    gap: 8px;
}

/* Header content - expanded state */
.note-rail-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    opacity: 1;
    transition: opacity 150ms ease;
}

.note-rail:not(.expanded) .note-rail-header-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.note-rail-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sol-text-primary, #f8fafc);
    white-space: nowrap;
}

.note-rail-patient-label {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--sol-text-tertiary, #64748b);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header content - collapsed state */
.note-rail-collapsed-content {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.note-rail:not(.expanded) .note-rail-collapsed-content {
    display: flex;
}

.note-rail-collapsed-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sol-text-tertiary, #64748b);
}

/* --------------------------------------------------------------------------
   STATUS PILL (expanded state)
   -------------------------------------------------------------------------- */
.note-rail-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 150ms ease, color 150ms ease;
}

.note-rail-status-pill .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Status pill variants */
.note-rail[data-status="idle"] .note-rail-status-pill {
    background: transparent;
    color: var(--sol-text-tertiary);
}
.note-rail[data-status="idle"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-idle);
}

.note-rail[data-status="generating"] .note-rail-status-pill {
    background: rgba(59, 130, 246, 0.15);
    color: var(--rail-status-generating);
}
.note-rail[data-status="generating"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-generating);
    animation: status-dot-pulse 1s ease-in-out infinite;
}

.note-rail[data-status="ready"] .note-rail-status-pill {
    background: rgba(34, 197, 94, 0.15);
    color: var(--rail-status-ready);
}
.note-rail[data-status="ready"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-ready);
}

.note-rail[data-status="editing"] .note-rail-status-pill {
    background: rgba(245, 158, 11, 0.15);
    color: var(--rail-status-editing);
}
.note-rail[data-status="editing"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-editing);
}

@keyframes status-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   STATUS DOT (collapsed state)
   -------------------------------------------------------------------------- */
.note-rail-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 150ms ease;
}

.note-rail[data-status="idle"] .note-rail-status-dot {
    background: var(--rail-status-idle);
}

.note-rail[data-status="generating"] .note-rail-status-dot {
    background: var(--rail-status-generating);
    animation: status-dot-pulse 1s ease-in-out infinite;
}

.note-rail[data-status="ready"] .note-rail-status-dot {
    background: var(--rail-status-ready);
}

.note-rail[data-status="editing"] .note-rail-status-dot {
    background: var(--rail-status-editing);
}

/* --------------------------------------------------------------------------
   RAIL TOGGLE BUTTON
   -------------------------------------------------------------------------- */
.note-rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--sol-border-default, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    background: transparent;
    color: var(--sol-text-secondary, #94a3b8);
    font-size: 11px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}

.note-rail-toggle:hover {
    background: var(--sol-bg-hover, #2a2e3d);
    color: var(--sol-text-primary, #f8fafc);
}

.note-rail.expanded .note-rail-toggle {
    background: var(--sol-bg-elevated, #232736);
}

/* Toggle icon rotation */
.note-rail-toggle-icon {
    transition: transform 150ms ease;
}

.note-rail.expanded .note-rail-toggle-icon {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   RAIL BODY
   -------------------------------------------------------------------------- */
.note-rail-body {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding-top: 8px;
}

/* Collapsed state message */
.note-rail-collapsed-message {
    display: none;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    text-align: center;
}

.note-rail:not(.expanded) .note-rail-collapsed-message {
    display: flex;
}

.note-rail-collapsed-message p {
    font-size: 10px;
    color: var(--sol-text-tertiary, #64748b);
    line-height: 1.4;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Expanded content container */
.note-rail-content {
    height: 100%;
    opacity: 1;
    transition: opacity 150ms ease;
    overflow-y: auto;
}

.note-rail:not(.expanded) .note-rail-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* --------------------------------------------------------------------------
   RAIL FOOTER
   -------------------------------------------------------------------------- */
.note-rail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--rail-border);
    font-size: 10px;
    color: var(--sol-text-tertiary, #64748b);
}

.note-rail:not(.expanded) .note-rail-footer {
    display: none;
}

.note-rail-shortcut {
    opacity: 0.7;
}

.note-rail-unsaved {
    color: var(--rail-status-editing);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   LAYOUT INTEGRATION - Clinical Grid + Rail Flex Container
   -------------------------------------------------------------------------- */
.sol-clinical-workspace {
    display: flex;
    height: 100%;
    min-height: 0;
    gap: 0;
}

.sol-clinical-workspace .sol-clinical-grid-container {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BEHAVIOR
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* On tablet/small screens, rail becomes full-width when expanded */
    .note-rail.expanded {
        position: fixed;
        top: var(--sol-nav-height, 88px);
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 420px;
        z-index: 100;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    }

    /* Add overlay backdrop */
    .note-rail.expanded::before {
        content: '';
        position: fixed;
        top: var(--sol-nav-height, 88px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

@media (max-width: 768px) {
    :root {
        --rail-width-collapsed: 0px;
    }

    .note-rail:not(.expanded) {
        display: none;
    }

    .note-rail.expanded {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */
.note-rail-toggle:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: 2px;
}

/* Screen reader only class */
.note-rail .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   PHASE 2: NOTE CONTENT INSIDE RAIL
   Styles for noteInputSection and noteOutputSection when rendered in rail
   ========================================================================== */

/* --------------------------------------------------------------------------
   RAIL NOTE CONTAINER
   -------------------------------------------------------------------------- */
.rail-note-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   RAIL NOTE HEADER - Note type picker + action buttons
   -------------------------------------------------------------------------- */
.rail-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--rail-bg-header);
    border-bottom: 1px solid var(--rail-border);
    flex-shrink: 0;
}

.rail-note-header .sol-note-type-wrapper {
    flex: 1;
    min-width: 0;
}

.rail-note-header .sol-note-type-btn {
    font-size: 12px;
    padding: 6px 10px;
    background: var(--sol-bg-elevated, #232736);
    border: 1px solid var(--sol-border-default, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    color: var(--sol-text-primary, #f8fafc);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 150ms ease, border-color 150ms ease;
}

.rail-note-header .sol-note-type-btn:hover {
    background: var(--sol-bg-hover, #2a2e3d);
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
}

.rail-note-header .sol-note-type-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    z-index: 100;
    max-width: 280px;
}

.rail-note-header .sol-note-panel-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Compact action buttons in rail */
.rail-note-header .sol-action-btn {
    padding: 6px 8px;
    font-size: 11px;
}

.rail-note-header .sol-action-btn span {
    display: none; /* Hide text, show only icons */
}

@media (min-width: 1400px) {
    .rail-note-header .sol-action-btn span {
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   RAIL NOTE BODY - Input/Output sections
   -------------------------------------------------------------------------- */
.rail-note-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

/* Override note input section styles for rail context */
.rail-note-body .sol-note-input-section {
    padding: 0;
    margin: 0;
    background: transparent;
}

.rail-note-body .sol-note-input-section .sol-input-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.rail-note-body .sol-note-input-section .note-input-date-row {
    margin-bottom: 12px;
}

.rail-note-body .sol-note-input-section .sol-note-textarea {
    min-height: 120px;
    max-height: 200px;
    font-size: 13px;
    padding: 10px;
    resize: vertical;
}

.rail-note-body .sol-note-input-section .sol-note-input-actions {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.rail-note-body .sol-note-input-section .sol-action-btn {
    padding: 6px 10px;
    font-size: 12px;
}

/* Character counter */
.rail-note-body .clinical-update-counter {
    font-size: 10px;
    margin-top: 4px;
}

/* Template indicator */
.rail-note-body .template-indicator {
    font-size: 11px;
    padding: 4px 8px;
    margin-bottom: 8px;
}

/* Override note output section styles for rail context */
.rail-note-body .sol-note-output-section {
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Progress bar in rail */
.rail-note-body .sol-note-progress {
    margin-bottom: 12px;
}

.rail-note-body .sol-progress-details {
    font-size: 11px;
}

/* Note display wrapper in rail */
.rail-note-body .note-display-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Editor wrapper in rail */
.rail-note-body .sol-note-editor-wrapper {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

/* Toolbar in rail */
.rail-note-body .pm-toolbar {
    padding: 6px 8px;
    gap: 4px;
    flex-wrap: wrap;
}

.rail-note-body .pm-toolbar-button {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* Note content in rail */
.rail-note-body #prosemirrorEditor,
.rail-note-body #noteContent {
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
}

/* RAG panel in rail - needs to stack, not side-by-side */
.rail-note-body .rag-knowledge-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 12px;
    border-radius: 8px;
}

.rail-note-body .rag-knowledge-header {
    padding: 8px 12px;
}

.rail-note-body .rag-knowledge-content {
    max-height: 200px;
}

/* Reasoning tree in rail */
.rail-note-body .reasoning-tree-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   SNAPSHOT & PRIOR NOTES SELECTORS IN RAIL
   -------------------------------------------------------------------------- */
.rail-note-body .snapshot-selector-group {
    flex-wrap: wrap;
}

.rail-note-body .selected-snapshot-label {
    font-size: 10px;
    max-width: 100px;
}

/* --------------------------------------------------------------------------
   TIPS PANEL IN RAIL
   -------------------------------------------------------------------------- */
.rail-note-body .dictation-hints {
    font-size: 11px;
    padding: 8px;
}

/* --------------------------------------------------------------------------
   SCROLLBAR STYLING FOR RAIL
   -------------------------------------------------------------------------- */
.rail-note-body::-webkit-scrollbar {
    width: 6px;
}

.rail-note-body::-webkit-scrollbar-track {
    background: transparent;
}

.rail-note-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.rail-note-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   PHASE 3: DRAFT VERSIONING
   Per-patient draft history with version chips
   ========================================================================== */

/* --------------------------------------------------------------------------
   DRAFT VERSIONS ROW - Container for version chips
   -------------------------------------------------------------------------- */
.draft-versions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--rail-bg-header);
    border-bottom: 1px solid var(--rail-border);
    flex-wrap: wrap;
    min-height: 32px;
}

.draft-versions-row.hidden {
    display: none;
}

.draft-versions-label {
    font-size: 10px;
    color: var(--sol-text-tertiary, #64748b);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   DRAFT VERSION CHIPS - Individual version buttons
   -------------------------------------------------------------------------- */
.draft-versions-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.draft-version-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    font-family: inherit;
    color: var(--sol-text-secondary, #94a3b8);
    background: transparent;
    border: 1px solid var(--sol-border-default, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
    white-space: nowrap;
}

.draft-version-chip:hover:not(:disabled) {
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.05));
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
    color: var(--sol-text-primary, #f8fafc);
}

.draft-version-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Active version chip */
.draft-version-chip.active {
    background: var(--sol-bg-elevated, #232736);
    border-color: var(--sol-accent, #3b82f6);
    color: var(--sol-text-primary, #f8fafc);
}

.draft-version-chip.active::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sol-accent, #3b82f6);
}

/* Version chip template type indicator */
.draft-version-chip .chip-template {
    font-size: 9px;
    opacity: 0.7;
}

/* Version chip timestamp on hover */
.draft-version-chip[title] {
    position: relative;
}

/* --------------------------------------------------------------------------
   DRAFT VERSION CHIP COLOR VARIANTS BY TEMPLATE
   -------------------------------------------------------------------------- */
.draft-version-chip[data-template="progress"] {
    --chip-accent: var(--sol-info, #3b82f6);
}

.draft-version-chip[data-template="handp"] {
    --chip-accent: var(--sol-stable, #22c55e);
}

.draft-version-chip[data-template="discharge"] {
    --chip-accent: var(--sol-warning, #f59e0b);
}

.draft-version-chip[data-template="aandp"] {
    --chip-accent: var(--sol-critical, #ef4444);
}

.draft-version-chip.active[data-template] {
    border-color: var(--chip-accent);
}

.draft-version-chip.active[data-template]::before {
    background: var(--chip-accent);
}

/* --------------------------------------------------------------------------
   RESPONSIVE DRAFT CHIPS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .draft-versions-row {
        padding: 4px 8px;
    }

    .draft-version-chip {
        padding: 2px 6px;
        font-size: 9px;
    }
}

/* --------------------------------------------------------------------------
   EMPTY STATE FOR NO DRAFTS (hidden by default)
   -------------------------------------------------------------------------- */
.draft-versions-empty {
    font-size: 10px;
    color: var(--sol-text-tertiary, #64748b);
    font-style: italic;
}

/* ==========================================================================
   PHASE 4: RELIABILITY UX
   ETA countdown during generation and offline handling
   ========================================================================== */

/* --------------------------------------------------------------------------
   ETA COUNTDOWN - Shows estimated time remaining during generation
   -------------------------------------------------------------------------- */
.note-rail-eta {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--sol-text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 200ms ease;
}

.note-rail-eta.visible {
    display: inline-flex;
    opacity: 1;
}

/* ETA shown only during generating status */
.note-rail[data-status="generating"] .note-rail-eta.visible {
    display: inline-flex;
}

/* ETA text styling */
.note-rail-eta-text {
    background: rgba(59, 130, 246, 0.15);
    color: var(--sol-accent, #3b82f6);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    animation: eta-pulse 2s ease-in-out infinite;
}

@keyframes eta-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* "finishing..." state */
.note-rail-eta-text.finishing {
    background: rgba(251, 191, 36, 0.15);
    color: var(--sol-warning, #fbbf24);
    animation: none;
}

/* --------------------------------------------------------------------------
   OFFLINE BANNER - Shown when network connection is lost
   -------------------------------------------------------------------------- */
.note-rail-offline-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sol-bg-error, rgba(239, 68, 68, 0.1));
    border-bottom: 1px solid var(--sol-border-error, rgba(239, 68, 68, 0.3));
    color: var(--sol-text-primary, #f8fafc);
    font-size: 11px;
}

.note-rail-offline-banner.visible {
    display: flex;
}

.note-rail-offline-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Offline status dot */
.note-rail-offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sol-error, #ef4444);
    flex-shrink: 0;
    animation: offline-blink 1.5s ease-in-out infinite;
}

@keyframes offline-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.note-rail-offline-message {
    color: var(--sol-text-secondary, #94a3b8);
}

/* Retry button */
.note-rail-offline-retry {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    color: var(--sol-bg-card, #15191d);
    background: var(--sol-accent-mint, #34d399);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition:
        background 150ms ease,
        transform 100ms ease;
    white-space: nowrap;
}

.note-rail-offline-retry:hover {
    background: var(--sol-accent-mint-hover, #6ee7b7);
}

.note-rail-offline-retry:active {
    transform: scale(0.96);
}

.note-rail-offline-retry:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   STALL DETECTION - Visual indicator when generation takes too long
   (Complements existing ERR-005 in streaming)
   -------------------------------------------------------------------------- */
.note-rail-stall-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.1);
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 11px;
    color: var(--sol-warning, #fbbf24);
}

.note-rail-stall-indicator.visible {
    display: flex;
}

.note-rail-stall-icon {
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE PHASE 4 ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .note-rail-offline-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 6px 10px;
    }

    .note-rail-offline-retry {
        align-self: flex-end;
    }

    .note-rail-eta-text {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* ==========================================================================
   PHASE 5: POLISH
   Final UX refinements - unsaved indicator, animations, a11y, responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   UNSAVED INDICATOR - Shows when note has unsaved changes
   -------------------------------------------------------------------------- */
.note-rail-unsaved {
    display: none;
    align-items: center;
    gap: 4px;
    color: var(--rail-status-editing, #f59e0b);
    font-weight: 500;
    font-size: 10px;
    animation: unsaved-fade-in 200ms ease;
}

.note-rail-unsaved:not([hidden]) {
    display: inline-flex;
}

.note-rail-unsaved .unsaved-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rail-status-editing, #f59e0b);
    animation: unsaved-pulse 2s ease-in-out infinite;
}

@keyframes unsaved-fade-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes unsaved-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* --------------------------------------------------------------------------
   ENHANCED STATUS PILL TRANSITIONS
   -------------------------------------------------------------------------- */
.note-rail-status-pill {
    transition:
        background 250ms ease,
        color 250ms ease,
        transform 150ms ease;
}

.note-rail-status-pill .status-dot {
    transition:
        background 250ms ease,
        transform 150ms ease;
}

.note-rail-status-pill .status-label {
    transition: opacity 150ms ease;
}

/* Subtle scale on status change */
.note-rail[data-status="generating"] .note-rail-status-pill,
.note-rail[data-status="ready"] .note-rail-status-pill {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   IMPROVED COLLAPSED STATE MESSAGING
   -------------------------------------------------------------------------- */
.note-rail-collapsed-message {
    padding: 16px 12px;
    text-align: center;
}

.note-rail-collapsed-message p {
    font-size: 11px;
    color: var(--sol-text-tertiary, #64748b);
    line-height: 1.4;
    margin: 0;
}

/* Show status-specific message when collapsed */
.note-rail:not(.expanded)[data-status="generating"] .note-rail-collapsed-message p::after {
    content: " (generating...)";
    color: var(--rail-status-generating, #3b82f6);
}

.note-rail:not(.expanded)[data-status="ready"] .note-rail-collapsed-message p::after {
    content: " (draft ready)";
    color: var(--rail-status-ready, #22c55e);
}

/* --------------------------------------------------------------------------
   KEYBOARD FOCUS MANAGEMENT
   -------------------------------------------------------------------------- */
.note-rail:focus-within {
    /* Subtle outline when rail has focus */
}

.note-rail .note-rail-content:focus {
    outline: none;
}

/* Focus trap indicator */
.note-rail.expanded .note-rail-body:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   SCREEN READER ONLY - A11y announcements
   -------------------------------------------------------------------------- */
#railA11yAnnouncer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   ENHANCED MOBILE RESPONSIVE (Phase 5)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Full-width rail on mobile */
    .note-rail.expanded {
        max-width: 100%;
        left: 0;
        border-radius: 0;
    }

    /* Larger touch targets */
    .note-rail-toggle {
        width: 48px;
        height: 48px;
    }

    /* Simplified footer on mobile */
    .note-rail-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .note-rail-shortcut {
        display: none; /* Hide keyboard shortcut hint on mobile */
    }

    /* Larger status pill for touch */
    .note-rail-status-pill {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Stack header content on very small screens */
    .note-rail-header-content {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION - Respect user preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .note-rail-status-pill,
    .note-rail-status-pill .status-dot,
    .note-rail-unsaved,
    .note-rail-unsaved .unsaved-dot,
    .note-rail-eta-text,
    .note-rail-offline-dot {
        animation: none;
        transition: none;
    }
}