/* Mobile Canvas Mode — JS adds body.canvas-mode--mobile; media query is the safety net. */

/* Hide desktop canvas when JS has applied mobile mode (toolbar + brand in mobile chrome) */
body.canvas-mode--mobile #noteCanvas {
    display: none !important;
}

/* Default: respect hidden until narrow-viewport media query overrides #mobileNoteViewer below */
#mobileNoteViewer[hidden] {
    display: none !important;
}

#mobileOverviewPanel[hidden] {
    display: none !important;
}

/* Mobile chrome is applied by JS after page layout loads — do not hide #noteCanvas via
   media query alone, or reload layout math (auto-arrange, savePageState) reads 0,0 positions. */

body.canvas-mode--mobile #mobileNoteViewer:not([hidden]) {
    display: flex !important;
}

/* ── Mobile note viewer — fills viewport ─────────────────────────────────── */
.mobile-note-viewer {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Canvas brand + toolbar relocated here in mobile mode */
.mobile-canvas-chrome {
    flex-shrink: 0;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 14;
    padding-top: env(safe-area-inset-top, 0px);
}

/* Desktop single-note keeps .canvas-brand/.canvas-toolbar at their canvas/
   nav-cards default styling and position (see the "Top strip" rules in the
   desktop-single section below), so excluding it here. */
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-brand-host .canvas-brand {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    padding: 4px 8px 0;
    pointer-events: none;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-brand-host .canvas-page-header {
    pointer-events: auto;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-brand-host .brand-logo {
    font-size: 0.75rem;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .canvas-toolbar {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 2px 4px 4px;
    gap: 1px;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .toolbar-icon {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 32px;
    height: 30px;
    font-size: 12px;
    border-radius: 5px;
    touch-action: manipulation;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .toolbar-icon i,
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .toolbar-icon .fas,
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .toolbar-icon .fa-solid {
    font-size: 12px;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host #canvasToolbar .canvas-nav-toggle.toolbar-icon {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 32px;
    height: 30px;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host #canvasToolbar .canvas-nav-toggle.toolbar-icon svg {
    width: 14px;
    height: 14px;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host #canvasToolbar .canvas-nav-toggle.toolbar-icon.toolbar-icon--menu {
    order: 0;
    margin-left: 0;
}

/* Chrome sits on a white bar here, so flip the canvas's dark-bg light-gray
   text/icons to the same dark gray used elsewhere (mirrors desktop-single). */
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .canvas-toolbar {
    --ln-float-muted: rgba(15, 23, 42, 0.55);
    --ln-float-muted-strong: rgba(15, 23, 42, 0.82);
    --ln-float-hover: rgba(15, 23, 42, 0.06);
}
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-canvas-toolbar-host .toolbar-icon {
    color: var(--gray-700, #374151);
}
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .brand-logo {
    color: #374151;
}
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .canvas-page-name {
    color: #6b7280;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .canvas-agents-panel:not([hidden]) {
    top: max(120px, calc(env(safe-area-inset-top, 0px) + 108px));
    left: max(10px, env(safe-area-inset-left, 10px));
    right: max(10px, env(safe-area-inset-right, 10px));
    max-width: none;
    z-index: 10055;
    overflow: visible;
}

/* Desktop single-note view runs in mobile mode but on a wide screen — keep the
   compact, right-anchored panel matching the canvas page instead of full width. */
body.canvas-mode--desktop-single .canvas-agents-panel:not([hidden]) {
    z-index: 10055;
}

body.canvas-mode--mobile .canvas-agents-panel .chat-agents-bar {
    overflow: visible;
}

body.canvas-mode--mobile .canvas-agents-panel .chat-agent-popover {
    z-index: 30;
    max-height: min(280px, 45vh);
    overflow-y: auto;
}

body.canvas-mode--mobile .ln-today-strip:not(.ln-today-strip--collapsed) {
    top: max(120px, calc(env(safe-area-inset-top, 0px) + 108px));
    left: max(10px, env(safe-area-inset-left, 10px));
    right: max(10px, env(safe-area-inset-right, 10px));
    width: auto;
    max-height: min(50vh, 420px);
}

/* ── Real mobile: hide edge arrows (swipe gesture navigates), the TODAY
   strip (floats over note content), and camera FAB (takes up space). ─────── */
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-swipe-btn {
    display: none !important;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .ln-today-strip {
    display: none !important;
}

body.canvas-mode--mobile:not(.canvas-mode--desktop-single) #lnCameraFab {
    display: none !important;
}

/* ── Mobile note viewer layout order ─────────────────────────────────────── */
/* Pin hide/show-note divider directly under the top chrome + note header. */
body.canvas-mode--mobile .mobile-canvas-chrome {
    order: 1;
}

body.canvas-mode--mobile .mobile-note-viewer-header {
    order: 2;
}

body.canvas-mode--mobile .mobile-note-body {
    order: 3;
}

body.canvas-mode--mobile #mobileSplitDivider {
    order: 4;
}

body.canvas-mode--mobile .mobile-ai-thread {
    order: 5;
}

/* Real mobile: the composer stays in normal flex flow as the last child of the
   viewer column (NOT position:fixed — that pulls it out of flow and lets the
   note body/thread expand to full height behind it). This way the note body
   occupies exactly the space between the top action bars and the top of the
   input bar, and only the note body scrolls internally. A solid top border
   draws a clear line separating the input bar from the note. */
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-input-bar,
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-ai-composer {
    position: relative;
    flex-shrink: 0;
    z-index: 20;
    background: #fff;
    border-top: 1px solid #d1d5db;
}

/* When the input bar is wrapped in the voice composer, the separator line and
   background live on the composer — keep the inner bar borderless and in static
   flow so there's a single clean line, not a doubled one. */
body.canvas-mode--mobile:not(.canvas-mode--desktop-single) .mobile-ai-composer .mobile-input-bar {
    position: static;
    border-top: none;
}

body.canvas-mode--mobile .mobile-input-bar,
body.canvas-mode--mobile .mobile-ai-composer {
    order: 6;
}

/* Wraps header/body/divider/thread/input so the desktop single-note view can
   render them as one "paper" card. display:contents keeps it invisible on
   real mobile so the order rules above keep applying to its children as if
   they were still direct children of .mobile-note-viewer. */
.mobile-note-card {
    display: contents;
}

/* ── Header bar ──────────────────────────────────────────────────────────── */
.mobile-note-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #f9fafb;
    position: relative;
    z-index: 14;
}

.mobile-note-indicator {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.mobile-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    color: #374151;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s;
}
.mobile-header-btn:hover {
    background: #e5e7eb;
}

/* ── Note body (editable clone) ──────────────────────────────────────────── */
.mobile-note-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 48px;
    font-size: 1rem;
    line-height: 1.65;
    color: #1f2937;
}
.mobile-note-body [data-mobile-edit] {
    outline: none;
    min-height: 120px;
}

/* Single-note view shows the full image, not the 90px card thumbnail crop. */
.mobile-note-body .ln-note-media-stack,
.mobile-note-body .ln-note-image,
.mobile-note-body .ln-note-image-img {
    height: auto;
}
.mobile-note-body .ln-note-media-stack {
    margin-bottom: 14px;
    overflow: visible; /* don't clip the resize handles */
}
/* Shrink-wrap the image so resize handles sit on its edges, and make it
   interactive (the card thumbnail is pointer-events:none / width:100%). */
.mobile-note-body .ln-note-image {
    display: inline-block;
    position: relative;
    width: auto;
    max-width: 100%;
    overflow: visible;
    pointer-events: auto;
    cursor: default;
}
.mobile-note-body .ln-note-image-img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: fill;
    pointer-events: auto;
    cursor: pointer;
}

/* Inline image (rendered into the editable body): behaves like a large text
   character — selectable for resize, draggable to move. */
.mobile-note-body .ln-inline-image-slot {
    display: inline-block;
    position: relative;
    max-width: 100%;
    vertical-align: bottom;
    user-select: none;
    cursor: pointer;
}
.mobile-note-body .ln-inline-image-slot .ln-note-image-img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    cursor: grab;
}
.mobile-note-body .ln-inline-image-slot.ln-img-moving .ln-note-image-img {
    opacity: 0.5;
    cursor: grabbing;
}

/* Insertion bar shown at the drop position while dragging the image. */
.ln-img-drop-caret {
    position: fixed;
    width: 2px;
    background: #4f46e5;
    z-index: 100000;
    pointer-events: none;
}

/* Selected image + Google-Docs-style proportional resize handles. */
.mobile-note-body .ln-note-image.ln-img-selected,
.mobile-note-body .ln-inline-image-slot.ln-img-selected {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
}
.ln-img-resize-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    background: #fff;
    border: 1.5px solid #4f46e5;
    border-radius: 2px;
    z-index: 30;
    box-sizing: border-box;
    touch-action: none;
    user-select: none;
}
.ln-img-resize-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.ln-img-resize-n  { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ln-img-resize-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.ln-img-resize-e  { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
.ln-img-resize-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.ln-img-resize-s  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ln-img-resize-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ln-img-resize-w  { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }

/* Divider + collapse control between note and AI thread */
.mobile-note-thread-divider {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    border-top: none;
    min-height: 28px;
    height: 28px;
    background: #e5e7eb;
    z-index: 12;
    isolation: isolate;
    overflow: visible;
}

.mobile-note-thread-divider .ln-note-thread-collapse-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    color: #9ca3af;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    z-index: 13;
    pointer-events: auto;
}

.mobile-note-thread-divider .ln-note-thread-collapse-btn:hover,
.mobile-note-thread-divider .ln-note-thread-collapse-btn:focus-visible {
    color: #6b7280;
    border-color: #d1d5db;
    background: #f9fafb;
}

.mobile-note-thread-divider:not([hidden]) + .mobile-ai-thread {
    position: relative;
    z-index: 1;
    border-top: none;
}

/* Collapsed: hide note, expand thread within fixed viewport */
.mobile-note-viewer.mobile-note-area-collapsed .mobile-note-body {
    display: none;
}

.mobile-note-viewer.mobile-note-area-collapsed .mobile-note-thread-divider {
    margin-top: 0;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-note-viewer.mobile-note-area-collapsed .mobile-ai-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* ── AI thread panel — same bubble layout as desktop .block-ai-thread-messages */
.mobile-ai-thread {
    border-top: 1px solid #e5e7eb;
    padding: 10px 48px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;                     /* gap lives between header and messages wrapper */
    font-family: var(--ln-card-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    font-size: var(--ln-card-thread-size, 0.9375rem);
    line-height: 1.45;
    color: #1f2937;
    transition: border-top-color 0.22s ease,
                padding-top 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Messages child — this is what scrolls and collapses, NOT the outer container.
   The header stays visible so the toggle pill is always reachable. */
.mobile-ai-thread-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 36vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Animate open/close */
    transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease,
                margin-top 0.18s ease;
    opacity: 1;
    margin-top: 4px;
}

/* ── Discussion header: label + toggle + agents ─────────────────────────── */
.mobile-ai-thread-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* The label and toggle are grouped on the left; agents btn on the right via margin-left:auto */
.mobile-ai-thread-label-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-ai-thread-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

/* ── Discussion collapse / expand toggle ─────────────────────────────────── */
/* (Removed toggle pill button CSS) */

/* In desktop-single mode give the messages a taller cap */
body.canvas-mode--desktop-single .mobile-ai-thread-messages {
    max-height: clamp(100px, 36vh, 440px);
}

.mobile-ai-thread-agents-btn {
    flex-shrink: 0;
    --aff-size: 13px;
    margin-left: auto;
}

.mobile-ai-thread-agents-btn .ln-card-aff-vis {
    --aff-size: 13px;
    min-width: var(--aff-size);
    height: var(--aff-size);
}

body.canvas-mode--mobile #ln-card-aff-popover {
    z-index: 10060;
    max-height: min(360px, 60vh);
}

body.canvas-mode--mobile .chat-agent-modal-root {
    z-index: 10070;
}

/* Bubbles use shared .block-ai-thread-msg-* rules from ai_canvas_enhanced.css */
.mobile-ai-thread .block-ai-thread-msg {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mobile-ai-thread .block-ai-thread-msg-rich {
    white-space: normal;
}

/* ── Sticky input bar ─────────────────────────────────────────────────────── */
.mobile-input-bar {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    /* Clear the bottom tab bar on touch devices */
    padding-bottom: calc(10px + var(--ln-tab-bar-height, 0px) + env(safe-area-inset-bottom, 0px));
    background: #fff;
}

/* If no tab bar (non-touch / wide), restore normal safe-area handling */
body:not([data-touch="true"]) .mobile-input-bar,
body[data-touch="false"] .mobile-input-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.mobile-ai-composer {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.mobile-ai-composer .mobile-input-bar {
    position: static;
    border-top: none;
}

.mobile-ai-composer .canvas-voice-status {
    padding: 6px 14px 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.mobile-ai-composer .canvas-voice-status--error {
    color: #b91c1c;
}

body.canvas-voice-mode-on .mobile-ai-composer {
    box-shadow: inset 0 2px 0 color-mix(in srgb, #667eea 45%, transparent);
}

.mobile-ai-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 8px 2px;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: inherit;
    background: transparent;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
    min-height: calc(0.9375rem * 1.5 + 16px);
    max-height: calc(0.9375rem * 1.5 * 4 + 16px);
    transition: border-color 0.15s;
}

.mobile-ai-input.ln-ai-input-collapsing {
    transition: height 0.12s ease-out, border-color 0.15s;
}
.mobile-ai-input:focus {
    border-bottom-color: #667eea;
    background: transparent;
}

.mobile-ai-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #667eea;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.mobile-ai-send-btn:hover {
    background: #f9fafb;
    border-color: #667eea;
}
.mobile-ai-send-btn:active {
    background: #f3f4f6;
}

.mobile-ai-voice-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #9ca3af;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mobile-ai-voice-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.mobile-ai-voice-btn.chat-voice-btn--mode-dictation {
    color: #2563eb;
    border-color: #93c5fd;
    background: #dbeafe;
}

.mobile-ai-voice-btn.chat-voice-btn--mode-dictation:hover {
    background: #bfdbfe;
    border-color: #60a5fa;
}

.mobile-ai-voice-btn.chat-voice-btn--mode-voice {
    color: #fff;
    border-color: #764ba2;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.mobile-ai-voice-btn.chat-voice-btn--mode-voice:hover {
    filter: brightness(1.05);
}

.mobile-ai-voice-btn.chat-voice-btn--listening.chat-voice-btn--mode-dictation {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
}

.mobile-ai-voice-btn.chat-voice-btn--listening.chat-voice-btn--mode-voice {
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45);
}

.mobile-ai-voice-btn.chat-voice-btn--unsupported {
    opacity: 0.55;
}

/* ── Swipe chevron buttons ───────────────────────────────────────────────── */
.mobile-swipe-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 810;
    /* 48×48 minimum tap target (WCAG) */
    width: 48px;
    height: 64px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    color: #272e39;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.2;
    transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.mobile-swipe-btn:hover,
.mobile-swipe-btn:active {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.2);
    opacity: 1;
}

.mobile-swipe-prev { left: 4px; }
.mobile-swipe-next { right: 4px; }

/* ── Overview panel ──────────────────────────────────────────────────────── */
.mobile-overview-panel {
    position: fixed;
    inset: 0;
    z-index: 850;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
}

.mobile-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #f9fafb;
}

.mobile-overview-title {
    font-weight: 600;
    font-size: 1rem;
    color: #111827;
}

.mobile-overview-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    align-content: start;
}

