/* =====================================================================
   Text-to-PDF Lexical editor — plain CSS, scoped to `.lexical-tool`.
   Values are taken 1:1 from the Figma (PPS-Tailwind / Text to PDF).
   States via `data-state` on `.lexical-tool`:
     empty | typing | drag | files | converting | result
   ===================================================================== */

.lexical-tool {
    --lt-border: #e2e8f0;
    --lt-border-strong: #cbd5e1;
    --lt-muted: #94a3b8;
    --lt-sub: #64748b;
    --lt-text: #334155;
    --lt-ink: #0f172a;
    --lt-ink-hover: #1e293b;
    --lt-green: #10b981;
    --lt-green-hover: #059669;
    --lt-hover: #f1f5f9;
    --lt-toolbar-h: 48px;
    --lt-footer-h: 64px;
    --lt-body-h: 320px;

    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid var(--lt-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
}

/* Multi-file section (Figma Upload/Conversion/Result) has NO outer border —
   the dropzone and each file row carry their own borders instead. */
.lexical-tool[data-state="files"],
.lexical-tool[data-state="converting"],
.lexical-tool[data-state="result"] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* highlight while OS files are dragged over the tool */
.lexical-tool.is-dragover {
    outline: 2px dashed var(--lt-green);
    outline-offset: -2px;
}

/* ---- Reset the bundled playground chrome inside the card --------- */
.lexical-tool #root {
    margin: 0;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    width: 100%;
    display: flex;
}

.lexical-tool .editor-shell {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lexical-tool .editor-shell .editor-container {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    background: #fff;
}

.lexical-tool .editor-scroller {
    flex: 1;
    display: flex;
    min-height: var(--lt-body-h);
    resize: none;
}

/* ---- Toolbar loading shimmer ------------------------------------
   The skeleton toolbar (shown until the Lexical editor mounts) fills the full
   width with bars that shimmer left-to-right so the whole toolbar animates. */
.lexical-tool .lcp-toolbar-skeleton span {
    display: inline-block;
    background: linear-gradient(90deg, #eef2f6 25%, #dbe2ea 50%, #eef2f6 75%);
    background-size: 200% 100%;
    animation: lt-toolbar-shimmer 1.3s ease-in-out infinite;
}

@keyframes lt-toolbar-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ---- Toolbar ----------------------------------------------------- */
.lexical-tool .toolbar {
    height: var(--lt-toolbar-h);
    min-height: var(--lt-toolbar-h);
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--lt-border);
    padding: 4px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
}

.lexical-tool .toolbar::-webkit-scrollbar {
    height: 9px;
}

.lexical-tool .toolbar .divider {
    height: 32px;
    align-self: center;
    background-color: var(--lt-border);
    margin: 0 2px;
    flex-shrink: 0;
    /* the overflowing toolbar must not squash 1px dividers to 0 */
}

.lexical-tool ul {
    list-style-type: disc !important;
}

.lexical-tool mark {
    padding: unset;
}

.floating-text-format-popup button.popup-item i.format {
    opacity: 1 !important;
}

/* Compact items per Figma: 32×32 icon buttons (20px icon + 6px pad), r10. */
.lexical-tool .toolbar-item {
    color: var(--lt-text);
    border-radius: 4px;
    height: 32px;
    padding: 7px;
}

.font-size-input {
    width: 32px !important;
}

.toolbar-item.font-family {
    min-width: 120px !important;
}

.toolbar .block-controls {
    min-width: 160px !important;
}

.toolbar .block-controls>.dropdown-button-text {
    width: max-content !important;
}

.lexical-tool .toolbar-item:not(:disabled):hover {
    background-color: var(--lt-hover);
}

/* dropdown trigger labels (Arial / Normal / Insert / Left Align) — tighter */
.lexical-tool .toolbar .dropdown,
.lexical-tool .toolbar .toolbar-item .text {
    color: var(--lt-text);
    font-size: 14px;
}

.lexical-tool .toolbar-item .text {
    padding-right: 4px;
}

.lexical-tool .toolbar-item.font-family .text {
    width: auto;
    max-width: 72px;
}

.lexical-tool .toolbar-item .icon {
    margin-right: 4px;
}

.lexical-tool .toolbar-item i.chevron-down {
    width: 14px;
    height: 14px;
    margin-top: 0;
    align-self: center;
}

.lexical-tool .toolbar-item i.format {
    width: 18px;
    height: 18px;
}

/* ---- Content area ------------------------------------------------ */
.lexical-tool .ContentEditable__root {
    height: var(--lt-body-h);
    min-height: var(--lt-body-h);
    overflow-y: auto;
    /* Left gutter (~44px) leaves room for the draggable-block menu (the +/drag
       handle the playground positions at left:4px, ~36px wide) so it no longer
       overlaps the text. Right 40px clears the scrollbar / code-action menu. */
    padding: 16px 40px 16px 44px !important;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lt-ink);
}

