/* Mode entry: fixed footprint, bespoke icons, no persistent decorative motion. */
.composer-mode { display:inline-flex; flex:none; align-items:center; margin-right:7px; }
.composer-mode select[hidden] { display:none; }
.composer-foot .composer-mode-loading,
.composer-foot .composer-mode-trigger,
.composer-foot .composer-mode-trigger:hover:not(:disabled) {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:116px; height:32px; padding:0 7px; border:1px solid transparent; border-radius:8px;
  color:#5e728c; background:transparent; box-shadow:none; transform:none;
  font-family:inherit; font-size:12px; font-weight:600; line-height:1; cursor:pointer;
  transition:background-color 160ms ease, color 160ms ease;
}
.composer-foot .composer-mode-loading { color:#93a0b1; cursor:default; }
.composer-foot .composer-mode-loading[hidden] { display:none; }
.composer-foot .composer-mode-trigger:hover:not(:disabled),
.composer-foot .composer-mode-trigger[aria-expanded="true"] {
  color:#345770; background:rgba(106,157,190,.075);
}
.composer-mode[data-mode="workflow_creation"] .composer-mode-trigger { color:#53668d; }
.composer-foot .composer-mode-trigger:focus-visible { outline:2px solid #86c4d7; outline-offset:2px; }
.composer-foot .composer-mode-trigger:disabled { color:#9aa7b6; opacity:.6; cursor:not-allowed; filter:none; }
.composer-mode-symbol { display:flex; flex:none; align-items:center; justify-content:center; width:16px; height:16px; }
.composer-mode-icon { display:block; flex:none; overflow:visible; }
.composer-mode-chevron { flex:none; color:#8a9bae; transition:transform 180ms ease; }
.composer-mode-trigger[aria-expanded="true"] .composer-mode-chevron { transform:rotate(180deg); }
.composer-mode-label { white-space:nowrap; }
.composer-mode-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.composer-context .composer-mode-icon { width:13px; height:13px; }

/* Body portal + top layer avoids the composer's rounded overflow clipping. */
.composer-mode-menu {
  position:fixed; z-index:10050; inset:auto; box-sizing:border-box; margin:0;
  width:240px; overflow:auto; padding:5px; border:1px solid #dce5ef; border-radius:10px;
  background:linear-gradient(125deg,rgba(82,183,205,.035),rgba(255,255,255,0) 50%,rgba(135,117,192,.035)),#fff;
  box-shadow:0 8px 24px rgba(27,47,77,.09),0 2px 5px rgba(27,47,77,.025);
  color:#344d69; font-family:inherit; opacity:0; transform:translateY(6px);
  transform-origin:bottom right;
  transition:opacity 120ms ease,transform 120ms ease;
  scrollbar-width:thin; scrollbar-color:#c7d5e1 transparent;
}
.composer-mode-menu[hidden] { display:none; }
.composer-mode-menu[data-open="true"] { opacity:1; transform:translateY(0); transition-duration:180ms; transition-timing-function:cubic-bezier(.2,.7,.25,1); }
.composer-mode-menu[data-direction="down"] { transform-origin:top right; }
.composer-mode-menu::backdrop { background:transparent; pointer-events:none; }
.composer-mode-menu .composer-mode-option {
  display:flex; align-items:center; gap:9px; box-sizing:border-box; width:100%; min-height:50px;
  border:1px solid transparent; border-radius:6px; padding:8px 9px;
  background:transparent; color:#4e6580; font-family:inherit; text-align:left;
  cursor:pointer; box-shadow:none; transition:background 140ms ease,border-color 140ms ease;
}
.composer-mode-menu .composer-mode-option + .composer-mode-option { margin-top:2px; }
.composer-mode-menu .composer-mode-option[aria-checked="true"] { background:linear-gradient(110deg,#f1f8fb,#f7f6fc); }
.composer-mode-menu .composer-mode-option:hover:not(:disabled) { background:#f2f6fb; }
.composer-mode-menu .composer-mode-option:focus-visible { outline:none; border-color:#9fc9dd; background:#f5f9fc; }
.composer-mode-option-icon { display:flex; flex:none; align-items:center; justify-content:center; width:16px; color:#73839a; }
.composer-mode-option-copy { display:grid; flex:1; gap:3px; min-width:0; }
.composer-mode-option-copy strong { font-size:12px; font-weight:600; line-height:1.2; color:#354e6c; }
.composer-mode-option-copy small { font-size:11px; font-weight:400; line-height:1.5; color:#8493a6; }
.composer-mode-check { flex:none; color:#729bad; opacity:0; }
.composer-mode-option[aria-checked="true"] .composer-mode-check { opacity:1; }
.composer-mode-menu .composer-mode-option:disabled { opacity:.46; cursor:not-allowed; }

/* One-shot reveal after an explicit, successful mode change. No message reflow. */
.composer-box { position:relative; }
.composer-box::after {
  content:""; position:absolute; pointer-events:none; left:0; right:0; top:0; height:2px;
  opacity:0; background:linear-gradient(90deg,transparent,rgba(80,179,207,.75) 42%,rgba(142,124,195,.65) 58%,transparent);
  transform:translateX(-100%);
}
.composer-box[data-mode-motion="create"]::after { animation:composer-aurora-pass 650ms cubic-bezier(.22,.61,.36,1) both; }
.composer-box[data-mode-motion="create"] .mode-stroke-primary { animation:composer-stroke-reveal 580ms cubic-bezier(.25,.6,.35,1) both; }
.composer-box[data-mode-motion="create"] .mode-stroke-secondary { animation:composer-stroke-reveal 480ms 100ms ease-out both; }
.composer-box[data-mode-motion] .composer-mode-label { animation:composer-label-settle 220ms ease-out both; }
.composer-box[data-mode-motion] textarea::placeholder { animation:composer-placeholder-settle 260ms ease-out both; }
@keyframes composer-aurora-pass {
  0% { transform:translateX(-100%); opacity:0; }
  20% { opacity:.8; }
  75% { opacity:.65; }
  100% { transform:translateX(100%); opacity:0; }
}
@keyframes composer-stroke-reveal { from { stroke-dasharray:1; stroke-dashoffset:1; opacity:.3; } to { stroke-dasharray:1; stroke-dashoffset:0; opacity:1; } }
@keyframes composer-label-settle { from { opacity:.45; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
@keyframes composer-placeholder-settle { from { color:#b1bdca; } to { color:#8b96a7; } }
@media (prefers-reduced-motion:reduce) {
  .composer-mode-menu,.composer-mode-chevron,.composer-mode-trigger { transition:none !important; }
  .composer-box[data-mode-motion]::after,.composer-box[data-mode-motion] .mode-stroke-primary,
  .composer-box[data-mode-motion] .mode-stroke-secondary,.composer-box[data-mode-motion] .composer-mode-label,
  .composer-box[data-mode-motion] textarea::placeholder { animation:none !important; }
}