/* ── LimatiBlazorUIKit shared styles ────────────────────────── */

/* Frosted glass effect for dropdown menus */
.frosted-glass {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* CodeEditor (Monaco) host — the panel decides the height, while the editor
   itself fills the available flex space. */
.code-editor-host {
    min-height: 12rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
    flex: 1 1 auto;
}

/* Monaco's rendered div must fill the host container */
.code-editor-host > div {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    flex: 1 1 auto;
}

.code-editor-fill {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
}

.code-editor-fill > div {
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
}

/* MarkdownEditor — draggable vertical splitter between the CodeEditor pane
   and the live preview pane (see wwwroot/js/split-panel.js). */
.markdown-split-divider {
    position: relative;
    background-color: var(--bs-border-color, #dee2e6);
    border-radius: 3px;
    margin: 0 0.25rem;
    touch-action: none;
}

.markdown-split-divider:hover,
.markdown-split-divider:active {
    background-color: var(--bs-secondary-color, #6c757d);
}

.markdown-view-content > :first-child {
    margin-top: 0;
}

/* A screenshot in a page is often wider than the column that shows it: it has to scale down
   instead of forcing a horizontal scrollbar, and never be stretched beyond its own size. */
.markdown-view-content img {
    max-width: 100%;
    height: auto;
}

.markdown-view-content table {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.markdown-view-content th,
.markdown-view-content td {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.markdown-view-content thead th {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.markdown-view-content .mermaid-diagram {
    position: relative;
    display: block;
    margin: 1rem 0;
}

.markdown-view-content .mermaid-diagram .mermaid-diagram-surface {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: block;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(248, 249, 250, 0.8));
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.markdown-view-content .mermaid-diagram .mermaid-diagram-surface.is-dragging {
    cursor: grabbing;
}

.markdown-view-content .mermaid-diagram svg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
    transform-origin: top left;
    will-change: transform;
    pointer-events: none;
}

/* Diagram controls: framed keypad with pan / zoom / export buttons. */
.mermaid-diagram-toolbar {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    padding: 0.45rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.9;
    transition: opacity 0.12s ease-in-out;
}

.markdown-view-content .mermaid-diagram:hover .mermaid-diagram-toolbar,
.visimer-editor-host:hover .mermaid-diagram-toolbar,
.mermaid-diagram-toolbar:focus-within {
    opacity: 1;
}

.mermaid-diagram-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(2rem, 1fr));
    gap: 0.3rem;
}

.mermaid-diagram-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 600;
}

.mermaid-diagram-text-btn {
    font-size: 0.54rem;
    letter-spacing: 0.02em;
}

.mermaid-diagram-control-btn:hover,
.mermaid-diagram-control-btn:focus-visible {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
    border-color: var(--bs-primary, #0d6efd);
    outline: none;
}

/* Visimer editor host */
.visimer-editor-host {
    min-height: 18rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.visimer-editor-host svg {
    max-width: 100%;
    height: auto;
}

.visimer-editor-host .visimer-canvas {
    width: 100%;
    height: 100%;
}

/* ── SplitPanel (REQ-UI-022) ─────────────────────────────────────────── */

.uikit-split-panel {
    display: flex;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.uikit-split-pane {
    min-width: 6rem;
    min-height: 0;
    overflow: auto;
}

.uikit-split-pane-left {
    flex-grow: 0;
    flex-shrink: 0;
}

.uikit-split-pane-right {
    flex: 1 1 0;
}

.uikit-split-divider {
    flex: 0 0 6px;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
    background-color: var(--bs-border-color, #dee2e6);
    transition: background-color 0.15s ease-in-out;
}

.uikit-split-divider:hover,
.uikit-split-divider:focus-visible {
    background-color: var(--bs-primary, #0d6efd);
    outline: none;
}

/* ── TreeView (REQ-UI-023) ───────────────────────────────────────────── */

.uikit-tree {
    outline: none;
}

.uikit-tree-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    padding-right: 0.5rem;
    border-radius: 0.25rem;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

.uikit-tree-row:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.uikit-tree-row.uikit-tree-selected {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}

.uikit-tree-row:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

.uikit-tree-toggle {
    flex: 0 0 1rem;
    width: 1rem;
    display: inline-flex;
    justify-content: center;
    /* The chevron is the only content: without a line box the toggle collapses to no height and
       can no longer be pressed. */
    align-items: center;
    min-height: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
}

.uikit-tree-toggle-spacer {
    display: inline-block;
    width: 1rem;
}

.uikit-tree-icon {
    flex: 0 0 auto;
    color: var(--bs-secondary-color, #6c757d);
}

.uikit-tree-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uikit-tree-more {
    color: var(--bs-link-color, #0d6efd);
    cursor: pointer;
    font-size: 0.875rem;
}

.uikit-tree-error {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24rem;
}

.uikit-tree-spinner {
    flex: 0 0 auto;
}

/* ── FramedWindow (REQ-UI-025) ───────────────────────────────────────── */

/* The shell keeps the page layout stable: the placeholder reserves the area
   the embedded content used to occupy, while the window floats above it. */
.uikit-framed-window-shell {
    position: relative;
}

.uikit-framed-window-placeholder {
    width: 100%;
    /* The placeholder only keeps the space the window occupied in the page flow. It is invisible
       but would still lie over the windows opened before it and swallow the presses aimed at their
       title bars, so it must not receive pointer events. */
    pointer-events: none;
}

/* Absolutely positioned inside the shell until the script takes over, so the
   window covers exactly the reserved area from the very first paint. */
.uikit-framed-window {
    position: absolute;
    inset: 0;
    z-index: 1040;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.uikit-framed-window-maximized {
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
}

.uikit-framed-window-titlebar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.3rem 0.4rem 0.3rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    cursor: move;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.uikit-framed-window-titlebar:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

.uikit-framed-window-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.uikit-framed-window-title-icon {
    flex: 0 0 auto;
    margin-right: 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
}

.uikit-framed-window-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uikit-framed-window-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.uikit-framed-window-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background-color: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.uikit-framed-window-button:hover,
.uikit-framed-window-button:focus-visible {
    border-color: var(--bs-border-color, #dee2e6);
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    outline: none;
}

.uikit-framed-window-button-close:hover,
.uikit-framed-window-button-close:focus-visible {
    color: var(--bs-danger, #dc3545);
}

.uikit-framed-window-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Resize handles: the visible edges and corners of the frame. */
.uikit-framed-window-handle {
    position: absolute;
    z-index: 3;
    touch-action: none;
}

.uikit-framed-window-handle-n,
.uikit-framed-window-handle-s {
    left: 0.75rem;
    right: 0.75rem;
    height: 6px;
    cursor: ns-resize;
}

.uikit-framed-window-handle-n {
    top: 0;
}

.uikit-framed-window-handle-s {
    bottom: 0;
}

.uikit-framed-window-handle-e,
.uikit-framed-window-handle-w {
    top: 0.75rem;
    bottom: 0.75rem;
    width: 6px;
    cursor: ew-resize;
}

.uikit-framed-window-handle-e {
    right: 0;
}

.uikit-framed-window-handle-w {
    left: 0;
}

.uikit-framed-window-handle-ne,
.uikit-framed-window-handle-nw,
.uikit-framed-window-handle-se,
.uikit-framed-window-handle-sw {
    width: 12px;
    height: 12px;
}

.uikit-framed-window-handle-ne {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.uikit-framed-window-handle-nw {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.uikit-framed-window-handle-se {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
}

.uikit-framed-window-handle-sw {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}

.uikit-framed-window-maximized .uikit-framed-window-handle {
    display: none;
}

/* ── TreeDetailView (REQ-UI-024) ─────────────────────────────────────── */

.uikit-tree-detail {
    min-width: 0;
    min-height: 0;
}

.uikit-tree-detail-header {
    flex: 0 0 auto;
}

.uikit-tree-detail-title {
    min-width: 0;
}

.uikit-tree-detail-body {
    min-height: 0;
}

.uikit-tree-detail-empty {
    overflow: auto;
}

/* ---- MarkdownView opened with a document tree ------------------------- */

/* A TreeView of documents beside a TreeDetailView that shows the selected one,
   separated by the kit's splitter (REQ-UI-022): the reader can trade tree width for
   reading width, which a fixed column could not do for a deep tree and a wide table
   at the same time. The view fills the area it is given; both panes scroll on their
   own, so a long page never scrolls the tree away. */
.markdown-view-with-tree {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.markdown-view-with-tree > .uikit-split-panel {
    flex: 1 1 auto;
    min-height: 0;
}

.markdown-view-tree-pane {
    min-width: 0;
    padding: 0.25rem;
}

.markdown-view-with-tree .uikit-tree-detail {
    height: 100%;
}

/* ── MarkdownBrowser (REQ-UI-027) ────────────────────────────────────── */

/* The browser fills the area it is given: navigation bar on top, tree and page below it, separated
   by the splitter. The page scrolls inside its own pane, so the breadcrumbs stay visible while
   reading. */
.markdown-browser {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.markdown-browser-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.markdown-browser-nav .btn {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.4rem;
    line-height: 1;
}

.markdown-browser-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    min-width: 0;
    overflow: hidden;
}

.markdown-browser-breadcrumb {
    appearance: none;
    border: 0;
    background: none;
    padding: 0 0.15rem;
    color: var(--bs-link-color, #0d6efd);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.markdown-browser-breadcrumb:hover:not(:disabled) {
    text-decoration: underline;
}

.markdown-browser-breadcrumb.is-current {
    color: var(--bs-secondary-color, #6c757d);
    cursor: default;
}

.markdown-browser-breadcrumb-separator {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
}

.markdown-browser-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.markdown-browser-body > .uikit-split-panel {
    flex: 1 1 auto;
    min-height: 0;
}

.markdown-browser-tree {
    min-width: 0;
    padding: 0.25rem;
}

.markdown-browser-body .uikit-tree-detail {
    height: 100%;
}

.markdown-browser-loading {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* ── Chat controls (REQ-UI-028) ─────────────────────────────────────────
   A chat surface: transcript, tool calls, raw exchange, composer. The panel is a
   flex column so the transcript takes the height that is left and the composer
   stays reachable — a chat whose input scrolls out of view is unusable at length. */

.uikit-chat-panel {
    height: 100%;
    min-height: 0;
}

.uikit-chat-panel-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    flex: 0 0 auto;
}

.uikit-chat-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow: hidden;
}

.uikit-chat-panel-footer {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.uikit-chat-transcript {
    flex: 1 1 auto;
    min-height: 6rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.25rem;
}

.uikit-chat-empty {
    margin: auto;
    text-align: center;
    padding: 1.5rem;
}

.uikit-chat-turn {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.uikit-chat-user {
    align-items: flex-end;
}

.uikit-chat-author {
    padding-left: 0.15rem;
}

.uikit-chat-time {
    margin-left: 0.4rem;
    opacity: 0.7;
}

.uikit-chat-bubble {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.uikit-chat-user .uikit-chat-bubble {
    background: var(--bs-primary-bg-subtle, #cfe2ff);
}

.uikit-chat-system .uikit-chat-bubble {
    background: transparent;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color, #6c757d);
}

.uikit-chat-error {
    background: var(--bs-danger-bg-subtle, #f8d7da);
}

.uikit-chat-markdown > :last-child {
    margin-bottom: 0;
}

/* The cursor marks an answer that is still arriving; it is the only cue that the
   text below it is incomplete, so it must not depend on colour alone. */
.uikit-chat-cursor {
    display: inline-block;
    width: 0.5ch;
    height: 1em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: currentColor;
    animation: uikit-chat-blink 1s step-end infinite;
}

@keyframes uikit-chat-blink {
    50% { opacity: 0; }
}

.uikit-chat-tools {
    flex: 0 0 auto;
    max-height: 40%;
    overflow-y: auto;
}

.uikit-chat-tools-header {
    margin-bottom: 0.25rem;
}

.uikit-chat-tool {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

.uikit-chat-tool-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.uikit-chat-tool-body {
    padding-top: 0.35rem;
}

.uikit-chat-pre {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
}

.uikit-chat-raw-stack {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.uikit-chat-raw-summary {
    cursor: pointer;
}

.uikit-chat-composer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.uikit-chat-input {
    resize: vertical;
    min-height: 2.5rem;
}

.uikit-chat-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uikit-chat-hint {
    margin-left: auto;
}