/* Motion belongs to the custom portal, independently of the gateway. */
:root {
  --motion-fast: 160ms;
  --motion-normal: 280ms;
  --motion-panel: 360ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-settle: cubic-bezier(.2, .8, .2, 1);
}

.q-pill, .btn, .try-send, .new-chat-button, .model-save,
.console-sidebar nav a, .q-tabs button, .widget-tabs button,
.q-apps-tabs button, .portal-kind-nav button, .try-toggle,
.portal-shortcuts > *, .account-popover nav > *, .portal-amounts button {
  transition: background-color var(--motion-normal), color var(--motion-fast),
    border-color var(--motion-normal), box-shadow var(--motion-normal),
    translate var(--motion-normal) var(--motion-ease),
    scale var(--motion-fast) var(--motion-ease);
  -webkit-tap-highlight-color: transparent;
}

:is(.q-pill, .btn, .try-send, .new-chat-button, .model-save,
    .portal-shortcuts > *, .portal-amounts button):not(:disabled):active {
  scale: .965;
  translate: 0 0.0625rem;
}

.market-card, .console-metric-grid article, .portal-plan, .q-function,
.q-model-tile, .highlight, .quick-widget {
  transition: translate var(--motion-panel) var(--motion-ease),
    box-shadow var(--motion-panel), border-color var(--motion-normal);
}

