/* ═══════════════════════════════════════════════════
   markdown.css — CodeMirror 6 overrides + timestamp widgets
   for EzReplay Pro
   ═══════════════════════════════════════════════════ */

/* ── Editor container ── */

#notes {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: unset !important;
    margin-top: calc(var(--gap) + 40px);
    font-size: .9rem;
    position: relative;
}

#notes .cm-editor {
    height: 100%;
    background: transparent;
}

#notes .cm-editor.cm-focused {
    outline: none;
}

#notes .cm-scroller {
    overflow-y: auto;
    overflow-x: hidden;
    /* No padding here — bottom padding is on .cm-content via the JS theme.
       Padding on the scroller itself breaks CM6's scroll‐position math. */
    /* scroll-behavior: smooth is intentionally OFF —
       CM6 sets scrollTop directly and smooth scrolling causes
       incorrect final positions. */
}

/* ── Selection ── */

#notes .cm-selectionBackground {
    background-color: var(--color-accent) !important;
    opacity: 0.5;
}

#notes .cm-editor.cm-focused .cm-selectionBackground {
    opacity: 0.7;
}

#notes .cm-content ::selection {
    background: var(--color-accent);
    color: inherit;
}

/* ── Active line ── */

#notes .cm-activeLine {
    background-color: rgba(255, 255, 255, 0);
}

/* ── Cursor ── */

#notes .cm-cursor {
    border-left-color: var(--color-text);
    border-left-width: 2px;
}

/* ── Placeholder ── */

#notes .cm-placeholder {
    color: var(--color-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════
   Timestamp Widgets  @[M:SS]
   ═══════════════════════════════════════════════════ */

.cm-timestamp-widget {
    display: inline-flex;
    flex-direction: row;
    background-color: var(--color-accent);
    overflow: hidden;
    border-radius: 3px;
    width: fit-content;
    padding: 2px 5px;
    box-sizing: border-box;
    cursor: pointer;
    align-items: center;
    position: relative;
    top: -1px;
    transition: var(--ease-fast);
    animation: ts-appear 100ms forwards ease-out;
    font-size: 0.85rem;
    font-family: var(--font-sans), sans-serif;
    color: var(--color-text);
    user-select: none;
    vertical-align: middle;
    line-height: 1;
}

.cm-timestamp-widget:hover {
    opacity: 1 !important;
    filter: brightness(1.5) drop-shadow(0 0 2px var(--color-accent));
}

.cm-timestamp-widget::before {
    content: '';
    position: relative;
    background-image: url(../../../media/icons/filled/hourglass.png);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
    height: 0.9rem;
    transform: scale(0.9);
    filter: var(--icon-brigtness);
}

@keyframes ts-appear {
    0% {
        opacity: 0;
        transform: translateX(-0.1em);
    }
    100% {
        opacity: 0.8;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════
   Markdown inline styling — fenced code blocks
   ═══════════════════════════════════════════════════ */

#notes .cm-line .tok-monospace,
#notes .cm-line code {
    font-family: var(--font-mono), 'Inconsolata', monospace;
    background-color: var(--color-codeBox);
    border-radius: 3px;
    padding: 1px 4px;
}

/* ═══════════════════════════════════════════════════
   Scrollbar inside CM6
   ═══════════════════════════════════════════════════ */

#notes .cm-scroller::-webkit-scrollbar {
    width: 5px;
}

#notes .cm-scroller::-webkit-scrollbar-track {
    background: transparent;
}

#notes .cm-scroller::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

#notes .cm-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════
   Links in markdown (auto-linked by CM)
   ═══════════════════════════════════════════════════ */

#notes .cm-content a,
#notes .tok-link {
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   LIVE PREVIEW — Obsidian-style rendered markdown
   ═══════════════════════════════════════════════════ */

/* ── Headings ── */

#notes .cm-heading-1 {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

#notes .cm-heading-2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

/* Line-level heading spacing (padding is safe for CM6 height calc) */
#notes .cm-line.cm-heading-1-line { padding-top: 0.4em; }
#notes .cm-line.cm-heading-2-line { padding-top: 0.3em; }

#notes .cm-heading-3 {
    font-size: 1.25em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

