/* Patiyiz — neutral WhatsApp-inspired messages and three profile tabs, 2026-10-29.
   This final layer overrides earlier lavender and saturated DM styling. */
html[data-pati-theme="light"]{
 --p3-chat-background:#f8f8f6;
 --p3-chat-other:#fff;
 --p3-chat-other-text:#1b1d20;
 --p3-chat-mine:#dff5dc;
 --p3-chat-mine-text:#19231b;
 --p3-chat-accent:#25292a;
 --p3-chat-muted:#68716b;
 --p3-chat-border:#e2e6e3;
 --p3-chat-input:#fff;
}
html[data-pati-theme="dark"]{
 --p3-chat-background:#17191b;
 --p3-chat-other:#2b2d30;
 --p3-chat-other-text:#f1f2f3;
 --p3-chat-mine:#294033;
 --p3-chat-mine-text:#f3faf3;
 --p3-chat-accent:#e5e8e7;
 --p3-chat-muted:#afb7b3;
 --p3-chat-border:#393e3c;
 --p3-chat-input:#262a28;
}
/* Keep every toolbar, chat surface, and text input within the mobile viewport. */
#main-content .pati-dm-layout{
 box-sizing:border-box!important;
 min-width:0!important;
 width:100%!important;
 max-width:100%!important;
 overflow:visible!important;
}
#main-content .pati-dm-layout .chat-window{
 background:var(--p3-chat-background)!important;
 border-color:var(--p3-chat-border)!important;
 overflow:hidden!important;
}
#main-content .pati-dm-layout .chat-people{
 background:var(--p3-chat-background)!important;
 color:var(--p3-chat-other-text)!important;
 border-color:var(--p3-chat-border)!important;
}
#main-content .pati-dm-layout .pati-dm-list-row{
 background:transparent!important;
 border-color:var(--p3-chat-border)!important;
}
#main-content .pati-dm-layout .pati-dm-list-row .chat-person{
 background:transparent!important;
 color:var(--p3-chat-other-text)!important;
 min-width:0!important;
}
#main-content .pati-dm-layout .pati-dm-list-row .chat-person.active{
 background:color-mix(in srgb,var(--p3-chat-other) 75%,var(--p3-chat-background))!important;
}
#main-content .pati-dm-layout .chat-window>header{
 display:flex!important;
 align-items:center!important;
 flex-wrap:nowrap!important;
 gap:9px!important;
 min-height:62px!important;
 padding:8px 12px!important;
 border-color:var(--p3-chat-border)!important;
}
#main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar){
 flex:1 1 0!important;
 min-width:0!important;
 overflow:hidden;
}
#main-content .pati-dm-layout .chat-window>header>span strong,
#main-content .pati-dm-layout .chat-window>header>span small{
 max-width:100%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
