tinai

/* Shared primitives: prompt inputs, response dividers, utility classes, status messages, thinking blocks and interactive input UI, range sliders, notifications, model/cost tables, and the shared side-drawer chrome. Used across features. */
.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;
    max-height: 25vh;
    overflow-y: auto;
    resize: vertical;
    border: 1.5pt solid var(--BD-input);
    outline: 2px solid var(--BD-input);
    border-radius: 0.25em;
}

#id-prompt:focus, .prompt-style-input:focus {
    outline: 3px solid var(--BD-input);
    border-color: var(--AC-trim-dd);
}
.hr-chat-response-divider{
    background-color: var(--BD-divider);
    border: none;
    padding: 0;
    margin: var(--DM-margin-q) 0;
}
.underlined-button {
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

.span-nav-close {
    font-size: 70%;
}

.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);
}

.span-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);
}
.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-content.thinking-streaming .div-thinking-text {
    max-height: 33vh;
    overflow-y: auto;
}
.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);
}
.div-thinking-flagged {
    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-thinking-flag-badge {
    font-weight: 600;
    color: var(--AC-trim-dd);
    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);
}
.div-input-request {
    background-color: var(--BG-panel2);
}
.span-input-request-prompt {
    color: var(--FG-base);
    margin-left: var(--DM-margin-s);
}
.div-input-request-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--DM-margin-s);
    margin-top: var(--DM-margin-s);
}
.btn-input-request-option {
    border: 1px solid var(--BD-panel-l);
    border-radius: 4px;
    background-color: var(--BG-panel);
    color: var(--FG-base);
    padding: var(--DM-margin-s) var(--DM-margin-q);
    cursor: pointer;
}
.btn-input-request-option:hover:not(:disabled) {
    background-color: var(--BG-panel2);
}
.btn-input-request-option:disabled {
    opacity: 0.5;
    cursor: default;
}
.span-input-request-countdown {
    font-size: 90%;
    color: var(--FG-muted);
}
/* Themed range sliders (app settings and plugin dialogs): track, fill, and
   thumb use theme variables. The fill percentage is set as --range-fill by
   update_range_fill() for the WebKit gradient; Firefox paints the fill with
   -moz-range-progress. */
.input-range-themed {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    --range-fill: 0%;
}
.input-range-themed::-webkit-slider-runnable-track {
    height: 4pt;
    border: 1pt solid var(--BD-input);
    border-radius: 1em;
    background: linear-gradient(to right, var(--AC-btn) var(--range-fill), var(--BG-panel2) var(--range-fill));
}
.input-range-themed::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 9pt;
    height: 9pt;
    border: 1pt solid var(--AC-btn);
    border-radius: 50%;
    background: var(--AC-trim);
    margin-top: -2.5pt;
}
.input-range-themed::-moz-range-track {
    height: 4pt;
    border: 1pt solid var(--BD-input);
    border-radius: 1em;
    background: var(--BG-panel2);
}
.input-range-themed::-moz-range-progress {
    height: 4pt;
    border-radius: 1em;
    background: var(--AC-btn);
}
.input-range-themed::-moz-range-thumb {
    width: 9pt;
    height: 9pt;
    border: 1pt solid var(--AC-btn);
    border-radius: 50%;
    background: var(--AC-trim);
}
.div-notification-stack {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--DM-margin-q);
    z-index: 6000;
    pointer-events: none;
}
.div-notification-item {
    background-color: var(--BG-panel2);
    border: 1px solid var(--AC-btn);
    color: var(--FG-base);
    padding: var(--DM-margin-q) var(--DM-margin-h);
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    animation: notification-fade-in 0.2s ease-out;
}
.div-notification-item.is-fading-out {
    animation: notification-fade-out 0.2s ease-in forwards;
}
@keyframes notification-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes notification-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.span-footer-bell[hidden] {
    display: none;
}
.div-model-description,
.div-verbosity-description {
    font-size: 0.88em;
    margin: 0 0 var(--DM-margin-s) 0;
    line-height: 1.35em;
}
.div-verbosity-description {
    color: var(--FG-muted);
    font-style: italic;
}
.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 tbody tr {
    cursor: pointer;
}
/* Row states, most to least subdued: hover (panel2), selected (mild accent tint), header (strong accent tint) */
.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: color-mix(in srgb, var(--AC-trim) 35%, 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;
}
.span-cost-label-short {
    display: none;
}
@media screen and (max-width: 468px) {
    .span-cost-label-full {
        display: none;
    }
    .span-cost-label-short {
        display: inline;
    }
}
.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;
}
/* Shared slide-in drawer for editing surfaces (see util/side-drawer.js).
   The hosting container carries side-drawer-active while the drawer is
   visible: it becomes the positioning parent and reserves the grip track
   on the left of its content; pinning keeps the drawer docked open. */
