/* Motion and finish layer for the chat. Loaded last; restrained, theme-aware, reduced-motion safe. */
:root {
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 360ms;
  --lift-shadow: 0 6px 20px #0000000d, 0 1px 3px #0000000a;
}

/* Interactive surfaces: colors, borders and shadows ease instead of snapping. */
:is(button,a,.profile,.chat-row,.suggestion,.theme-card,.preset-card,.model-option,.sidebar-tool,.new-chat,.search,.btn,.icon-btn,.circle-btn,.accent-option,.message-source,.account-menu-btn,.settings-tabs button,.code-copy) {
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
:is(.btn,.icon-btn,.circle-btn,.new-chat,.sidebar-tool,.account-menu-btn,.model-option,.theme-card,.preset-card,.accent-option):active { transform: scale(.97); }
.chat-row:active { transform: scale(.985); }

/* Sidebar */
.sidebar { animation: none; }
.new-chat svg, .sidebar-tool-icon svg { transition: transform var(--t-slow) var(--ease-out); }
.new-chat:hover svg { transform: rotate(90deg); }
.sidebar-tool:hover .sidebar-tool-icon svg { transform: translateY(-1px) scale(1.06); }
.profile-chevron { transition: transform var(--t-base) var(--ease-out); }
.profile:hover .profile-chevron { transform: translateX(2px); }
@media (min-width:761px) {
  .app .sidebar { transition: margin-left var(--t-slow) var(--ease-drawer), opacity var(--t-base) var(--ease-out), visibility 0s; }
  .app.sidebar-collapsed .sidebar {
    display: flex; margin-left: calc(-1 * var(--sidebar-width)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: margin-left var(--t-slow) var(--ease-drawer), opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-slow);
  }
}
@media (max-width:760px) {
  .sidebar { transition: transform 380ms var(--ease-drawer), box-shadow 380ms var(--ease-drawer); }
  .backdrop { transition: opacity 300ms var(--ease-out); }
}

/* Top bar and menus */
.model-chevron { transition: transform var(--t-base) var(--ease-out); }
.model-wrap.open .model-chevron { transform: rotate(180deg); }
.model-wrap.open .model-menu, .overlay.open .modal, .context.open { animation: none; }
.model-menu {
  transform: translateY(-6px) scale(.97); transform-origin: top left;
  transition: opacity 160ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.model-wrap.open .model-menu { transition: opacity 180ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
.model-wrap.open .model-option { animation: item-in 300ms var(--ease-out) both; }
.model-wrap.open .model-option:nth-of-type(2) { animation-delay: 30ms; }
.model-wrap.open .model-option:nth-of-type(3) { animation-delay: 60ms; }
.model-wrap.open .model-option:nth-of-type(4) { animation-delay: 90ms; }
.model-check { animation: pop-in 320ms var(--ease-out) both; }
.account-menu { transition: opacity 160ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms; }
.account-menu.open { transition: opacity 180ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
.context.open { animation: menu-in 200ms var(--ease-out) both; transform-origin: top right; }

/* Dialogs fade in and out where the browser supports discrete transitions. */
.overlay { opacity: 0; transition: opacity var(--t-base) var(--ease-out), display var(--t-base) allow-discrete, overlay var(--t-base) allow-discrete; }
.overlay.open { opacity: 1; }
.overlay .modal { transform: translateY(10px) scale(.975); transition: transform 320ms var(--ease-out); }
.overlay.open .modal { transform: none; }
@starting-style {
  .overlay.open { opacity: 0; }
  .overlay.open .modal { transform: translateY(10px) scale(.975); }
}
.settings-panels > section[role=tabpanel]:not([hidden]) { animation: panel-in 260ms var(--ease-out) both; }
.settings-tabs button[aria-selected=true] svg { color: var(--text); }
.theme-card.selected > svg, .preset-card.selected .preset-card-check { animation: pop-in 320ms var(--ease-out) both; }
.theme-card:hover { transform: translateY(-1px); }
.settings-panels .theme-swatch { transition: transform var(--t-base) var(--ease-out); }
.theme-card:hover .theme-swatch { transform: scale(1.05); }

/* Empty state */
.empty[data-motion=enter] :is(.empty-mark,h1,p) { animation: rise-in 600ms var(--ease-out) both; }
.empty[data-motion=enter] h1 { animation-delay: 60ms; }
.empty[data-motion=enter] p { animation-delay: 120ms; }
.empty[data-motion=enter] .suggestion { animation: rise-in 560ms var(--ease-out) both; animation-delay: calc(180ms + var(--i,0) * 50ms); }
.suggestions .suggestion:nth-child(2) { --i: 1; }
.suggestions .suggestion:nth-child(3) { --i: 2; }
.suggestions .suggestion:nth-child(4) { --i: 3; }
.suggestions .suggestion:hover { transform: translateY(-2px); box-shadow: var(--lift-shadow); }
.suggestions .suggestion:active { transform: translateY(0) scale(.98); box-shadow: none; }
.suggestion b svg { transition: transform var(--t-slow) var(--ease-out); }
.suggestion:hover b svg { transform: scale(1.12) rotate(-6deg); }

/* Messages: only new ones animate; re-renders stay still (see motion.js). */
.message { animation: none; }
.message[data-motion=enter].user { animation: msg-user 380ms var(--ease-out) both; transform-origin: right bottom; }
.message[data-motion=enter].assistant { animation: msg-assistant 460ms var(--ease-out) both; }
.chat-stage.stage-enter { animation: stage-in 280ms var(--ease-out) both; }
.message .who { transition: transform var(--t-slow) var(--ease-out); }
.wait-facts-pulse { animation: dot-pulse 1.4s var(--ease-in-out) infinite; }
.code-block { transition: border-color var(--t-base) var(--ease-out); }
.code-block:hover { border-color: var(--line2); }
.message-source:hover { transform: translateY(-1px); }

/* Composer */
.composer { transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), background-color var(--t-base) var(--ease-out); }
.composer:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb,var(--text) 5%,transparent), 0 10px 30px #0000000d; }
.send { transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), transform 260ms var(--ease-out); }
.send:not(:disabled):hover { transform: scale(1.06); opacity: 1; }
.send:not(:disabled):active { transform: scale(.9); }
.send svg { transition: transform 260ms var(--ease-out); }
.send:not(:disabled):not(.stop):hover svg { transform: translateY(-1px); }
.send.stop { animation: pop-in 260ms var(--ease-out) both; }
.web-search.active svg { animation: spin-once 600ms var(--ease-out); }

/* Toast */
.toast { transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-out); }

@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes msg-user { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes msg-assistant { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes stage-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes item-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes dot-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .45; } }
@keyframes spin-once { from { transform: rotate(-90deg); } to { transform: none; } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}