tinai

@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@600&display=swap');

/* Default Theme Variables (Fallback for IDE inspection & dynamic override) */
:root {
    --BG-base: #000;
    --BG-panel: #111;
    --BG-panel2: #222;
    --FG-base: #FFFFFF;
    --FG-muted: #888;
    --AC-trim-dd: #aaa;
    --AC-trim-d: #999;
    --AC-trim: #888;
    --AC-trim-l: #444;
    --DM-margin: 16pt;
    --DM-margin-h: 8pt;
    --DM-margin-q: 4pt;
    --DM-margin-s: 2pt;
    --TX-status-success: #51cf66;
    --TX-status-error: #ff6b6b;
    --TX-badge-admin: #ffd43b;
    --TX-link: #a0a0a0;
    --BD-panel: #888;
    --BD-panel-l: #444;
    --BD-input: #888;
    --BD-fieldset: #888;
    --BD-divider: #222;
    --AC-btn: #888;
    --AC-btn-text: #aaa;
}

/* Base Overrides */

body{
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--BG-base);
    color: var(--FG-base);
}

::selection {
    background-color: var(--AC-trim);
    color: var(--BG-base);
}

.div-app-version-section {
    margin-top: var(--DM-margin);
    padding-top: var(--DM-margin-h);
    border-top: 1pt solid var(--BD-panel);
}

.div-app-version-title {
    font-weight: bold;
    margin-bottom: var(--DM-margin-q);
}

.div-app-version-description {
    margin-bottom: var(--DM-margin-h);
}

.div-version-section {
    margin-bottom: var(--DM-margin);
}

.div-version-section:last-child {
    margin-bottom: 0;
}

.div-version-section ul {
    margin: var(--DM-margin-q) 0 0 0;
    padding-left: var(--DM-margin);
}

.div-version-section li {
    margin-bottom: var(--DM-margin-q);
    line-height: 1.4;
}

::-moz-selection {
    background-color: var(--AC-trim);
    color: var(--BG-base);
}

code, pre{
    display: inline-block;
    word-wrap: normal;
    white-space: pre;
    background-color: var(--BG-panel);
    padding: 0 0.2em;
}

code{
    background-color: var(--BG-panel);
}

table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    margin: var(--DM-margin-h) 0;
    box-sizing: border-box;
    border: 1px solid var(--BD-panel-l);
    background-color: var(--BG-panel);
    font-size: 0.92em;
}

table th, table td {
    padding: var(--DM-margin-q) var(--DM-margin-h);
    border: 1px solid var(--BD-panel-l);
    text-align: left;
    word-break: normal;
}

thead, table th {
    background-color: var(--BG-panel2);
    color: var(--FG-base);
    font-weight: bold;
}

table tr:nth-child(even) {
    background-color: var(--BG-base);
}

table tr:hover {
    background-color: var(--BG-panel2);
}
input, button, textarea, select{
    background-color: var(--BG-base);
    color: var(--FG-base);
    padding: var(--DM-margin-q);
    border: 1pt solid var(--BD-input);
}
select{
    width: 100%;
    box-sizing: border-box;
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
}
select, ::picker(select) {
    appearance: base-select;
    background-color: var(--BG-base);
    color: var(--FG-base);
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
    overflow-y: auto;
}

::picker(select) {
    background-color: var(--BG-panel);
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    padding: var(--DM-margin-s);
}

select:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 6px var(--BD-input);
    border-color: var(--BD-input);
}

select:focus {
    outline: 2px solid var(--BD-input);
    border-color: var(--BD-input);
}

select option, option {
    background-color: var(--BG-panel);
    color: var(--FG-base);
    padding: var(--DM-margin-q);
}

select option:hover,
select option:focus,
select option:checked,
option:hover,
option:focus,
option:checked {
    background-color: var(--BG-panel2);
    color: var(--AC-trim-dd);
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--AC-btn);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    vertical-align: middle; /* Align with text */
    margin: 0 var(--DM-margin-q) 0 0;
}

input[type="checkbox"]:checked {
    background-color: var(--AC-btn); /* Fill color when checked */
    border-color: var(--AC-btn);
}

input[type="checkbox"]:checked::after {
    font-family: "Noto Emoji", sans-serif;
    content: '✔'; /* Checkmark character */
    color: var(--BG-base); /* Color of the checkmark */
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}
button:disabled{
    opacity: 0.6;
}

button:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 6px var(--AC-btn);
}

button:focus {
    outline: 3px solid var(--AC-btn);
}

/* Libraries */

.hljs {
    background: var(--BG-panel);
    color: var(--FG-base);
    border-radius: var(--DM-margin-q);
}

.hljs-comment,
.hljs-quote {
    color: var(--FG-muted);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: var(--AC-trim-dd);
    font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: var(--AC-trim-d);
}

.hljs-string,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: var(--AC-trim);
}

.hljs-title.function_,
.hljs-function,
.hljs-type,
.hljs-built_in {
    color: var(--AC-trim-dd);
    font-weight: bold;
}

.hljs-attr,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-link {
    color: var(--AC-trim);
}

.hljs-params {
    color: var(--FG-base);
}

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-tag {
    color: var(--FG-muted);
}