.lexical-tool .ContentEditable__placeholder {
    top: 16px;
    left: 44px;
    right: 40px;
    font-size: 16px;
    font-weight: 400;
    color: var(--lt-muted);
}

/* draggable block menu (+ insert / drag handle) lives in the left gutter and
   must paint above the text it sits beside. The playground draws the icons very
   faint (opacity .3) — bump them so they're clearly usable. */
.lexical-tool .draggable-block-menu {
    z-index: 10;
}

.lexical-tool .draggable-block-menu .icon {
    opacity: .55;
}

.lexical-tool .draggable-block-menu:hover .icon {
    opacity: .9;
}

/* ---- Sticky note (Insert → Sticky Note) -------------------------
   The bundled style is a cramped 120px box using an unloaded handwriting font
   plus a skewed shadow and tiny 10px buttons. Make it a clean, readable card. */
.lexical-tool .sticky-note-container {
    width: auto;
}

.lexical-tool .sticky-note {
    width: 220px;
    margin: 16px;
    padding: 30px 18px 18px;
    font-family: inherit;
    /* "Reenie Beanie" isn't loaded */
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
    color: var(--lt-text);
}

.lexical-tool .sticky-note::after {
    display: none;
    /* drop the skewed dark shadow */
}

.lexical-tool .sticky-note.yellow {
    border-top-color: #fde68a;
    background: #fef9c3;
}

.lexical-tool .sticky-note.pink {
    border-top-color: #fbcfe8;
    background: #fce7f3;
}

.lexical-tool .sticky-note .color,
.lexical-tool .sticky-note .delete {
    top: 8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    opacity: .6;
}

.lexical-tool .sticky-note .delete {
    right: 8px;
}

.lexical-tool .sticky-note .color {
    right: 34px;
}

.lexical-tool .sticky-note .color:hover,
.lexical-tool .sticky-note .delete:hover {
    opacity: 1;
    background: rgba(15, 23, 42, .06);
}

.lexical-tool .sticky-note .color i {
    width: 14px;
    height: 14px;
}

/* ---- Floating selection toolbar (shows when text is selected) -----
   Themed to match the tool: solid white card, slate border, emerald active.
   It's portaled into .editor (inside .lexical-tool), so the --lt-* tokens work
   and these scoped rules out-specify the plugin's own CSS. */
.lexical-tool .floating-text-format-popup {
    background: #fff;
    border: 1px solid var(--lt-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    padding: 4px;
}

.lexical-tool .floating-text-format-popup button.popup-item {
    border-radius: 6px;
    color: var(--lt-text);
}

.lexical-tool .floating-text-format-popup button.popup-item:hover:not([disabled]) {
    background-color: var(--lt-hover);
}

.lexical-tool .floating-text-format-popup button.popup-item.active {
    background-color: #d1fae5;
    /* emerald-100 */
}

.lexical-tool .floating-text-format-popup button.popup-item.active i {
    opacity: 1;
}

.lexical-tool .floating-text-format-popup .divider {
    background-color: var(--lt-border);
}

.h1,
.h2,
.h3 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Headings — the playground theme gives each a different colour (h1 #050505,
   h2 grey, h3 inherited) plus uppercase + tiny sizes. Normalise to one colour
   with sensible descending sizes. */
.lexical-tool .PlaygroundEditorTheme__h1,
.lexical-tool .PlaygroundEditorTheme__h2,
.lexical-tool .PlaygroundEditorTheme__h3 {
    color: var(--lt-ink);
    font-weight: 700;
    text-transform: none;
}

.lexical-tool .PlaygroundEditorTheme__h1 {
    font-size: 32px;
}

.lexical-tool .PlaygroundEditorTheme__h2 {
    font-size: 24px;
}

.lexical-tool .PlaygroundEditorTheme__h3 {
    font-size: 20px;
}

.lexical-tool .ContentEditable__root>p:first-child::before {
    content: '';
}

.lexical-tool .ContentEditable__root>p,
.lexical-tool .ContentEditable__root>h1,
.lexical-tool .ContentEditable__root>h2,
.lexical-tool .ContentEditable__root>h3,
.lexical-tool .ContentEditable__root>h4,
.lexical-tool .ContentEditable__root>h5,
.lexical-tool .ContentEditable__root>h6 {
    position: relative;
}

/* hide the playground's own bottom actions (share/clear/lock) */
.lexical-tool .actions {
    display: none !important;
}

/* =====================================================================
   NOTE: the editor's Add File / Paste Text / Clear buttons and the footer
   (word count + Convert) are now styled with Tailwind in the blade
   (group-data-[state=...] drives their visibility). Only the editor base
   component and the multi-file pipeline below remain in this file.
   ===================================================================== */

/* =====================================================================
   Multi-file pipeline — files | converting | result.
   The editor (#root) is hidden once the file list takes over.
   ===================================================================== */
.lexical-tool[data-state="files"] #root,
.lexical-tool[data-state="converting"] #root,
.lexical-tool[data-state="result"] #root {
    display: none;
}