@media (hover: hover) and (pointer: fine) {
  :is(.market-card, .console-metric-grid article, .portal-plan, .q-function):hover {
    translate: 0 -0.25rem;
    border-color: #dcdcf0;
    box-shadow: 0 0.75rem 1.875rem #35365e0b, 0 0.1875rem 0.5rem #35365e04;
  }
  :is(.q-model-tile, .highlight):hover { translate: 0 -0.1875rem; }
  .q-pill.black:hover { box-shadow: 0 0.375rem 1.125rem #15162419; translate: 0 -0.0625rem; }
  .portal-shortcuts > :hover .portal-icon { translate: 0 -0.1875rem; }
  .account-popover nav > :hover .d-icon { translate: 0.125rem 0; }
}

.portal-shortcuts .portal-icon, .account-popover .d-icon, .chevron {
  transition: translate var(--motion-normal) var(--motion-ease),
    rotate var(--motion-normal) var(--motion-ease);
}
.q-drop:is(:hover, :focus-within) .chevron { rotate: 180deg; }

.console-sidebar nav.motion-nav { position: relative; isolation: isolate; }
.motion-nav > a { position: relative; z-index: 1; }
.console-sidebar .motion-nav > a.active { background: transparent; }
.portal-nav-indicator {
  position: absolute;
  z-index: 0;
  background: #e7e8ef;
  border-radius: 1.5rem;
  pointer-events: none;
  transform-origin: top left;
}

.q-dropdown {
  display: grid;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.375rem) scale(.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 180ms, transform var(--motion-normal) var(--motion-ease),
    visibility 180ms;
}
.q-drop:is(:hover, :focus-within) .q-dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.q-drop:last-of-type .q-dropdown { left: auto; right: 0; transform-origin: top right; }

/* History never leaves the grid during a transition, so the main column stays put. */
body.gallery .refined-try {
  transition: grid-template-columns 240ms var(--motion-settle);
}
body.gallery .refined-try .try-sidebar {
  transition: transform 240ms var(--motion-settle), opacity 160ms,
    visibility 240ms;
}

/* Discrete display transitions keep native hidden/open and focus handling intact. */
.account-popover {
  opacity: 1;
  transform: none;
  transform-origin: top right;
  transition: opacity 180ms, transform var(--motion-panel) var(--motion-ease),
    display 180ms allow-discrete;
}
.account-popover[hidden] {
  opacity: 0;
  transform: translateY(-0.5rem) scale(.96);
  pointer-events: none;
}
.account-popover:not([hidden]) nav > * {
  animation: portal-menu-item 300ms var(--motion-ease) backwards;
}
.account-popover nav > :nth-child(2) { animation-delay: 22ms; }
.account-popover nav > :nth-child(3) { animation-delay: 44ms; }
.account-popover nav > :nth-child(4) { animation-delay: 66ms; }
.account-popover nav > :nth-child(5) { animation-delay: 88ms; }
.account-popover nav > :nth-child(6) { animation-delay: 110ms; }
.account-popover nav > :nth-child(7) { animation-delay: 132ms; }

dialog {
  opacity: 0;
  transform: translateY(0.875rem) scale(.975);
  transition: opacity 180ms, transform 220ms var(--motion-ease),
    display 220ms allow-discrete, overlay 220ms allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
dialog:not([open]) { pointer-events: none; }
dialog::backdrop {
  background: #25203100;
  transition: background-color 220ms, display 220ms allow-discrete,
    overlay 220ms allow-discrete;
}
dialog[open]::backdrop { background: #2520312b; }
.model-drawer { transform: translateX(3rem); }
.model-drawer[open] { transform: none; }

@starting-style {
  .account-popover:not([hidden]) { opacity: 0; transform: translateY(-0.5rem) scale(.96); }
  dialog[open] { opacity: 0; transform: translateY(0.875rem) scale(.975); }
  dialog[open]::backdrop { background: #25203100; }
  .model-drawer[open] { opacity: 0; transform: translateX(3rem); }
}

:is(.key-popover, .chat-parameters, .q-mobile-links):not([hidden]) {
  animation: portal-panel-enter var(--motion-normal) var(--motion-ease) backwards;
  transform-origin: top right;
}
.toast { transition: opacity 220ms, transform 300ms var(--motion-ease); }
.try-compose { transition: border-color 220ms, box-shadow 300ms; }
.try-compose:focus-within { box-shadow: 0 0 0 0.25rem #8b7ae70b, 0 0.4375rem 1.5rem #6b5c8f07; }
.thinking { animation: portal-thinking 1.4s ease-in-out infinite; }
.usage-bar i { transform-origin: bottom; }

@keyframes portal-panel-enter {
  from { opacity: 0; transform: translateY(-0.375rem) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes portal-menu-item {
  from { opacity: 0; transform: translateY(-0.3125rem); }
  to { opacity: 1; transform: none; }
}
/* The ribbon moves independently from its caption and controls. */
.q-carousel { isolation: isolate; }
.q-carousel > img {
  transform: scale(1.1);
  transform-origin: 50% 55%;
  animation: portal-ribbon-flow 14s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}
.q-carousel::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,transparent 25%,#dceeff55 39%,#fff9 49%,#e6dbff40 57%,transparent 70%);
  opacity: .32;
  transform: translateX(-25%);
  animation: portal-ribbon-light 12s ease-in-out infinite;
  animation-play-state: paused;
}
.q-carousel[data-motion-running="true"] > img,
.q-carousel[data-motion-running="true"]::after { animation-play-state: running; }
.q-carousel .visual-caption { z-index: 1; }
.ribbon-motion-toggle {
  position: absolute;
  z-index: 1;
  top: 1.125rem;
  right: 1.125rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0.0625rem solid #fff9;
  border-radius: 50%;
  color: #59677a;
  background: #ffffffa6;
  backdrop-filter: blur(0.75rem);
}
.ribbon-motion-toggle:hover { background: #fff; }
.ribbon-motion-toggle svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ribbon-motion-toggle .ribbon-play { display: none; }
.ribbon-motion-toggle[aria-pressed="true"] .ribbon-play { display: block; }
.ribbon-motion-toggle[aria-pressed="true"] .ribbon-pause { display: none; }
@keyframes portal-ribbon-flow {
  0%,100% { transform: translate(-2.2%,-.6%) scale(1.1,1.08) rotate(-.6deg); }
  35% { transform: translate(.5%,1.6%) scale(1.12,1.12) rotate(.3deg); }
  68% { transform: translate(2.2%,-1.1%) scale(1.1,1.13) rotate(.6deg); }
}
@keyframes portal-ribbon-light {
  0%,100% { transform: translateX(-25%) rotate(-4deg); opacity: .2; }
  50% { transform: translateX(25%) rotate(3deg); opacity: .42; }
}
@keyframes portal-thinking { 50% { opacity: .45; } }

@media (max-width: 40.625rem) {
  .model-drawer { transform: translateY(2rem); }
  @starting-style { .model-drawer[open] { transform: translateY(2rem); } }
}
@media (prefers-reduced-motion: reduce) {
  .q-carousel > img { transform: none; will-change: auto; }
  .q-carousel::after, .ribbon-motion-toggle { display: none; }
  *, *::before, *::after, dialog::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(.q-pill, .market-card, .console-metric-grid article, .portal-plan,
      .q-function, .q-model-tile, .highlight, .quick-widget) { translate: none !important; }
}