/* Drag-and-drop: visual highlight when files are being dragged onto the composer */
.ai-composer {
    position: relative;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}
.ai-composer.is-dragover {
    border: 2px dashed var(--ai-main);
    background: color-mix(in srgb, var(--ai-main) 8%, transparent);
}
.ai-composer.is-dragover::after {
    content: "Drop files here";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--ai-main);
    pointer-events: none;
    background: color-mix(in srgb, var(--ai-panel) 70%, transparent);
    border-radius: inherit;
}

/* Attachment chips after drop or attach */
.ai-attachment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
.ai-attachment-row:empty {
    display: none;
}

.ai-composer {
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ai-panel);
}
.ai-composer textarea {
    width: 100%;
    min-height: 180px;
    border: 0;
    outline: 0;
    resize: vertical;
    padding: 16px;
    background: transparent;
    color: var(--ai-ink);
}
.ai-attachment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 4px;
}
.ai-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ai-line);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--ai-muted);
    font-size: 12px;
    font-weight: 800;
}
.ai-file-chip button {
    border: 0;
    background: transparent;
    color: var(--ai-muted);
}
.ai-composer-footer {
    border-top: 1px solid var(--ai-line);
    background: var(--ai-soft);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.ai-composer-footer .ai-split-btn-menu {
    top: auto;
    right: auto;
    bottom: calc(100% + 4px);
    left: 0;
}
/* Globito explicativo (estilo cómic) del selector de páginas: fila propia
   arriba de los controles del footer, con la flechita hacia abajo apuntando
   al stepper (que queda a la izquierda del botón primario). */
.ai-composer-footer {
    flex-wrap: wrap;
}
.ai-pages-bubble {
    position: relative;
    order: -1;
    flex: 0 0 100%;
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
    color: var(--ai-ink);
    background: color-mix(in srgb, var(--ai-main) 10%, var(--ai-panel));
    border: 1px solid color-mix(in srgb, var(--ai-main) 45%, transparent);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 6px;
}
.ai-pages-bubble::after {
    content: "";
    position: absolute;
    bottom: -5px;
    /* El JS del composer fija --ai-bubble-arrow-right al centro del stepper. */
    right: var(--ai-bubble-arrow-right, 200px);
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    background: inherit;
    border-bottom: 1px solid color-mix(in srgb, var(--ai-main) 45%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--ai-main) 45%, transparent);
}

/* Stepper de páginas: píldora alineada a la derecha, junto al botón primario. */
.ai-pages-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--ai-line);
    border-radius: 999px;
    background: var(--ai-panel);
    padding: 3px;
    align-self: center;
}
.ai-pages-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--ai-soft);
    color: var(--ai-ink);
    font-size: 15px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.ai-pages-btn:hover {
    background: var(--ai-main);
    color: #fff;
}
.ai-pages-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    font-size: 12.5px;
    color: var(--ai-muted);
    white-space: nowrap;
}
.ai-pages-value i {
    color: var(--ai-main);
}
.ai-pages-value strong {
    color: var(--ai-ink);
    font-size: 14px;
    min-width: 14px;
    text-align: center;
}

.ai-readiness {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px 12px;
    align-items: center;
    border: 1px solid var(--ai-line);
    border-radius: 8px;
    padding: 14px;
}
.ai-readiness i {
    grid-row: 1 / span 2;
    color: var(--ai-good);
    font-size: 34px;
}
.ai-readiness span {
    color: var(--ai-muted);
}
/* States: good (ready) = green; warn (incomplete) = amber */
.ai-readiness.good {
    border-color: color-mix(in srgb, var(--ai-good) 40%, var(--ai-line));
}
.ai-readiness.good i {
    color: var(--ai-good);
}
.ai-readiness.warn {
    border-color: color-mix(in srgb, var(--ai-warn) 45%, var(--ai-line));
}
.ai-readiness.warn i {
    color: var(--ai-warn);
}
.ai-preview-paper__empty {
    color: var(--ai-muted);
    text-align: center;
    padding: 0.5rem;
}
.ai-preview-paper {
    margin-top: 16px;
    border: 1px solid var(--ai-line);
    border-radius: 8px;
    padding: 18px;
    background: var(--ai-panel);
}
.ai-preview-paper h3 {
    margin: 0;
}
.ai-preview-paper span {
    display: block;
    height: 10px;
    background: var(--ai-soft);
    border-radius: 20px;
    margin-top: 10px;
}
.ai-preview-paper .short {
    width: 64%;
}