.hljs-addition {
    color: var(--TX-status-success, #51cf66);
}

.hljs-deletion {
    color: var(--TX-status-error, #ff6b6b);
}

.code-block {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
}

/* Mermaid Diagrams */

.div-diagram-mermaid, .mermaid {
    width: 100%;
    margin: var(--DM-margin-h) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    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-diagram-mermaid svg, .mermaid svg, svg[id^=mermaid] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(65vh, 600px) !important;
    box-sizing: border-box;
    font-family: inherit !important;
    background-color: transparent !important;
}

/* Mermaid theme matching overrides */
svg[id^=mermaid] .node rect,
svg[id^=mermaid] .node circle,
svg[id^=mermaid] .node ellipse,
svg[id^=mermaid] .node polygon,
svg[id^=mermaid] .node path,
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node ellipse,
.mermaid svg .node polygon,
.mermaid svg .node path {
    fill: var(--BG-panel2) !important;
    stroke: var(--AC-trim) !important;
    stroke-width: 1.5px !important;
}

svg[id^=mermaid] .node .label,
svg[id^=mermaid] .node text,
svg[id^=mermaid] .node span,
svg[id^=mermaid] foreignObject span,
svg[id^=mermaid] foreignObject div,
.mermaid svg .node .label,
.mermaid svg .node text,
.mermaid svg .node span,
.mermaid svg foreignObject span,
.mermaid svg foreignObject div {
    color: var(--FG-base) !important;
    fill: var(--FG-base) !important;
    font-size: 0.9em !important;
}

svg[id^=mermaid] .cluster rect,
.mermaid svg .cluster rect {
    fill: var(--BG-base) !important;
    stroke: var(--BD-panel-l) !important;
    stroke-width: 1px !important;
    rx: 4px;
    ry: 4px;
}

svg[id^=mermaid] .cluster span,
svg[id^=mermaid] .cluster text,
.mermaid svg .cluster span,
.mermaid svg .cluster text {
    color: var(--FG-muted) !important;
    fill: var(--FG-muted) !important;
    font-weight: bold !important;
}

svg[id^=mermaid] .edgePath .path,
svg[id^=mermaid] .flowchart-link,
.mermaid svg .edgePath .path,
.mermaid svg .flowchart-link {
    stroke: var(--AC-trim) !important;
    stroke-width: 1.5px !important;
}

svg[id^=mermaid] marker path,
svg[id^=mermaid] marker,
.mermaid svg marker path,
.mermaid svg marker {
    fill: var(--AC-trim) !important;
    stroke: var(--AC-trim) !important;
}

/* Edge labels padding and styling */
svg[id^="mermaid"] .edgeLabel,
.mermaid svg .edgeLabel {
    color: var(--FG-base) !important;
    fill: var(--FG-base) !important;
}

svg[id^="mermaid"] .edgeLabel rect,
.mermaid svg .edgeLabel rect {
    fill: var(--BG-panel2) !important;
    stroke: var(--BD-panel-l) !important;
    stroke-width: 1px !important;
    rx: 4px !important;
    ry: 4px !important;
    opacity: 0.95 !important;
}

/* Reset nested elements inside edgeLabel to prevent duplicate padded boxes */
svg[id^="mermaid"] .edgeLabel span,
svg[id^="mermaid"] .edgeLabel p,
svg[id^="mermaid"] .edgeLabel div,
.mermaid svg .edgeLabel span,
.mermaid svg .edgeLabel p,
.mermaid svg .edgeLabel div {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Target central edge label container for padding and background */
svg[id^="mermaid"] .edgeLabel foreignObject > div,
.mermaid svg .edgeLabel foreignObject > div,
svg[id^="mermaid"] .edgeLabel text,
.mermaid svg .edgeLabel text {
    color: var(--FG-base) !important;
    fill: var(--FG-base) !important;
    padding: 3px 8px !important;
    display: inline-block !important;
    background-color: var(--BG-panel2) !important;
    border: 1px solid var(--BD-panel-l) !important;
    border-radius: 4px !important;
    font-size: 0.82em !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Sequence diagram styling */
svg[id^=mermaid] .actor,
.mermaid svg .actor {
    fill: var(--BG-panel2) !important;
    stroke: var(--AC-trim) !important;
}

svg[id^=mermaid] text.actor,
.mermaid svg text.actor {
    fill: var(--FG-base) !important;
    stroke: none !important;
}

svg[id^=mermaid] .actor-line,
.mermaid svg .actor-line {
    stroke: var(--BD-panel-l) !important;
}

svg[id^=mermaid] .messageLine0,
svg[id^=mermaid] .messageLine1,
.mermaid svg .messageLine0,
.mermaid svg .messageLine1 {
    stroke: var(--AC-trim) !important;
}

svg[id^=mermaid] .labelBox,
.mermaid svg .labelBox {
    fill: var(--BG-panel2) !important;
    stroke: var(--BD-panel-l) !important;
}

svg[id^=mermaid] .labelText,
svg[id^=mermaid] .loopText,
.mermaid svg .labelText,
.mermaid svg .loopText {
    fill: var(--FG-base) !important;
}

svg[id^=mermaid] .note,
.mermaid svg .note {
    fill: var(--BG-base) !important;
    stroke: var(--BD-panel-l) !important;
}

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

/* Page Structure */

.div-structure-page-container{
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

.div-structure-header{
    padding: var(--DM-margin-q) var(--DM-margin-h);
    background-color: var(--BG-panel);
    button {
        border: 1pt solid var(--AC-btn);
    }
    select {
        border: 1pt solid var(--BD-input);
    }
    button, select {
        height: 24pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 12pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-q);
        min-width: 3em;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    button {
        margin: 0 1em;
    }
    label {
        font-size: 13pt;
        margin-top: 16pt;
    }
}

.div-structure-header-inset {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.div-structure-body{
    display: grid;
    transition: grid-template-columns 0.3s ease-in-out;
}

.div-structure-left-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: var(--DM-margin) 0 var(--DM-margin) var(--DM-margin);
    min-width: 0;
    overflow: hidden;
}

.div-structure-center-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: var(--DM-margin) 0 var(--DM-margin) var(--DM-margin);
    min-width: 0;
    overflow: hidden;
}

.div-structure-right-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: var(--DM-margin);
    min-width: 0;
    overflow: hidden;
}

.div-structure-left-conversations {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
}

.div-structure-center-index {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
}

.div-structure-right-chat{
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-width: 0;
    overflow: hidden;
}

.div-structure-index-list{
    background-color: var(--BG-panel);
    padding: var(--DM-margin);
    min-width: 0;
    overflow: hidden;
}

.div-structure-center-index-list{
    background-color: var(--BG-panel);
    padding: var(--DM-margin);
    min-width: 0;
    overflow: hidden;
}

.div-structure-chat-container{
    margin: 0 var(--DM-margin) var(--DM-margin-h) var(--DM-margin);
    background-color: var(--BG-base);
    button {
        border: 1pt solid var(--AC-btn);
    }
    select {
        border: 1pt solid var(--BD-input);
    }
    button, select {
        height: 24pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 12pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-q);
        min-width: 3em;
        cursor: pointer;
    }
    z-index: 10;
}

.div-index-container-scroll{
    height: 0;
    min-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
    display: grid;
    grid-template-rows: 1fr;
    background-color: var(--BG-base);
    min-width: 0;
}

.div-center-index-container-scroll{
    height: 0;
    min-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
    display: grid;
    grid-template-rows: 1fr;
    background-color: var(--BG-base);
    min-width: 0;
}

.div-chat-container-scroll, .div-chat-context-scroll, .div-chat-memory-scroll, .div-notebook-memory-scroll, .div-chat-document-scroll, .div-chat-diction-scroll {
    height: 0;
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
    display: grid;
    grid-template-rows: 1fr auto;
    border: 1pt solid var(--BD-panel);
    scroll-behavior: smooth;
}

.div-structure-conversations-options{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-column-gap: var(--DM-margin-q);
    background-color: var(--BG-panel);
    margin: 0 0 var(--DM-margin-h) 0;
    padding: var(--DM-margin-h) var(--DM-margin);
    button, select {
        height: 18pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 9pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-q);
        min-width: 3em;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.div-structure-center-index-options, .div-structure-center-notebook-options {
    display: grid;
    grid-template-columns: auto auto auto 0.5em auto;
    grid-column-gap: var(--DM-margin-q);
    background-color: var(--BG-panel);
    margin-bottom: var(--DM-margin-h);
    padding: var(--DM-margin-h) var(--DM-margin);
    button, select {
        height: 18pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 9pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-q);
        min-width: 3em;
        cursor: pointer;
        white-space: nowrap;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

#id-div-list{
    margin: var(--DM-margin-q) 0 var(--DM-margin-q) var(--DM-margin-q);
    min-width: 0;
    overflow: hidden;
}

#id-div-center-index-list{
    margin: var(--DM-margin-q) 0 var(--DM-margin-q) var(--DM-margin-q);
    min-width: 0;
    overflow: hidden;
}

.div-structure-body-left{
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    min-width: 0;
}

.div-structure-body-center{
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    min-width: 0;
}

.div-structure-body-right{
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    min-width: 0;
}

.div-chat-title-bar{
    position: relative;
    padding: var(--DM-margin-q) var(--DM-margin) var(--DM-margin-q) var(--DM-margin);
    background-color: var(--BG-panel);
}

.div-chat-tab-bar, .div-notebook-tab-bar {
    margin: 0 var(--DM-margin);
}

.div-chat-tab-bar button, .div-notebook-tab-bar button {
    border: 1pt solid var(--BD-panel-l);
    border-bottom: none;
    border-radius: var(--DM-margin-q) var(--DM-margin-q) 0 0;
    padding: var(--DM-margin-q);
    cursor: pointer;
}

.div-chat-tab-bar button.active, .div-notebook-tab-bar button.active {
    border-color: var(--BD-panel);
    text-decoration: underline;
}

.div-chat-tab-bar button:hover, .div-notebook-tab-bar button:hover {
    box-shadow: 0 0 6px var(--BD-panel);
}

.div-chat-tab-bar button:focus, .div-notebook-tab-bar button:focus {
    outline: 3px solid var(--BD-panel);
}

.div-structure-right-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: var(--DM-margin);
    background-color: var(--BG-panel);
}

.div-chat-container{
    padding: var(--DM-margin-h);
    min-width: 0;
}

#id-div-response-title {
    max-height: 2.0em;
    overflow: hidden;
    mask-image: linear-gradient(to right, black calc(100% - 3em), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 3em), transparent 100%);
    border-bottom: 1pt solid var(--BD-panel);
    cursor: pointer;
    padding-right: 2em;
}

