/* Character + profile flow polish (profile dialog, character studio, sidekicks).
   Loaded after style.css; profile-design.js also adds it on demand if the page lacks the <link>. */
:root{--pf-cyan:#6ff7e4;--pf-pink:#ff7fd4;--pf-violet:#a98bff;--pf-ink:#07101b;--pf-glow:0 0 0 1px #6ff7e455,0 0 18px #6ff7e433}

/* Shared button feel: smooth hover, visible keyboard focus, tactile press. */
.profile-design button,.avatar-onboarding button,#settings-sidekicks-pane button,.profile-design select,.profile-design input,.avatar-onboarding select,.avatar-onboarding input{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,transform .12s ease,opacity .18s ease}
.profile-design button:not(:disabled):hover,.avatar-onboarding button:not(:disabled):hover,#settings-sidekicks-pane button:not(:disabled):hover{border-color:var(--pf-pink);box-shadow:0 0 0 1px #ff7fd433,0 0 16px #ff7fd42e;color:#fff}
.profile-design button:not(:disabled):active,.avatar-onboarding button:not(:disabled):active,#settings-sidekicks-pane button:not(:disabled):active{transform:translateY(1px) scale(.985)}
.profile-design :is(button,select,input,textarea,summary):focus-visible,.avatar-onboarding :is(button,select,input,summary):focus-visible,#settings-sidekicks-pane :is(button,select,input,summary):focus-visible,.profile-live-avatar:focus-visible{outline:2px solid var(--pf-cyan);outline-offset:2px;box-shadow:var(--pf-glow)}
.profile-design button:disabled,.avatar-onboarding button:disabled{cursor:not-allowed}

/* Entrances. */
@keyframes pf-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pf-fade{from{opacity:0}to{opacity:1}}
@keyframes pf-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pf-sheen{from{background-position:0 0}to{background-position:200% 0}}
.profile-design[open]{animation:pf-fade .24s ease-out}
.profile-design[open] .profile-identity,.profile-design[open] .profile-facts{animation:pf-rise .38s cubic-bezier(.2,.8,.2,1) both}
.profile-design[open] .profile-facts{animation-delay:.06s}
.avatar-onboarding{animation:pf-fade .22s ease-out}
.avatar-onboarding .avatar-layout{animation:pf-rise .34s cubic-bezier(.2,.8,.2,1) both}

/* Profile header: primary character action stands out. */
.profile-design>header{gap:8px;align-items:center}
.profile-design>header [data-profile-action=character]{border-color:#6ff7e4aa;background:linear-gradient(120deg,#123c3d,#34204a);color:#e9fffb}
.profile-design>header [data-profile-action=save]{background:linear-gradient(120deg,#154742,#3b2450);border-color:var(--pf-cyan)}

/* Status notice becomes a visible toast instead of text at the bottom of a long page. */
.profile-design .profile-notice{min-height:0;margin:0}
.profile-design .profile-notice:not(:empty){position:fixed;z-index:6;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;max-width:min(640px,calc(100vw - 32px));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border:1px solid #6ff7e488;border-radius:12px;background:linear-gradient(120deg,#0b1f27f2,#22142ef2);color:#dffef8;font-size:13px;line-height:1.4;box-shadow:0 12px 40px #000a,0 0 22px #6ff7e422;backdrop-filter:blur(14px);animation:pf-toast .26s ease-out;text-align:center}
.profile-design .profile-notice button{padding:6px 12px;font-size:12px;border-color:var(--pf-pink)}

/* Live avatar card in the identity strip. */
.profile-live-avatar{position:relative;background:radial-gradient(ellipse at 50% 35%,#24384a,#070c16 75%)}
.profile-live-avatar::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #6ff7e433,inset 0 -40px 50px -30px #ff7fd433}
.profile-identity{overflow:hidden}

/* Connections. */
.profile-person{border-radius:10px}
.profile-people .muted,.profile-connections>.muted{color:#9fb8c8}
.profile-facts>button{margin:6px 8px 0 0}

/* Gallery thumbnails: colour wash while the real thumbnail renders. */
img[data-thumb-pending]{background-size:200% 100%!important;animation:pf-sheen 2.4s linear infinite}
.profile-preset,.portrait-art{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.profile-preset:not(:disabled):hover,.portrait-art:not(:disabled):hover{transform:translateY(-2px)}

/* Character studio: use the whole window height instead of a fixed 440px box. */
@media(min-width:801px) and (min-height:721px){
 .avatar-canvas{height:max(300px,calc(100vh - 360px))}
 .avatar-controls{max-height:max(320px,calc(100vh - 290px))}
 .avatar-view{min-height:max(350px,calc(100vh - 290px))}
}
.avatar-onboarding .avatar-heading>div{color:var(--pf-cyan)}
.avatar-onboarding .avatar-step{padding:4px 9px;border:1px solid #a98bff55;border-radius:999px;color:#d6c9ff;background:#a98bff14}
.avatar-onboarding h2{background:linear-gradient(90deg,#e8fffb,#9ff6ec 45%,#ffb7e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.avatar-onboarding .avatar-message{color:#bfe9ef}
.avatar-onboarding .avatar-message[data-tone=error]{color:#ffb3cf}
.avatar-onboarding .avatar-actions{position:sticky;bottom:0;padding:10px 0;background:linear-gradient(transparent,#090f19 35%)}
.avatar-onboarding .avatar-save:not(:disabled){box-shadow:0 0 18px #65d7c433}
.avatar-onboarding .avatar-section>summary{list-style-position:inside;border-radius:6px;transition:color .18s ease}
.avatar-onboarding .avatar-section>summary:hover{color:var(--pf-cyan)}
.avatar-onboarding .avatar-section[open]{border-color:#6ff7e455;background:#0b1622}
.avatar-onboarding .avatar-canvas canvas{margin:auto}

/* Sidekicks. */
.sidekick-card{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.sidekick-card:hover{border-color:#ff7fd488;box-shadow:0 10px 30px #0007,0 0 18px #ff7fd422;transform:translateY(-2px)}
#settings-sidekicks-pane[aria-busy=true] #sidekick-list{opacity:.6;transition:opacity .2s ease}
#sidekick-list>p{grid-column:1/-1;padding:18px;border:1px dashed #6ff7e455;border-radius:12px;color:#a9c9d6;text-align:center}

/* Phone width: header actions scroll horizontally, studio stacks, nothing overflows. */
@media(max-width:700px){
 .profile-design>header{flex-wrap:wrap;gap:6px;padding:10px 12px;min-height:60px;height:auto}
 .profile-design>header h1{flex:1 1 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 2px}
 .profile-design>header button{flex:0 0 auto;white-space:nowrap;padding:7px 10px;font-size:11px}
 .profile-design>header [aria-label="Close profile"]{position:absolute;top:8px;right:12px}
 .profile-stage{height:auto;min-height:0;padding:12px 0 6px;overflow:visible}
 .profile-banner{position:relative;inset:auto;display:block;width:calc(100% - 24px);height:150px;margin:0 12px}
 .profile-identity{position:relative;inset:auto;min-height:0;margin:-46px 12px 0;padding:12px;display:flow-root}
 .profile-identity img{width:64px;height:64px;margin-right:12px}
 .profile-facts,.profile-info{width:auto;margin:16px 12px;padding:16px}
 .profile-design-controls{padding:16px 12px 40px}
 .art-collection-bar select{max-width:none;flex:1}
 .avatar-onboarding{inset:40px 0 0}
 .avatar-onboarding .avatar-heading{flex-wrap:wrap;gap:8px}
 .avatar-onboarding .avatar-heading>div{flex-basis:100%}
 .avatar-onboarding .avatar-layout{gap:12px}
 .avatar-onboarding .avatar-canvas{height:min(300px,46vh)}
 .avatar-onboarding .avatar-controls{grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible;padding-right:0}
 .avatar-onboarding .avatar-orbit{flex-wrap:wrap;justify-content:center;gap:6px}
 .avatar-onboarding .avatar-orbit button{padding:8px 10px}
 .avatar-onboarding .avatar-actions{flex-wrap:wrap}
 .avatar-onboarding .avatar-actions button{flex:1 1 140px}
 .portrait-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 .profile-design[open],.profile-design[open] .profile-identity,.profile-design[open] .profile-facts,.avatar-onboarding,.avatar-onboarding .avatar-layout,.profile-design .profile-notice:not(:empty),img[data-thumb-pending]{animation:none}
 .profile-design button,.avatar-onboarding button,#settings-sidekicks-pane button,.sidekick-card,.profile-preset,.portrait-art{transition:none}
}
/* Bare "Consolas" falls back to a serif face off Windows (web launcher on macOS / iOS / Linux). */
.avatar-onboarding .avatar-heading{font-family:Consolas,'Cascadia Mono',ui-monospace,Menlo,monospace}
.avatar-onboarding .avatar-heading button{font:12px 'Segoe UI',Arial,sans-serif;letter-spacing:0}
/* Live 3D avatar: the saved portrait shows instantly; a shimmer marks the 3D model loading. */
.profile-live-avatar[data-loading]::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 30%,#6ff7e41f 50%,transparent 70%);background-size:220% 100%;animation:pf-sheen 1.6s linear infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.profile-live-avatar[data-loading]::before{animation:none}}
/* Gallery search / category controls match the neon inputs. */
.profile-design .art-collection-bar input,.profile-design .art-collection-bar select,.avatar-onboarding .art-collection-bar input,.avatar-onboarding .art-collection-bar select{min-height:38px;padding:8px 12px;border:1px solid #52788799;border-radius:8px;background:#0b1626;color:#e6faff;font:13px 'Segoe UI',Arial,sans-serif}
.profile-design .art-collection-bar input::placeholder,.avatar-onboarding .art-collection-bar input::placeholder{color:#7f98aa}
.profile-design .art-collection-bar select option,.avatar-onboarding .art-collection-bar select option{background:#0b1626;color:#e6faff}
/* Classic backdrop buttons get a live preview of their generator behind the label. */
.avatar-onboarding .avatar-backdrop{position:relative;overflow:hidden;isolation:isolate;text-shadow:0 1px 6px #000}
.avatar-onboarding .avatar-backdrop-thumb{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .2s ease,transform .3s ease}
.avatar-onboarding .avatar-backdrop:hover .avatar-backdrop-thumb,.avatar-onboarding .avatar-backdrop[aria-pressed=true] .avatar-backdrop-thumb{opacity:.95;transform:scale(1.04)}
.avatar-onboarding .avatar-backdrop[aria-pressed=true]{box-shadow:0 0 0 2px #72e6d3,0 0 18px #72e6d355}