.dashboard-code-container-group {
        margin: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .dashboard-code-slot {
        margin: 0;
        width: 100%;
        position: relative;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dashboard-code-spacer {
        min-height: inherit;
        visibility: hidden;
        width: 100%;
    }

    .dashboard-code-content {
        color: var(--text-color);
        line-height: 1.6;
        font-size: 1rem;
        overflow-x: auto;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        text-align: center;
        width: 100%;
    }

    .dashboard-code-error {
        color: var(--text-color);
        padding: 0.5rem 0;
        background: transparent;
        border: none;
        box-shadow: none;
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .dashboard-code-error-detail {
        color: red;
        opacity: 0.5;
    }

    .email-send-error {
        color: red;
        opacity: 0.5;
        margin-top: 0.5rem;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .dashboard-code-pre {
        margin: 0;
        padding: 0;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: var(--code-font, 'Fira Code', monospace);
        font-size: 0.95rem;
        line-height: 1.5;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .welcome-message {
        --welcome-icon-spacing: 10px;
    }

    .workflow-quick-menu-icon {
        display: inline-block;
        font-size: 2.5rem;
        line-height: 1;
    }
    .welcome-message .workflow-link:not(.menu-item),
    .welcome-message .wiki-link:not(.menu-item) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: var(--welcome-icon-spacing, 10px);
    }
    .welcome-message .useful-link-avatar {
        width: 35px;
        height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--border-color);
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        overflow: hidden;
    }
    .welcome-message .wiki-link img {
        width: 30px;
        height: 30px;
        display: block;
    }
    .welcome-message .workflow-link.workflow-link-attached {
        visibility: hidden;
        pointer-events: none;
    }
    .welcome-menu-section {
        width: 100%;
    }

    #welcome-message .welcome-menu-nav {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center !important;
        gap: 0.75rem !important;
        margin-top: 0 !important;
        width: 100%;
    }

    #welcome-message .welcome-menu-nav > .welcome-menu-card.menu-item {
        box-sizing: border-box;
        width: 100px !important;
        max-width: 100px !important;
        height: 100px !important;
        min-height: 0 !important;
        padding: 0.5rem 0.45rem !important;
        border-radius: 12px !important;
        margin: 0 !important;
        opacity: 1;
        text-align: center !important;
        align-items: center !important;
    }

    #welcome-message .welcome-menu-card .menu-title {
        display: block !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 0.5rem !important;
        line-height: 1.04 !important;
        text-align: center !important;
        text-align-last: center !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: normal !important;
        text-wrap: balance;
    }

    .menu-icon-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--menu-icon-container-size, 64px);
        height: var(--menu-icon-container-size, 64px);
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        border: 2px solid var(--border-color);
        background-color: var(--menu-icon-bg, var(--input-bg));
    }
    .menu-icon-emoji {
        font-size: 2.2rem;
        line-height: 1;
    }

    .welcome-useful-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        line-height: 1;
    }

    .welcome-menu-card .welcome-useful-link-icon img {
        width: 30px;
        height: 30px;
        display: block;
    }

    .welcome-menu-card .useful-link-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }
    .attach-menu-wrapper {
        position: relative;
        display: flex;
        align-items: flex-end;
    }
    .attach-menu {
        max-height: min(800px, calc(100dvh - 16px));
        overflow-y: auto;
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        display: none;
        flex-direction: column;
        gap: 6px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 15px;
        padding: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 1100;
        width: min(280px, 80vw);
    }
    .attach-menu.open {
        display: flex;
    }
    .attach-menu-item {
        display: block;
        padding: 8px 12px;
        border: none;
        border-radius: 10px;
        background: var(--input-bg);
        color: var(--text-color);
        font-size: 0.9rem;
        cursor: pointer;
        transition: opacity 0.2s ease;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    .attach-menu-item:hover,
    .attach-menu-item:focus {
        background: var(--border-color);
        color: var(--text-color);
        opacity: 0.8;
        outline: none;
    }
    .attach-menu-item[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }
    .workflow-picker {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        display: none;
        flex-direction: column;
        gap: 6px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 15px;
        padding: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25);
        z-index: 1100;
        width: min(280px, 80vw);
    }
    .workflow-picker.open {
        display: flex;
    }
    .workflow-picker-search {
        width: 100%;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--input-bg);
        color: var(--text-color);
        padding: 8px 10px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-sizing: border-box;
    }
    .workflow-picker-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-height: 0;
        max-height: 320px;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* The scrollbar runs in the picker's own right padding instead of along the cards, which
           keep exactly the width of the search box: 10px reach minus the 8px scrollbar gutter. */
        margin-right: -10px;
        padding-right: 2px;
        scrollbar-gutter: stable;
    }
    /* An overlay scrollbar takes no gutter, so the padding it is drawn over stays free of cards. */
    .workflow-picker-list.has-overlay-scrollbar {
        padding-right: 10px;
    }
    .workflow-picker-item {
        flex: 0 0 auto;
        display: block;
        padding: 8px 10px;
        border: none;
        border-radius: 10px;
        background: var(--input-bg);
        color: var(--text-color);
        cursor: pointer;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.2s ease;
        width: 100%;
    }
    .workflow-picker-item:hover,
    .workflow-picker-item:focus {
        opacity: 0.8;
        outline: none;
    }
    .workflow-picker-empty {
        text-align: center;
        font-size: 0.85rem;
        opacity: 0.6;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .db-context-toggle {
        display: inline-block;
        margin-top: 0.25rem;
        color: var(--link-color);
        cursor: pointer;
        align-self: flex-start;
        width: max-content;
        transition: opacity 0.3s;
    }
    .db-context-toggle:hover,
    .db-context-toggle:focus {
        opacity: 0.8;
    }
    .db-context {
        white-space: pre-wrap;
        opacity: 0.5;
        margin-top: 0.5rem;
        display: none;
        width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }
    .db-context table {
        width: 100%;
        table-layout: auto;
    }
    .db-context table th,
    .db-context table td {
        word-break: break-word;
    }
    .storage-trim-notice {
        position: fixed;
        top: max(1rem, env(safe-area-inset-top, 0px));
        left: 50%;
        transform: translateX(-50%);
        z-index: 2001;
        margin: 0;
        width: calc(100% - 2rem);
        max-width: 520px;
        box-sizing: border-box;
        padding: 0.75rem 1rem;
        border-radius: 14px;
        background: var(--input-bg);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        text-align: center;
        font-size: 0.9rem;
        line-height: 1.5;
        animation: storage-trim-notice-fade 3s linear forwards;
    }
    .storage-trim-notice:hover,
    .storage-trim-notice:focus-within {
        animation-play-state: paused;
    }
    @keyframes storage-trim-notice-fade {
        from { opacity: 1; }
        to { opacity: 0; }
    }
.chat-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2rem); /* account for main padding to avoid initial scroll */
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 11rem;
    position: relative;
    background-color: var(--bg-color);
    gap: 1.5rem;
    box-sizing: border-box;
}