#id-span-subtitle-toggle {
    position: absolute;
    right: var(--DM-margin);
    top: var(--DM-margin-q);
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.0em;
    user-select: none;
}

#id-span-subtitle-toggle.rotated {
    transform: rotate(180deg);
}

#id-div-response-subtitle {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    margin-top: var(--DM-margin-q);
}

.div-chat-prompt-inset, .div-chat-context-inset, .div-chat-memory-inset {
    margin: 0 var(--DM-margin) 0 var(--DM-margin);
}

#id-prompt, .prompt-style-input {
    box-sizing: border-box;
    min-width: 100%;
    padding: var(--DM-margin-q) var(--DM-margin-h);
    margin-bottom: var(--DM-margin-q);
    font-family: sans-serif;
    line-height: 1.4em;
    min-height: 2.2em;
    resize: vertical;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
    border: 1.5pt solid var(--BD-input);
    outline: 2px solid var(--BD-input);
}

#id-prompt:focus, .prompt-style-input:focus {
    outline: 3px solid var(--BD-input);
    border-color: var(--AC-trim-dd);
}

#div-response-progress {
    margin-top: 0;
    margin-bottom: var(--DM-margin-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
        height: 18pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 9pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-s);
        min-width: 3em;
        cursor: pointer;
    }
}