#notes .cm-heading-4 {
    font-size: 1.1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

#notes .cm-heading-5,
#notes .cm-heading-6 {
    font-size: 1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Bold / Strong ── */

#notes .cm-strong {
    font-weight: 700;
    color: var(--color-text);
}

/* ── Italic / Emphasis ── */

#notes .cm-em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

/* ── Underline ── */

#notes .cm-underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Strikethrough ── */

#notes .cm-strikethrough {
    text-decoration: line-through;
    color: var(--color-muted);
}

/* ── Inline Code ── */

#notes .cm-inline-code {
    font-family: var(--font-mono), 'Inconsolata', monospace;
    background-color: var(--color-codeBox, rgba(30, 30, 43, 0.8));
    color: #e06c75;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9em;
}

/* ── Links ── */

#notes .cm-link-preview {
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    transition: filter var(--ease-fast);
}

#notes .cm-link-preview:hover {
    filter: brightness(1.3);
}

/* ── Horizontal Rule ── */

#notes .cm-hr-preview {
    border: none;
    border-top: 1px solid var(--color-muted);
    padding: 0.8em 0;
    height: 0;
    opacity: 0.5;
}

/* ── Bullet List ── */

#notes .cm-bullet-preview {
    font-weight: bold;
    margin-right: 0.5em;
    font-size: 1.2em;
    line-height: 1;
}

#notes .ͼ10 {
    color: var(--color-text);
}

/* ── Blockquote ── */

#notes .cm-line.cm-blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1em;
    color: var(--color-muted);
    font-style: italic;
    background-color: rgba(112, 63, 161, 0.1);
    margin-left: 0;
}

/* ═══════════════════════════════════════════════════
   TABLES — Rendered HTML table widget (Obsidian-style)
   ═══════════════════════════════════════════════════ */

/* Wrapper ensures the table scrolls horizontally if wider than the editor */
#notes .cm-table-wrapper {
    overflow-x: auto;
    margin: 0.6em 0;
    border-radius: 6px;
}

#notes .cm-table-widget {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--color-text);
}

/* Header cells */
#notes .cm-table-widget thead tr {
    background-color: rgba(255, 255, 255, 0.07);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

#notes .cm-table-widget th {
    padding: 7px 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Body cells */
#notes .cm-table-widget td {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

#notes .cm-table-widget tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.025);
}

#notes .cm-table-widget tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.055);
    transition: background-color 80ms ease;
}

/* Inline code inside cells */
#notes .cm-table-widget code {
    font-family: var(--font-mono), 'Inconsolata', monospace;
    background-color: var(--color-codeBox, rgba(30, 30, 43, 0.8));
    color: #e06c75;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.9em;
}

/* Raw markdown fallback (when cursor is inside the table) */
#notes .cm-line.cm-table-row {
    font-family: var(--font-mono), monospace;
    font-size: 0.85em;
    background-color: rgba(255, 255, 255, 0.02);
    padding: 4px 0;
}

#notes .cm-line.cm-table-separator {
    font-family: var(--font-mono), monospace;
    font-size: 0.85em;
    color: var(--color-muted);
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════
   CODE BLOCKS — Fenced code blocks ```
   ═══════════════════════════════════════════════════ */

#notes .cm-line:has(.tok-meta) {
    background-color: var(--color-codeBox, rgba(30, 30, 43, 0.8));
    font-family: var(--font-mono), monospace;
    font-size: 0.9em;
    padding: 2px 8px;
}

/* First line of code block (```) */
#notes .cm-line .tok-meta {
    color: var(--color-muted);
    opacity: 0.5;
}

/* Live preview code block styling */
#notes .cm-line.cm-codeblock-start {
    background-color: var(--color-codeBox, rgba(30, 30, 43, 0.9));
    border-radius: 6px 6px 0 0;
    padding: 8px 12px 4px;
    font-family: var(--font-mono), monospace;
    font-size: 0.75em;
    color: var(--color-muted);
    border-left: 3px solid var(--color-accent);
}

#notes .ͼy {
    padding: 0;
}