.global-drop-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: clamp(1.2rem, 2.5vw, 2.4rem);
    text-align: center;
    padding: 1.5rem;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.global-drop-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.welcome-message {
    position: relative;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    font-size: 2rem;
    color: var(--text-color);
    opacity: 0.6;
    padding-top: 0.5rem;
}

.welcome-message.is-loading {
    flex: 1;
    justify-content: center;
}

.welcome-message.is-loading .welcome-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.welcome-hover-tooltip {
    position: fixed;
    z-index: 9965;
    display: none;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 16px));
}

.welcome-hover-tooltip.is-visible {
    display: block;
}

.welcome-hover-tooltip-card {
    border: 3px solid var(--border-color);
    box-shadow: 0 0 0 2px var(--shadow-color);
    background-color: var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.welcome-hover-tooltip-content {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
    word-break: break-word;
    opacity: 1;
}

.welcome-hover-tooltip-content strong {
    font-weight: 700;
}

.welcome-hover-tooltip-content .welcome-tooltip-paragraph {
    display: block;
    margin-top: 0.45rem;
}

.dashboard-code-container-group + .welcome-message.dashboard-code-sibling-spacing {
    margin-top: 0;
    padding-top: 0.5rem;
}

.welcome-message.dashboard-code-sibling-spacing + .dashboard-code-container-group[data-position="bottom"] {
    padding-top: 10rem;
}

.chat-messages {
    margin-bottom: 10px;
    display: none;
    padding: 10px;
    padding-bottom: 120px;
}

.chat-messages.active {
    display: block;
}

/* Which of the two views of this page is showing. The rules win over the inline display the chat
   sets on its own elements, so switching views is one attribute and never a repair job. */
.chat-container[data-tnx-index-view="dashboard"] #welcome-message {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
}

/* Center the empty workspace greeting, including the built-in onboarding slot.
   Real dashboard code and configured cards retain their normal document flow. */
.chat-container[data-tnx-index-view="dashboard"]:not(:has(.dashboard-code-slot:not([data-prerendered="1"]), .welcome-menu-card)) {
    justify-content: center;
}

.chat-container[data-tnx-index-view="dashboard"]:has(.tnx-initial-onboarding) #welcome-message:empty {
    display: none !important;
}

/* The welcome path uses the menu's cards and a light, hand-drawn layer of guidance. */
.tnx-initial-onboarding {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 3rem 0 1rem;
    box-sizing: border-box;
    text-align: center;
    color: var(--text-color);
}

.tnx-initial-onboarding h2 {
    color: inherit;
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    margin: 0 0 2.5rem;
}

.tnx-initial-onboarding [hidden] {
    display: none !important;
}

.tnx-onboarding-note {
    font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    font-style: normal;
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1.08;
    letter-spacing: 0.1px;
    color: var(--text-color);
    transform: rotate(-5deg);
}

.tnx-onboarding-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24px, 1fr) minmax(0, 1fr) minmax(24px, 1fr) minmax(0, 1fr);
    align-items: start;
    margin: 0 auto 2.5rem;
}

