/* Bridge Milkdown Crepe CSS Variables to DaisyUI Theme Tokens */
.milkdown-wrapper .milkdown {
      --crepe-color-background: transparent;
      --crepe-color-surface: var(--fallback-b2, oklch(var(--b2) / 1));
      --crepe-color-surface-low: var(--fallback-b3, oklch(var(--b3) / 1));
      --crepe-color-on-background: var(--fallback-bc, oklch(var(--bc) / 1));
      --crepe-color-on-surface: var(--fallback-bc, oklch(var(--bc) / 1));
      --crepe-color-on-surface-variant: var(--fallback-bc, oklch(var(--bc) / 0.7));
      --crepe-color-primary: var(--fallback-p, oklch(var(--p) / 1));
      --crepe-color-secondary: var(--fallback-s, oklch(var(--s) / 1));
      --crepe-color-on-secondary: var(--fallback-sc, oklch(var(--sc) / 1));
      --crepe-color-outline: var(--fallback-bc, oklch(var(--bc) / 0.5));
      --crepe-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --crepe-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      font-family: inherit;
      width: 100%;
    }

/* Crepe's toolbar defaults to dark ink. Explicit theme tokens keep controls
   readable on the app's dark glass surface and make active formatting clear. */
.milkdown-wrapper .milkdown .milkdown-top-bar,
.milkdown-wrapper .milkdown .milkdown-toolbar {
    color: var(--color-base-content);
    background-color: color-mix(in oklab, var(--color-base-100) 72%, transparent);
    border-color: color-mix(in oklab, var(--color-base-content) 12%, transparent);
}

.milkdown-wrapper .milkdown .top-bar-item,
.milkdown-wrapper .milkdown .top-bar-heading-button,
.milkdown-wrapper .milkdown .toolbar-item {
    color: color-mix(in oklab, var(--color-base-content) 82%, transparent);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.milkdown-wrapper .milkdown .top-bar-item svg,
.milkdown-wrapper .milkdown .top-bar-heading-button svg,
.milkdown-wrapper .milkdown .toolbar-item svg {
    color: currentColor;
    fill: currentColor;
    stroke: currentColor;
}

.milkdown-wrapper .milkdown .top-bar-item:hover,
.milkdown-wrapper .milkdown .top-bar-heading-button:hover,
.milkdown-wrapper .milkdown .toolbar-item:hover,
.milkdown-wrapper .milkdown .top-bar-item:focus-visible,
.milkdown-wrapper .milkdown .top-bar-heading-button:focus-visible,
.milkdown-wrapper .milkdown .toolbar-item:focus-visible {
    color: var(--color-primary);
    background-color: color-mix(in oklab, var(--color-primary) 14%, transparent);
    border-color: color-mix(in oklab, var(--color-primary) 35%, transparent);
    outline: none;
}

.milkdown-wrapper .milkdown .top-bar-item.active,
.milkdown-wrapper .milkdown .top-bar-item[aria-pressed="true"],
.milkdown-wrapper .milkdown .top-bar-item[data-active="true"],
.milkdown-wrapper .milkdown .top-bar-item[data-selected="true"],
.milkdown-wrapper .milkdown .toolbar-item.active,
.milkdown-wrapper .milkdown .toolbar-item[aria-pressed="true"],
.milkdown-wrapper .milkdown .toolbar-item[data-active="true"],
.milkdown-wrapper .milkdown .toolbar-item[data-selected="true"] {
    color: var(--color-primary-content);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary-content) 18%, transparent);
}

.milkdown-wrapper .milkdown .top-bar-divider,
.milkdown-wrapper .milkdown .divider {
    background-color: color-mix(in oklab, var(--color-base-content) 14%, transparent);
}

