:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --surface-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* transitions.dev modal: CSS discrete transitions preserve native dialog focus. */
#dialog.t-modal {
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity 150ms var(--surface-ease), transform 150ms var(--surface-ease),
    display 150ms allow-discrete, overlay 150ms allow-discrete;
}
#dialog.t-modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none;
  transition-duration: 230ms;
}
@starting-style {
  #dialog.t-modal[open] { opacity: 0; transform: translateY(6px) scale(.985); }
}
#dialog.t-modal::backdrop {
  opacity: 0;
  transition: opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete;
}
#dialog.t-modal[open]::backdrop { opacity: 1; animation: none; transition-duration: 230ms; }
@starting-style { #dialog.t-modal[open]::backdrop { opacity: 0; } }

/* transitions.dev panel reveal, adapted to the existing side panel and archive tabs. */
html[data-ui="workbench"] .shell.has-projects { transition: grid-template-columns 200ms var(--surface-ease); }
html[data-ui="workbench"] .project-sidebar {
  transition: transform 200ms var(--surface-ease), opacity 200ms var(--surface-ease);
}
html[data-ui="workbench"] #main.t-library-enter {
  animation: t-library-enter 230ms var(--surface-ease) both;
}
@keyframes t-library-enter {
  from { opacity: .5; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #dialog.t-modal, #dialog.t-modal::backdrop,
  html[data-ui="workbench"] .shell.has-projects,
  html[data-ui="workbench"] .project-sidebar { transition: none !important; animation: none !important; }
  html[data-ui="workbench"] #main.t-library-enter { animation: none !important; }
}

:root {
  --shimmer-dur: 2000ms;
  --shimmer-base: #7c7c7c;
  --shimmer-highlight: #0d0d0d;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
}
html[data-theme="dark"] {
  --shimmer-base: #858585;
  --shimmer-highlight: #f1f1f1;
}
/* transitions.dev: keep the in-progress label alive without a spinner. */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

html[data-ui="workbench"] :is(
  .sidebar .nav button,
  .project-sidebar .project-item,
  .project-sidebar .project-expand,
  .project-sidebar .project-rename,
  .project-sidebar .icon-btn,
  .company-trigger,
  .ai-dock button,
  .dialog-actions .btn
):not(:disabled):not([aria-disabled="true"]) {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    filter 130ms ease,
    transform 150ms ease;
}
html[data-ui="workbench"] :is(
  .sidebar .nav button,
  .project-sidebar .project-item,
  .project-sidebar .project-expand,
  .project-sidebar .project-rename,
  .project-sidebar .icon-btn,
  .company-trigger,
  .ai-dock button,
  .dialog-actions .btn
):not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(.94);
}

html[data-ui="workbench"] .ai-account-popover.t-dropdown { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; animation: none !important; }
  html[data-ui="workbench"] :is(
    .sidebar .nav button,
    .project-sidebar .project-item,
    .project-sidebar .project-expand,
    .project-sidebar .project-rename,
    .project-sidebar .icon-btn,
    .company-trigger,
    .ai-dock button,
    .dialog-actions .btn
  ) { transition: none !important; filter: none !important; }
}
