/* Workspace area styles. Loaded globally from App.razor via the relative
   _content/Smoothin.PrivateModels.Workspace.Client/workspace.css path (base-href safe under tenant PathBase).
   Reuses the app's token set from app.css (--bg, --surface, --border, --text, --text-muted, --accent, ...). */

.workspace-page {
    /* width:100% matters: the parent .app-content is a column flexbox, and the auto margins would otherwise
       disable stretching and shrink-wrap this container to its content. */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
}

.workspace-muted {
    color: var(--text-muted);
}

.workspace-hero h1 {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

/* Turned-off panel — same shape as the Ask AI one. */
.workspace-disabled {
    max-width: 460px;
    margin: 12vh auto 0;
    text-align: center;
    color: var(--text-muted, #64748b);
}

.workspace-disabled h2 {
    color: var(--text, #0f172a);
    margin-bottom: 0.4rem;
}

/* Loading skeleton so an island never shows a blank pane while its first fetch is in flight. */
.workspace-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-top: 0.4rem;
}

.workspace-skeleton-bar {
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2, #f1f5f9) 25%, #e8edf3 50%, var(--surface-2, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: workspace-shimmer 1.2s ease-in-out infinite;
}

@keyframes workspace-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---- quick capture ---- */
.ws-capture {
    display: flex;
    gap: 0.6rem;
    margin: 0.75rem 0 1.5rem;
}

.ws-capture-input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 10px;
    font: inherit;
    background: var(--surface, #fff);
}

.ws-capture-input:focus {
    outline: none;
    border-color: var(--accent, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4f46e5) 15%, transparent);
}

.ws-capture-btn { white-space: nowrap; }

.ws-mic { white-space: nowrap; }

.ws-mic-recording {
    animation: ws-pulse 1.2s ease-in-out infinite;
}

@keyframes ws-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* ---- sections / headings ---- */
.ws-section { margin-top: 1.75rem; }
.ws-section h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }

