/* Responsive Whiiso social surfaces: list-first messages, concise communities,
   restrained feed borders. Reuses approved words, photos, user records, and color system. */
html body #app .pmo-message-screen{
  padding:22px!important;min-height:0!important;background:#fff!important;
  border:1px solid #eee4e8!important;border-radius:22px!important;
  box-shadow:0 5px 24px #45243709!important
}
html body #app .pmo-message-screen>h1{
  margin:0 0 19px!important;font-size:30px!important;
  line-height:1.15!important;font-weight:900!important;letter-spacing:-.048em!important;
  color:#242128!important
}
html body #app .pmo-message-screen .social-msg-layout{
  display:grid!important;grid-template-columns:minmax(250px,.42fr) minmax(0,1fr)!important;
  min-height:570px!important;border:1px solid #efe7eb!important;
  border-radius:19px!important;overflow:hidden!important;background:#fff!important
}
html body #app .pmo-message-screen .social-msg-list{
  display:flex!important;flex-direction:column!important;
  min-width:0!important;padding:15px!important;background:#fff!important;
  border-right:1px solid #efe7eb!important
}
html body #app .pmo-message-screen .social-msg-list .directory-search{
  width:100%!important;max-width:none!important;margin:0 0 13px!important;
  height:46px!important;border:1px solid #ebe4e9!important;
  border-radius:13px!important;background:#faf8f9!important;
  padding:0 13px!important
}
html body #app .pmo-message-screen .social-msg-list .directory-search input{
  width:100%!important;min-width:0!important;font-size:13px!important;
  background:transparent!important;text-overflow:ellipsis!important
}
html body #app .pmo-message-screen #socialUserList{
  display:flex!important;flex-direction:column!important;gap:6px!important;
  min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important
}
html body #app .pmo-message-screen .social-peer{
  display:flex!important;align-items:center!important;width:100%!important;
  min-width:0!important;min-height:69px!important;gap:11px!important;
  padding:10px 11px!important;margin:0!important;border:1px solid transparent!important;
  border-radius:14px!important;background:#fff!important;
  font-size:13px!important;text-align:left!important;color:#282129!important
}
html body #app .pmo-message-screen .social-peer:hover,
html body #app .pmo-message-screen .social-peer.active{
  background:#fff0f5!important;border-color:#f4d9e5!important
}
html body #app .pmo-message-screen .social-peer[hidden]{display:none!important}
html body #app .pmo-message-screen .social-peer .pmo-dm-person-art{flex:0 0 auto!important}
html body #app .pmo-message-screen .social-peer .pmo-face{
  width:45px!important;height:45px!important;font-size:16px!important;border:1px solid #f1dce6!important
}
html body #app .pmo-message-screen .pmo-dm-person-copy{
  min-width:0!important;flex:1!important;display:grid!important;gap:3px!important;
  overflow:hidden!important;align-content:center!important
}
html body #app .pmo-message-screen .pmo-dm-person-copy b{
  display:block!important;min-width:0!important;font-size:13px!important;
  line-height:1.3!important;font-weight:850!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important
}
html body #app .pmo-message-screen .pmo-dm-person-copy small{
  display:block!important;min-width:0!important;font-size:11px!important;
  font-weight:450!important;color:#807784!important;line-height:1.3!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important
}
html body #app .pmo-message-screen .pmo-dm-chevron{
  margin-left:auto!important;flex:none!important;color:#938592!important;
  font-size:21px!important;font-weight:400!important
}
html body #app .pmo-message-screen .social-msg-conversation{
  min-width:0!important;min-height:520px!important;
  display:flex!important;flex-direction:column!important;
  background:#fff!important
}
html body #app .pmo-message-screen .pmo-dm-intro,
html body #app .pmo-message-screen .pmo-dm-list-empty{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  align-items:center!important;gap:14px!important;
  flex:1!important;min-height:240px!important;text-align:center!important;
  padding:25px 16px!important;background:#fff!important
}
html body #app .pmo-message-screen .pmo-dm-intro>.ui-icon,
html body #app .pmo-message-screen .pmo-dm-list-empty>.ui-icon{
  width:57px!important;height:57px!important;padding:14px!important;
  border:1px solid #f3e2ea!important;border-radius:20px!important;
  color:#a14177!important;background:#fff3f7!important
}
html body #app .pmo-message-screen .pmo-dm-intro>b{
  font-size:17px!important;font-weight:850!important;color:#39313b!important
}
html body #app .pmo-message-screen .pmo-dm-intro>a,
html body #app .pmo-message-screen .pmo-dm-list-empty>a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:42px!important;padding:10px 18px!important;max-width:100%!important;
  border-radius:13px!important;background:#252128!important;
  font-size:13px!important;font-weight:800!important;color:#fff!important;
  text-decoration:none!important
}
html body #app .pmo-message-screen .pmo-dm-intro>a:focus-visible,
html body #app .pmo-message-screen .pmo-dm-list-empty>a:focus-visible,
html body #app .pmo-message-screen button:focus-visible{
  outline:3px solid #af5b8e!important;outline-offset:2px!important
}
html body #app .pmo-message-screen .social-msg-peer{
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:67px!important;padding:12px 18px!important;
  border-bottom:1px solid #f0e8ec!important;background:#fff!important;
  font-size:15px!important;font-weight:850!important
}
html body #app .pmo-message-screen .social-msg-peer>a{
  min-width:0!important;text-decoration:none!important;overflow:hidden!important;
  text-overflow:ellipsis!important;white-space:nowrap!important
}
html body #app .pmo-message-screen .social-msg-peer .pmo-face{
  width:38px!important;height:38px!important;flex:none!important
}
html body #app .pmo-message-screen .pmo-dm-back{
  display:none!important;flex:none!important;
  border:0!important;border-radius:11px!important;
  background:#fff5f8!important;color:#4c3746!important;
  min-width:40px!important;height:40px!important;font-size:24px!important
}
html body #app .pmo-message-screen .social-msg-log{
  min-height:0!important;max-height:none!important;
  flex:1!important;display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;gap:9px!important;
  padding:17px 18px!important;background:#fdfafb!important
}
html body #app .pmo-message-screen .direct-bubble{
  max-width:min(85%,480px)!important;border-radius:16px 16px 16px 5px!important;
  background:#f2ebef!important;color:#28252c!important;
  padding:11px 14px!important;font-size:13px!important;line-height:1.45!important
}
html body #app .pmo-message-screen .direct-bubble.mine{
  align-self:flex-end!important;border-radius:16px 16px 5px 16px!important;
  background:#f9dbe9!important;color:#402038!important
}
html body #app .pmo-message-screen .pmo-dm-thread-empty{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:12px!important;
  flex:1!important;padding:25px!important;color:#847784!important;
  font-size:12px!important
}
html body #app .pmo-message-screen .pmo-dm-thread-empty>.ui-icon{
  width:45px!important;height:45px!important;stroke:#b57d9d!important
}
html body #app .pmo-message-screen .social-msg-input{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  gap:7px!important;padding:12px!important;margin:0!important;
  border-top:1px solid #efe5eb!important;background:#fff!important
}
html body #app .pmo-message-screen .social-msg-input>input{
  flex:1 1 0%!important;min-width:0!important;width:auto!important;
  min-height:43px!important;padding:10px 13px!important;
  border:1px solid #e9dfe5!important;border-radius:13px!important;
  background:#fff!important;color:#30262e!important;
  font-size:13px!important;line-height:1.3!important;outline:none!important
}
html body #app .pmo-message-screen .social-msg-input>input:focus{
  border-color:#b46c91!important;box-shadow:0 0 0 3px #b46c9120!important
}
html body #app .pmo-message-screen .social-msg-input button{
  flex:0 0 auto!important;min-width:43px!important;height:43px!important;
  min-height:43px!important;padding:7px 9px!important;border-radius:12px!important;
  font-size:13px!important;font-weight:800!important
}
html body #app .pmo-message-screen .social-msg-input button.primary{
  min-width:59px!important;background:#cb397f!important;color:#fff!important
}
@media(max-width:760px){
  html body #app .app-shell:has(.pmo-message-screen){
    padding:13px 10px calc(95px + env(safe-area-inset-bottom,0px))!important;
    max-width:100%!important
  }
  html body #app .pmo-message-screen{
    min-height:0!important;padding:17px 13px 14px!important;
    border-radius:21px!important;box-shadow:0 4px 15px #40203709!important
  }
  html body #app .pmo-message-screen>h1{
    font-size:27px!important;margin:0 0 15px 4px!important
  }
  html body #app .pmo-message-screen .social-msg-layout{
    display:block!important;min-height:0!important;height:auto!important;
    border:1px solid #efe5eb!important;border-radius:17px!important;
    overflow:hidden!important
  }
  html body #app .pmo-message-screen.pmo-message-list-only .social-msg-conversation{
    display:none!important
  }
  html body #app .pmo-message-screen.pmo-message-list-only .social-msg-list{
    display:flex!important;width:100%!important;
    border-right:0!important;padding:13px!important;min-height:460px!important
  }
  html body #app .pmo-message-screen #socialUserList{
    min-height:0!important;max-height:none!important;overflow-y:visible!important
  }
  html body #app .pmo-message-screen .social-peer{
    min-height:71px!important;padding:11px 12px!important
  }
  html body #app .pmo-message-screen.pmo-message-open .social-msg-list{display:none!important}
  html body #app .pmo-message-screen.pmo-message-open .social-msg-conversation{
    display:flex!important;
    height:calc(100svh - 235px)!important;
    min-height:415px!important;max-height:850px!important;width:100%!important
  }
  html body #app .pmo-message-screen .pmo-dm-back{
    display:inline-grid!important;place-items:center!important
  }
  html body #app .pmo-message-screen .social-msg-peer{
    min-height:61px!important;padding:9px 11px!important
  }
  html body #app .pmo-message-screen .social-msg-log{padding:14px!important}
  html body #app .pmo-message-screen .social-msg-input{
    gap:5px!important;padding:9px!important
  }
  html body #app .pmo-message-screen .social-msg-input>input{
    min-height:41px!important;font-size:12px!important
  }
  html body #app .pmo-message-screen .social-msg-input button{
    min-width:36px!important;width:36px!important;height:41px!important;
    min-height:41px!important;padding:6px!important
  }
  html body #app .pmo-message-screen .social-msg-input button.primary{
    min-width:51px!important;width:auto!important;padding:6px 9px!important
  }
}
/* Community browsing: prioritize creator and group identity over oversized outlines. */
@media(max-width:760px){
  html body #app .app-shell:has(.pmo-communities){
    padding:16px 12px calc(94px + env(safe-area-inset-bottom,0px))!important
  }
  html body #app .pmo-communities{padding:2px 0 20px!important}
  html body #app .pmo-communities .pmo-community-head{
    display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;
    gap:12px!important;margin:0 0 15px!important
  }
  html body #app .pmo-communities .pmo-community-head h1{
    font-size:clamp(30px,7vw,36px)!important;font-weight:900!important;
    line-height:1.1!important;letter-spacing:-.055em!important;margin:0 0 5px!important
  }
  html body #app .pmo-communities .pmo-community-head p{
    font-size:12px!important;line-height:1.4!important;color:#817582!important
  }
  html body #app .pmo-communities .pmo-community-head>button.primary{
    padding:9px 13px!important;min-height:39px!important;
    font-size:12px!important;border-radius:12px!important;
    box-shadow:none!important;margin:0!important
  }
  html body #app .pmo-communities>.directory-search{
    width:100%!important;max-width:none!important;
    min-height:46px!important;margin:0 0 15px!important;
    border:1px solid #e8e0e5!important;background:#fff!important;
    border-radius:13px!important
  }
  html body #app .pmo-communities .pmo-community-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important
  }
  html body #app .pmo-communities .pmo-community-card{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;align-items:start!important;
    gap:7px 12px!important;min-height:0!important;
    padding:16px!important;position:relative!important;
    border:1px solid #eee1e8!important;border-radius:17px!important;
    background:#fff!important;box-shadow:0 3px 14px #48183208!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-community-avatar,
  html body #app .pmo-communities .pmo-community-card .pmo-community-avatar.whiiso-community-image-placeholder{
    grid-column:1!important;grid-row:1!important;
    width:50px!important;height:50px!important;min-width:50px!important;
    flex:0 0 50px!important;padding:0!important;
    border:2px solid #efbbd3!important;
    border-radius:15px!important;object-fit:cover!important;
    font-size:19px!important;box-shadow:none!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-community-body{
    grid-column:2!important;grid-row:1!important;min-width:0!important;
    align-self:start!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-community-body h2{
    font-size:16px!important;font-weight:850!important;line-height:1.24!important;
    margin:0 30px 2px 0!important;letter-spacing:-.025em!important;
    overflow-wrap:anywhere!important
  }
  html body #app .pmo-communities .pmo-community-body>small{
    font-size:11px!important;color:#887a87!important;
    overflow-wrap:anywhere!important;display:block!important
  }
  html body #app .pmo-communities .pmo-community-body p{
    font-size:12px!important;line-height:1.38!important;
    margin:8px 0 9px!important;color:#5f5660!important;
    overflow-wrap:anywhere!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-rank{
    position:absolute!important;left:18px!important;bottom:14px!important;
    display:inline-flex!important;align-items:center!important;
    gap:3px!important;color:#ac3d7a!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-rank span{display:none!important}
  html body #app .pmo-communities .pmo-community-card .pmo-rank b{
    font-size:11px!important;font-weight:800!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-card-more{
    right:10px!important;top:9px!important;
    font-size:17px!important;min-width:31px!important;min-height:31px!important;
    color:#ad5286!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-tags{
    display:flex!important;flex-wrap:wrap!important;gap:5px!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-tags span{
    display:inline-flex!important;align-items:center!important;
    padding:4px 7px!important;border-radius:8px!important;
    border:1px solid #f0dee6!important;background:#fff7fa!important;
    font-size:10px!important;line-height:1.2!important;font-weight:720!important;
    color:#915775!important;max-width:100%!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-enter{
    grid-column:2!important;grid-row:2!important;
    justify-self:start!important;align-self:end!important;
    display:inline-flex!important;min-height:36px!important;
    margin:4px 0 0!important;padding:8px 13px!important;
    border-radius:10px!important;font-size:11px!important;
    font-weight:850!important;gap:12px!important;
    background:linear-gradient(115deg,#f04488,#b23d96)!important;
    color:white!important;box-shadow:none!important
  }
}
/* Feed: match the calmer, crisp social layout rather than layers of pink borders. */
@media(max-width:760px){
  html body #app .app-shell:has(.clean-composer) .feed-heading h1{
    font-weight:900!important;letter-spacing:-.055em!important
  }
  html body #app .app-shell:has(.clean-composer) .clean-composer{
    border:1px solid #eee4e8!important;box-shadow:0 3px 11px #4b2c3809!important
  }
  html body #app .app-shell:has(.clean-composer) article.post.pmo-real-post{
    border:1px solid #eee5ea!important;box-shadow:0 3px 11px #4b2c3807!important
  }
  html body #app .app-shell:has(.clean-composer) .pmo-real-post .pmo-post-text{
    font-size:14px!important;line-height:1.52!important;color:#262329!important
  }
}
@media(max-width:380px){
  html body #app .pmo-message-screen{padding:14px 10px!important}
  html body #app .pmo-message-screen .social-msg-input{gap:3px!important}
  html body #app .pmo-message-screen .social-msg-input button{
    width:33px!important;min-width:33px!important
  }
  html body #app .pmo-message-screen .social-msg-input button.primary{
    min-width:47px!important
  }
  html body #app .pmo-communities .pmo-community-card{
    grid-template-columns:46px minmax(0,1fr)!important;
    padding:14px!important;gap:6px 10px!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-community-avatar,
  html body #app .pmo-communities .pmo-community-card .pmo-community-avatar.whiiso-community-image-placeholder{
    width:44px!important;height:44px!important;min-width:44px!important
  }
  html body #app .pmo-communities .pmo-community-card .pmo-rank{left:15px!important}
}
@media(prefers-reduced-motion:reduce){
  html body #app .pmo-communities .pmo-community-card,
  html body #app .pmo-message-screen .social-peer{transition:none!important}
}

