@import url("./ai-action-motion.css?v=1.6.1-preview-emerald-polish-0921");

.web-account-status { display:inline-flex; align-items:center; gap:var(--shell-control-gap); height:var(--shell-control-size); white-space:nowrap; font-size:var(--shell-control-font-size); }
.panel-utility-bar-right .web-account-status { width:auto; min-width:0; max-width:160px; padding:4px 7px; flex:1 1 auto; }
.app-shell-header .web-account-status { width:auto; min-width:0; max-width:160px; padding:4px 7px; flex:0 1 auto; }
.app-shell-header .canvas-global-controls { margin-inline-start:auto; min-width:0; }
.panel-utility-bar-right .web-account-status [data-account-label] { overflow:hidden; text-overflow:ellipsis; }
.app-shell-header .web-account-status [data-account-label] { overflow:hidden; text-overflow:ellipsis; }
.web-account-status[data-state="connected"] { cursor:default; }
@container inspector-panel (max-width:239px) {
  .panel-utility-bar-right .web-account-status { min-width:max-content; max-width:none; padding-inline:6px; gap:5px; justify-content:center; }
  .panel-utility-bar-right .web-account-status [data-account-label] { font-size:0; flex:none; overflow:visible; }
  .panel-utility-bar-right .web-account-status [data-account-label]::after { content:'GPT'; font-size:12px; }
}
@property --web-login-orbit-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.web-account-dot { width:8px; height:8px; border:1px solid currentColor; border-radius:50%; flex:none; }
.web-account-status[data-state="connected"] .web-account-dot { background:#3fb950; border-color:#3fb950; }
.web-account-status:is([data-state="starting"],[data-state="waiting"]) .web-account-dot { border-color:var(--accent); border-top-color:transparent; animation:web-login-spin 1s linear infinite; }
.web-login-dialog { position:fixed; inset:50% auto auto 50%; translate:-50% -50%; z-index:20000; box-sizing:border-box; width:min(420px,calc(100vw - 32px)); max-height:calc(100vh - 32px); margin:0; padding:24px; overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--bg-panel); color:var(--text-primary); box-shadow:0 16px 48px #0006; }
.web-login-dialog[open] { animation:web-login-dialog-in 180ms cubic-bezier(.2,.9,.25,1.06); }
.web-login-dialog::backdrop { background:#0006; backdrop-filter:blur(4px); }
.web-login-dialog h2 { margin:8px 24px 16px 0; font-size:20px; }
.web-login-dialog p { color:var(--text-secondary); font-size:14px; line-height:1.6; }
.web-login-close { position:absolute; right:12px; top:12px; width:32px; height:32px; }
.web-login-dialog button { border:1px solid var(--border); border-radius:8px; background:var(--bg-input); color:var(--text-primary); cursor:pointer; }
.web-login-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.web-login-actions button { padding:10px 16px; font:inherit; font-size:14px; }
.web-login-actions [data-login-start] { border-color:transparent; background:linear-gradient(var(--bg-input),var(--bg-input)) padding-box,conic-gradient(from var(--web-login-orbit-angle),transparent 0 18%,color-mix(in srgb,var(--accent) 72%,#fff) 27%,transparent 38% 100%) border-box; color:var(--text-primary); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); animation:web-login-copy-orbit 2.4s linear infinite; transition:transform 140ms cubic-bezier(.23,1,.32,1),filter 140ms ease,box-shadow 180ms ease; }
.web-login-actions [data-login-start]:hover:not(:disabled) { color:#fff; filter:brightness(1.08); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 86%,#fff),0 0 20px color-mix(in srgb,var(--accent) 38%,transparent); }
.web-login-actions [data-login-start]:active:not(:disabled) { transform:scale(.97); }
.web-login-actions [data-login-start][data-copy-ready="true"] { border-color:transparent;border-radius:999px;background:linear-gradient(var(--bg-input),var(--bg-input)) padding-box,conic-gradient(from var(--web-login-orbit-angle),transparent,var(--accent),#fff,transparent 45%) border-box;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 75%,#fff),0 0 18px color-mix(in srgb,var(--accent) 62%,transparent); animation:web-login-next-glow 1.8s ease-in-out infinite,web-login-copy-orbit 1.8s linear infinite; }
.web-login-actions button:disabled { opacity:.65; cursor:wait; }
.web-login-dialog button:focus-visible,.web-account-status:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[data-login-code] { padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); }
[data-login-code] span { color:var(--text-secondary); font-size:12px; }
[data-login-code] strong { display:block; font:600 24px monospace; letter-spacing:2px; margin-top:8px; user-select:all; }
[data-login-code] p { margin-bottom:0; }
.web-login-toast { position:fixed; right:24px; top:64px; z-index:20000; max-width:calc(100vw - 48px); padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--bg-panel); color:var(--text-primary); box-shadow:0 8px 24px #0004; font-size:14px; }
@keyframes web-login-spin { to { transform:rotate(360deg); } }
@keyframes web-login-dialog-in { from { opacity:0; transform:translateY(-3px) scale(.96); } }
@media(prefers-reduced-motion:reduce) { .web-account-status .web-account-dot { animation:none!important; } }
@media(max-width:600px) { .web-account-status { font-size:11px; padding:4px 8px; } }
.web-login-code-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.web-login-code-row button{min-height:44px;padding:8px 16px}.web-login-download{display:block;padding:12px 16px;border:1px solid transparent;border-radius:8px;background:linear-gradient(var(--bg-input),var(--bg-input)) padding-box,conic-gradient(from var(--ai-action-orbit-angle),transparent 0 18%,color-mix(in srgb,var(--accent) 72%,#fff) 27%,transparent 38% 100%) border-box;color:var(--text-primary);text-align:center;text-decoration:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),0 0 14px color-mix(in srgb,var(--accent) 16%,transparent)}.web-login-download:active{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 82%,#fff),0 3px 10px color-mix(in srgb,var(--accent) 24%,transparent)}.web-login-dialog .web-login-account-note{font-size:12px}.web-login-toast button{margin-left:12px;padding:8px 12px;background:var(--accent);color:#fff;border:0;border-radius:8px;cursor:pointer}#ai-image-install-open[data-login-state="connected"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg-panel));color:var(--accent)}#ai-image-install-open[data-login-state="connected"]::after{content:'●';font-size:8px;margin-left:6px;flex:none}#ai-image-install-open[data-login-state="waiting"]::after{content:'…';font-size:11px;margin-left:6px;flex:none}
.web-login-code-row [data-copy-code]{border-color:transparent;border-radius:999px;background:linear-gradient(var(--bg-input),var(--bg-input)) padding-box,conic-gradient(from var(--web-login-orbit-angle),transparent,var(--accent),transparent 34%) border-box;box-shadow:inset 0 0 0 1px var(--border);transition:transform 140ms cubic-bezier(.23,1,.32,1),filter 140ms ease,box-shadow 180ms ease;animation:web-login-copy-orbit 2.4s linear infinite}.web-login-code-row [data-copy-code]:hover{filter:brightness(1.12);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,var(--border)),0 0 12px color-mix(in srgb,var(--accent) 30%,transparent)}.web-login-code-row [data-copy-code]:active{transform:scale(.97)}.web-login-code-row [data-copy-code][data-copied="true"]{color:#3fb950;background:linear-gradient(var(--bg-input),var(--bg-input)) padding-box,linear-gradient(105deg,transparent 28%,#b6f2c1 48%,transparent 68%) border-box;box-shadow:inset 0 0 0 1px #3fb950,0 0 16px color-mix(in srgb,#3fb950 45%,transparent);animation:web-login-copy-shine 420ms cubic-bezier(.23,1,.32,1) both}

.web-login-actions [data-login-start] { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.web-login-actions [data-login-logo] { width:20px; height:20px; flex:none; }
.web-login-dialog #web-login-title:focus { outline:none; }
.web-login-dialog button:focus:not(:focus-visible) { outline:none; }

.web-login-dialog.web-login-paired { left:var(--login-code-left); translate:0 -50%; width:var(--login-code-width); }
.web-login-dialog.web-login-pair-shift { transform:translateX(var(--login-pair-shift-x));opacity:.96; }
.web-login-dialog.web-login-pair-settle { transition:transform 320ms cubic-bezier(.34,1.2,.64,1),opacity 180ms ease;opacity:1; }
.web-login-dialog.web-login-completing { pointer-events:none; animation:web-login-complete-out 360ms cubic-bezier(.4,0,.2,1) forwards; transform-origin:center; }
#ai-image-install-open.ai-login-ready-pulse { animation:web-login-ready-pulse 760ms cubic-bezier(.2,.8,.2,1); }
@keyframes web-login-copy-orbit { to { --web-login-orbit-angle:1turn; } }
@keyframes web-login-copy-shine { 0% { filter:brightness(1); } 45% { filter:brightness(1.25); } 100% { filter:brightness(1); } }
@keyframes web-login-next-glow { 50% { box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 90%,#fff),0 0 24px color-mix(in srgb,var(--accent) 72%,transparent); } }
@keyframes web-login-complete-out { to { opacity:0; transform:translate(var(--login-complete-x),var(--login-complete-y)) scale(.08); } }
@keyframes web-login-ready-pulse { 45% { box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 28%,transparent),0 0 24px color-mix(in srgb,var(--accent) 45%,transparent); } }
@media (max-width:839px) { .web-login-dialog.web-login-paired { left:50%; translate:-50% -50%; width:min(420px,calc(100vw - 32px)); } }
@media (hover:hover) and (pointer:fine){.web-login-download:hover{background:linear-gradient(color-mix(in srgb,var(--accent) 14%,var(--bg-input)),color-mix(in srgb,var(--accent) 14%,var(--bg-input))) padding-box,conic-gradient(from var(--ai-action-orbit-angle),transparent 0 12%,#fff 25%,var(--accent) 34%,transparent 46% 100%) border-box;color:var(--text-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 86%,#fff),0 10px 28px color-mix(in srgb,var(--accent) 34%,transparent)}}
@media(prefers-reduced-motion:reduce){.web-login-dialog[open],.web-login-code-row [data-copy-code],.web-login-actions [data-login-start][data-copy-ready="true"],.web-login-dialog.web-login-completing,#ai-image-install-open.ai-login-ready-pulse{animation:none}.web-login-dialog.web-login-pair-shift,.web-login-dialog.web-login-pair-settle{transition:none;transform:none}}

/* Only the next available action orbits; completion remains a manual handoff. */
.web-login-dialog[data-phase="waiting"] [data-login-start]:not([data-copy-ready="true"]):not([data-authenticating="true"]) { animation:none; background:var(--bg-input); border-color:var(--border); box-shadow:none; }
.web-login-dialog[data-phase="connected"] [data-login-start] { animation:none; background:var(--bg-input); border-color:var(--border); box-shadow:none; }
.web-login-actions [data-login-start]:hover:not(:disabled) { color:var(--text-primary); }
@media(prefers-reduced-motion:reduce) { .web-login-actions [data-login-start] { animation:none!important; transition:none; } }

.web-login-dialog h2,.web-login-dialog p { word-break:keep-all; overflow-wrap:break-word; }

:root[data-theme="light"] .web-login-actions [data-login-logo] { filter:brightness(.2); }