#notes .cm-line.cm-codeblock-line {
    background-color: var(--color-codeBox, rgba(30, 30, 43, 0.9));
    padding: 2px 12px;
    font-family: var(--font-mono), monospace;
    font-size: 0.9em;
    color: #abb2bf;
    border-left: 3px solid var(--color-accent);
}

#notes .cm-line.cm-codeblock-end {
    background-color: var(--color-codeBox, rgba(30, 30, 43, 0.9));
    border-radius: 0 0 6px 6px;
    padding: 4px 12px 8px;
    font-family: var(--font-mono), monospace;
    font-size: 0.75em;
    color: var(--color-muted);
    border-left: 3px solid var(--color-accent);
}

/* ═══════════════════════════════════════════════════
   CODE BLOCK HEADER — Language label + Copy button
   ═══════════════════════════════════════════════════ */

.cm-codeblock-header {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    z-index: 10;
    pointer-events: auto;
}

.cm-codeblock-lang {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
}

.cm-codeblock-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--color-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0;
    padding: var(--padding-sm);
}

.cm-line.cm-codeblock-start:hover .cm-codeblock-copy,
.cm-codeblock-header:hover .cm-codeblock-copy {
    opacity: 1;
}

.cm-codeblock-copy:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text);
}

.cm-codeblock-copy:active {
    transform: scale(0.95);
}

.cm-codeblock-copy svg {
    width: 14px;
    height: 14px;
}

.cm-codeblock-copy-success {
    color: #98c379 !important;
    border-color: rgba(152, 195, 121, 0.3) !important;
    background: rgba(152, 195, 121, 0.1) !important;
}

/* Ensure codeblock-start is positioned relative for the header */
#notes .cm-line.cm-codeblock-start {
    position: relative;
}

/* ═══════════════════════════════════════════════════
   CODE SYNTAX HIGHLIGHTING — Token colors
   ═══════════════════════════════════════════════════ */

/* Keywords: const, let, function, if, else, return, etc. */
#notes .cm-code-keyword {
    color: #c678dd !important;
    font-weight: 500;
}

/* Strings: "text", 'text', `text` */
#notes .cm-code-string {
    color: #98c379 !important;
}

/* Numbers: 123, 3.14, 0xff */
#notes .cm-code-number {
    color: #d19a66 !important;
}

/* Comments: // comment, /* comment */
#notes .cm-code-comment {
    color: #5c6370 !important;
    font-style: italic;
}

/* Function names: functionName() */
#notes .cm-code-function {
    color: #61afef !important;
}

/* Properties: .property, object.key */
#notes .cm-code-property {
    color: #e06c75 !important;
}

/* Operators: +, -, =, ===, =>, etc. */
#notes .cm-code-operator {
    color: #56b6c2 !important;
}

/* Brackets: [], {}, () */
#notes .cm-code-bracket {
    color: #abb2bf !important;
}

/* HTML/JSX tags: <div>, </span> */
#notes .cm-code-tag {
    color: #e06c75 !important;
}

/* ═══════════════════════════════════════════════════
   COLORED TEXT — <span style="color:...">
   ═══════════════════════════════════════════════════ */

#notes .cm-colored-text {
    /* Color is applied inline via style attribute */
}

/* Preset color classes for common colors */
#notes .cm-color-red {
    color: #e06c75 !important;
}

#notes .cm-color-blue {
    color: #61afef !important;
}

#notes .cm-color-green {
    color: #98c379 !important;
}

#notes .cm-color-yellow {
    color: #e5c07b !important;
}

/* ═══════════════════════════════════════════════════
   Hide markdown syntax in unfocused lines
   ═══════════════════════════════════════════════════ */

/* When a line is NOT being edited, hide syntax markers */
#notes .cm-line:not(.cm-activeLine) .tok-punctuation {
    /* Keep visible for now - live preview handles hiding */
}

/* ═══════════════════════════════════════════════════
   CHECKBOXES — Task list items  - [ ] / - [x]
   ═══════════════════════════════════════════════════ */

#notes .cm-checkbox-widget {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border: 2px solid var(--color-muted);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 0.4em;
    transition: all 0.15s ease;
}

#notes .cm-checkbox-widget:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

