/* Design Spells: native caret, circular theme reveal, sidebar fold, waiting game. */
#chatInput:focus { animation: delight-caret 4.4s step-end infinite; }
@keyframes delight-caret { 0%,100% {caret-color:#4285f4} 25% {caret-color:#ea4335} 50% {caret-color:#fbbc05} 75% {caret-color:#34a853} }
@supports (caret-animation: manual) {
  #chatInput:focus { caret-animation:manual; animation-name:delight-caret-blink; }
  @keyframes delight-caret-blink {
    0%,100% {caret-color:#4285f4} 12.5%,37.5%,62.5%,87.5% {caret-color:transparent}
    25% {caret-color:#ea4335} 50% {caret-color:#fbbc05} 75% {caret-color:#34a853}
  }
}
::view-transition-group(root) {animation:none;}
::view-transition-image-pair(root) {isolation:isolate;}
::view-transition-old(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) {
  z-index:1;
  mix-blend-mode:normal;
  animation:theme-ripple .58s cubic-bezier(.22,1,.36,1) both;
  clip-path:circle(var(--theme-ripple-radius) at var(--theme-ripple-x) var(--theme-ripple-y));
}
@keyframes theme-ripple {
  from {clip-path:circle(0 at var(--theme-ripple-x) var(--theme-ripple-y));}
  to {clip-path:circle(var(--theme-ripple-radius) at var(--theme-ripple-x) var(--theme-ripple-y));}
}
.delight-sidebar-icon { transition:transform .3s cubic-bezier(.22,1,.36,1); transform-origin:center; }
.delight-sidebar-icon path { transform-box:fill-box; transform-origin:center; transition:transform .3s cubic-bezier(.22,1,.36,1); }
:is(.btn-sidebar-toggle,.btn-sidebar-open):is(:hover,:focus-visible) .delight-sidebar-icon { transform:perspective(60px) rotateY(-14deg) scale(1.06); }
:is(.btn-sidebar-toggle,.btn-sidebar-open):is(:hover,:focus-visible) .delight-sidebar-icon path { transform:translateX(-2px); }
.btn-sidebar-open .delight-sidebar-icon { transform:rotateY(180deg); }
.btn-sidebar-open:is(:hover,:focus-visible) .delight-sidebar-icon { transform:perspective(60px) rotateY(166deg) scale(1.06); }
.snake-break { width:min(100% - 32px,368px); margin:16px auto; padding:12px; border:1px solid var(--border-subtle); border-radius:18px; color:var(--text-main); background:var(--bg-card); font-size:13px; }
.snake-break button { color:inherit; background:var(--bg-hover); border:1px solid var(--border-subtle); border-radius:9px; padding:6px 10px; min-height:36px; }
.snake-break .snake-invitation { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; border:0; background:transparent; text-align:start; }
.snake-break header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.snake-break p { color:var(--text-secondary); font-size:12px; line-height:1.7; margin:5px 0 0; }
.snake-break canvas { display:block; width:100%; height:auto; aspect-ratio:10/7; border-radius:10px; direction:ltr; }
.snake-toolbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.snake-toolbar [role=status] { flex:1; min-width:80px; font-variant-numeric:tabular-nums; }
.snake-directions { display:grid; grid-template-columns:repeat(3,44px); justify-content:center; gap:5px; margin:10px auto 0; }
.snake-directions button { min-height:44px; font-size:19px; touch-action:manipulation; }
.snake-directions button:first-child { grid-column:2; }
.snake-directions button:nth-child(2) { grid-column:1; }
@media (prefers-reduced-motion:reduce) {
  #chatInput:focus {animation:none;caret-animation:auto;caret-color:var(--text-main);}
  .delight-sidebar-icon,.delight-sidebar-icon path {transition:none!important;transform:none!important;}
  ::view-transition-group(root) {animation:none;}
}
@media (max-width:600px) {
  #chatMessages:has(.snake-break.is-playing) {padding-bottom:112px;}
}

.theme-toggle {position:relative;display:inline-grid;place-items:center;min-width:36px;min-height:36px;}
.theme-toggle svg {grid-area:1/1;transition:opacity .2s ease,transform .3s ease;}
.theme-toggle .theme-moon {opacity:0;transform:rotate(-50deg) scale(.6);}
body.light-theme .theme-toggle .theme-sun {opacity:0;transform:rotate(50deg) scale(.6);}
body.light-theme .theme-toggle .theme-moon {opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce) {.theme-toggle svg {transition:none;}}