.div-index-item {
    padding: var(--DM-margin-q);
    border: 1px solid var(--BD-panel-l);
    margin-bottom: var(--DM-margin-q);
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.div-index-item:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 6px var(--BD-panel);
}

.div-index-item:focus {
    outline: 3px solid var(--BD-panel);
}

.btn-new-scratchpad,
.btn-new-conversation {
    width: 100%;
    height: 18pt;
    font-size: 8pt;
    text-transform: uppercase;
    font-weight: bold;
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    padding: var(--DM-margin-q);
    cursor: pointer;
    background-color: var(--BG-panel);
    color: var(--AC-btn-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: var(--DM-margin-q);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.div-index-item-selected {
    background-color: var(--BG-panel2);
}

.hr-chat-response-divider{
    background-color: var(--BD-divider);
    border: none;
    padding: 0;
    margin: var(--DM-margin-q) 0;
}

.div-structure-footer{
    background-color: var(--BG-panel);
    padding: var(--DM-margin-q) var(--DM-margin-h);
}

.div-structure-body-v-i-c {
    grid-template-columns: 1fr 1fr 2fr 0fr;
}

.div-structure-body-v-c {
    grid-template-columns: 1fr 0fr 3fr 0fr;
}

.div-structure-body-i-c {
    grid-template-columns: 0fr 1fr 3fr 0fr;
}

.div-structure-body-c {
    grid-template-columns: 0fr 0fr 4fr 0fr;
}

.div-chat-header{
    font-size: 80%;
}

.div-chat-buttons{
    display: grid;
    grid-template-columns: 1fr 0.5em 1fr 1fr 0.5em 1fr;
    grid-column-gap: var(--DM-margin-q);
    align-items: center;
    button, select {
        height: 18pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 9pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-s);
        min-width: 3em;
        cursor: pointer;
    }
}

.div-index-item-flex {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.index-item-icon {
    font-size: 0.8em;
    padding-right: var(--DM-margin-q);
    flex-shrink: 0;
}
.index-item-checkbox-margin {
    margin-right: 8pt;
    flex-shrink: 0;
}
.index-item-text-grow {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.index-item-count {
    font-size: 0.8em;
    opacity: 0.6;
    margin-left: var(--DM-margin-q);
    flex-shrink: 0;
}
.index-item-indicator,
.index-item-spinner {
    font-size: 0.85em;
    margin-left: auto;
    margin-right: var(--DM-margin-q);
    color: var(--AC-trim);
    animation: index-pulse 1.2s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
}
.div-index-item-loading {
    border-color: var(--AC-trim);
}
@keyframes index-pulse {
    0%, 100% {
        opacity: 0.15;
    }
    50% {
        opacity: 1;
    }
}
.div-index-archive-header {
    margin: var(--DM-margin-h) var(--DM-margin-q);
}
.div-index-archive-empty {
    opacity: 0.5;
}

.div-scroll-container-inner{
    margin: var(--DM-margin-q);
}

.div-options-chips {
    margin-top: var(--DM-margin-q);
}

.div-structure-body-v-i-c .div-options-chips,
.div-structure-body-v-c .div-options-chips,
.div-structure-body-i-c .div-options-chips {
    padding-bottom: var(--DM-margin-h);
}

.div-structure-body-c .div-options-chips {
    padding-bottom: 0;
}

.span-query-chip {
    border-radius: 1em;
    padding: var(--DM-margin-s) var(--DM-margin-q);
    margin: 0 var(--DM-margin-q) 0 0;
    font-size: 80%;
    cursor: pointer;
}

.span-option-chip {
    display: inline-block;
    border: 1px solid var(--AC-btn);
    border-radius: 1em;
    padding: 0 var(--DM-margin-q);
    margin: var(--DM-margin-s) var(--DM-margin-s) 0 0;
    font-size: 80%;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

@media screen and (max-width: 780px) {
    .span-option-chip {
        font-size: 70%;
        margin: 0 1pt 0 0;
        padding: 0 var(--DM-margin-s);
    }
}

.span-clickable-query {
    text-decoration: underline;
}

.consideration-item {
    border: 1px solid var(--BD-panel-l);
    padding: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-q);
    border-radius: var(--DM-margin-q);
}

#new-topic-input,
#new-consideration-input {
    width: 100%;
    box-sizing: border-box;
    margin: var(--DM-margin-q) 0;
    padding: var(--DM-margin-q);
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
    background-color: var(--BG-base);
    color: var(--FG-base);
}

#new-topic-input:hover,
#new-consideration-input:hover {
    border-color: var(--BD-input);
}

#new-topic-input:focus,
#new-consideration-input:focus {
    outline: 2px solid var(--BD-input);
    border-color: var(--BD-input);
}

#new-consideration-input {
    min-height: 4.5em;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4em;
}

/* Styles for input fields in forms */
#id-form-admin-options input[type="text"],
#id-form-admin-options input[type="password"],
#id-form-admin-options input[type="email"],
#id-form-admin-options input[type="number"],
#id-form-config-options input[type="text"],
#id-form-config-options textarea,
#id-form-profile-options input[type="text"],
#id-form-profile-options input[type="email"],
#id-form-add-funds input[type="number"] {
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
}