.tnx-onboarding-step {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tnx-onboarding-note-space {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.tnx-onboarding-path > [data-tnx-onboarding-step="entries"] {
    margin-top: 3rem;
}

.tnx-onboarding-path > [data-tnx-onboarding-step="interactiveTables"] {
    margin-top: 1rem;
}

.tnx-onboarding-link.menu-item {
    width: 130px;
    max-width: 100%;
    height: 130px;
    box-sizing: border-box;
    gap: 1rem;
    text-decoration: none;
}

.tnx-onboarding-link,
.tnx-onboarding-link.menu-item {
    color: var(--link-color);
}

.tnx-onboarding-link.menu-item:hover {
    color: white;
}

.tnx-onboarding-step[data-tnx-onboarding-step="databases"] .menu-item {
    border: 3px solid transparent;
}

.tnx-onboarding-step[data-tnx-onboarding-step="databases"][data-muted="0"] .menu-item {
    border-color: var(--link-color);
}

.tnx-onboarding-link.menu-item .tnx-onboarding-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.tnx-onboarding-link.menu-item .menu-title {
    display: block;
    overflow: visible;
    font-size: 0.65rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.tnx-onboarding-connector {
    min-width: 0;
    padding-top: 4rem;
    pointer-events: none;
}

.tnx-onboarding-arrow {
    display: block;
    width: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-color);
    overflow: visible;
}

.tnx-onboarding-pencil {
    stroke-width: 0.8;
    opacity: 0.45;
}

.tnx-onboarding-arrow path {
    vector-effect: non-scaling-stroke;
}

.tnx-onboarding-connector svg:dir(rtl) {
    transform: scaleX(-1);
}

.tnx-onboarding-step[data-muted="1"] .tnx-onboarding-link,
.tnx-onboarding-arrow [data-muted="1"] {
    opacity: 0.4;
}

.tnx-onboarding-extras,
.tnx-onboarding-extra-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.tnx-onboarding-extra-links .tnx-onboarding-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.tnx-onboarding-contact {
    position: relative;
    width: fit-content;
    max-width: min(100%, 360px);
    margin: 3rem auto 0;
    padding: 1.5rem 1.25rem 1.75rem;
    background: var(--input-bg);
    color: var(--text-color);
    border-radius: 1px 2px 12px 2px;
    box-shadow: 2px 4px 7px color-mix(in srgb, var(--shadow-color) 35%, transparent);
    transform: rotate(-2deg);
    font-size: 0.8rem;
    line-height: 1.6;
    opacity: 0.5;
}

.tnx-onboarding-contact::before {
    content: "";
    position: absolute;
    width: 58px;
    height: 18px;
    top: -9px;
    left: calc(50% - 29px);
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 5%, transparent);
    transform: rotate(5deg);
}

.tnx-onboarding-detour {
    position: fixed;
    top: calc(var(--tnx-guest-banner-height, 0px) + var(--menu-icon-container-size, 50px) + 1.5rem);
    left: calc(var(--tnx-sidebar-width, 0px) + var(--menu-icon-container-size, 50px) + 2rem);
    text-align: left;
    pointer-events: none;
}

.tnx-onboarding-detour svg {
    position: absolute;
    width: 52px;
    left: -42px;
    top: -34px;
}

/* Visibility preserves the notes' space, so reaching the bottom never changes page height. */
html[data-tnx-onboarding-away-from-top] .tnx-onboarding-detour,
html[data-tnx-onboarding-away-from-bottom] .tnx-onboarding-ai {
    visibility: hidden;
}

.tnx-onboarding-ai {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 190px;
    margin: 2rem 0 0 auto;
    text-align: left;
}

.tnx-onboarding-ai svg {
    width: 64px;
    align-self: flex-start;
}

@media (min-width: 701px) and (min-height: 700px) {
    .tnx-onboarding-ai {
        position: fixed;
        bottom: var(--chat-teleport-latest-bottom, 100px);
        right: 4rem;
        margin: 0;
        pointer-events: none;
    }
}

@media (max-width: 700px) {
    .tnx-initial-onboarding {
        padding-top: calc(var(--menu-icon-container-size, 50px) + 6rem);
    }

    .tnx-onboarding-path {
        grid-template-columns: minmax(0, 1fr) clamp(18px, 5vw, 32px) minmax(0, 1fr) clamp(18px, 5vw, 32px) minmax(0, 1fr);
    }

    .tnx-onboarding-note {
        font-size: 1.25rem;
    }

    .tnx-onboarding-note-space {
        height: 5.5rem;
        overflow-wrap: anywhere;
    }

    .tnx-onboarding-link.menu-item {
        height: clamp(104px, 26vw, 130px);
        padding: 0.65rem 0.25rem;
        gap: 0.75rem;
    }

    .tnx-onboarding-link.menu-item .tnx-onboarding-icon {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .tnx-onboarding-link.menu-item .menu-title {
        font-size: clamp(0.5rem, 1.8vw, 0.65rem);
    }

    .tnx-onboarding-connector {
        padding-top: 7rem;
    }

    .tnx-onboarding-extras {
        flex-direction: column;
    }

    .tnx-onboarding-extra-links {
        flex-direction: column;
        gap: 1rem;
    }

    .tnx-onboarding-detour {
        max-width: calc(100vw - var(--menu-icon-container-size, 50px) - 3rem);
    }
}

.chat-container[data-tnx-index-view="dashboard"] #chat-messages,
.chat-container[data-tnx-index-view="dashboard"] #inline-workspace-cleanup,
.chat-container[data-tnx-index-view="dashboard"] #chat-empty-state {
    display: none !important;
}

.chat-container[data-tnx-index-view="chat"] #welcome-message,
.chat-container[data-tnx-index-view="chat"] .dashboard-code-container-group {
    display: none !important;
}

.chat-empty-state {
    /* A box never shrinks below the size at which it stops reading as a box. A screen that cannot
       hold the whole field at that size shows fewer boxes instead, which is what the frame size in
       ./UI/index-core.js works out. */
    --glider-cell-size: clamp(19px, 3.6vmin, 26px);
    --glider-cell-gap: clamp(4px, 0.9vmin, 6px);
    position: fixed;
    inset: 0;
    left: var(--tnx-sidebar-width, 0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.chat-empty-state[hidden] {
    display: none;
}

/* Neither of these two ever moves: the field slides through them. Fading the edges out is
   therefore something that happens at a place on the screen rather than to a box, so a box arrives
   half faded at one side, comes up to full strength across the middle and fades away again on its
   way out the other side, and a row or column joining the field can never appear to jump into
   place.

   Two nested elements, one fading top and bottom and one fading left and right, because a mask on
   a masked child multiplies with its parent's: the result is a box whose corners, where both fades
   meet, come away rounded. Doing it this way rather than compositing two masks on one element
   keeps it to plain gradient masks, which every browser has. */
.chat-empty-glider-frame,
.chat-empty-glider-viewport {
    width: calc((var(--glider-frame-size, 11) * (var(--glider-cell-size) + var(--glider-cell-gap))) - var(--glider-cell-gap));
    height: calc((var(--glider-frame-size, 11) * (var(--glider-cell-size) + var(--glider-cell-gap))) - var(--glider-cell-gap));
    border-radius: calc(var(--glider-cell-size) * 1.5);
}

/* Hidden until ./UI/IndexGlider.js has fitted the board to the window, so a board the browser paints
   half parsed or at the server's guessed size is never seen. */
.chat-empty-glider-frame[data-glider-fitting] {
    visibility: hidden;
}

.chat-empty-glider-frame {
    overflow: hidden;
    contain: layout paint;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
}

.chat-empty-glider-viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
}

.chat-empty-glider {
    /* One box bigger on every side than the frame shows, so sliding never opens a gap at the edge
       the field is travelling away from. */
    position: absolute;
    top: calc(-1 * (var(--glider-cell-size) + var(--glider-cell-gap)));
    left: calc(-1 * (var(--glider-cell-size) + var(--glider-cell-gap)));
    --glider-slide: 0;
    display: grid;
    /* How many boxes a row holds is written onto the element itself, by ./UI/index.php for the
       first paint and by ./UI/index-core.js once it knows the space this visitor really has.
       repeat() only takes a literal count, so it cannot come from a custom property. */
    grid-auto-rows: var(--glider-cell-size);
    gap: var(--glider-cell-gap);
    /* Where the field stands. ./UI/index.php works this out for the frame it paints, and from then
       on ./UI/index-core.js writes the transform itself, once per frame, off the time that has
       really passed: no transition to run late, overshoot or land twice. */
    transform: translate(
        calc(var(--glider-slide) * -1 * (var(--glider-cell-size) + var(--glider-cell-gap))),
        calc(var(--glider-slide) * (var(--glider-cell-size) + var(--glider-cell-gap)))
    );
}

/* Reserve a composited layer only while the field is really moving. Keeping a permanent layer for
   a hidden or reduced-motion board needlessly holds GPU memory. */
.chat-empty-glider.is-animating {
    will-change: transform;
}

/* Two layers per box on purpose: the box carries the mark that belongs to its cell of the field,
   the face inside it carries whether the glider is standing on it. */
.chat-empty-glider-cell {
    position: relative;
    display: block;
    width: var(--glider-cell-size);
    height: var(--glider-cell-size);
}

/* Every box looks exactly like every other one. A field of identical boxes moved by one box is the
   field that was already there, which is what lets it travel for ever without anything appearing
   to jump. */
.chat-empty-glider-face {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30%;
    background-color: var(--text-color);
    opacity: 0.12;
    transform: scale(0.78);
    transition: opacity 820ms ease, transform 820ms ease;
}

.chat-empty-glider-cell.is-alive .chat-empty-glider-face {
    opacity: 0.62;
    transform: translate(
        calc(var(--glider-live-shift-x, 0) * (var(--glider-cell-size) + var(--glider-cell-gap))),
        calc(var(--glider-live-shift-y, 0) * (var(--glider-cell-size) + var(--glider-cell-gap)))
    ) scale(1);
}

/* Rare, small, in the middle of the box it belongs to and never sharing it with a second one. It
   sits inside the box, so it travels with the field like everything else. The box underneath keeps
   its own opacity. */
.chat-empty-glider-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--glider-cell-size) * 0.3);
    line-height: 1;
    opacity: var(--glider-mark-opacity, 0.3);
    transition: opacity 820ms ease;
}

