tinai

/* Conversation area: response rendering chrome, tab bar, prompt buttons, option chips, empty state, response toolbars, and conversation links. */
.div-attachments-split {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: var(--DM-margin);
    gap: var(--DM-margin);
    box-sizing: border-box;
}

.div-attachments-conversation {
    flex: 0 0 auto;
}

.div-attachments-global {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.div-attachments-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--DM-margin-q);
    justify-content: flex-end;
}

.div-attachment-row {
    display: flex;
    align-items: center;
    gap: var(--DM-margin-q);
    padding: 2pt 0;
}

.span-attachment-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.span-attachment-size {
    flex: 0 0 auto;
    opacity: 0.7;
    font-size: 0.9em;
}

.p-attachments-empty {
    opacity: 0.6;
}
.div-chat-title-bar{
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--DM-margin-s);
    padding: var(--DM-margin-q) var(--DM-margin) var(--DM-margin-q) var(--DM-margin);
    background-color: var(--BG-panel);
}

/* Pencil button and title share one underline that fades out to the right. */
.div-chat-title-inner {
    display: flex;
    align-items: center;
    gap: var(--DM-margin-s);
    flex: 1;
    min-width: 0;
    border-bottom: 1pt solid var(--BD-panel);
    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%);
}

#id-div-response-title h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Title edit dialog: the pencil button beside the title and the text entry
   with the magic wand that fills it with a generated title. */
.btn-title-edit {
    height: 14pt;
    line-height: 14pt;
    padding: 0 2pt;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.5;
    flex: 0 0 auto;
}

.btn-title-edit:hover {
    opacity: 1;
    /* background highlight instead of the global button hover glow, which
       the title underline's fade mask cuts off */
    background-color: var(--BG-panel2);
    box-shadow: none;
    filter: none;
}

.div-title-dialog-row {
    display: flex;
    align-items: stretch;
    gap: var(--DM-margin-q);
}

.div-title-dialog-row input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* The magic wand stretches to the text entry's height and gets the rounded
   buttons styling used across the dialogs. */
.div-title-dialog-row button {
    border: 1pt solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    padding: 0 var(--DM-margin-q);
    cursor: pointer;
}

.div-tab-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 var(--DM-margin);
}

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

/* Icon actions next to the sync switch: regular buttons, not tabs, sized
   to the tab row height so the bar keeps a single line */
.div-tab-bar button.btn-tab-action {
    border-bottom: 1pt solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    padding: 0 0.3em;
    margin-left: 0.35em;
    position: relative;
}

/* Share status dot (util/share.js): success while the conversation matches
   its shared copy, alert once it changed; hidden while not shared. */
.span-share-dot {
    display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
}

.btn-tab-action.btn-share-updated .span-share-dot {
    display: block;
    background-color: var(--TX-status-success);
}

.btn-tab-action.btn-share-outdated .span-share-dot {
    display: block;
    background-color: var(--TX-status-error);
}

.btn-tab-action svg {
    width: 1.15em;
    height: 1.15em;
    display: block;
    fill: currentColor;
}

.label-sync-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: auto;
    cursor: pointer;
}

.label-sync-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
}

.span-sync-switch {
    display: inline-block;
    width: 2.1em;
    height: 1.1em;
    border: 1px solid var(--BD-panel-l);
    border-radius: 1em;
    background: var(--BG-panel);
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.span-sync-switch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.15em;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: var(--FG-muted);
    transform: translateY(-50%);
    transition: left 0.15s ease, background 0.15s ease;
}

.label-sync-switch input:checked + .span-sync-switch {
    background: var(--AC-trim);
    border-color: var(--AC-trim);
}

.label-read-option input:checked + .span-sync-switch {
    background: var(--AC-btn);
    border-color: var(--AC-btn);
}

.label-read-option input:checked + .span-sync-switch::after {
    background: var(--BG-base);
}

.label-sync-switch input:checked + .span-sync-switch::after {
    left: calc(100% - 0.95em);
    background: var(--BG-base);
}

.label-sync-switch:has(input:focus-visible) .span-sync-switch {
    outline: 2px solid var(--AC-btn);
    outline-offset: 2px;
}

.span-title-sync {
    margin-left: 0.3em;
}

.span-title-sync.is-syncing {
    opacity: 0.35;
}

#btn-send.sending-sync::after {
    content: ' \2601\FE0E';
}

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

.div-tab-bar button:not(.active) {
    background-color: var(--BG-panel);
}

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

.div-tab-bar button:focus {
    outline: none;
}

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

#id-div-response-title {
    flex: 1;
    min-width: 0;
    padding-right: 2em;
}

#id-span-title-loading {
    position: absolute;
    right: var(--DM-margin);
    top: var(--DM-margin-q);
    height: 2.0em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
