:root {
    --chat-bg: #050505;
    --chat-panel: #0e0f12;
    --chat-panel-2: #17181c;
    --chat-line: rgba(255, 255, 255, 0.11);
    --chat-line-strong: rgba(255, 255, 255, 0.18);
    --chat-text: #f4f6f8;
    --chat-muted: #9ba4b0;
    --chat-soft: #cbd2dc;
    --chat-accent: #ff4500;
    --chat-accent-2: #ff8a4d;
    --chat-danger: #ff776e;
    --chat-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
    color-scheme: dark;
}

html[data-theme="light"] {
    --chat-bg: #f7f8f4;
    --chat-panel: #ffffff;
    --chat-panel-2: #f1f4f0;
    --chat-line: rgba(17, 24, 39, 0.12);
    --chat-line-strong: rgba(17, 24, 39, 0.2);
    --chat-text: #141821;
    --chat-muted: #67707c;
    --chat-soft: #2f3742;
    --chat-accent: #e04000;
    --chat-accent-2: #c73600;
    --chat-danger: #c03931;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body.ts-chat {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 69, 0, 0.16), transparent 31rem),
        linear-gradient(135deg, rgba(255, 138, 77, 0.08), transparent 42%),
        var(--chat-bg);
    color: var(--chat-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body.chat-landing-open {
    overflow: hidden;
}

.chat-landing {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    min-height: 100vh;
    overflow: hidden;
    background: #050505;
    color: #f8f8f8;
    transition: opacity 260ms ease, visibility 260ms ease;
}

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

.chat-landing.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.chat-landing__brand {
    position: fixed;
    top: clamp(22px, 4vw, 42px);
    left: clamp(22px, 4vw, 48px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 700;
}

.chat-landing__brand img {
    width: 34px;
    height: 34px;
}

.chat-landing__theme-toggle {
    position: fixed;
    top: clamp(20px, 4vw, 38px);
    right: clamp(20px, 4vw, 44px);
    z-index: 5;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(5, 5, 5, 0.38);
    color: #fff;
    backdrop-filter: blur(14px);
}

.chat-landing__theme-toggle:hover,
.chat-landing__theme-toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
}

.chat-landing__slides,
.chat-landing__slide,
.chat-landing__shade,
.chat-landing__grain {
    position: absolute;
    inset: 0;
}

.chat-landing__slide {
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 900ms ease, transform 5000ms ease;
}

.chat-landing__slide.is-active {
    opacity: 0.58;
    transform: scale(1);
}

.chat-landing__shade {
    background:
        radial-gradient(circle at 50% 58%, rgba(255, 69, 0, 0.22), transparent 25rem),
        linear-gradient(to bottom, rgba(5, 5, 5, 0.54), rgba(5, 5, 5, 0.72) 45%, rgba(5, 5, 5, 0.98) 100%);
    backdrop-filter: blur(3px);
}

.chat-landing__grain {
    opacity: 0.22;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 38%, rgba(255, 255, 255, 0.32) 0 1px, transparent 1.5px);
    background-size: 90px 90px, 130px 130px;
    mix-blend-mode: screen;
}

.chat-landing__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    min-height: 100vh;
    padding: 20vh clamp(20px, 4vw, 52px) 9vh;
    text-align: center;
}

.chat-landing__eyebrow {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-family: "Space Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-landing h1 {
    margin: 0;
    max-width: 980px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: 0;
}

.chat-landing__word {
    display: inline-block;
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
    transition:
        opacity 420ms ease,
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 520ms ease;
    will-change: opacity, transform, filter;
}

.chat-landing__word.is-leaving {
    transform: translateY(-0.48em);
    opacity: 0;
    filter: blur(10px);
}

.chat-landing__word.is-entering {
    transform: translateY(0.52em);
    opacity: 0;
    filter: blur(12px);
}

.chat-landing__start {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

.chat-landing__start-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 7px rgba(255, 69, 0, 0.08);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.chat-landing__start:hover .chat-landing__start-icon {
    border-color: rgba(255, 69, 0, 0.82);
    background: #ff4500;
    transform: translateY(-2px);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

.chat-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-sidebar {
    position: relative;
    z-index: 4;
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 18px;
    border-right: 1px solid var(--chat-line);
    background: color-mix(in srgb, var(--chat-panel) 90%, transparent);
    padding: 18px;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms ease;
}

.chat-sidebar__brand,
.chat-topbar,
.chat-topbar__left,
.chat-topbar__right,
.chat-composer__actions,
.chat-dialog__head {
    display: flex;
    align-items: center;
}

.chat-sidebar__brand,
.chat-topbar {
    justify-content: space-between;
}

.chat-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--chat-text);
    font-weight: 700;
    text-decoration: none;
}

.chat-brand__mark {
    width: 30px;
    height: 30px;
}

.chat-brand__text {
    line-height: 1;
}

.chat-new,
.chat-dialog__done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--chat-line-strong);
    border-radius: 8px;
    background: var(--chat-panel-2);
    color: var(--chat-text);
    cursor: pointer;
    font-weight: 700;
}

.chat-new:hover,
.chat-dialog__done:hover {
    border-color: rgba(255, 69, 0, 0.62);
}

.chat-sidebar__section {
    min-height: 0;
    flex: 1;
}

.chat-sidebar__label {
    margin: 0 0 8px;
    color: var(--chat-muted);
    font-family: "Space Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
}

.chat-history {
    display: grid;
    gap: 5px;
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding-right: 2px;
}

.chat-history__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 4px;
    align-items: stretch;
}

.chat-history__item,
.chat-history__delete,
.chat-sidebar__link,
.chat-icon-btn,
.chat-tool,
.chat-send,
.chat-account {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.chat-history__item {
    min-width: 0;
    border-radius: 7px;
    padding: 9px 10px;
    color: var(--chat-soft);
    text-align: left;
}

.chat-history__item:hover,
.chat-history__item.is-active {
    background: var(--chat-panel-2);
    color: var(--chat-text);
}

.chat-history__title,
.chat-history__meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-history__title {
    font-size: 13px;
    font-weight: 650;
}

.chat-history__meta,
.chat-empty,
.chat-hint,
.chat-status,
.chat-usage {
    color: var(--chat-muted);
    font-family: "Space Mono", monospace;
    font-size: 11px;
}

.chat-history__delete {
    display: grid;
    place-items: center;
    min-width: 32px;
    border-radius: 7px;
    color: var(--chat-muted);
}

.chat-history__delete:hover {
    background: rgba(255, 119, 110, 0.12);
    color: var(--chat-danger);
}

.chat-empty {
    padding: 12px 10px;
}

.chat-sidebar__footer {
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--chat-line);
    padding-top: 12px;
}

.chat-sidebar__link {
    border-radius: 7px;
    color: var(--chat-muted);
    padding: 8px 9px;
    text-decoration: none;
}

.chat-sidebar__link:hover {
    background: var(--chat-panel-2);
    color: var(--chat-text);
}

.chat-main {
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) auto;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.chat-topbar {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--chat-line);
    padding: 12px 22px;
    backdrop-filter: blur(18px);
}

.chat-topbar__left,
.chat-topbar__right {
    gap: 10px;
    min-width: 0;
}

.chat-icon-btn,
.chat-tool,
.chat-send,
.chat-account {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--chat-panel) 86%, transparent);
}

.chat-icon-btn:hover,
.chat-tool:hover,
.chat-account:hover {
    border-color: var(--chat-line-strong);
    background: var(--chat-panel-2);
}

.chat-model {
    min-width: 0;
}

.chat-model select {
    max-width: calc(100vw - 120px);
    height: 38px;
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: var(--chat-panel);
    color: var(--chat-text);
    padding: 0 34px 0 12px;
    font-weight: 650;
}

.chat-model__measure {
    position: fixed;
    visibility: hidden;
    pointer-events: none;
    font-size: 18px;
    font-weight: 650;
    white-space: nowrap;
}

.chat-model select:disabled {
    color: var(--chat-muted);
}

.chat-usage {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-account {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.22), rgba(255, 138, 77, 0.14));
    font-weight: 800;
}

.chat-account > .tokensmith-user-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.chat-stage {
    min-height: 0;
    overflow: hidden;
}

.chat-thread {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 18px;
    overflow: auto;
    padding: 28px clamp(18px, 5vw, 64px) 32px;
}

.chat-welcome {
    margin: auto;
    max-width: 720px;
    text-align: center;
}

.chat-welcome h1 {
    margin: 0 0 12px;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1;
    letter-spacing: 0;
}

.chat-welcome p {
    margin: 0 auto 22px;
    max-width: 560px;
    color: var(--chat-muted);
    line-height: 1.6;
}

.chat-signin {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--chat-text);
    color: var(--chat-bg);
    padding: 0 18px;
    text-decoration: none;
    font-weight: 800;
}

.chat-message {
    display: grid;
    grid-template-columns: 36px minmax(0, 760px);
    gap: 12px;
    align-items: start;
    width: 100%;
}

.chat-message--user {
    justify-content: end;
    grid-template-columns: minmax(0, 760px) 36px;
}

.chat-message__avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: var(--chat-panel);
    color: var(--chat-soft);
    font-family: "Space Mono", monospace;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
}

.chat-message--user .chat-message__avatar {
    grid-column: 2;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.24), rgba(255, 138, 77, 0.16));
}

.chat-message__bubble {
    min-width: 0;
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--chat-panel) 80%, transparent);
    padding: 14px 16px;
    line-height: 1.62;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-message--user .chat-message__bubble {
    grid-column: 1;
    grid-row: 1;
    background: color-mix(in srgb, var(--chat-accent) 13%, var(--chat-panel));
}

.chat-message__bubble p,
.chat-message__bubble h2,
.chat-message__bubble h3,
.chat-message__bubble h4,
.chat-message__bubble h5,
.chat-message__bubble ul,
.chat-message__bubble ol,
.chat-message__bubble blockquote {
    margin: 0;
}

.chat-message__bubble p + p,
.chat-message__bubble p + ul,
.chat-message__bubble p + ol,
.chat-message__bubble ul + p,
.chat-message__bubble ol + p,
.chat-message__bubble blockquote + p {
    margin-top: 14px;
}

.chat-message__bubble h2,
.chat-message__bubble h3,
.chat-message__bubble h4,
.chat-message__bubble h5 {
    color: inherit;
    line-height: 1.3;
}

.chat-message__bubble h2 {
    margin-top: 24px;
    font-size: 1.34em;
}

.chat-message__bubble h3 {
    margin-top: 20px;
    font-size: 1.18em;
}

.chat-message__bubble h4,
.chat-message__bubble h5 {
    margin-top: 16px;
    font-size: 1em;
}

.chat-message__bubble h2:first-child,
.chat-message__bubble h3:first-child,
.chat-message__bubble h4:first-child,
.chat-message__bubble h5:first-child {
    margin-top: 0;
}

.chat-message__bubble h2 + p,
.chat-message__bubble h3 + p,
.chat-message__bubble h4 + p,
.chat-message__bubble h5 + p,
.chat-message__bubble h2 + ul,
.chat-message__bubble h3 + ul,
.chat-message__bubble h4 + ul,
.chat-message__bubble h5 + ul,
.chat-message__bubble h2 + ol,
.chat-message__bubble h3 + ol,
.chat-message__bubble h4 + ol,
.chat-message__bubble h5 + ol {
    margin-top: 8px;
}

.chat-message__bubble ul,
.chat-message__bubble ol {
    padding-left: 24px;
}

.chat-message__bubble li + li {
    margin-top: 5px;
}

.chat-message__bubble blockquote {
    margin-top: 14px;
    border-left: 3px solid var(--chat-line-strong);
    color: var(--chat-muted);
    padding-left: 14px;
}

.chat-message__bubble hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--chat-line);
}

.chat-message__bubble a {
    color: var(--chat-accent-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chat-inline-code {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.14em 0.32em;
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.86em;
}

.chat-code {
    overflow: hidden;
    margin: 14px 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: #171717;
    color: #f5f5f5;
    white-space: normal;
}

.chat-code__head {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #212121;
    padding: 0 12px;
}

.chat-code__language {
    overflow: hidden;
    color: #b4b4b4;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-code__copy {
    border: 0;
    background: transparent;
    color: #d4d4d4;
    cursor: pointer;
    font-size: 12px;
}

.chat-code__copy:hover {
    color: #fff;
}

.chat-code pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px 16px;
}

.chat-code code {
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre;
}

.chat-message__bubble.is-streaming::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1.1em;
    margin-left: 3px;
    vertical-align: -0.18em;
    border-radius: 999px;
    background: var(--chat-accent);
    animation: chat-caret 0.9s ease-in-out infinite;
}

.chat-message__bubble.is-waiting {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
}

.chat-message__bubble.is-waiting::after {
    content: none;
}

.chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 42px;
    height: 20px;
}

.chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--chat-accent);
    animation: chat-typing-dot 0.9s ease-in-out infinite;
}

.chat-typing span:nth-child(2) {
    animation-delay: 0.12s;
}

