/* Small, responsive movements. No layout animation or delay before an action. */
:root{--ui-ease:cubic-bezier(.2,.8,.2,1);--ui-tint:color-mix(in srgb,#8170cf 8%,var(--surface));--ui-ring:color-mix(in srgb,#8170cf 18%,transparent)}
button{-webkit-tap-highlight-color:transparent}
:where(.icon,.copy-button,.send-button,.new-chat,.primary,.side-link,.row-menu,.project-chat-card,.filecard-remove,.project-row,.chat-row,.attach-menu label,.action-menu button){
  transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 180ms ease,opacity 160ms ease,transform 180ms var(--ui-ease);
}
:where(main,main>header,#sidebar,.composer-wrap,.composer,#model){transition:background-color 200ms ease,border-color 200ms ease,box-shadow 200ms ease}
/* Preserve the mobile drawer's slide and visibility transitions. */
#sidebar{transition:transform .22s var(--ui-ease),visibility .22s,background-color 200ms ease}
.new-chat{display:flex;align-items:center;gap:10px}
.new-chat span{font-size:inherit;margin:0}
.new-chat svg,.attach-menu svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.attach-menu svg{color:var(--muted)}
.icon svg,.send-button svg,.new-chat svg{transition:transform 220ms var(--ui-ease),opacity 160ms ease}
.composer:focus-within{border-color:color-mix(in srgb,#8170cf 50%,var(--line));box-shadow:0 0 0 3px var(--ui-ring),0 5px 18px #00000007}
#model:focus-visible,button:focus-visible{outline:2px solid #8170cf;outline-offset:3px}
#attachToggle[aria-expanded="true"],#moreActions[aria-expanded="true"]{background:var(--hover);color:var(--text)}
#attachToggle[aria-expanded="true"] svg{transform:rotate(45deg)}
.project-row.active::before,.chat-row.active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:#8170cf;opacity:.7}
.header-actions .copy-button[data-tooltip]::after{bottom:auto;top:calc(100% + 8px)}
.attach-menu{transform-origin:24px bottom}
.action-menu{transform-origin:calc(100% - 24px) top}
.attach-menu:not([hidden]),.action-menu:not([hidden]){animation:menu-appear 170ms var(--ui-ease) both}
.copy-button.is-copied svg{animation:check-appear 240ms var(--ui-ease) both}
#toast{border:1px solid color-mix(in srgb,var(--bg) 15%,transparent);border-radius:16px;padding:11px 16px;box-shadow:0 8px 24px #0002;transition:opacity 180ms ease,transform 220ms var(--ui-ease)}
.theme-sun,.theme-moon{transform-origin:12px 12px;transition:transform 320ms var(--ui-ease),opacity 220ms ease}
.theme-sun{opacity:1;transform:rotate(0) scale(1)}
.theme-moon{opacity:0;transform:rotate(-60deg) scale(.5)}
.dark .theme-sun{opacity:0;transform:rotate(90deg) scale(.5)}
.dark .theme-moon{opacity:1;transform:rotate(0) scale(1)}
@media (hover:hover) and (pointer:fine){
  .icon:not(:disabled):hover,.copy-button:not(:disabled):hover,.row-menu:hover{background:var(--ui-tint);color:var(--text)}
  .new-chat:not(:disabled):hover,.project-chat-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,#8170cf 28%,var(--line));box-shadow:0 4px 12px #0000000a}
  .send-button:not(:disabled):hover,.primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #0002}
  #send:not(:disabled):hover svg{transform:translateY(-2px)}
  .stop-button:not(:disabled):hover{background:var(--danger);color:#fff}
  .side-link:hover,.attach-menu label:hover,.action-menu button:hover{background:var(--ui-tint);color:var(--text)}
}
button:disabled{transform:none;box-shadow:none}
button:not(:disabled):active{filter:none}
.icon:not(:disabled):active,.copy-button:not(:disabled):active,.send-button:not(:disabled):active,.row-menu:active,.filecard-remove:active{transform:scale(.92);transition-duration:65ms}
.new-chat:not(:disabled):active,.primary:not(:disabled):active,.side-link:active,.project-chat-card:active,.attach-menu label:active,.action-menu button:active{transform:scale(.98);transition-duration:65ms}
.project-row:active,.chat-row:active{background:var(--ui-tint)}
.send-button:not(:disabled):active,.new-chat:not(:disabled):active{box-shadow:none}
@keyframes menu-appear{from{opacity:0;transform:translateY(5px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes check-appear{from{opacity:.4;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  button:not(:disabled):hover,button:not(:disabled):active,.attach-menu label:active{transform:none!important}
  #send:not(:disabled):hover svg{transform:none}
}