/* Payam Mehr - Telegram-style profile screen v1 (append-only layer) */
dialog#profileDialog{padding:0!important;border:0!important;width:min(480px,100vw)!important;max-width:100vw!important;max-height:100dvh!important;border-radius:18px!important;overflow:hidden auto!important;background:var(--panel,#fff)!important;box-shadow:0 18px 50px rgba(0,0,0,.3)!important}
@media (max-width:760px){dialog#profileDialog{width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;inset:0!important}}
dialog#profileDialog::backdrop{background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* hero: big centred avatar, name, role */
#profileDialog *:has(> * > #profileName){display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:10px!important;padding:22px 16px 16px!important;background:linear-gradient(180deg,rgba(15,138,108,.10),transparent)!important;border:0!important;box-shadow:none!important}
#profileDialog *:has(> * > #profileName) > :first-child{width:118px!important;height:118px!important;min-width:118px!important;border-radius:50%!important;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.18)!important;font-size:44px!important}
#profileDialog *:has(> * > #profileName) > :first-child img{width:100%!important;height:100%!important;object-fit:cover;border-radius:50%!important}
#profileDialog #profileName{font-size:22px!important;font-weight:700!important;margin:4px 0 0!important}
#profileDialog #profileRole{font-size:14px!important;opacity:.6;margin:0!important}
/* info rows (Telegram: value on top, small caption below, thin dividers) */
#profileDialog #profileBioText{font-size:15.5px!important;line-height:1.9!important;white-space:pre-line}
#profileDialog *:has(> #profileBioText){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:12px 18px!important;border-bottom:1px solid rgba(0,0,0,.07)!important;margin:0!important}
#profileDialog #profileEducationSection{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:8px 0 4px!important;margin:6px 0 0!important}
#profileDialog #profileEducationSection > *{padding-inline:18px}
#profileDialog #profileEducationSection *:has(> :nth-child(2)):not(:has(> * > *)):not(:has(button)):not(#profileEducationSection){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;border-bottom:1px solid rgba(0,0,0,.06)!important;padding:10px 0!important;margin:0!important;display:flex!important;flex-direction:column-reverse!important;gap:2px}
#profileDialog #profileEducationSection button{border-radius:12px!important;min-height:46px!important;margin-top:12px!important}
/* edit section */
#profileDialog #profileEditSection{padding:14px 18px 22px!important;border-top:8px solid rgba(0,0,0,.035)!important;margin-top:8px!important}
#profileDialog #profileBioInput{border-radius:12px!important;font-size:16px!important}
#profileDialog #saveProfile{border-radius:12px!important;min-height:46px!important}
/* header: compact Telegram bar */
#profileDialog header,#profileDialog .profile-dialog-head,#profileDialog > form > :first-child:has(button){position:sticky;top:0;z-index:2;background:rgba(255,255,255,.85)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-hampayam-theme="shams"] dialog#profileDialog{background:#1b2023!important;color:#eee}
html[data-hampayam-theme="shams"] #profileDialog header,html[data-hampayam-theme="shams"] #profileDialog > form > :first-child:has(button){background:rgba(27,32,35,.85)!important}

/* keep the education section header in normal order (title, then description) */
#profileDialog #profileEducationSection > :first-child :is(div,header,#x1):is(div,header,#x2){flex-direction:column!important;border-bottom:0!important;padding:0!important}
#profileDialog #profileEducationSection > :first-child{border-bottom:1px solid rgba(0,0,0,.07);padding-bottom:10px!important}