/* ==========================================================================
   Canvas Preview Panel + Result Widget
   Minimalistic, clean design matching slide presentation patterns
   (Supports markdown + CSV with inline LaTeX inside markdown)
   ========================================================================== */

/* ── Theme Tokens ────────────────────────── */
:root {
    --canvas-md-card-bg: var(--bg-primary, #ffffff);
    --canvas-md-card-border: var(--border-color, rgba(0, 0, 0, 0.08));
    --canvas-md-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --canvas-md-text-primary: var(--text-color, #1a1a1a);
    --canvas-md-text-secondary: var(--text-color-secondary, #6b7280);
    --canvas-md-input-bg: var(--bg-normal);
    --canvas-md-accent: var(--accent-color, #3b82f6);
    --canvas-md-preview-bg: var(--bg-normal);
    --canvas-md-preview-border: var(--border-color, rgba(0, 0, 0, 0.08));
    --canvas-markdown-preview-width: 50vw;
    --canvas-markdown-preview-min-width: 420px;
    --canvas-markdown-preview-min-main-width: 360px;
}

:root[data-mode="dark"] {
    --canvas-md-card-bg: var(--bg-primary, #18181b);
    --canvas-md-card-border: var(--border-color, rgba(255, 255, 255, 0.08));
    --canvas-md-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --canvas-md-text-primary: var(--text-color, #f5f5f5);
    --canvas-md-text-secondary: var(--text-color-secondary, #a1a1aa);
    --canvas-md-input-bg: #27272a;
    --canvas-md-preview-bg: #1c1c20;
    --canvas-md-preview-border: rgba(255, 255, 255, 0.06);
}

/* ── Panel Layout (matches slide presentation) ────────────────────────── */
.canvas-markdown-preview-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: clamp(
        var(--canvas-markdown-preview-min-width),
        var(--canvas-markdown-preview-width),
        calc(100vw - var(--canvas-markdown-preview-min-main-width))
    );
    max-width: none;
    min-width: var(--canvas-markdown-preview-min-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: canvas-preview;
    background: var(--canvas-md-preview-bg);
    border-left: 1px solid var(--canvas-md-preview-border);
    z-index: 40;
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                width 0.18s ease;
}

.canvas-markdown-preview-panel.visible {
    transform: translateX(0);
    opacity: 1;
}

body.canvas-markdown-preview-open .main-container {
    margin-right: clamp(
        var(--canvas-markdown-preview-min-width),
        var(--canvas-markdown-preview-width),
        calc(100vw - var(--canvas-markdown-preview-min-main-width))
    );
    transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.canvas-markdown-preview-resizer {
    position: absolute;
    top: 0;
    left: -7px;
    width: 14px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--canvas-md-accent);
    cursor: col-resize;
    touch-action: none;
    z-index: 3;
}

.canvas-markdown-preview-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    background: transparent;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.canvas-markdown-preview-resizer:focus-visible {
    outline: 2px solid var(--canvas-md-accent);
    outline-offset: -4px;
}

.canvas-markdown-preview-resizer:focus-visible::before,
body.canvas-markdown-preview-resizing .canvas-markdown-preview-resizer::before {
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .canvas-markdown-preview-resizer:hover::before {
        background: currentColor;
        box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
    }
}

body.canvas-markdown-preview-resizing {
    cursor: col-resize;
    user-select: none;
}

body.canvas-markdown-preview-resizing .main-container,
body.canvas-markdown-preview-resizing .canvas-markdown-preview-panel {
    transition: none !important;
}

body.canvas-markdown-preview-resizing .canvas-html-preview-iframe,
body.canvas-markdown-preview-resizing .canvas-latex-pdf-preview-frame {
    pointer-events: none;
}

@media (max-width: 900px) {
    .canvas-markdown-preview-panel {
        width: 100%;
        min-width: unset;
        z-index: 200;
    }
    body.canvas-markdown-preview-open .main-container {
        margin-right: 0;
    }

    .canvas-markdown-preview-resizer {
        display: none;
    }
}

/* ── Panel Header ────────────────────────── */
.canvas-markdown-preview-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--canvas-md-card-bg);
    flex-shrink: 0;
}

.canvas-markdown-preview-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.canvas-markdown-preview-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.canvas-markdown-copy-btn[data-copy-state="copied"],
.canvas-markdown-copy-btn[data-copy-state="error"] {
    opacity: 1;
    pointer-events: auto;
}

.canvas-markdown-copy-btn[data-copy-state="copied"] {
    color: #22c55e;
}

.canvas-markdown-copy-btn[data-copy-state="error"] {
    color: #ef4444;
}

.canvas-markdown-editor-header-controls {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.canvas-markdown-preview-panel[data-content-type="markdown"] .canvas-markdown-editor-header-controls {
    display: flex;
}

/* A live Markdown canvas is intentionally read-only and does not construct the
   full editor until generation completes. Hide editor-only controls meanwhile. */
.canvas-markdown-preview-panel.is-streaming-markdown .canvas-markdown-editor-header-controls {
    display: none;
}

/* ── Markdown / Editor view toggle ─────────────────────────
   A segmented "tab switcher" that lets the user flip between the
   raw Markdown source and the rich editor. It replaces the old
   circular header buttons with a compact, pill-style control
   where the active tab is highlighted with an elevated surface. */
.canvas-markdown-editor-view-toggle {
    /* Segmented container: a soft, recessed track that visually
       groups the two tabs together. */
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--canvas-md-input-bg);
    border: 1px solid var(--canvas-md-card-border);
}

.canvas-markdown-editor-view-btn {
    /* Individual tab: transparent by default so only the active tab
       shows the raised surface. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--canvas-md-text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Icon wrapper keeps the SVG optically aligned with the label. */
.canvas-markdown-editor-view-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.canvas-markdown-editor-view-btn-icon svg {
    width: 15px;
    height: 15px;
}

.canvas-markdown-editor-view-btn-label {
    /* The visible text label; provides the accessible name for the tab. */
    display: inline-block;
}

@container canvas-preview (max-width: 680px) {
    .canvas-markdown-editor-view-btn {
        width: 30px;
        min-width: 30px;
        padding-inline: 0;
        gap: 0;
    }

    .canvas-markdown-editor-view-btn-label {
        display: none;
    }
}

/* Active tab: raised surface with a subtle shadow so it reads as the
   currently selected view. */
.canvas-markdown-editor-view-btn.active {
    background: var(--canvas-md-card-bg);
    color: var(--canvas-md-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.canvas-markdown-editor-view-btn:focus-visible {
    outline: 2px solid var(--canvas-md-accent);
    outline-offset: 2px;
}

/* Only apply hover feedback on hover-capable pointers (not touch). */
@media (hover: hover) and (pointer: fine) {
    .canvas-markdown-editor-view-btn:not(:disabled):not(.active):hover {
        color: var(--canvas-md-text-primary);
    }
}

.canvas-markdown-editor-view-btn:disabled,
.canvas-markdown-editor-view-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.canvas-markdown-editor-history-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@container canvas-preview (max-width: 600px) {
    .canvas-markdown-editor-history-controls {
        display: none;
    }
}

.canvas-reference-floating-toolbar {
    --canvas-reference-tooltip-bg: #ffffff;
    --canvas-reference-tooltip-border: #bfdbfe;
    --canvas-reference-tooltip-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    --canvas-reference-btn-bg: #2563eb;
    --canvas-reference-btn-hover-bg: #1d4ed8;
    --canvas-reference-btn-text: #ffffff;
    --canvas-reference-btn-hover-text: #ffffff;
    position: fixed;
    z-index: 260;
    display: flex;
    padding: 5px;
    border: 1px solid var(--canvas-reference-tooltip-border);
    border-radius: 14px;
    background-color: var(--canvas-reference-tooltip-bg);
    box-shadow: var(--canvas-reference-tooltip-shadow);
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

[data-mode="dark"] .canvas-reference-floating-toolbar {
    --canvas-reference-tooltip-bg: #202124;
    --canvas-reference-tooltip-border: #3b4658;
    --canvas-reference-tooltip-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
    --canvas-reference-btn-bg: #7ab7ff;
    --canvas-reference-btn-hover-bg: #9ccbff;
    --canvas-reference-btn-text: #0b1220;
    --canvas-reference-btn-hover-text: #08111f;
}

.canvas-reference-floating-toolbar[hidden] {
    display: none;
}

.canvas-reference-floating-toolbar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background-color: var(--canvas-reference-tooltip-bg);
    border-bottom: 1px solid var(--canvas-reference-tooltip-border);
    border-right: 1px solid var(--canvas-reference-tooltip-border);
    transform: translateX(-50%) rotate(45deg);
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.canvas-reference-floating-toolbar.is-below::after {
    top: -5px;
    bottom: auto;
}

.canvas-reference-floating-btn {
    min-height: 34px;
    border: none;
    border-radius: 10px;
    background-color: var(--canvas-reference-btn-bg);
    color: var(--canvas-reference-btn-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
    .canvas-reference-floating-btn:hover {
        background-color: var(--canvas-reference-btn-hover-bg);
        color: var(--canvas-reference-btn-hover-text);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
        transform: translateY(-1px);
    }
}

.canvas-reference-floating-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.canvas-markdown-preview-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.canvas-markdown-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--canvas-md-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.canvas-markdown-preview-status {
    font-size: 11px;
    color: var(--canvas-md-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-markdown-preview-status.generating::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--canvas-md-accent);
    border-radius: 50%;
    animation: pulseDim 1.5s ease-in-out infinite;
}

.canvas-markdown-preview-status.complete::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
}

.canvas-markdown-preview-status.unsaved::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
}

.canvas-markdown-preview-status.error::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
}

/* Download controls
   The canvas/markdown preview reuses the shared slide-presentation download
   controls (the `.slide-presentation-preview-download-controls` pill with a
   `.slide-presentation-preview-download-select`). The format select is only
   shown for LaTeX PDF previews. When it is hidden (e.g. plain markdown
   canvas), drop the outer pill chrome so only the circular download button
   remains visible. */
.canvas-markdown-preview-header-right .slide-presentation-preview-download-controls:has(.slide-presentation-preview-download-select[hidden]) {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
}

.canvas-markdown-share-btn[hidden] {
    display: none !important;
}

/* ── Workspace (main content area) ────────────────────────── */
.canvas-markdown-preview-workspace {
    flex: 1;
    display: flex;
    overflow: hidden;
    border-top: 1px solid var(--canvas-md-preview-border);
    background: var(--canvas-md-preview-bg);
    min-width: 0;
}

/* ── Document Track (single scrollable document) ────────────────────────── */
.canvas-markdown-preview-track {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    scrollbar-width: thin;
    scrollbar-color: var(--canvas-md-preview-border) transparent;
    overscroll-behavior-x: none;
    overflow-anchor: none;
}

.canvas-markdown-preview-track::-webkit-scrollbar {
    width: 6px;
}

.canvas-markdown-preview-track::-webkit-scrollbar-track {
    background: transparent;
}

.canvas-markdown-preview-track::-webkit-scrollbar-thumb {
    background: var(--canvas-md-preview-border);
    border-radius: 3px;
}

/* Single document container */
.canvas-markdown-preview-page {
    width: 100%;
    background: var(--canvas-md-card-bg);
    box-shadow: var(--canvas-md-card-shadow);
}

:root[data-mode="dark"] .canvas-markdown-preview-page {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.canvas-markdown-preview-page-content {
    padding: 20px 20px;
    color: var(--canvas-md-text-primary);
}

/* ── Rendered Markdown Styling ────────────────────────── */
.canvas-markdown-render.markdown-body {
    color: var(--canvas-md-text-primary);
    font-size: 15px;
    line-height: 1.7;
}

.canvas-markdown-render.markdown-body h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--canvas-md-preview-border);
    letter-spacing: -0.02em;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 32px 0 16px 0;
    letter-spacing: -0.01em;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 24px 0 12px 0;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body h4,
.canvas-markdown-render.markdown-body h5,
.canvas-markdown-render.markdown-body h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 20px 0 8px 0;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body p {
    margin: 0 0 16px 0;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body p:last-child {
    margin-bottom: 0;
}

.canvas-markdown-render.markdown-body ul,
.canvas-markdown-render.markdown-body ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.canvas-markdown-render.markdown-body li {
    margin-bottom: 8px;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body li:last-child {
    margin-bottom: 0;
}

.canvas-markdown-render.markdown-body blockquote {
    margin: 16px 0;
    padding: 12px 20px;
    border-left: 3px solid var(--canvas-md-accent);
    background: var(--canvas-md-input-bg);
    border-radius: 0 8px 8px 0;
    color: var(--canvas-md-text-secondary);
}

.canvas-markdown-render.markdown-body blockquote p {
    margin: 0;
}

.canvas-markdown-render.markdown-body code {
    font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
    font-size: 0.875em;
    background: var(--canvas-md-input-bg);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--canvas-md-text-primary);
}

.canvas-markdown-render.markdown-body pre {
    margin: 16px 0;
    padding: 16px;
    background: var(--canvas-md-input-bg);
    border: 1px solid var(--canvas-md-preview-border);
    border-radius: 8px;
    overflow-x: auto;
}

.canvas-markdown-render.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

.canvas-markdown-render.markdown-body hr {
    margin: 32px 0;
    border: none;
    border-top: 1px solid var(--canvas-md-preview-border);
}

.canvas-markdown-render.markdown-body table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.canvas-markdown-render.markdown-body th,
.canvas-markdown-render.markdown-body td {
    padding: 10px 12px;
    border: 1px solid var(--canvas-md-preview-border);
    text-align: left;
}

.canvas-markdown-render.markdown-body th {
    background: var(--canvas-md-input-bg);
    font-weight: 600;
}

.canvas-markdown-render.markdown-body a {
    color: var(--canvas-md-accent);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .canvas-markdown-render.markdown-body a:hover {
        text-decoration: underline;
    }
}

.canvas-markdown-render.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

.canvas-markdown-render.markdown-body .katex-display {
    margin: 16px 0;
    padding: 16px;
    background: var(--canvas-md-input-bg);
    border-radius: 8px;
    overflow-x: auto;
}

/* ── Result Widget (in-chat) ────────────────────────── */
.canvas-markdown-result-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--canvas-md-card-border);
    border-radius: 12px;
    max-width: 420px;
}

.canvas-markdown-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.canvas-markdown-result-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--canvas-md-accent);
}

:root[data-mode="dark"] .canvas-markdown-result-icon {
    background: rgba(59, 130, 246, 0.15);
}

.canvas-markdown-result-meta {
    flex: 1;
    min-width: 0;
}

.canvas-markdown-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--canvas-md-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 2px;
}

.canvas-markdown-result-sub {
    font-size: 12px;
    color: var(--canvas-md-text-secondary);
}

.canvas-markdown-result-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--canvas-md-accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .canvas-markdown-result-open-btn:hover {
        opacity: 0.85;
    }
}

/* ── CSV Table Styling ────────────────────────── */
.canvas-csv-render {
    width: 100%;
}

.canvas-csv-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--canvas-md-preview-border);
}