#div-response-progress {
    margin-top: 0;
    margin-bottom: var(--DM-margin-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .span-progress-tokens {
        flex: 1;
        margin: 0 8px;
        overflow: hidden;
        white-space: nowrap;
    }
    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-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;
    &.scratchpad-buttons {
        grid-template-columns: 1fr 0.5em 1fr 1fr 1fr 0.5em 1fr;
    }
    &.ranking-buttons {
        grid-template-columns: 1fr 0.5em 1fr 1fr 0.5em 1fr 1fr;
    }
    &.document-buttons {
        display: flex;
        gap: var(--DM-margin-h);
        align-items: center;
        .div-prompt-buttons-group {
            display: contents;
        }
        .div-prompt-buttons-group > div {
            display: none;
        }
        button, select {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }
    }
    /* the flex display is required for base-select to paint its picker icon
       (a non-important display is ignored), so hiding goes through a class
       that out-specifies this !important instead of an inline style */
    select.div-document-export {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: var(--DM-margin-q);
    }
    select.div-document-export::picker-icon {
        margin-inline-start: 0.25em;
    }
    select.div-document-export.export-hidden {
        display: none !important;
    }
    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-prompt-buttons-group {
    display: contents;
}

.btn-read-dim {
    opacity: 0.5;
}

/* Highlights the action button (Rank / Send) a query chip targets */
.btn-action-highlight {
    border-color: var(--AC-trim) !important;
    box-shadow: 0 0 6px var(--AC-trim) !important;
}

.label-read-option {
    margin-left: 0;
    gap: 0.3em;
    font-size: 7.5pt;
    height: 16pt;
    padding: 2px 6px;
    background: var(--BG-base);
    border: 1px solid var(--AC-btn);
    border-radius: var(--DM-margin-q);
    box-sizing: border-box;
}

.response-reading {
    background-color: var(--AC-trim-tint-soft);
}
.span-read-loading {
    margin: 0;
    font-size: 8pt;
    align-self: center;
    color: var(--AC-btn);
}
/* Horizontal margins match the prompt inset so the chips align with the
   prompt box; the layout-state rules below adjust the bottom spacing. */
.div-options-chips {
    margin: var(--DM-margin-q) var(--DM-margin) 0 var(--DM-margin);
}

/* Layout-state context overrides: the panel-state classes belong to
   layout.css; these adjust conversation chrome per state. */
.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;
    margin-left: calc(var(--DM-margin) / 2);
    margin-right: calc(var(--DM-margin) / 2);
}

.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;
}
.div-chat-empty {
    min-height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 1fr;
}

.div-chat-empty .simplebar-content {
    display: grid;
    grid-template-rows: auto;
    min-height: 100%;
}

/* Keep the track inside the container's rounded frame instead of touching
   its edges. */
.div-chat-empty .simplebar-track.simplebar-vertical {
    top: var(--DM-margin-q);
    bottom: var(--DM-margin-q);
    right: var(--DM-margin-q);
}
.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, .div-chat-empty-row select {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

.div-chat-empty-row select {
    /* !important required: Chromium base-select ignores the flex display on first paint otherwise */
    display: flex !important;
    align-items: center;
}

.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;
}
/* Compact response toolbar buttons (chat and scratchpad responses carry the
   btn-compact class). The element+class selector ties with the ancestor
   .div-structure-chat-container button sizing and wins on file order. */
button.btn-compact {
    height: 16pt;
    line-height: 8pt;
    font-size: 7.5pt;
    padding: 2px 6px;
    vertical-align: middle;
    min-width: unset;
    margin: 0;
}

.div-chat-response-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--DM-margin-q);
    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-response-buttons-right {
    margin-left: auto;
}

.div-chat-read-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--DM-margin-q);
}

.span-read-cost {
    font-size: 0.75em;
    white-space: nowrap;
    align-self: center;
}

/* Measurement helper: force one row so the fit test can detect overflow */
.div-chat-response-buttons.wrap-check {
    flex-wrap: nowrap;
}

.div-chat-response-buttons.wrap-check > div {
    flex-shrink: 0;
}

/* Wrapped: copy with redo/undo/delete on the first row, audio controls on
   the second (see ChatRenderer._bind_response_toolbar_wrap) */
.div-chat-response-buttons.wrapped {
    align-items: flex-start;
}

.div-chat-response-buttons.wrapped .div-chat-read-controls {
    order: 1;
    flex-basis: 100%;
}

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

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

    .div-chat-response-buttons {
        align-items: flex-start;
    }

    .div-chat-read-controls {
        order: 1;
        flex-basis: 100%;
    }

}
/* Conversation Area Link Styles: contextual link theming for the
   conversation surfaces (containers owned by layout.css, overlays by
   overlays.css) */
.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,
#id-table-overlay-view a,
#id-table-overlay-view a:link,
#id-table-overlay-view a:visited,
#id-table-overlay-title a,
#id-table-overlay-title a:link,
#id-table-overlay-title 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,
#id-table-overlay-view a:hover,
#id-table-overlay-view a:active,
#id-table-overlay-title a:hover,
#id-table-overlay-title a:active {
    color: var(--FG-base);
    text-decoration: underline;
}
/* Conversation tables: horizontal scroll container so wide tables stay inside their column */
.div-table-scroll {
	overflow-x: auto;
	max-width: 100%;
}