.mobile-overview-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    min-height: 80px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
}
.mobile-overview-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.mobile-overview-card--active {
    border-color: #667eea;
    background: #eef2ff;
}

.mobile-overview-preview {
    font-size: 0.8rem;
    color: #374151;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-overview-ai-badge {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.7rem;
    color: #667eea;
    opacity: 0.8;
}

.mobile-overview-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #9ca3af;
    padding: 2rem;
    font-size: 0.9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Desktop single-note refinements
   ──────────────────────────────────────────────────────────────────────────
   Applies ONLY when a desktop user picks the "Single note" view mode
   (body.canvas-mode--desktop-single). The real phone/mobile view —
   canvas-mode--mobile WITHOUT desktop-single — is intentionally left untouched
   by scoping every rule below to .canvas-mode--desktop-single.

   Goal: a clean, mostly-white full-page note with a minimal set of clearly
   understandable icon buttons that match the AI canvas visual language, plus
   the note's standard action items (tags / tasks / agents / delete).
   ══════════════════════════════════════════════════════════════════════════ */

/* Dark slate "desk" — same tone as the canvas background — so the white
   note reads as a sheet of paper resting on top of it. */
body.canvas-mode--desktop-single .mobile-note-viewer {
    background: #fff;
    /* Do NOT overflow-y: auto here — the card must be viewport-fitted.
       Instead the card's inner note-body does the scrolling. */
    overflow: hidden;
    /* Top padding clears the fixed canvas-brand (~80px). The toolbar strip
       and note card fill the remaining space below it. */
    padding: 80px 0 0;
    box-sizing: border-box;
}

