/* Native adaptations of Owner-supplied button sources. See DESIGN.md. */
@property --trace-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Flow Button: two arrows exchange positions; the hit area stays fixed. */
.flow-action { position: relative; isolation: isolate; overflow: hidden; padding-inline: 36px; }
.flow-action::before { content: ''; position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-08); transform: scale(0); opacity: 0; transition: transform 420ms var(--ease-out),opacity 220ms var(--ease-out); pointer-events: none; }
.flow-label { position: relative; z-index: 1; transform: translateX(-8px); transition: transform 360ms var(--ease-out); }
.flow-arrow { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; z-index: 1; pointer-events: none; transition: transform 420ms var(--ease-out),opacity 220ms; }
.flow-arrow .icon { width: 17px; height: 17px; }
.flow-arrow-in { left: 16px; opacity: 0; transform: translateX(-38px); }
.flow-arrow-out { right: 16px; }
.flow-action:focus-visible::before { transform: scale(1.6); opacity: 1; }
.flow-action:focus-visible .flow-label { transform: translateX(8px); }
.flow-action:focus-visible .flow-arrow-in { transform: translateX(0); opacity: 1; }
.flow-action:focus-visible .flow-arrow-out { transform: translateX(38px); opacity: 0; }
.sidebar .new-chat.flow-action { justify-content: center; min-height: 46px; border-radius: var(--radius-md); border-color: var(--line-hover); }

/* Shiny CTA: the source's padding-box / conic border, in a single pink hue. */
.button.shiny-action { position: relative; isolation: isolate; overflow: hidden; border: 1px solid transparent; background: linear-gradient(var(--bg-soft),var(--bg-soft)) padding-box,conic-gradient(from var(--trace-angle,0deg),transparent 0%,var(--accent-24) 12%,var(--accent) 18%,var(--accent-24) 24%,transparent 36% 100%) border-box,linear-gradient(var(--line),var(--line)) border-box; box-shadow: inset 0 1px 0 var(--bg-hover); }
.button.shiny-action::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%,var(--accent-18),transparent 68%); opacity: 0; pointer-events: none; transition: opacity 220ms; }
.button.shiny-action:focus-visible { animation: trace-orbit 1400ms var(--ease-out) 1; }
.button.shiny-action:focus-visible::after { opacity: 1; }
@keyframes trace-orbit { to { --trace-angle: 360deg; } }

/* Liquid glass: neutral surface reflection, only on this floating control. */
.to-bottom.liquid-action { border: none; overflow: hidden; background: var(--bg-soft); box-shadow: 0 8px 24px var(--backdrop),inset 0 1px 2px var(--line-hover),inset 0 -2px 3px var(--bg-hover); }
.liquid-action::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(-65deg,transparent 25%,var(--line) 42%,var(--bg-hover) 50%,transparent 58%); background-size: 220% 220%; background-position: 0 50%; transition: background-position 420ms var(--ease-out); pointer-events: none; }
.liquid-action:focus-visible::after { background-position: 100% 50%; }
.liquid-action:active::after { background-position: 50% 100%; }
@supports (backdrop-filter: blur(16px)) {
  .to-bottom.liquid-action { background-color: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

/* Advanced Button: radial press response, preserving the solid send color. */
.send-button { position: relative; isolation: isolate; overflow: hidden; box-shadow: inset 0 1px 0 var(--line-strong); }
.send-button::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle,var(--backdrop),transparent 65%); opacity: 0; transform: scale(.2); transition: transform 280ms var(--ease-out),opacity 220ms; pointer-events: none; }
.send-button:active:not(:disabled)::before { opacity: .24; transform: scale(1); }
.send-button .icon { position: relative; transition: transform 220ms var(--ease-out); }
.send-button:disabled { box-shadow: none; }
.send-button[aria-label="停止生成"] .icon { transform: scale(.9); }

@media (hover:hover) {
  .flow-action:not(:disabled):hover::before { transform: scale(1.6); opacity: 1; }
  .flow-action:not(:disabled):hover .flow-label { transform: translateX(8px); }
  .flow-action:not(:disabled):hover .flow-arrow-in { transform: translateX(0); opacity: 1; }
  .flow-action:not(:disabled):hover .flow-arrow-out { transform: translateX(38px); opacity: 0; }
  .button.shiny-action:not(:disabled):hover { background: linear-gradient(var(--bg-soft),var(--bg-soft)) padding-box,conic-gradient(from var(--trace-angle,0deg),transparent 0%,var(--accent-24) 12%,var(--accent) 18%,var(--accent-24) 24%,transparent 36% 100%) border-box,linear-gradient(var(--line),var(--line)) border-box; animation: trace-orbit 1400ms var(--ease-out) 1; }
  .button.shiny-action:not(:disabled):hover::after { opacity: 1; }
  .to-bottom.liquid-action:hover { background-color: var(--bg-soft); }
  .liquid-action:hover::after { background-position: 100% 50%; }
  .send-button[aria-label="发送消息"]:not(:disabled):hover .icon { transform: translateY(-2px); }
}
@media (prefers-reduced-motion:reduce) {
  .flow-action *,.flow-action::before,.liquid-action::after,.send-button .icon,.send-button::before { transition: none; transform: none; }
  .button.shiny-action { animation: none !important; }
}