tinai

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

/* Core stylesheet: theme variables, SimpleBar management, element defaults
   (body, forms, tables, checkboxes), and syntax-highlighting themes.
   Shared primitives and feature styles live in separate files loaded after
   this one, in cascade order:
   shared.css, layout.css, index-lists.css, conversation.css, dialogs.css,
   settings.css, mermaid.css, overlays.css, instant-answer.css, choices.css,
   document.css, scratchpad.css

Conventions:
- One class, one owner: a component's base styles live in a single file;
  other files style it only through their own modifier/role classes
  (.scroll-fill, .scroll-stick, .scroll-main, .input-range-themed,
  .btn-compact, feature modifier classes).
- State and layout-context styling stays descendant-based (panel-state
  classes, .side-drawer-active, :has rules) and carries an ownership
  comment pointing at the file that owns the base component.
- Role classes are flat, single-class selectors so specificity stays low;
  when an override must beat a contextual rule, use an element+class
  selector and rely on file order, or an id scope — not !important. */

/* 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;
    --BG-header: color-mix(in srgb, var(--AC-trim) 35%, var(--BG-panel2));

    /* Accent tints over transparency, used for highlights, drag targets and
       glass panels: named once here so features stay in step when the trim
       or intensity ramps change. */
    --AC-trim-tint-faint: var(--AC-trim-tint-faint);
    --AC-trim-tint-soft: var(--AC-trim-tint-soft);
    --AC-trim-tint-mild: var(--AC-trim-tint-mild);
    --AC-trim-tint-strong: var(--AC-trim-tint-strong);
    --AC-trim-tint-heavy: color-mix(in srgb, var(--AC-trim) 45%, transparent);

    /* Hairline border color for subdued section dividers inside panels. */
    --BD-panel-hairline: var(--BD-panel-hairline);
}

/* SimpleBar (util/scrollbars.js): color scrollbars with theme variables so
   they follow the active theme. Vertical tracks are always visible so the
   layout width stays consistent; horizontal tracks appear only on overflow
   (via :has on the thumb). x-only containers (sb-x) scroll sideways only. */
/* SimpleBar-core derives each axis from the host's computed overflow
   (overflow: hidden disables the axis) and constrains flex/grid hosts by it,
   so managed hosts scroll natively but render no native scrollbar: no gutter
   is reserved and the custom track stays flush with the frame. !important
   beats the native scrollbar styling below, which applies to the containers
   that are deliberately not managed. */
[data-simplebar] {
	overflow-y: scroll;
	scrollbar-width: none !important;
}

.simplebar-track.simplebar-vertical {
	pointer-events: auto;
	visibility: visible !important;
	width: 10px;
	background: var(--BG-panel2);
	border: 1pt solid var(--BD-panel-l);
	border-radius: 2px;
	box-sizing: border-box;
}

.simplebar-track.simplebar-horizontal:has(.simplebar-scrollbar.simplebar-visible) {
	pointer-events: auto;
	height: 10px;
	background: var(--BG-panel2);
	border: 1pt solid var(--BD-panel-l);
	border-radius: 2px;
	box-sizing: border-box;
}

.simplebar-track .simplebar-scrollbar:before {
	background: var(--BG-panel);
	border: 1pt solid var(--BD-input);
	border-radius: 2px;
}

.simplebar-track .simplebar-scrollbar.simplebar-visible:before {
	opacity: 1;
	transition: none;
}

.simplebar-track .simplebar-scrollbar.simplebar-hover:before,
[data-simplebar].simplebar-dragging .simplebar-scrollbar:before {
	background: color-mix(in srgb, var(--AC-trim) 30%, var(--BG-panel));
}

/* Scrolling stops at managed scrollers: no chaining into ancestors and no
   browser overscroll effects when a scroll hits the top/bottom. The gutter
   keeps content out from under the always-visible vertical track. */
[data-simplebar] .simplebar-content-wrapper {
	overscroll-behavior: contain;
	padding-right: calc(10px + var(--DM-margin-q));
}

/* x-only containers: no vertical track or gutter, and bottom room for the
   need-based horizontal track */
.sb-x .simplebar-track.simplebar-vertical {
	display: none;
}

.sb-x .simplebar-content-wrapper {
	overscroll-behavior: auto;
	padding-right: 0;
	padding-bottom: calc(10px + var(--DM-margin-q));
}

/* Main columns: the track sits flush against the frame edge, so suppress
   its right border there. The floating drawer keeps its full border. */
/* scroll-main: main-column hosts sit flush against the frame edge, so the
   vertical track suppresses its right border there. Floating drawers keep
   their full border. */
.scroll-main .simplebar-track.simplebar-vertical {
	border-right: none;
}

/* SimpleBar's float clearfix would become grid items in the managed
   bottom-stick grids (grid-template-rows: 1fr auto), shifting the rows */
.simplebar-content:before,
.simplebar-content:after {
	content: none;
}

/* Native scrollbar styling for the containers deliberately not managed by
   SimpleBar (code blocks, diagrams, textareas, dialogs, streaming text) */
:is(.code-block,
	.div-diagram-mermaid, .mermaid,
	#id-prompt, .prompt-style-input,
	.div-plugin-dialog-container,
	.div-thinking-content.thinking-streaming .div-thinking-text,
	.instant-answer-thoughts-content,
	.instant-answer-response-content pre, .instant-answer-body pre,
	.instant-answer-response-content .code-block, .instant-answer-body .code-block) {
	scrollbar-width: thin;
	scrollbar-color: var(--BG-panel) var(--BG-base);
}

/* Textareas cannot be SimpleBar-managed: paint their native scroller with
   the SimpleBar track and thumb colors via the WebKit pseudo elements
   (Chromium); Firefox uses the standard properties above */
textarea {
	scrollbar-width: thin;
	scrollbar-color: var(--BG-panel) var(--BG-panel2);
}

textarea::-webkit-scrollbar {
	width: 10px;
}

textarea::-webkit-scrollbar-track {
	background: var(--BG-panel2);
	border: 1pt solid var(--BD-panel-l);
	border-radius: 2px;
	box-sizing: border-box;
}

textarea::-webkit-scrollbar-thumb {
	background: var(--BG-panel);
	border: 1pt solid var(--BD-input);
	border-radius: 2px;
}

/* 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);
}


::-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-header);
    color: var(--FG-base);
    font-weight: bold;
}

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

/* Row states, most to least subdued: hover (panel2), selected (mild accent tint), header (strong accent tint) */
table tr:hover {
    background-color: var(--BG-panel2);
}

table tr.selected-row,
table tr.selected-row td {
    background-color: color-mix(in srgb, var(--AC-trim) 20%, 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;
}

input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled + label {
    opacity: 0.5;
    cursor: default;
}

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

/* YAML: keys pop, values stay neutral, structure tokens stay quiet */
.language-yaml .hljs-attr {
    color: var(--AC-trim-dd);
    font-weight: bold;
}
.language-yaml .hljs-string {
    color: var(--FG-base);
}
.language-yaml .hljs-bullet {
    color: var(--AC-trim-dd);
}
.language-yaml .hljs-meta,
.language-yaml .hljs-type {
    color: var(--AC-trim-d);
}

.code-block {
    display: block;
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}

.div-scroll-container-inner{
    margin: var(--DM-margin-q);
}
@media screen and (max-width: 499px) {
    body {
        font-size: 85%;
    }
}
/* View Transitions */
html.theme-transitioning::view-transition-old(root),
html.theme-transitioning::view-transition-new(root) {
    animation-duration: 700ms;
}