/* Header/body/divider/thread/input become one rounded "paper" card centered
   on the dark desk. Real mobile leaves .mobile-note-card as display:contents
   (see shared rules) so this only takes effect here. */
body.canvas-mode--desktop-single .mobile-note-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Full-bleed: no max-width, no centering margin, no card shadow/radius —
       the note fills the entire screen below the toolbar strip. */
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    overflow: hidden;
    order: 2;
}

/* ── Top strip: page title + canvas toolbar ──────────────────────────────────
   .canvas-brand stays in its fixed top-left position (it is NOT relocated into
   the brand host for desktop-single — see _syncMobileCanvasChrome), so the
   title + view-toggle buttons sit identically in every view mode, with only the
   active .canvas-view-mode-btn differing. #noteCanvas isn't in the DOM here, so
   .canvas-brand just needs `position: fixed` (same top/left as its default
   `absolute` rule) to anchor to the viewport instead of a canvas ancestor.
   #canvasToolbar IS relocated into the toolbar host and laid out as a clean
   full-width row directly above the note (rules below). */
body.canvas-mode--desktop-single .mobile-canvas-chrome {
    background: transparent;
    border-bottom: none;
    padding: 0;
}

body.canvas-mode--desktop-single .mobile-canvas-brand-host .canvas-brand {
    position: fixed;
}