/* A mark never shines through the glider: the box the glider is standing on drops it at once and
   only lets it back once the glider has passed. The glider itself keeps exactly the colour and the
   opacity it always had. */
.chat-empty-glider-cell.is-alive .chat-empty-glider-mark {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

.chat-empty-glider-mark-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.chat-empty-glider-mark-symbol {
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", system-ui, sans-serif;
    font-size: calc(var(--glider-cell-size) * 0.5);
    font-weight: 700;
}

.chat-empty-glider-mark-logo {
    width: 50%;
    height: 50%;
    color: var(--text-color);
}

.chat-empty-glider-mark-logo svg {
    width: 100%;
    height: 100%;
}

.chat-empty-state-text {
    opacity: 0.3;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    padding: 0 1.25rem;
    max-width: 32rem;
}

@media (prefers-reduced-motion: reduce) {
    .chat-empty-glider-face,
    .chat-empty-glider-mark {
        transition: none;
    }
}

.chat-input-container {
    background-color: var(--bg-color);
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: var(--tnx-sidebar-width, 0px);
    width: calc(100% - var(--tnx-sidebar-width, 0px));
    box-sizing: border-box;
    z-index: 1000;
}

.attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    min-height: 0;
    max-height: 100px;
    overflow-y: auto;
}

/* What is waiting to be sent stays on one line, so the input never climbs up over the
   conversation and the link back to the newest message keeps its place above it. Too many to fit
   run off to the side and are reached by scrolling sideways over them. */