/* Inline file editing (Figma 152573): the single real editor (#root) is moved
   into the expanded row, so it must show there even though the list states hide
   the home #root. The row header already draws the separating border, so drop
   the panel's own; allow overflow so the floating selection toolbar isn't
   clipped by the row's rounded clip. */
.lexical-tool[data-state="files"] .lt-file.is-editing #root,
.lexical-tool[data-state="result"] .lt-file.is-editing #root {
    display: flex;
}

.lexical-tool .lt-file.is-editing {
    overflow: visible;
}

.lexical-tool .lt-file.is-editing .lt-file__edit {
    border-top: 0;
}

.lexical-tool__files {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.lexical-tool[data-state="files"] .lexical-tool__files,
.lexical-tool[data-state="converting"] .lexical-tool__files,
.lexical-tool[data-state="result"] .lexical-tool__files {
    display: flex;
}

/* compact drop zone */
.lexical-tool__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 120px;
    padding: 16px;
    border: 2px dashed var(--lt-border);
    border-radius: 8px;
    background: #fff;
}

.lexical-tool[data-state="converting"] .lexical-tool__dropzone,
.lexical-tool[data-state="result"] .lexical-tool__dropzone {
    display: none;
}

.lexical-tool__dropzone-hint {
    font-size: 18px;
    font-weight: 500;
    color: var(--lt-muted);
}

.lexical-tool__choose {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 10px 16px;
    background: var(--lt-green);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s;
}

.lexical-tool__choose:hover {
    background: var(--lt-green-hover);
}

.lexical-tool__choose svg {
    width: 20px;
    height: 20px;
}

/* list header layout lives in the blade (Tailwind): flex items-center
   justify-between gap-4 — kept in a row on mobile too. */
.lexical-tool__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lt-ink);
}

.lexical-tool__count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--lt-border);
    font-size: 16px;
    font-weight: 700;
    color: var(--lt-ink);
}

.lexical-tool__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* white bordered chip (Clear All / Feedback / Start Over / Download All) */
.lt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--lt-border);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--lt-text);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.lt-chip:hover {
    border-color: var(--lt-border-strong);
    background: #f8fafc;
}

.lt-chip img {
    width: 20px;
    height: 20px;
}

/* download-all dropdown */
.lexical-tool__dl {
    position: relative;
}

.lexical-tool__dl-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 148px;
    background: #fff;
    border: 1px solid var(--lt-border);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    padding: 4px;
    display: none;
    z-index: 10;
}

.lexical-tool__dl.open .lexical-tool__dl-menu {
    display: block;
}

.lexical-tool__dl-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    color: var(--lt-text);
    cursor: pointer;
}

.lexical-tool__dl-menu button:hover {
    background: var(--lt-hover);
}

/* file list */
.lexical-tool__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* files state: cap the list to ~5 rows (5×70px + 4×8px gap) and scroll past it.
   converting/result: let it grow to full height so every result is visible
   without an inner scrollbar. */
.lexical-tool[data-state="files"] .lexical-tool__list {
    max-height: 382px;
    overflow-y: auto;
}