.ws-count-pill {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--surface-2, #f1f5f9);
    color: var(--text-muted, #64748b);
}

.ws-module-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.ws-module-head h1 { margin: 0; font-size: 1.45rem; letter-spacing: -0.02em; }
.ws-module-icon { margin-right: 0.25rem; }

.ws-archived-banner {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
}

/* ---- item lists ---- */
.ws-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 12px;
    background: var(--surface, #fff);
    overflow: hidden;
}

.ws-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border, #eef1f4);
    text-decoration: none;
    color: var(--text, #0f172a);
    font-size: 0.92rem;
}

.ws-row:last-child { border-bottom: none; }
a.ws-row:hover, div.ws-row:hover { background: var(--surface-2, #f8fafc); }

.ws-row-header {
    background: var(--surface-2, #f8fafc);
    font-weight: 600;
    color: var(--text-muted, #64748b);
    font-size: 0.82rem;
    cursor: pointer;
}

.ws-row-icon { flex-shrink: 0; }

.ws-row-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.ws-done { text-decoration: line-through; color: var(--text-muted, #94a3b8); }

.ws-row-meta {
    flex-shrink: 0;
    color: var(--text-muted, #94a3b8);
    font-size: 0.8rem;
}

.ws-status-pill {
    flex-shrink: 0;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--surface-2, #f1f5f9);
    color: var(--text-muted, #64748b);
}

.ws-row-action { max-width: 130px; }

.ws-row-delete {
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
}

.ws-row-delete:hover { background: #fef2f2; color: var(--danger, #dc2626); }

/* ---- bulk action bar ---- */
.ws-bulkbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--accent, #4f46e5) 30%, transparent);
    background: color-mix(in srgb, var(--accent, #4f46e5) 6%, transparent);
    border-radius: 10px;
    font-size: 0.88rem;
}

.ws-select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    background: var(--surface, #fff);
}

.ws-empty {
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    border: 1px dashed var(--border, #e6e8ec);
    border-radius: 12px;
}

/* ---- toast ---- */
.ws-toast {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--text, #0f172a);
    color: #fff;
    font-size: 0.88rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
    z-index: 60;
    animation: ws-toast-in 0.18s ease;
}

.ws-toast a { color: #a5b4fc; font-weight: 600; text-decoration: none; }
.ws-toast-error { background: var(--danger, #dc2626); }

@keyframes ws-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- master-detail split ---- */
.ws-split { display: flex; gap: 1.25rem; align-items: flex-start; }
.ws-split-list { flex: 1; min-width: 0; }

/* Open detail: an even 45/45 split, centred so the leftover slack sits on the outside rather than
   between the two columns. */
.ws-split-open .ws-split-list { flex: 0 0 45%; }
.ws-split-open .ws-detail { flex: 0 0 45%; }

/* No detail pane: the list is the whole page, so it gets 90% of the screen (centred by the container's
   auto margins) rather than the 1100px reading column. */
.ws-page-wide { max-width: 90%; }

/* ...and with one open the page goes full-bleed and full-height, so both sides run from the header to the
   bottom of the window and scroll independently instead of the whole page growing. */
.ws-page-split {
    max-width: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ws-page-split .ws-module-head { flex-shrink: 0; }

.ws-page-split .ws-split {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    justify-content: center;
    padding-bottom: 1rem;
}

.ws-page-split .ws-split-list,
.ws-page-split .ws-detail { overflow-y: auto; }

/* Two 45% columns stop making sense on a narrow screen: stack them and let the page scroll again, and
   drop the 5% side margins — every pixel counts there. */
@media (max-width: 900px) {
    .ws-page-wide { max-width: none; }
    .ws-page-split { display: block; }
    .ws-page-split .ws-split { flex-direction: column; }
    .ws-split-open .ws-split-list,
    .ws-split-open .ws-detail { flex: 0 0 auto; }
    .ws-page-split .ws-split-list,
    .ws-page-split .ws-detail { overflow-y: visible; }
}

.ws-detail {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 14px;
    background: var(--surface, #fff);
    padding: 1rem 1.2rem 1.4rem;
}

.ws-detail-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.ws-detail-back { padding: 0.3rem 0.6rem; }
.ws-detail-close { flex-shrink: 0; }

.ws-detail-title {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    background: transparent;
}

.ws-detail-title:hover { border-color: var(--border, #e6e8ec); }
.ws-detail-title:focus { outline: none; border-color: var(--accent, #4f46e5); background: var(--surface, #fff); }

.ws-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: end;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border, #eef1f4);
}

.ws-detail-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ws-detail-done { flex-direction: row !important; align-items: center; gap: 0.4rem !important; font-size: 0.9rem !important; text-transform: none !important; }

.ws-detail-meta { margin: 0.6rem 0 0.2rem; font-size: 0.8rem; color: var(--text-muted, #94a3b8); }
.ws-detail-error { color: var(--danger, #dc2626); font-size: 0.85rem; }

/* ---- markdown blocks ---- */
.ws-md-block { margin-top: 1.1rem; }
.ws-md-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; }
.ws-md-title { margin: 0; font-size: 0.95rem; flex: 1; }
.ws-md-title-input {
    flex: 1;
    font: inherit;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 8px;
}
.ws-md-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.ws-md-empty { margin: 0.2rem 0 0; font-size: 0.85rem; }
.ws-dirty { color: #d97706; font-size: 0.78rem; font-weight: 600; }

.ws-icon-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.ws-icon-btn svg { width: 14px; height: 14px; }
.ws-icon-btn:hover { background: var(--surface-2, #f1f5f9); color: var(--accent, #4f46e5); }

.ws-md-view { cursor: text; }

/* ---- two-step delete confirm ---- */
.ws-confirm-wrap { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }

.ws-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: transparent;
}

.ws-delete-armed { opacity: 0.35; }

.ws-confirm-btn {
    position: relative;
    z-index: 71;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    border: none;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    animation: dropdown-in 0.12s ease;
}

.ws-confirm-btn:hover { background: #15803d; }

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ws-add-section { margin-top: 1rem; align-self: flex-start; }

/* In the full-height split the pane is a flex column, so auto margin drops "Add section" to the bottom
   edge when the item is short and simply follows the content when it is long. */
.ws-page-split .ws-detail { display: flex; flex-direction: column; }

/* Flex items shrink by default: without this, a tall block (a long note, an open editor) would be
   squeezed to fit the pane instead of overflowing it and scrolling. */
.ws-page-split .ws-detail > * { flex-shrink: 0; }

.ws-page-split .ws-add-section { margin-top: auto; padding-top: 0.55rem; }

.ws-files { margin-top: 1.3rem; }
.ws-file-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.88rem; }

.ws-file-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border, #e6e8ec);
    flex-shrink: 0;
}

.ws-audio { max-width: 260px; height: 32px; }

/* ---- notes / todo ---- */
.ws-notes-new { margin: 0; flex: 2; min-width: 260px; }
.ws-pager { display: flex; align-items: center; gap: 0.7rem; justify-content: center; margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-muted, #64748b); }

.ws-move-btn {
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.ws-move-btn:hover:not(:disabled) { background: var(--surface-2, #f1f5f9); color: var(--text, #0f172a); }
.ws-move-btn:disabled { opacity: 0.3; cursor: default; }

.ws-todo-left { margin-top: 0.5rem; font-size: 0.82rem; }

/* ---- notes workbench: full width & height, tree pinned left ---- */
.ws-page-full {
    max-width: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ws-page-full .ws-module-head { flex-shrink: 0; }

.ws-notes-workbench {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 1rem;
    align-items: stretch;
    padding-bottom: 1rem;
}

.ws-tree-col {
    flex: 0 0 340px;
    min-width: 0;
    overflow-y: auto;
}

/* A note fills the pane: the detail column becomes a flex column whose body (the editor or the rendered
   page) takes every pixel the head and meta line leave behind. overflow-y moves INTO the body so the
   editor's own toolbar stays pinned while the text scrolls. */
.ws-notes-workbench .ws-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ws-notes-workbench .ws-detail-head,
.ws-notes-workbench .ws-detail-meta,
.ws-notes-workbench .ws-detail-error { flex-shrink: 0; }

/* THE note is the single scroller: the editor itself is height:auto (no scrollbar of its own), so a long
   note scrolls as one continuous page — while the action bar and the editor toolbar stay stuck to the top,
   floating above the text. */
.ws-note {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* The editor's toolbar strip (46px) plus the 1px frame border. Read mode reserves this much so the
       text does not jump when the editor opens; if a Toast UI upgrade changes the toolbar height, this
       is the single value to correct. */
    --ws-editor-chrome: 47px;

    /* Height of the action bar — what the sticky toolbar has to clear. */
    --ws-note-bar: 50px;
}

/* Read mode: the whole area is the click target, so "click the page to edit" is literally true. It also
   repeats the editor's own content padding (18px 25px + the 1px border) — together with the reserved
   chrome above, every line lands on the same pixel in both modes. */
.ws-note-view {
    flex: 1 0 auto;
    cursor: text;
    margin-top: var(--ws-editor-chrome);
    padding: 18px 26px 2rem;
}

.ws-note-empty { display: grid; place-items: start center; }

.ws-note-bar {
    position: sticky;
    top: 0;
    z-index: 31;   /* above the floating toolbar, which in turn clears Toast UI's z-index:20 content */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
    padding-bottom: 0.4rem;
    flex-shrink: 0;
    min-height: 32px;
    background: var(--surface, #fff);
}

.ws-note-state { font-size: 0.78rem; color: var(--text-muted, #94a3b8); }
.ws-note-state-error { color: var(--danger, #dc2626); font-weight: 600; }

.ws-note-editor { flex: 0 0 auto; }

/* The toolbar floats: it sticks under the action bar for as long as the editor is on screen, so the
   formatting controls are always reachable no matter how far down the note you are. Toast UI's own
   containers are all overflow:visible, which is what lets sticky escape the editor box.

   The z-index is NOT arbitrary: Toast UI stamps `z-index: 20` on .ProseMirror itself, so anything meant
   to float above the text has to outrank 20. The wrapper is also transparent (only its inner
   .toastui-editor-defaultUI-toolbar is painted), so it needs that same fill or the text scrolls
   through the gap around the buttons. */
.ws-note-editor .toastui-editor-toolbar {
    position: sticky;
    top: var(--ws-note-bar);
    z-index: 30;
    background: #f7f9fc;
}

/* Nothing inside the editor may scroll on its own — that scrollbar is exactly what we removed. */
.ws-note-editor .toastui-editor-ww-container,
.ws-note-editor .toastui-editor-md-container,
.ws-note-editor .toastui-editor-main { overflow: visible; }

/* Same reasoning for the Markdown/WYSIWYG switch: it is the last element of the document, so on a long
   note it would only be reachable at the very bottom. Stuck to the bottom edge it stays one click away. */
.ws-note-editor .toastui-editor-mode-switch {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--surface, #fff);
}

.ws-note-files { margin-top: 0.6rem; flex-shrink: 0; font-size: 0.85rem; }
.ws-note-files summary { cursor: pointer; color: var(--text-muted, #64748b); }
.ws-file-icon { font-size: 1.2rem; width: 24px; text-align: center; }

/* The editor host itself: a plain block that fills whatever box it is given. */
.ws-editor { min-height: 0; }
.ws-editor .toastui-editor-defaultUI { border-radius: 10px; }
.ws-md-editor { height: 320px; }

.ws-detail-placeholder {
    display: grid;
    place-items: center;
}

@media (max-width: 640px) {
    .ws-notes-workbench { flex-direction: column; }
    .ws-tree-col { flex: 0 0 auto; max-height: 40vh; }
}

/* ---- notes tree ---- */
.ws-tree-head { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.7rem; flex-wrap: wrap; }

.ws-tree-nodes {
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: 0.35rem 0.4rem;
    overflow: hidden;
}

.ws-tree-node {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.5rem;
    border-radius: 8px;
    font-size: 0.92rem;
}

.ws-tree-node:hover { background: var(--surface-2, #f8fafc); }
.ws-tree-selected { background: color-mix(in srgb, var(--accent, #4f46e5) 10%, transparent); }
.ws-tree-node-hot { outline: 2px solid var(--accent, #4f46e5); outline-offset: -2px; }

.ws-tree-chevron {
    flex-shrink: 0;
    width: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    text-align: center;
}

.ws-tree-leaf { cursor: default; font-size: 0.6rem; }

.ws-tree-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: var(--text, #0f172a);
    cursor: pointer;
    padding: 0;
}

.ws-tree-title:hover { color: var(--accent, #4f46e5); }

.ws-tree-add {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted, #cbd5e1);
    cursor: pointer;
    border-radius: 6px;
    padding: 0.05rem 0.35rem;
    visibility: hidden;
}

.ws-tree-node:hover .ws-tree-add { visibility: visible; }
.ws-tree-add:hover { background: var(--surface-2, #f1f5f9); color: var(--accent, #4f46e5); }

.ws-tree-line {
    height: 6px;
    border-radius: 3px;
    margin: -2px 0.4rem;
}

.ws-tree-line-hot { background: color-mix(in srgb, var(--accent, #4f46e5) 45%, transparent); }

/* ---- folder tree (tree-enabled trackers) & its workbench ----
   The wrapper exists only to hold the tree column. WITHOUT a tree it is display:contents, so the split
   stays a direct child of .workspace-page for layout purposes and none of the pre-tree rules above change
   meaning — that is what keeps flat modules pixel-identical to how they were. */
.ws-layout-passthrough { display: contents; }

.ws-tracker-workbench {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 1rem;
    align-items: stretch;
    padding-bottom: 1rem;
}

/* The list+detail half behaves exactly as it does without a tree, just inside the leftover width. */
.ws-tracker-workbench > .ws-split {
    flex: 1;
    min-width: 0;
    min-height: 0;
    align-items: stretch;
}

.ws-tracker-workbench .ws-split-list,
.ws-tracker-workbench .ws-detail { overflow-y: auto; }

@media (max-width: 900px) {
    /* Three columns cannot survive here: the tree becomes a short scroller above the list. */
    .ws-tracker-workbench { flex-direction: column; }
    .ws-tracker-workbench > .ws-split { flex-direction: column; }
    .ws-tracker-workbench .ws-split-list,
    .ws-tracker-workbench .ws-detail { overflow-y: visible; }
}

.ws-folder-tree .ws-tree-nodes { padding-bottom: 0.5rem; }
.ws-tree-empty { margin: 0.4rem 0.5rem; font-size: 0.85rem; }
.ws-tree-unfiled { margin-top: 0.2rem; border-top: 1px dashed var(--border, #e6e8ec); padding-top: 0.4rem; }
.ws-tree-actions { display: flex; flex-shrink: 0; }

.ws-tree-rename {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--accent, #4f46e5);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    font: inherit;
}

.ws-folder-confirm {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    background: var(--surface-2, #f8fafc);
    border-radius: 8px;
    margin: 0.15rem 0.4rem;
}

/* Where a row is filed, shown only while the list spans more than one folder. */
.ws-folder-chip {
    flex-shrink: 1;
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
    background: var(--surface-2, #f1f5f9);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

.ws-folder-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- move picker modal ---- */
.ws-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;   /* above the delete-confirm popover (70) — it can open on top of a row that has one */
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    animation: dropdown-in 0.12s ease;
}

.ws-modal {
    width: min(560px, 100%);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e6e8ec);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
}

.ws-modal-head { display: flex; align-items: center; gap: 0.6rem; }
.ws-modal-head h2 { margin: 0; font-size: 1.05rem; flex: 1; }
.ws-modal-target { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.ws-modal-target .ws-select { flex: 1; }

/* THE scroller: a deep tree scrolls inside the dialog, the header and footer never leave. */
.ws-modal-tree { flex: 1; min-height: 0; overflow-y: auto; }

.ws-modal-foot { display: flex; align-items: center; gap: 0.6rem; }

.ws-modal-destination {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

.ws-settings-hint { font-size: 0.82rem; margin: 0.4rem 0 0; }

/* ---- drag-and-drop reorder ---- */
.ws-grip {
    cursor: grab;
    color: var(--text-muted, #cbd5e1);
    font-size: 0.85rem;
    user-select: none;
    flex-shrink: 0;
}

/* A drag has to start from ANYWHERE on the row. Without this the browser sees a text selection under the
   pointer and drags that instead of the row, which is why dragging from a title worked only sometimes.
   Real inputs keep their own selection behaviour. */
.ws-drag { user-select: none; }
.ws-drag input, .ws-drag textarea { user-select: text; }

.ws-drag.ws-dragging { opacity: 0.4; }

.ws-drag.ws-drop-target {
    box-shadow: inset 0 2px 0 var(--accent, #4f46e5);
}

/* Dropping onto another status group changes the status, so the whole group lights up — a row-level hint
   alone would not say "this changes more than the order". */
.ws-group-drop {
    outline: 2px dashed var(--accent, #4f46e5);
    outline-offset: 3px;
    border-radius: 10px;
}

/* An empty status has no rows to aim at, so it keeps a permanent strip — big enough to hit without
   aiming, and present before the drag starts so nothing shifts under the pointer mid-drag. */
.ws-drop-zone {
    margin: 0.35rem 0 0.2rem;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0.5rem 0.7rem;
    border: 1px dashed transparent;
    border-radius: 10px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted, #cbd5e1);
}

.ws-group-drop .ws-drop-zone {
    border-color: var(--accent, #4f46e5);
    color: var(--accent, #4f46e5);
}

/* ---- settings ---- */
.ws-settings-row { border-bottom: 1px solid var(--border, #eef1f4); padding: 0.5rem 0.9rem; }
.ws-settings-row:last-child { border-bottom: none; }
.ws-settings-archived { opacity: 0.55; }

.ws-settings-main { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.ws-settings-icon {
    width: 52px;
    text-align: center;
    padding: 0.35rem 0.2rem;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 8px;
    font: inherit;
}

.ws-settings-name {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    min-width: 140px;
}

.ws-type-pill {
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--surface-2, #f1f5f9);
    color: var(--text-muted, #64748b);
}

.ws-settings-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.ws-btn-small { padding: 0.28rem 0.6rem; font-size: 0.8rem; }

.ws-settings-panel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
    padding: 0.6rem 0.7rem;
    background: var(--surface-2, #f8fafc);
    border-radius: 10px;
    font-size: 0.88rem;
}

.ws-status-editor { flex-direction: column; align-items: stretch; }
.ws-status-row { display: flex; align-items: center; gap: 0.5rem; }
.ws-settings-panel-foot { display: flex; gap: 0.5rem; margin-top: 0.3rem; }

.ws-settings-create {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
    align-items: center;
}

.ws-settings-purge { margin-top: 0.8rem; }

/* ---- tracker list ---- */
.ws-filters { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.ws-filter-text {
    flex: 1;
    min-width: 140px;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border, #e6e8ec);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
}

.ws-group { margin-bottom: 1rem; }
.ws-group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--text-muted, #64748b);
}

.ws-row-open {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: var(--text, #0f172a);
    cursor: pointer;
    padding: 0;
}

.ws-row-open:hover { color: var(--accent, #4f46e5); }

.ws-priority { font-size: 0.7rem; flex-shrink: 0; }
.ws-priority-low { color: #94a3b8; }
.ws-priority-normal { color: #64748b; }
.ws-priority-high { color: #d97706; }
.ws-priority-urgent { color: #dc2626; }

.ws-assignee {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #4f46e5), #7c3aed);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

/* Mobile: single pane — the open detail replaces the list. */
@media (max-width: 640px) {
    .ws-split { flex-direction: column; }
    .ws-split-open .ws-split-list { display: none; }
    .ws-split-open .ws-detail { width: 100%; }
    .ws-detail { padding: 0.8rem; }
}

/* ---- printing a note (this is also the PDF export: "Save as PDF" in the print dialog) ----

   Printing the note the app has ALREADY rendered is what makes a PDF that matches the screen — it is the
   same DOM, the same sanitized HTML, the same styles. So this block does only two things: hide the
   application chrome, and un-clip the scroll containers between the page and the text. That second half is
   the one that matters: .app-content, .ws-detail and .ws-note are each a scroller with a bounded height,
   and without releasing them the printout stops at the first screenful. */
.ws-print-title { display: none; }

@media print {
    /* Chrome, not content. The tree, the action bars and the icon buttons are navigation; the attachments
       drawer is a management affordance, not part of the document. */
    .app-header,
    .ws-module-head,
    .ws-tree-col,
    .ws-detail-head,
    .ws-note-bar,
    .ws-note-files,
    .ws-no-print,
    #pm-chat-widget,
    #blazor-error-ui { display: none !important; }

    /* Every bounded/clipping ancestor between <body> and the text, released. Also flattened to block: these
       are flex containers sized for a viewport, and paper has no viewport. */
    html, body,
    .app-shell,
    .app-content,
    .workspace-page,
    .ws-notes-workbench,
    .ws-detail,
    .ws-note {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .workspace-page { max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .ws-notes-workbench { padding: 0 !important; gap: 0 !important; }

    /* The title comes back as a real heading — the on-screen one is an <input>, which would print as a
       bordered form field cropped to its column width. */
    .ws-print-title {
        display: block !important;
        margin: 0 0 0.2rem;
        font-size: 1.6rem;
    }

    .ws-detail-meta { margin: 0 0 1.2rem; color: #555 !important; font-size: 0.8rem; }

    /* On screen this reserves the editor toolbar's height so text does not jump when the editor opens.
       On paper there is no toolbar to clear. */
    .ws-note-view {
        margin-top: 0 !important;
        padding: 0 !important;
        cursor: auto;
    }

    /* Keep the units a reader thinks of as one thing on one page. */
    .ws-note-view pre,
    .ws-note-view blockquote,
    .ws-note-view table,
    .ws-note-view img,
    .ws-note-view li { break-inside: avoid; }

    .ws-note-view h1,
    .ws-note-view h2,
    .ws-note-view h3 { break-after: avoid; }

    .ws-note-view img { max-width: 100% !important; height: auto !important; }

    /* Links are useless as blue underlines on paper, but their targets are not — print the URL after
       external links only (in-app file links would print a meaningless relative path). */
    .ws-note-view a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
        word-break: break-all;
    }
}

/* ---- Workspace settings shell: the settings-page/settings-menu chrome (app.css) hosts the module's own
   pages, so the pane inside it drops the standalone page's outer padding and max-width. ---- */
.settings-content .ws-settings-pane { margin: 0; padding: 0; max-width: none; }
.settings-content .ws-settings-pane .workspace-hero { padding-top: 0; }

/* ---- Workspace MCP settings page ---- */
.ws-mcp-callout {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    background: var(--surface-2);
}

.ws-mcp-callout p { margin: 0.35rem 0 0; }
.ws-mcp-callout-warn { border-left-color: #d97706; }

.ws-mcp-spaced { margin-top: 1.1rem; }

.ws-mcp-bullets { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.ws-mcp-bullets li { margin: 0.35rem 0; }