/* Shared DOM controls. Business behavior belongs in stitch-composer.js. */
:root { --stitch-control-size:48px; --stitch-control-font-size:14px; --stitch-control-icon-size:18px; --stitch-control-surface:rgb(0 0 0 / .035); --md-ui-rainbow-edge:linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff); }
@keyframes stitch-menu-in { from { opacity:0; transform:translateY(4px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes stitch-busy { to { transform:rotate(360deg); } }
:is(.entry-button,.md-ui-button--primary):not(.md-ui-button--brand) { --stitch-send-top:#3d3d46; --stitch-send-bottom:#24242b; box-sizing:border-box; font-family:inherit; cursor:pointer; border:1px solid #25252d; border-radius:9999px; corner-shape:round; padding:10px 23px; color:#fff; background:linear-gradient(var(--stitch-send-top),var(--stitch-send-bottom)); box-shadow:inset 0 1px 0 #ffffff30,inset 0 -2px 0 #0005; font-size:13px; line-height:20px; transform:none; transition:--stitch-send-top 320ms ease,--stitch-send-bottom 320ms ease,border-color 320ms ease,color 200ms ease,box-shadow 150ms ease; }
:is(.entry-button,.md-ui-button--primary):not(.md-ui-button--brand):not(:disabled):is(:hover,:focus-visible),
button:focus-visible .md-ui-button--primary { --stitch-send-top:var(--md-ui-primary-hover, #0047ff); --stitch-send-bottom:var(--md-ui-primary-hover, #0047ff); border-color:var(--md-ui-primary-hover, #0047ff); color:var(--md-ui-primary-hover-ink, #fff); }
:is(.entry-button,.md-ui-button--primary):not(.md-ui-button--brand):focus-visible { outline:2px solid var(--md-ui-primary-hover, #0047ff); outline-offset:3px; }
:is(.entry-button,.md-ui-button--primary):not(.md-ui-button--brand):not(:disabled):active,
button:active .md-ui-button--primary { box-shadow:inset 0 1px 2px #0003,inset 0 -1px 0 #0005; }
:is(.entry-button,.md-ui-button--primary):not(.md-ui-button--brand):disabled { color:#9b9ba3; background:#e8e8eb; border-color:transparent; box-shadow:inset 0 1px 0 rgb(255 255 255 / .65),inset 0 -1px 0 rgb(0 0 0 / .08); opacity:1; cursor:default; }
/* Scoped color-edge button, based on the official theme-generator CTA layers.
   Reference: https://shadcnstudio.com/theme-generator
   Project adaptation: black at rest, brand blue on hover; retain rainbow depth. */
@property --entry-login-surface { syntax:"<color>"; inherits:false; initial-value:#202020; }
.md-ui-button--brand {
  --entry-login-surface:#202020;
  --entry-login-rainbow:var(--entry-rainbow-edge,var(--md-ui-rainbow-edge));
  box-sizing:border-box;
  font-family:inherit;
  cursor:pointer;
  position:relative;
  z-index:1;
  isolation:isolate;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:104px;
  min-width:104px;
  height:48px;
  padding:10px 24px;
  overflow:visible;
  border:2px solid transparent;
  border-radius:9999px; corner-shape:round;
  background-image:linear-gradient(var(--entry-login-surface),var(--entry-login-surface)),linear-gradient(var(--entry-login-surface) 30%,transparent),var(--entry-login-rainbow);
  background-color:transparent;
  background-size:200%;
  background-origin:border-box;
  background-clip:padding-box,border-box,border-box;
  color:#fff;
  font-size:16px;
  font-weight:500;
  line-height:24px;
  white-space:nowrap;
  box-shadow:none;
  animation:entry-login-rainbow 2s linear infinite;
  transition:--entry-login-surface 200ms ease,box-shadow 180ms ease,transform 180ms ease;
}
.md-ui-button--brand::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  bottom:-20%;
  display:block;
  width:100%;
  height:20%;
  border-radius:inherit; corner-shape:inherit;
  background-image:var(--entry-login-rainbow);
  background-size:200%;
  opacity:.72;
  filter:blur(10px);
  animation:entry-login-rainbow 2s linear infinite;
  transition:opacity 180ms ease,transform 180ms ease;
  pointer-events:none;
}
.md-ui-button--brand:not(:disabled):hover,
.md-ui-button--brand:not(:disabled):focus-visible {
  --entry-login-surface:#0047ff;
  transform:translateY(-2px);
  box-shadow:none;
}
.md-ui-button--brand:not(:disabled):hover::before,
.md-ui-button--brand:not(:disabled):focus-visible::before { opacity:.94;transform:translateY(2px) scaleX(1.06); }
.md-ui-button--brand:focus-visible { outline:2px solid #0047ff;outline-offset:4px; }
.md-ui-button--brand:not(:disabled):active {
  transform:translateY(1px);
  box-shadow:none;
}
.md-ui-button--brand:not(:disabled):active::before { opacity:.64;transform:scaleX(.96); }
.md-ui-button--brand:disabled { opacity:.45;cursor:default;animation-play-state:paused; }
.md-ui-button--brand:disabled::before { opacity:.4;animation-play-state:paused; }
/* Full-radius color buttons share one curve generator for the outer rim,
   inset surface and glow. Keep the hit target unclipped: border-shape on the
   button itself would also clip the decorative glow, even with overflow visible. */
.md-corner-brand-surface,.md-corner-brand-glow { display:none; }
@supports (border-shape:path("M 0 0 H 20 V 20 H 0 Z")) {
  .md-ui-button--brand[data-md-corner-fit] {
    --md-brand-fill:var(--entry-login-surface);
    border-shape:none;
    background-image:none;
    background-color:transparent;
  }
  .md-ui-button--brand[data-md-corner-fit]::before { display:none; }
  .md-ui-button--brand[data-md-corner-fit]::after {
    content:"";
    position:absolute;
    z-index:-2;
    inset:calc(-1 * var(--md-capsule-border));
    border-radius:inherit;
    border-shape:var(--md-capsule-outline);
    background-image:linear-gradient(var(--md-brand-fill) 30%,transparent),var(--entry-login-rainbow);
    background-size:200%;
    animation:entry-login-rainbow 2s linear infinite;
    animation-play-state:inherit;
    pointer-events:none;
  }
  .md-ui-button--brand[data-md-corner-fit] > .md-corner-brand-surface {
    display:block;
    position:absolute;
    z-index:-1;
    inset:0;
    border-radius:inherit;
    border-shape:var(--md-capsule-inner);
    background:var(--md-brand-fill);
    pointer-events:none;
  }
  .md-ui-button--brand[data-md-corner-fit] > .md-corner-brand-glow {
    display:block;
    position:absolute;
    z-index:-3;
    inset:calc(-1 * var(--md-capsule-border));
    translate:0 20%;
    filter:blur(10px);
    opacity:.72;
    animation-play-state:inherit;
    transition:opacity 180ms ease,transform 180ms ease;
    pointer-events:none;
  }
  .md-corner-brand-glow::before {
    content:"";
    position:absolute;
    inset:0;
    border-shape:var(--md-capsule-outline);
    background-image:var(--entry-login-rainbow);
    background-size:200%;
    mask-image:linear-gradient(transparent 70%,#000 90%);
    animation:entry-login-rainbow 2s linear infinite;
    animation-play-state:inherit;
  }
  .md-ui-button--brand[data-md-corner-fit]:not(:disabled):is(:hover,:focus-visible) > .md-corner-brand-glow { opacity:.94;transform:translateY(2px) scaleX(1.06); }
  .md-ui-button--brand[data-md-corner-fit]:not(:disabled):active > .md-corner-brand-glow { opacity:.64;transform:scaleX(.96); }
  .md-ui-button--brand[data-md-corner-fit]:focus-visible { outline:none; }
  .md-ui-button--brand[data-md-corner-fit]:focus-visible::after { outline:2px solid #0047ff;outline-offset:4px; }
  .md-ui-button--brand[data-md-corner-fit]:disabled::after,
  .md-ui-button--brand:disabled > .md-corner-brand-glow::before { animation-play-state:paused; }
  .md-ui-button--brand:disabled > .md-corner-brand-glow { opacity:.4; }
}
/* White surface on dark sections; reuse every brand-button layer and state. */
.md-ui-button--brand-white {
  --entry-login-surface:#fff;
  width:auto;
  color:#1c1f2e;
  transition:--entry-login-surface 200ms ease,color 200ms ease,box-shadow 180ms ease,transform 180ms ease;
}
.md-ui-button--brand-white:not(:disabled):hover,
.md-ui-button--brand-white:not(:disabled):focus-visible {
  --entry-login-surface:#fff;
  color:#1c1f2e;
}
@keyframes entry-login-rainbow {
  from { background-position:0; }
  to { background-position:200%; }
}
@media (prefers-reduced-motion:reduce) {
  .md-ui-button--brand,
  .md-ui-button--brand::before,
  .md-ui-button--brand::after,
  .md-corner-brand-glow,
  .md-corner-brand-glow::before { animation:none !important;transition:none !important;background-position:50%; }
  .md-ui-button--brand:not(:disabled):hover,
  .md-ui-button--brand:not(:disabled):focus-visible,
  .md-ui-button--brand:not(:disabled):active,
  .md-ui-button--brand:not(:disabled):hover::before,
  .md-ui-button--brand:not(:disabled):focus-visible::before,
  .md-ui-button--brand:not(:disabled):active::before,
  .md-ui-button--brand[data-md-corner-fit]:not(:disabled):is(:hover,:focus-visible,:active) > .md-corner-brand-glow { transform:none; }
}

.stitch-tool { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:var(--stitch-control-size); height:var(--stitch-control-size); padding:0; border:0; border-radius:50%; corner-shape:round; background:transparent; color:#666570; font:inherit; cursor:pointer; transition:background-color 150ms,color 150ms,transform 150ms cubic-bezier(.2,.8,.2,1),box-shadow 150ms; -webkit-tap-highlight-color:transparent; }
.stitch-tool svg,.stitch-modes svg,.stitch-popover svg { display:block; flex-shrink:0; }
.stitch-tool:not(.stitch-send) > svg:first-child,.stitch-modes svg { width:var(--stitch-control-icon-size); height:var(--stitch-control-icon-size); }
.stitch-tool:hover,.stitch-tool[aria-expanded="true"] { background:#67616d0c; color:#303038; }
.stitch-tool:active { transform:scale(.94); background:#67616d17; }
.stitch-tool:focus-visible,.stitch-modes button:focus-visible,.stitch-popover button:focus-visible { outline:2px solid #aa97c9; outline-offset:3px; }
.stitch-tool:disabled { cursor:default; opacity:.38; background:transparent; transform:none; }
.stitch-tool.md-ui-icon-strong { color:#303030; }
.stitch-tool.md-ui-icon-strong:hover,.stitch-tool.md-ui-icon-strong[aria-expanded="true"] { color:#141414; }
.stitch-tool.md-ui-icon-strong > svg:first-child { width:clamp(22px,calc(var(--stitch-control-size) * .5 + 2px),26px); height:clamp(22px,calc(var(--stitch-control-size) * .5 + 2px),26px); }
/* PC Banxue view switch (banxue-ui.css .bx-view-*), adapted to this
   composer's radio semantics and project neutral palette; fully round, no track border.
   The outer track shares the tool height; its 3px inset stays inside that height. */
.stitch-modes { box-sizing:border-box; display:flex; flex-shrink:0; align-items:stretch; gap:2px; position:relative; isolation:isolate; height:var(--stitch-control-size); padding:3px; border:0; border-radius:9999px; corner-shape:round; background:var(--stitch-control-surface); }
.stitch-mode-indicator { position:absolute; top:3px; left:3px; border-radius:9999px; corner-shape:round; background:rgb(255 255 255 / .78); border:0; box-shadow:0 1px 4px rgb(28 31 46 / .1); pointer-events:none; opacity:0; transition:transform 220ms cubic-bezier(.33,1,.68,1),width 220ms cubic-bezier(.33,1,.68,1); }
.stitch-modes button { box-sizing:border-box; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border:0; border-radius:9999px; corner-shape:round; min-width:66px; min-height:0; background:transparent; color:#666570; font:inherit; font-size:var(--stitch-control-font-size); line-height:20px; white-space:nowrap; cursor:pointer; transition:background 160ms,color 160ms; }
.stitch-modes button:hover { background:rgb(0 0 0 / .06); color:#303038; }
.stitch-modes button[aria-checked="true"] { background:transparent; color:#303038; }
.stitch-modes button:active { background:rgb(0 0 0 / .08); }
.stitch-modes button:focus-visible { outline-color:#666570; outline-offset:2px; }
.stitch-modes button:disabled { cursor:default; opacity:.5; }
.stitch-task-picker { width:auto; border-radius:9999px; corner-shape:round; gap:6px; padding:0 13px; font-size:var(--stitch-control-font-size); line-height:20px; background:var(--stitch-control-surface); box-shadow:none; }
.stitch-task-picker:hover,.stitch-task-picker[aria-expanded="true"] { background:rgb(0 0 0 / .06); }
.stitch-task-picker:active { background:rgb(0 0 0 / .08); }
/* The button keeps a fixed hit area; only its decorative face lifts.
   Keep the same opaque gradient layer while interpolating its two colors. */
@property --stitch-send-top { syntax:"<color>"; inherits:false; initial-value:#3d3d46; }
@property --stitch-send-bottom { syntax:"<color>"; inherits:false; initial-value:#24242b; }
.stitch-send { box-sizing:border-box; width:var(--stitch-control-size); height:var(--stitch-control-size); aspect-ratio:1; padding:0; border:0; border-radius:50%; corner-shape:round; background:transparent; box-shadow:none; transition:none; }
.stitch-send-face { --stitch-send-top:#3d3d46; --stitch-send-bottom:#24242b; --stitch-send-bevel:inset 0 1px 0 #ffffff30,inset 0 -2px 0 #0005; display:grid; place-items:center; position:relative; box-sizing:border-box; width:100%; height:100%; border:1px solid #25252d; border-radius:50%; corner-shape:round; background:linear-gradient(var(--stitch-send-top),var(--stitch-send-bottom)); box-shadow:var(--stitch-send-bevel); pointer-events:none; transition:--stitch-send-top 320ms ease,--stitch-send-bottom 320ms ease,border-color 320ms ease,transform 200ms cubic-bezier(.2,.8,.2,1),box-shadow 150ms ease; }
.stitch-send svg { width:clamp(20px,calc(var(--stitch-control-size) * .5 + 2px),26px); height:clamp(20px,calc(var(--stitch-control-size) * .5 + 2px),26px); }
.stitch-send:not(:disabled) { color:#fff; }
.stitch-send:not(:disabled):hover,.stitch-send:not(:disabled):focus-visible,.stitch-send:not(:disabled):active { background:transparent; transform:none; }
.stitch-send:not(:disabled):hover .stitch-send-face,.stitch-send:not(:disabled):focus-visible .stitch-send-face { --stitch-send-top:#0047ff; --stitch-send-bottom:#0047ff; border-color:#0047ff; transform:translateY(-2px); }
.stitch-send:not(:disabled):active .stitch-send-face { transform:translateY(1px); box-shadow:inset 0 1px 2px #0003,inset 0 -1px 0 #0005; }
.stitch-send:focus-visible { outline:2px solid #0047ff; outline-offset:3px; }
.stitch-send:disabled { color:#9b9ba3; opacity:1; }
.stitch-send:disabled .stitch-send-face { border-color:transparent; background:#e8e8eb; box-shadow:inset 0 1px 0 rgb(255 255 255 / .65),inset 0 -1px 0 rgb(0 0 0 / .08); }
.stitch-send.is-busy:disabled { color:#fff; }
.stitch-send.is-busy:disabled .stitch-send-face { border-color:#25252d; background:linear-gradient(var(--stitch-send-top),var(--stitch-send-bottom)); opacity:.6; box-shadow:var(--stitch-send-bevel); }
.stitch-send.is-busy svg { display:none; }
.stitch-send.is-busy .stitch-send-face::after { content:""; width:16px; height:16px; border:1.5px solid #ffffff55; border-top-color:#fff; border-radius:50%; corner-shape:round; animation:stitch-busy .7s linear infinite; }
.stitch-tool[data-tip]::before { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,3px); white-space:nowrap; border-radius:6px; corner-shape:var(--md-corner-shape); padding:5px 8px; background:#34303d; color:white; font-size:11px; line-height:16px; opacity:0; pointer-events:none; transition:opacity 120ms,transform 120ms; z-index:30; }
.stitch-tool[data-tip]:hover::before { opacity:1; transform:translate(-50%,0); transition-delay:450ms; }
.stitch-tool[aria-expanded="true"]::before { display:none; }
.stitch-popover { --md-ui-menu-radius:16px; --md-ui-menu-inset-ratio:.375; --md-ui-menu-inset:calc(var(--md-ui-menu-radius) * var(--md-ui-menu-inset-ratio)); --md-ui-menu-item-radius:max(0px,calc(var(--md-ui-menu-radius) - var(--md-ui-menu-inset))); box-sizing:border-box; position:fixed; z-index:6000; width:286px; max-width:calc(100vw - 16px); padding:var(--md-ui-menu-inset); overflow:auto; color:#393939; background:#ffffffed; border:1px solid #e6e6e6; border-radius:var(--md-ui-menu-radius); corner-shape:var(--md-corner-shape); box-shadow:0 5px 12px #25252508,0 18px 48px #2525251a; backdrop-filter:blur(32px); font-family:"PingFang SC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; animation:stitch-menu-in 150ms cubic-bezier(.2,.8,.2,1); transform-origin:top left; }
.stitch-popover[data-side="top"] { transform-origin:bottom left; }
.stitch-menu-heading { padding:9px 10px 8px; font-size:11px; line-height:16px; color:#909090; }
.stitch-popover button { display:flex; align-items:center; gap:10px; box-sizing:border-box; width:100%; border:0; border-radius:var(--md-ui-menu-item-radius); corner-shape:var(--md-corner-shape); padding:10px; text-align:left; color:inherit; background:transparent; cursor:pointer; font:inherit; transition:background 100ms; }
.stitch-popover button:hover,.stitch-popover button:focus-visible { background:#f5f5f5; outline-color:#737373; outline-offset:-2px; }
.stitch-popover button:active { background:#ebebeb; }
.stitch-popover button>span:not(.stitch-menu-check) { display:flex; flex:1; flex-direction:column; gap:3px; }
.stitch-popover strong { font-weight:500; font-size:13px; line-height:20px; }
.stitch-popover small { font-size:11px; line-height:17px; color:#858585; }
.stitch-menu-check { width:16px; }
.stitch-popover small:empty { display:none; }

.stitch-popover button:disabled { opacity:.4; cursor:default; background:transparent; }

@media(max-width:600px) {
 .stitch-modes button { padding:0 10px; min-width:60px; }
 .stitch-task-picker { width:auto; padding:0 9px; }
 .stitch-task-picker > span { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 :is(.entry-button,.md-ui-button--primary):not(.md-ui-button--brand) { transition:none; }
 .stitch-popover { animation:none; }
 .stitch-tool,.stitch-mode-indicator,.stitch-send-face { transition:none; }
 .stitch-send:not(:disabled):hover .stitch-send-face,.stitch-send:not(:disabled):focus-visible .stitch-send-face,.stitch-send:not(:disabled):active .stitch-send-face { transform:none; }
 .stitch-send.is-busy .stitch-send-face::after { animation:none; }
}

.md-ui-menu-shortcut { font-family:inherit; font-size:11px; line-height:17px; color:#858585; white-space:nowrap; }