.div-chat-empty {
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
    display: grid;
    grid-template-rows: auto;
    border: 1pt solid var(--BD-panel);
}

.div-chat-empty-header {
    padding: var(--DM-margin);
    background-color: var(--BG-panel);
}

.div-chat-empty-inset {
    display: grid;
    place-items: center;
    height: 80%;
    margin: var(--DM-margin);
}

.div-chat-empty-inset > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.div-chat-empty-row {
    display: flex;
    gap: var(--DM-margin-h);
    width: 100%;
    max-width: 400px;
}

.div-chat-empty-row button {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

.div-chat-empty-inset button {
    width: 100%;
    max-width: 400px;
    min-width: 40%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.div-chat-empty-inset button:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 1560px) {
    .div-structure-body-v-i-c {
        grid-template-columns: 1fr 0fr 2fr 0fr;
    }
    .div-structure-body-v-c{
        grid-template-columns: 1fr 0fr 2fr 0fr;
    }
    .div-structure-body-i-c {
        grid-template-columns: 0fr 1fr 2fr 0fr;
    }
    .div-structure-body-c {
        grid-template-columns: 0fr 0fr 3fr 0fr;
    }

    .div-structure-header button {
        margin: 0 .5em 0 0;
    }

    .div-structure-conversations-options {
        margin: 0;
        padding: var(--DM-margin-h);
    }

    .div-structure-center-index-options {
        margin: 0;
    }

    .div-structure-left-inset {
        margin: 0;
    }

    .div-structure-center-inset {
        margin: 0;
    }

    .div-structure-right-inset {
        margin: 0;
    }

    .div-structure-index-list {
        padding: 0 var(--DM-margin-h);
    }

    .div-structure-center-index-list {
        padding: 0 var(--DM-margin-h);
    }

}

@media screen and (max-width: 780px) {

    .div-structure-body-v-i-c .div-options-chips,
    .div-structure-body-v-c .div-options-chips,
    .div-structure-body-i-c .div-options-chips,
    .div-structure-body-c .div-options-chips {
        padding-bottom: 0;
    }

    .div-structure-body-v-i-c {
        grid-template-columns: 0fr 0fr 1fr 0fr;
    }
    .div-structure-body-v-c{
        grid-template-columns: 1fr 0fr 0fr 0fr;
    }
    .div-structure-body-i-c {
        grid-template-columns: 0fr 1fr 0fr 0fr;
    }
    .div-structure-body-c {
        grid-template-columns: 0fr 0fr 1fr 0fr;
    }

}

@media screen and (max-width: 499px) {
    body {
        font-size: 85%;
    }
}

/* Dialogs & Backdrop */

.div-structure-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: color-mix(in srgb, var(--FG-base) 13.3%, transparent);
    backdrop-filter: blur(3pt);
    -webkit-backdrop-filter: blur(3pt);
    display: none;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.35s ease-in-out;
}

.div-structure-dialog-backdrop.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.div-structure-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    opacity: 0;
    z-index: 25;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.div-structure-dialog-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

#id-app-options-overlay {
    z-index: 25;
}

#id-conversation-options-overlay {
    z-index: 25;
}

#id-instant-answer-overlay {
    z-index: 25;
}

#id-version-dialog-overlay {
    z-index: 30;
}

#id-config-dialog-overlay {
    z-index: 30;
}

#id-confirm-dialog-overlay {
    z-index: 40;
    align-items: center;
    justify-content: center;
}

#id-confirm-dialog-overlay.active {
    display: flex;
}

.div-structure-dialogs-container {
    display: flex;
    flex-direction: column;
    margin-left: 25%;
    margin-right: 25%;
    height: 100%;
    background-color: var(--BG-panel);
    border-left: 1pt solid var(--BD-panel);
    border-right: 1pt solid var(--BD-panel);
    box-sizing: border-box;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-8px) scale(0.99);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.div-structure-dialog-overlay.active .div-structure-dialogs-container {
    transform: translateY(0) scale(1);
}

.div-login-dialog-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    padding: var(--DM-margin);
}

.div-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--DM-margin-h) var(--DM-margin);
    border-bottom: 1pt solid var(--BD-panel);
    background-color: var(--BG-panel2);
    flex-shrink: 0;
    box-sizing: border-box;
    button {
        height: 18pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 9pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-s);
        min-width: 3em;
        cursor: pointer;
    }
}

.div-dialog-title {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--FG-base);
    margin: 0;
}

.div-dialogs-inner {
    flex: 1 1 auto;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
    padding: var(--DM-margin);
    box-sizing: border-box;
    button {
        height: 18pt;
        font-size: 8pt;
        text-transform: uppercase;
        line-height: 9pt;
        border: 1pt solid var(--AC-btn);
        border-radius: var(--DM-margin-q);
        padding: var(--DM-margin-s);
        min-width: 3em;
        cursor: pointer;
    }
}

.div-structure-dialogs-container fieldset {
    background-color: var(--BG-base);
    border: 1px solid var(--BD-fieldset);
    border-radius: 0.5em;
    padding: var(--DM-margin-h);
}

.div-structure-dialogs-container legend {
    display: block;
    width: calc( 100% + var(--DM-margin-q) + var(--DM-margin-q) + 0.5pt );
    background-color: var(--BG-panel2);
    margin: 0 calc( calc(-1 * var(--DM-margin-h)) - 1pt );
    border: 1px solid var(--BD-fieldset);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    padding: var(--DM-margin-s) var(--DM-margin-q);
}

