/* Shared interaction finish for desktop, web and mobile. Keep motion calm and functional. */
:root{--motion-slow:240ms;--ease-standard:cubic-bezier(.2,.7,.2,1)}

:where(button,[role=button],summary,a,[tabindex]):not(:disabled){
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

:where(button,[role=button],summary,a,[tabindex]).is-pressing:not(:disabled){
  transform:translateY(1px) scale(.975)!important;
  filter:brightness(1.08);
}

:where(button,[role=button]).interaction-requested:not(:disabled){
  box-shadow:inset 0 0 0 999px color-mix(in srgb,currentColor 5%,transparent);
}

:where(button,[role=button]).interaction-pending{
  cursor:progress!important;
  opacity:.76!important;
}

:where(button,[role=button]).interaction-pending::after{
  content:"";
  width:11px;
  height:11px;
  margin-left:7px;
  flex:none;
  border:1.5px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:interaction-spin .72s linear infinite;
}

:where(input,textarea,select):focus-visible,
:where(.search,.archives-search):focus-within{
  transition:border-color var(--motion-base) ease,box-shadow var(--motion-base) ease,background-color var(--motion-base) ease;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

:where(#workspace>section,.board-detail,.group-thread,.archives-page,.agents-page,.account-page).interaction-entering{
  animation:interaction-surface-in var(--motion-slow) var(--ease-out) both;
}

dialog[open]{
  animation:none!important;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity var(--motion-base) ease,transform var(--motion-slow) var(--ease-out),overlay var(--motion-base) allow-discrete,display var(--motion-base) allow-discrete;
}

@starting-style{
  dialog[open]{opacity:0;transform:translateY(8px) scale(.985)}
  dialog[open]::backdrop{opacity:0}
  :where([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(.985)}
}

dialog::backdrop{
  opacity:1;
  transition:opacity var(--motion-base) ease,overlay var(--motion-base) allow-discrete,display var(--motion-base) allow-discrete;
}

:where([popover]:popover-open){
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--ease-out),overlay var(--motion-base) allow-discrete,display var(--motion-base) allow-discrete;
}

#toast:not([hidden]){animation:interaction-toast-in var(--motion-slow) var(--ease-out) both}

:where(.file-card,.delivery-card,.delivery-gallery-item,.task-delivery,.project-task-row,.knowledge-file-row){
  transition:background-color var(--motion-base) ease,border-color var(--motion-base) ease,box-shadow var(--motion-base) ease,transform var(--motion-fast) ease;
}

:where(.file-card,.delivery-card,.delivery-gallery-item,.task-delivery,.project-task-row,.knowledge-file-row):has(button:focus-visible){
  border-color:color-mix(in srgb,var(--accent) 70%,var(--line));
}

@keyframes interaction-spin{to{transform:rotate(360deg)}}
@keyframes interaction-surface-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes interaction-toast-in{from{opacity:0;transform:translate(-50%,8px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

@media(max-width:700px){
  :where(button,[role=button],summary,a,[tabindex]).is-pressing:not(:disabled){transform:scale(.965)!important}
  body.studio-web dialog .icon-button{min-width:44px;min-height:44px;flex-shrink:0}
  dialog[open]{transform:none}
  @starting-style{dialog[open]{opacity:0;transform:translateY(12px)}}
}

@media(prefers-reduced-motion:reduce){
  :where(button,[role=button],summary,a,[tabindex]),dialog,dialog::backdrop,[popover],#toast,
  :where(#workspace>section,.board-detail,.group-thread,.archives-page,.agents-page,.account-page){
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}
/* Transfer progress is byte-based; only unmeasured server processing breathes. */
.attachment-progress[data-indeterminate="true"]{overflow:hidden}
.attachment-progress[data-indeterminate="true"]>i{width:35%;animation:attachment-transfer 1.4s ease-in-out infinite}
.attachment-upload-card .quiet-button{flex:none;min-height:36px;padding:6px 10px}
.attachment-upload-copy small{color:var(--muted);overflow-wrap:anywhere}
@media(max-width:700px){.attachment-upload-card .quiet-button,.delivery-inline-actions button{min-height:44px}}
@keyframes attachment-transfer{from{transform:translateX(-110%)}to{transform:translateX(290%)}}
@media(prefers-reduced-motion:reduce){.attachment-progress[data-indeterminate="true"]>i{animation:none;transform:none}}