/* Editor Canvas Container & Placeholder Resets */
.milkdown-wrapper .ProseMirror {
    min-height: 420px;
    outline: none !important;
    color: var(--color-base-content);
    line-height: 1.75;
    padding: 1.5rem;
    font-size: 1rem;
    /* ProseMirror requires pre-wrap for correct caret/selection behavior;
       style/prosemirror.css is not loaded — set it here (ProseMirror warns otherwise). */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

    .milkdown-wrapper .ProseMirror p.is-editor-empty:first-child::before {
      color: var(--fallback-bc, oklch(var(--bc) / 0.4));
      content: attr(data-placeholder);
      float: left;
      height: 0;
      pointer-events: none;
    }

    /* Restore Lists stripped by Tailwind Preflight */
    .milkdown-wrapper .ProseMirror ul {
      list-style-type: disc;
      padding-left: 1.75rem;
    }
    .milkdown-wrapper .ProseMirror ol {
      list-style-type: decimal;
      padding-left: 1.75rem;
    }
    .milkdown-wrapper .ProseMirror li {
      margin: 0.35rem 0;
    }

    /* KaTeX Mathematical Expressions Styling */
    .milkdown-wrapper .katex-display {
      overflow-x: auto;
      overflow-y: hidden;
      padding: 0.75rem 0;
      margin: 0.75rem 0;
    }
    .milkdown-wrapper .katex {
      font-size: 1.1em;
      text-rendering: auto;
    }

    /* Inline Code Formatting */
    .milkdown-wrapper .ProseMirror code:not(pre code) {
      background-color: var(--fallback-b3, oklch(var(--b3) / 0.8));
      color: var(--fallback-p, oklch(var(--p) / 1));
      padding: 0.15rem 0.4rem;
      border-radius: 0.25rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.9em;
    }

    /* Code Block Styling */
    .milkdown-wrapper .ProseMirror pre {
      background-color: var(--fallback-b2, oklch(var(--b2) / 1));
      padding: 1rem 1.25rem;
      border-radius: 0.5rem;
      border: 1px solid var(--fallback-bc, oklch(var(--bc) / 0.15));
      overflow-x: auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.9rem;
      line-height: 1.6;
      margin: 1rem 0;
    }

    /* Blockquote Styling */
    .milkdown-wrapper .ProseMirror blockquote {
      border-left: 4px solid var(--fallback-p, oklch(var(--p) / 1));
      padding-left: 1rem;
      margin: 1rem 0;
      font-style: italic;
      opacity: 0.9;
    }

    /* ── Table Styling ─────────────────────────────────────────── */
    /* Crepe wraps tables in .milkdown-table-block and draws cell borders
       with color-mix(--crepe-color-outline, transparent 80%). Our near-
       transparent outline made them invisible, and Crepe's table.css loads
       AFTER this file (injected by esm.sh), so we force visible borders
       with !important. Covers both the wrapped (.milkdown-table-block) and
       unwrapped (.ProseMirror table) render cases. */
    .milkdown-wrapper .milkdown-table-block,
    .milkdown-wrapper .ProseMirror table {
      width: 100% !important;
      border-collapse: collapse !important;
      margin: 1rem 0 !important;
    }

    .milkdown-wrapper .milkdown-table-block td,
    .milkdown-wrapper .milkdown-table-block th,
    .milkdown-wrapper .ProseMirror table td,
    .milkdown-wrapper .ProseMirror table th {
      border: 1px solid !important;
      padding: 0.5rem 0.75rem !important;
      min-width: 4rem !important;
      vertical-align: top;
      position: relative;
    }

    .milkdown-wrapper .milkdown-table-block th,
    .milkdown-wrapper .ProseMirror table th {
      background-color: var(--fallback-b2, oklch(var(--b2) / 1)) !important;
      font-weight: 600 !important;
    }

    .milkdown-wrapper .milkdown-table-block .selectedCell,
    .milkdown-wrapper .ProseMirror table .selectedCell {
      background-color: color-mix(in oklab, var(--fallback-p, oklch(var(--p) / 1)) 18%, var(--fallback-b1, oklch(var(--b1) / 1))) !important;
    }

    /* Show the active cell so the teacher can see where to type */
    .milkdown-wrapper .milkdown-table-block td:focus-within,
    .milkdown-wrapper .milkdown-table-block th:focus-within,
    .milkdown-wrapper .ProseMirror table td:focus-within,
    .milkdown-wrapper .ProseMirror table th:focus-within {
      outline: 2px solid var(--fallback-p, oklch(var(--p) / 0.85)) !important;
      outline-offset: -2px;
    }

    /* Keep empty cells clickable/typable */
    .milkdown-wrapper .milkdown-table-block td > p,
    .milkdown-wrapper .milkdown-table-block th > p,
    .milkdown-wrapper .ProseMirror table td > p,
    .milkdown-wrapper .ProseMirror table th > p {
      min-height: 1.25rem;
    }