.ai-tree {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}
.ai-tree button {
    border: 0;
    background: transparent;
    color: var(--ai-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    min-height: 38px;
    border-radius: 7px;
    padding: 8px;
    text-align: left;
    font-weight: 700;
}
.ai-tree button.active,
.ai-tree button:hover {
    background: var(--ai-soft);
}
.ai-tree span {
    margin-left: auto;
    color: var(--ai-muted);
}
.ai-tree .indent {
    padding-left: 28px;
}

/* ── Knowledge Vault folder tree (matches prototype/vault.html) ────── */
.ai-vault-tree-card {
    padding: 14px;
}
.ai-vault-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}
.ai-tnode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-muted);
    cursor: pointer;
    position: relative;
    user-select: none;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}
.ai-tnode:hover {
    background: var(--ai-soft);
}
.ai-tnode.active {
    background: color-mix(in srgb, var(--ai-main) 12%, transparent);
    color: var(--ai-main);
}
.ai-tnode i.bi {
    font-size: 14px;
    flex-shrink: 0;
}
.ai-tnode-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ai-tnode-count {
    margin-left: auto;
    font-size: 10.5px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--ai-muted);
    background: var(--ai-soft);
    padding: 1px 6px;
    border-radius: 99px;
    flex-shrink: 0;
}
.ai-tnode.active .ai-tnode-count {
    background: color-mix(in srgb, var(--ai-main) 18%, transparent);
    color: var(--ai-main);
}
.ai-tnode-indent-1 {
    padding-left: 22px;
}
.ai-tnode-indent-2 {
    padding-left: 36px;
}
.ai-tnode-indent-3 {
    padding-left: 50px;
}

/* Drag-and-drop visual feedback */
.ai-tnode[draggable="true"] {
    cursor: grab;
}
.ai-tnode.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
/* Protected (e.g. "General"): not draggable, no folder ops, items-only bucket */
.ai-tnode.is-protected {
    cursor: default;
}
.ai-tnode.is-protected .ai-tnode-name::after {
    content: " ★";
    color: var(--ai-warn);
    font-size: 10px;
    margin-left: 2px;
    vertical-align: super;
}
.ai-tnode.is-drop-target {
    outline: 2px dashed var(--ai-main);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--ai-main) 6%, transparent);
}