/* The relocated #canvasToolbar lays out as a clean full-width row at desktop
   icon size (no glassmorphism float chrome). Override dark-theme float vars
   so icons read correctly on the white background. The hamburger toggle keeps
   its margin-left:auto so it sits at the right end. */
body.canvas-mode--desktop-single .mobile-canvas-toolbar-host .canvas-toolbar {
    position: fixed;
    top: max(20px, env(safe-area-inset-top, 20px));
    right: 20px;
    width: auto;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    z-index: 900;
    --ln-float-muted: rgba(15, 23, 42, 0.55);
    --ln-float-muted-strong: rgba(15, 23, 42, 0.82);
    --ln-float-hover: rgba(15, 23, 42, 0.06);
}

body.canvas-mode--desktop-single .mobile-canvas-toolbar-host .toolbar-icon:hover {
    color: var(--gray-900, #111827);
}

body.canvas-mode--desktop-single .mobile-canvas-toolbar-host #canvasToolbar .canvas-nav-toggle.toolbar-icon.toolbar-icon--menu {
    margin-left: 0;
}

/* ── Brand / view-mode buttons: flip to dark-on-light for white background ── */
body.canvas-mode--desktop-single .brand-logo {
    color: #374151;
}

body.canvas-mode--desktop-single .canvas-page-name {
    color: #6b7280;
}

