:host,utamita-profile-dialog{display:contents}
.profile-dialog{box-sizing:border-box;width:calc(100vw - var(--sp-32));max-width:calc(var(--control-h) * 9);max-height:calc(100vh - var(--sp-32));max-height:calc(100dvh - var(--sp-32));margin:auto;padding:0;overflow-y:auto;overscroll-behavior:contain;border:2px solid var(--c-role-common);border-radius:var(--radius-l);background:var(--c-white);color:var(--c-navy);font-family:var(--font-body);box-shadow:var(--shadow-float)}
.profile-dialog::backdrop{background:var(--c-overlay)}
.profile-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16);border-bottom:1px solid var(--c-border);background:var(--c-bg-soft)}
.profile-dialog-header h2{margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-normal)}
.profile-dialog-close{flex-shrink:0;min-width:var(--control-h);min-height:var(--control-h);padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-role-common);font-family:inherit;font-size:var(--fs-22);font-weight:800;cursor:pointer}
.profile-dialog-close:hover{background:var(--c-bg-muted)}
.profile-dialog-close:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);box-shadow:var(--shadow-focus)}
.profile-dialog-content{padding:var(--sp-16)}
.profile-editor{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;margin:0;padding:0;border:0;background:transparent}
.profile-editor p{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed)}
.profile-editor .profile-field{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;padding:0;border:0}
.profile-editor .profile-field>label,.profile-editor .profile-field>span{font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal)}
.profile-editor input[type='text'],.profile-editor input[type='url']{box-sizing:border-box;width:100%;min-width:0;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);line-height:var(--lh-normal);font-size:var(--fs-ui-input);font-weight:400;font-family:var(--font-body);}
.profile-image-row{display:flex;align-items:center;gap:var(--sp-12);min-width:0}
.profile-editor .profile-image-preview{flex-shrink:0;width:var(--control-h-lg);height:var(--control-h-lg)}
.profile-editor .profile-image-preview img{display:block;width:100%;height:100%;border:1px solid var(--c-border);border-radius:50%;object-fit:cover}
.profile-editor input[type='file']{box-sizing:border-box;min-width:0;width:100%;min-height:var(--control-h);padding:0;border:0;background:transparent;color:var(--c-text-sub);font-family:inherit;font-size:var(--fs-ui-meta);line-height:var(--lh-normal)}
.profile-editor input[type='file']::file-selector-button{min-height:var(--control-h);margin:0 var(--sp-8) 0 0;padding:var(--sp-8);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-bg-soft);color:var(--c-role-common);font-family:inherit;font-size:var(--fs-ui-meta);font-weight:800;cursor:pointer}
.profile-editor .profile-reset{align-self:flex-start;min-height:var(--control-h);padding:0;border:0;background:transparent;color:var(--c-role-common);font-family:inherit;font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal);text-decoration:underline;cursor:pointer}
.profile-editor .profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.profile-editor .profile-button{box-sizing:border-box;min-height:var(--control-h);padding:var(--sp-8);border:2px solid var(--c-role-common);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-common);font-family:inherit;font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal);cursor:pointer}
.profile-editor .profile-button.primary{background:var(--c-role-common);color:var(--c-white)}
.profile-editor .profile-button:disabled,.profile-editor .profile-reset:disabled{opacity:.5;cursor:default}
.profile-editor :focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.profile-editor .profile-button.primary:focus-visible{outline:var(--focus-ring-inverse)}
.profile-editor p[role='alert']{padding:var(--sp-8);border-radius:var(--radius-m);background:var(--c-error-bg);color:var(--c-error)}

/* A short fade keeps the compact profile popup in its original position. */
@media (prefers-reduced-motion: no-preference) { .profile-dialog.utamita-ux-reveal { animation: utamita-profile-reveal var(--motion-reveal) ease-out; } }
@keyframes utamita-profile-reveal { from { opacity: .65; } to { opacity: 1; } }