/* Inline rename / create input embedded into a tree node */
.ai-tnode-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-ink);
    background: var(--ai-soft);
    border: 1.5px solid var(--ai-main);
    border-radius: 4px;
    padding: 2px 6px;
    margin: -3px 0; /* tighten vertical so the row height doesn't jump */
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-main) 18%, transparent);
}
.ai-tnode.is-new {
    background: color-mix(in srgb, var(--ai-main) 6%, transparent);
}
.ai-tnode.is-confirming-delete {
    background: color-mix(in srgb, var(--ai-danger) 8%, transparent);
    outline: 1px solid color-mix(in srgb, var(--ai-danger) 28%, transparent);
}
.ai-tnode-delete-panel {
    display: grid;
    gap: 10px;
    margin: 6px 0 8px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--ai-danger) 34%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ai-danger) 12%, transparent),
            color-mix(in srgb, var(--ai-danger) 7%, transparent)
        ),
        var(--ai-soft);
    box-shadow: 0 12px 30px color-mix(in srgb, #000 26%, transparent);
}
.ai-tnode-delete-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ai-tnode-delete-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--ai-danger);
    background: color-mix(in srgb, var(--ai-danger) 15%, transparent);
    flex: 0 0 auto;
}
.ai-tnode-delete-panel-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.ai-tnode-delete-panel-copy b {
    color: var(--ai-ink);
    font-size: 13px;
    line-height: 1.2;
}
.ai-tnode-delete-panel-copy span {
    color: var(--ai-muted);
    font-size: 12px;
    line-height: 1.35;
}
.ai-tnode-delete-target {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.ai-tnode-delete-target span,
.ai-tnode-delete-scope small {
    color: var(--ai-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ai-tnode-delete-target strong {
    color: var(--ai-danger);
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: normal;
}
.ai-tnode-delete-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.ai-tnode-delete-scope span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--ai-danger) 24%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--ai-panel) 68%, transparent);
}
.ai-tnode-delete-scope b {
    color: var(--ai-ink);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 15px;
    line-height: 1;
}
.ai-tnode-delete-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.ai-tnode-confirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.ai-tnode-confirm-text {
    flex: 1;
    min-width: 0;
    /* Non-empty folders now show subfolder/item counts (cascading delete
     warning) — that suffix can be longer than a single-line ellipsis
     allows, so this wraps instead of hiding the count the user needs to
     read before confirming. Short text ("Delete "X"?") still renders on
     one line naturally; only genuinely long content wraps. */
    white-space: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--ai-ink);
}
.ai-tnode-confirm-text b {
    color: var(--ai-danger);
    font-weight: 700;
}
.ai-tnode-confirm-yes,
.ai-tnode-confirm-no {
    border: 0;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.ai-tnode-confirm-yes {
    background: var(--ai-danger);
    color: #fff;
}
.ai-tnode-confirm-yes:hover {
    background: color-mix(in srgb, var(--ai-danger) 85%, black);
}
.ai-tnode-confirm-no {
    background: transparent;
    color: var(--ai-muted);
    border: 1px solid var(--ai-line);
}
.ai-tnode-confirm-no:hover {
    background: var(--ai-soft);
    color: var(--ai-ink);
}
/* Folder highlighted as a drop target when an item card is dragged over it */
.ai-tnode--item-drop-target {
    background: color-mix(in srgb, var(--ai-main) 14%, transparent) !important;
    outline: 2px dashed var(--ai-main);
    outline-offset: -2px;
    border-radius: 6px;
}
/* Saved-item cards use custom mouse dragging so selected cards move together. */
.ai-saved-item[data-item-id] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.ai-saved-item[data-item-id]:active {
    cursor: grabbing;
}
.ai-vault-card-dragging,
.ai-vault-card-dragging * {
    user-select: none;
    -webkit-user-select: none;
}
.ai-vault-card-dragging .ai-tnode[data-vault-node="group"] {
    cursor: copy;
}
.ai-saved-item.is-dragging {
    opacity: 0.72;
    outline: 2px solid color-mix(in srgb, var(--ai-main) 80%, white);
    outline-offset: -2px;
    cursor: grabbing;
}
.ai-saved-item.is-pending {
    opacity: 0.5;
    pointer-events: none;
}
.ai-tnode.is-pending {
    opacity: 0.55;
    pointer-events: none;
}
.ai-tnode.is-pending::after {
    content: "";
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid var(--ai-main);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ai-spin 0.7s linear infinite;
}
@keyframes ai-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Item-level toggle switches (truncated / hidden) ── */
.cf-item-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    flex: 0 0 auto;
}
.cf-item-toggle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.cf-item-toggle-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    transition: background 0.2s;
}
.cf-item-toggle-track::before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    top: 2px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition:
        transform 0.2s,
        background 0.2s;
}
.cf-item-toggle input:checked + .cf-item-toggle-track {
    background: var(--ai-main);
}
.cf-item-toggle input:checked + .cf-item-toggle-track::before {
    transform: translateX(12px);
    background: #fff;
}

/* ── VS Code-style expand/collapse chevron + tree lines ─────────────── */
/* Connecting line that runs vertically beside the expanded children,
   making it visually obvious which items belong to which folder. */
.ai-tnode-children {
    position: relative;
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--ai-main) 30%, transparent);
}
/* Nested folder children shift further right */
.ai-tnode-children--indent-1 {
    margin-left: 36px;
}
.ai-tnode-children--indent-2 {
    margin-left: 52px;
}
/* Subfolder nesting container — child folders render inside their parent's DOM node */
.ai-tnode-nested {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--ai-main) 30%, transparent);
}
/* Small horizontal tick to each child row */
.ai-tnode-children .ai-tnode--item::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: color-mix(in srgb, var(--ai-main) 30%, transparent);
}
.ai-tnode--item {
    position: relative;
}
.ai-tnode-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--ai-muted);
    padding: 0;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.12s ease;
}
.ai-tnode-chevron .bi {
    font-size: 10px;
    transition: transform 0.15s ease;
    display: block;
}
.ai-tnode-chevron--open {
    transform: rotate(0);
}
.ai-tnode-chevron .ai-tnode-chevron--open {
    transform: rotate(90deg) !important;
}
.bi.ai-tnode-chevron--open {
    transform: rotate(90deg);
}
/* Empty folders: chevron is invisible but keeps the layout spacing */
.ai-tnode-chevron--empty {
    opacity: 0;
    pointer-events: none;
}
.ai-tnode:hover .ai-tnode-chevron:not(.ai-tnode-chevron--empty) {
    color: var(--ai-ink);
}