/* DM mechanics: compact unread indicators and reversible safety controls. */
html body #app .pmo-message-screen .pmo-dm-unread,
html body #app .pmo-message-screen .pmo-dm-total{
 display:inline-flex;align-items:center;justify-content:center;
 min-width:20px;height:20px;padding:0 5px;border-radius:999px;
 background:#452341;color:#fff;font-size:11px;font-weight:800;
 font-variant-numeric:tabular-nums;white-space:nowrap
}
html body #app .pmo-message-screen .pmo-dm-total{vertical-align:middle;font-size:12px}
html body #app .pmo-message-screen .pmo-dm-person-copy{min-width:0;flex:1}
html body #app .pmo-message-screen .pmo-dm-receipt{display:inline-block;margin-left:5px;letter-spacing:-2px;font-weight:800}
html body #app .pmo-message-screen .pmo-dm-block{margin-left:auto;flex-shrink:0;font-size:12px}
html body #app .pmo-message-screen .pmo-dm-blocked-list{
 margin-top:12px;padding-top:11px;border-top:1px solid #efe7eb;
 display:flex;flex-direction:column;gap:6px
}
html body #app .pmo-message-screen .pmo-dm-blocked-row{
 display:flex;align-items:center;gap:9px;min-width:0;padding:7px;
 border-radius:12px;color:#5d4d57;font-size:12px
}
html body #app .pmo-message-screen .pmo-dm-blocked-row>.pmo-face{flex-shrink:0}
html body #app .pmo-message-screen .pmo-dm-blocked-row>span:nth-child(2){
 flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