.chat-typing span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes chat-caret {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@keyframes chat-typing-dot {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.chat-message--error .chat-message__bubble {
    border-color: rgba(255, 119, 110, 0.45);
    background: rgba(255, 119, 110, 0.09);
    color: var(--chat-text);
}

.chat-composer {
    display: grid;
    gap: 8px;
    padding: 0 clamp(18px, 5vw, 64px) 24px;
}

.chat-status {
    min-height: 16px;
    text-align: center;
}

.chat-composer__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: min(860px, 100%);
    margin: 0 auto;
    border: 1px solid var(--chat-line-strong);
    border-radius: 8px;
    background: color-mix(in srgb, var(--chat-panel) 93%, transparent);
    box-shadow: var(--chat-shadow);
    padding: 10px;
}

.chat-composer textarea {
    width: 100%;
    max-height: 220px;
    min-height: 42px;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--chat-text);
    line-height: 1.5;
    padding: 10px 4px 8px 6px;
}

.chat-composer textarea::placeholder {
    color: var(--chat-muted);
}

.chat-composer__actions {
    align-self: end;
    gap: 8px;
}

.chat-send {
    border-color: rgba(255, 69, 0, 0.62);
    background: var(--chat-accent);
    color: #fff;
}

.chat-send:disabled {
    cursor: wait;
    opacity: 0.75;
}

.chat-send__spin {
    display: none;
    animation: chat-spin 0.9s linear infinite;
}

.chat-send.is-loading .chat-send__icon {
    display: none;
}

.chat-send.is-loading .chat-send__spin {
    display: block;
}

@keyframes chat-spin {
    to {
        transform: rotate(360deg);
    }
}

.chat-hint {
    margin: 0 auto;
    width: min(860px, 100%);
    text-align: center;
}

.chat-dialog {
    width: min(560px, calc(100vw - 28px));
    border: 1px solid var(--chat-line-strong);
    border-radius: 8px;
    background: var(--chat-panel);
    color: var(--chat-text);
    box-shadow: var(--chat-shadow);
    padding: 0;
}

.chat-dialog::backdrop {
    background: rgba(0, 0, 0, 0.52);
}

.chat-dialog__inner {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.chat-dialog__head h2 {
    margin: 0;
    font-size: 20px;
}

.chat-field {
    display: grid;
    gap: 8px;
    color: var(--chat-soft);
    font-size: 13px;
    font-weight: 700;
}

.chat-field textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: var(--chat-bg);
    color: var(--chat-text);
    line-height: 1.5;
    padding: 12px;
}

.chat-field input[type="range"] {
    width: 100%;
}

.chat-dialog__done {
    justify-self: end;
    width: auto;
    padding: 0 18px;
}

.chat-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.chat-backdrop {
    display: none;
}

@media (max-width: 880px) {
    body.ts-chat {
        overflow: hidden;
    }

    .chat-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(320px, calc(100vw - 54px));
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    body.chat-sidebar-open .chat-sidebar {
        transform: translateX(0);
    }

    .chat-backdrop {
        position: fixed;
        inset: 0;
        z-index: 3;
        background: rgba(0, 0, 0, 0.48);
    }

    body.chat-sidebar-open .chat-backdrop {
        display: block;
    }

    .chat-main {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }

    .chat-topbar {
        padding-inline: 12px;
    }

    .chat-model {
        min-width: 0;
    }

    .chat-usage {
        display: none;
    }

    .chat-thread {
        padding-inline: 14px;
    }

    .chat-message,
    .chat-message--user {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .chat-message--user .chat-message__avatar {
        grid-column: 1;
    }

    .chat-message--user .chat-message__bubble {
        grid-column: 2;
    }

    .chat-message__avatar {
        width: 32px;
        height: 32px;
    }

    .chat-composer {
        padding-inline: 14px;
        padding-bottom: 14px;
    }

    .chat-landing__brand {
        left: 22px;
    }

    .chat-landing__content {
        padding-bottom: 8vh;
    }
}

@media (max-width: 560px) {
    .chat-topbar__right {
        gap: 6px;
    }

    .chat-icon-btn,
    .chat-tool,
    .chat-send,
    .chat-account {
        width: 36px;
        height: 36px;
    }

    .chat-model {
        max-width: calc(100vw - 120px);
    }

    .chat-composer__box {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-composer__actions {
        justify-content: flex-end;
    }
}

/* Current TokenSmith Desktop Chat parity.
   Keep this final layer in sync with tokensmithdesktop/src/renderer/styles.css. */
@font-face {
    font-family: "Nunito Sans";
    src: url("../fonts/tokensmith-chat/nunito-sans-500.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Nunito Sans";
    src: url("../fonts/tokensmith-chat/nunito-sans-600.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Nunito Sans";
    src: url("../fonts/tokensmith-chat/nunito-sans-700.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Nunito Sans";
    src: url("../fonts/tokensmith-chat/nunito-sans-800.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Space Mono";
    src: url("../fonts/tokensmith-chat/space-mono-400.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Space Mono";
    src: url("../fonts/tokensmith-chat/space-mono-700.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

body.ts-chat {
    --chat-bg: #181a1f;
    --chat-sidebar: #1d2026;
    --chat-panel: #23262d;
    --chat-panel-2: #292d35;
    --chat-control: #30353e;
    --chat-control-hover: #3a404a;
    --chat-line: rgba(255, 255, 255, 0.12);
    --chat-line-strong: rgba(255, 255, 255, 0.19);
    --chat-text: #f7f7f8;
    --chat-soft: #e5e7eb;
    --chat-muted: #aeb4bf;
    --chat-dim: #858c98;
    --chat-brand-color: #ff4500;
    font-family: "Nunito Sans", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

html[data-theme="light"] body.ts-chat {
    --chat-bg: #fff;
    --chat-sidebar: #f9f9f9;
    --chat-panel: #fff;
    --chat-panel-2: #fff;
    --chat-control: #f2f2f2;
    --chat-control-hover: #e9e9e9;
    --chat-line: rgba(0, 0, 0, 0.08);
    --chat-line-strong: rgba(0, 0, 0, 0.14);
    --chat-text: #0d0d0d;
    --chat-soft: #202123;
    --chat-muted: #656565;
    --chat-dim: #777;
    --chat-brand-color: #e04000;
}

body.ts-chat .chat-shell {
    grid-template-columns: 276px minmax(0, 1fr);
}

body.ts-chat .chat-sidebar,
html[data-theme="light"] body.ts-chat .chat-sidebar {
    padding: 0 8px 12px;
    background: var(--chat-sidebar);
}

body.ts-chat .chat-sidebar__brand {
    position: relative;
    display: flex;
    min-height: 78px;
    flex: 0 0 78px;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 14px 12px 12px 82px;
    overflow: hidden;
}

body.ts-chat .chat-sidebar__brand::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(to bottom, transparent 58%, var(--chat-sidebar) 100%),
        linear-gradient(to right, transparent 74%, var(--chat-sidebar) 100%),
        url("../assets/tokensmith-chat/titlebar-clouds-dark.png") 43% 45% / cover no-repeat;
    content: "";
    pointer-events: none;
}

html[data-theme="light"] body.ts-chat .chat-sidebar__brand::before {
    background:
        linear-gradient(to bottom, transparent 56%, var(--chat-sidebar) 100%),
        linear-gradient(to right, transparent 72%, var(--chat-sidebar) 100%),
        url("../assets/tokensmith-chat/titlebar-clouds-light.png") 39% 44% / cover no-repeat;
}

body.ts-chat .chat-brand {
    position: relative;
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
}

body.ts-chat .chat-brand__mark {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 69, 0, 0.28));
}

html[data-theme="light"] body.ts-chat .chat-brand__mark {
    filter: drop-shadow(0 2px 3px rgba(72, 42, 26, 0.42)) drop-shadow(0 0 7px rgba(255, 92, 34, 0.22));
}

body.ts-chat .chat-new {
    width: auto;
    min-height: 35px;
    margin: 5px 4px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--chat-soft);
}

body.ts-chat .chat-new:hover {
    border: 0;
    background: var(--chat-control);
    color: var(--chat-text);
}

body.ts-chat .chat-sidebar__nav {
    margin: 0 4px 12px;
}

body.ts-chat .chat-sidebar__nav-item {
    min-height: 34px;
    border: 1px solid var(--chat-line);
    border-radius: 13px;
    background: var(--chat-bg);
    color: var(--chat-dim);
}

body.ts-chat .chat-sidebar__nav-item:hover {
    border-color: var(--chat-line-strong);
    background: var(--chat-panel);
    color: var(--chat-text);
}

body.ts-chat .chat-sidebar__label {
    padding: 3px 7px 7px;
    color: var(--chat-dim);
}

body.ts-chat .chat-history__item:hover,
body.ts-chat .chat-history__item.is-active {
    background: var(--chat-control);
    box-shadow: inset 2px 0 var(--chat-muted);
}

body.ts-chat .chat-sidebar__footer-nav {
    display: grid;
    gap: 2px;
    margin: auto 0 0;
    padding: 10px 5px 8px;
    border-top: 1px solid var(--chat-line);
}

body.ts-chat .chat-sidebar__footer-nav a,
body.ts-chat .chat-sidebar__footer-nav button {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 9px;
    padding: 0 7px;
    color: var(--chat-muted);
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-decoration: none;
    font-size: 11px;
    cursor: pointer;
}

body.ts-chat .chat-sidebar__footer-nav a:hover,
body.ts-chat .chat-sidebar__footer-nav button:hover {
    background: var(--chat-control);
    color: var(--chat-text);
}

body.ts-chat .chat-account-dock {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

body.ts-chat .chat-account-bottom {
    border-radius: 10px;
}

body.ts-chat .chat-main,
html[data-theme="light"] body.ts-chat .chat-main {
    grid-template-rows: 52px minmax(0, 1fr) 0;
    background: var(--chat-bg);
}

body.ts-chat .chat-topbar,
html[data-theme="light"] body.ts-chat .chat-topbar {
    min-height: 52px;
    background: var(--chat-sidebar);
}

body.ts-chat .chat-cloud-presence {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--chat-muted);
    font-size: 10px;
    font-weight: 700;
}

body.ts-chat .chat-cloud-presence > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-muted);
}

body.ts-chat .chat-account {
    display: none;
}

body.ts-chat .chat-stage {
    position: relative;
    background: var(--chat-bg);
}

body.ts-chat .chat-thread {
    padding: 42px max(28px, calc((100% - 760px) / 2)) 210px;
}

body.ts-chat.chat-empty-state .chat-thread {
    position: relative;
    display: block;
    padding: 0;
}

body.ts-chat .chat-welcome {
    width: min(580px, 80%);
    max-width: 580px;
    transform: translateY(-28px);
}

body.ts-chat.chat-empty-state .chat-welcome {
    position: absolute;
    top: 50%;
    right: 10%;
    left: 10%;
    width: auto;
    margin: 0 auto;
    transform: translateY(-180px);
}

body.ts-chat .chat-welcome__banner {
    display: none;
}

body.ts-chat .chat-welcome__mark {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    filter: none;
}

body.ts-chat .chat-welcome__mark img {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 12px 25px rgba(255, 69, 0, 0.12));
}

body.ts-chat .chat-welcome h1 {
    margin: 18px 0 8px;
    color: var(--chat-text);
    font-size: 28px;
    font-weight: 570;
}

body.ts-chat .chat-welcome p {
    color: var(--chat-muted);
    font-size: 13px;
}

body.ts-chat .chat-signin {
    min-height: 36px;
    margin-top: 18px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--chat-text);
    color: var(--chat-bg);
}

body.ts-chat .chat-composer,
body.ts-chat.chat-empty-state .chat-composer {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px max(24px, calc((100% - 920px) / 2)) 13px;
    background: linear-gradient(transparent, var(--chat-bg) 28%);
}

body.ts-chat.chat-empty-state .chat-composer {
    top: 50%;
    bottom: auto;
    transform: translateY(-4px);
}

body.ts-chat .chat-composer__box,
html[data-theme="light"] body.ts-chat .chat-composer__box {
    min-height: 126px;
    border-color: var(--chat-line-strong);
    border-radius: 24px;
    background: var(--chat-panel-2);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
}

body.ts-chat .chat-composer__box:focus-within {
    border-color: var(--chat-muted);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.1);
}

body.ts-chat .chat-composer textarea {
    min-height: 76px;
    padding: 18px 20px 8px;
    color: var(--chat-text);
    font-size: 13px;
    line-height: 1.55;
}

body.ts-chat .chat-composer textarea::placeholder {
    color: var(--chat-dim);
}

body.ts-chat .chat-composer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 7px 12px 12px;
}

body.ts-chat .chat-composer__spacer {
    flex: 1;
}

body.ts-chat .chat-tool {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--chat-muted);
}

body.ts-chat .chat-tool:hover,
body.ts-chat .chat-attach:hover {
    background: var(--chat-control-hover);
    color: var(--chat-text);
}

body.ts-chat .chat-model select {
    max-width: 250px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--chat-soft);
}