#main-content .pati-dm-layout .chat-window>header .pati-dm-extra-tools{
 margin-inline-start:0!important;
 flex:0 0 auto!important;
 max-width:max-content;
}
#main-content .pati-dm-layout .pati-dm-extra-tools button{
 border-radius:9px;
 font-size:12px;
 padding:7px 9px;
 background:transparent!important;
 border-color:var(--p3-chat-border)!important;
 color:var(--p3-chat-other-text)!important;
}
#main-content .pati-dm-layout .chat-window>header .chat-view-profile{
 flex:0 0 auto;
 font-size:12px!important;
 background:transparent!important;
 border:1px solid var(--p3-chat-border)!important;
 color:var(--p3-chat-other-text)!important;
}
#main-content .pati-dm-layout .chat-history{
 background:var(--p3-chat-background)!important;
 color:var(--p3-chat-other-text)!important;
 gap:7px!important;
 padding:16px 12px!important;
 overscroll-behavior:contain;
}
#main-content .pati-dm-layout .chat-history .bubble-chat{
 max-width:min(82%,510px)!important;
 font-size:15px!important;
 padding:10px 13px!important;
 border:1px solid var(--p3-chat-border)!important;
 background:var(--p3-chat-other)!important;
 color:var(--p3-chat-other-text)!important;
 border-radius:18px 18px 18px 5px!important;
 box-shadow:0 1px 2px #00000008!important;
}
#main-content .pati-dm-layout .chat-history .bubble-chat.mine{
 background:var(--p3-chat-mine)!important;
 color:var(--p3-chat-mine-text)!important;
 border-color:transparent!important;
 border-radius:18px 18px 5px 18px!important;
}
#main-content .pati-dm-layout .chat-history .bubble-chat>small{
 font-size:10px!important;
 font-variant-numeric:tabular-nums;
 color:inherit!important;
 opacity:.64!important;
 white-space:nowrap;
}
#main-content .pati-dm-layout .chat-history .pati-dm-time-divider time{
 color:var(--p3-chat-muted)!important;
}
#main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-image-message,
#main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-image-open),
#main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-audio){
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 padding:3px 0!important;
 color:var(--p3-chat-other-text)!important;
}
#main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-image-message.mine,
#main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-audio).mine{
 background:transparent!important;
 border:0!important;
}
#main-content .pati-dm-layout .pati-dm-image-open{
 display:block!important;
 padding:0!important;
 background:transparent!important;
 border:0!important;
 overflow:hidden;
 border-radius:12px!important;
}
#main-content .pati-dm-layout .pati-dm-image{
 border:0!important;
 border-radius:12px!important;
 box-shadow:none!important;
 display:block!important;
 max-width:100%!important;
 max-height:410px;
 object-fit:contain;
}
#main-content .pati-dm-layout .pati-dm-audio{
 display:block;
 width:min(270px,74vw);
 max-width:100%;
 padding:0;
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 filter:grayscale(1);
}
#main-content .pati-dm-layout .chat-form{
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:center!important;
 gap:7px!important;
 width:100%!important;
 min-width:0!important;
 max-width:100%!important;
 padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))!important;
 box-sizing:border-box!important;
 background:var(--p3-chat-background)!important;
 border-color:var(--p3-chat-border)!important;
 position:relative!important;
 overflow:visible!important;
}
#main-content .pati-dm-layout .chat-form input[name="body"]{
 min-width:0!important;
 width:100%!important;
 flex:1 1 0!important;
 border-radius:24px!important;
 background:var(--p3-chat-input)!important;
 color:var(--p3-chat-other-text)!important;
}
#main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.primary-btn){
 flex:0 0 42px!important;
 width:42px!important;
 min-width:42px!important;
 height:42px!important;
 min-height:42px!important;
 border-radius:50%!important;
 background:transparent!important;
 color:var(--p3-chat-other-text)!important;
 border:0!important;
 display:grid!important;
 place-items:center!important;
}
#main-content .pati-dm-layout .chat-form .primary-btn{
 background:var(--p3-chat-accent)!important;
 color:var(--p3-chat-background)!important;
}
#main-content .pati-dm-layout .chat-form .pati-dm-attach{
 position:relative;
 flex:0 0 40px;
 width:40px;
 min-width:40px;
 align-self:center;
}
#main-content .pati-dm-layout .pati-dm-attach>summary{
 display:grid;
 place-items:center;
 border:1px solid var(--p3-chat-border);
 border-radius:50%;
 background:var(--p3-chat-other);
 color:var(--p3-chat-other-text);
 width:40px;
 height:40px;
 min-height:40px;
 font-size:27px;
 line-height:1;
 font-weight:400;
 cursor:pointer;
 list-style:none;
 user-select:none;
}
#main-content .pati-dm-layout .pati-dm-attach>summary::-webkit-details-marker{display:none}
#main-content .pati-dm-layout .pati-dm-attach>summary::marker{content:""}
#main-content .pati-dm-layout .pati-dm-attach[open]>summary{
 background:var(--p3-chat-other);
 border-color:var(--p3-chat-muted);
}
#main-content .pati-dm-layout .pati-dm-attach-menu{
 position:absolute;
 bottom:calc(100% + 12px);
 inset-inline-start:0;
 z-index:70;
 display:grid;
 grid-template-columns:repeat(4,44px);
 gap:6px;
 padding:9px;
 background:var(--p3-chat-other);
 border:1px solid var(--p3-chat-border);
 border-radius:16px;
 box-shadow:0 8px 28px #00000020;
}
#main-content .pati-dm-layout .pati-dm-attach-menu :is(button,label){
 display:grid!important;
 place-items:center!important;
 box-sizing:border-box;
 flex:none!important;
 width:44px!important;
 min-width:44px!important;
 height:44px!important;
 min-height:44px!important;
 border:1px solid var(--p3-chat-border)!important;
 border-radius:12px!important;
 background:var(--p3-chat-background)!important;
 color:var(--p3-chat-other-text)!important;
 cursor:pointer;
}
#main-content .pati-dm-layout .pati-dm-attach-menu .icon{width:22px;height:22px}
#main-content .pati-dm-layout .pati-dm-attach:not([open]) .pati-dm-attach-menu{display:none!important}
#main-content .pati-dm-layout .pati-dm-attach>summary:focus-visible,
#main-content .pati-dm-layout .chat-form :is(input,button):focus-visible{
 outline:2px solid var(--p3-chat-muted)!important;
 outline-offset:2px!important;
}
#main-content .pati-group-chat-window .chat-history{
 background:var(--p3-chat-background)!important;
}
#main-content .pati-group-chat-window .pati-group-bubble,
html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble{
 background:var(--p3-chat-other)!important;
 color:var(--p3-chat-other-text)!important;
}
#main-content .pati-group-chat-window .pati-group-bubble.mine,
html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble.mine{
 background:var(--p3-chat-mine)!important;
 color:var(--p3-chat-mine-text)!important;
}
#main-content .pati-group-chat-window .pati-group-chat-form .primary-btn{
 background:var(--p3-chat-accent)!important;
 color:var(--p3-chat-background)!important;
}
#main-content .pati-ig-profile .pati-ig-tabs{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 align-items:stretch;
 width:100%;
 overflow:visible!important;
 border-color:var(--p3-chat-border)!important;
}
#main-content .pati-ig-profile .pati-ig-tabs>button{
 flex:1 1 auto!important;
 min-width:0!important;
 min-height:62px!important;
 color:#6b7279!important;
 border-radius:0!important;
 display:grid!important;
 place-items:center!important;
 background:transparent!important;
}
#main-content .pati-ig-profile .pati-ig-tabs>button.active,
#main-content .pati-ig-profile .pati-ig-tabs>button[aria-selected="true"]{color:#15191c!important}
html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs>button{color:#afb5bb!important}
html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs>button.active{color:#fff!important}
#main-content .pati-ig-profile .pati-ig-tabs>button.active::before{
 background:currentColor!important;
 top:auto!important;
 bottom:0!important;
 width:62%!important;
 left:19%!important;
 height:3px!important;
}
#main-content .pati-ig-profile .pati-profile-tab-icon{
 display:block;
 width:31px;
 height:31px;
 fill:currentColor;
 stroke-width:2.35;
 flex:0 0 auto;
}
#main-content .pati-ig-profile .pati-profile-reposted{
 position:absolute;
 top:7px;
 right:7px;
 background:#000b;
 color:#fff;
 border-radius:50%;
 width:24px;
 height:24px;
 display:grid;
 place-items:center;
 font-size:17px;
 z-index:2;
}
#main-content .pati-ig-profile .pati-profile-pin{
 background:#000b;
 color:#fff;
 font-size:14px;
}
@media(max-width:740px){
 #main-content .pati-dm-layout.mobile-chat-open .chat-window{
  display:flex!important;
  flex-direction:column!important;
  height:calc(100dvh - 177px)!important;
  min-height:260px!important;
  max-height:none!important;
  width:100%!important;
 }
 #main-content .pati-dm-layout .chat-window>header{
  flex-wrap:nowrap!important;
  padding:8px 9px!important;
  gap:6px!important;
 }
 #main-content .pati-dm-layout .chat-window>header .chat-head-avatar{
  flex:0 0 34px!important;
  width:34px!important;
  max-width:34px!important;
 }
 #main-content .pati-dm-layout .chat-window>header .pati-dm-extra-tools button{
  min-height:33px;
  font-size:12px;
  padding:5px 6px;
 }
 #main-content .pati-dm-layout .chat-form{gap:5px!important;padding-inline:8px!important}
 #main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.primary-btn){
  flex-basis:37px!important;width:37px!important;min-width:37px!important;
  height:37px!important;min-height:37px!important;
 }
 #main-content .pati-ig-profile .pati-ig-tabs>button{min-height:58px!important}
}
@media(max-width:355px){
 #main-content .pati-dm-layout .chat-form .pati-dm-attach,
 #main-content .pati-dm-layout .pati-dm-attach>summary{
  width:36px!important;min-width:36px!important;flex-basis:36px!important;
  height:36px!important;min-height:36px!important;
 }
 #main-content .pati-dm-layout .chat-form{gap:4px!important}
 #main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.primary-btn){
  flex-basis:34px!important;width:34px!important;min-width:34px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #main-content .pati-dm-layout .pati-dm-attach-menu{transition:none!important}
}