/* HOWU V16 — notifications, calls, Saved redesign, responsive hardening */

/* ---------- Messenger notification reliability UI ---------- */
.howu-notification-toast{
  pointer-events:auto!important;
  min-height:62px;
  border-radius:16px!important;
  box-shadow:0 18px 60px rgba(0,0,0,.22)!important;
}
.howu-notification-toast .howu-chat-avatar{width:42px!important;height:42px!important;flex:0 0 42px!important}
.howu-notification-toast>span:last-child{flex:1!important;min-width:0!important}
.howu-notification-toast strong{font-size:13px!important;line-height:1.25!important}
.howu-notification-toast small{font-size:11px!important;line-height:1.35!important;max-width:100%!important}

/* ---------- Calls ---------- */
/* V15's generic direct-child span selector accidentally stretched the avatar. */
.howu-call-history>button>.howu-chat-avatar{
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  min-width:46px!important;max-width:46px!important;aspect-ratio:1/1!important;border-radius:50%!important;
}
.howu-call-history>button>.howu-chat-avatar img{
  width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:50%!important;
}
.howu-call-history>button>span:not(.howu-chat-avatar){min-width:0!important;flex:1!important;display:grid!important}
.howu-call-brand-logo{width:38px;height:38px;flex:0 0 38px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:#ffd600}
.howu-call-brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.howu-call-tile audio{position:absolute;width:1px;height:1px;opacity:.001;pointer-events:none}
.howu-call-avatar-fallback .howu-chat-avatar{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.howu-call-overlay>header>div>span.howu-call-brand-logo{display:grid!important}

/* ---------- Saved: Instagram-inspired rebuild ---------- */
.pc-saved-page{
  display:block!important;
  width:min(100%,940px)!important;
  max-width:940px!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.pc-saved-page>.pc-page-title{display:none!important}
.howu-saved16{
  --saved-bg:var(--pc-surface,#fff);
  --saved-text:var(--pc-text,#101114);
  --saved-soft:var(--pc-text-soft,#73777f);
  --saved-line:var(--pc-border-soft,#e8e8e8);
  width:100%;min-height:620px;background:var(--saved-bg);color:var(--saved-text);
  border:1px solid var(--saved-line);border-radius:28px;overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.08);
}
.howu-saved16 button{font:inherit;color:inherit}
.howu-saved16-head,.howu-saved16-detail-head{
  height:78px;padding:0 24px;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;
  border-bottom:1px solid var(--saved-line);background:var(--saved-bg)
}
.howu-saved16-head h1,.howu-saved16-detail-head strong{font-size:22px;font-weight:800;letter-spacing:-.035em;text-align:center}
.howu-saved16-head>button,.howu-saved16-detail-head>button{
  width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;font-size:36px;font-weight:300;line-height:1;
  justify-self:end;background:transparent;transition:background .15s ease,transform .12s ease
}
.howu-saved16-detail-head>button:first-child{justify-self:start;font-size:46px;transform:translateY(-2px)}
.howu-saved16-detail-head>button:last-child{font-size:19px;font-weight:800;letter-spacing:2px}
.howu-saved16-head>button:hover,.howu-saved16-detail-head>button:hover{background:rgba(127,127,127,.09)}
.howu-saved16-head>button:active,.howu-saved16-detail-head>button:active{transform:scale(.94)}
.howu-saved16-tabs{
  display:flex;gap:10px;overflow-x:auto;padding:14px 22px 10px;scrollbar-width:none;border-bottom:1px solid color-mix(in srgb,var(--saved-line) 65%,transparent)
}
.howu-saved16-tabs::-webkit-scrollbar{display:none}
.howu-saved16-tabs button{
  flex:0 0 auto;border:1px solid var(--saved-line);border-radius:999px;background:var(--saved-bg);padding:8px 16px;font-size:13px;font-weight:700;
  transition:background .15s ease,border-color .15s ease,transform .12s ease
}
.howu-saved16-tabs button:hover{background:rgba(127,127,127,.07)}
.howu-saved16-tabs button.is-active{background:color-mix(in srgb,var(--saved-line) 64%,var(--saved-bg));border-color:transparent}
.howu-saved16-tabs button:active{transform:scale(.97)}
.howu-saved16-section{padding:18px 22px 22px}
.howu-saved16-section+.howu-saved16-section{padding-top:8px}
.howu-saved16-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 14px}
.howu-saved16-section-title>strong{font-size:17px;font-weight:800;letter-spacing:-.02em}
.howu-saved16-section-title>button{border:0;background:transparent;font-size:13px;font-weight:800;color:#4a5cff;padding:5px 0}
.howu-saved16-collections,.howu-saved16-all-collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.howu-saved16-all-collections{padding:20px 22px}
.howu-saved16-collection,.howu-saved16-create-card{
  min-width:0;border:0;background:transparent;text-align:left;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:12px;padding:7px;border-radius:15px;
  transition:background .15s ease,transform .12s ease
}
.howu-saved16-collection:hover,.howu-saved16-create-card:hover{background:rgba(127,127,127,.065)}
.howu-saved16-collection:active,.howu-saved16-create-card:active{transform:scale(.985)}
.howu-saved16-cover{
  width:78px;height:78px;border-radius:13px;overflow:hidden;background:color-mix(in srgb,var(--saved-line) 55%,var(--saved-bg));
  display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);border:1px solid var(--saved-line)
}
.howu-saved16-cover>span{min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;border:.5px solid color-mix(in srgb,var(--saved-line) 70%,transparent)}
.howu-saved16-cover img{width:100%;height:100%;object-fit:cover}
.howu-saved16-cover b{font-size:8px;line-height:1.15;padding:4px;color:var(--saved-soft);word-break:break-word}
.howu-saved16-cover>.is-empty{grid-column:1/-1;grid-row:1/-1;font-size:32px;color:var(--saved-soft)}
.howu-saved16-collection>span:last-child,.howu-saved16-create-card>span{min-width:0;display:grid;gap:3px}
.howu-saved16-collection strong,.howu-saved16-create-card strong{font-size:15px;font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.howu-saved16-collection small{font-size:12px;color:var(--saved-soft)}
.howu-saved16-create-card b{width:42px;height:42px;border:1px solid var(--saved-line);border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:300;margin-bottom:4px}
.howu-saved16-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.howu-saved16-tile{position:relative;min-width:0;aspect-ratio:1/1;background:color-mix(in srgb,var(--saved-line) 38%,var(--saved-bg));overflow:hidden}
.howu-saved16-post{width:100%;height:100%;border:0;background:transparent;display:grid;place-items:center;overflow:hidden;text-align:left}
.howu-saved16-post img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.howu-saved16-post:hover img{transform:scale(1.025)}
.howu-saved16-post>span{width:100%;height:100%;display:flex;align-items:flex-end;padding:13px;font-size:12px;line-height:1.35;font-weight:700;color:var(--saved-text);background:linear-gradient(145deg,color-mix(in srgb,var(--saved-line) 42%,var(--saved-bg)),var(--saved-bg));overflow:hidden}
.howu-saved16-remove{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff!important;font-size:20px;display:grid;place-items:center;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.howu-saved16-empty{grid-column:1/-1;padding:42px 18px;text-align:center;color:var(--saved-soft);font-size:13px}
.howu-saved16-empty-large{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.howu-saved16-empty-large strong{font-size:18px;color:var(--saved-text)}
.howu-saved16-empty-large span{max-width:360px;font-size:12px;text-align:center}
.howu-saved16-detail-tabs{height:58px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--saved-line)}
.howu-saved16-detail-tabs button{position:relative;border:0;background:transparent;font-size:16px;font-weight:700;color:var(--saved-soft)}
.howu-saved16-detail-tabs button.is-active{color:var(--saved-text)}
.howu-saved16-detail-tabs button.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--saved-text)}
.howu-saved16-collection-name{padding:13px 18px 8px;font-size:12px;font-weight:800;color:var(--saved-soft)}
.howu-saved16-modal-backdrop{position:fixed;z-index:2147482300;inset:0;background:rgba(0,0,0,.42);display:grid;place-items:center;padding:16px}
.howu-saved16-modal{width:min(440px,100%);background:var(--saved-bg);border-radius:20px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.28);border:1px solid var(--saved-line)}
.howu-saved16-modal header{height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;border-bottom:1px solid var(--saved-line)}
.howu-saved16-modal header strong{font-size:15px}.howu-saved16-modal header button{border:0;background:transparent;font-size:13px}.howu-saved16-modal header button:first-child{justify-self:start}.howu-saved16-modal header button:last-child{justify-self:end;color:#4a5cff;font-weight:800}.howu-saved16-modal header button:disabled{opacity:.4}
.howu-saved16-modal input{width:calc(100% - 28px);height:46px;margin:16px 14px 20px;border:1px solid var(--saved-line);border-radius:12px;background:var(--saved-bg);color:var(--saved-text);padding:0 13px;outline:none;font-size:15px}
.howu-saved16-modal input:focus{border-color:color-mix(in srgb,var(--saved-text) 36%,var(--saved-line));box-shadow:0 0 0 3px color-mix(in srgb,#4a5cff 10%,transparent)}

/* ---------- Site-wide responsive hardening ---------- */
html,body,#root,.pc-app,.pc-layout,.pc-main,.pc-main--wide{min-width:0!important;max-width:100%!important}
html,body{overflow-x:hidden!important}
.pc-main,.pc-main--wide,.pc-feed-column,.pc-search-page,.pc-profile-page,.pc-settings-v4-page{min-width:0!important}
.pc-post-card,.pc-panel,.pc-settings-card,.pc-settings-v4-group{max-width:100%!important}
.pc-post-card img,.pc-post-card video,.pc-profile-page img,.pc-search-page img{max-width:100%!important}
.pc-modal-backdrop>*,.pc-profile-post-dialog,.pc-create-menu,.pc-collection-picker{max-width:calc(100vw - 24px)!important}

@media (max-width:900px){
  .pc-layout{width:100%!important;padding-inline:12px!important}
  .pc-main,.pc-main--wide{width:100%!important;margin-inline:auto!important}
  .pc-desktop-topbar{padding-inline:12px!important}
  .howu-messenger-shell{border-radius:14px}
}

@media (max-width:700px){
  body{overscroll-behavior-y:none}
  .pc-sidebar,.pc-desktop-topbar{display:none!important}
  .pc-mobile-header{display:flex!important;position:sticky!important;top:0!important;z-index:80!important;padding-top:env(safe-area-inset-top)!important}
  .pc-layout{display:block!important;width:100%!important;padding:0 0 calc(68px + env(safe-area-inset-bottom))!important;margin:0!important}
  .pc-main,.pc-main--wide,.pc-feed-column,.pc-profile-page,.pc-search-page,.pc-settings-v4-page{width:100%!important;max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important}
  .pc-bottom-nav{display:grid!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:100!important;width:100%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;padding-left:max(4px,env(safe-area-inset-left))!important;padding-right:max(4px,env(safe-area-inset-right))!important}
  .pc-bottom-nav>button{min-width:0!important;max-width:none!important}
  .pc-feed-column>.pc-post-card,.pc-post-list>.pc-post-card,.pc-search-page,.pc-profile-header,.pc-settings-card{border-left:0!important;border-right:0!important;border-radius:0!important}
  .pc-post-header,.pc-post-content,.pc-post-actions{max-width:100%!important}
  input,textarea,select{font-size:16px!important}
  .pc-modal-backdrop{padding:0!important;align-items:end!important}
  .pc-modal-backdrop>section,.pc-modal-backdrop>div:not(.pc-modal-backdrop){width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0!important;max-height:90dvh!important}
  .howu-saved16{border:0!important;border-radius:0!important;min-height:calc(100dvh - 122px);box-shadow:none!important}
  .pc-saved-page{width:100%!important;max-width:none!important}
  .howu-saved16-head,.howu-saved16-detail-head{height:58px;padding:0 12px;grid-template-columns:42px 1fr 42px}
  .howu-saved16-head h1,.howu-saved16-detail-head strong{font-size:18px}
  .howu-saved16-head>button,.howu-saved16-detail-head>button{width:38px;height:38px}
  .howu-saved16-tabs{padding:10px 12px 9px;gap:7px}
  .howu-saved16-tabs button{padding:7px 13px;font-size:12px}
  .howu-saved16-section,.howu-saved16-all-collections{padding-left:12px;padding-right:12px}
  .howu-saved16-collections,.howu-saved16-all-collections{gap:7px}
  .howu-saved16-collection,.howu-saved16-create-card{grid-template-columns:58px minmax(0,1fr);gap:9px;padding:5px}
  .howu-saved16-cover{width:58px;height:58px;border-radius:10px}
  .howu-saved16-collection strong,.howu-saved16-create-card strong{font-size:13px}
  .howu-saved16-collection small{font-size:10px}
  .howu-saved16-grid{gap:2px}
  .howu-saved16-post>span{font-size:10px;padding:8px}
  .howu-saved16-modal-backdrop{align-items:end;padding:0}
  .howu-saved16-modal{width:100%;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .howu-call-overlay>header{padding-inline:10px}
  .howu-call-overlay>header>span:last-child{display:none}
  .howu-call-brand-logo{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .howu-call-overlay>main{padding:8px}
  .howu-call-grid{gap:7px}
  .howu-call-tile{min-height:210px;border-radius:13px}
  .howu-call-overlay>footer{gap:10px}
  .howu-call-overlay>footer button{width:50px;height:50px}
}

@media (max-width:430px){
  .howu-saved16-section-title>strong{font-size:15px}
  .howu-saved16-collections,.howu-saved16-all-collections{grid-template-columns:1fr 1fr}
  .howu-saved16-collection,.howu-saved16-create-card{grid-template-columns:50px minmax(0,1fr)}
  .howu-saved16-cover{width:50px;height:50px}
  .howu-saved16-collection strong,.howu-saved16-create-card strong{font-size:12px}
  .howu-saved16-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .howu-call-history>button>.howu-chat-avatar{width:42px!important;height:42px!important;flex-basis:42px!important;min-width:42px!important;max-width:42px!important}
  .howu-notification-toast{left:8px!important;right:8px!important;width:auto!important;top:calc(env(safe-area-inset-top) + 8px)!important}
}

@media (min-width:1200px){
  .pc-main--wide{width:min(100%,1180px)!important;margin-inline:auto!important}
  .pc-saved-page{max-width:900px!important}
}
.pc-desktop-topbar [aria-label="Messages"],.pc-desktop-topbar [aria-label="Notifications"]{position:relative!important}
@media(max-width:700px){
  .howu-call-overlay.is-video .howu-call-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}
  .howu-call-overlay.is-video .howu-call-tile{min-height:250px}
}
@media(max-width:360px){
  .howu-call-overlay.is-video .howu-call-grid{grid-template-columns:1fr}
  .howu-call-overlay.is-video .howu-call-tile{min-height:210px}
}