:root { --omino-smooth: cubic-bezier(.22, 1, .36, 1); --omino-fast: 180ms; --omino-base: 420ms; }

html { scroll-behavior: smooth; color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body, .ambient, .main, .sb, .inp-bar, .inp-wrap, .st-p, .model-menu, .plus-menu, .ci, input, textarea {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: var(--omino-base);
  transition-timing-function: var(--omino-smooth);
}
body, .main, #welcome, #cv, .inp-bar, #inp-wrap, .model-menu, .plus-menu, .st-p, .sb, .ci, .msg, button, textarea, input {
  transition-timing-function: var(--omino-smooth);
}

button, .ci, .model-option, .plus-item, .ib, .ib2, .it-btn, .theme-btn {
  transition: transform var(--omino-fast) var(--omino-smooth), background var(--omino-base) var(--omino-smooth), color var(--omino-base) var(--omino-smooth), border-color var(--omino-base) var(--omino-smooth), box-shadow var(--omino-base) var(--omino-smooth);
}

button:active, .ci:active, .model-option:active, .plus-item:active { transform: scale(.975); }
#cv { scroll-behavior: smooth; scroll-padding-block: 18px; }
#inp-wrap { transition: transform var(--omino-fast) var(--omino-smooth), box-shadow var(--omino-base) var(--omino-smooth), border-color var(--omino-base) var(--omino-smooth), background var(--omino-base) var(--omino-smooth); }
#inp-wrap:focus-within { transform: translateY(-1px); }
.msg { animation: omino-message-in 360ms var(--omino-smooth) both; }

@keyframes omino-message-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #inp-wrap:focus-within { transform: none; }
}

/* Mobile motion governor: preserve feedback while avoiding animation clashes and scroll jank. */
@media (max-width: 768px) {
  :root { --omino-fast: 160ms; --omino-base: 320ms; }

  html, body { overscroll-behavior: none; }
  #app, .main, .content-area { min-height: 0; }
  #cv, .chat-list, .project-list, #welcome {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Avoid queued smooth-scroll animations while a streamed answer changes height. */
  #cv { scroll-behavior: auto; }

  .sb {
    will-change: transform;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), box-shadow 420ms cubic-bezier(.22, 1, .36, 1) !important;
  }
  #sb-bd {
    animation: none !important;
    transition: opacity 260ms ease, visibility 260ms step-end;
  }
  #sb-bd.show { animation: none !important; }

  .model-menu, .plus-menu, .st-p, .vm-box, .kbd-box, .conversation-delete-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
  }
  .model-menu, .plus-menu {
    transform-origin: bottom left;
    transition: opacity 220ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 220ms step-end !important;
  }
  #stm.show .st-p { animation-duration: 360ms !important; animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important; }

  .msg {
    will-change: opacity, transform;
    animation: omino-mobile-message-in 320ms cubic-bezier(.22, 1, .36, 1) both !important;
  }
  @keyframes omino-mobile-message-in {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .w-chip, .w-logo, .w-h1, .w-sub, .w-chip-btn, .w-recents, .w-recent-item {
    animation-duration: 380ms !important;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
  }

  /* Background effects are intentionally quiet on phones: no GPU-heavy blur/float loops. */
  .ambient { animation: none !important; }
  .ambient .orb, .ambient .spark { animation: none !important; }
  .ambient .orb-d, .ambient .orb-e, .ambient .orb-f, .ambient .spark { display: none !important; }
  .ambient .orb { filter: blur(72px); opacity: .46; }

  .inp-wrap { transition: border-color 260ms ease, box-shadow 300ms cubic-bezier(.22, 1, .36, 1), background-color 260ms ease !important; }
  .inp-wrap:focus-within { transform: none !important; }
  .inp-wrap::before { animation-duration: 5.2s !important; }
}

@media (hover: none) and (pointer: coarse) {
  /* Touch hardware can retain hover after a tap; keep interactions stable. */
  .ci:hover, .w-chip-btn:hover, .w-recent-item:hover, .new-btn:hover, .btn-primary:hover, .btn-ghost:hover { transform: none !important; box-shadow: none; }
  .ci-acts { display: flex; }
  button:active, .ci:active, .model-option:active, .plus-item:active { transform: scale(.98); }
}