#id-form-admin-options,
#id-form-add-funds {
    display: none;
}

@media screen and (max-width: 1560px) {
    .div-structure-dialogs-container {
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media screen and (max-width: 780px) {
    .div-structure-dialogs-container {
        margin-left: 0;
        margin-right: 0;
        border-left: none;
        border-right: none;
    }
}

.div-structure-dialogs-container form {
    margin-bottom: var(--DM-margin);
}

.div-structure-dialogs-container form button {
    height: 24pt;
    font-size: 8pt;
    text-transform: uppercase;
    line-height: 15pt;
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    padding: var(--DM-margin-q);
    min-width: 3em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.div-structure-dialogs-container form select {
    height: 24pt;
    font-size: 8pt;
    text-transform: uppercase;
    line-height: 15pt;
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
    padding: var(--DM-margin-q);
    min-width: 3em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.div-structure-dialogs-container form input[type="text"],
.div-structure-dialogs-container form input[type="password"],
.div-structure-dialogs-container form input[type="email"],
.div-structure-dialogs-container form input[type="number"],
.div-structure-dialogs-container form textarea {
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
    padding: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-h);
    box-sizing: border-box;
    min-width: 30%;
    background-color: var(--BG-base);
    color: var(--FG-base);
}

.div-structure-dialogs-container label {
    margin-bottom: var(--DM-margin-q);
    min-width: 20%;
    display: inline-block;
}

.div-structure-dialogs-container .label-options-column {
    display: block;
    font-weight: bold;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--FG-muted);
    border-bottom: 1px solid var(--BD-panel-l);
    padding-bottom: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-q);
}

.div-structure-dialogs-container select {
    margin-bottom: var(--DM-margin-h);
    background-color: var(--BG-base);
    color: var(--FG-base);
}

.div-structure-dialogs-container select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--BG-panel2);
    color: var(--FG-muted);
}

.underlined-button {
    text-decoration: underline;
}

.status-msg {
    font-size: 0.9em;
    margin-top: var(--DM-margin-q);
}

.status-msg.status-success {
    color: var(--TX-status-success);
}

.status-msg.status-error {
    color: var(--TX-status-error);
}

.div-field-explanation {
    font-size: 0.85em;
    color: var(--TX-status-error);
    margin-top: calc(-1 * var(--DM-margin-q));
    margin-bottom: var(--DM-margin-h);
    line-height: 1.35em;
}

.div-field-explanation.status-success {
    color: var(--TX-status-success);
}

.div-field-explanation.status-error {
    color: var(--TX-status-error);
}

.badge-admin {
    color: var(--TX-badge-admin);
    font-weight: bold;
}

.admin-subpanel {
    border: 1px solid var(--BD-panel-l);
    padding: var(--DM-margin-h);
    margin-bottom: var(--DM-margin-h);
    border-radius: var(--DM-margin-q);
    background-color: var(--BG-panel2);
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9em;
}

.admin-users-table th {
    padding: var(--DM-margin-q);
    border-bottom: 1px solid var(--BD-panel-l);
}

.btn-copy-config-value {
    padding: 2px 4px !important;
    min-width: unset !important;
    vertical-align: middle;
    margin-right: 6px !important;
    cursor: pointer;
    line-height: 1 !important;
}

.admin-users-table td {
    padding: var(--DM-margin-q);
    border-bottom: 1px solid var(--BD-panel-l);
}

.btn-copy-response, .btn-redo-response, .btn-delete-response, .btn-copy-scratchpad, .btn-redo-scratchpad, .btn-undo-scratchpad, .btn-delete-scratchpad {
    height: 16pt !important;
    line-height: 8pt !important;
    font-size: 7.5pt !important;
    padding: 2px 6px !important;
    vertical-align: middle;
    min-width: unset !important;
    margin: 0 !important;
}

.div-chat-response-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--DM-margin-q) 0;
}

.div-chat-response-buttons-left, .div-chat-response-buttons-right {
    display: flex;
    gap: var(--DM-margin-q);
}

.div-chat-scrathpad-buttons,
.div-chat-scratchpad-buttons {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--BG-base);
    border-bottom: 1pt solid var(--BD-divider);
    margin: calc(-1 * var(--DM-margin-h)) calc(-1 * var(--DM-margin-h)) var(--DM-margin-h) calc(-1 * var(--DM-margin-h));
    padding: var(--DM-margin-q) var(--DM-margin-h);
}

.div-thinking-content {
    opacity: 0.6;
    font-style: italic;
    margin-bottom: var(--DM-margin-h);
    padding: var(--DM-margin-q) var(--DM-margin-h);
    border-left: 2px solid var(--AC-trim);
    background-color: var(--BG-panel2);
}
.div-thinking-content p {
    margin: 0 0 var(--DM-margin-q) 0;
}
.div-thinking-text {
}
.div-thinking-line {
    margin-bottom: var(--DM-margin-s);
    line-height: 1.4em;
}
.div-thinking-tool {
    font-style: normal;
    background-color: var(--BG-panel);
    border: 1px solid var(--BD-panel-l);
    border-radius: 4px;
    padding: var(--DM-margin-s) var(--DM-margin-q);
    margin: var(--DM-margin-s) 0;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
}
.span-tool-badge {
    font-weight: 600;
    color: var(--FG-base);
    margin-right: var(--DM-margin-s);
}
.strong-tool-name {
    color: var(--FG-base);
    font-weight: 700;
}
.span-tool-params {
    font-family: monospace;
    font-size: 90%;
    color: var(--FG-muted);
}
.span-tool-param-key {
    font-weight: 600;
    color: var(--AC-trim-dd);
}
.span-tool-param-val {
    color: var(--FG-muted);
}

