body.ai-studio {
--ais-display: cinzel, "Playfair Display", georgia, serif;
--ais-study: lora, merriweather, georgia, serif;
--ais-ui: var(--font-sans);
--ais-ground: color-mix(in srgb, var(--color-surface-elevated) 70%, var(--color-bg-end));
--ais-page: var(--color-bg-end);
--ais-rail-w: 17.5rem;
--ais-bar-h: var(--header-h);
--ais-col-pad: var(--space-lg);
}
html:has(> body.ai-studio) {
height: 100%;
overflow: hidden;
scrollbar-gutter: auto;
}
body.ai-studio {
position: fixed;
inset: 0;
width: auto;
height: auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
overscroll-behavior: none;
}
body.ai-studio {
background: var(--ais-page);
}
body.ai-studio .ethereal-wrapper {
display: none;
}
body.ai-studio .page-content,
body.ai-studio .page-main,
body.ai-studio .ai-layout,
body.ai-studio .ai-content {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 0;
margin: 0;
max-width: none;
width: 100%;
}
body.ai-studio .site-header,
body.ai-studio .site-footer,
body.ai-studio .nav-overlay,
body.ai-studio .trv-breadcrumb-row,
body.ai-studio .ai-page-sub {
display: none !important;
}
body.ai-studio .pwa-nav-bar {
display: none;
}
body.ai-studio {
--dock-bar: 0px;
--dock-total: 0px;
--dock-float: calc(max(var(--dock-total, 0px), env(safe-area-inset-bottom, 0px)) + var(--dock-gap));
}
@media (display-mode: standalone) {
html:has(> body.ai-studio) {
height: 200%;
overflow-y: auto;
}
}
body.ai-studio .ai-header,
body.ai-studio .ai-header * {
scroll-margin-top: calc((var(--ais-bar-h) + var(--chrome-top) + var(--space-sm)) * -1);
}
body.ai-studio .ai-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-sm);
min-height: calc(var(--ais-bar-h) + var(--chrome-top));
flex: 0 0 auto;
padding: var(--chrome-top) calc(var(--space-sm) + var(--safe-right)) var(--space-sm) calc(var(--space-sm) + var(--safe-left));
margin: 0 calc(var(--ais-col-pad) * -1) var(--space-md);
border: 0;
background: var(--ais-page);
}
body.ai-studio .ai-header::after {
content: "";
position: absolute;
inset-inline: 0;
top: 100%;
height: var(--space-md);
background: linear-gradient(to bottom, var(--ais-page), transparent);
pointer-events: none;
}
body.ai-studio .ai-page-title {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
margin: 0;
font-family: var(--ais-display);
font-size: var(--font-size-lg);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
body.ai-studio .ai-header-meta {
order: 2;
margin: 0 auto;
padding: 0.3rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--ais-ground);
font-family: var(--ais-ui);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40%;
}
body.ai-studio .ai-share-btn {
position: static;
order: 4;
flex: 0 0 auto;
margin-left: 0;
}
body.ai-studio .ai-page-title { order: 1; }
body.ai-studio .ai-grid {
display: grid;
grid-template-columns: var(--ais-rail-w) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: 0;
flex: 1;
min-height: 0;
padding: 0;
margin: 0;
max-width: none;
align-items: stretch;
}
body.ai-studio .ai-sources {
min-height: 0;
display: flex;
flex-direction: column;
max-height: none;
inset-block-start: auto;
overflow: visible;
border-inline-end: 1px solid var(--color-border);
background: var(--ais-ground);
padding: 0;
position: static;
}
:root[data-scroll-locked] body.ai-studio .ai-conversation,
:root[data-scroll-locked] body.ai-studio:not(.ais-rail-open) .ais-rail-body {
overflow: hidden;
scrollbar-gutter: stable;
}
body.ai-studio .ai-sources-card {
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
padding: var(--space-md);
max-height: none;
}
body.ai-studio .ais-dock {
flex: 0 0 auto;
margin-top: auto;
position: sticky;
bottom: 0;
z-index: 2;
margin-inline: calc(var(--ais-col-pad) * -1);
padding: 0 var(--ais-col-pad) calc(var(--space-sm) + var(--safe-bottom));
background: linear-gradient(to top,
var(--ais-page) 30%,
color-mix(in srgb, var(--ais-page) 55%, transparent) 100%);
}
body.ai-studio .ais-dock::before {
content: "";
position: absolute;
inset-inline: 0;
bottom: 100%;
height: var(--space-md);
background: linear-gradient(to top,
color-mix(in srgb, var(--ais-page) 60%, transparent), transparent);
pointer-events: none;
}
body.ai-studio .ai-conversation {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: none;
overflow-anchor: none;
padding: 0 var(--ais-col-pad);
overflow-x: hidden;
scroll-padding-top: calc(var(--ais-bar-h) + var(--chrome-top) + var(--space-sm));
position: relative;
display: flex;
flex-direction: column;
}
body.ai-studio [data-ai-maxed] {
width: 100%;
max-width: var(--ais-measure);
margin: 0 auto;
padding: var(--space-sm) var(--space-md);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
}
body.ai-studio [data-ai-maxed] > .fas {
display: none;
}
body.ai-studio [data-ai-maxed] .ai-empty-title {
display: inline;
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--color-text-muted);
}
body.ai-studio [data-ai-maxed] .ai-empty-message {
display: inline;
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
body.ai-studio [data-ai-maxed] .ai-empty-ctas {
display: inline;
margin: 0;
}
body.ai-studio [data-ai-maxed] .ai-empty-cta {
display: inline;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
body.ai-studio [data-ai-maxed] .ai-empty-cta:focus-visible {
box-shadow: var(--focus-ring);
}
body.ai-studio [data-ai-maxed] .ai-maxed-support {
color: var(--color-text-muted);
margin-inline-start: var(--space-md);
text-decoration: none;
}
body.ai-studio [data-ai-maxed] .ai-maxed-support:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
body.ai-studio [data-ai-maxed] .ai-maxed-support .fa-heart {
font-size: var(--font-size-3xs);
color: color-mix(in srgb, var(--color-danger) 70%, var(--color-text-muted));
}
body.ai-studio .ai-conversation > * {
flex-shrink: 0;
}
body.ai-studio {
--ais-measure: 46rem;
}
body.ai-studio .ai-turn-pair,
body.ai-studio .ai-conversation > .ai-message,
body.ai-studio .ai-next-turn {
width: 100%;
max-width: var(--ais-measure);
margin-inline: auto;
}
body.ai-studio .ai-message-assistant .ai-message-body {
font-family: var(--ais-study);
line-height: 1.7;
letter-spacing: normal;
}
body.ai-studio .ai-message-assistant .ai-message-body .trv-translit {
font-family: lora, inter, merriweather, georgia, serif;
font-weight: inherit;
letter-spacing: normal;
}
body.ai-studio .ai-message-body a[data-trv-ref="verse"],
body.ai-studio .ai-message-body a[data-trv-ref="chapter"] {
white-space: nowrap;
}
body.ai-studio .ai-message-body h2,
body.ai-studio .ai-message-body h3 {
font-family: var(--ais-display);
font-weight: 600;
letter-spacing: 0.01em;
}
body.ai-studio .ai-message-body h2 {
font-size: var(--font-size-2xl);
line-height: 1.25;
}
body.ai-studio .ai-message-body h3 {
font-size: 1.3125rem;
line-height: 1.3;
}
body.ai-studio .ai-message-body h4 {
font-family: var(--ais-study);
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.4;
}
body.ai-studio .ai-turn-marker-num {
font-family: var(--ais-display);
font-size: var(--font-size-xs);
font-weight: 600;
}
body.ai-studio .ai-message-assistant {
background: transparent;
border: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
body.ai-studio .ai-message-user {
width: fit-content;
max-width: min(32rem, 85%);
margin-inline-start: auto;
padding: 0.55rem 1rem;
border: 0;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-text) 6%, var(--ais-page));
color: var(--color-text);
font-family: var(--ais-ui);
font-size: var(--font-size-md);
}
body.ai-studio .ai-message-user .ai-message-body {
color: inherit;
}
body.ai-studio .ai-message-user .ai-message-role {
display: none;
}
body.ai-studio .ai-next-turn {
position: relative;
margin: var(--space-sm) auto 0;
padding: 0;
overflow: visible;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 28px -18px rgb(0 0 0 / 45%);
}
body.ai-studio .ai-next-turn .ai-reply-form {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.ai-studio .ai-next-turn .ai-reply-form.is-multiline {
flex-direction: column;
align-items: stretch;
}
body.ai-studio .ai-reply-input {
flex: 1 1 auto;
width: auto;
min-width: 0;
border: 0;
background: transparent;
padding: var(--space-xs) var(--space-sm);
box-shadow: none;
}
body.ai-studio .ai-reply-input:focus {
outline: none;
box-shadow: none;
}
body.ai-studio .ai-reply-meta {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
min-height: 36px;
padding: 0;
margin: 0;
}
body.ai-studio .is-multiline .ai-reply-meta {
justify-content: space-between;
}
body.ai-studio .ai-reply-actions {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-inline-start: auto;
}
body.ai-studio .ai-turn-counter {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
body.ai-studio .ai-reply-send {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
gap: 0;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
}
body.ai-studio .ai-reply-send {
font-size: 0;
}
body.ai-studio .ai-reply-send i {
font-size: var(--font-size-md);
}
body.ai-studio .ai-feedback-cta {
margin: var(--space-xs) 0 0;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
opacity: 0.75;
}
body.ai-studio .ai-feedback-link {
color: inherit;
font-weight: 400;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
text-underline-offset: 2px;
}
body.ai-studio .ai-feedback-cta:hover {
opacity: 1;
}
body.ai-studio .ai-jump-latest {
position: absolute;
inset-block-end: calc(100% + var(--space-xs));
left: 0;
right: 0;
margin-inline: auto;
width: 36px;
height: 36px;
background: color-mix(in srgb, var(--color-surface-solid) 70%, transparent);
backdrop-filter: var(--glass-blur);
border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}
body.ai-studio .ai-jump-latest:hover {
background: color-mix(in srgb, var(--color-surface-solid) 88%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
body.ai-studio .ai-jump-latest {
background: var(--color-surface-solid);
}
}
body.ai-studio .ai-next-turn-sources {
position: relative;
border: 0;
border-radius: 0;
background: transparent;
margin: 0;
padding: 0;
}
body.ai-studio .ai-next-turn-sources-summary {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 36px;
padding: 0 var(--space-sm);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-family: var(--ais-ui);
font-size: var(--font-size-xs);
white-space: nowrap;
cursor: pointer;
}
body.ai-studio .ai-next-turn-sources-summary:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
body.ai-studio .ai-next-turn-sources-summary-state {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.ai-studio .ai-next-turn-sources-body {
position: absolute;
inset-block-end: calc(100% + var(--space-sm));
inset-inline-end: 0;
z-index: calc(var(--z-float) + 1);
width: max-content;
max-width: min(20rem, 70vw);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-solid);
box-shadow: var(--shadow-lg);
}
body.ai-studio .ai-composer-settings {
flex: 0 0 auto;
}
body.ai-studio .ai-composer-settings > .ai-next-turn-sources-summary {
justify-content: center;
width: 36px;
padding: 0;
border-radius: var(--radius-full);
background: var(--color-surface-hover);
font-size: var(--font-size-md);
}
body.ai-studio .ai-composer-settings > .ai-next-turn-sources-summary::after {
content: none;
}
body.ai-studio .ai-composer-settings .ai-next-turn-sources-summary-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.ai-studio .ai-composer-settings[open] > .ai-next-turn-sources-summary {
color: var(--color-text);
}
body.ai-studio .ai-composer-settings > .ai-next-turn-sources-body {
inset-inline-start: 0;
inset-inline-end: auto;
}
body.ai-studio .ai-composer-settings-title {
margin: 0 0 2px;
font-family: var(--ais-ui);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
}
body.ai-studio .ai-composer-settings .ai-thinking {
margin-top: var(--space-sm);
}
body.ai-studio .ai-next-turn .ai-voice-btn {
width: 36px;
height: 36px;
border: 1px solid var(--color-border);
}
body.ai-studio .ai-next-turn .ai-reply-form.is-multiline {
position: relative;
}
body.ai-studio .ai-next-turn .ai-reply-form.is-multiline .ai-composer-settings {
position: absolute;
inset-inline-start: var(--space-sm);
inset-block-end: var(--space-sm);
z-index: 1;
}
body.ai-studio .ai-next-turn .ai-reply-form.is-multiline .ai-reply-meta {
padding-inline-start: calc(36px + var(--space-sm));
}
body.ai-studio .ais-rail-toggle {
display: none;
order: -1;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-size: var(--font-size-md);
cursor: pointer;
}
body.ai-studio .ais-rail-toggle:hover {
background: var(--color-surface-hover);
}
body.ai-studio .ais-scrim {
position: fixed;
inset: 0;
z-index: var(--z-float);
background: rgb(0 0 0 / 45%);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
}
body.ai-studio.ais-rail-open .ais-scrim {
opacity: 1;
visibility: visible;
}
@media (width <= 1080px) {
body.ai-studio .ai-grid {
grid-template-columns: minmax(0, 1fr);
}
body.ai-studio .ais-rail-toggle {
display: inline-flex;
}
body.ai-studio .ai-sources {
--ais-rail-off: -100%;
position: fixed;
inset-block: calc(var(--ais-bar-h) + var(--chrome-top)) 0;
inset-inline-start: 0;
z-index: calc(var(--z-float) + 1);
width: min(var(--ais-rail-w), 85vw);
max-width: none;
padding-bottom: 0;
border-inline-end: 1px solid var(--color-border);
background: var(--ais-ground);
box-shadow: var(--shadow-lg);
transform: translateX(var(--ais-rail-off));
transition: transform var(--transition-base);
}
[dir="rtl"] body.ai-studio .ai-sources,
body.ai-studio [dir="rtl"] .ai-sources {
--ais-rail-off: 100%;
}
body.ai-studio.ais-rail-open .ai-sources {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
body.ai-studio .ai-sources,
body.ai-studio .ais-scrim {
transition: none;
}
}
@media (width <= 715px) {
body.ai-studio .ai-header {
padding-block: var(--chrome-top) var(--space-xs);
padding-inline: calc(var(--space-sm) + var(--safe-left)) calc(var(--space-sm) + var(--safe-right));
gap: var(--space-sm);
}
body.ai-studio .ai-header-meta {
display: none;
}
body.ai-studio .ai-conversation {
--ais-col-pad: var(--space-md);
}
body.ai-studio .ai-next-turn {
--ais-pill-r: calc((36px + var(--space-sm) * 2) / 2 + 1px);
padding: 0;
border-radius: var(--ais-pill-r);
}
}
body.ai-studio .ai-shared-banner {
flex: 0 0 auto;
width: 100%;
max-width: var(--ais-measure);
margin: 0 auto;
border-radius: var(--radius-lg);
}
body.ai-studio .ai-header .ais-adopted {
order: 3;
flex: 0 0 auto;
margin: 0;
}
body.ai-studio .ai-header .ais-adopted,
body.ai-studio .ai-share-btn,
body.ai-studio .ai-header-meta {
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-surface-solid) 72%, transparent);
backdrop-filter: var(--glass-blur);
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
body.ai-studio .ai-header .ais-adopted,
body.ai-studio .ai-share-btn,
body.ai-studio .ai-header-meta {
background: var(--color-surface-solid);
}
}
body.ai-studio .ais-rail-head {
flex: 0 0 auto;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-sm);
background: var(--ais-ground);
padding: 0 var(--space-md) var(--space-md);
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
body.ai-studio .ai-followups {
padding-top: var(--space-sm);
}
body.ai-studio .ai-followup-chip {
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--color-text-muted);
padding-block: var(--space-xs);
}
body.ai-studio .ai-followup-chip:hover,
body.ai-studio .ai-followup-chip:focus-visible {
color: var(--color-text);
}
@media (width <= 715px) {
body.ai-studio .ai-followup-chip {
font-size: var(--font-size-xs);
}
}
body.ai-studio .trv-modal-backdrop {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.ai-studio #strongs-def-tooltip {
position: fixed;
}
body.ai-studio .ais-rail-support {
flex: 0 0 auto;
padding: var(--space-xs) var(--space-md);
text-align: center;
}
body.ai-studio .ais-support-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-text-muted);
text-decoration: none;
}
body.ai-studio .ais-support-link:hover {
color: var(--color-text);
}
body.ai-studio .ais-support-link .fa-heart {
font-size: var(--font-size-3xs);
color: color-mix(in srgb, var(--color-danger) 70%, var(--color-text-muted));
}
body.ai-studio .ais-rail-foot {
flex: 0 0 auto;
padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + var(--safe-bottom));
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
body.ai-studio .ais-rail-foot .auth-mount,
body.ai-studio .ais-rail-foot .auth-menu {
display: block;
}
body.ai-studio .ais-rail-foot .ais-account-btn {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
height: auto;
min-height: 44px;
padding: var(--space-xs) var(--space-sm);
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
text-align: start;
transition: background 120ms ease;
}
body.ai-studio .ais-rail-foot .ais-account-btn > img,
body.ai-studio .ais-rail-foot .ais-account-btn > .auth-avatar-fallback {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
object-fit: cover;
}
body.ai-studio .ais-rail-foot .ais-account-btn > .auth-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
background: var(--color-surface-solid);
font-size: var(--font-size-sm);
}
body.ai-studio .ais-rail-foot .ais-account-btn:hover {
background: var(--color-surface-hover);
border-color: var(--color-border);
}
body.ai-studio .ais-account-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--ais-ui);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
}
body.ai-studio .ais-account-chev {
flex: 0 0 auto;
font-size: var(--font-size-3xs);
color: var(--color-text-muted);
}
body.ai-studio .ais-rail-foot .auth-avatar-btn[aria-expanded="true"] .ais-account-chev {
transform: rotate(180deg);
}
body.ai-studio .ais-rail-foot .auth-dropdown {
top: auto;
bottom: calc(100% + 8px);
inset-inline-start: 0;
inset-inline-end: auto;
}
body.ai-studio .ais-brand:empty {
display: none;
}
body.ai-studio .ais-rail-tools {
display: flex;
align-items: center;
gap: var(--space-xs);
padding-top: var(--space-sm);
}
body.ai-studio .ais-rail-tools:empty {
display: none;
}
body.ai-studio .ais-brand {
display: flex;
align-items: center;
min-height: calc(var(--ais-bar-h) + var(--chrome-top));
padding-top: var(--chrome-top);
}
body.ai-studio .ais-brand > .ais-logo {
align-self: center;
margin: 0;
}
body.ai-studio .ai-header > .ais-logo,
body.ai-studio .ai-header > .ais-lockup > .ais-logo {
order: -3;
flex: 0 0 auto;
display: flex;
align-items: center;
margin: 0;
}
body.ai-studio .ais-rail-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: none;
}
body.ai-studio .ai-header #mobile-search-toggle { display: inline-flex; }
body.ai-studio .ai-page-title-short { display: none; }
body.ai-studio .ais-lockup { display: contents; }
@media (width <= 715px) {
body.ai-studio .ai-page-title { font-size: var(--font-size-md); }
body.ai-studio .ai-page-title-full {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.ai-studio .ai-page-title-short { display: inline; }
body.ai-studio .ai-page-title {
order: -2;
gap: var(--space-xs);
padding: 3px var(--space-sm);
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--ais-ground);
font-family: var(--ais-ui);
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.4;
}
body.ai-studio .ais-lockup {
order: -3;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding-inline-end: 5px;
border-radius: var(--radius-full);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 color-mix(in srgb, var(--color-surface-solid) 15%, transparent);
}
body.ai-studio .ais-lockup > .ais-logo {
padding-inline-end: var(--space-xs);
background: none;
border-color: transparent;
box-shadow: none;
backdrop-filter: none;
}
body.ai-studio .ais-lockup > .ai-page-title {
order: 0;
padding: 4px var(--space-sm);
border: 0;
background: var(--color-surface-hover);
font-weight: 600;
letter-spacing: 0.01em;
}
body.ai-studio .ais-lockup .trv-ai-sparkle { display: none; }
body.ai-studio .ai-share-btn {
width: 40px;
height: 40px;
padding: 0;
gap: 0;
justify-content: center;
}
body.ai-studio .ai-share-btn > span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.ai-studio .ai-share-btn {
margin-inline-start: auto;
align-self: center;
}
}
body.ai-studio .ai-reply-input {
min-height: calc(1lh + var(--space-xs) * 2);
max-height: calc(5lh + var(--space-xs) * 2);
}
body.ai-studio .ai-next-turn.is-composer-full {
position: fixed;
width: auto;
max-width: 56rem;
margin: 0 auto;
overflow: hidden;
}
body.ai-studio.trv-composer-full-open .ais-dock {
z-index: var(--z-modal);
background: none;
}
body.ai-studio.trv-composer-full-open .ais-dock > :not(.ai-next-turn) {
visibility: hidden;
}
body.ai-studio.trv-composer-full-open .ais-dock::before {
display: none;
}
body.ai-studio .ais-recents {
border-top: 1px solid var(--color-border);
margin-top: var(--space-md);
padding: var(--space-md);
}
body.ai-studio .ais-recents-head {
margin: 0 0 var(--space-sm);
font-family: var(--ais-ui);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
body.ai-studio .ais-recents-list {
list-style: none;
margin: 0;
padding: 0;
}
body.ai-studio .ais-recent {
display: block;
padding: 6px var(--space-sm);
margin-inline: calc(var(--space-sm) * -1);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-family: var(--ais-ui);
font-size: var(--font-size-sm);
line-height: 1.35;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background 120ms ease, color 120ms ease;
}
body.ai-studio .ais-recent:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
body.ai-studio .ais-recent.is-current {
color: var(--color-text);
font-weight: 600;
background: var(--color-primary-active-bg);
}
body.ai-studio .ais-recents-all {
display: inline-block;
margin-top: var(--space-sm);
font-family: var(--ais-ui);
font-size: var(--font-size-xs);
color: var(--color-primary);
}
body.ai-studio .ais-recents-list li {
position: relative;
display: flex;
align-items: center;
margin-inline: calc(var(--space-sm) * -1);
}
body.ai-studio .ais-recents-list li .ais-recent {
flex: 1;
min-width: 0;
margin-inline: 0;
}
body.ai-studio .ais-recent-menu {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-inline-start: 2px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
cursor: pointer;
opacity: 0;
transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
body.ai-studio .ais-recents-list li:hover .ais-recent-menu,
body.ai-studio .ais-recents-list li:focus-within .ais-recent-menu,
body.ai-studio .ais-recents-list li:has(.ais-recent-actions:not([hidden])) .ais-recent-menu {
opacity: 1;
}
body.ai-studio .ais-recent-menu:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
@media (pointer: coarse) {
body.ai-studio .ais-recent-menu {
opacity: 0.55;
}
}
body.ai-studio .ais-recent-actions {
position: absolute;
inset-inline-end: 0;
top: calc(100% + 2px);
z-index: calc(var(--z-dropdown) + 1);
min-width: 168px;
padding: var(--space-2xs);
background: var(--color-surface-menu);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md), var(--ring-raised);
}
body.ai-studio .ais-recent-actions.is-up {
top: auto;
bottom: calc(100% + 2px);
}
body.ai-studio .ais-recent-act {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: 7px var(--space-sm);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: var(--ais-ui);
font-size: var(--font-size-sm);
text-align: start;
cursor: pointer;
}
body.ai-studio .ais-recent-act:hover {
background: var(--color-surface-menu-hover);
}
body.ai-studio .ais-recent-act i {
width: 14px;
min-inline-size: 0;
text-align: center;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
body.ai-studio .ais-recent-act--danger i {
color: var(--color-danger);
}
body.ai-studio .ais-recent-pinmark {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
margin-inline-end: 6px;
}
body.ai-studio .ais-recents-list li.is-renaming .ais-recent,
body.ai-studio .ais-recents-list li.is-renaming .ais-recent-menu {
display: none;
}
body.ai-studio .ais-recent-rename {
flex: 1;
min-width: 0;
padding: 5px var(--space-sm);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--ais-ui);
font-size: var(--font-size-sm);
line-height: 1.35;
}
body.ai-studio .ais-recent-rename:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
outline-offset: 1px;
}
body.ai-studio .ais-new {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
margin: 0;
padding: 9px var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: var(--ais-ui);
font-size: var(--font-size-sm);
font-weight: 600;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease;
}
body.ai-studio .ais-new:hover {
background: var(--color-surface-hover);
border-color: var(--color-text-muted);
}
body.ai-studio ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body.ai-studio ::-webkit-scrollbar-track {
background: transparent;
}
body.ai-studio ::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-text) 22%, transparent);
border: 3px solid transparent;
background-clip: padding-box;
border-radius: var(--radius-full);
}
body.ai-studio ::-webkit-scrollbar-thumb:hover {
border-width: 2px;
background-color: color-mix(in srgb, var(--color-text) 36%, transparent);
}
body.ai-studio ::-webkit-scrollbar-thumb:active {
border-width: 1px;
background-color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
@supports (-moz-appearance: none) {
body.ai-studio .ais-rail-body,
body.ai-studio .ai-conversation {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--color-text) 30%, transparent) transparent;
}
}
body.ai-studio :where(.ais-rail-body:hover, .ai-conversation:hover)::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}
@media print {
html:has(> body.ai-studio) {
height: auto;
overflow: visible;
}
body.ai-studio {
position: static;
display: block;
overflow: visible;
}
body.ai-studio .ai-grid,
body.ai-studio .ai-conversation {
display: block;
height: auto;
overflow: visible;
}
body.ai-studio .ai-sources,
body.ai-studio .ais-scrim,
body.ai-studio .ais-dock,
body.ai-studio .ai-header,
body.ai-studio .ai-shared-banner,
body.ai-studio .ai-jump-latest,
body.ai-studio .ai-message-actions,
body.ai-studio .ai-message-copy,
body.ai-studio .ai-message-assistant .ai-message-action,
body.ai-studio .ai-followups,
body.ai-studio .ai-turn-sources,
body.ai-studio .ai-stopped-note,
body.ai-studio .trv-modal {
display: none;
}
body.ai-studio .ai-message-user {
background: none;
border: 1px solid;
}
body.ai-studio .ai-tool-card,
body.ai-studio .ai-table-scroll,
body.ai-studio .ai-message-body pre,
body.ai-studio .ai-message-body blockquote {
break-inside: avoid;
}
body.ai-studio .ai-message-body :is(h2, h3, h4) {
break-after: avoid;
}
}