/* while editing a file (before Convert), let the list grow so the inline editor
   isn't clipped/cramped inside the 5-row scroll area. */
.lexical-tool[data-state="files"] .lexical-tool__list:has(.lt-file.is-editing) {
    max-height: none;
    overflow: visible;
}

.lexical-tool[data-state="converting"] .lexical-tool__list,
.lexical-tool[data-state="result"] .lexical-tool__list {
    max-height: none;
    overflow: visible;
}

.lt-file {
    flex-shrink: 0;
    /* never let a tall (editing) card squash its siblings */
    border: 1px solid var(--lt-border);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s;
}

.lt-file:hover {
    border-color: var(--lt-border-strong);
}

.lt-file__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
}

.lt-file__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.lt-file__meta {
    flex: 1;
    min-width: 0;
}

.lt-file__name {
    font-size: 16px;
    font-weight: 400;
    color: var(--lt-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-file__sub {
    font-size: 12px;
    color: var(--lt-sub);
    margin-top: 4px;
}

.lt-file__sub.is-error {
    color: #ef4444;
    font-weight: 500;
}

.lt-file__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lt-iconbtn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--lt-text);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.lt-iconbtn:hover {
    background: var(--lt-hover);
}

.lt-iconbtn.js-row-del:hover {
    color: #ef4444;
}

.lt-iconbtn svg {
    width: 20px;
    height: 20px;
}

.lt-iconbtn img {
    width: 20px;
    height: 20px;
    display: block;
}

.lt-file.is-error {
    border-color: #fca5a5;
}

.lt-file.is-error:hover {
    border-color: #f87171;
}

/* per-file converting loader (image-to-text style: text + spinner) */
.lt-file__loader {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lt-sub);
    white-space: nowrap;
}

.lt-spin {
    width: 20px;
    height: 20px;
    animation: lt-rotate .8s linear infinite;
}

@keyframes lt-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* inline edit panel */
.lt-file__edit {
    display: none;
    border-top: 1px solid var(--lt-border);
}

.lt-file.is-editing .lt-file__edit {
    display: block;
}

.lt-file.is-editing .lt-file__row {
    border-bottom: 1px solid var(--lt-border);
}

.lt-file__edit-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
}

.lt-edit-cancel,
.lt-edit-save {
    height: 32px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.lt-edit-cancel {
    background: #fff;
    color: var(--lt-text);
    border: 1px solid var(--lt-border);
}

.lt-edit-cancel:hover {
    border-color: var(--lt-border-strong);
    background: #f8fafc;
}

.lt-edit-save {
    background: var(--lt-ink);
    color: #fff;
    border: 0;
}

.lt-edit-save:hover {
    background: var(--lt-ink-hover);
}

.lt-file__editor {
    min-height: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: 16px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lt-ink);
    outline: 0;
    overflow-wrap: anywhere;
}

.lt-file__editor:empty::before {
    content: attr(data-placeholder);
    color: var(--lt-muted);
}

/* inline-edit toolbar (execCommand) — mirrors the main editor toolbar */
.lt-edit-tb {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    padding: 8px;
    border-top: 1px solid var(--lt-border);
    border-bottom: 1px solid var(--lt-border);
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.lt-edit-tb::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.lt-tb-div {
    width: 1px;
    height: 24px;
    background: var(--lt-border);
    margin: 0 4px;
    flex-shrink: 0;
}

.lt-tb-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--lt-text);
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
}

.lt-tb-item:hover {
    background: var(--lt-hover);
}

.lt-tb-item.active {
    background: #e2e8f0;
}

.lt-tb-item svg {
    width: 18px;
    height: 18px;
}

.lt-tb-ico {
    width: 18px;
    height: 18px;
    display: block;
}

.lt-tb-b {
    font-weight: 700;
}

.lt-tb-i {
    font-style: italic;
    font-family: Georgia, serif;
}

.lt-tb-u {
    text-decoration: underline;
}

.lt-tb-size {
    min-width: 26px;
    text-align: center;
    font-size: 14px;
    color: var(--lt-text);
}

.lt-tb-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    color: var(--lt-text);
    font: inherit;
    flex-shrink: 0;
}

.lt-tb-select:hover {
    background: var(--lt-hover);
}

.lt-tb-tt {
    font-family: Georgia, serif;
    font-size: 16px;
}

