/* ==========================================================================
   Gemini.Markdown � editor styles (pure CSS, no Tailwind dependency)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    --gem-font-mono: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
    --gem-font-sans: ui-sans-serif, system-ui, sans-serif;
    --gem-font-size: 0.9375rem;
    --gem-line-height: 1.75;
    --gem-padding: 1rem;
    --gem-text: #171717;
    --gem-text-muted: #737373;
    --gem-border: #e5e5e5;
    --gem-bg-code: #f5f5f5;
    --gem-bg-code-border: #e5e5e5;
    --gem-marker-color: #a3a3a3;
    --gem-cursor-color: #3b82f6;
    --gem-link-color: #2563eb;
    --gem-code-color: #be185d;
    --gem-h1-size: 1.75rem;
    --gem-h2-size: 1.375rem;
    --gem-h3-size: 1.125rem;
    --gem-blockquote-border: #d4d4d4;
    --gem-gutter-width: 3.5rem;
    --gem-gutter-num-width: 2rem;
    --gem-gutter-fold-width: 1rem;
    --gem-gutter-gap: 0.5rem;
    --gem-gutter-bg: #fafafa;
    --gem-gutter-border: #e5e5e5;
    --gem-gutter-text: #a3a3a3;
    --gem-gutter-fold: #c4c4c4;
}

:root.dark {
    --gem-text: #e5e5e5;
    --gem-text-muted: #a3a3a3;
    --gem-border: #404040;
    --gem-bg-code: #262626;
    --gem-bg-code-border: #404040;
    --gem-marker-color: #525252;
    --gem-blockquote-border: #525252;
    --gem-link-color: #60a5fa;
    --gem-code-color: #f472b6;
    --gem-gutter-bg: #1a1a1a;
    --gem-gutter-border: #333333;
    --gem-gutter-text: #525252;
    --gem-gutter-fold: #404040;
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.gemini-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gem-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 1.75rem;
    transition: background-color 0.1s;
    font-family: var(--gem-font-sans);
}

    .gemini-toolbar-btn:hover:not(:disabled) {
        background-color: var(--gem-bg-code);
    }

    .gemini-toolbar-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* --------------------------------------------------------------------------
   Sticky editor header — toolbar + tab bar stay visible while page scrolls
   -------------------------------------------------------------------------- */