.div-side-drawer {
    --side-drawer-grip-size: 12pt;
    position: absolute;
    /* mirror the bottom inset so the drawer floats evenly at both ends */
    top: var(--DM-margin-q);
    left: 0;
    bottom: var(--DM-margin-q);
    z-index: 11;
    box-sizing: border-box;
    width: var(--side-drawer-width, 40%);
    min-width: 19em;
    display: flex;
    flex-direction: column;
    gap: var(--DM-margin-h);
    padding: var(--DM-margin-q);
    padding-right: calc(var(--side-drawer-grip-size) + var(--DM-margin-q));
    background-color: color-mix(in srgb, var(--BG-panel) 55%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1pt solid var(--BD-panel-l);
    border-left: none;
    border-radius: 0 var(--side-drawer-grip-size) var(--side-drawer-grip-size) 0;
    transform: translateX(calc(-100% + var(--side-drawer-grip-size)));
    transition: transform 0.25s ease-out;
}

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

.div-side-drawer-pin {
    position: absolute;
    top: var(--DM-margin-q);
    right: calc(var(--side-drawer-grip-size) + var(--DM-margin-q));
    z-index: 3;
    cursor: pointer;
    border: none;
    border-left: 1pt solid var(--BD-panel-l);
    border-bottom: 1pt solid var(--BD-panel-l);
    background-color: var(--BG-panel);
    padding: 2px var(--DM-margin-q);
    line-height: 1.2;
    font-size: 8pt;
}

/* Pinned: stays docked open as an overlay beneath the surface's sticky
   header (the top offset is applied by util/side-drawer.js); squared
   corners mark it as pinned */
.div-side-drawer.pinned {
    transform: none;
    border-radius: 0;
}

.div-side-drawer.pinned .div-side-drawer-grip {
    border-radius: 0;
}

.div-side-drawer-grip {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--side-drawer-grip-size);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-left: 1pt solid var(--BD-panel-l);
    border-radius: 0 var(--side-drawer-grip-size) var(--side-drawer-grip-size) 0;
    background-color: color-mix(in srgb, var(--BG-panel) 30%, transparent);
}

.div-side-drawer-grip:hover {
    background-color: var(--BG-panel2);
    box-shadow: 0 0 6px var(--BD-panel);
}

.div-side-drawer-grip:hover .span-side-drawer-gripper {
    opacity: 1;
}

.div-side-drawer.empty .div-side-drawer-grip {
    opacity: 0.4;
}

.div-side-drawer.empty:not(.side-open) .div-side-drawer-grip {
    cursor: default;
}

.div-side-drawer.empty .div-side-drawer-grip:hover {
    background-color: color-mix(in srgb, var(--BG-panel) 30%, transparent);
    box-shadow: none;
}

.div-side-drawer.empty .div-side-drawer-grip:hover .span-side-drawer-gripper {
    opacity: 0.6;
}

.div-side-drawer-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}


/* Editor surfaces hosting a thinking panel: the drawer variables every
   host declares, the body flex layout the three editors share, and the
   pinned docking of the thinking drawers (.div-document-thinking in
   document.css, .div-choices-thinking in choices.css, .div-notes-thinking
   in notes.css, #id-code-overlay-thinking in overlays.css). Editors keep
   only their differing padding/release rules. */
.div-document-body,
.div-choices-body,
.div-notes-body,
.div-structure-chat-container.side-drawer-active {
    --side-drawer-grip-size: 12pt;
    --side-drawer-width: max(40%, 19em);
}

.div-document-body,
.div-choices-body,
.div-notes-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

@media screen and (min-width: 1561px) {
    .div-document-body,
    .div-choices-body,
    .div-notes-body,
    .div-structure-chat-container.side-drawer-active {
        --side-drawer-width: max(30%, 19em);
    }
}

.div-document-thinking,
.div-choices-thinking,
.div-notes-thinking {
    z-index: 2;
}

.div-document-thinking.pinned,
.div-choices-thinking.pinned,
.div-notes-thinking.pinned {
    position: static;
    order: -1;
    flex: 0 0 var(--side-drawer-width);
    width: auto;
    align-self: stretch;
    bottom: auto;
}

.div-document-thinking.pinned:not(.side-open),
.div-choices-thinking.pinned:not(.side-open),
.div-notes-thinking.pinned:not(.side-open) {
    flex-basis: var(--side-drawer-grip-size);
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.div-document-thinking.pinned:not(.side-open) .div-side-drawer-content,
.div-choices-thinking.pinned:not(.side-open) .div-side-drawer-content,
.div-notes-thinking.pinned:not(.side-open) .div-side-drawer-content,
.div-document-thinking.pinned:not(.side-open) .div-document-thinking-nav,
.div-choices-thinking.pinned:not(.side-open) .div-document-thinking-nav,
.div-notes-thinking.pinned:not(.side-open) .div-document-thinking-nav {
    display: none;
}

/* Let the thinking block fill the panel instead of the instant-answer 33vh
   streaming cap, in the editors' drawers and the code overlay's column. */
.div-document-thinking .instant-answer-thoughts-content,
.div-choices-thinking .instant-answer-thoughts-content,
.div-notes-thinking .instant-answer-thoughts-content,
#id-code-overlay-thinking .instant-answer-thoughts-content {
    max-height: none;
}