/* Item rows inside expanded folders */
.ai-tnode--item {
    cursor: default;
    font-size: 12px;
    color: var(--ai-muted);
    gap: 6px;
}
.ai-tnode--item .ai-tnode-name {
    font-size: 12px;
    color: var(--ai-muted);
}
.ai-tnode--item .bi {
    font-size: 12px;
    color: var(--ai-muted);
    flex-shrink: 0;
}
.ai-tnode--item:hover {
    background: color-mix(in srgb, var(--ai-ink) 4%, transparent);
    color: var(--ai-ink);
}
.ai-tnode--item:hover .ai-tnode-name,
.ai-tnode--item:hover .bi {
    color: var(--ai-ink);
}

/* Per-node ⋮ menu trigger (hidden until hover for cleaner look) */
.ai-tnode-menu {
    border: 0;
    background: transparent;
    color: var(--ai-muted);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.12s ease,
        background 0.12s ease;
    flex-shrink: 0;
}
.ai-tnode:hover .ai-tnode-menu,
.ai-tnode.active .ai-tnode-menu {
    opacity: 1;
}
.ai-tnode-menu:hover {
    background: color-mix(in srgb, var(--ai-ink) 10%, transparent);
    color: var(--ai-ink);
}

/* Floating context menu (positioned fixed by JS) */
.ai-tnode-menu-pop {
    position: absolute;
    z-index: 80;
    min-width: 170px;
    background: var(--ai-panel);
    border: 1px solid var(--ai-line);
    border-radius: 8px;
    box-shadow: var(--ai-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
}
.ai-tnode-menu-pop button {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-ink);
    cursor: pointer;
}
.ai-tnode-menu-pop button:hover:not(:disabled) {
    background: var(--ai-soft);
}
.ai-tnode-menu-pop button.danger {
    color: var(--ai-danger);
}
.ai-tnode-menu-pop button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Topbar: language selector ──────────────────────────────────────────
   Lives here (organisms) NOT in layout.css so that it loads AFTER atoms.css.
   .ai-lang-trig uses .ai-icon-btn as base (width:42px from atoms), but needs
   width:auto to show the flag + label. Equal specificity → last rule wins.
   The dropdown/menu itself is now <x-molecules.dropdown-menu> (molecules.css
   .ai-dropdown-menu) — only the trigger's own look stays here. */
.ai-lang-trig {
    gap: 5px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
    height: 42px;
    width: auto;
}
.ai-lang-label {
    letter-spacing: 0.06em;
}

@media (max-width: 640px) {
    .ai-composer textarea {
        min-height: 150px;
        padding: 14px;
    }
    .ai-attachment-row {
        min-width: 0;
        padding-inline: 12px;
    }
    .ai-composer-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .ai-composer-footer .ai-btn,
    .ai-composer-footer button[type="submit"] {
        width: 100%;
    }
    .ai-vault-tree-card {
        padding: 12px;
    }
    .ai-vault-tree {
        min-width: 0;
        overflow: hidden;
    }
    .ai-tnode {
        min-width: 0;
        gap: 6px;
        padding: 8px;
    }
    .ai-tnode-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .ai-tnode-count {
        padding-inline: 5px;
    }
    .ai-tnode-children,
    .ai-tnode-nested {
        margin-left: 10px;
        padding-left: 8px;
    }
    .ai-tnode-children--indent-1,
    .ai-tnode-children--indent-2 {
        margin-left: 14px;
    }
    .ai-tnode-menu {
        opacity: 1;
        min-width: 28px;
        min-height: 28px;
    }
    .ai-tnode-delete-panel {
        margin-left: 12px;
        padding: 10px;
    }
    .ai-tnode-delete-scope {
        grid-template-columns: 1fr;
    }
    .ai-tnode-delete-actions {
        justify-content: stretch;
    }
    .ai-tnode-delete-actions button {
        flex: 1 1 0;
    }
    .ai-tnode-confirm {
        flex-wrap: wrap;
    }
    .ai-tnode-confirm-text {
        flex-basis: 100%;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .ai-tnode {
        font-size: 12px;
        padding-inline: 6px;
    }
    .ai-tnode-children,
    .ai-tnode-nested {
        margin-left: 6px;
        padding-left: 6px;
    }
}

/* ── Topbar: theme toggle ───────────────────────────────────────── */
.ai-theme-toggle {
    transition: background 0.15s;
}
.ai-theme-toggle:hover {
    background: var(--ai-soft);
}