/* Mermaid Diagram Expand Overlay */

.div-diagram-expand-btn,
.div-code-expand-btn,
.div-table-expand-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18pt;
    height: 18pt;
    padding: 0;
    font-size: 12pt;
    line-height: 18pt;
}

.div-diagram-expand-btn:hover,
.div-code-expand-btn:hover,
.div-table-expand-btn:hover {
    filter: brightness(1.15);
    color: var(--FG-base);
    border-color: var(--AC-trim);
}

/* Shared fixed fullscreen overlay shell (diagram, code, table, and notes overlays) */
:is(.div-diagram-overlay, .div-code-overlay, .div-table-overlay, .div-notes-overlay) {
    position: fixed;
    top: var(--DM-margin);
    left: var(--DM-margin);
    bottom: var(--DM-margin);
    right: var(--DM-margin);
    display: none;
    opacity: 0;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    overflow: hidden;
    flex-direction: column;
    background-color: var(--BG-panel);
    border: 2pt solid var(--AC-btn);
    border-radius: var(--DM-margin-h);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

:is(.div-diagram-overlay, .div-code-overlay, .div-table-overlay, .div-notes-overlay).active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* Single-column mode: overlays become full-screen */
@media screen and (max-width: 780px) {
    :is(.div-diagram-overlay, .div-code-overlay, .div-table-overlay, .div-notes-overlay) {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 0;
    }
}

/* Shared overlay body for the code and notes overlays: the 3fr/1fr layout
   gated by the column-open class, the scrolling body/thinking panels, and
   the narrow-viewport glass panel each overlay's toggle class slides in.
   (The code overlay's slide rules live in its section below; the notes
   thinking column keeps its framed background in notes.css.) */
:is(.div-code-overlay-layout, .div-notes-overlay-layout) {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--DM-margin-h);
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: var(--DM-margin-h);
}

:is(.div-code-overlay, .div-notes-overlay):not(.column-open) :is(.div-code-overlay-layout, .div-notes-overlay-layout) {
    grid-template-columns: 1fr;
}

:is(.div-code-overlay, .div-notes-overlay):not(.column-open) :is(.div-code-overlay-side, .div-notes-overlay-thinking) {
    display: none;
}

:is(.div-code-overlay-view, .div-notes-overlay-body) {
    min-width: 0;
    overflow: auto;
    box-sizing: border-box;
    padding: var(--DM-margin-q);
    background-color: var(--BG-base);
    border: 1pt solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
}

:is(.div-code-overlay-side, .div-notes-overlay-thinking) {
    display: flex;
    flex-direction: column;
    gap: var(--DM-margin-h);
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

@media screen and (max-width: 780px) {
    :is(.div-code-overlay-layout, .div-notes-overlay-layout) {
        position: relative;
        grid-template-columns: 1fr;
    }

    .div-code-overlay .div-code-overlay-side,
    .div-notes-overlay .div-notes-overlay-thinking {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: min(75%, 24em);
        background-color: color-mix(in srgb, var(--BG-panel) 55%, transparent);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-left: 1pt solid var(--BD-panel-l);
    }

    .div-notes-overlay .div-notes-overlay-thinking {
        transform: translateX(calc(100% - 2em));
        transition: transform 0.25s ease-out;
    }

    .div-notes-overlay.column-open .div-notes-overlay-thinking {
        transform: translateX(0);
    }
}

.div-diagram-overlay-viewport {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.div-diagram-overlay-viewport:active {
    cursor: grabbing;
}

.div-diagram-overlay-stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

/* Message shown in place of a diagram that cannot be rendered */
.div-diagram-overlay-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 40em;
    padding: var(--DM-margin-h);
    color: var(--FG-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Overlay clone: render at natural size, ignoring the diagram-in-chat
   sizing constraints (width/max-width/max-height !important rules) */
#id-diagram-overlay-stage svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.div-diagram-overlay-btn-close {
    position: absolute;
    top: var(--DM-margin-q);
    right: var(--DM-margin-q);
    z-index: 2;
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    cursor: pointer;
}

.div-diagram-overlay-zoom {
    position: absolute;
    bottom: var(--DM-margin-q);
    right: var(--DM-margin-q);
    display: flex;
    gap: var(--DM-margin-q);
    z-index: 2;
}

.div-diagram-overlay-zoom button {
    min-width: 2em;
    height: 18pt;
    padding: 0 var(--DM-margin-q);
    font-size: 9pt;
    line-height: 12pt;
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    cursor: pointer;
}

.div-diagram-overlay-btn-close:hover,
.div-diagram-overlay-zoom button:hover {
    filter: brightness(1.15);
    border-color: var(--AC-trim);
}

/* Code Block Overlay */

pre.code-block {
    position: relative;
}

/* Shared overlay chrome for the code and notes overlays: the header grid,
   the 18pt overlay button recipe (also used by the table overlay header and
   the code overlay's nav row), the 3fr/1fr body layout gated by the
   column-open class, and the scrolling body/thinking panels. Per-overlay
   extras stay in the sections below; the narrow-viewport glass panel is
   shared too, with each overlay's own slide-in state. */
:is(.div-code-overlay-header, .div-notes-overlay-header) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--DM-margin-q) var(--DM-margin-h);
    background-color: var(--BG-panel);
    border-bottom: 1pt solid var(--BD-panel);
}