.gemini-editor-header {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* --------------------------------------------------------------------------
   Gutter (line numbers + fold indicators)
   -------------------------------------------------------------------------- */
.gemini-gutter {
    display: flex;
    flex-direction: column;
    flex: none;
    flex-shrink: 0;
    width: var(--gem-gutter-width);
    background-color: var(--gem-gutter-bg);
    border-right: 1px solid var(--gem-gutter-border);
    padding-top: var(--gem-padding);
    user-select: none;
    pointer-events: none;
    font-family: var(--gem-font-mono);
    font-size: 0.75rem;
    line-height: var(--gem-line-height);
    color: var(--gem-gutter-text);
    overflow: hidden;
}

.gemini-gutter-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.gemini-gutter-num {
    flex: none;
    width: var(--gem-gutter-num-width);
    text-align: right;
    padding-right: 0.25rem;
}

.gemini-gutter-fold {
    flex: none;
    width: var(--gem-gutter-fold-width);
    text-align: center;
    color: var(--gem-gutter-fold);
    pointer-events: auto;
    cursor: default;
}

    .gemini-gutter-fold.is-foldable {
        cursor: pointer;
    }

        .gemini-gutter-fold.is-foldable:hover {
            color: var(--gem-text-muted);
        }

    /* Chevron rotates: 90° = pointing down (expanded), 0° = pointing right (folded) */
    .gemini-gutter-fold.is-foldable > span {
        display: inline-block;
        transform: rotate(90deg);
        transition: transform 0.12s ease;
        line-height: 1;
    }

    .gemini-gutter-fold.is-foldable.is-folded > span {
        transform: rotate(0deg);
    }

/* --------------------------------------------------------------------------
   Editor surface � sans-serif base, monospace for code/active line
   -------------------------------------------------------------------------- */
.gemini-editor-surface {
    position: relative;         /* anchor for absolutely-positioned children */
    isolation: isolate;         /* own stacking context so z-index:-1 children stay inside */
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    font-family: var(--gem-font-sans);
    font-size: var(--gem-font-size);
    line-height: var(--gem-line-height);
    color: var(--gem-text);
    padding: var(--gem-padding) var(--gem-padding) var(--gem-padding) var(--gem-gutter-gap);
    min-height: 100%;
    box-sizing: border-box;     /* padding included in min-height:100% so no phantom overflow */
}

/* Selection highlight layer — sits behind the text via z-index:-1 */
.gemini-selection-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

.gemini-selection-rect {
    position: absolute;
    background-color: var(--gem-selection-bg, rgba(0, 120, 212, 0.25));
    border-radius: 2px;
    pointer-events: none;
}

/* Active line — inherits sans-serif from surface; no monospace override.
   Code content keeps monospace via the dedicated rules below. */
.md-line-active {
    font-size: var(--gem-font-size);
}

/* Code content always monospace regardless of active state */
.md-code-content,
.md-line:has(.md-code-content),
.md-line:has(.md-code-fence) {
    font-family: var(--gem-font-mono);
    font-size: var(--gem-font-size);
}

/* --------------------------------------------------------------------------
   Hidden textarea (keyboard sink)
   -------------------------------------------------------------------------- */
.gemini-textarea {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: none;
    outline: none;
    overflow: hidden;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   Virtual cursor
   -------------------------------------------------------------------------- */
.gemini-cursor {
    position: absolute;
    width: 2px;
    background-color: var(--gem-cursor-color);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
    min-height: 1em;
}

@keyframes gemini-blink {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Animation only runs when the editor has focus — prevents blinking on page load
       before the user has clicked in. Blazor adds gemini-cursor-active when _isFocused=true. */
    .gemini-cursor.gemini-cursor-active {
        animation: gemini-blink 1.1s step-start infinite;
    }

        .gemini-cursor.cursor-moved {
            animation: none;
            opacity: 1;
        }
}

/* --------------------------------------------------------------------------
   Markdown lines
   -------------------------------------------------------------------------- */
.md-line {
    display: block;
    min-height: 1.5em;
}

/* --------------------------------------------------------------------------
   Markers
   -------------------------------------------------------------------------- */
.md-marker {
    display: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.md-marker-active {
    display: inline;
    color: var(--gem-marker-color);
    user-select: text;
    -webkit-user-select: text;
}

/* --------------------------------------------------------------------------
   Inline decorations
   -------------------------------------------------------------------------- */
.md-bold {
    font-weight: 700;
}

.md-italic {
    font-style: italic;
}

    .md-bold.md-italic,
    .md-italic.md-bold {
        font-weight: 700;
        font-style: italic;
    }

.md-inline-code {
    font-family: var(--gem-font-mono);
    font-size: 0.875em;
    color: var(--gem-code-color);
    background-color: var(--gem-bg-code);
    border: 1px solid var(--gem-bg-code-border);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

.md-link {
    color: var(--gem-link-color);
    text-decoration: underline;
}

.md-plain { /* unstyled */
}

/* --------------------------------------------------------------------------
   Headings � match preview sizing and sans-serif font
   -------------------------------------------------------------------------- */
.md-heading {
    display: inline;
    font-family: var(--gem-font-sans);
}

.md-h1 {
    font-size: var(--gem-h1-size);
    font-weight: 600;
}

.md-h2 {
    font-size: var(--gem-h2-size);
    font-weight: 600;
}

.md-h3 {
    font-size: var(--gem-h3-size);
    font-weight: 600;
}

/* h2 lines get a bottom rule like the prose preview */
.md-line:has(.md-h2) {
    border-bottom: 1px solid var(--gem-border);
    padding-bottom: 0.15em;
}

/* Active heading line: match heading font size (sans-serif inherited from surface) */
.md-line-active:has(.md-h1) {
    font-size: var(--gem-h1-size);
    font-weight: 600;
}

.md-line-active:has(.md-h2) {
    font-size: var(--gem-h2-size);
    font-weight: 600;
}

.md-line-active:has(.md-h3) {
    font-size: var(--gem-h3-size);
    font-weight: 600;
}

.md-line-active:has(.md-h1) .md-marker-active {
    font-size: var(--gem-h1-size);
    font-weight: 600;
}

.md-line-active:has(.md-h2) .md-marker-active {
    font-size: var(--gem-h2-size);
    font-weight: 600;
}

.md-line-active:has(.md-h3) .md-marker-active {
    font-size: var(--gem-h3-size);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Horizontal rule
   -------------------------------------------------------------------------- */
.md-hr-line {
    padding: 0.25rem 0;
}

.md-hr {
    border: none;
    border-top: 1px solid var(--gem-border);
    margin: 0.25rem 0;
}

/* --------------------------------------------------------------------------
   [TOC] placeholder badge in WYSIWYG surface
   -------------------------------------------------------------------------- */
.md-toc-placeholder {
    padding: 0.25em 0.75em;
    border: 1px dashed var(--gem-border);
    border-radius: 4px;
    color: var(--gem-text-muted);
    font-size: 0.875em;
    font-family: var(--gem-font-sans);
    font-style: normal;
    cursor: default;
    display: inline-block;
    user-select: none;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
.md-list-item-line {
    position: relative;
    /* --list-indent is set inline by the renderer for nested items (0 = top level) */
    padding-left: calc(1.5rem + var(--list-indent, 0) * 1.5rem);
}

/* Bullet/number spans emitted by the renderer for inactive list lines.
   These are always visible (unlike syntax markers that hide on inactive lines),
   so they use the full text color rather than muted. */
.md-list-bullet,
.md-list-number {
    position: absolute;
    /* Slide right with nesting so the bullet always sits in its own level's gutter */
    left: calc(var(--list-indent, 0) * 1.5rem);
    color: var(--gem-text);
    user-select: none;
    pointer-events: none;
}

.md-list-bullet {
    width: 1.5rem;
    text-align: center;
}

.md-list-number {
    width: 1.25rem;
    text-align: right;
}

/* --------------------------------------------------------------------------
   Code blocks — visual box matching preview
   Renderer emits md-code-fence-open / md-code-fence-close directly on the
   line div, and md-code-content on the span inside content lines.
   -------------------------------------------------------------------------- */

/* All three parts: shared left/right border + background */
.md-code-fence-open,
.md-code-fence-close,
.md-line:has(.md-code-content) {
    background-color: var(--gem-bg-code);
    border-left: 1px solid var(--gem-bg-code-border);
    border-right: 1px solid var(--gem-bg-code-border);
}

/* Opening fence: top of box */
.md-code-fence-open {
    border-top: 1px solid var(--gem-bg-code-border);
    border-radius: 6px 6px 0 0;
    padding-top: 0.25rem;
}

/* Content lines: indent and monospace */
.md-line:has(.md-code-content) {
    padding-left: 0.75rem;
}

/* Closing fence: bottom of box */
.md-code-fence-close {
    border-bottom: 1px solid var(--gem-bg-code-border);
    border-radius: 0 0 6px 6px;
    padding-bottom: 0.25rem;
}

.md-code-content {
    display: block;
    font-family: var(--gem-font-mono);
    font-size: var(--gem-font-size);
    color: var(--gem-text);
}

/* --------------------------------------------------------------------------
   Strikethrough
   -------------------------------------------------------------------------- */
.md-strikethrough {
    text-decoration: line-through;
    color: var(--gem-text-muted);
}

.md-mark {
    background-color: #fef08a;
    color: #713f12;
    border-radius: 2px;
    padding: 0 0.1em;
}

.dark .md-mark {
    background-color: #713f12;
    color: #fef9c3;
}

.md-inserted {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md-superscript {
    vertical-align: super;
    font-size: 0.75em;
    line-height: 0;
}

.md-subscript {
    vertical-align: sub;
    font-size: 0.75em;
    line-height: 0;
}

.md-footnote-ref {
    color: var(--gem-link-color);
    font-size: 0.8em;
    vertical-align: super;
    line-height: 0;
}

/* --------------------------------------------------------------------------
   Blockquote
   -------------------------------------------------------------------------- */
.md-blockquote {
    border-left: 3px solid var(--gem-blockquote-border);
    padding-left: 0.75rem;
    color: var(--gem-text-muted);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Admonition lines inside the WYSIWYG surface
   (Applied to blockquote lines that belong to a "[!TYPE]" block)
   -------------------------------------------------------------------------- */
.md-admonition-note      { --adm-border: #1f6feb; }
.md-admonition-tip       { --adm-border: #1a7f37; }
.md-admonition-important { --adm-border: #8250df; }
.md-admonition-warning   { --adm-border: #9a6700; }
.md-admonition-caution   { --adm-border: #cf222e; }

/* Override the default blockquote appearance for all lines in the admonition block. */
.md-admonition.md-blockquote {
    border-left-color: var(--adm-border);
    color: var(--gem-text);    /* not muted */
    font-style: normal;        /* not italic */
}

/* --------------------------------------------------------------------------
   Tables (legacy inline span style)
   -------------------------------------------------------------------------- */
.md-table-cell {
    display: inline;
    padding: 0 0.25rem;
}

/* --------------------------------------------------------------------------
   Editor table (WYSIWYG table rendering)
   -------------------------------------------------------------------------- */
.md-editor-table {
    border-collapse: collapse;
    width: max-content;
    max-width: 100%;
    margin: 0.25rem 0;
    font-size: var(--gem-font-size);
    line-height: var(--gem-line-height);
}

.md-editor-th,
.md-editor-td {
    border: 1px solid var(--gem-border);
    padding: 0.25em 0.65em;
    min-width: 4rem;
    min-height: 1.5em; /* stay visible even when cell content has been fully deleted */
    white-space: pre-wrap;
    vertical-align: top;
}

.md-editor-th {
    background-color: var(--gem-bg-code);
    font-weight: 600;
    text-align: left;   /* override browser <th> default of center */
}

/* Editor-mode chrome — only visible when the cursor is inside the table */
.md-editor-table--active .md-editor-th,
.md-editor-table--active .md-editor-td {
    cursor: text;
}

.md-editor-table--active .md-editor-td:hover,
.md-editor-table--active .md-editor-th:hover {
    background-color: color-mix(in srgb, var(--gem-cursor-color) 8%, transparent);
}

/* Active row shows raw pipe text in monospace */
.md-table-raw-cell {
    font-family: var(--gem-font-mono);
    font-size: var(--gem-font-size);
    padding: 0;
    border: none;
}

/* Ghost add-column button */
.md-table-ghost-col {
    border: 1px dashed var(--gem-border);
    padding: 0.2em 0.5em;
    color: var(--gem-text-muted);
    text-align: center;
    cursor: pointer;
    min-width: 1.5rem;
    user-select: none;
    font-size: 0.875em;
}

.md-table-ghost-col:hover {
    background-color: color-mix(in srgb, var(--gem-cursor-color) 12%, transparent);
    color: var(--gem-text);
}

/* Ghost add-row footer */
.md-table-ghost-row td {
    border: 1px dashed var(--gem-border);
    padding: 0.2em 0.65em;
    color: var(--gem-text-muted);
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-size: 0.875em;
}

.md-table-ghost-row td:hover {
    background-color: color-mix(in srgb, var(--gem-cursor-color) 12%, transparent);
    color: var(--gem-text);
}

/* Active cell — the cell currently being edited */
.md-editor-td-active,
.md-editor-th-active {
    padding: 0;
    background-color: color-mix(in srgb, var(--gem-cursor-color) 6%, transparent);
    outline: 2px solid var(--gem-cursor-color);
    outline-offset: -2px;
}

.md-editor-td-active .md-line-active,
.md-editor-th-active .md-line-active {
    padding: 0.25em 0.65em;
    min-width: 4rem;
    min-height: 1em;  /* keep empty cells clickable after content is fully deleted */
    outline: none;
    white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   Table grid picker (toolbar popover)
   -------------------------------------------------------------------------- */
.gem-table-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    background: var(--gem-bg-code);
    border: 1px solid var(--gem-border);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    user-select: none;
}

.gem-table-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1.25rem);
    gap: 3px;
    margin-bottom: 0.35rem;
}

.gem-table-picker-cell {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--gem-border);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.05s;
}

.gem-table-picker-cell.gem-active {
    background-color: color-mix(in srgb, var(--gem-cursor-color) 30%, transparent);
    border-color: var(--gem-cursor-color);
}

.gem-table-picker-label {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gem-text-muted);
    font-family: var(--gem-font-sans);
}

/* --------------------------------------------------------------------------
   Table context menu (right-click)
   -------------------------------------------------------------------------- */
.gem-table-ctx-menu {
    position: fixed;
    z-index: 1000;
    background: var(--gem-bg-code);
    border: 1px solid var(--gem-border);
    border-radius: 8px;
    padding: 0.3rem 0;
    min-width: 11rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-family: var(--gem-font-sans);
    font-size: 0.875rem;
}

.gem-ctx-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.9rem;
    background: none;
    border: none;
    text-align: left;
    color: var(--gem-text);
    cursor: pointer;
    white-space: nowrap;
}

    .gem-ctx-item:hover {
        background-color: color-mix(in srgb, var(--gem-cursor-color) 12%, transparent);
        color: var(--gem-text);
    }

    .gem-ctx-item.gem-danger {
        color: #dc2626;
    }

    .gem-ctx-item.gem-danger:hover {
        background-color: color-mix(in srgb, #dc2626 10%, transparent);
        color: #dc2626;
    }

    /* Active/checked state — shown on the currently-selected alignment option */
    .gem-ctx-item.gem-ctx-checked {
        font-weight: 600;
        color: var(--gem-cursor-color);
    }

    .gem-ctx-item.gem-ctx-checked::after {
        content: ' ✓';
        font-weight: normal;
        opacity: 0.7;
    }

.gem-ctx-sep {
    height: 1px;
    background-color: var(--gem-border);
    margin: 0.25rem 0;
}

.dark .gem-table-ctx-menu {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Toolbar — active (pressed) state for mode buttons
   -------------------------------------------------------------------------- */
.gemini-toolbar-btn.gem-toolbar-active {
    background-color: color-mix(in srgb, var(--gem-cursor-color) 15%, transparent);
    color: var(--gem-cursor-color);
    border-color: color-mix(in srgb, var(--gem-cursor-color) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Split view — draggable divider
   -------------------------------------------------------------------------- */
.gemini-split-divider {
    flex: 0 0 4px;
    background-color: var(--gem-border);
    cursor: col-resize;
    transition: background-color 0.15s;
}

    .gemini-split-divider:hover,
    .gemini-split-divider:active {
        background-color: var(--gem-cursor-color);
    }

/* --------------------------------------------------------------------------
   Combined tab bar — wraps pane tabs (left) and view tabs (right)
   -------------------------------------------------------------------------- */
.gem-tab-bar {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    background: var(--gem-bg-code);
    border-bottom: 1px solid var(--gem-border);
    padding: 0 0.25rem;
}

/* When nested inside the combined bar, each group loses its own border/bg */
.gem-tab-bar .gem-view-tabs,
.gem-tab-bar .gem-pane-tabs {
    border-bottom: none;
    background: transparent;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   View-layout tab strip (Editor / Split / Full) — sits between toolbar and panes
   -------------------------------------------------------------------------- */
.gem-view-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
    padding: 0.2rem 0.5rem;
    background: var(--gem-bg-code);
    border-bottom: 1px solid var(--gem-border);
}

.gem-view-tab {
    padding: 0.2rem 0.85rem;
    font-size: 0.75rem;
    font-family: var(--gem-font-sans);
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--gem-text-muted);
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: color 0.12s, background-color 0.12s, border-color 0.12s;
}

    .gem-view-tab:hover {
        color: var(--gem-text);
        background-color: color-mix(in srgb, var(--gem-border) 40%, transparent);
    }

    .gem-view-tab.gem-active {
        color: var(--gem-cursor-color);
        background-color: color-mix(in srgb, var(--gem-cursor-color) 12%, transparent);
        border-color: color-mix(in srgb, var(--gem-cursor-color) 35%, transparent);
        font-weight: 500;
    }

/* --------------------------------------------------------------------------
   Left-pane tab strip (WYSIWYG / Raw toggle inside Split & Wysiwyg modes)
   -------------------------------------------------------------------------- */
.gem-pane-tabs {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--gem-border);
    background: var(--gem-gutter-bg);
}

.gem-pane-tab {
    padding: 0.3rem 0.85rem;
    font-size: 0.8125rem;
    font-family: var(--gem-font-sans);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--gem-text-muted);
    cursor: pointer;
    margin-bottom: -1px;   /* overlap the container border */
    transition: color 0.15s, border-color 0.15s;
}

    .gem-pane-tab:hover {
        color: var(--gem-text);
    }

    .gem-pane-tab.gem-active {
        color: var(--gem-cursor-color);
        border-bottom-color: var(--gem-cursor-color);
        font-weight: 500;
    }

/* --------------------------------------------------------------------------
   Editor surface scroll container — thin, auto-hiding scrollbar
   -------------------------------------------------------------------------- */
.gemini-editor-surface-wrap {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* hidden by default */
    transition: scrollbar-color 0.2s;
}
.gemini-editor-surface-wrap:hover {
    scrollbar-color: var(--gem-border) transparent; /* reveal on hover */
}

.gemini-editor-surface-wrap::-webkit-scrollbar { width: 6px; }
.gemini-editor-surface-wrap::-webkit-scrollbar-track { background: transparent; }
.gemini-editor-surface-wrap::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s;
}
.gemini-editor-surface-wrap:hover::-webkit-scrollbar-thumb {
    background: var(--gem-border);
}

/* --------------------------------------------------------------------------
   Raw-pane gutter — uniform row heights that track the textarea's line height
   -------------------------------------------------------------------------- */

/* Each raw gutter row = exactly one textarea line tall.
   font-size × line-height must match .gemini-raw-editor exactly. */
.gemini-gutter--raw .gemini-gutter-row {
    height: calc(var(--gem-font-size) * var(--gem-line-height));
    align-items: center;
}

/* --------------------------------------------------------------------------
   Raw markdown editor
   -------------------------------------------------------------------------- */
.gemini-raw-editor {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: var(--gem-padding);
    font-family: var(--gem-font-mono);
    font-size: var(--gem-font-size);
    line-height: var(--gem-line-height);
    color: var(--gem-text);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Image picker modal
   -------------------------------------------------------------------------- */
.gem-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gem-modal {
    background: var(--gem-bg-code, #f5f5f5);
    border: 1px solid var(--gem-border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    width: min(680px, 95vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gem-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--gem-border);
}

.gem-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gem-text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

    .gem-modal-close:hover { background: color-mix(in srgb, var(--gem-text-muted) 15%, transparent); }

.gem-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--gem-border);
}

.gem-modal-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 0.55rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gem-text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}

    .gem-modal-tab.gem-active {
        color: var(--gem-cursor-color);
        border-bottom-color: var(--gem-cursor-color);
        font-weight: 600;
    }

.gem-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.gem-modal-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gem-border);
    flex-shrink: 0;
}

/* Library grid */
.gem-picker-search {
    padding: 0.5rem 1rem 0;
}

.gem-picker-search-input {
    width: 100%;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--gem-border);
    border-radius: 6px;
    font-size: 0.875rem;
    background: transparent;
    color: var(--gem-text);
    box-sizing: border-box;
}

.gem-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    flex: 1;
    overflow-y: auto;
}

.gem-picker-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem;
    border: 2px solid var(--gem-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, background 0.12s;
}

    .gem-picker-thumb img {
        width: 100%;
        height: 80px;
        object-fit: contain;
        border-radius: 4px;
    }

    .gem-picker-thumb:hover {
        border-color: var(--gem-cursor-color);
        background: color-mix(in srgb, var(--gem-cursor-color) 6%, transparent);
    }

    .gem-picker-thumb.gem-selected {
        border-color: var(--gem-cursor-color);
        background: color-mix(in srgb, var(--gem-cursor-color) 12%, transparent);
    }

.gem-picker-name {
    font-size: 0.7rem;
    color: var(--gem-text-muted);
    word-break: break-all;
    max-width: 100%;
}

.gem-picker-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gem-text-muted);
    font-size: 0.875rem;
    padding: 2rem;
}

/* Alt text input */
.gem-picker-alt {
    flex: 1;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--gem-border);
    border-radius: 6px;
    font-size: 0.875rem;
    background: transparent;
    color: var(--gem-text);
}

/* Upload drop area */
.gem-picker-upload-area {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gem-upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem;
    border: 2px dashed var(--gem-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s;
}

    .gem-upload-drop:hover { border-color: var(--gem-cursor-color); }

/* URL form */
.gem-picker-url-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
}

    .gem-picker-url-form label {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.875rem;
        color: var(--gem-text-muted);
    }

.gem-picker-url-input {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--gem-border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: transparent;
    color: var(--gem-text);
}

/* Generic buttons (reused inside modal) */
.gem-btn {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--gem-border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gem-text);
    transition: background 0.12s;
}

    .gem-btn:hover { background: color-mix(in srgb, var(--gem-text) 8%, transparent); }
    .gem-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.gem-btn-primary {
    background: var(--gem-cursor-color);
    border-color: var(--gem-cursor-color);
    color: #fff;
}

    .gem-btn-primary:hover { background: color-mix(in srgb, var(--gem-cursor-color) 85%, #000); }
    .gem-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.gem-error-msg { color: #dc2626; font-size: 0.875rem; }
.gem-text-muted { color: var(--gem-text-muted); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Dark-mode adjustments for new elements
   -------------------------------------------------------------------------- */
.dark .gem-modal {
    background: #1e1e1e;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}