body.ts-chat .chat-model select:hover {
    border-color: var(--chat-line-strong);
    background: var(--chat-control);
}

body.ts-chat .chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--chat-text);
    color: var(--chat-bg);
}

body.ts-chat .chat-send:hover {
    background: var(--chat-soft);
}

body.ts-chat .chat-message__avatar,
body.ts-chat .chat-message--user .chat-message__avatar {
    border-radius: 50%;
    border-color: var(--chat-line-strong);
    background: var(--chat-control);
    color: var(--chat-muted);
}

body.ts-chat .chat-message__bubble,
body.ts-chat .chat-message--user .chat-message__bubble,
html[data-theme="light"] body.ts-chat .chat-message__bubble,
html[data-theme="light"] body.ts-chat .chat-message--user .chat-message__bubble {
    color: var(--chat-soft);
}

@media (max-width: 880px) {
    body.ts-chat .chat-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    body.ts-chat .chat-main {
        grid-template-rows: 52px minmax(0, 1fr) 0;
    }

    body.ts-chat.chat-empty-state .chat-welcome {
        transform: translateY(-155px);
    }

    body.ts-chat .chat-composer,
    body.ts-chat.chat-empty-state .chat-composer {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (max-width: 560px) {
    body.ts-chat .chat-cloud-presence {
        display: none;
    }

    body.ts-chat.chat-empty-state .chat-welcome {
        top: 42%;
        right: 5%;
        left: 5%;
        transform: translateY(-128px);
    }

    body.ts-chat .chat-welcome h1 {
        font-size: 24px;
    }

    body.ts-chat.chat-empty-state .chat-composer {
        top: auto;
        bottom: 0;
        transform: none;
    }

    body.ts-chat .chat-composer,
    body.ts-chat.chat-empty-state .chat-composer {
        padding: 22px 10px 10px;
    }

    body.ts-chat .chat-model select {
        max-width: 150px;
    }
}

/* ChatGPT-like chat surface */
body.ts-chat {
    --chat-bg: #000;
    --chat-panel: #050505;
    --chat-panel-2: #2f2f2f;
    --chat-line: rgba(255, 255, 255, 0.1);
    --chat-line-strong: rgba(255, 255, 255, 0.16);
    --chat-text: #f5f5f5;
    --chat-muted: #b4b4b4;
    --chat-soft: #ececec;
    --chat-accent: #fff;
    --chat-accent-2: #e8e8e8;
    --chat-shadow: none;
    background: #000;
    color: var(--chat-text);
}

body.ts-chat .chat-shell {
    grid-template-columns: 260px minmax(0, 1fr);
}

body.ts-chat .chat-sidebar {
    gap: 12px;
    border-right-color: #242424;
    background: #000;
    padding: 14px 8px;
}

@media (min-width: 881px) {
    body.ts-chat.chat-sidebar-collapsed .chat-shell {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    body.ts-chat.chat-sidebar-collapsed .chat-sidebar {
        overflow: visible;
        gap: 10px;
        padding: 14px 8px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__brand {
        justify-content: center;
        padding: 0 0 12px;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-brand {
        justify-content: center;
        width: 44px;
        height: 44px;
        gap: 0;
        border-radius: 10px;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-brand:hover,
    body.ts-chat.chat-sidebar-collapsed .chat-new:hover,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__nav-item:hover,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__link:hover,
    body.ts-chat.chat-sidebar-collapsed .chat-account-bottom:hover {
        background: #171717;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-brand__text,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__section,
    body.ts-chat.chat-sidebar-collapsed .chat-account-bottom__text,
    body.ts-chat.chat-sidebar-collapsed .chat-account-bottom > svg {
        display: none;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-new,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__nav-item,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__link {
        justify-content: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-new svg,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__nav-item svg,
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__link svg {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-new {
        background: transparent;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__nav {
        justify-items: center;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-account-dock {
        display: grid;
        justify-items: center;
        z-index: 30;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-account-bottom {
        display: grid;
        grid-template-columns: 32px;
        place-items: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
        background: transparent;
    }

    body.ts-chat.chat-sidebar-collapsed .chat-account-menu {
        left: 0;
        right: auto;
        width: 260px;
        z-index: 40;
    }
}

body.ts-chat .chat-sidebar__brand {
    min-height: 44px;
    padding: 0 10px 12px;
}

body.ts-chat .chat-brand {
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
}

body.ts-chat .chat-brand__mark {
    width: 24px;
    height: 24px;
}

body.ts-chat .chat-new,
body.ts-chat .chat-sidebar__nav-item,
body.ts-chat .chat-sidebar__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 40px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e8e8e8;
    padding: 9px 12px;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

body.ts-chat .chat-new {
    background: #2f2f2f;
}

body.ts-chat .chat-new:hover,
body.ts-chat .chat-sidebar__nav-item:hover,
body.ts-chat .chat-sidebar__link:hover,
body.ts-chat .chat-history__item:hover,
body.ts-chat .chat-history__item.is-active {
    background: #2f2f2f;
    color: #fff;
}

body.ts-chat .chat-sidebar__nav {
    display: grid;
    gap: 2px;
}

body.ts-chat .chat-sidebar__section {
    padding-top: 26px;
}

body.ts-chat .chat-sidebar__label {
    margin: 0 12px 10px;
    color: #fff;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
}

body.ts-chat .chat-history {
    gap: 2px;
    max-height: calc(100vh - 360px);
    padding-right: 0;
}

body.ts-chat .chat-history__row {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 0;
}

body.ts-chat .chat-history__item {
    border-radius: 8px;
    padding: 9px 12px;
}

body.ts-chat .chat-history__title {
    color: #ececec;
    font-size: 14px;
    font-weight: 500;
}

body.ts-chat .chat-history__meta {
    display: none;
}

body.ts-chat .chat-history__delete {
    opacity: 0;
    color: #b4b4b4;
}

body.ts-chat .chat-history__row:hover .chat-history__delete {
    opacity: 1;
}

body.ts-chat .chat-sidebar__footer {
    gap: 2px;
    border-top-color: #242424;
    padding-top: 8px;
}

body.ts-chat .chat-account-dock {
    position: relative;
    margin-top: auto;
    padding: 0 0 0;
}

body.ts-chat .chat-account-bottom {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 10px;
    background: #0d0d0d;
    color: #ececec;
    padding: 9px 10px;
    cursor: pointer;
    text-align: left;
}

body.ts-chat .chat-account-bottom:hover,
body.ts-chat.chat-account-menu-open .chat-account-bottom {
    background: #171717;
}

body.ts-chat .chat-account-bottom__avatar,
body.ts-chat .chat-account-menu__avatar {
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #c96b2d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
}

body.ts-chat .chat-account-bottom__avatar {
    width: 32px;
    height: 32px;
}

body.ts-chat .chat-account-bottom__text,
body.ts-chat .chat-account-menu__identity {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body.ts-chat .chat-account-bottom__text span,
body.ts-chat .chat-account-menu__identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ts-chat .chat-account-bottom__text span:first-child,
body.ts-chat .chat-account-menu__identity span:first-child {
    color: #f5f5f5;
    font-size: 15px;
    font-weight: 500;
}

body.ts-chat .chat-account-bottom__text span:last-child,
body.ts-chat .chat-account-menu__identity span:last-child {
    color: #a8a8a8;
    font-size: 13px;
}

body.ts-chat .chat-account-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: grid;
    gap: 3px;
    border: 1px solid #4a4a4a;
    border-radius: 14px;
    background: #333;
    padding: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

body.ts-chat .chat-account-menu[hidden] {
    display: none;
}

body.ts-chat .chat-account-menu__user,
body.ts-chat .chat-account-menu__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 40px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ececec;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

body.ts-chat .chat-account-menu__user {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 52px;
}

body.ts-chat .chat-account-menu__avatar {
    width: 32px;
    height: 32px;
}

body.ts-chat .chat-account-menu__item:hover,
body.ts-chat .chat-account-menu__user:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.ts-chat .chat-account-menu__divider {
    height: 1px;
    margin: 6px 10px;
    background: rgba(255, 255, 255, 0.16);
}

body.ts-chat .chat-account-menu__chevron {
    justify-self: end;
}

body.ts-chat .chat-main {
    position: relative;
    grid-template-rows: 64px minmax(0, 1fr) auto;
    background: #000;
}

body.ts-chat .chat-topbar {
    border-bottom: 0;
    background: #000;
    padding: 12px 20px;
    backdrop-filter: none;
}

body.ts-chat .chat-icon-btn,
body.ts-chat .chat-tool,
body.ts-chat .chat-send,
body.ts-chat .chat-account {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #ececec;
}

body.ts-chat .chat-icon-btn:hover,
body.ts-chat .chat-tool:hover,
body.ts-chat .chat-account:hover {
    background: #2f2f2f;
}

body.ts-chat .chat-model {
    min-width: 0;
}

body.ts-chat .chat-model select {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #000;
    color: #f5f5f5;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 650;
}

body.ts-chat .chat-model select:hover {
    background: #171717;
}

body.ts-chat .chat-usage,
body.ts-chat .chat-hint,
body.ts-chat .chat-status {
    color: #8f8f8f;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

body.ts-chat .chat-usage {
    display: none;
}

body.ts-chat .chat-account {
    border-radius: 999px;
    background: #a65f2b;
    color: #fff;
    font-weight: 700;
}

body.ts-chat .chat-topbar .chat-account {
    display: none;
}

body.ts-chat .chat-stage {
    overflow: hidden;
}

body.ts-chat .chat-thread {
    max-width: 880px;
    height: 100%;
    margin: 0 auto;
    gap: 22px;
    padding: 32px 24px 34px;
}

body.ts-chat.chat-empty-state .chat-thread {
    justify-content: center;
    padding-bottom: 34px;
}

body.ts-chat .chat-welcome {
    margin: 0 auto;
    max-width: 860px;
}

body.ts-chat .chat-welcome h1 {
    margin: 0;
    font-size: clamp(28px, 2.55vw, 38px);
    font-weight: 500;
    line-height: 1.15;
}

body.ts-chat .chat-welcome p,
body.ts-chat .chat-signin {
    margin-top: 18px;
}

body.ts-chat .chat-suggestions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

body.ts-chat .chat-suggestions button {
    min-height: 42px;
    border: 1px solid #2f2f2f;
    border-radius: 999px;
    background: transparent;
    color: #ececec;
    padding: 0 18px;
    cursor: pointer;
    font-size: 15px;
}

body.ts-chat .chat-suggestions button:hover {
    background: #171717;
}

body.ts-chat .chat-message,
body.ts-chat .chat-message--user {
    display: block;
    width: 100%;
}

body.ts-chat .chat-message__avatar {
    display: none;
}

body.ts-chat .chat-message__bubble {
    width: fit-content;
    max-width: min(760px, 100%);
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #f5f5f5;
    padding: 0;
    font-size: 16px;
    line-height: 1.65;
}

body.ts-chat .chat-message--user .chat-message__bubble {
    margin-left: auto;
    border-radius: 20px;
    background: #2f2f2f;
    padding: 10px 16px;
}

body.ts-chat .chat-message--error .chat-message__bubble {
    border: 1px solid rgba(255, 119, 110, 0.45);
    background: rgba(255, 119, 110, 0.1);
    padding: 12px 14px;
}

body.ts-chat .chat-composer {
    position: relative;
    gap: 10px;
    padding: 0 24px 24px;
    background: linear-gradient(to top, #000 74%, rgba(0, 0, 0, 0));
}

body.ts-chat.chat-empty-state .chat-composer {
    background: linear-gradient(to top, #000 74%, rgba(0, 0, 0, 0));
}

body.ts-chat .chat-composer__box {
    position: relative;
    width: min(800px, 100%);
    min-height: 64px;
    align-items: end;
    border: 1px solid #2f2f2f;
    border-radius: 28px;
    background: #212121;
    box-shadow: none;
    padding: 10px 10px 10px 18px;
}

body.ts-chat .chat-drop-overlay {
    position: absolute;
    z-index: 3;
    inset: 5px;
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    gap: 9px;
    border: 2px dashed var(--chat-accent);
    border-radius: 23px;
    background: color-mix(in srgb, #212121 92%, var(--chat-accent));
    color: #f5f5f5;
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.985);
    visibility: hidden;
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

body.ts-chat .chat-composer__box.is-file-dragging .chat-drop-overlay {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition-delay: 0s;
}

body.ts-chat .chat-file-input {
    display: none;
}

body.ts-chat .chat-attachments,
body.ts-chat .chat-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.ts-chat .chat-attachments {
    grid-column: 1 / -1;
    width: 100%;
    padding: 0 4px 4px;
}

body.ts-chat .chat-attachments[hidden] {
    display: none;
}

body.ts-chat .chat-message__attachments {
    margin-bottom: 8px;
}

body.ts-chat .chat-attachment-chip {
    display: inline-flex;
    min-width: 0;
    max-width: min(100%, 280px);
    align-items: center;
    gap: 7px;
    border: 1px solid var(--chat-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chat-panel-2) 88%, transparent);
    padding: 5px 9px;
    color: var(--chat-soft);
    font-size: 0.75rem;
}

body.ts-chat .chat-attachment-chip__type {
    color: var(--chat-accent-2);
    font-family: "Space Mono", monospace;
    font-size: 0.64rem;
    text-transform: uppercase;
}

body.ts-chat .chat-attachment-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ts-chat .chat-attachment-chip button {
    border: 0;
    background: transparent;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

body.ts-chat .chat-composer textarea {
    min-height: 42px;
    color: #f5f5f5;
    padding: 11px 4px 8px 0;
    font-size: 16px;
}

body.ts-chat .chat-composer textarea::placeholder {
    color: #b4b4b4;
}

body.ts-chat .chat-tool {
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: transparent;
}

body.ts-chat .chat-attach {
    background: #292929;
}

body.ts-chat .chat-attach:hover {
    border-color: #555;
    background: #353535;
}

body.ts-chat .chat-send {
    border-radius: 999px;
    background: #fff;
    color: #000;
}

body.ts-chat .chat-send:hover {
    background: #ececec;
}

body.ts-chat .chat-dialog {
    border-color: #2f2f2f;
    border-radius: 18px;
    background: #171717;
}

body.ts-chat .chat-dialog__done {
    border-radius: 999px;
    background: #fff;
    color: #000;
}

@media (max-width: 880px) {
    body.ts-chat .chat-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.ts-chat .chat-sidebar {
        width: min(320px, calc(100vw - 48px));
    }

    body.ts-chat .chat-model {
        min-width: 0;
    }

    body.ts-chat .chat-thread {
        padding-inline: 18px;
    }

    body.ts-chat.chat-empty-state .chat-thread {
        padding-bottom: 34px;
    }

    body.ts-chat .chat-composer {
        padding-inline: 12px;
        padding-bottom: 14px;
    }

    body.ts-chat.chat-empty-state .chat-composer {
        background: linear-gradient(to top, #000 74%, rgba(0, 0, 0, 0));
    }

    body.ts-chat .chat-suggestions {
        margin-top: 18px;
    }
}

/* Light mode: ChatGPT-style, but softer than the main TokenSmith site theme */
html[data-theme="light"] body.ts-chat {
    --chat-bg: #ffffff;
    --chat-panel: #f9f9f9;
    --chat-panel-2: #ececec;
    --chat-line: rgba(0, 0, 0, 0.08);
    --chat-line-strong: rgba(0, 0, 0, 0.14);
    --chat-text: #0d0d0d;
    --chat-muted: #6f6f6f;
    --chat-soft: #202123;
    --chat-accent: #0d0d0d;
    --chat-accent-2: #2f2f2f;
    background: #ffffff;
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-sidebar {
    border-right-color: #e5e5e5;
    background: #f9f9f9;
}

html[data-theme="light"] body.ts-chat .chat-main,
html[data-theme="light"] body.ts-chat .chat-topbar {
    background: #ffffff;
}

html[data-theme="light"] body.ts-chat .chat-brand,
html[data-theme="light"] body.ts-chat .chat-topbar,
html[data-theme="light"] body.ts-chat .chat-sidebar__label,
html[data-theme="light"] body.ts-chat .chat-welcome h1,
html[data-theme="light"] body.ts-chat .chat-message__bubble,
html[data-theme="light"] body.ts-chat .chat-model select {
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-new,
html[data-theme="light"] body.ts-chat .chat-sidebar__nav-item,
html[data-theme="light"] body.ts-chat .chat-sidebar__link {
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-new {
    background: #ececec;
}

html[data-theme="light"] body.ts-chat .chat-new:hover,
html[data-theme="light"] body.ts-chat .chat-sidebar__nav-item:hover,
html[data-theme="light"] body.ts-chat .chat-sidebar__link:hover,
html[data-theme="light"] body.ts-chat .chat-history__item:hover,
html[data-theme="light"] body.ts-chat .chat-history__item.is-active {
    background: #ececec;
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-history__title {
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-history__delete {
    color: #777;
}

html[data-theme="light"] body.ts-chat .chat-sidebar__footer {
    border-top-color: #e5e5e5;
}

html[data-theme="light"] body.ts-chat .chat-icon-btn,
html[data-theme="light"] body.ts-chat .chat-tool,
html[data-theme="light"] body.ts-chat .chat-send,
html[data-theme="light"] body.ts-chat .chat-account {
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-icon-btn:hover,
html[data-theme="light"] body.ts-chat .chat-tool:hover,
html[data-theme="light"] body.ts-chat .chat-account:hover,
html[data-theme="light"] body.ts-chat .chat-model select:hover {
    background: #f3f3f3;
}

html[data-theme="light"] body.ts-chat .chat-model select {
    background: #ffffff;
}

html[data-theme="light"] body.ts-chat .chat-usage,
html[data-theme="light"] body.ts-chat .chat-hint,
html[data-theme="light"] body.ts-chat .chat-status,
html[data-theme="light"] body.ts-chat .chat-welcome p {
    color: #6f6f6f;
}

html[data-theme="light"] body.ts-chat .chat-suggestions button {
    border-color: #dedede;
    background: #ffffff;
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-suggestions button:hover {
    background: #f7f7f7;
}

html[data-theme="light"] body.ts-chat .chat-message--user .chat-message__bubble {
    background: #f4f4f4;
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-inline-code {
    background: rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] body.ts-chat .chat-code {
    border-color: #dedede;
    background: #f7f7f7;
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-code__head {
    border-color: #dedede;
    background: #ececec;
}

html[data-theme="light"] body.ts-chat .chat-code__language {
    color: #6f6f6f;
}

html[data-theme="light"] body.ts-chat .chat-code__copy {
    color: #565656;
}

html[data-theme="light"] body.ts-chat .chat-code__copy:hover {
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-message--error .chat-message__bubble {
    border-color: rgba(190, 18, 60, 0.28);
    background: rgba(190, 18, 60, 0.08);
    color: #7f1d1d;
}

html[data-theme="light"] body.ts-chat .chat-composer {
    background: linear-gradient(to top, #ffffff 74%, rgba(255, 255, 255, 0));
}

html[data-theme="light"] body.ts-chat.chat-empty-state .chat-composer {
    background: transparent;
}

html[data-theme="light"] body.ts-chat .chat-composer__box {
    border-color: #dedede;
    background: #ffffff;
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] body.ts-chat .chat-drop-overlay {
    background: color-mix(in srgb, #ffffff 92%, var(--chat-accent));
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-composer textarea {
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-composer textarea::placeholder {
    color: #7a7a7a;
}

html[data-theme="light"] body.ts-chat .chat-tool {
    border-color: #dedede;
    background: #ffffff;
}

html[data-theme="light"] body.ts-chat .chat-attach {
    background: #f4f4f4;
}

html[data-theme="light"] body.ts-chat .chat-attach:hover {
    border-color: #c5c5c5;
    background: #ebebeb;
}

html[data-theme="light"] body.ts-chat .chat-send,
html[data-theme="light"] body.ts-chat .chat-dialog__done {
    background: #0d0d0d;
    color: #ffffff;
}

html[data-theme="light"] body.ts-chat .chat-send:hover,
html[data-theme="light"] body.ts-chat .chat-dialog__done:hover {
    background: #2f2f2f;
}

html[data-theme="light"] body.ts-chat .chat-account-bottom {
    background: #ffffff;
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-account-bottom:hover,
html[data-theme="light"] body.ts-chat.chat-account-menu-open .chat-account-bottom {
    background: #ececec;
}

html[data-theme="light"] body.ts-chat .chat-account-bottom__text span:first-child,
html[data-theme="light"] body.ts-chat .chat-account-menu__identity span:first-child {
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-account-bottom__text span:last-child,
html[data-theme="light"] body.ts-chat .chat-account-menu__identity span:last-child {
    color: #6f6f6f;
}

html[data-theme="light"] body.ts-chat .chat-account-menu {
    border-color: #d8d8d8;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

html[data-theme="light"] body.ts-chat .chat-account-menu__user,
html[data-theme="light"] body.ts-chat .chat-account-menu__item {
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-account-menu__item:hover,
html[data-theme="light"] body.ts-chat .chat-account-menu__user:hover {
    background: #f3f3f3;
}

html[data-theme="light"] body.ts-chat .chat-account-menu__divider {
    background: #e5e5e5;
}

html[data-theme="light"] body.ts-chat .chat-dialog {
    border-color: #dedede;
    background: #ffffff;
    color: #0d0d0d;
}

html[data-theme="light"] body.ts-chat .chat-field,
html[data-theme="light"] body.ts-chat .chat-dialog__head h2 {
    color: #202123;
}

html[data-theme="light"] body.ts-chat .chat-field textarea {
    border-color: #dedede;
    background: #f9f9f9;
    color: #0d0d0d;
}

@media (min-width: 881px) {
    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-brand:hover,
    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-new:hover,
    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-sidebar__nav-item:hover,
    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-sidebar__link:hover,
    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-account-bottom:hover {
        background: #ececec;
    }

    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-new,
    html[data-theme="light"] body.ts-chat.chat-sidebar-collapsed .chat-account-bottom {
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-landing__word {
        transition: opacity 180ms ease;
    }

    .chat-landing__word.is-leaving,
    .chat-landing__word.is-entering {
        transform: none;
        filter: none;
    }
}

/* TokenSmith Desktop parity layer.
   The web chat shares the desktop app's compact workspace chrome while keeping
   the site's responsive navigation and account behavior intact. */
body.ts-chat {
    --chat-bg: #050505;
    --chat-panel: #0e0f12;
    --chat-panel-2: #17181c;
    --chat-line: rgba(244, 244, 245, 0.08);
    --chat-line-strong: rgba(244, 244, 245, 0.14);
    --chat-text: #f4f4f5;
    --chat-soft: #cbd2dc;
    --chat-muted: #8a8f99;
    --chat-accent: #ff4500;
    --chat-accent-2: #ff7950;
    font-family: "Nunito Sans", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    background: var(--chat-bg);
}

body.ts-chat .chat-landing {
    display: none !important;
}

body.ts-chat .chat-shell {
    grid-template-columns: 258px minmax(0, 1fr);
}

body.ts-chat .chat-sidebar {
    gap: 0;
    border-right: 1px solid var(--chat-line);
    background: #080808;
    padding: 0 8px 12px;
}

body.ts-chat .chat-sidebar__brand {
    min-height: 62px;
    padding: 10px 10px 8px;
}

body.ts-chat .chat-brand {
    gap: 9px;
    color: var(--chat-text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

body.ts-chat .chat-brand__mark {
    width: 25px;
    height: 25px;
}

body.ts-chat .chat-new {
    justify-content: flex-start;
    width: auto;
    min-height: 37px;
    margin: 5px 4px 10px;
    padding: 0 11px;
    border: 1px solid var(--chat-line-strong);
    border-radius: 8px;
    background: var(--chat-panel-2);
    color: var(--chat-text);
    font-size: 11px;
    font-weight: 700;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

body.ts-chat .chat-new:hover {
    border-color: rgba(255, 69, 0, 0.35);
    background: rgba(255, 69, 0, 0.07);
}

body.ts-chat .chat-sidebar__nav {
    display: grid;
    gap: 2px;
    margin: 0 4px 12px;
}

body.ts-chat .chat-sidebar__nav-item,
body.ts-chat .chat-sidebar__link {
    min-height: 33px;
    padding: 0 9px;
    gap: 8px;
    border-radius: 7px;
    color: var(--chat-muted);
    font-size: 11px;
    font-weight: 600;
}

body.ts-chat .chat-sidebar__nav-item:hover,
body.ts-chat .chat-sidebar__link:hover {
    color: var(--chat-text);
    background: var(--chat-panel-2);
}

body.ts-chat .chat-sidebar__nav-item svg,
body.ts-chat .chat-sidebar__link svg {
    width: 15px;
    height: 15px;
}

body.ts-chat .chat-sidebar__section {
    padding: 0;
}

body.ts-chat .chat-sidebar__label {
    margin: 0;
    padding: 5px 7px 8px;
    color: #777d88;
    font: 700 9px "Space Mono", monospace;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.ts-chat .chat-history {
    gap: 2px;
    max-height: none;
    padding: 0;
}

body.ts-chat .chat-history__row {
    grid-template-columns: minmax(0, 1fr) 26px;
}

body.ts-chat .chat-history__item {
    padding: 7px 8px;
    border-radius: 7px;
}

body.ts-chat .chat-history__item:hover,
body.ts-chat .chat-history__item.is-active {
    background: var(--chat-panel-2);
    box-shadow: inset 2px 0 var(--chat-accent);
}

body.ts-chat .chat-history__title {
    color: #b9bdc5;
    font-size: 10px;
    font-weight: 650;
}

body.ts-chat .chat-history__meta {
    display: block;
    margin-top: 2px;
    color: #5e636c;
    font: 7px "Space Mono", monospace;
}

body.ts-chat .chat-history__delete {
    min-width: 26px;
    opacity: 0;
}

body.ts-chat .chat-history__row:hover .chat-history__delete {
    opacity: 1;
}

body.ts-chat .chat-empty {
    padding: 9px 8px;
    color: #656b75;
    font: 9px/1.5 "Space Mono", monospace;
}

body.ts-chat .chat-account-dock {
    padding-top: 10px;
    border-top: 1px solid var(--chat-line);
}

body.ts-chat .chat-account-bottom {
    min-height: 44px;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    gap: 8px;
    padding: 6px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
}

body.ts-chat .chat-account-bottom:hover,
body.ts-chat.chat-account-menu-open .chat-account-bottom {
    background: var(--chat-panel-2);
}

body.ts-chat .chat-account-bottom__avatar {
    width: 28px;
    height: 28px;
    background: #542315;
    color: #ff8a66;
    font-size: 10px;
}

body.ts-chat .chat-account-bottom__text span:first-child {
    color: #cfd2d8;
    font-size: 10px;
    font-weight: 700;
}

body.ts-chat .chat-account-bottom__text span:last-child {
    color: #666c75;
    font: 7px "Space Mono", monospace;
}

body.ts-chat .chat-account-menu {
    border-color: #3b3431;
    border-radius: 12px;
    background: rgba(14, 13, 12, 0.98);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(24px);
}

body.ts-chat .chat-main {
    grid-template-rows: 52px minmax(0, 1fr) auto;
    background: var(--chat-bg);
}

body.ts-chat .chat-topbar {
    min-height: 52px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--chat-line);
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(18px);
}

body.ts-chat .chat-topbar__left,
body.ts-chat .chat-topbar__right {
    gap: 6px;
}

body.ts-chat .chat-icon-btn,
body.ts-chat .chat-tool,
body.ts-chat .chat-send,
body.ts-chat .chat-account {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--chat-muted);
}

body.ts-chat .chat-icon-btn:hover,
body.ts-chat .chat-tool:hover,
body.ts-chat .chat-account:hover {
    color: var(--chat-text);
    background: var(--chat-panel-2);
}

body.ts-chat .chat-model select {
    height: 30px;
    padding: 0 28px 0 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--chat-soft);
    font-size: 11px;
    font-weight: 700;
}

body.ts-chat .chat-model select:hover {
    border-color: var(--chat-line-strong);
    background: var(--chat-panel-2);
}

body.ts-chat .chat-model__measure {
    font-size: 11px;
    font-weight: 700;
}

body.ts-chat .chat-usage {
    display: block;
    color: #656b75;
    font: 8px "Space Mono", monospace;
}

body.ts-chat .chat-stage {
    background: radial-gradient(circle at 50% 48%, rgba(255, 69, 0, 0.025), transparent 32rem);
}

body.ts-chat .chat-thread {
    width: 100%;
    max-width: none;
    gap: 0;
    padding: 42px max(28px, calc((100% - 760px) / 2)) 170px;
}

body.ts-chat.chat-empty-state .chat-thread {
    justify-content: center;
    padding-bottom: 120px;
}

body.ts-chat .chat-welcome {
    width: min(680px, 88%);
    max-width: 680px;
    margin: auto;
    transform: translateY(-18px);
}

body.ts-chat .chat-welcome__banner {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr 0.9fr 0.9fr 1.15fr;
    width: 100%;
    height: 132px;
    margin: 0 auto 8px;
    overflow: hidden;
    border: 1px solid var(--chat-line-strong);
    border-radius: 20px;
    background: #0d0d0d;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

body.ts-chat .chat-welcome__banner::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 25%, rgba(5, 5, 5, 0.38));
    content: "";
}

body.ts-chat .chat-welcome__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.04);
}

body.ts-chat .chat-welcome__mark {
    display: grid;
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    margin: -34px auto 9px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.62));
}

body.ts-chat .chat-welcome__mark img {
    width: 44px;
    height: 44px;
}

body.ts-chat .chat-welcome h1 {
    margin: 0 0 8px;
    color: var(--chat-text);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

body.ts-chat .chat-welcome p {
    max-width: 480px;
    margin: 0 auto;
    color: #7f8590;
    font-size: 12px;
    line-height: 1.6;
}

body.ts-chat .chat-suggestions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 22px;
}

body.ts-chat .chat-suggestions button {
    display: flex;
    min-height: 72px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid var(--chat-line);
    border-radius: 9px;
    background: #0c0c0c;
    color: var(--chat-soft);
    text-align: left;
}

body.ts-chat .chat-suggestions button:hover {
    border-color: var(--chat-line-strong);
    background: var(--chat-panel-2);
}

body.ts-chat .chat-suggestions strong {
    color: #d9dbe0;
    font-size: 10px;
}

body.ts-chat .chat-suggestions span {
    color: #666c75;
    font-size: 8px;
    line-height: 1.4;
}

body.ts-chat .chat-message,
body.ts-chat .chat-message--user {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 28px;
    justify-content: initial;
}

body.ts-chat .chat-message__avatar,
body.ts-chat .chat-message--user .chat-message__avatar {
    display: grid;
    grid-column: 1;
    width: 28px;
    height: 28px;
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: var(--chat-panel-2);
    color: #aeb2ba;
    font: 700 8px "Space Mono", monospace;
}

body.ts-chat .chat-message--user .chat-message__avatar {
    border-color: rgba(255, 69, 0, 0.2);
    background: rgba(255, 69, 0, 0.08);
    color: #ff8a66;
}

body.ts-chat .chat-message__bubble,
body.ts-chat .chat-message--user .chat-message__bubble {
    grid-column: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d9dbe0;
    font-size: 13px;
    line-height: 1.65;
}

body.ts-chat .chat-message--user .chat-message__bubble {
    color: #f0f1f3;
}

body.ts-chat .chat-composer {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 0;
    padding: 30px max(24px, calc((100% - 790px) / 2)) 13px;
    background: linear-gradient(transparent, var(--chat-bg) 28%);
}

body.ts-chat.chat-empty-state .chat-composer {
    background: linear-gradient(transparent, var(--chat-bg) 28%);
}

body.ts-chat .chat-composer__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-height: 102px;
    align-items: end;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--chat-line-strong);
    border-radius: 12px;
    background: var(--chat-panel-2);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.025);
}

body.ts-chat .chat-composer__box:focus-within {
    border-color: rgba(244, 244, 245, 0.24);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

body.ts-chat .chat-composer textarea {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 66px;
    padding: 14px 15px 5px;
    color: var(--chat-text);
    font-size: 13px;
    line-height: 1.5;
}

body.ts-chat .chat-composer textarea::placeholder {
    color: #65656d;
}

body.ts-chat .chat-composer__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 8px 8px;
}

body.ts-chat .chat-tool {
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #737a85;
}

body.ts-chat .chat-tool:hover,
body.ts-chat .chat-attach:hover {
    color: #d6d9de;
    background: #22262d;
}

body.ts-chat .chat-send {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: var(--chat-accent);
    color: #fff;
}

body.ts-chat .chat-send:hover {
    background: #ff5a1f;
}

body.ts-chat .chat-composer__note {
    margin: 7px 0 0;
    color: #505057;
    text-align: center;
    font-size: 8px;
}

/* Keep history content inside its own scroll region. The desktop footer is a
   solid dock, so long chat lists never show through settings or account UI. */
body.ts-chat .chat-sidebar__section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

body.ts-chat .chat-history {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent 100%);
}

body.ts-chat .chat-sidebar__footer-nav,
body.ts-chat .chat-account-dock {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    background: var(--chat-sidebar);
}

body.ts-chat .chat-sidebar__footer-nav {
    margin: 0;
    padding: 10px 5px 7px;
    border-top: 1px solid var(--chat-line);
    box-shadow: 0 -12px 24px var(--chat-sidebar);
}

body.ts-chat .chat-account-dock {
    padding: 0 0 0;
}

body.ts-chat .chat-account-bottom {
    border: 1px solid var(--chat-line);
    background: var(--chat-panel);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 8px 20px rgba(0, 0, 0, 0.12);
}

body.ts-chat .chat-account-bottom:hover,
body.ts-chat.chat-account-menu-open .chat-account-bottom {
    border-color: var(--chat-line-strong);
    background: var(--chat-control);
}

body.ts-chat .chat-status {
    padding: 0 10px 6px;
    color: #8a8f99;
    font-size: 8px;
}

body.ts-chat .chat-dialog {
    border: 1px solid #3b3431;
    border-radius: 14px;
    background: #0e0d0c;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}

body.ts-chat .chat-dialog__done {
    min-height: 34px;
    border-color: var(--chat-accent);
    border-radius: 8px;
    background: var(--chat-accent);
    color: #fff;
}

html[data-theme="light"] body.ts-chat {
    --chat-bg: #f4f4f2;
    --chat-panel: #ffffff;
    --chat-panel-2: #ffffff;
    --chat-line: rgba(24, 24, 27, 0.09);
    --chat-line-strong: rgba(24, 24, 27, 0.16);
    --chat-text: #19191b;
    --chat-soft: #3f4147;
    --chat-muted: #777b84;
    background: var(--chat-bg);
}

html[data-theme="light"] body.ts-chat .chat-sidebar,
html[data-theme="light"] body.ts-chat .chat-topbar {
    background: rgba(249, 249, 247, 0.97);
}

html[data-theme="light"] body.ts-chat .chat-main {
    background: var(--chat-bg);
}

html[data-theme="light"] body.ts-chat .chat-suggestions button {
    background: #fff;
}

html[data-theme="light"] body.ts-chat .chat-brand,
html[data-theme="light"] body.ts-chat .chat-model select,
html[data-theme="light"] body.ts-chat .chat-welcome h1 {
    color: var(--chat-text);
}

html[data-theme="light"] body.ts-chat .chat-suggestions strong,
html[data-theme="light"] body.ts-chat .chat-message__bubble,
html[data-theme="light"] body.ts-chat .chat-message--user .chat-message__bubble {
    color: #303136;
}

html[data-theme="light"] body.ts-chat .chat-composer,
html[data-theme="light"] body.ts-chat.chat-empty-state .chat-composer {
    background: linear-gradient(transparent, var(--chat-bg) 28%);
}

html[data-theme="light"] body.ts-chat .chat-composer__box {
    background: #fff;
    box-shadow: 0 18px 48px rgba(27, 27, 31, 0.1);
}

html[data-theme="light"] body.ts-chat .chat-composer textarea {
    color: var(--chat-text);
}

html[data-theme="light"] body.ts-chat .chat-account-menu,
html[data-theme="light"] body.ts-chat .chat-dialog {
    border-color: #deddda;
    background: #fff;
    color: var(--chat-text);
}

@media (min-width: 881px) {
    body.ts-chat.chat-sidebar-collapsed .chat-shell {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    body.ts-chat.chat-sidebar-collapsed .chat-sidebar {
        padding: 0 8px 12px;
    }
}

@media (max-width: 880px) {
    body.ts-chat .chat-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    body.ts-chat .chat-sidebar {
        width: min(296px, calc(100vw - 42px));
    }

    body.ts-chat .chat-usage {
        display: none;
    }

    body.ts-chat .chat-thread {
        padding: 28px 18px 158px;
    }

    body.ts-chat .chat-composer {
        padding: 26px 12px 10px;
    }
}

@media (max-width: 560px) {
    body.ts-chat .chat-topbar {
        padding-inline: 8px;
    }

    body.ts-chat .chat-welcome {
        width: 94%;
        transform: translateY(-8px);
    }

    body.ts-chat .chat-welcome h1 {
        font-size: 24px;
    }

    body.ts-chat .chat-welcome__banner {
        height: 104px;
        border-radius: 16px;
    }

    body.ts-chat .chat-suggestions {
        grid-template-columns: 1fr;
    }

    body.ts-chat .chat-suggestions button {
        min-height: 54px;
    }

    body.ts-chat .chat-composer__note {
        display: none;
    }
}

/* Desktop-parity chat controls and their companion surfaces. */
body.ts-chat [hidden] {
    display: none !important;
}

body.ts-chat .chat-topbar__right {
    gap: 3px;
}

body.ts-chat .chat-topbar__right > .theme-toggle {
    order: 99;
}

body.ts-chat .chat-top-action {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    color: var(--chat-muted);
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

body.ts-chat .chat-top-action:hover,
body.ts-chat .chat-top-action.is-selected {
    color: var(--chat-text);
    border-color: var(--chat-line);
    background: var(--chat-control);
}

body.ts-chat .chat-top-action:disabled {
    opacity: 0.42;
    cursor: default;
}

body.ts-chat .chat-top-action > span {
    display: none;
}

body.ts-chat .chat-top-action.is-private {
    width: auto;
    padding: 0 9px;
    color: var(--chat-text);
    border-color: var(--chat-line-strong);
    background: var(--chat-control);
    border-radius: 999px;
    font-size: 11px;
}

body.ts-chat .chat-top-action.is-private > span {
    display: inline;
}

body.ts-chat .chat-response-detail-wrap {
    position: relative;
}

body.ts-chat .chat-response-detail-menu {
    position: absolute;
    z-index: 36;
    top: 37px;
    right: 0;
    width: 270px;
    padding: 7px;
    color: var(--chat-muted);
    border: 1px solid var(--chat-line-strong);
    border-radius: 14px;
    background: var(--chat-panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

body.ts-chat .chat-response-detail-menu > header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 7px 9px;
}

body.ts-chat .chat-response-detail-menu > header strong {
    color: var(--chat-text);
    font-size: 10px;
}

body.ts-chat .chat-response-detail-menu > header small {
    color: var(--chat-dim);
    font-size: 8px;
}

body.ts-chat .chat-response-detail-menu > button {
    display: grid;
    width: 100%;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    color: var(--chat-muted);
    text-align: left;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}

body.ts-chat .chat-response-detail-menu > button:hover {
    color: var(--chat-text);
    background: var(--chat-control);
}

body.ts-chat .chat-response-detail-menu > button > span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body.ts-chat .chat-response-detail-menu button strong {
    color: inherit;
    font-size: 9px;
}

body.ts-chat .chat-response-detail-menu button small {
    color: var(--chat-dim);
    font-size: 7.5px;
    line-height: 1.35;
}

body.ts-chat .chat-response-detail-check {
    visibility: hidden;
    color: var(--chat-soft);
    text-align: center;
    font-size: 12px;
}

body.ts-chat .chat-response-detail-menu [aria-checked="true"] .chat-response-detail-check {
    visibility: visible;
}

body.ts-chat .chat-agent-activity {
    margin: 0 0 10px;
    padding: 8px 10px;
    color: var(--chat-muted);
    border: 1px solid var(--chat-line);
    border-radius: 10px;
    background: var(--chat-control);
    font-size: 10px;
}

body.ts-chat .chat-agent-activity summary {
    cursor: pointer;
    font-weight: 700;
}

body.ts-chat .chat-agent-activity pre {
    margin: 8px 0 0;
    overflow: auto;
    white-space: pre-wrap;
    font: 9px/1.55 "Space Mono", monospace;
}

body.ts-chat .chat-command-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: min(11vh, 96px) 24px 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
}

body.ts-chat .chat-shortcut-guide {
    display: flex;
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 120px);
    overflow: hidden;
    flex-direction: column;
    color: var(--chat-text);
    border: 1px solid var(--chat-line-strong);
    border-radius: 22px;
    background: var(--chat-panel);
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.5);
}

body.ts-chat .chat-shortcut-guide > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 12px;
    padding: 18px 19px 16px;
    border-bottom: 1px solid var(--chat-line);
    background: linear-gradient(135deg, var(--chat-panel), var(--chat-sidebar));
}

body.ts-chat .chat-shortcut-guide-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--chat-soft);
    border-radius: 13px;
    background: var(--chat-control);
}

body.ts-chat .chat-shortcut-guide > header > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body.ts-chat .chat-shortcut-guide em,
body.ts-chat .chat-private-dialog em {
    color: var(--chat-dim);
    text-transform: uppercase;
    font: 700 7px "Space Mono", monospace;
    font-style: normal;
    letter-spacing: 0.09em;
}

body.ts-chat .chat-shortcut-guide h2,
body.ts-chat .chat-private-dialog h3 {
    margin: 0;
    color: var(--chat-text);
    font-size: 18px;
    letter-spacing: -0.025em;
}

body.ts-chat .chat-shortcut-guide > header small {
    color: var(--chat-muted);
    font-size: 9px;
}

body.ts-chat .chat-shortcut-guide > header button,
body.ts-chat .chat-private-dialog > header button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--chat-muted);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

body.ts-chat .chat-shortcut-guide > header button:hover,
body.ts-chat .chat-private-dialog > header button:hover {
    color: var(--chat-text);
    background: var(--chat-control);
}

body.ts-chat .chat-shortcut-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    overflow: auto;
}

body.ts-chat .chat-shortcut-sections > section {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--chat-line);
    border-radius: 15px;
    background: var(--chat-sidebar);
}

body.ts-chat .chat-shortcut-sections h3 {
    margin: 0 0 8px;
    color: var(--chat-dim);
    text-transform: uppercase;
    font: 700 8px "Space Mono", monospace;
    letter-spacing: 0.08em;
}

body.ts-chat .chat-shortcut-sections section > div {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--chat-soft);
    border-top: 1px solid var(--chat-line);
    font-size: 9px;
}

body.ts-chat .chat-shortcut-sections section > div > span:last-child,
body.ts-chat .chat-shortcut-guide > footer > span:last-child {
    display: flex;
    align-items: center;
    gap: 3px;
}

body.ts-chat .chat-shortcut-guide kbd {
    display: grid;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    place-items: center;
    color: var(--chat-soft);
    border: 1px solid var(--chat-line-strong);
    border-radius: 7px;
    background: var(--chat-control);
    box-shadow: inset 0 -1px var(--chat-line-strong);
    font: 700 8px "Space Mono", monospace;
}

body.ts-chat .chat-shortcut-guide > footer {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 18px;
    color: var(--chat-muted);
    border-top: 1px solid var(--chat-line);
    background: var(--chat-sidebar);
    font-size: 8px;
}

body.ts-chat .chat-private-dialog {
    width: min(520px, calc(100vw - 48px));
    overflow: hidden;
    color: var(--chat-text);
    border: 1px solid var(--chat-line-strong);
    border-radius: 18px;
    background: var(--chat-panel);
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.5);
}

body.ts-chat .chat-private-dialog > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid var(--chat-line);
}

body.ts-chat .chat-private-dialog > header > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.ts-chat .chat-private-dialog-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--chat-soft);
    border-radius: 12px;
    background: var(--chat-control);
}

body.ts-chat .chat-private-dialog h3 {
    font-size: 15px;
}

body.ts-chat .chat-private-body {
    padding: 16px;
}

body.ts-chat .chat-private-body > p {
    margin: 0;
    color: var(--chat-muted);
    font-size: 10px;
    line-height: 1.6;
}

body.ts-chat .chat-private-body > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 12px;
}

body.ts-chat .chat-private-body span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    color: var(--chat-soft);
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    background: var(--chat-control);
    font-size: 8px;
}

body.ts-chat .chat-private-body span:last-child {
    grid-column: 1 / -1;
}

body.ts-chat .chat-private-dialog > footer {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding: 10px 14px;
    border-top: 1px solid var(--chat-line);
    background: var(--chat-sidebar);
}

body.ts-chat .chat-private-dialog > footer button {
    min-height: 32px;
    padding: 0 11px;
    color: var(--chat-soft);
    border: 1px solid var(--chat-line);
    border-radius: 9px;
    background: var(--chat-control);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

body.ts-chat .chat-private-dialog > footer .primary {
    color: var(--chat-bg);
    border-color: var(--chat-text);
    background: var(--chat-text);
}

body.ts-chat .chat-composer__note.is-private {
    color: var(--chat-muted);
}

body.ts-chat .chat-side-panel {
    position: absolute;
    z-index: 30;
    top: 61px;
    right: 12px;
    bottom: 12px;
    display: flex;
    width: min(390px, calc(100% - 24px));
    overflow: hidden;
    flex-direction: column;
    color: var(--chat-text);
    border: 1px solid var(--chat-line-strong);
    border-radius: 18px;
    background: color-mix(in srgb, var(--chat-panel) 96%, transparent);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(26px);
}

body.ts-chat .chat-side-panel > header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid var(--chat-line);
}

body.ts-chat .chat-side-panel > header > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

body.ts-chat .chat-side-panel > header i {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    color: var(--chat-soft);
    border-radius: 10px;
    background: var(--chat-control);
    font-style: normal;
}

body.ts-chat .chat-side-panel > header span span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

body.ts-chat .chat-side-panel > header strong {
    color: var(--chat-text);
    font-size: 11px;
}

body.ts-chat .chat-side-panel > header small {
    color: var(--chat-dim);
    font-size: 8px;
}

body.ts-chat .chat-side-panel > header button {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: var(--chat-muted);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

body.ts-chat .chat-side-panel > header button:hover {
    color: var(--chat-text);
    background: var(--chat-control);
}

body.ts-chat .chat-side-context {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    color: var(--chat-dim);
    border-bottom: 1px solid var(--chat-line);
    background: color-mix(in srgb, var(--chat-control) 58%, transparent);
    font-size: 7.5px;
}

body.ts-chat .chat-side-context > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ts-chat .chat-side-context > em {
    margin-left: auto;
    white-space: nowrap;
    font: 7px "Space Mono", monospace;
    font-style: normal;
}

body.ts-chat .chat-side-stream {
    min-height: 0;
    flex: 1;
    padding: 15px 14px;
    overflow: auto;
}

body.ts-chat .chat-side-stream article {
    margin-bottom: 18px;
}

body.ts-chat .chat-side-stream article > span {
    display: block;
    margin-bottom: 5px;
    color: var(--chat-dim);
    font-size: 8px;
    font-weight: 750;
}

body.ts-chat .chat-side-stream article p {
    margin: 0;
    color: var(--chat-soft);
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
}

body.ts-chat .chat-side-stream article.user p {
    padding: 9px 11px;
    border-radius: 13px 13px 4px 13px;
    background: var(--chat-control);
}

body.ts-chat .chat-side-empty {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 30px;
    color: var(--chat-dim);
    text-align: center;
}

body.ts-chat .chat-side-empty strong {
    color: var(--chat-soft);
    font-size: 11px;
}

body.ts-chat .chat-side-empty span {
    max-width: 260px;
    font-size: 8px;
    line-height: 1.55;
}

body.ts-chat .chat-side-working {
    color: var(--chat-muted);
    font-size: 8px;
}

body.ts-chat .chat-side-error {
    margin: 0 12px 8px;
    padding: 7px 9px;
    color: #d98672;
    border-radius: 8px;
    background: rgba(180, 62, 38, 0.09);
    font-size: 8px;
}

body.ts-chat .chat-side-composer {
    margin: 0 10px 10px;
    overflow: hidden;
    border: 1px solid var(--chat-line-strong);
    border-radius: 14px;
    background: var(--chat-bg);
}

body.ts-chat .chat-side-composer:focus-within {
    border-color: var(--chat-muted);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-accent) 14%, transparent);
}

body.ts-chat .chat-side-composer textarea {
    display: block;
    width: 100%;
    min-height: 72px;
    padding: 11px 11px 5px;
    resize: none;
    color: var(--chat-text);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 10px;
    line-height: 1.5;
}

body.ts-chat .chat-side-composer footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 7px 7px;
}

body.ts-chat .chat-side-composer footer > span {
    color: var(--chat-dim);
    font-size: 7.5px;
}

body.ts-chat .chat-side-composer footer > button {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: var(--chat-bg);
    border: 0;
    border-radius: 50%;
    background: var(--chat-text);
    cursor: pointer;
}

body.ts-chat .chat-side-composer footer > button:disabled {
    color: var(--chat-dim);
    background: var(--chat-control);
    cursor: default;
}

@media (max-width: 760px) {
    body.ts-chat .chat-usage,
    body.ts-chat .chat-account {
        display: none;
    }

    body.ts-chat .chat-shortcut-sections {
        grid-template-columns: 1fr;
    }

    body.ts-chat .chat-command-backdrop {
        padding: 24px;
    }

    body.ts-chat .chat-shortcut-guide {
        max-height: calc(100vh - 48px);
    }
}

@media (max-width: 540px) {
    body.ts-chat .chat-topbar {
        padding-right: 7px;
    }

    body.ts-chat .chat-top-action {
        width: 28px;
        height: 28px;
    }

    body.ts-chat .chat-side-panel {
        top: 54px;
        right: 7px;
        bottom: 7px;
        width: calc(100% - 14px);
    }
}

/* Desktop shape system: circular symbols, pill controls, rounded content surfaces.
   Mirrors tokensmithdesktop/src/renderer/styles.css in both themes. */
body.ts-chat {
    --tokensmith-font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tokensmith-radius-control: var(--chat-radius-control);
    --tokensmith-radius-panel: var(--chat-radius-panel);
    --chat-bg: #171819;
    --chat-sidebar: #111213;
    --chat-panel: #202123;
    --chat-panel-2: #242527;
    --chat-control: #292b2d;
    --chat-control-hover: #323436;
    --chat-line: rgba(255,255,255,.075);
    --chat-line-strong: rgba(255,255,255,.14);
    --chat-text: #f0f0ee;
    --chat-soft: #d1d2cf;
    --chat-muted: #a0a39f;
    --chat-dim: #858984;
    --chat-radius-control: 999px;
    --chat-radius-circle: 50%;
    --chat-radius-item: 12px;
    --chat-radius-panel: 24px;
    --chat-shadow: 0 16px 48px rgba(0,0,0,.18);
    background: var(--chat-bg);
}
html[data-theme="light"] body.ts-chat {
    --chat-bg: #fcfcfa;
    --chat-sidebar: #f2f3ef;
    --chat-panel: #fff;
    --chat-panel-2: #f5f6f2;
    --chat-control: #e9ebe5;
    --chat-control-hover: #e2e5dd;
    --chat-line: rgba(28,34,24,.08);
    --chat-line-strong: rgba(28,34,24,.16);
    --chat-text: #20231e;
    --chat-soft: #3f443c;
    --chat-muted: #676e61;
    --chat-dim: #737a6d;
    --chat-shadow: 0 12px 40px rgba(28,34,24,.06);
}
body.ts-chat :is(button, a, input, textarea, select):focus-visible {
    outline: 2px solid var(--chat-accent);
    outline-offset: 3px;
}
body.ts-chat :is(button, a, select) { -webkit-tap-highlight-color: transparent; }
body.ts-chat .chat-shell { grid-template-columns: 260px minmax(0,1fr); }
body.ts-chat .chat-sidebar,
html[data-theme="light"] body.ts-chat .chat-sidebar {
    gap: 0;
    padding: 0 12px 12px;
    background: var(--chat-sidebar);
    border-right: 1px solid var(--chat-line);
}
body.ts-chat .chat-sidebar__brand {
    min-height: 76px;
    flex: 0 0 76px;
    margin: 0;
    padding: 0 8px;
    align-items: center;
    justify-content: flex-start;
}
body.ts-chat .chat-sidebar__brand::before { display: none; }
body.ts-chat .chat-brand { display: flex; width: auto; height: 36px; gap: 9px; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
body.ts-chat .chat-brand__mark,
html[data-theme="light"] body.ts-chat .chat-brand__mark { width: 25px; height: 25px; filter: none; }
body.ts-chat .chat-sidebar__collapse { position: absolute; top: 21px; right: 2px; }
body.ts-chat .chat-new,
html[data-theme="light"] body.ts-chat .chat-new {
    display: flex;
    width: 100%;
    min-height: 40px;
    flex: 0 0 40px;
    margin: 0 0 10px;
    padding: 0 12px;
    gap: 10px;
    color: var(--chat-text);
    border: 1px solid var(--chat-line-strong);
    border-radius: var(--chat-radius-control);
    background: var(--chat-panel);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    font-size: 13px;
    font-weight: 600;
}
body.ts-chat .chat-new:hover,
html[data-theme="light"] body.ts-chat .chat-new:hover { background: var(--chat-control); border-color: var(--chat-line-strong); }
body.ts-chat .chat-new kbd { margin-left: auto; color: var(--chat-dim); font-size: 11px; font-family: inherit; }
body.ts-chat .chat-sidebar__nav { margin: 0 0 24px; }
body.ts-chat .chat-sidebar__nav-item,
html[data-theme="light"] body.ts-chat .chat-sidebar__nav-item {
    display: flex; height: 38px; padding: 0 12px; gap: 10px;
    border: 1px solid transparent; border-radius: var(--chat-radius-control);
    background: transparent; color: var(--chat-dim);
}
body.ts-chat .chat-sidebar__nav-item:focus-within { border-color: var(--chat-line-strong); background: var(--chat-panel); }
body.ts-chat #chat-search { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--chat-text); font-family: inherit; font-size: 12px; }
body.ts-chat #chat-search::placeholder { color: var(--chat-muted); }
body.ts-chat .chat-sidebar__label { margin: 0; padding: 0 12px 12px; color: var(--chat-dim); font: 600 10px "Nunito Sans",sans-serif; letter-spacing: .1em; }
body.ts-chat .chat-history { display: flex; flex-direction: column; padding: 0; scrollbar-width: thin; scrollbar-color: var(--chat-line-strong) transparent; }
body.ts-chat .chat-history__row { position: relative; display: block; flex: 0 0 auto; margin-bottom: 3px; }
body.ts-chat .chat-history__item { width: 100%; padding: 10px 12px; border-radius: var(--chat-radius-item); }
body.ts-chat .chat-history__item:hover,
body.ts-chat .chat-history__item.is-active,
html[data-theme="light"] body.ts-chat .chat-history__item:hover,
html[data-theme="light"] body.ts-chat .chat-history__item.is-active { background: var(--chat-control); box-shadow: none; }
body.ts-chat .chat-history__title { color: var(--chat-soft); font-size: 13px; font-weight: 600; line-height: 19px; }
body.ts-chat .chat-history__meta { margin-top: 2px; color: var(--chat-dim); font: 11px/16px "Nunito Sans",sans-serif; }
body.ts-chat .chat-history__delete { position: absolute; top: 6px; right: 4px; width: 32px; height: 32px; opacity: 0; border-radius: var(--chat-radius-circle); background: var(--chat-control); }
body.ts-chat .chat-history__row:hover .chat-history__item,
body.ts-chat .chat-history__row:focus-within .chat-history__item { padding-right: 36px; }
body.ts-chat .chat-history__row:hover .chat-history__delete,
body.ts-chat .chat-history__row:focus-within .chat-history__delete { opacity: 1; }
body.ts-chat .chat-empty { padding: 8px 12px; color: var(--chat-dim); font: 12px/1.6 "Nunito Sans",sans-serif; }
body.ts-chat .chat-sidebar__footer-nav { padding: 10px 0 6px; box-shadow: none; }
body.ts-chat .chat-sidebar__footer-nav button { min-height: 36px; padding: 0 12px; font-size: 12px; border-radius: var(--chat-radius-control); }
body.ts-chat .chat-account-bottom,
html[data-theme="light"] body.ts-chat .chat-account-bottom { min-height: 54px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--chat-radius-item); background: transparent; box-shadow: none; }
body.ts-chat .chat-account-bottom:hover { background: var(--chat-control); }
body.ts-chat .chat-account-bottom__avatar { width: 30px; height: 30px; font-size: 12px; }
body.ts-chat .chat-account-bottom__text span:first-child { color: var(--chat-soft); font-size: 12px; font-weight: 700; }
body.ts-chat .chat-account-bottom__text span:last-child { margin-top: 2px; color: var(--chat-dim); font: 10px "Nunito Sans",sans-serif; }
body.ts-chat .chat-main,
html[data-theme="light"] body.ts-chat .chat-main { grid-template-rows: 56px minmax(0,1fr) 0; background: var(--chat-bg); }
body.ts-chat .chat-topbar,
html[data-theme="light"] body.ts-chat .chat-topbar { min-height: 56px; padding: 0 22px; border-bottom: 1px solid var(--chat-line); background: var(--chat-bg); }
body.ts-chat .chat-cloud-presence { gap: 8px; color: var(--chat-muted); font-size: 12px; font-weight: 600; }
body.ts-chat .chat-cloud-presence > span { width: 5px; height: 5px; background: var(--chat-dim); }
body.ts-chat .chat-topbar__right { gap: 4px; }
body.ts-chat :is(.chat-icon-btn,.chat-top-action,.chat-tool,.chat-topbar .theme-toggle),
html[data-theme="light"] body.ts-chat :is(.chat-icon-btn,.chat-top-action,.chat-tool,.chat-topbar .theme-toggle) {
    width: 34px; height: 34px; flex-shrink: 0; padding: 0;
    border: 1px solid transparent; border-radius: var(--chat-radius-circle);
    background: transparent; color: var(--chat-muted);
}
body.ts-chat :is(.chat-icon-btn,.chat-top-action,.chat-tool,.chat-topbar .theme-toggle):hover { color: var(--chat-text); background: var(--chat-control); }
body.ts-chat :is(.chat-icon-btn,.chat-top-action,.chat-tool,.chat-new,.chat-sidebar__nav-item,.chat-sidebar__footer-nav,.chat-account-bottom) svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; }
/* Keep the labeled toggle wider than the shared icon-only controls in both themes. */
body.ts-chat .chat-top-action.is-private,
html[data-theme="light"] body.ts-chat .chat-top-action.is-private {
    width: auto;
    gap: 8px;
    padding: 0 10px;
    white-space: nowrap;
    border-radius: var(--chat-radius-control);
    background: var(--chat-control);
}
body.ts-chat .chat-usage { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--chat-line); color: var(--chat-dim); font: 10px "Nunito Sans",sans-serif; }
body.ts-chat .chat-stage { background: none; }
body.ts-chat .chat-thread { padding: 36px max(24px,calc((100% - 760px)/2)) 240px; }
body.ts-chat.chat-empty-state .chat-thread { display: block; padding: 0; }
body.ts-chat.chat-empty-state .chat-welcome { position: absolute; top: calc(50% - 72px); right: 24px; left: 24px; width: auto; max-width: 640px; margin: 0 auto; transform: translateY(-100%); }
body.ts-chat .chat-welcome__banner { display: none; }
body.ts-chat .chat-welcome__mark,
body.ts-chat .chat-welcome__mark img { margin: 0 auto; width: 40px; height: 40px; filter: none; background: transparent; }
body.ts-chat .chat-welcome h1 { margin: 22px 0 10px; color: var(--chat-text); font-size: clamp(26px,2.8vw,36px); line-height: 1.2; font-weight: 600; letter-spacing: -1.2px; }
body.ts-chat .chat-welcome p { margin: 0 auto; color: var(--chat-muted); font-size: 14px; line-height: 1.6; }
body.ts-chat .chat-composer,
body.ts-chat.chat-empty-state .chat-composer,
html[data-theme="light"] body.ts-chat.chat-empty-state .chat-composer { top: auto; right: 0; bottom: 0; left: 0; padding: 24px max(24px,calc((100% - 760px)/2)) 18px; transform: none; background: linear-gradient(transparent,var(--chat-bg) 28%); }
body.ts-chat.chat-empty-state .chat-composer,
html[data-theme="light"] body.ts-chat.chat-empty-state .chat-composer { top: 50%; bottom: auto; padding-top: 0; background: transparent; }
body.ts-chat .chat-composer__box,
html[data-theme="light"] body.ts-chat .chat-composer__box { min-height: 158px; border: 1px solid var(--chat-line-strong); border-radius: var(--chat-radius-panel); background: var(--chat-panel); box-shadow: none; }
body.ts-chat .chat-composer__box:focus-within,
html[data-theme="light"] body.ts-chat .chat-composer__box:focus-within { border-color: var(--chat-line-strong); box-shadow: 0 0 0 1px color-mix(in srgb,var(--chat-soft) 12%,transparent); }
body.ts-chat .chat-composer textarea { min-height: 102px; padding: 18px 20px 8px; color: var(--chat-text); font-size: 14px; line-height: 1.6; }
body.ts-chat .chat-composer textarea:focus-visible { outline: none; box-shadow: none; }
body.ts-chat .chat-composer textarea { border-radius: 0 !important; }
body.ts-chat .chat-composer textarea::placeholder { color: var(--chat-dim); }
body.ts-chat .chat-composer__actions { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 7px; padding: 7px 12px 12px; }
body.ts-chat .chat-composer__spacer { flex: 1; }
body.ts-chat .chat-model { position: relative; flex: 0 1 auto; max-width: min(300px,55%); }
body.ts-chat .chat-model select,
html[data-theme="light"] body.ts-chat .chat-model select { appearance: none; width: auto; max-width: 100%; height: 34px; padding: 0 26px 0 8px; border: 1px solid transparent; border-radius: var(--chat-radius-control) !important; background-color: transparent; color: var(--chat-soft); text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
body.ts-chat .chat-model::after { position: absolute; top: 13px; right: 11px; width: 6px; height: 6px; border-right: 1.5px solid var(--chat-muted); border-bottom: 1.5px solid var(--chat-muted); transform: rotate(45deg); pointer-events: none; content: ""; }
body.ts-chat .chat-model select:hover { background-color: var(--chat-control); }
body.ts-chat .chat-model__measure { font-size: 12px; font-weight: 600; }
body.ts-chat .chat-send,
html[data-theme="light"] body.ts-chat .chat-send { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--chat-radius-circle); background: var(--chat-text); color: var(--chat-bg); }
body.ts-chat .chat-send:hover,
html[data-theme="light"] body.ts-chat .chat-send:hover { background: var(--chat-soft); }
body.ts-chat .chat-send__icon { width: 18px; height: 18px; }
body.ts-chat .chat-composer__note { margin: 12px 0 0; color: var(--chat-dim); font-size: 10px; }
body.ts-chat .chat-status { color: var(--chat-muted); font-size: 12px; }
body.ts-chat .chat-message { grid-template-columns: 28px minmax(0,1fr); gap: 12px; margin-bottom: 30px; }
body.ts-chat .chat-message__content { min-width: 0; grid-column: 2; }
body.ts-chat .chat-message__content .chat-message__bubble { grid-column: auto; color: var(--chat-soft); font-size: 14px; line-height: 1.75; }
body.ts-chat .chat-message__avatar { border-radius: var(--chat-radius-circle); }
body.ts-chat .chat-message__avatar img { width: 18px; height: 18px; }
body.ts-chat .chat-message--user { grid-template-columns: minmax(0,1fr) 28px; }
body.ts-chat .chat-message--user .chat-message__avatar { grid-column: 2; grid-row: 1; }
body.ts-chat .chat-message--user .chat-message__content { width: fit-content; max-width: 85%; grid-column: 1; grid-row: 1; justify-self: end; }
body.ts-chat .chat-message--user .chat-message__content .chat-message__bubble,
html[data-theme="light"] body.ts-chat .chat-message--user .chat-message__content .chat-message__bubble { padding: 10px 16px; border: 1px solid var(--chat-line); border-radius: var(--chat-radius-panel); background: var(--chat-panel-2); color: var(--chat-text); }
body.ts-chat :is(.chat-dialog,.chat-account-menu,.chat-response-detail-menu,.chat-side-panel,.chat-shortcut-guide,.chat-private-dialog),
html[data-theme="light"] body.ts-chat :is(.chat-dialog,.chat-account-menu) { border-color: var(--chat-line-strong); border-radius: var(--chat-radius-panel); background: var(--chat-panel); color: var(--chat-text); box-shadow: var(--chat-shadow); }
body.ts-chat :is(.chat-account-menu__user,.chat-account-menu__item),
html[data-theme="light"] body.ts-chat :is(.chat-account-menu__user,.chat-account-menu__item) { color: var(--chat-soft); font-size: 13px; border-radius: var(--chat-radius-control); }
body.ts-chat :is(.chat-response-detail-menu header strong,.chat-response-detail-menu button strong,.chat-side-panel header strong) { font-size: 12px; }
body.ts-chat :is(.chat-response-detail-menu header small,.chat-response-detail-menu button small,.chat-side-panel header small,.chat-side-empty span,.chat-side-stream article > span,.chat-side-composer footer > span) { font-size: 11px; line-height: 1.5; }
body.ts-chat :is(.chat-side-stream article p,.chat-side-composer textarea,.chat-side-empty strong) { font-size: 13px; }
body.ts-chat .chat-side-panel { top: 66px; }
body.ts-chat .chat-side-composer { border-radius: var(--chat-radius-panel); }
body.ts-chat .chat-dialog__head h2 { color: var(--chat-text); font-size: 18px; }
body.ts-chat .chat-field { color: var(--chat-soft); font-size: 13px; }
body.ts-chat .chat-field textarea { border-radius: var(--chat-radius-item) !important; background: var(--chat-bg); color: var(--chat-text); border-color: var(--chat-line-strong); }
body.ts-chat .chat-dialog__done { border-radius: var(--chat-radius-control); border-color: var(--chat-text); background: var(--chat-text); color: var(--chat-bg); }
body.ts-chat :is(.chat-shortcut-guide header small,.chat-shortcut-sections section > div,.chat-shortcut-guide footer,.chat-private-body > p) { font-size: 12px; }
body.ts-chat :is(.chat-shortcut-sections h3,.chat-shortcut-guide kbd,.chat-private-body span,.chat-private-dialog footer button) { font-size: 11px; }
body.ts-chat .chat-shortcut-guide header em, body.ts-chat .chat-private-dialog em { font-size: 9px; }
body.ts-chat :is(.chat-account-bottom__avatar,.chat-account-menu__avatar,.chat-shortcut-guide-icon,.chat-private-dialog-icon,.chat-side-panel > header i) {
    border-radius: var(--chat-radius-circle);
}
body.ts-chat .chat-response-detail-menu > button {
    padding: 9px 14px;
    border-radius: var(--chat-radius-control);
}
body.ts-chat .chat-private-dialog > footer button {
    border-radius: var(--chat-radius-control);
}
body.ts-chat .chat-side-composer { border-radius: 18px; }
body.ts-chat .chat-side-composer textarea { border-radius: 0 !important; }
body.ts-chat .chat-side-composer textarea:focus-visible { outline: none; }
@media (min-width: 881px) {
    body.ts-chat .chat-sidebar__restore { display: none; }
    body.ts-chat.chat-sidebar-collapsed .chat-shell { grid-template-columns: 0 minmax(0,1fr); }
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar { visibility: hidden; opacity: 0; pointer-events: none; }
    body.ts-chat.chat-sidebar-collapsed .chat-sidebar__restore { display: grid; }
}
@media (max-width: 880px) {
    body.ts-chat .chat-shell { grid-template-columns: minmax(0,1fr); }
    body.ts-chat .chat-sidebar { z-index: 60; width: 280px; max-width: calc(100vw - 48px); }
    body.ts-chat .chat-backdrop { z-index: 50; }
    body.ts-chat .chat-sidebar__restore { display: grid; }
    body.ts-chat .chat-sidebar__collapse { display: grid; }
    body.ts-chat .chat-usage { display: none; }
}
@media (max-width: 540px) {
    body.ts-chat .chat-topbar,
    html[data-theme="light"] body.ts-chat .chat-topbar { padding: 0 10px; }
    body.ts-chat .chat-topbar__right { gap: 0; }
    body.ts-chat .chat-cloud-presence { display: flex; font-size: 11px; }
    body.ts-chat .chat-cloud-presence > span { display: none; }
    body.ts-chat #chat-shortcuts { display: none; }
    body.ts-chat .chat-composer,
    body.ts-chat.chat-empty-state .chat-composer,
    html[data-theme="light"] body.ts-chat.chat-empty-state .chat-composer { top: auto; bottom: 0; padding: 16px 12px max(12px,env(safe-area-inset-bottom)); background: linear-gradient(transparent,var(--chat-bg) 28%); }
    body.ts-chat.chat-empty-state .chat-welcome { top: calc(45% - 30px); left: 20px; right: 20px; transform: translateY(-50%); }
    body.ts-chat .chat-welcome h1 { font-size: 27px; letter-spacing: -.8px; }
    body.ts-chat .chat-welcome p { max-width: 270px; font-size: 13px; }
    body.ts-chat .chat-composer textarea { font-size: 16px; }
    body.ts-chat .chat-thread { padding: 24px 16px 230px; }
    body.ts-chat .chat-model { max-width: calc(100% - 144px); }
    body.ts-chat :is(.chat-tool,.chat-send) { min-width: 38px; height: 38px; }
    body.ts-chat .chat-message--user .chat-message__content { max-width: 94%; }
    body.ts-chat .chat-response-detail-menu { position: fixed; top: 62px; right: 12px; max-width: calc(100vw - 24px); }
}
@media (max-height: 620px) and (min-width: 541px) {
    body.ts-chat.chat-empty-state .chat-welcome { top: calc(50% - 38px); }
    body.ts-chat .chat-welcome__mark { display: none; }
    body.ts-chat .chat-welcome h1 { font-size: 26px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.ts-chat *, body.ts-chat *::before, body.ts-chat *::after { scroll-behavior: auto; transition: none; }
}

/* Desktop-style Thinking control with progressively disclosed model and speed. */
body.ts-chat .chat-model-control::after { display: none; }
body.ts-chat .chat-model-trigger { display: flex; align-items: center; gap: 7px; max-width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: var(--chat-radius-control); background: transparent; color: var(--chat-soft); font: 600 12px "Nunito Sans",sans-serif; cursor: pointer; }
body.ts-chat .chat-model-trigger:hover, body.ts-chat .chat-model-trigger[aria-expanded="true"] { background: var(--chat-control); }
body.ts-chat .chat-model-trigger:disabled { opacity: .5; cursor: default; }
body.ts-chat .chat-model-trigger svg, body.ts-chat .chat-model-trigger small { flex-shrink: 0; }
body.ts-chat .chat-model-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ts-chat .chat-model-trigger small { color: var(--chat-muted); font-size: 10px; }
body.ts-chat .chat-model-trigger.is-fast small { color: #ff5722; }
body.ts-chat .chat-model-controls { position: fixed; z-index: 80; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 0; border: 1px solid var(--chat-line-strong); border-radius: 18px; background: var(--chat-panel); color: var(--chat-text); box-shadow: 0 16px 50px #0003; font: 13px/1.5 "Nunito Sans",sans-serif; }
body.ts-chat .chat-model-controls button { color: inherit; font: inherit; cursor: pointer; }
body.ts-chat .chat-model-controls button:disabled { opacity: .5; cursor: default; }
body.ts-chat .chat-model-controls :is(button,input):focus-visible, body.ts-chat .chat-model-trigger:focus-visible { outline: 2px solid #ff5722; outline-offset: -2px; }
body.ts-chat .chat-thinking { padding: 18px; }
body.ts-chat .chat-thinking header, body.ts-chat .chat-thinking header > span { display: flex; align-items: center; gap: 8px; }
body.ts-chat .chat-thinking header { justify-content: space-between; margin-bottom: 18px; }
body.ts-chat .chat-thinking :is(svg,output) { color: #ff5722; }
body.ts-chat .chat-thinking output { font-size: 12px; font-weight: 700; }
body.ts-chat #chat-thinking-level { display: block; width: 100%; height: 8px; margin: 8px 0 14px; appearance: none; border: 1px solid var(--chat-line-strong); border-radius: 999px; background: linear-gradient(to right,#ff5722 var(--thinking-progress),var(--chat-control) var(--thinking-progress)); cursor: pointer; }
body.ts-chat #chat-thinking-level::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border: 3px solid var(--chat-panel); border-radius: 50%; background: #ff5722; box-shadow: 0 0 0 1px #ff5722; }
body.ts-chat #chat-thinking-level::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--chat-panel); border-radius: 50%; background: #ff5722; box-shadow: 0 0 0 1px #ff5722; }
body.ts-chat .chat-thinking-scale { display: flex; justify-content: space-between; color: var(--chat-dim); font-size: 9px; text-transform: uppercase; }
body.ts-chat .chat-thinking-unavailable { margin: 0; color: var(--chat-muted); font-size: 12px; }
body.ts-chat .chat-model-advanced-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 18px; border: 0; border-top: 1px solid var(--chat-line); background: transparent; color: var(--chat-muted); text-align: left; }
body.ts-chat .chat-model-advanced-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
body.ts-chat #chat-model-advanced { padding: 6px 10px 12px; border-top: 1px solid var(--chat-line); }
body.ts-chat .chat-model-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
body.ts-chat .chat-model-row strong { margin-left: auto; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chat-muted); font-weight: 400; }
body.ts-chat .chat-model-row:hover:not(:disabled), body.ts-chat .chat-model-results button:hover { background: var(--chat-control); }
body.ts-chat #chat-speed-options { padding: 4px 8px; }
body.ts-chat #chat-speed-options [role="radiogroup"] { display: flex; gap: 6px; }
body.ts-chat #chat-speed-options button { flex: 1; min-height: 34px; border: 1px solid var(--chat-line-strong); border-radius: 8px; background: transparent; }
body.ts-chat #chat-speed-options button[aria-checked="true"] { border-color: #ff5722; background: var(--chat-control); }
body.ts-chat #chat-speed-options p { margin: 8px 0 0; color: var(--chat-muted); font-size: 11px; }
body.ts-chat .chat-model-browser { padding: 12px; }
body.ts-chat .chat-model-browser header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
body.ts-chat .chat-model-back { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; }
body.ts-chat .chat-model-search { width: 100%; min-height: 36px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--chat-line-strong); border-radius: 9px; background: var(--chat-bg); color: var(--chat-text); font: inherit; }
body.ts-chat .chat-model-results { max-height: 300px; overflow: auto; margin-top: 8px; }
body.ts-chat .chat-model-group { padding: 10px 8px 4px; color: var(--chat-muted); font-size: 11px; font-weight: 700; }
body.ts-chat .chat-model-results button { display: block; width: 100%; min-height: 36px; padding: 8px 26px 8px 8px; position: relative; border: 0; border-radius: 8px; background: transparent; text-align: left; overflow-wrap: anywhere; }
body.ts-chat .chat-model-results button[aria-selected="true"] { background: var(--chat-control); }
body.ts-chat .chat-model-results button[aria-selected="true"]::after { position: absolute; right: 8px; content: "✓"; color: #ff5722; }
body.ts-chat .chat-model-results p { padding: 12px 8px; color: var(--chat-muted); }
@media (max-width: 540px) { body.ts-chat .chat-model-trigger { gap: 5px; font-size: 11px; } body.ts-chat .chat-model-trigger small { display: none; } }

/* Lab artwork matches the desktop picker, including light/dark variants. */
body.ts-chat .chat-lab-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; align-items: center; justify-content: center; }
body.ts-chat .chat-lab-icon img { width: 20px; height: 20px; object-fit: contain; }
body.ts-chat .chat-lab-icon .chat-lab-icon-light { display: none; }
html[data-theme="light"] body.ts-chat .chat-lab-icon .chat-lab-icon-light { display: block; }
html[data-theme="light"] body.ts-chat .chat-lab-icon .chat-lab-icon-dark { display: none; }
body.ts-chat .chat-model-trigger-lab { display: inline-flex; flex-shrink: 0; }
body.ts-chat .chat-model-results button { display: flex; align-items: center; gap: 10px; }
body.ts-chat #chat-choose-model strong { display: flex; align-items: center; gap: 8px; }
body.ts-chat #chat-choose-model strong > span:last-child { overflow: hidden; text-overflow: ellipsis; }