:is(.div-code-overlay-header-side, .div-notes-overlay-header-side) {
    display: flex;
    align-items: center;
    gap: var(--DM-margin-q);
}

:is(.div-code-overlay-header-side, .div-notes-overlay-header-side):last-child {
    justify-content: flex-end;
}

:is(.div-code-overlay-header, .div-code-overlay-nav, .div-notes-overlay-header, .div-notes-overlay-prompt, .div-table-overlay-header) button {
    height: 18pt;
    padding: 0 var(--DM-margin-h);
    font-size: 9pt;
    line-height: 12pt;
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    cursor: pointer;
}

:is(.div-code-overlay-header, .div-notes-overlay-header, .div-notes-overlay-prompt, .div-table-overlay-header) button:disabled {
    opacity: 0.5;
    cursor: default;
}

:is(.div-code-overlay-header, .div-notes-overlay-header, .div-notes-overlay-prompt, .div-table-overlay-header) button:hover:not(:disabled),
.div-code-overlay-nav button:hover {
    filter: brightness(1.15);
    border-color: var(--AC-trim);
}

/* Analysis navigation buttons: header-inline by default, shown with results */
.div-code-overlay-nav-btn,
.div-code-overlay-nav {
    display: none;
}

.div-code-overlay.results-shown .div-code-overlay-nav-btn {
    display: inline-block;
}

/* Single-column mode: navigation moves to its own row under the header and
   results become a translucent panel sliding in from the right; a 2em sliver
   stays visible and tapping the edge toggles it. The layout collapse and the
   glass panel are shared with the notes overlay in the block above. */
@media screen and (max-width: 780px) {
    .div-code-overlay.results-shown .div-code-overlay-nav-btn {
        display: none;
    }

    .div-code-overlay.results-shown .div-code-overlay-nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: var(--DM-margin-q) var(--DM-margin-h);
        background-color: var(--BG-panel);
        border-bottom: 1pt solid var(--BD-panel);
    }

    .div-code-overlay-nav .div-code-overlay-nav-side:last-child {
        justify-self: end;
    }

    .div-code-overlay .div-code-overlay-side {
        padding: var(--DM-margin-q);
        border-radius: var(--DM-margin-q) 0 0 var(--DM-margin-q);
        transform: translateX(calc(100% - 2em));
        transition: transform 0.25s ease-out;
    }

    .div-code-overlay .div-code-overlay-side.side-open {
        transform: translateX(0);
    }
}

.div-code-overlay-nav-side {
    display: flex;
    gap: var(--DM-margin-q);
}

.div-code-overlay-title {
    font-size: 100%;
    text-align: center;
}

.div-code-overlay-lines {
    min-width: max-content;
}

.div-code-overlay-line {
    display: flex;
}

.div-code-overlay-line-num {
    min-width: 3em;
    box-sizing: border-box;
    padding-right: var(--DM-margin-h);
    text-align: right;
    color: var(--FG-muted);
    user-select: none;
    -webkit-user-select: none;
}

.div-code-overlay-line code {
    white-space: pre;
    background-color: transparent;
}

.div-code-overlay-line.code-line-highlighted {
    background-color: var(--AC-trim-tint-soft);
}