#notes .cm-checkbox-widget:checked::after {
    content: '✓';
    color: var(--color-text);
    font-size: 0.75em;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#notes .cm-checkbox-widget:hover {
    border-color: var(--color-accent);
    filter: brightness(1.2);
}

/* Checked task text — struck-through and dimmed */
#notes .cm-checkbox-checked {
    text-decoration: line-through;
    color: var(--color-muted);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════
   HIGHLIGHT — ==text== mark
   ═══════════════════════════════════════════════════ */

#notes .cm-highlight {
    background-color: rgba(229, 192, 123, 0.3);
    border-radius: 2px;
    padding: 1px 2px;
}

/* ═══════════════════════════════════════════════════
   IMAGE PREVIEW — ![alt](url) inline images
   ═══════════════════════════════════════════════════ */

#notes .cm-image-preview {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

#notes .cm-image-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    object-fit: contain;
    margin: 4px 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

#notes .cm-image-preview img:hover {
    opacity: 1;
}

#notes .cm-image-preview.cm-image-error {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.85em;
}

/* ═══════════════════════════════════════════════════
   SUPERSCRIPT — ^text^
   ═══════════════════════════════════════════════════ */

#notes .cm-superscript {
    vertical-align: super;
    font-size: 0.75em;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════
   FOOTNOTES — [^id] references & [^id]: definitions
   ═══════════════════════════════════════════════════ */

#notes .cm-footnote-ref {
    display: inline;
    vertical-align: super;
    font-size: 0.75em;
    color: var(--color-accent);
    cursor: default;
    padding: 0 2px;
    font-weight: 600;
    transition: filter var(--ease-fast);
}

#notes .cm-footnote-ref:hover {
    filter: brightness(1.3);
}

#notes .cm-line.cm-footnote-def {
    border-left: 2px solid var(--color-accent);
    padding-left: 0.8em;
    font-size: 0.9em;
    color: var(--color-muted);
    background-color: rgba(112, 63, 161, 0.05);
}

#notes .cm-footnote-def-marker {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.85em;
    margin-right: 0.3em;
}

/* ═══════════════════════════════════════════════════
   SLASH COMMANDS — /command palette
   ═══════════════════════════════════════════════════ */

.slash-commands {
    position: absolute;
    z-index: 500;
    min-width: 260px;
    max-width: 340px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;

    background: var(--color-secondary);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    padding: 4px 0;

    scrollbar-width: thin;
    scrollbar-color: rgba(112, 63, 161, 0.4) transparent;

    animation: slash-in 120ms ease-out;
}

@keyframes slash-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.slash-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 12px;
    cursor: pointer;
    transition: background-color 80ms ease;
    border-left: 2px solid transparent;
}

.slash-row:hover,
.slash-row.slash-active {
    background-color: rgba(112, 63, 161, 0.08);
    border-left-color: var(--color-accent);
}

/* Icon container — rounded square with accent tint */
.slash-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(112, 63, 161, 0.13);
    border: 1px solid rgba(112, 63, 161, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-accent);
    transition: background 80ms ease, border-color 80ms ease;
}

.slash-row:hover .slash-icon-wrap,
.slash-row.slash-active .slash-icon-wrap {
    background: rgba(112, 63, 161, 0.26);
    border-color: rgba(112, 63, 161, 0.4);
}

.slash-icon-wrap svg {
    display: block;
}

.slash-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.slash-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

.slash-desc {
    font-size: 0.72rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Command shortcut chip — right side */
.slash-shortcut {
    margin-left: auto;
    flex-shrink: 0;
    font-family: 'Inconsolata', monospace;
    font-size: 0.67rem;
    color: var(--color-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
    transition: opacity 80ms ease;
}

.slash-row:hover .slash-shortcut,
.slash-row.slash-active .slash-shortcut {
    opacity: 0.85;
}

.slash-empty {
    padding: 14px 16px;
    color: var(--color-muted);
    font-size: 0.83rem;
    text-align: center;
    font-style: italic;
}

/* Category header with accent dot */
.slash-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 2px;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
    opacity: 0.75;
    user-select: none;
    pointer-events: none;
}

.slash-cat-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    opacity: 0.8;
}

.slash-cat:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 8px;
}