#attachments-preview.attachments-preview {
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

#attachments-preview.attachments-preview > * {
    flex: 0 0 auto;
}

/* The way back down out of a long conversation. It sits above everything the input holds, which
   is worked out as the page runs, since attachments and a growing message change that height. */
.chat-teleport-latest,
.chat-teleport-latest:visited {
    position: fixed;
    right: 14px;
    bottom: var(--chat-teleport-latest-bottom, 90px);
    z-index: 1001;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--input-bg);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.chat-teleport-latest.is-visible {
    opacity: 0.5;
    visibility: visible;
    pointer-events: auto;
}

.chat-teleport-latest:hover,
.chat-teleport-latest:focus {
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.4;
    outline: none;
}

.chat-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.chat-attachment video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #000;
}

.chat-attachment .video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.chat-attachment .video-overlay .play-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-attachment .video-overlay .play-button::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid rgba(255, 255, 255, 0.9);
    transform: translateX(1px);
}

.chat-attachment a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-all;
    font-size: 0.7em;
}

.email-attachments {
    margin-top: 0rem;
}

.email-drop-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--input-bg);
}

.email-drop-area:hover:not(.highlight):not(.invalid-drag) {
    border-color: var(--primary-color);
    background-color: var(--bg-color);
}

.email-drop-area.highlight {
    border-color: var(--primary-color);
    background-color: var(--bg-color);
}

.email-drop-area-content {
    color: var(--text-color);
    opacity: 0.7;
}

.email-attachments .attachments-preview {
    margin-top: 2px;
}

.email-attachments .attachments-preview:not(:empty) {
    margin-bottom: 10px;
}

.workflow-attachment {
  border: 3px solid var(--border-color);
}

.workflow-attachments-section {
    margin-top: 1rem;
}

.workflow-attachments-heading {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    letter-spacing: 0.05em;
}

.workflow-attachments .attachments-preview {
    max-height: 140px;
}

.workflow-drop-area {
    margin-top: 0.5rem;
}

.input-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.textarea-wrapper {
    flex-grow: 1;
    position: relative;
    display: inline-block;
    width: 100%;
}

#message-input,
.tnx-mention-editor[data-tnx-mention-editor-for="message-input"] {
    width: 100%;
    min-height: 44px;
    max-height: 200px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    outline: none;
}

#message-input:focus,
.tnx-mention-editor[data-tnx-mention-editor-for="message-input"]:focus {
    border-color: var(--primary-color);
    background-color: var(--bg-color);
}

