/*
 * ============================================================
 * ThinkerStreet Chat UI
 * ============================================================
 * Owns the chat shell, message bubbles, editing, navigation,
 * thinking state and response actions.
 *
 * OWNS ONLY CHAT CHROME.
 *
 * Markdown prose belongs in markdown.css.
 * Tables/code/math/diagrams belong in formatting.css.
 *
 * LOAD ORDER: none. This file intentionally has no generic
 * paragraph/heading/table/pre/code/blockquote rules that compete with them.
 * ============================================================
 */

/*
 * ============================================================
 * CHAT BOARD + VERTICAL LOG
 * ============================================================
 */

#chatBoard {
/* Chat-level knobs for reuse on another surface/theme. */
--chat-log-width:850px;
--chat-font-size:var(--chat-font-size);
--chat-row-gap:25px;
--chat-user-left-space:clamp(96px,20vw,225px);
--scroll-color:var(--accent);
position:relative;
isolation:isolate;
width:100%;
height:100%;
min-width:0;
min-height:0;
overflow:hidden;
align-self:stretch;
container-type:size;
}
#chatLog {
position:relative;
z-index:1;
width:100%;
height:100%;
max-width:var(--chat-log-width);
min-width:0;
min-height:0;
margin:0 auto;
padding:22px 18px 44px 14px;
box-sizing:border-box;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
overflow-anchor:none;
touch-action:auto;
scroll-behavior:auto;
scroll-padding-top:12px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
#chatLog::-webkit-scrollbar {
width:0;
height:0;
display:none;
}
/*
 * ============================================================
 * MESSAGE ROWS
 * ============================================================
 */

.message-row {
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
width:100%;
min-width:0;
box-sizing:border-box;
margin:0 0 var(--chat-row-gap);
}
.message-row.user {
align-items:flex-end;
padding-left:var(--chat-user-left-space);
}
.message-row.bot {
padding:0;
}
.message-row time {
padding-inline:8px;
color:#8393ad;
font-size:10px;
letter-spacing:0.01em;
}
.chat-bubble {
min-width:0;
max-width:100%;
font-size:17px;
line-height:1.65;
overflow-wrap:anywhere;
}
/*
 * ============================================================
 * USER MESSAGE BUBBLE
 * ============================================================
 */

