tinai

/* Document Editor */
.div-document-container {
    display: flex;
    flex-direction: column;
    height: 0;
    min-height: 100%;
    background-color: var(--BG-base);
    box-sizing: border-box;
}

.div-document-container .div-chat-document-scroll {
    flex: 1;
    min-height: 0;
    height: auto;
    align-self: stretch;
    border: none;
}

.div-document-thinking-nav {
    display: none;
}

.div-document-thinking-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--DM-margin-q);
}

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

.div-document-thinking-nav-side button {
    min-width: 7em;
}

.div-document-thinking-costs {
    overflow-x: auto;
}

.div-document-thinking-output {
    border: 1pt solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    padding: var(--DM-margin-q);
    margin-top: var(--DM-margin-q);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.div-document-editor {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 var(--DM-margin-q) 0 calc(var(--side-drawer-grip-size) + var(--DM-margin-h));
    box-sizing: border-box;
}

.div-document-body:has(.div-document-thinking.pinned) .div-document-editor {
    padding-left: var(--DM-margin-q);
}


@keyframes div-document-format-toolbar-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.div-document-format-toolbar {
    animation: div-document-format-toolbar-in 400ms ease-out;
}



.div-document-export {
    width: auto;
    min-width: 4em;
    cursor: pointer;
}

.div-document-toolbar button.selected {
    background-color: var(--BG-panel2);
}

.div-document-toolbars {
    display: flex;
    flex-direction: column;
    gap: var(--DM-margin-s);
    margin: 0 0 var(--DM-margin-q) 0;
    padding: var(--DM-margin-s) 0;
}

/* The notes editor's format toolbar (.div-notes-format-toolbar in
   notes.css) shares this container recipe; its buttons size themselves. */
.div-document-toolbar,
.div-notes-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--DM-margin-q);
    background-color: var(--BG-panel);
    padding: var(--DM-margin-q);
}

.div-document-toolbar button {
    height: 18pt;
    border: none;
    background-color: var(--BG-base);
    border-radius: var(--DM-margin-q);
}

.div-document-toolbar .prompt-style-input {
    height: 18pt;
}

.div-choices-editor {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 var(--DM-margin-q);
    box-sizing: border-box;
}

.div-document-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--DM-margin-h);
}

button.div-document-insert {
    width: 100%;
    height: var(--DM-margin-q);
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: var(--DM-margin-q);
    transition: box-shadow 120ms ease-out;
}

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

/* Dragging dims the dragged element (document and sticky note items). */
.div-document-item.dragging,
.div-notes-item.dragging {
    opacity: 0.5;
}

/* While dragging, the insert buttons grow into drop targets. The negative
   margins keep the occupied space identical so the list does not shift.
   Document and sticky note item lists share the drop-target styling. */
.div-document-items.dragging-items .div-document-insert,
.div-notes-items.dragging-items .div-document-insert {
    position: relative;
    height: calc(var(--DM-margin-q) + 18px);
    margin: -9px 0;
    background-color: var(--AC-trim-tint-faint);
}

.div-document-items.dragging-items .div-document-insert.drop-target,
.div-notes-items.dragging-items .div-document-insert.drop-target {
    background-color: var(--AC-trim-tint-strong);
    box-shadow: 0 0 6px var(--AC-trim);
}

.div-document-item {
    display: flex;
    align-items: center;
    gap: var(--DM-margin-q);
    padding: var(--DM-margin-s) calc(var(--DM-margin) / 4);
    border: 1pt solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.div-document-item:hover {
    box-shadow: 0 0 6px var(--BD-panel);
}

.div-document-item:focus-within {
    border-color: var(--BD-input);
    box-shadow: 0 0 6px var(--BD-input);
}

.div-document-item-controls {
    display: flex;
    align-items: center;
    gap: var(--DM-margin-q);
    align-self: center;
    opacity: 0;
    transition: opacity 120ms ease-out;
}

/* Reveal the grip controls while hovering or editing an item (document,
   choices, and sticky note items). */
.div-document-item:hover .div-document-item-controls,
.div-document-item:focus-within .div-document-item-controls,
.div-notes-item:hover .div-document-item-controls,
.div-notes-item:focus-within .div-document-item-controls {
    opacity: 1;
}

button.div-document-item-edit {
    height: auto;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    font-size: 11pt;
    line-height: 1;
    cursor: pointer;
}

.div-document-item.document-item-highlighted {
    background-color: var(--AC-trim-tint-soft);
}

.div-document-item.document-item-flash {
    animation: item-flash 3s ease-out forwards;
}

/* Shared highlight-fade for a referenced item; the scratchpad's
   .scratchpad-item-flash mirrors it (scratchpad.css). */
@keyframes item-flash {
    0% {
        background-color: transparent;
    }
    7% {
        background-color: var(--AC-trim-tint-soft);
    }
    100% {
        background-color: transparent;
    }
}

.div-document-container.preview-mode .div-document-toolbars {
    display: none;
}

.div-document-container.preview-mode .div-document-item {
    border: none;
}

.div-document-container.preview-mode .div-document-item:hover {
    box-shadow: none;
}

.div-document-container.preview-mode .div-document-item-controls,
.div-document-container.preview-mode .div-document-insert,
.div-document-container.preview-mode .div-document-item .span-document-gripper {
    display: none;
}

.div-document-item-dialog-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--DM-margin-q);
}

.span-document-gripper {
    font-family: 'Noto Emoji', sans-serif;
    cursor: grab;
    opacity: 0.6;
    letter-spacing: -2px;
    user-select: none;
    touch-action: none;
}

.div-document-value {
    flex: 1;
    min-height: 1.4em;
    outline: none;
    min-width: 0;
    overflow-wrap: anywhere;
}

.span-document-list-marker {
    flex: 0 0 1.5em;
    text-align: right;
    opacity: 0.7;
}

.div-document-item-link {
    align-items: center;
}

.div-document-value-link {
    color: var(--TX-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}