html body #app .pmo-message-screen .pmo-dm-blocked-row button{flex-shrink:0}

/* Topbar notifications: uses existing bell and keeps the feed layout unchanged. */
html body #app .top-icons [data-action="notifications"]{position:relative}
html body #app .pmo-notification-count{
 position:absolute;top:-5px;right:-5px;display:inline-flex;align-items:center;
 justify-content:center;min-width:17px;height:17px;padding:0 3px;
 border-radius:999px;background:#6d315e;color:#fff;border:2px solid #fff;
 font-size:9px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums
}
html body #app .pmo-notification-center{
 position:absolute;right:18px;top:calc(100% + 6px);z-index:1100;
 width:min(360px,calc(100vw - 26px));max-height:min(72vh,540px);
 display:flex;flex-direction:column;overflow:hidden;
 border:1px solid #ece2e7;border-radius:18px;background:#fff;
 box-shadow:0 18px 48px #29152825;color:#272028;
}
html body #app .pmo-notification-heading{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 min-height:54px;padding:15px;border-bottom:1px solid #efe6eb
}
html body #app .pmo-notification-heading>strong{font-size:15px;font-weight:850}
html body #app .pmo-notification-mark-all{
 border:0;background:transparent;color:#7f3e69;font-size:12px;
 font-weight:750;cursor:pointer
}
html body #app .pmo-notification-list{
 display:flex;flex-direction:column;min-height:0;overflow-y:auto;
 overscroll-behavior:contain
}
html body #app .pmo-notification-item{
 display:flex;align-items:center;gap:12px;text-align:left;
 width:100%;min-height:68px;padding:12px 15px;
 border:0;border-bottom:1px solid #f2ecf0;background:#fff;color:inherit;
 cursor:pointer;font-size:13px;line-height:1.4
}
html body #app .pmo-notification-item.unread{background:#fff8fb}
html body #app .pmo-notification-item:hover{background:#fdf1f7}
html body #app .pmo-notification-avatar{
 display:grid;place-items:center;overflow:hidden;flex-shrink:0;
 width:38px;height:38px;border-radius:50%;background:#f3dce8;
 color:#522a48;font-weight:850
}
html body #app .pmo-notification-avatar>img{width:100%;height:100%;object-fit:cover}
html body #app .pmo-notification-copy{flex:1;min-width:0;overflow-wrap:anywhere}
html body #app .pmo-notification-dot{
 width:8px;height:8px;flex:none;border-radius:50%;background:#96547f
}
html body #app .pmo-notification-empty{padding:24px 16px;margin:0;color:#6c5c67;font-size:13px}
html body #app .pmo-notification-center button:focus-visible{
 outline:3px solid #af5b8e;outline-offset:-3px
}
@media(max-width:640px){
 html body #app .pmo-notification-center{right:12px;top:calc(100% + 4px)}
}