.canvas-csv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
    min-width: 400px;
}

.canvas-csv-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.canvas-csv-table th {
    background: var(--canvas-md-input-bg);
    color: var(--canvas-md-text-primary);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--canvas-md-preview-border);
    white-space: nowrap;
}

.canvas-csv-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--canvas-md-preview-border);
    color: var(--canvas-md-text-primary);
    vertical-align: top;
}

@media (hover: hover) and (pointer: fine) {
    .canvas-csv-table tbody tr:hover {
        background: rgba(59, 130, 246, 0.04);
    }
}

@media (hover: hover) and (pointer: fine) {
    :root[data-mode="dark"] .canvas-csv-table tbody tr:hover {
        background: rgba(59, 130, 246, 0.08);
    }
}

.canvas-csv-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alternating row colors */
.canvas-csv-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

:root[data-mode="dark"] .canvas-csv-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.canvas-markdown-result-icon.canvas-type-csv {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

:root[data-mode="dark"] .canvas-markdown-result-icon.canvas-type-csv {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.canvas-markdown-result-icon.canvas-type-html {
    background: rgba(233, 76, 48, 0.1);
    color: #e94c30;
}

:root[data-mode="dark"] .canvas-markdown-result-icon.canvas-type-html {
    background: rgba(233, 76, 48, 0.15);
    color: #ff7961;
}

.canvas-markdown-result-icon.canvas-type-mermaid {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
}

:root[data-mode="dark"] .canvas-markdown-result-icon.canvas-type-mermaid {
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
}

/* ── Code/Preview Toggle (HTML type) ────────────────────────── */
.canvas-html-view-toggle {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.canvas-markdown-preview-panel[data-content-type="html"] .canvas-html-view-toggle,
.canvas-markdown-preview-panel[data-content-type="csv"] .canvas-html-view-toggle,
.canvas-markdown-preview-panel[data-content-type="mermaid"] .canvas-html-view-toggle,
.canvas-markdown-preview-panel[data-content-type="latex"] .canvas-html-view-toggle {
    display: flex;
}

@media (hover: hover) and (pointer: fine) {
    .canvas-html-view-toggle-btn:hover {
        color: var(--canvas-md-text-primary);
    }
}

.canvas-html-view-toggle-btn:disabled,
.canvas-html-view-toggle-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--canvas-md-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .canvas-html-view-toggle-btn:disabled:hover, .canvas-html-view-toggle-btn.disabled:hover {
        color: var(--canvas-md-text-secondary);
    }
}

.canvas-html-view-toggle-btn.active {
    background: var(--canvas-md-input-bg);
    color: var(--canvas-md-text-primary);
}

/* ── HTML Preview Iframe (sandboxed) ────────────────────────── */
.canvas-html-preview-iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
}

.canvas-latex-pdf-preview-frame {
    min-height: 620px;
    border-radius: 0;
}

.canvas-html-preview-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--canvas-md-card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.canvas-markdown-editor-host {
    width: 100%;
    min-height: 400px;
}

/* The persistent streaming article owns no nested scroll viewport. Keeping a
   single vertical owner prevents wheel/scrollbar gestures from fighting the
   incoming Markdown updates. */
.canvas-markdown-streaming-preview {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 28px clamp(18px, 4vw, 48px) 32vh;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

.canvas-markdown-streaming-preview pre,
.canvas-markdown-streaming-preview table,
.canvas-markdown-streaming-preview .katex-display {
    max-width: 100%;
}

.canvas-preview-pane {
    width: 100%;
    min-height: 400px;
}

.canvas-html-preview-wrapper.code-view .canvas-preview-pane {
    display: none;
}

.canvas-html-preview-wrapper.preview-view .canvas-html-code-view {
    display: none;
}

/* ── HTML Code View ────────────────────────── */
.canvas-html-code-view {
    width: 100%;
    height: 100%;
    min-height: 400px;
    overflow: auto;
    background: var(--canvas-md-input-bg);
    border-radius: 8px;
    font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--canvas-md-text-primary);
    white-space: pre;
    word-wrap: normal;
    border: 1px solid var(--canvas-md-preview-border);
    padding: 14px 16px;
    resize: none;
    outline: none;
    caret-color: var(--canvas-md-accent);
    tab-size: 4;
}

.canvas-html-code-view:focus {
    border-color: var(--canvas-md-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.canvas-html-code-view:disabled {
    opacity: 0.64;
    cursor: not-allowed;
}

.canvas-html-code-view::selection {
    background: rgba(59, 130, 246, 0.24);
}

/* HTML page content area fills available space */
.canvas-markdown-preview-page[data-content-type="html"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.canvas-markdown-preview-page[data-content-type="latex"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 680px;
}

.canvas-markdown-preview-page[data-content-type="mermaid"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.canvas-html-preview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.canvas-mermaid-preview-pane {
    width: 100%;
    min-height: 400px;
    border-radius: 8px;
    border: 1px solid var(--canvas-md-preview-border);
    background: var(--canvas-md-card-bg);
    padding: 16px;
    overflow: auto;
}

.canvas-mermaid-diagram svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.canvas-mermaid-diagram.mermaid-diagram-error {
    color: #dc2626;
    font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

/* When HTML type is active, track should fill height */
.canvas-markdown-preview-panel[data-content-type="html"] .canvas-markdown-preview-track,
.canvas-markdown-preview-panel[data-content-type="mermaid"] .canvas-markdown-preview-track {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* ── Fullscreen button – only visible for HTML ────────────────────────── */
.canvas-html-fullscreen-btn {
    display: none;
}

.canvas-markdown-preview-panel[data-content-type="html"] .canvas-html-fullscreen-btn {
    display: flex;
}

/* ── Fullscreen overlay ────────────────────────── */
.canvas-html-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    animation: fadeIn 0.2s ease;
}

.canvas-html-fullscreen-content {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}

.canvas-html-fullscreen-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.canvas-html-fullscreen-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .canvas-html-fullscreen-close:hover {
        background: rgba(0, 0, 0, 0.7);
    }
}

/* ── Mobile Responsive ────────────────────────── */
@media (max-width: 900px) {
    .canvas-markdown-preview-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 85vh;
        max-width: none;
        min-width: unset;
        border-left: none;
        border-top: 1px solid var(--canvas-md-preview-border);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .canvas-markdown-preview-panel.visible {
        transform: translateY(0);
    }


    .canvas-markdown-preview-page {
        border-radius: 10px;
    }

    .canvas-markdown-result-widget {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        max-width: 100%;
    }

    .canvas-markdown-result-open-btn {
        width: 100%;
        justify-content: center;
    }

    .canvas-markdown-header-action-btn {
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }

    .canvas-csv-table {
        font-size: 12px;
        min-width: 300px;
    }

    .canvas-csv-table th,
    .canvas-csv-table td {
        padding: 8px 12px;
    }

}