/**
 * NotesAi document view — canvas-matched slate workspace.
 * Sidebar keeps a card shell; the right pane is one integrated work
 * surface (note content embeds without a nested floating card).
 */

#notesaiViewDocument {
    --doc-sidebar-width: 280px;
    --doc-bg: var(--ln-canvas-bg, #334155);
    --doc-sidebar-bg: var(--ln-card-bg, #ffffff);
    --doc-editor-bg: transparent;
    --doc-border: #e5e7eb;
    --doc-text: #1d1d1f;
    --doc-text-secondary: #6e6e73;
    --doc-accent: #667eea;
    --doc-accent-hover: #5568d3;
    --doc-selected: rgba(102, 126, 234, 0.12);
    background: var(--ln-canvas-bg, #334155);
    color: var(--doc-text);
}

/* #notesaiViewDocument.is-active, not the bare id: the id selector's
   specificity (1,0,0) beats .notesai-view-panel's base `display: none`
   (0,1,0) regardless of source order, so setting display here unconditionally
   would keep the panel visible even while inactive — it was overlapping
   Canvas view underneath after switching tabs via the board-history dropdown. */
#notesaiViewDocument.is-active {
    display: flex;
    flex-direction: column;
}

/* Title row layout/search/drop chrome is shared with Canvas via
   .notesai-document-title-row rules in canvas_view.css. Folder wrap is
   relocated here at mount (document_view.js). */

#notesaiViewDocument .document-shell {
    flex: 1;
    min-height: 0;
    height: auto; /* beat shared document_mode.css height: 100vh / 100dvh */
    gap: 16px;
    padding: 16px;
    box-sizing: border-box;
    background: var(--ln-canvas-bg, #334155);
}

/* Shared card chrome — same family as .content-block on canvas */
#notesaiViewDocument .document-sidebar,
#notesaiViewDocument .document-main {
    background: var(--ln-card-bg, #ffffff);
    border: 1px solid var(--doc-border);
    border-radius: var(--radius-xl, 1rem);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    overflow: hidden;
}

#notesaiViewDocument .document-sidebar {
    border-right: 1px solid var(--doc-border);
}

#notesaiViewDocument .document-note-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#notesaiViewDocument .document-note-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#notesaiViewDocument .document-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/*
 * BD-156 layout fix: one visual container for the right pane.
 * Outer .document-main keeps the white work surface; the inner note
 * block loses Board card chrome so content embeds in the page.
 */
#notesaiViewDocument .document-toolbar {
    /* Page-level note icons removed — card owns edit tools. Keep a slim
       status row only when restore/save need to show. */
    display: none;
}

#notesaiViewDocument .document-toolbar.is-visible {
    display: flex;
    flex-shrink: 0;
    min-height: 36px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--doc-border);
}

#notesaiViewDocument .document-editor-wrap,
#notesaiViewDocument .document-empty-state {
    background: transparent;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Beat document_mode.css inset (32px/24px + centered column). */
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
}

#notesaiViewDocument .document-empty-state {
    justify-content: center;
    align-items: center;
    padding: 32px 24px;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#notesaiViewDocument .document-empty-state::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#notesaiViewDocument .document-editor-inner {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

#notesaiViewDocument .document-archived-banner {
    margin: 12px 16px 0;
    flex-shrink: 0;
}

