.tn-demo{display:grid;gap:1.5rem;padding-block:clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,4rem);align-items:start}@media (min-width:960px){.tn-demo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem)}.tn-demo__aside{position:sticky;top:5.5rem}}.tn-demo__aside{display:flex;flex-direction:column;gap:1.2rem}.tn-demo__aside .tn-h1{font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem)}.tn-chat{display:flex;flex-direction:column;min-height:min(76svh,720px);border-radius:var(--tn-radius-lg);overflow:hidden;background:var(--tn-chat-bg);border:1px solid var(--tn-line);box-shadow:var(--tn-shadow-lg)}.tn-chat__bar{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--tn-surface);border-bottom:1px solid var(--tn-line)}.tn-chat__avatar{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--tn-green);color:var(--tn-on-green);display:grid;place-items:center;font-family:var(--tn-font-display);font-weight:600;font-size:1.15rem;flex:none}.tn-chat__name{display:flex;flex-direction:column;line-height:1.15}.tn-chat__name b{font-size:.98rem;font-weight:600}.tn-chat__name span{font-size:.75rem;color:var(--tn-muted)}.tn-chat__live,.tn-chat__name span.is-typing{color:var(--tn-green)}.tn-chat__live{margin-left:auto;font-family:var(--tn-font-mono);font-size:var(--tn-t-xs);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem}.tn-chat__live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tn-green-vivid)}.tn-chat__body{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;background-image:radial-gradient(rgb(15 26 21/.06) 1px,transparent 1.2px);background-size:18px 18px;scroll-behavior:smooth}.tn-chat__day{font-family:var(--tn-font-mono);font-size:.65rem;letter-spacing:.08em;padding:.25rem .6rem;border-radius:6px;margin-bottom:.3rem}.tn-chat__day,.tn-chat__sys{align-self:center;color:var(--tn-muted);background:var(--tn-surface)}.tn-chat__sys{max-width:34rem;padding:.55rem .9rem;border-radius:10px;font-size:.82rem;text-align:center}.tn-chat__chips{display:flex;gap:.5rem;flex-wrap:wrap;padding:0 1rem .7rem}.tn-chat__chip{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--tn-green);background:var(--tn-surface);color:var(--tn-green);font-family:var(--tn-font-body);font-size:.85rem;font-weight:600;cursor:pointer}.tn-chat__chip:hover{background:var(--tn-green);color:var(--tn-on-green)}.tn-chat__input{display:flex;gap:.6rem;align-items:center;padding:.7rem .9rem;background:var(--tn-surface);border-top:1px solid var(--tn-line)}.tn-chat__input input{flex:1;min-width:0;height:2.8rem;padding:0 1.1rem;border-radius:999px;border:1px solid var(--tn-line);background:var(--tn-sunken);color:var(--tn-ink);font-family:var(--tn-font-body);font-size:.95rem}.tn-chat__input input::placeholder{color:var(--tn-faint)}.tn-chat__input input:focus{outline:3px solid var(--tn-focus);outline-offset:2px}.tn-chat__input button{width:2.8rem;height:2.8rem;border-radius:50%;border:0;cursor:pointer;flex:none;background:var(--tn-green);color:var(--tn-on-green);display:grid;place-items:center}.tn-chat__input button:disabled{opacity:.5;cursor:default}.tn-chat__input button svg{width:1.1rem;height:1.1rem}.tn-chat__note{padding:.55rem 1rem;text-align:center;font-size:.82rem;color:var(--tn-amber);background:var(--tn-amber-soft)}@media (max-width:640px){.tn-chat{min-height:70svh}}