body.canvas-mode--desktop-single .canvas-page-settings-btn {
    color: #9ca3af;
}

body.canvas-mode--desktop-single .canvas-page-settings-btn:hover:not(:disabled),
body.canvas-mode--desktop-single .canvas-page-settings-btn:focus-visible {
    color: #374151;
    background: rgba(15, 23, 42, 0.06);
}

body.canvas-mode--desktop-single .canvas-view-mode-group {
    background: rgba(15, 23, 42, 0.06);
}

body.canvas-mode--desktop-single .canvas-view-mode-btn {
    color: rgba(15, 23, 42, 0.45);
}

body.canvas-mode--desktop-single .canvas-view-mode-btn:hover {
    background: rgba(15, 23, 42, 0.10);
    color: rgba(15, 23, 42, 0.82);
}

body.canvas-mode--desktop-single .canvas-view-mode-btn.is-active {
    background: rgba(15, 23, 42, 0.16);
    color: #111827;
}

/* ── Action bar: [All notes · New] · Note X of Y · [tags tasks agents · delete] ── */
body.canvas-mode--desktop-single .mobile-note-viewer-header {
    background: #fff;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    width: 100%;
    padding: 12px 48px;
    box-sizing: border-box;
}

body.canvas-mode--desktop-single .mobile-header-btn {
    width: var(--ln-float-control-size, 36px);
    height: var(--ln-float-control-size, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ln-float-control-radius, 6px);
    color: var(--gray-600, #4b5563);
    font-size: 0.95rem;
}

body.canvas-mode--desktop-single .mobile-header-btn:hover {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-900, #111827);
}

body.canvas-mode--desktop-single .mobile-note-indicator {
    font-size: 0.9rem;
    color: var(--gray-500, #6b7280);
    font-weight: 500;
}

/* ── Full-width document area (note, thread, divider, input) ──────────────── */
body.canvas-mode--desktop-single .mobile-note-body {
    padding: 40px 48px;
    font-size: var(--ln-card-body-size, 1.0625rem);
    line-height: var(--ln-card-body-line, 1.55);
    color: var(--text-primary, #1f2937);
    /* flex:1 + min-height:0 let the body grow/shrink within the fixed-height
       card and scroll internally instead of pushing the card taller. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Desktop-single: hide the old note-area collapse divider bar — the Discussion
   header toggle pill replaces it. */
body.canvas-mode--desktop-single .mobile-note-thread-divider {
    display: none !important;
}

body.canvas-mode--desktop-single .mobile-ai-thread {
    border-top: 1px solid var(--gray-100, #f3f4f6);
    padding: 14px 48px;
}

body.canvas-mode--desktop-single .mobile-input-bar {
    padding: 12px 48px 24px;
}

/* ── Prev/next: inline arrows flanking the "Note X of Y" indicator ────────── */
body.canvas-mode--desktop-single .mobile-swipe-btn {
    position: static;
    transform: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--gray-600, #353c45);
    box-shadow: none;
    font-size: 0.85rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0.2;
}

body.canvas-mode--desktop-single .mobile-swipe-btn:hover {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-900, #111827);
    box-shadow: none;
    opacity: 1;
}

/* ── Narrow viewport: drop the toolbar from fixed top-right into the chrome
   strip so it doesn't overlap the brand/title ─────────────────────────────── */
@media (max-width: 768px) {
    body.canvas-mode--desktop-single .mobile-canvas-toolbar-host .canvas-toolbar {
        position: static;
        top: auto;
        right: auto;
        width: 100%;
        justify-content: center;
        padding: 4px 0;
        z-index: auto;
    }
    body.canvas-mode--desktop-single .mobile-canvas-chrome {
        padding: 80px 16px 0;
    }
    body.canvas-mode--desktop-single .mobile-note-viewer {
        padding-top: 0;
    }
}

/* ── Hide canvas-only floating panels that overlap the note here ──────────── */
body.canvas-mode--desktop-single .ln-today-strip {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Note action items in the single/mobile note header
   ──────────────────────────────────────────────────────────────────────────
   A clone of the canvas card's .ln-card-affordances strip (tags / tasks /
   agents / drawing / delete) is mounted in #mobileNoteActions. Clicks are
   forwarded to the same handlers as on the canvas. Neutralize the strip's
   card-absolute positioning so it lays out inline in the header.
   Shared by real mobile and the desktop single-note view.
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-note-header-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-note-actions {
    display: flex;
    align-items: center;
}

.mobile-note-actions[hidden] {
    display: none;
}

.mobile-note-actions .ln-card-affordances {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-width: none;
    pointer-events: auto;
    gap: 2px;
}

.mobile-note-actions .ln-card-aff-btn {
    width: 34px;
    height: 34px;
}

.mobile-note-actions .ln-card-aff-vis i {
    font-size: 15px;
}

/* Delete reads as a clear destructive action on hover */
.mobile-note-actions .ln-card-aff-btn--delete:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--error-color, #ef4444);
}

/* ══════════════════════════════════════════════════════════════════════════
   Single-note draggable split divider
   ──────────────────────────────────────────────────────────────────────────
   Mirrors the canvas card's .ln-note-thread-divider / .ln-thread-split
   pattern, adapted for the #mobileNoteCard flex column.
   Applies only in desktop-single mode (where the card has a fixed height).
   ══════════════════════════════════════════════════════════════════════════ */

/* The draggable bar between note body and discussion panel */
#mobileSplitDivider {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    border-top: 1px solid var(--gray-100, #f3f4f6);
    cursor: row-resize;
    touch-action: none;
    z-index: 5;
    isolation: isolate;
    overflow: visible;
    transition: border-top-color 0.15s;
}

#mobileSplitDivider:hover {
    border-top-color: var(--primary-color, #6366f1);
}

/* Grip pill — same visual as the canvas version */
#mobileSplitDivider .ln-note-thread-grip {
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--gray-300, #d1d5db);
    transition: background 0.15s ease, width 0.15s ease;
    pointer-events: none;
}

#mobileSplitDivider:hover .ln-note-thread-grip,
#mobileSplitDivider.mobile-split-divider--dragging .ln-note-thread-grip {
    background: var(--primary-color, #6366f1);
    width: 46px;
}

/* Split mode: note body takes var(--ln-mobile-split-note), thread fills rest */
#mobileNoteCard.mobile-split-active #mobileNoteBody {
    flex: 0 0 var(--ln-mobile-split-note, 50%) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto;
}

#mobileNoteCard.mobile-split-active #mobileAiThread {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
}

#mobileNoteCard.mobile-split-active #mobileAiThread .mobile-ai-thread-messages {
    flex: 1 1 0 !important;
    max-height: none !important;
    overflow-y: auto;
}

/* Snap extremes: hide one pane entirely at the limits. At note-max the whole
   thread is hidden (not just its messages) and the note body grows to fill, so
   the divider lands flush against the top of the input bar instead of stopping
   a thread-header-height above it. Mirrors thread-max hiding the note body. */
#mobileNoteCard.mobile-split-note-max #mobileAiThread {
    display: none !important;
}

#mobileNoteCard.mobile-split-note-max #mobileNoteBody {
    flex: 1 1 auto !important;
}

#mobileNoteCard.mobile-split-thread-max #mobileNoteBody {
    display: none !important;
}