/* Quiet future: one motion language, short transitions, no decorative idle loops. */
:root {
  --ui-fast: 130ms;
  --ui-enter: 220ms;
  --ui-ease: cubic-bezier(.2,.75,.3,1);
  --ui-glow: #8be9d3;
  --ui-edge: rgba(125,223,195,.18);
}
[data-theme='light'] { --ui-glow: #00876c; --ui-edge: rgba(0,122,99,.16); }

/* Ordinary focus/selection remains visible even with effects disabled. */
.auth-tab.active { transform: none; }
html[data-ui-motion='on'] :is(.btn-primary,.btn-danger,.btn-secondary,.button,.icon-btn,.link-btn,.auth-tab,.chat-item,[role='tab'],.shared-content-summary,.channel-stat-button) {
  transition: color var(--ui-fast), background-color var(--ui-fast), border-color var(--ui-fast),
    box-shadow var(--ui-fast), transform var(--ui-fast) var(--ui-ease);
}
html[data-ui-motion='on'] .btn-primary {
  background-image: linear-gradient(145deg,rgba(255,255,255,.12),transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 3px 12px rgba(0,122,99,.13);
}
html[data-ui-motion='on'] .chat-item.active { box-shadow: inset 3px 0 0 var(--green); }
html[data-ui-motion='on'] :is(.auth-tab.active,[role='tab'][aria-selected='true']) { box-shadow: inset 0 -2px 0 var(--green); }

@media (hover:hover) and (pointer:fine) {
  html[data-ui-motion='on'] :is(.btn-primary,.icon-btn,.shared-content-summary):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px var(--ui-edge), 0 3px 14px rgba(0,168,132,.12);
  }
  html[data-ui-motion='on'] .btn-danger:not(:disabled):hover { box-shadow: 0 0 0 2px rgba(241,92,109,.12); }
}
html[data-ui-motion='on'] :is(.btn-primary,.btn-danger,.btn-secondary,.button,.icon-btn,.auth-tab,.shared-content-summary):not(:disabled):active {
  transform: scale(.97);
  transition-duration: 65ms;
}
html[data-ui-motion='on'] :is(.field input,.search input,.name-edit,.composer-input,.chat-search-field) {
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast);
}
html[data-ui-motion='on'] :is(.field input,.search input,.name-edit,.composer-input):focus,
html[data-ui-motion='on'] .chat-search-field:focus-within { box-shadow: 0 0 0 3px var(--ui-edge); }

/* Transform-only switch travel replaces the old layout-changing left animation. */
.switch::after { left:3px; }
.switch:checked::after { left:3px; transform:translateX(22px); }
html[data-ui-motion='on'] .switch::after { transition: transform 180ms var(--ui-ease); }
html[data-ui-motion='on'] .switch::before { transition: background-color var(--ui-fast), box-shadow var(--ui-fast); }
html[data-ui-motion='on'] .switch:checked::before { box-shadow: 0 0 0 3px var(--ui-edge); }
[data-theme='light'] .switch:not(:checked)::before { background:#dce3e6; box-shadow:inset 0 0 0 1px #7a8b91; }

html[data-ui-motion='on'] .modal { animation:none; }
html[data-ui-motion='on'] .modal-card { animation:ui-surface-in var(--ui-enter) var(--ui-ease); }
html[data-ui-motion='on'] .panel { animation:ui-panel-in var(--ui-enter) var(--ui-ease); }
html[data-ui-motion='on'] .toast { animation:ui-toast-in 180ms var(--ui-ease); border:1px solid var(--ui-edge); }
html[data-ui-motion='on'] :is(.chat-search-bar,.reply-bar) { animation:ui-inline-in 150ms var(--ui-ease); }
html[data-ui-motion='on'] .react-bar { animation:ui-surface-in 160ms var(--ui-ease); }
@keyframes ui-surface-in { from { transform:translateY(14px) scale(.985); } to { transform:translateY(0) scale(1); } }
@keyframes ui-panel-in { from { transform:translateX(22px); } to { transform:translateX(0); } }
@keyframes ui-toast-in { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes ui-inline-in { from { opacity:.55; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:768px) {
  html[data-ui-motion='on'] .app.show-chat .conversation { animation:ui-conversation-in 200ms var(--ui-ease); }
  @keyframes ui-conversation-in { from { opacity:.8; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
}

/* A bounded color-only lens at the point of activation; never an input layer. */
.ui-tap-surface { position:fixed; z-index:30; display:block; overflow:hidden; contain:strict; pointer-events:none!important; }
.ui-tap-wave { position:absolute; display:block; border-radius:50%; background:radial-gradient(circle,currentColor 0%,transparent 70%); border:1px solid currentColor; pointer-events:none!important; }
.pin-lock-active .ui-tap-surface, html[data-ui-motion='off'] .ui-tap-surface { display:none!important; }
html[data-ui-motion='off'] :is(.modal,.modal-card,.panel,.toast,.react-bar,.reply-bar,.chat-search-bar,.conversation),
html.pin-lock-active :is(.modal,.modal-card,.panel,.toast,.react-bar,.reply-bar,.chat-search-bar,.conversation) { animation:none!important; }
html[data-ui-motion='off'] :is(button,.icon-btn,.chat-item,.switch,input,textarea),
html.pin-lock-active :is(button,.switch,input,textarea),
html[data-ui-motion='off'] .switch::before, html[data-ui-motion='off'] .switch::after,
html.pin-lock-active .switch::before, html.pin-lock-active .switch::after { transition:none!important; }
html[data-ui-motion='off'] :is(.btn-primary,.icon-btn,.send-btn,.mic-btn,.auth-tab):active { transform:none; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .ui-tap-surface { display:none!important; }
  :is(.btn-primary,.icon-btn,.btn-danger,.button,.auth-tab,.shared-content-summary):active { transform:none!important; }
}