.tokens-empty-message {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border-radius: 20px;
    background-color: var(--input-bg);
    color: red;
    font-weight:bold;
    font-size: 0.95rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.textarea-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        var(--primary-color, #007bff) 50%,
        transparent 100%
    );
    opacity: 0.2;
    animation: shimmer 1.2s linear infinite;
    pointer-events: none;
    display: none; /* hidden by default */
    z-index: 10;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.control-button {
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    padding: 0;
}

.voice-button {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.control-button:hover {
    background-color: var(--input-bg);
}

.send-button {
    color: var(--primary-color);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .chat-container {
        padding: 0.75rem 0.75rem 11rem;
        gap: 1rem;
    }

    .input-controls {
        gap: 4px;
    }

    .control-button {
        width: 40px;
        height: 40px;
    }

    .voice-button {
        min-width: 40px;
        min-height: 40px;
        flex: 0 0 40px;
    }

    #message-input,
    .tnx-mention-editor[data-tnx-mention-editor-for="message-input"] {
        padding: 8px 12px;
        font-size: 16px; /* Prevent zoom on mobile */
    }

    .attachment-preview {
        width: 50px;
        height: 50px;
    }
}

/* Fix for iOS devices to prevent the bottom bar from covering the input */
@supports (-webkit-touch-callout: none) {
    .chat-container {
        height: calc(-webkit-fill-available - 2rem);
    }
}

.chat-bubble {
    position: relative;
    max-width: 90%;
    margin: 6px 0;
    font-size: 1rem;
    line-height: 1.4;
    word-wrap: break-word;
    clear: both;
}

.chat-bubble.user {
    margin-left: auto;
    padding: 10px 16px;
    border-radius: 20px;
    background-color: #fff;
    color: #000;
    box-shadow: 0 1px 3px var(--shadow-color);
}

/* Dark mode override */
[data-theme="dark"] .chat-bubble.user {
    background-color: #000;
    color: #fff;
}

/* System/bot messages - no bubble */
.chat-bubble.bot {
    margin-right: auto;
    padding: 6px 0;
    color: var(--text-color);
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.chat-bubble.bot.ai-stopped-note {
    opacity: 0.5;
}

/* Add breathing room after system messages when a user responds */
.chat-bubble.bot + .chat-bubble.user {
    margin-top: 3em;
}

.chat-bubble.bot > :is(div, iframe, canvas, table, textarea) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.chat-bubble.bot > .db-context-toggle {
    width: max-content;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
}

.chat-bubble.bot .chat-attachments {
    width: 100%;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .chat-bubble {
        max-width: 95%;
        font-size: 0.95rem;
    }
}

.send-button {
    display: none;
}
.send-button.visible {
    display: flex;
}

.voice-button.listening {
    background-color: var(--primary-color);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 21, 255, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(25, 0, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 8, 255, 0); }
}

.clean-button {
    position: fixed;
    top: 10px;
    right: 10px;
    opacity: 1;
    z-index: 1000;
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-color);
    font-size: 1.2rem;
    border: 3px solid var(--link-color);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.clean-button:hover,
.clean-button.clean-control-highlight {
    opacity: 0.8;
    background-color: var(--input-bg);
}

.inline-workspace-cleanup {
    width: 100%;
    margin-top: 2.8rem;
    padding: 0;
}

.inline-workspace-cleanup[hidden] {
    display: none;
}

.inline-clean-button.clean-control-highlight {
    opacity: 0.8;
}

.message-tools {
    display: none;
    position: absolute;
    gap: 6px;
    z-index: 5;
}

.chat-bubble:hover .message-tools {
    display: flex;
}

.chat-bubble.user .message-tools {
    bottom: -30px;
    right: 0;
}

.chat-bubble.bot .message-tools {
    bottom: -30px;
    left: 0;
}

.message-tools button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: none;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    box-shadow: 0 1px 2px var(--shadow-color);
}
.message-tools button:hover {
    opacity: 0.5;
}

.loading-dots {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
}

.loading-inline-status {
    display: inline-flex;
    align-items: center;
}

.loading-inline-status .loading-dots {
    padding: 8px 0;
}

.loading-status-text {
    margin-left: 10px;
    opacity: 0.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.loading-dots.left {
    justify-content: flex-start;
    padding-left: 0;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.tnx-loaded-content-placeholder {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes bounce {
    0%, 80%, 100% { 
        transform: scale(0);
    }
    40% { 
        transform: scale(1.0);
    }
}

.chat-bubble pre {
    background-color: var(--input-bg);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0;
    position: relative;
    resize: vertical;
    overflow-y: auto;
}

.chat-code-editor-wrapper {
    position: relative;
    margin: 0;
}

.chat-code-editor {
    border-radius: 8px;
    background-color: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1rem;
    text-align: left;
    overflow: hidden;
    min-height: 240px;
    width: 100%;
}

.chat-code-editor .CodeMirror,
.chat-code-editor .CodeMirror pre {
    text-align: left;
}

.chat-code-editor .CodeMirror {
    background-color: transparent;
    height: auto;
}

.chat-code-editor .CodeMirror-scroll {
    min-height: 240px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.chat-code-editor.is-expanded .CodeMirror-scroll {
    max-height: 75vh;
}

.chat-code-textarea {
    width: 100%;
    min-height: 240px;
    border-radius: 8px;
    background-color: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    font-family: monospace;
    font-size: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    resize: vertical;
}

.chat-code-textarea.is-expanded {
    max-height: 75vh;
    overflow-y: auto;
}

.chat-bubble .code-tools {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-bubble pre:hover .code-tools,
.chat-bubble .chat-code-editor-wrapper:hover .code-tools,
.chat-bubble .chat-code-editor:hover .code-tools {
    opacity: 1;
}

.chat-bubble .code-tools button {
    padding: 0.25rem;
    font-size: 1.1rem;
    background: var(--shadow-color);
    border-radius: 50%;
    color: var(--text-color);
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px var(--shadow-color);
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
}

.chat-bubble .code-tools button:hover {
    opacity: 0.8;
}

.chat-bubble .code-tools button[data-copied="true"] {
    color: var(--primary-color);
}

.chat-bubble .code-tools button.copy-button--cooldown {
    opacity: 0.3;
}

.chat-bubble iframe {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: 8px;
    margin: 0.5rem 0;
}

.chat-bubble .chat-html-render {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    overflow: hidden;
    contain: layout paint style;
}

.chat-bubble iframe.chat-html-frame {
    display: block;
    width: 100%;
    height: 1px;
    min-height: 0;
    border: none;
    border-radius: 8px;
    margin: 0;
    background: transparent;
    overflow: hidden;
}

.chat-bubble canvas {
    width: 100%;
    height: auto;
    margin: 0.5rem 0;
}

.chat-bubble code {
    font-family: monospace;
    background-color: var(--input-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

.chat-bubble .chat-table-scroll {
    margin: 0.5rem 0;
    max-width: 100%;
    max-height: min(75vh, 900px);
    max-height: min(75dvh, 900px);
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
    overflow-anchor: none;
}

.chat-bubble table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 100%;
    width: max-content;
}

.chat-bubble th,
.chat-bubble td {
    border: 0;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    padding: 0.5rem;
    text-align: left;
}

.chat-bubble table thead th {
    border-top: 1px solid var(--border-color);
}

.chat-bubble table tr > :first-child {
    border-left: 1px solid var(--border-color);
}

.chat-bubble th {
    background-color: var(--input-bg);
}

td.negative {
  color: red !important;
}

.math-result {
    font-family: monospace;
    font-size: 1.4em;
}

.math-value {
    color: var(--primary-color);
    cursor: pointer;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.math-value.negative {
    color: red !important;
}

.math-value:hover {
    background-color: var(--input-bg);
}

pre button.copy-button,
pre span.copy-label {
    display: none !important;
}

.sortable-markdown-table th {
    cursor: pointer;
    user-select: none;
    font-weight: 700;
}
.sortable-markdown-table td:focus,
.sortable-markdown-table th:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--primary-color);
}
.sortable-markdown-table .tnx-table-nav-column-header-selected,
.sortable-markdown-table .tnx-table-nav-row-key-selected {
    color: var(--accent-color);
    font-weight: 700;
}

.sortable-markdown-table .tnx-table-nav-row-key-selected a {
    color: var(--link-color);
    font-weight: 700;
}

/* email bubble wrapper */
.chat-bubble.email {
  display: flex;
  flex-direction: column;
  position: relative;
}
/* container for header fields */
.email-headers {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.email-headers label,
.email-headers a {
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: 100%;
  opacity: 0.3;
}

.email-headers a {
  text-decoration: none;
  color: var(--link-color);
}
.email-headers select {
  width: 100%;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  opacity: 0.3;
}
.email-headers input {
  width: 100%;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
}

.email-headers input.email-recipient-source {
  display: none !important;
}

.email-recipient-token-field {
  position: relative;
  width: 100%;
  min-height: 34px;
  padding: 3px 5px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  box-sizing: border-box;
  cursor: text;
}

.email-recipient-token-field:focus-within,
.email-recipient-token-field.is-drag-over {
  border-color: var(--primary-color);
  background-color: var(--bg-color);
}

.email-recipient-token-field:has(.workflow-nav-active),
.email-headers input.workflow-nav-active,
.email-headers select.workflow-nav-active,
.email-body.workflow-nav-active {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: none;
}

.email-recipient-token-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.email-recipient-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 0.86rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.email-recipient-pill:hover {
  opacity: 0.8;
}

.email-recipient-pill.is-dragging {
  opacity: 0.45;
}

.email-recipient-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-recipient-remove {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: inherit;
  font-weight: bold;
  padding: 0;
  line-height: 1;
  overflow: hidden;
  text-align: center;
}

.email-recipient-remove:hover {
  background: rgba(0, 0, 0, 0.7);
}

.email-recipient-input {
  flex: 1 1 120px;
  min-width: 100px;
  width: auto !important;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  color: var(--text-color);
  font: inherit;
  padding: 4px 2px;
  box-sizing: border-box;
}

.email-headers input.email-recipient-input:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.email-recipient-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  display: none;
  background-color: var(--input-bg);
  padding: 5px;
  border-radius: 4px;
  overflow-y: auto;
  height: 200px;
  min-height: 200px;
  max-height: 400px;
  line-height: 1.4em;
  cursor: default;
  transition: max-height 0.3s ease;
  resize: vertical;
  text-align: left;
}

.email-recipient-search-results.is-visible {
  display: block;
}

.email-recipient-search-results .search-select {
  cursor: pointer;
  color: var(--link-color);
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
}

.email-recipient-search-results > div {
  text-align: left;
}

.email-recipient-search-results .search-select.search-select-active {
  opacity: 0.8;
}

.email-recipient-search-results .search-select.is-self-recipient,
.email-recipient-search-results .search-select.is-self-recipient.search-select-active {
  opacity: 0.5;
}

.email-recipient-search-results .linked-entry-note {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
}

.email-recipient-search-results .linked-entry-note-text {
  color: red;
}

body.email-recipient-pill-dragging #chatMessages > *:not(.is-recipient-drag-area),
body.email-recipient-pill-dragging .is-recipient-drag-area > *:not(.email-headers),
body.email-recipient-pill-dragging .is-recipient-drag-area .email-headers > :not([data-field="to"]):not([data-field="cc"]):not([data-field="bcc"]),
body.email-recipient-pill-dragging .input-controls,
body.email-recipient-pill-dragging #attachments-preview {
  opacity: 0.3;
}
/* body textarea */
.email-body {
  width: 100%;
  min-height: 120px;
  padding: 8px;
  resize: vertical;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
}
.email-body:focus, .email-headers input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}
.email-body:focus {
  min-height: 360px; /* triple its original height */
}

.email-send-button.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.message-label {
  display: none !important;
}

.workflow-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workflow-bubble.workflow-has-response {
  margin-bottom: 3rem;
}

.workflow-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.6;
  font-weight: bold;
  color: var(--text-color);
}

.workflow-header .workflow-title {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.agent-activity-bubble {
  align-items: flex-start;
}

.agent-activity-text {
  line-height: 1.4;
}

a.chat-attachment.workflow-attachment,
.chat-attachment.workflow-attachment.is-clickable {
  color: inherit;
  text-decoration: none;
}

a.chat-attachment.workflow-attachment[href],
.chat-attachment.workflow-attachment.is-clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

a.chat-attachment.workflow-attachment[href]:hover,
.chat-attachment.workflow-attachment.is-clickable:hover {
  background-color: var(--input-bg);
  color: inherit;
  opacity: 0.8;
}

.agent-activity-card-icon {
  line-height: 1;
}

.workflow-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.workflow-form .form-group {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.workflow-form .form-group label {
  color: var(--text-color);
  transition: opacity 0.2s ease;
  margin-bottom: 0.5rem;
}

.workflow-form .form-group[data-depends] {
  --entry-dependency-border-width: 2px;
  --entry-dependency-line-offset: 10px;
  --entry-dependency-content-gap: 10px;
  position: relative;
  margin-left: var(--entry-dependency-line-offset);
  border-left: var(--entry-dependency-border-width) dashed var(--border-color);
  padding-left: var(--entry-dependency-content-gap);
}

.workflow-form .workflow-dependency-line-title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 6px;
  z-index: 2;
}

.workflow-form .form-group[data-depends][data-dependency-depth="2"] {
  --entry-dependency-line-offset: calc(10px + var(--entry-dependency-border-width) + var(--entry-dependency-content-gap) + 0.75rem);
}

.workflow-form .form-group label .workflow-required-indicator {
  display: inline-block;
  width: 6px;
  height: 1.2em;
  line-height: 1.2em;
  background-color: var(--accent-color);
  margin-right: 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  transform: translateY(0.05em);
  overflow: hidden;
}

.workflow-form .form-group label .workflow-required-indicator.hidden {
  width: 0;
  margin-right: 0;
  opacity: 0;
  visibility: hidden;
}

.workflow-single-field,
.workflow-expandable-single {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workflow-group {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workflow-group[data-expandable="true"] {
  border-style: dashed;
}

.workflow-group-instances {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workflow-group-instance {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workflow-group-instance + .workflow-group-instance {
  border-top: 1px dashed var(--border-color);
  padding-top: 0.75rem;
}

.workflow-linked-entry {
  opacity: 1;
  margin-top: 0.35rem;
  text-align: right;
}

.workflow-linked-entry .linked-entry-note {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
  width: 100%;
  text-align: right;
}

.workflow-linked-search .linked-entry-note {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
}

.workflow-linked-entry .linked-entry-note .linked-entry-note-text,
.workflow-linked-search .linked-entry-note .linked-entry-note-text {
  color: red;
}

.workflow-linked-entry a {
  color: var(--link-color);
  text-decoration: none;
}

.workflow-linked-entry span {
  color: red;
}

.search-results {
  display: none;
  background-color: var(--input-bg);
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow-y: auto;
  min-height: 300px;
  max-height: 600px;
  line-height: 1.4em;
  cursor: default;
  transition: max-height 0.3s ease;
  resize: vertical;
  text-align: left;
}

.search-results .search-note {
  font-size: 0.85rem;
  font-weight: normal;
  letter-spacing: 0.04em;
  color: var(--text-color, #555);
  margin-bottom: 0.75em;
}

.workflow-linked-search {
  margin-top: 0.5rem;
}

.workflow-linked-search .search-select {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
}
.workflow-linked-search button.search-select {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
}
.workflow-linked-search .search-select.search-select-active {
  opacity: 0.8;
}
.workflow-linked-search .search-select.tnx-keyboard-nav-link-selected {
  display: inline-block;
  max-width: 100%;
}

.search-results.fixed-height {
  height: 200px;
  min-height: 200px;
  max-height: 400px;
}

.workflow-form .form-control {
  width: 100%;
  padding: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 1rem;
  transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, min-height 0.2s ease;
}

.workflow-form .form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  background-color: var(--bg-color);
}

.workflow-form .workflow-single-option-readonly {
  min-height: 1.2rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.workflow-form .workflow-single-option-readonly .preview-pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--text-color);
  border-radius: 999px;
  font-size: 0.8rem;
}

.workflow-form .form-control.workflow-nav-active {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: none;
}

.workflow-form textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

/* Inserting a reference swaps the textarea for its pill editor without leaving the field. */
.workflow-form textarea.form-control:focus,
.workflow-form .form-control.tnx-mention-editor:focus {
  min-height: 320px;
}

.workflow-form input[type="checkbox"].form-control {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  cursor: pointer;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.workflow-form input[type="checkbox"].form-control:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.workflow-form input[type="checkbox"].form-control:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.workflow-form input[type="checkbox"].form-control:focus {
  outline: none;
  border-color: var(--tnx-checkbox-focus-color, var(--primary-color));
  box-shadow: none;
}

.workflow-form .form-control.negative-value {
  color: red !important;
}

.workflow-contact-link {
  display: none;
  text-align: right;
  font-size: 0.8rem;
  opacity: 0.3;
}

.workflow-calendar-link {
  display: none;
  text-align: right;
  font-size: 0.8rem;
  margin-left: auto;
  order: 2;
  opacity: 0.3;
}

.workflow-field-meta-inline {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.35rem;
}

.workflow-contact-link a {
  color: var(--link-color);
  text-decoration: none;
  margin-top: 0.35rem;
}

.workflow-calendar-link a {
  color: var(--link-color);
  text-decoration: none;
  margin-top: 0.35rem;
}

.workflow-date-note {
  font-size: 0.75rem;
  opacity: 0.35;
  line-height: 1.3;
  margin-top: 0;
  order: 1;
}

.workflow-submit-button {
  display: none;
  width: 100%;
  margin-top: 0.5rem;
}

/* container for attachments shown in the chat bubbles */
.chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* style for attachments shown in the chat bubbles */
.chat-attachment {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: var(--input-bg);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* if it’s not an image, show filename text */
.chat-attachment span {
  display: inline-block;
  font-size: 0.7rem;
  word-break: break-all;
  max-width: 100px;
}

.chat-bubble.pdf textarea {
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
    resize: both;
    font-family: monospace;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    word-break: normal;
    word-wrap: normal;
}

.suggestions {
    color: var(--smallaction-color);
    cursor: pointer;
    opacity: 0.5;
}

/* A program run displays results without reading or replacing the conversation. */
.tnx-program-results :is(#clean-button,.chat-input-container,#chat-teleport-latest,#welcome-message,#chat-empty-state,.welcome-placeholder){display:none!important}
.tnx-program-results .chat-container{padding-bottom:72px}
.tnx-program-results #program-results-return{position:fixed;inset:auto 0 0 var(--tnx-sidebar-width, 0px);width:calc(100% - var(--tnx-sidebar-width, 0px));max-width:none;min-height:56px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;z-index:20;border-radius:0}