/* A complete transparent design is circle-anchored. No face landmarks or photo replacement. */
:is(.live-avatar,[data-secret-ring-member])[data-avatar-costume]{position:relative;overflow:visible!important;isolation:isolate;margin-top:var(--avatar-design-top,0);margin-inline:var(--avatar-design-side,0);margin-bottom:var(--avatar-design-bottom,0)}
/* Overlay geometry is never shifted by surrounding text/span spacing. */
.avatar-complete-design{display:block;margin:0!important;padding:0;border:0;box-sizing:content-box;position:absolute;pointer-events:none;z-index:1;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.avatar-complete-design[hidden]{display:none}
.live-avatar[data-avatar-costume]::after{z-index:4}.live-avatar[data-avatar-costume] .super-bug-antennae{z-index:5}
[data-secret-ring-member][data-avatar-costume]:not(.live-avatar){width:96px;min-height:96px;display:block}
[data-secret-ring-member][data-avatar-costume]:not(.live-avatar) .live-account-preview-image{margin:0}
.avatar-customize-launch{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0 8px;padding:20px;border:1px solid #d7c4e2;border-radius:18px;background:#f7f0fb;clear:both}
.avatar-customize-launch b{display:block;color:#493357;font-size:1rem}.avatar-customize-launch p{font-size:.86rem;line-height:1.4;margin:5px 0 0;color:#706575}.avatar-customize-launch button{flex:none;min-height:44px;max-width:100%;white-space:normal}
.avatar-cosmetics-dialog{box-sizing:border-box;width:min(94vw,660px);max-height:90dvh;overflow:auto;overscroll-behavior:contain;border:1px solid #d8c7bd;border-radius:26px;padding:26px;background:linear-gradient(145deg,#fffdf8,#f8f1e7);color:#493c47;box-shadow:0 24px 80px #28173059}
.avatar-cosmetics-dialog::backdrop{background:#30223899;backdrop-filter:blur(4px)}
.avatar-cosmetics-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.avatar-cosmetics-heading h2{font-size:clamp(1.4rem,4.8vw,1.9rem);line-height:1.2;margin:6px 0 10px}.avatar-cosmetics-heading p{line-height:1.5;font-size:.95rem;margin:0 0 18px;color:#6b5e67}.avatar-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.15em;color:#946d49}.avatar-close{border:1px solid #d7c4d0;background:#fff8fc;border-radius:50%;width:40px;height:40px;flex:none;font-size:1.4rem;color:#725779}
.avatar-cosmetics-photo{display:flex;align-items:center;justify-content:center;min-width:120px;min-height:124px;padding:18px}.avatar-cosmetics-photo .live-avatar{width:80px;height:80px;min-width:80px;font-size:1.7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#e9ddeb;color:#78558c;position:relative;flex:none}.avatar-cosmetics-photo .live-avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-cosmetics-photo .live-avatar[data-secret-ring-stage]{outline:2px solid var(--secret-ring);outline-offset:2px;box-shadow:0 0 0 2px #fffaf1}.avatar-cosmetics-photo .live-avatar[data-porch-genius=true]{outline-offset:6px;box-shadow:0 0 0 2px #fffaf1,0 0 0 4px var(--secret-ring),0 0 0 6px #fffaf1}
.avatar-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.avatar-costume-card{appearance:none;border:1px solid #d8c9bf;border-radius:18px;display:flex;align-items:center;flex-direction:column;background:#fffdf9;padding:14px 9px;min-width:0;font:inherit;color:inherit;cursor:pointer;transition:transform .15s,border-color .15s}.avatar-costume-card:hover{transform:translateY(-3px);border-color:#9871ac}.avatar-costume-card strong{line-height:1.25;margin:7px 0 6px}.avatar-costume-card small{font-size:.77rem;color:#81717a;line-height:1.4;min-height:2.8em}.avatar-choose-label{margin-top:12px;padding:9px 10px;border-radius:10px;background:#78558f;color:#fff;font-size:.77rem;font-weight:700}.avatar-costume-card .avatar-cosmetics-photo{min-width:0;padding:19px 5px;min-height:110px}.avatar-costume-card .live-avatar{width:66px;height:66px;min-width:66px}
.avatar-quiet{color:#80717b;font-size:.8rem;line-height:1.5;margin:16px 0}.avatar-customize-preview{display:flex;align-items:center;gap:14px;border-radius:18px;background:#eee5ed;padding:8px 12px;margin:0 0 20px}.avatar-customize-preview>div:not(.avatar-cosmetics-photo)>:is(strong,span,small){display:block}.avatar-customize-preview>div:not(.avatar-cosmetics-photo)>small{font-size:.76rem;color:#7b6877;line-height:1.45;margin-top:6px}.avatar-customize-preview>div:not(.avatar-cosmetics-photo)>span{font-size:.79rem;margin-top:5px;color:#84658b}.avatar-ring-controls,.avatar-costume-controls{border:0;padding:0;margin:20px 0}.avatar-ring-controls legend,.avatar-costume-controls legend{font-weight:750;margin-bottom:12px}.avatar-ring-controls label{display:flex;gap:10px;align-items:center;min-height:44px;font-size:.91rem}.avatar-ring-controls input{width:20px;height:20px;accent-color:#78558f}.avatar-owned-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.avatar-owned-option{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid #d8c9d5;border-radius:12px;min-height:44px;font-size:.86rem;background:#fffdfb}.avatar-owned-option:has(input:checked){background:#eee1f2;border-color:#a07bb2}.avatar-owned-option input{accent-color:#78558f}.avatar-ticket-link{width:100%;display:flex;justify-content:space-between;gap:12px;border:1px dashed #ba974d;border-radius:14px;padding:14px;background:#fff4d5;color:#755b34;font:inherit;font-weight:700}.avatar-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.avatar-form-actions button{min-height:44px}.avatar-cosmetics-error{color:#a0414d;font-size:.87rem;line-height:1.5;margin:12px 0 0}.avatar-cosmetics-error:empty{display:none}
.avatar-profile-guide{border:1px solid #d5bdcf;background:#fffdfb;border-radius:20px;padding:20px;margin:4px 0 18px;box-shadow:0 7px 22px #57395813}.avatar-profile-guide-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid #ebdfe7}.avatar-profile-guide-heading span{font-size:.74rem;color:#8c7988}.avatar-profile-guide-identity{display:flex;align-items:center;gap:12px}.avatar-profile-guide .avatar-customize-launch{margin:16px 0 0;padding:15px;gap:16px}.avatar-guide-highlight{position:relative;border-radius:18px;outline:3px solid #aa79c1;outline-offset:5px;margin-top:10px}.avatar-guide-highlight button{outline:3px solid #ba8e35;outline-offset:3px;opacity:1!important;color:#68447d!important;background:#fff9ff!important}.avatar-guide-caption{display:block;text-align:right;font-size:.76rem;font-weight:700;color:#94682b;margin:16px 0 0}
.avatar-cosmetics-dialog button:focus-visible,.avatar-customize-launch button:focus-visible{outline:3px solid #996bb6;outline-offset:4px}.avatar-cosmetics-dialog button:disabled{cursor:default;opacity:.55}.avatar-cosmetics-dialog[aria-busy] button{cursor:wait}
@media(max-width:480px){.avatar-cosmetics-dialog{padding:20px 15px;border-radius:22px;width:94vw;max-height:92dvh}.avatar-offer-grid{gap:7px}.avatar-costume-card{padding:10px 5px}.avatar-costume-card strong{font-size:.82rem}.avatar-costume-card small{font-size:.68rem}.avatar-choose-label{font-size:.65rem;padding:8px 5px}.avatar-costume-card .live-avatar{width:51px;height:51px;min-width:51px}.avatar-costume-card .avatar-cosmetics-photo{min-height:98px}.avatar-customize-launch{align-items:flex-start;flex-direction:column;gap:14px;padding:18px}.avatar-customize-launch button{width:100%}.avatar-customize-preview{gap:4px;padding:4px}.avatar-profile-guide{padding:14px}.avatar-profile-guide .avatar-customize-launch{padding:14px}.avatar-profile-guide-heading span{max-width:100px;text-align:right}}
@media(prefers-reduced-motion:reduce){.avatar-costume-card{transition:none}.avatar-costume-card:hover{transform:none}}
@media(forced-colors:active){.avatar-guide-highlight,.avatar-guide-highlight button{outline-color:Highlight}.avatar-owned-option:has(input:checked){outline:2px solid Highlight}.avatar-cosmetics-dialog{border:2px solid CanvasText;background:Canvas;color:CanvasText}}

.avatar-owned-option small{display:block;color:#806b7c;font-size:.7rem;line-height:1.3;margin-top:3px}

/* Decoration occupies layout space, not merely visible overflow from the photo.
   All three independent painters update these conservative bounds. */
:is(.connected-root,.live-dialog,.avatar-cosmetics-dialog) .live-avatar[data-avatar-layout],
[data-secret-ring-member][data-avatar-layout]{
 position:relative!important;left:auto!important;top:auto!important;flex-shrink:0;
 margin-top:var(--avatar-reserve-top,0px)!important;
 margin-inline:var(--avatar-reserve-side,0px)!important;
 margin-bottom:var(--avatar-reserve-bottom,0px)!important;
}
/* Let the complete decorated identity, not an absolute 36/42px photo, establish
   the metadata row's width and height before title, post body and action rows. */
.connected-root[data-room] .live-post .post-meta:has(.live-avatar[data-avatar-layout]){
 display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
 column-gap:10px;row-gap:3px;align-items:center;min-height:0;padding-left:0;
}
.connected-root[data-room] .live-post .post-meta:has(.live-avatar[data-avatar-layout])>.live-author-identity{display:contents}
.connected-root[data-room] .live-post .post-meta .live-avatar[data-avatar-layout]{grid-column:1;grid-row:1 / 3;align-self:center}
.connected-root[data-room] .live-post .post-meta:has(.live-avatar[data-avatar-layout]) .live-author-name{grid-column:2;grid-row:1;align-self:end;min-width:0;overflow-wrap:anywhere;margin-inline-start:0}
.connected-root[data-room] .live-post .post-meta:has(.live-avatar[data-avatar-layout])>time{grid-column:2;grid-row:2;align-self:start;min-width:0;overflow-wrap:anywhere}
/* Porch's former absolute photo rail must not put decoration into its bubble. */
.connected-root[data-room="porch"] .message>div:has(.live-avatar[data-avatar-layout]){padding-left:12px}
.connected-root[data-room="porch"] .message-author:has(.live-avatar[data-avatar-layout]) .live-author-identity{display:flex;min-width:0;gap:10px}
/* Fridge's MVP also used a fixed photo-sized holder beside the text bubble. */
.connected-root[data-room="fridge"] .fridge-mvp:has(.live-avatar[data-avatar-layout]){flex-wrap:wrap}
.connected-root[data-room="fridge"] .fridge-mvp-avatar:has(.live-avatar[data-avatar-layout]){width:auto;min-width:0;height:auto;flex:0 0 auto}
.connected-root[data-room="fridge"] .fridge-mvp:has(.live-avatar[data-avatar-layout]) .fridge-mvp-bubble{max-width:100%;flex:1 1 90px}
/* Header decoration keeps its full measured envelope without moving the brand
   or controls into a second row. The photo remains the existing 28px circle. */
.connected-root[data-room] .workspace>.topbar[data-avatar-layout-header] .header-profile-shortcut{
 width:var(--avatar-header-width);min-width:var(--avatar-header-width);height:auto;min-height:44px;
 flex:0 0 var(--avatar-header-width);padding:0 0 10px;align-items:center;justify-content:flex-start;
}
.connected-root[data-room] .workspace>.topbar[data-avatar-layout-header] .header-profile-shortcut .live-avatar{margin:0!important}
/* The selection/preview surfaces wrap instead of letting complete designs
   collide with their copy or the next offer at narrow phone widths. */
.avatar-customize-preview,.avatar-profile-guide-identity{flex-wrap:wrap}
.avatar-offer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.live-dialog .member-row:has(.live-avatar[data-avatar-layout]){flex-wrap:wrap}
/* Earned-only My profile previews use the same actual 96px photo surface as
   ticket designs, not the full-width loading-message container. */
[data-secret-ring-member][data-avatar-layout]:not(.live-avatar){width:96px;min-height:96px;display:block}
[data-secret-ring-member][data-avatar-layout]:not(.live-avatar) .live-account-preview-image{margin:0}

/* Narrow phones retain circular Porch owners: the old 40px flex-basis must
   follow the responsive34/36px width instead of stretching earned rings. */
.connected-root[data-room="porch"] .message-author .live-avatar[data-avatar-layout]{flex-basis:auto}

/* The birthday feature wraps every avatar, even when no hat is active. Keep
   the photo-sized positioning anchor on the inner avatar, never that wrapper. */
.avatar-cosmetics-photo > [data-birthday-avatar]{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:0}
.avatar-customize-preview{flex-direction:column;align-items:stretch;text-align:center}
.avatar-customize-preview .avatar-cosmetics-photo{width:100%;min-width:0;box-sizing:border-box}
.avatar-customize-preview > div:not(.avatar-cosmetics-photo){min-width:0;padding:0 10px 14px;overflow-wrap:anywhere}
.avatar-ring-controls,.avatar-costume-controls{min-inline-size:0}
.avatar-owned-option{min-width:0}
.avatar-owned-option > span{min-width:0;overflow-wrap:anywhere}
.avatar-owned-option input{flex:none}

.avatar-customize-preview .live-avatar{width:var(--customize-avatar-size,270px);height:var(--customize-avatar-size,270px);min-width:var(--customize-avatar-size,270px);flex:0 0 var(--customize-avatar-size,270px)}

/* Do not let generic dialogs impose a second narrow width cap. Use the
   preview's entire content width for the largest safely fitting photo. */
.avatar-cosmetics-dialog{max-width:94vw}
.avatar-customize-preview .avatar-cosmetics-photo{padding:12px 0}