/* POLO2 Phase 4 — Transparency + builtin badge colors. Scoped to PROFILE views only. */
/* Remove grey overlays from profile heads/content; preserve theme media, layout, banners. */
#view-profile.profile-themed .profile-head,
#view-profile.profile-themed #profile-posts {
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.profile-popout-card.unified-profile-popout > .profile-popout-content {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Badges receive their owner's selected solid, opaque background to remain distinct
   on active GIFs. Custom badges are NEVER targeted. */
.p4-tinted-badge:not(.custom-badge) {
  color: var(--p4-badge-fg) !important;
  background: var(--p4-badge-bg) !important;
  border-color: var(--p4-badge-bg) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 5px rgba(0,0,0,.55);
}
.p4-tinted-badge:not(.custom-badge):hover {
  color: var(--p4-badge-fg) !important;
  background: var(--p4-badge-bg) !important;
}
.profile-badge-colors-editor { display:grid; gap:10px; border:1px solid var(--g3,#333); padding:12px; }
.profile-badge-color-rows { display:grid; gap:8px; }
.profile-badge-color-row { display:grid; grid-template-columns:minmax(100px,1fr) 26px minmax(100px,145px) auto; gap:10px; align-items:center; min-width:0; }
.profile-badge-color-label { font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.profile-badge-color-row label { display:flex; align-items:center; gap:7px; margin:0; font-size:12px; }
.profile-badge-color-row input[type=color] { width:52px; height:34px; padding:3px; cursor:pointer; }
.profile-badge-color-row input[type=checkbox] { width:auto; }
.profile-badge-color-row .profile-badge-color-preview { margin:0; }
@media(max-width:520px) {
  .profile-badge-color-row { grid-template-columns:minmax(75px,1fr) 24px minmax(100px,1fr); }
  .profile-badge-enabled { grid-column:3; }
}


/* Phase 4.2 — reliable readable full-profile text. These CSS variables are
   selected from the active profile theme by script.js. Do not color avatars,
   post attachments, moderation badges, or other users' ordinary feed posts. */
#view-profile.profile-themed .profile-identity .profile-handle,
#view-profile.profile-themed #profile-posts > .post .post-head .profile-link,
#view-profile.profile-themed #profile-posts > .post .post-head .custom-name-text,
#view-profile.profile-themed #profile-posts > .post .post-head .muted,
#view-profile.profile-themed #profile-posts > .post .post-text,
#view-profile.profile-themed #profile-posts > .post .post-text a,
#view-profile.profile-themed #profile-posts > .post .post-text .hash {
  color: var(--p4-readable-text,#fff) !important;
  -webkit-text-fill-color: var(--p4-readable-text,#fff) !important;
  text-shadow: var(--p4-readable-outline,0 1px 2px rgba(0,0,0,.9)) !important;
  mix-blend-mode: normal !important;
}
/* Preserve badges' colors and make fancy name gradients yield to readability
   ONLY in the full profile. Server/feed/popout customizations are unchanged. */
#view-profile.profile-themed #profile-posts > .post .post-head .custom-name-text {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}


/* Phase 4.5.3 — full-profile header/identity layout repair (desktop + mobile).
   The display name must never share a flex row with a long badge strip.
   Leave popouts, feed/message headers, and custom-badge artwork untouched. */
#view-profile #profile-head {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#view-profile #profile-head .profile-banner {
  max-width: 100%;
  min-width: 0;
}
#view-profile #profile-head .profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#view-profile #profile-head .profile-identity-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#view-profile #profile-head .profile-display-heading {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}
#view-profile #profile-head .profile-display-heading > * {
  max-width: 100%;
}
#view-profile #profile-head .profile-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 5px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#view-profile #profile-head .profile-badges-row .profile-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}
#view-profile #profile-head .profile-badges-row .admin-badge,
#view-profile #profile-head .profile-badges-row .verified-icon {
  flex-shrink: 0;
}
#view-profile #profile-head .profile-handle {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#view-profile #profile-head .profile-actions {
  min-width: 0;
  max-width: 100%;
}
/* A strong readable but compact call-to-action, not a full-width white stripe
   over an animated profile background. */
#view-profile.profile-themed #profile-head .profile-actions > .btn {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  padding: 9px 16px;
  min-height: 40px;
  background: rgba(0,0,0,.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 9px;
  text-shadow: none;
}
#view-profile.profile-themed #profile-head .profile-actions > .btn:hover,
#view-profile.profile-themed #profile-head .profile-actions > .btn:focus-visible {
  background: rgba(25,25,25,.94);
  border-color: #fff;
}
/* Prevent full-profile post contents from exceeding the available view width. */
#view-profile #profile-posts,
#view-profile #profile-posts > .post,
#view-profile #profile-posts > .post .post-body {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 760px) {
  #view-profile #profile-head .profile-identity {gap: 10px;}
  #view-profile #profile-head .profile-display-heading {font-size: 18px;}
  #view-profile #profile-head .profile-badges-row {gap: 4px; margin: 6px 0 4px;}
  #view-profile #profile-head .profile-badges-row .profile-badges {gap: 4px;}
  #view-profile #profile-head .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  #view-profile.profile-themed #profile-head .profile-actions > .btn {
    min-width: 0;
    width: auto;
    max-width: 100%;
    font-size: 12px;
    padding: 9px 13px;
  }
}
@media (max-width: 360px) {
  #view-profile #profile-head .profile-identity {gap: 8px;}
  #view-profile #profile-head .profile-display-heading {font-size: 16px;}
}

/* Phase 4.5.6 — full-profile display-name and avatar-frame parity.
   Honor intentional solid/gradient display-name text selections instead of
   forcing the profile-background auto-contrast color over them. Keep ordinary
   default display names and post text responsive to the background. */
#view-profile.profile-themed #profile-head .profile-display-heading
.custom-display-name:not(.has-custom-name-text) .custom-name-text {
  color:var(--p4-readable-text,#fff) !important;
  -webkit-text-fill-color:var(--p4-readable-text,#fff) !important;
  text-shadow:var(--p4-readable-outline,0 1px 2px rgba(0,0,0,.9)) !important;
}
/* The image / GIF avatar frame uses the same decoration data and frame markup
   as the popout. Explicit wrapper dimensions avoid zero/unstable intrinsic size
   in Safari/WKWebView and Electron while leaving badge placement unchanged. */
#view-profile.profile-themed #profile-head .profile-click-avatar[data-decor-avatar-uid] {
  --p456-avatar-size:88px;
  position:relative !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--p456-avatar-size);
  height:var(--p456-avatar-size);
  min-width:var(--p456-avatar-size);
  flex:0 0 var(--p456-avatar-size);
  isolation:isolate;
  overflow:visible !important;
}
#view-profile.profile-themed #profile-head .profile-click-avatar[data-decor-avatar-uid] > .profile-large-avatar {
  display:block;
  width:100% !important;
  height:100% !important;
  flex-shrink:0;
  object-fit:cover;
  border-radius:50%;
}
#view-profile.profile-themed #profile-head .profile-click-avatar[data-decor-avatar-uid] > .profile-frame-overlay {
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:125% !important;
  height:125% !important;
  min-width:0;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  z-index:4 !important;
  border:0 !important;
  pointer-events:none !important;
}
@media (max-width:760px){
  #view-profile.profile-themed #profile-head .profile-click-avatar[data-decor-avatar-uid] {--p456-avatar-size:72px;}
}
@media (max-width:430px){
  #view-profile.profile-themed #profile-head .profile-click-avatar[data-decor-avatar-uid] {--p456-avatar-size:58px;}
}