.bookmark-icon-active {
    opacity: 1.0;
}

.bookmark-icon-inactive {
    opacity: 0.2;
}

#id-confirm-dialog-overlay {
    align-items: center;
    justify-content: center;
}

.div-confirm-dialog-container {
    display: block;
    padding: var(--DM-margin);
    max-width: 420px;
    width: 90%;
    transform: translateY(-8px) scale(0.99);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    fieldset{
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
}

#id-confirm-dialog-overlay.active .div-confirm-dialog-container {
    transform: translateY(0) scale(1);
}

.div-confirm-dialog-container fieldset {
    background-color: var(--BG-base);
    border: 1px solid var(--BD-fieldset);
    border-radius: 0.5em;
    padding: var(--DM-margin-h);
}

.div-confirm-dialog-container legend {
    display: block;
    width: calc( 100% + var(--DM-margin-q) + var(--DM-margin-q) + 0.5pt );
    background-color: var(--BG-panel2);
    margin: 0 calc( calc(-1 * var(--DM-margin-h)) - 1pt );
    border: 1px solid var(--BD-fieldset);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    padding: var(--DM-margin-s) var(--DM-margin-q);
}

.div-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--DM-margin-h);
}

.div-confirm-buttons button {
    height: 24pt;
    font-size: 8pt;
    text-transform: uppercase;
    line-height: 15pt;
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    padding: var(--DM-margin-q);
    min-width: 5em;
    cursor: pointer;
}

.div-model-description {
    font-size: 0.88em;
    margin: var(--DM-margin-q) 0 var(--DM-margin-s) 0;
    line-height: 1.35em;
}
.div-model-warning {
    color: var(--TX-status-error);
    font-weight: bold;
    font-style: normal;
    margin-bottom: var(--DM-margin-s);
}
.div-model-desc-text {
    color: var(--FG-muted);
    font-style: italic;
}
.div-model-costs {
    margin: 0 0 var(--DM-margin-h) 0;
}
.table-model-costs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
    margin-top: var(--DM-margin-q);
}
.table-model-costs th, .table-model-costs td {
    padding: var(--DM-margin-s) var(--DM-margin-q);
    border: 1px solid var(--BD-panel);
    text-align: left;
}
.table-model-costs th {
    background-color: var(--BG-panel2);
    font-weight: bold;
}
.table-model-costs tbody tr {
    cursor: pointer;
}
.table-model-costs tr.selected-row,
.table-model-costs tr.selected-row td {
    background-color: var(--BG-panel2);
}
.table-model-costs td.cost-tokens {
    color: var(--FG-muted);
    font-size: 0.9em;
}
.table-model-costs tr.selected-row td.cost-tokens {
    color: var(--FG-base);
}
.table-model-costs td.cost-val {
    text-align: right;
    font-family: monospace;
}
.div-cost-summary-container {
    container-type: inline-size;
    width: 100%;
}
.table-cost-summary {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.78em;
    margin-top: var(--DM-margin-q);
    margin-bottom: var(--DM-margin-q);
    border: 1px solid var(--BD-panel-l);
    opacity: 0.85;
}
.table-cost-summary th,
.table-cost-summary td {
    padding: 2px 6px;
    border: 1px solid var(--BD-panel-l);
    font-size: 8pt;
    line-height: 1.3;
}
.table-cost-summary th {
    background-color: var(--BG-panel2);
    font-weight: bold;
    text-align: right;
    color: var(--FG-base);
}
.table-cost-summary th:first-child {
    text-align: left;
}
.table-cost-summary td {
    text-align: right;
    font-family: monospace;
}
.table-cost-summary td:first-child {
    text-align: left;
    font-family: inherit;
    font-weight: 500;
}
.table-cost-summary .tr-cost-secondary-row {
    display: none;
}
.table-cost-summary .tr-cost-secondary-row td {
    padding: 0;
    text-align: left;
    font-family: inherit;
}
.table-cost-summary .div-cost-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
}
.table-cost-summary .div-cost-secondary-cell {
    padding: 2px 6px;
    border-right: 1px solid var(--BD-panel-l);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    font-size: 8pt;
    line-height: 1.3;
    min-width: 0;
}
.table-cost-summary .div-cost-secondary-cell:last-child {
    border-right: none;
}
.table-cost-summary .span-cost-metric-label {
    font-family: inherit;
    font-weight: bold;
    color: var(--FG-base);
    margin-right: var(--DM-margin-s);
    white-space: nowrap;
}
.table-cost-summary .span-cost-metric-val {
    font-family: monospace;
    text-align: right;
    white-space: nowrap;
}
.table-cost-summary .tr-cost-tools td {
    text-align: left;
    font-family: inherit;
    font-style: italic;
    opacity: 0.9;
    padding-top: 3px;
    padding-bottom: 3px;
}
@container (max-width: 624px) {
    .table-cost-summary .th-cost-secondary,
    .table-cost-summary .td-cost-secondary {
        display: none;
    }
    .table-cost-summary .tr-cost-secondary-row {
        display: table-row;
    }
}
.div-utility-cost-display {
    width: 100%;
    box-sizing: border-box;
    height: 24pt;
    margin-bottom: var(--DM-margin-h);
    padding: 0 var(--DM-margin-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1pt solid var(--BD-panel);
    border-radius: var(--DM-margin-q);
    background-color: var(--BG-panel2);
    color: var(--FG-base);
}
.div-utility-cost-display .span-utility-cost-label {
    color: var(--FG-muted);
    font-size: 8pt;
    text-transform: uppercase;
    white-space: nowrap;
}
.div-utility-cost-display .span-utility-cost-val {
    font-family: monospace;
    font-size: 8.5pt;
    font-weight: bold;
    color: var(--FG-base);
    text-align: right;
    white-space: nowrap;
    margin-left: auto;
}

/* Conversation Area Link Styles */
.div-chat-container-scroll a,
.div-chat-container-scroll a:link,
.div-chat-container-scroll a:visited,
.div-chat-document-scroll a,
.div-chat-document-scroll a:link,
.div-chat-document-scroll a:visited,
#id-div-response-render a,
#id-div-response-render a:link,
#id-div-response-render a:visited,
.div-response-content a,
.div-response-content a:link,
.div-response-content a:visited {
    color: var(--TX-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.div-chat-container-scroll a:hover,
.div-chat-container-scroll a:active,
.div-chat-context-scroll a:hover,
.div-chat-document-scroll a:hover,
.div-chat-document-scroll a:active,
#id-div-response-render a:hover,
#id-div-response-render a:active,
.div-response-content a:hover,
.div-response-content a:active {
    color: var(--FG-base);
    text-decoration: underline;
}

/* Instant Answer Modal & Header Button */
#id-btn-instant-answer {
    margin: 0;
    min-width: 24pt;
    padding: 0 4px;
    font-size: 11pt;
    line-height: 22pt;
}

#id-instant-answer-query {
    font-family: sans-serif;
    line-height: 1.4em;
    min-height: 24pt;
    box-sizing: border-box;
    border: 1pt solid var(--BD-input);
    border-radius: var(--DM-margin-q);
    background-color: var(--BG-base);
    color: var(--FG-base);
}

#id-instant-answer-query:hover {
    border-color: var(--BD-input);
}