.lt-dd-label {
    font-size: 14px;
    color: var(--lt-text);
    white-space: nowrap;
}

.lt-tb-caret {
    width: 14px;
    height: 14px;
    pointer-events: none;
    display: block;
}

/* inline-edit dropdown popup (font / block) — styled like the tool dropdowns,
   portaled to <body> as position:fixed so it isn't clipped by the toolbar. */
/* literal hex (not --lt-* vars): this menu is portaled to <body>, outside the
   .lexical-tool scope where those custom properties are defined. */
.lt-dd-menu {
    position: fixed;
    z-index: 2147483600;
    min-width: 168px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    padding: 4px 0;
}

.lt-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.3;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
}

.lt-dd-item:hover {
    background: #f1f5f9;
}

.lt-dd-item.active {
    background: #f1f5f9;
    font-weight: 600;
    color: #0f172a;
}

.lt-edit-wrap {
    position: relative;
}

.lt-edit-trash {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--lt-sub);
    cursor: pointer;
}

.lt-edit-trash:hover {
    background: var(--lt-hover);
    color: #ef4444;
}

.lt-edit-trash svg,
.lt-edit-trash img {
    width: 18px;
    height: 18px;
}

/* convert button at the bottom of the list */
.lexical-tool__convert-all {
    align-self: center;
    margin-top: 4px;
    height: 44px;
    padding: 10px 16px;
    /* Figma: 96×44 r6 pad[10,16] */
    background: var(--lt-green);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s;
}

.lexical-tool__convert-all:hover {
    background: var(--lt-green-hover);
}

.lexical-tool[data-state="converting"] .lexical-tool__convert-all,
.lexical-tool[data-state="result"] .lexical-tool__convert-all {
    display: none;
}

/* header actions swap */
.lexical-tool .js-result-actions {
    display: none;
}

.lexical-tool[data-state="result"] .js-files-actions {
    display: none;
}

.lexical-tool[data-state="result"] .js-result-actions {
    display: flex;
}

.lexical-tool[data-state="converting"] .js-files-actions {
    visibility: hidden;
}

/* While a single file's PDF is generating for download, lock the result-actions
   toolbar (Start Over / Feedback / Download All) and the other row buttons so
   nothing can be clicked mid-download. */
.lexical-tool.is-busy .js-result-actions,
.lexical-tool.is-busy .lexical-tool__list .lt-iconbtn {
    pointer-events: none;
    opacity: .55;
}

/* =====================================================================
   Insert-section modals (Image / Table / Columns / Equation / Poll …).
   These are portaled to <body> and the playground paints them with
   --color-white / --color-black / etc. — variables that aren't defined
   anywhere in this build, so the modal + its controls render transparent.
   Provide the values on the overlay so they cascade to the modal box, title,
   content, close button, buttons and inputs. (Scoped to .Modal__overlay so it
   can't touch any unrelated site modal.)
   ===================================================================== */
.Modal__overlay {
    --color-white: #fff;
    --color-black: #0f172a;
    --color-paragraph: #334155;
    --color-gray-light: #e2e8f0;
    --color-light-bg: #f8fafc;
    --bg-gray: #f1f5f9;
}

.Modal__overlay .Modal__content .Button__root {
    background-color: #10b981;
    color: #fff;
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    transition: background-color .15s, border-color .15s;
}

.Modal__overlay .Modal__content .Button__root:hover {
    background-color: #059669;
    border-color: #059669;
}

.Modal__overlay .Button__small {
    padding: 6px 12px;
    font-size: 13px;
}

/* layout/equation selector dropdown trigger inside a dialog → look like a select */
.Modal__overlay .dialog-dropdown {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    padding: 8px 12px;
}

.Modal__overlay .Input__input {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #334155;
}

.Modal__overlay .Input__input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.Modal__overlay .Input__label {
    color: #334155;
}

/* keep the destructive (delete) action red, but match the tool's radius/weight */
.Modal__overlay .Modal__content>div>button {
    border-radius: 6px;
    font-weight: 500;
}

.Modal__content .color-picker-wrapper {
    flex-direction: column;
    width: 100% !important;
}

/* =====================================================================
   Toolbar popups & tooltips.
   The Lexical toolbar dropdowns are portaled straight to <body> (position:
   fixed), so they live OUTSIDE `.lexical-tool` and our scoped rules can't
   reach them — style them here. The custom data-tooltip bubbles, on the
   other hand, live INSIDE the card and were being clipped by its
   overflow:hidden, so we suppress them (native title tooltips still work).
   ===================================================================== */