.div-code-overlay-thinking {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Let the thinking block fill the overlay column instead of the
   instant-answer 33vh streaming cap */
#id-code-overlay-thinking .instant-answer-thoughts-content {
    max-height: none;
}

.div-code-overlay-items {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.code-analysis-item {
    box-sizing: border-box;
    padding: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-q);
    border: 1pt solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    cursor: pointer;
}

.code-analysis-item:hover {
    border-color: var(--AC-trim);
}

.code-analysis-item.selected {
    border-color: var(--AC-trim);
    background-color: var(--AC-trim-tint-soft);
}

.code-analysis-item-title {
    font-weight: bold;
    margin-bottom: var(--DM-margin-q);
}

.code-analysis-item-type {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0 0.4em;
    font-size: 0.75em;
    font-weight: bold;
    border: 1pt solid var(--FG-muted);
    border-radius: var(--DM-margin-q);
    color: var(--FG-muted);
    vertical-align: 1px;
}

.code-analysis-item[data-type="CAUTION"] .code-analysis-item-type {
    color: var(--TX-badge-admin);
    border-color: var(--TX-badge-admin);
}

.code-analysis-item[data-type="WARNING"] .code-analysis-item-type {
    color: var(--TX-status-error);
    border-color: var(--TX-status-error);
}

.code-analysis-item-analysis {
    font-size: 0.9em;
    color: var(--FG-base);
}

.as-icon {
    font-family: 'Noto Emoji', sans-serif;
}

.btn-tts-preview,
.btn-tts-clear-cache {
    border-radius: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-h);
}

.btn-tts-preview.btn-preview-playing {
    opacity: 0.5;
}

.div-tts-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 8px;
}

.div-tts-row .div-tts-voice-col {
    flex: 2;
    min-width: 0;
}

.div-tts-row .div-tts-cost-col {
    flex: 1;
}

@media screen and (max-width: 780px) {
    .div-tts-row {
        flex-wrap: wrap;
    }
    .div-tts-row .div-tts-voice-col {
        flex: 1 1 100%;
    }
}

/* Conversation Table Block */

.div-table-block {
    position: relative;
    margin: var(--DM-margin-h) 0;
    box-sizing: border-box;
    padding: var(--DM-margin-h);
    background-color: var(--BG-panel);
    border: 1px solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
}

.div-table-block table {
    margin: 0;
}

/* Title row: title left, expand button right, table reliably below */
.div-table-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-q);
}

.div-table-block-header h7 {
    font-weight: bold;
}

.div-table-block-header .div-table-expand-btn {
    position: static;
}

.div-table-overlay-view th .span-th-sort {
    float: right;
}

.div-table-overlay-view th .span-th-sort-none {
    color: var(--FG-muted);
}

/* Table Overlay */

.div-table-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--DM-margin-q);
    padding: var(--DM-margin-q) var(--DM-margin-h);
    border-bottom: 1pt solid var(--BD-panel);
}

.input-table-overlay-filter {
    flex: 1;
    max-width: 24em;
}

.div-table-overlay-title {
    padding: var(--DM-margin-q) var(--DM-margin-h);
    font-weight: bold;
    background-color: var(--BG-panel);
    border-bottom: 1pt solid var(--BD-panel);
}

.div-table-overlay-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
    /* vertical spacing lives outside the scroll area so the sticky header
       never moves while scrolling */
    margin: var(--DM-margin-q) 0;
}

/* Wrapper holding the table and its sticky header as one unit; horizontal
   margin insets the table from the overlay edges */
.div-table-overlay-tablewrap {
    margin: 0 var(--DM-margin-q);
}

.div-table-overlay-view table {
    width: 100%;
    /* separate borders so the sticky header is a solid block: no table
       content shows through while rows scroll behind it */
    border-collapse: separate;
    border-spacing: 0;
}

.div-table-overlay-view th {
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background-color: var(--BG-header);
    background-clip: padding-box;
    box-shadow: 0 1pt 0 0 var(--BD-panel-l);
}

.div-table-overlay-view th:hover {
    background-color: var(--BG-panel2);
}

.div-table-overlay-view mark {
    background-color: var(--AC-trim-tint-strong);
    color: inherit;
}