.chat-bubble.user {
position:relative;
width:fit-content;
max-width:100%;
padding:13px 17px;
box-sizing:border-box;
border-width:1px;
border-style:dashed;
border-color:color-mix(in srgb,var(--message-color,var(--accent)) 84%,white);
border-radius:21px 21px 7px 21px;
background:linear-gradient(145deg,color-mix(in srgb,var(--message-color,var(--accent)) 52%,#172033),color-mix(in srgb,var(--message-color,var(--accent)) 35%,#0a111e) 62%,color-mix(in srgb,var(--message-color,var(--accent)) 24%,#070c15));
color:#ffffff;
white-space:pre-wrap;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-user-drag:none;
touch-action:pan-y;
cursor:default;
box-shadow:0 7px 22px #00000034,0 0 19px color-mix(in srgb,var(--message-color,var(--accent)) 16%,transparent),inset 0 1px 0 #ffffff25,inset 0 -1px 0 #00000030;
transform:translateZ(0);
transition:border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease,transform 190ms cubic-bezier(0.16,1,0.3,1);
}
.chat-bubble.user:active {
transform:scale(0.988);
filter:brightness(1.05);
}
.chat-bubble.user:focus-visible {
outline:2px solid color-mix(in srgb,var(--message-color,var(--accent)) 80%,white);
outline-offset:3px;
}
.user-message-text {
position:relative;
min-width:0;
color:#ffffff;
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.user-message-tail {
display:none;
position:relative;
min-width:0;
color:#ffffff;
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.chat-bubble.user.user-collapsible.is-collapsed .user-message-text {
display:none;
}
.chat-bubble.user.user-collapsible.is-collapsed .user-message-tail {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:6;
overflow:hidden;
mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 100%);
}
.chat-bubble.user.user-collapsible.is-expanded .user-message-text {
display:block;
}
.chat-bubble.user.user-collapsible.is-expanded .user-message-tail {
display:none;
}
.user-show-more {
display:block;
margin:8px 0 -2px auto;
padding:3px 1px;
border:0;
outline:0;
background:transparent;
color:rgba(255,255,255,0.82);
font:inherit;
font-size:11px;
font-weight:650;
letter-spacing:0.015em;
cursor:pointer;
touch-action:none;
-webkit-tap-highlight-color:transparent;
}
.user-show-more:hover,.user-show-more:focus-visible {
color:#ffffff;
text-decoration:underline;
text-underline-offset:3px;
}
.user-show-more[hidden] {
display:none !important;
}
.chat-bubble.user.text-select-mode {
user-select:text;
-webkit-user-select:text;
-webkit-touch-callout:default;
touch-action:pan-y;
cursor:text;
transform:none;
border-style:solid;
border-color:color-mix(in srgb,var(--message-color,var(--accent)) 90%,white);
box-shadow:0 12px 32px #00000045,0 0 30px color-mix(in srgb,var(--message-color,var(--accent)) 23%,transparent),inset 0 1px 0 #ffffff2c;
}
.chat-bubble.user.text-select-mode .user-message-text,.chat-bubble.user.text-select-mode .user-message-text * {
user-select:text;
-webkit-user-select:text;
-webkit-touch-callout:default;
}
/*
 * ============================================================
 * ASSISTANT RESPONSE SHELL
 * ============================================================
 */

.chat-bubble.bot {
position:relative;
width:100%;
max-width:none;
box-sizing:border-box;
padding:13px 2px 9px 11px;
color:var(--ink);
border:0;
background:transparent;
}
.chat-bubble.bot::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
border-radius:0;
background:linear-gradient(90deg,color-mix(in srgb,var(--response-color,var(--accent)) 95%,white),color-mix(in srgb,var(--response-color,var(--accent)) 44%,transparent) 72%,transparent 100%);
box-shadow:0 0 8px color-mix(in srgb,var(--response-color,var(--accent)) 22%,transparent);
}
.chat-bubble.bot::after {
content:"";
position:absolute;
left:0;
top:0;
width:1px;
height:11px;
background:var(--response-color,var(--accent));
box-shadow:0 0 7px color-mix(in srgb,var(--response-color,var(--accent)) 30%,transparent);
}
.message-row.bot.assistant-arriving .chat-bubble.bot {
animation:response-shell-in 520ms cubic-bezier(0.16,1,0.3,1) both;
}
.message-row.bot.assistant-arriving .chat-bubble.bot > * {
opacity:0;
transform:translate3d(0,5px,0);
filter:blur(2px);
animation:response-block-in 390ms cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay:var(--response-delay,0ms);
}
@keyframes response-shell-in {
0% {
opacity:0;
transform:translate3d(0,8px,0) scale(0.992);
filter:blur(3px);
}
58% {
opacity:1;
}
100% {
opacity:1;
transform:translate3d(0,0,0) scale(1);
filter:blur(0);
}
}
@keyframes response-block-in {
from {
opacity:0;
transform:translate3d(0,5px,0);
filter:blur(2px);
}
to {
opacity:1;
transform:translate3d(0,0,0);
filter:blur(0);
}
}
.message-view-enter .chat-bubble,.message-focus-pulse .chat-bubble {
animation:none;
}
.message-row.bot.message-focus-pulse .chat-bubble.bot::before {
opacity:.96;
}
/*
 * ============================================================
 * USER MESSAGE PREVIEW / HOLD MENU
 * ============================================================
 */

.message-preview-overlay {
position:fixed;
inset:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:max(24px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));
box-sizing:border-box;
opacity:0;
background:rgba(2,5,11,0.39);
backdrop-filter:blur(13px) saturate(0.82) brightness(0.82);
-webkit-backdrop-filter:blur(13px) saturate(0.82) brightness(0.82);
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
overscroll-behavior:contain;
touch-action:none;
transition:opacity 215ms ease,background 215ms ease;
}
.message-preview-overlay.is-open {
opacity:1;
}
.message-preview-overlay.is-dismissing {
opacity:1;
}
.message-preview-overlay.is-closing {
opacity:1;
animation:preview-blur-release 320ms ease both;
}
@keyframes preview-blur-release {
0%,52% {
opacity:1;
}
100% {
opacity:0;
}
}
.message-preview-overlay.is-closing .message-preview-actions {
opacity:0;
transform:translateY(-3px) scale(.97);
transition:opacity 90ms ease,transform 170ms ease;
}
.message-preview-stage {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
max-width:720px;
max-height:calc(100dvh - 58px);
}
.message-preview-bubble {
position:relative;
width:fit-content;
max-width:min(680px,calc(100vw - 30px));
max-height:calc(100dvh - 185px);
overflow-x:hidden;
overflow-y:auto;
padding:15px 19px;
box-sizing:border-box;
border:1px dashed color-mix(in srgb,var(--message-color,var(--accent)) 90%,white);
border-radius:23px 23px 8px 23px;
background:linear-gradient(145deg,color-mix(in srgb,var(--message-color,var(--accent)) 57%,#172235),color-mix(in srgb,var(--message-color,var(--accent)) 36%,#080f1b));
color:#ffffff;
font-family:inherit;
font-size:17px;
line-height:1.65;
white-space:pre-wrap;
overflow-wrap:anywhere;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
overscroll-behavior:contain;
touch-action:pan-y;
box-shadow:0 34px 90px #0000008a,0 14px 40px #00000066,0 0 56px color-mix(in srgb,var(--message-color,var(--accent)) 31%,transparent),0 0 16px color-mix(in srgb,var(--message-color,var(--accent)) 31%,transparent),inset 0 1px 0 #ffffff30;
scrollbar-width:thin;
}
.message-preview-text {
position:relative;
z-index:1;
}
.copy-scan {
position:absolute;
z-index:3;
top:-30%;
bottom:-30%;
left:-32%;
width:24%;
opacity:0;
pointer-events:none;
transform:skewX(-16deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),color-mix(in srgb,var(--message-color,var(--accent)) 72%,white),rgba(255,255,255,0.11),transparent);
filter:blur(1px);
mix-blend-mode:screen;
}
.message-preview-bubble.is-copying .copy-scan {
animation:copy-scan 760ms cubic-bezier(0.2,0.75,0.25,1) forwards;
}
@keyframes copy-scan {
0% {
left:-34%;
opacity:0;
}
12% {
opacity:0.82;
}
72% {
opacity:0.90;
}
100% {
left:112%;
opacity:0;
}
}
.message-preview-bubble.is-copying {
animation:copied-flash 900ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes copied-flash {
0% {
filter:brightness(1);
}
40% {
filter:brightness(1.22);
box-shadow:0 34px 90px #0000008a,0 0 76px color-mix(in srgb,var(--message-color,var(--accent)) 56%,transparent),inset 0 0 30px #ffffff13;
}
100% {
filter:brightness(1);
}
}
.copied-status {
position:absolute;
z-index:5;
left:50%;
top:50%;
padding:7px 11px;
border:1px solid #ffffff3d;
border-radius:999px;
opacity:0;
transform:translate(-50%,-42%) scale(0.84);
background:rgba(5,10,18,0.84);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:#ffffff;
font-size:12px;
font-weight:700;
letter-spacing:0.035em;
box-shadow:0 10px 30px #00000055,0 0 18px color-mix(in srgb,var(--message-color,var(--accent)) 30%,transparent);
pointer-events:none;
}
.message-preview-bubble.is-copying .copied-status {
animation:copied-status 1000ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes copied-status {
0% {
opacity:0;
transform:translate(-50%,-35%) scale(0.82);
}
22% {
opacity:1;
transform:translate(-50%,-50%) scale(1.04);
}
48% {
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
100% {
opacity:0;
transform:translate(-50%,-60%) scale(0.96);
}
}
.message-preview-actions {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:15px;
opacity:0;
transform:translate3d(0,-8px,0) scale(0.91);
transition:opacity 220ms ease 170ms,transform 380ms cubic-bezier(0.16,1,0.3,1) 125ms;
}
.message-preview-overlay.is-open .message-preview-actions {
opacity:1;
transform:translate3d(0,0,0) scale(1);
}
.message-preview-action {
display:grid;
place-items:center;
width:45px;
height:45px;
flex:0 0 45px;
margin:0;
padding:0;
border:1px solid #ffffff24;
border-radius:15px;
outline:0;
background:linear-gradient(180deg,#1a283df9,#09121ff9);
color:#f4f7fc;
box-shadow:0 11px 30px #0000005c,inset 0 1px 0 #ffffff1d;
cursor:pointer;
touch-action:none;
-webkit-tap-highlight-color:transparent;
transition:transform 145ms cubic-bezier(0.16,1,0.3,1),background 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
.message-preview-action:active {
transform:scale(0.89);
}
.message-preview-action:hover,.message-preview-action:focus-visible {
transform:translateY(-1px) scale(1.035);
border-color:color-mix(in srgb,var(--accent) 60%,#ffffff38);
background:linear-gradient(180deg,#223651fa,#0d1a2cfa);
}
.message-preview-action svg {
display:block;
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
pointer-events:none;
}
.select-symbol {
display:block;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
font-size:16px;
font-weight:650;
line-height:1;
letter-spacing:-2px;
transform:translateX(-1px);
pointer-events:none;
}
.message-preview-action.is-complete {
transform:scale(1.10);
border-color:color-mix(in srgb,var(--accent) 86%,white);
}
body.message-preview-active #chatBoard,body.message-preview-active #chatBoard * {
user-select:none !important;
-webkit-user-select:none !important;
-webkit-touch-callout:none !important;
}
/*
 * ============================================================
 * INLINE USER MESSAGE EDITING
 * ============================================================
 */

.message-row.user.message-editing {
z-index:2;
padding-left:clamp(50px,10vw,110px);
}
.message-row.user.message-editing .chat-bubble.user {
width:min(720px,100%);
max-width:100%;
padding:15px 16px 13px;
border-style:solid;
border-radius:22px 22px 8px 22px;
cursor:default;
user-select:text;
-webkit-user-select:text;
-webkit-touch-callout:default;
transform:none;
}
.bubble-editor {
display:block;
width:100%;
min-width:0;
min-height:110px;
max-height:340px;
margin:0;
padding:0;
box-sizing:border-box;
border:0;
outline:0;
resize:none;
background:transparent;
color:#ffffff;
font:inherit;
font-size:17px;
line-height:1.65;
overflow-x:hidden;
overflow-y:auto;
user-select:text;
-webkit-user-select:text;
-webkit-touch-callout:default;
-webkit-appearance:none;
appearance:none;
-webkit-text-size-adjust:100%;
touch-action:pan-y;
}
.edit-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
gap:8px;
margin-top:13px;
}
.edit-controls small {
flex-basis:100%;
color:rgba(255,255,255,0.68);
font-size:11px;
line-height:1.45;
text-align:right;
}
.edit-controls button {
min-height:35px;
padding:7px 13px;
border:1px solid #ffffff24;
border-radius:999px;
background:#08111dbf;
color:#eef3fb;
font:inherit;
font-size:12px;
font-weight:650;
cursor:pointer;
touch-action:none;
-webkit-tap-highlight-color:transparent;
}
.edit-controls .edit-submit {
border-color:color-mix(in srgb,var(--message-color) 72%,white);
background:color-mix(in srgb,var(--message-color) 38%,#09111d);
color:#ffffff;
}
}
/*
 * ============================================================
 * ASSISTANT RESPONSE ACTIONS
 * ============================================================
 */

.response-actions {
display:flex;
gap:7px;
padding-left:7px;
}
.response-actions button {
padding:5px 9px;
border-radius:8px;
color:var(--muted);
font-size:11px;
transition:color 150ms ease,background 150ms ease,transform 150ms ease;
}
.response-actions button:hover,.response-actions button:focus-visible {
color:var(--ink);
background:#ffffff09;
}
.response-copy-complete {
color:#ffffff !important;
transform:scale(1.04);
}
.response-copy-scan {
position:absolute;
z-index:10;
top:0;
bottom:0;
left:-18%;
width:16%;
pointer-events:none;
opacity:0;
transform:skewX(-14deg);
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--response-color,var(--accent)) 30%,transparent),rgba(255,255,255,0.22),transparent);
mix-blend-mode:screen;
}
.response-is-copying .response-copy-scan {
animation:response-copy-scan 760ms ease forwards;
}
@keyframes response-copy-scan {
0% {
left:-18%;
opacity:0;
}
12% {
opacity:0.8;
}
100% {
left:106%;
opacity:0;
}
}
.response-copied-status {
position:absolute;
z-index:12;
top:18px;
right:9px;
padding:6px 10px;
border:1px solid color-mix(in srgb,var(--response-color,var(--accent)) 52%,#ffffff22);
border-radius:999px;
opacity:0;
background:rgba(6,11,19,0.86);
color:#ffffff;
font-size:11px;
font-weight:700;
pointer-events:none;
}
.response-is-copying .response-copied-status {
animation:response-copied-status 1000ms ease forwards;
}
@keyframes response-copied-status {
0% {
opacity:0;
transform:translateY(4px) scale(0.9);
}
20% {
opacity:1;
transform:translateY(0) scale(1.03);
}
55% {
opacity:1;
transform:scale(1);
}
100% {
opacity:0;
transform:translateY(-4px) scale(0.96);
}
}
/*
 * ============================================================
 * THINKING INDICATOR
 * ============================================================
 */

.thinking {
position:relative;
display:flex;
align-items:center;
gap:11px;
width:fit-content;
margin:7px 0 27px;
padding:8px 13px 8px 7px;
color:#b9c5d7;
font-size:13px;
letter-spacing:0.012em;
opacity:0;
animation:thinking-enter 350ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.thinking-ai {
position:relative;
display:grid;
place-items:center;
width:35px;
height:35px;
flex:0 0 35px;
border:1px solid color-mix(in srgb,var(--response-color,var(--accent)) 46%,#ffffff22);
border-radius:50%;
background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--response-color,var(--accent)) 24%,#ffffff13),#08101bc7 70%);
box-shadow:0 0 21px color-mix(in srgb,var(--response-color,var(--accent)) 18%,transparent),inset 0 1px 0 #ffffff1d;
}
.thinking-ai::after {
content:"";
position:absolute;
inset:-3px;
border:1px solid color-mix(in srgb,var(--response-color,var(--accent)) 19%,transparent);
border-radius:50%;
animation:ai-ring 2.3s ease-in-out infinite;
}
.thinking-ai svg {
width:25px;
height:25px;
overflow:visible;
}
.thinking-ai .ai-orbit {
fill:none;
stroke:color-mix(in srgb,var(--response-color,var(--accent)) 48%,transparent);
stroke-width:0.8;
stroke-dasharray:4 3;
transform-origin:14px 14px;
animation:ai-orbit 4s linear infinite;
}
.thinking-ai .ai-spark {
fill:color-mix(in srgb,var(--response-color,var(--accent)) 75%,white);
filter:drop-shadow(0 0 4px color-mix(in srgb,var(--response-color,var(--accent)) 52%,transparent));
transform-origin:14px 14px;
animation:ai-spark 1.75s ease-in-out infinite;
}
.thinking-ai .ai-node {
fill:#ffffff;
}
.thinking-copy {
position:relative;
display:block;
width:92px;
height:20px;
overflow:hidden;
}
.thinking-copy span {
position:absolute;
left:0;
top:0;
white-space:nowrap;
opacity:0;
transform:translateY(5px);
animation:thinking-word 6.4s ease infinite;
}
.thinking-copy span:nth-child(1) {
animation-delay:0s;
}
.thinking-copy span:nth-child(2) {
animation-delay:1.6s;
}
.thinking-copy span:nth-child(3) {
animation-delay:3.2s;
}
.thinking-copy span:nth-child(4) {
animation-delay:4.8s;
}
@keyframes thinking-enter {
from {
opacity:0;
transform:translateY(5px);
}
to {
opacity:1;
transform:translateY(0);
}
}
@keyframes ai-orbit {
to {
transform:rotate(360deg);
}
}
@keyframes ai-ring {
0%,100% {
opacity:0.28;
transform:scale(0.94);
}
50% {
opacity:0.76;
transform:scale(1.05);
}
}
@keyframes ai-spark {
0%,100% {
opacity:0.72;
transform:scale(0.88) rotate(-3deg);
}
50% {
opacity:1;
transform:scale(1.08) rotate(3deg);
}
}
@keyframes thinking-word {
0% {
opacity:0;
transform:translateY(5px);
}
8% {
opacity:1;
transform:translateY(0);
}
21% {
opacity:1;
transform:translateY(0);
}
25% {
opacity:0;
transform:translateY(-5px);
}
100% {
opacity:0;
}
}
/*
 * ============================================================
 * ERROR + AMBIENT EFFECTS
 * ============================================================
 */

.message-error {
color:#edc0a8;
}
.chat-ambient {
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
pointer-events:none;
opacity:0.34;
background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%);
transition:opacity 450ms ease;
}
body.chat-home:has(#chatInput:focus) .chat-ambient {
opacity:0.72;
}
.chat-ambient .ripple {
position:absolute;
left:50%;
bottom:32px;
width:70px;
height:70px;
border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
border-radius:50%;
opacity:0;
box-shadow:0 0 20px color-mix(in srgb,var(--accent) 12%,transparent);
animation:chat-ripple 6s cubic-bezier(0.2,0.65,0.25,1) infinite;
}
.chat-ambient .r2 {
animation-delay:-1.5s;
}
.chat-ambient .r3 {
animation-delay:-3s;
}
.chat-ambient .r4 {
animation-delay:-4.5s;
}
@keyframes chat-ripple {
0% {
opacity:0;
transform:translate(-50%,50%) scale(0.3);
}
12% {
opacity:0.5;
}
75% {
opacity:0.08;
}
100% {
opacity:0;
transform:translate(-50%,50%) scale(13);
}
}
/*
 * ============================================================
 * RESPONSIVE
 * ============================================================
 */

@media (max-width:600px) {
#chatLog {
padding:17px 17px 38px 11px;
}
.message-row.user {
padding-left:72px;
}
.chat-bubble.user {
max-width:100%;
}
.chat-bubble.bot {
padding:13px 1px 9px 10px;
}
.message-preview-stage {
max-width:100%;
}
.message-preview-bubble {
max-width:calc(100vw - 28px);
max-height:calc(100dvh - 180px);
}
.message-row.user.message-editing {
padding-left:27px;
}
.message-row.user.message-editing .chat-bubble.user {
width:100%;
max-width:100%;
}
.message-navigator {
right:11px;
width:42px;
height:42px;
bottom:10px;
}
.chat-scroll-tab {
right:3px;
}
}
@media (prefers-reduced-motion:reduce) {
.chat-ambient .ripple {
display:none;
}
.message-preview-overlay,.message-preview-actions,.message-preview-action,.chat-bubble.user,.message-navigator,.chat-scroll-tab {
transition:none;
}
.message-row.bot.assistant-arriving .chat-bubble.bot,.message-row.bot.assistant-arriving .chat-bubble.bot > *,.message-view-enter .chat-bubble,.message-focus-pulse .chat-bubble,.thinking,.thinking-ai::after,.thinking-ai .ai-orbit,.thinking-ai .ai-spark,.thinking-copy span,.message-preview-bubble.is-copying,.message-preview-bubble.is-copying .copy-scan,.message-preview-bubble.is-copying .copied-status,.response-is-copying .response-copy-scan,.response-is-copying .response-copied-status {
animation:none;
}
.message-row.bot.assistant-arriving .chat-bubble.bot > * {
opacity:1;
transform:none;
filter:none;
}
}
/* Quiet response metadata lives beside the time, outside the answer. */
.response-meta { position:relative; display:flex; align-items:center; gap:8px; min-height:19px; padding:0 8px; color:#8393ad; }
.response-meta time { padding:0; }
.response-meta .response-boost-badge { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border:1px solid color-mix(in srgb,var(--response-color) 25%,transparent); border-radius:999px; color:color-mix(in srgb,var(--response-color) 45%,#9aaabd); background:color-mix(in srgb,var(--response-color) 4%,transparent); font:650 9px/1.4 system-ui,sans-serif; letter-spacing:.03em; }
.response-boost-icon { font-size:11px; line-height:1; }
.response-activity.is-finished { padding:6px 0 12px; color:#c5d0dd; font-size:11px; }
.response-activity.is-finished .ai-writing-icon { display:none; }
.response-reasoning.is-thinking { box-shadow:inset 0 0 24px color-mix(in srgb,var(--response-color) 5%,transparent); animation:reasoning-glow 2.8s ease-in-out infinite; }
.response-reasoning.is-complete { background:transparent; margin-bottom:10px; }
.reasoning-text { scrollbar-width:thin; scrollbar-color:var(--response-color) transparent; }
@keyframes reasoning-glow { 50% {border-color:var(--response-color);box-shadow:inset 0 0 28px color-mix(in srgb,var(--response-color) 10%,transparent)} }
@media(prefers-reduced-motion:reduce){.response-reasoning.is-thinking{animation:none!important}}
.response-content { min-width: 0; overflow-wrap: anywhere; }
.response-route-debug { margin-left:auto; }
.route-debug-trigger { display:inline-flex; align-items:center; max-width:min(50vw,210px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 8px; border:1px solid color-mix(in srgb,var(--response-color) 32%,transparent); border-radius:999px; color:color-mix(in srgb,var(--response-color) 70%,#d3e1ed); background:color-mix(in srgb,var(--response-color) 7%,#0a1420); font:650 10px/1.4 system-ui,sans-serif; cursor:pointer; list-style:none; transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease; }
.route-debug-trigger::-webkit-details-marker { display:none; }
.route-debug-trigger:hover,.response-route-debug[open] .route-debug-trigger { border-color:var(--response-color); background:color-mix(in srgb,var(--response-color) 13%,#0a1420); box-shadow:0 0 12px color-mix(in srgb,var(--response-color) 15%,transparent); }
.route-debug-trigger:focus-visible { outline:2px solid var(--response-color); outline-offset:2px; }
.route-debug-content { position:absolute; z-index:120; top:calc(100% + 7px); right:0; box-sizing:border-box; width:min(490px,calc(100vw - 30px)); max-height:min(60vh,490px); overflow:auto; padding:14px 16px; border:1px solid color-mix(in srgb,var(--response-color) 38%,#ffffff1a); border-radius:15px; background:linear-gradient(155deg,#142332,#09131ef7); box-shadow:0 20px 48px #00000080,0 0 18px color-mix(in srgb,var(--response-color) 13%,transparent),inset 0 1px 0 #ffffff1b; color:#deebf7; font:500 11px/1.65 system-ui,sans-serif; overflow-wrap:anywhere; animation:route-debug-in 180ms ease-out; }
.route-debug-output { margin:5px 0 2px; padding:9px; border:1px solid color-mix(in srgb,var(--response-color) 20%,transparent); border-radius:8px; background:#07111acc; color:#e4edf6; font:400 10px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:600px) { .route-debug-content { position:fixed; top:50%; left:50%; right:auto; width:min(460px,calc(100vw - 24px)); max-height:min(70dvh,620px); transform:translate(-50%,-50%); animation:route-debug-mobile-in 200ms ease-out; } }
@keyframes route-debug-mobile-in { from {opacity:0;transform:translate(-50%,-48%) scale(.97)} to {opacity:1;transform:translate(-50%,-50%) scale(1)} }
.response-route-debug:not([open]) .route-debug-content { display:none; }
@keyframes route-debug-in { from {opacity:0;transform:translateY(-5px)} to {opacity:1;transform:none} }
.route-debug-heading { display:block; margin-bottom:4px; color:var(--response-color); font:700 9px/1.4 system-ui,sans-serif; letter-spacing:.13em; }
.route-debug-usage-heading { margin-top:12px; padding-top:10px; border-top:1px solid #ffffff1a; }
.route-debug-line + .route-debug-line { margin-top:2px; }
.response-stream-tail { position:relative; isolation:isolate; width:43px; height:38px; margin:17px 0 5px 2px; color:color-mix(in srgb,var(--response-color) 84%,white); }
.stream-wand-glow { position:absolute; inset:4px 5px; z-index:-1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--response-color) 28%,transparent),transparent 72%); filter:blur(5px); animation:stream-wand-glow 2.1s ease-in-out infinite; }
.response-stream-tail svg { position:absolute; left:7px; top:2px; width:30px; height:30px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--response-color) 45%,transparent)); animation:stream-wand-write 1.8s ease-in-out infinite; }
.stream-spark { position:absolute; width:3px; height:3px; border-radius:50%; background:currentColor; box-shadow:0 0 7px 1px currentColor; animation:stream-wand-spark 1.7s ease-in-out infinite; }
.stream-spark.spark-one { left:4px; top:24px; }
.stream-spark.spark-two { left:9px; top:31px; animation-delay:.35s; }
.stream-spark.spark-three { left:22px; top:3px; animation-delay:.72s; }
.stream-spark.spark-four { left:33px; top:13px; animation-delay:1.05s; }
@keyframes stream-wand-glow { 50% { opacity:.35; transform:scale(.8); } }
@keyframes stream-wand-write { 50% { transform:translate(1px,-1px) rotate(5deg); } }
@keyframes stream-wand-spark { 0%,100% { opacity:.12; transform:scale(.45); } 45% { opacity:1; transform:scale(1.35); } 70% { opacity:.45; transform:translate(-3px,2px) scale(.8); } }
@media(prefers-reduced-motion:reduce) { .response-stream-tail svg,.stream-wand-glow,.stream-spark { animation:none!important; } .stream-spark { opacity:.65; } }
.response-content .md-table { table-layout: fixed; }
.response-activity { display:flex; align-items:center; gap:9px; color:var(--response-color); padding:12px 0; font:600 12px/1.5 system-ui,sans-serif; }
.response-activity .activity-time { color:#d8e1eb; font-variant-numeric:tabular-nums; font-size:10px; }
.ai-writing-icon { width:27px; height:27px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--response-color) 35%,transparent)); }
.ai-writing-icon .ai-pen { transform-origin:16px 16px; animation:ai-write 1.8s ease-in-out infinite; }
.ai-writing-icon .ai-spark { fill:currentColor; stroke:none; transform-origin:6px 9px; animation:ai-sparkle 2.4s ease-in-out infinite; }
.ai-writing-icon .ai-spark.small { transform-origin:26px 23px; animation-delay:.7s; }
.ai-writing-icon .ai-ink { stroke-dasharray:15; animation:ai-ink 1.8s ease-in-out infinite; }
@keyframes ai-write { 0%,100%{transform:translate(0,0) rotate(-5deg)} 50%{transform:translate(1px,-1px) rotate(4deg)} }
@keyframes ai-sparkle { 0%,100%{opacity:.35;transform:scale(.75)} 50%{opacity:1;transform:scale(1)} }
@keyframes ai-ink { 0%{stroke-dashoffset:15;opacity:.3} 70%,100%{stroke-dashoffset:0;opacity:.8} }
@media(prefers-reduced-motion:reduce){.ai-writing-icon *{animation:none!important}}
.response-stream-status { margin-top: 10px; color: var(--response-color); font: 600 11px/1.4 system-ui, sans-serif; }
.xiao-intake-header { position:sticky;top:0;z-index:3;background:var(--bg);padding-top:8px; }
.xiao-home-resisting .xiao-intake-header { transform:translateY(var(--xiao-home-pull,0px));box-shadow:0 7px 18px #ffe75b13; }
.response-activity .activity-language { display:none; }
.response-activity.is-reasoning .activity-language { display:block;position:relative;min-width:170px;height:24px;font:500 16px/24px Georgia,serif;color:color-mix(in srgb,var(--response-color) 72%,white); }
.response-activity.is-reasoning .activity-label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.response-activity.is-deliberating:not(.is-reasoning) .activity-label { color:color-mix(in srgb,var(--response-color) 72%,white);font:500 15px/1.5 Georgia,serif; }
.thinking .ai-writing-icon { width:27px;height:27px; }
.thinking-copy { width:190px; }
.thinking-copy span { color:color-mix(in srgb,var(--response-color) 70%,white); }