/* Toolbar dropdowns (block format, font family, font size, alignment, …):
   keep them compact + scrollable so they never spill down the page, and
   force a clean single-line item layout regardless of page-level CSS. */
/* Floating link editor is portaled to <body> so the tool card's overflow:hidden
   can't clip it — keep it above everything. */
body>.link-editor {
    z-index: 2147483600;
}

/* Block-insert picker (opens on "/" or the drag-handle +). It's portaled out of
   .lexical-tool, so var(--color-white) is undefined and it renders transparent —
   theme it with literal colours (white card, slate border, emerald selection). */
.typeahead-popover.component-picker-menu {
    background: #fff !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    padding: 0;
    z-index: 2147483600;
    width: 260px;
}

.component-picker-menu ul {
    max-height: 240px;
    padding: 4px;
}

.component-picker-menu li {
    color: #334155 !important;
    background: transparent !important;
    margin: 0 !important;
}

.component-picker-menu li.selected {
    background: #f1f5f9 !important;
}

body>.dropdown {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    /* The bundled CSS paints this with var(--color-white), but that variable is
       scoped to the editor wrapper and is undefined here at <body> level, so it
       resolves to transparent and the page shows through. Force solid white. */
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16) !important;
    padding: 4px 0 !important;
    z-index: 2147483600 !important;
}

body>.dropdown:has(.color-picker-wrapper) {
    max-height: none;
    overflow: visible;
    padding: 0 !important;
}

.table {
    margin-bottom: unset !important;
}

.Modal__content>.KatexEquationAlterer_defaultRow {
    width: max-content;
}

.Modal__content>div {
    margin: 0px !important;
    padding: 4px !important;
}

.Modal__content>div>button {
    width: 100%;
}

/* items inherit the same undefined white var — keep them transparent so the
   solid container shows through, and let the hover state paint its own colour.
   Note: literal hex (not --lt-* vars) because those vars are scoped to
   .lexical-tool and don't resolve out here at <body> level. */
body>.dropdown .item {
    background: transparent !important;
}

body>.dropdown .item:hover {
    background: #f1f5f9 !important;
}

body>.dropdown .item {
    box-sizing: border-box !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    border-radius: 4px;
    width: -webkit-fill-available !important;
}

body>.dropdown .item.wide {
    width: 252px !important;
}

body>.dropdown .item .icon-text-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body>.dropdown .item .icon-text-container .text,
body>.dropdown .item .text {
    min-width: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

body>.dropdown .item .icon {
    flex-shrink: 0 !important;
}

body>.dropdown .item .shortcut {
    align-self: center !important;
    white-space: nowrap;
    margin-left: 12px;
}

/* Suppress the custom data-tooltip bubbles inside the card (they get clipped
   by .lexical-tool's overflow:hidden). Native `title` tooltips are untouched. */
.lexical-tool [data-tooltip]::before,
.lexical-tool [data-tooltip]::after,
.lexical-tool .inverse-tooltip::before,
.lexical-tool .inverse-tooltip::after {
    content: none !important;
    display: none !important;
}

.lexical-tool .dropdown-button-text {
    display: block !important;
}

figure {
    margin: 0 !important;
    width: unset !important;
}

/* ---- Responsive -------------------------------------------------- */
@media (max-width: 640px) {
    .lexical-tool .ContentEditable__root {
        padding: 16px 44px 16px 16px !important;
    }

    /* the drag-handle gutter is hidden on mobile, so align the placeholder with
       the 16px content padding instead of the desktop 44px gutter. */
    .lexical-tool .ContentEditable__placeholder {
        left: 16px;
    }

    .lexical-tool__convert-all {
        width: 100%;
    }

    .lexical-tool__empty-actions {
        left: 14px;
        top: 120px;
    }

    .lexical-tool__clear {
        top: 120px;
    }

    .lt-btn {
        padding: 6px 10px;
    }

    .font-size-input {
        width: 32px !important;
    }

    .lexical-tool[data-state="result"] .js-result-actions {
        width: 100%;
        justify-content: space-between;
    }

    .lt-chip {
        flex: 1;
        justify-content: center;
    }
}