#id-instant-answer-query:focus {
    outline: 2px solid var(--BD-input);
    border-color: var(--BD-input);
}

#btn-instant-answer-send {
    height: auto;
    min-width: 5em;
}

.instant-answer-response-container {
    margin-top: var(--DM-margin-h);
    padding: var(--DM-margin-h);
    border: 1px solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    background-color: var(--BG-panel2);
    color: var(--FG-base);
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.instant-answer-response-content {
    line-height: 1.5;
    word-break: break-word;
    overflow-x: auto;
    max-width: 100%;
}

.instant-answer-response-content p:first-child {
    margin-top: 0;
}

.instant-answer-response-content p:last-child {
    margin-bottom: 0;
}

.instant-answer-thoughts {
    margin-bottom: 0.75em;
    font-size: 0.85em;
    opacity: 0.85;
}

.instant-answer-thoughts summary {
    cursor: pointer;
    font-style: italic;
    user-select: none;
}

.instant-answer-thoughts-content {
    margin-top: 0.25em;
    padding-left: 0.5em;
    border-left: 2px solid var(--AC-trim);
    overflow-x: auto;
}

.instant-answer-thoughts-content.streaming {
    max-height: 33vh;
    overflow-y: auto;
}

.instant-answer-thought-line {
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.instant-answer-body {
    overflow-x: auto;
    max-width: 100%;
}

.instant-answer-cost-container {
    margin-top: var(--DM-margin-q);
}

.instant-answer-cost-container p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.3;
}

/* User Profile Session Expiration Link */
.profile-session-expiration-link {
    color: var(--TX-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: 8.5pt;
    user-select: none;
    line-height: 1.2;
}

.profile-session-expiration-link:hover,
.profile-session-expiration-link:active {
    color: var(--FG-base);
}

/* View Transitions */
html.theme-transitioning::view-transition-old(root),
html.theme-transitioning::view-transition-new(root) {
    animation-duration: 700ms;
}


.instant-answer-body table,
.instant-answer-response-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: var(--DM-margin-q) 0;
    box-sizing: border-box;
    font-size: 0.88em;
}

.instant-answer-body table th,
.instant-answer-body table td,
.instant-answer-response-content table th,
.instant-answer-response-content table td {
    padding: 4px 8px;
}


/* Constrain Instant Answer form fieldset and code blocks to internal horizontal scrolling */
#id-form-instant-answer fieldset {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.instant-answer-response-container,
.instant-answer-response-content,
.instant-answer-body {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.instant-answer-response-content pre,
.instant-answer-body pre,
.instant-answer-response-content .code-block,
.instant-answer-body .code-block {
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
}


/* Inline and block code styling for Instant Answers */
.instant-answer-response-content code,
.instant-answer-body code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.88em;
    background-color: var(--BG-panel);
    color: var(--AC-trim);
    border: 1px solid var(--BD-panel-l);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 2px;
    display: inline;
    word-break: break-word;
    white-space: pre-wrap;
}

.instant-answer-response-content pre,
.instant-answer-body pre,
.instant-answer-response-content .code-block,
.instant-answer-body .code-block {
    display: block;
    max-width: 100%;
    margin: var(--DM-margin-h) 0;
    padding: var(--DM-margin-h);
    background-color: var(--BG-panel);
    color: var(--FG-base);
    border: 1px solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.88em;
    line-height: 1.45;
    white-space: pre;
    word-wrap: normal;
    overflow-x: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--BG-panel) var(--BG-base);
}

.instant-answer-response-content pre code,
.instant-answer-body pre code,
.instant-answer-response-content .code-block code,
.instant-answer-body .code-block code {
    display: block;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit;
    font-size: inherit;
    white-space: pre;
    border-radius: 0;
}