/* Full-bleed note host — note fills the entire right pane. */
#notesaiViewDocument .document-note-card-host {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#notesaiViewDocument #documentNoteCanvas.ln-document-focus-canvas,
#notesaiViewDocument .ln-document-focus-canvas {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    transform: none !important;
    zoom: 1 !important;
    background: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.user,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.selected,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.ln-card-active {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    /* Fill the pane — not content-sized Board card geometry. */
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    transform: none !important;
    float: none;
    /* Drop Board floating-card chrome — page pane is the only shell. */
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
    background-color: transparent !important;
    animation: none !important;
    z-index: 1;
    touch-action: auto;
    overflow: hidden !important;
    /* Comfortable inset without reading as a second card. */
    padding: 12px 16px 16px;
    box-sizing: border-box;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-card-chrome {
    flex-shrink: 0;
}

/* Kill Board rail bleed — negative margins made the pane grow wider while scrolling. */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.user > .ln-note-input-rail,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.link-note > .ln-note-input-rail,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.user > .block-command-zone {
    --ln-note-rail-bleed: 0px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail > .block-note-body,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail > .link-note-user-text,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail > .block-ai-thread-messages {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Keep scroll; hide the bar chrome (overrides block-local thin scrollbars). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail > .block-note-body::-webkit-scrollbar,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail > .link-note-user-text::-webkit-scrollbar,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .ln-note-input-rail > .block-ai-thread-messages::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Thread split: keep panes inside the fixed pane; AI input stays pinned below. */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.ln-thread-split {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card > .block-command-zone {
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* --- Document AI chat position: off --- */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .ln-note-input-rail > .ln-note-thread-divider,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .ln-note-thread-divider,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .ln-note-input-rail > .block-ai-thread-messages,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .ln-note-input-rail > .ln-document-ai-chat-side,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .block-command-zone,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off .ln-document-ai-chat-side {
    display: none !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .ln-note-input-rail > .block-note-body,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--off > .ln-note-input-rail > .link-note-user-text {
    flex: 1 1 0 !important;
    max-height: none !important;
}

/* --- Document AI chat position: right (horizontal note | chat split) ---
 * Card Tools toolbar is the full-width first row (header of the whole card).
 * Document content + AI chat are two panes on the row beneath — opening or
 * closing AI must not move, wrap, compress, or overlap the toolbar.
 */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-focus-card.ln-document-ai-chat--right.ln-thread-split {
    display: grid !important;
    grid-template-columns: var(--ln-split-note, 50%) 14px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "chrome chrome chrome"
        "rail divider chat";
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-card-chrome {
    grid-area: chrome;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-input-rail {
    grid-area: rail;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    /* Breathing room between note text and the AI chat divider. */
    padding-right: 10px;
    box-sizing: border-box;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-input-rail > .block-note-body,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-input-rail > .link-note-user-text {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-thread-divider {
    grid-area: divider;
    align-self: stretch;
    width: 14px;
    height: auto !important;
    min-height: 0;
    margin-top: 0;
    border-top: none;
    border-left: 1px solid var(--gray-200);
    cursor: col-resize;
    flex-direction: column;
    display: flex;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-thread-divider .ln-note-thread-grip {
    width: 4px;
    height: 34px;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-thread-divider:hover .ln-note-thread-grip,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-note-thread-divider.ln-note-thread-divider--dragging .ln-note-thread-grip {
    width: 4px;
    height: 46px;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-document-ai-chat-side {
    grid-area: chat;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-document-ai-chat-side > .block-ai-thread-discussion-header {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-document-ai-chat-side > .block-ai-thread-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    /* Beat board .block-ai-thread-messages { max-height: 280px } so the
       conversation fills the column under the toolbar down to the prompt. */
    max-height: none !important;
    height: auto !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-document-ai-chat-side > .block-ai-thread-messages::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right > .ln-document-ai-chat-side > .block-command-zone {
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    --ln-note-rail-bleed: 0px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Extremes in right mode: hide note or chat column entirely.
 * Toolbar (chrome) stays as the card header even when a pane is collapsed. */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right.ln-split-note-hidden {
    grid-template-columns: 0 14px minmax(0, 1fr);
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right.ln-split-thread-hidden {
    grid-template-columns: minmax(0, 1fr) 14px 0;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right.ln-split-note-hidden > .ln-note-input-rail {
    display: none !important;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-document-ai-chat--right.ln-split-thread-hidden > .ln-document-ai-chat-side {
    display: none !important;
}

#notesaiViewDocument .ln-document-focus-canvas .ln-note-drag-handle,
#notesaiViewDocument .ln-document-focus-canvas .card-resize-handle {
    display: none !important;
}

/*
 * Document note chrome: label the two icon clusters.
 * Left (drawing / annotation / text format) → Content Tools
 * Right (sparkle / tags / tasks) → Data Objects
 *
 * The icon set, order, and behavior stay identical to Board — these labels are
 * the one Document-only addition, since the wider pane has room to name the
 * clusters. Labels are in-flow flex items; Board centering positions each whole
 * label+icons cluster in its half of the full-width card toolbar.
 */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active > .ln-card-edit-tools::before,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active .ln-card-aff-group--right::before {
    flex-shrink: 0;
    margin-right: 8px;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #64748b;
    white-space: nowrap;
    align-self: center;
    user-select: none;
    pointer-events: none;
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active > .ln-card-edit-tools::before {
    content: 'Content Tools';
}

#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active .ln-card-aff-group--right::before {
    content: 'Data Objects';
}

/* Keep Board centering; allow labeled clusters to size to their content. */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active > .ln-card-edit-tools,
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active .ln-card-aff-group--right {
    width: max-content;
}

/*
 * Board caps the strip at 280px, which the added cluster labels can exceed.
 * Delete (×) is positioned against this strip's right edge, so a too-narrow
 * cap drags it inward under the labeled group and makes it unclickable.
 * The Document pane is wide, so let the strip size to its content.
 */
#notesaiViewDocument .ln-document-focus-canvas .content-block.ln-card-active .ln-card-affordances {
    max-width: calc(100% - 20px);
}

#notesaiViewDocument .document-meta-icons[hidden],
#notesaiViewDocument #documentAskFab,
#notesaiViewDocument .document-ask-fab {
    display: none !important;
}

/* Sidebar header: "Notes" brand + sidebar "+" removed — Add lives in the
   document title row (same split as Board). Search sits at the top. */
#notesaiViewDocument .document-brand {
    display: none;
}

#notesaiViewDocument .document-sidebar-top {
    display: none;
}

/* Board title: relocated (see document_view.js) out of the toolbar entirely,
   into .notesai-document-title-row above both cards — same position as the
   Canvas view's board title above the canvas surface. Colors match
   .canvas-page-name (light text on the dark slate workspace bg) since it now
   sits outside the white card, not inside the toolbar. Text stays
   conditional on the active note (which canvas(es) it belongs to). No
   interactive chevron/dropdown here — plain label only. */
#notesaiViewDocument .document-folder-indicator-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

/* Keep Add with the title cluster (same slot as Board header Add). */
#notesaiViewDocument .document-folder-indicator-wrap > .canvas-add-split {
    margin-left: 6px;
}

#notesaiViewDocument .document-folder-indicator {
    max-width: 100%;
    min-height: 28px;
    padding: 0 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 28px;
    cursor: default;
}

#notesaiViewDocument .document-folder-indicator-wrap .canvas-page-settings-btn {
    flex-shrink: 0;
}

/* Title-bar search replaces the sidebar search field. */
#notesaiViewDocument .document-search {
    display: none;
}

@media (max-width: 768px) {
    #notesaiViewDocument .document-shell {
        gap: 0;
        padding: 12px;
    }

    #notesaiViewDocument .document-sidebar {
        /* Keep drawer card feel while fixed over the slate workspace */
        top: 12px;
        bottom: 12px;
        left: 12px;
        height: auto;
        max-height: calc(100% - 24px);
        border-radius: var(--radius-xl, 1rem);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    }

    #notesaiViewDocument .document-main {
        width: 100%;
    }
}