/* Yappy iMessage v28 — Messages-style app drawer.
   This intentionally does NOT reuse WhatsApp attachment visuals. */

html[data-social-app="imessage"] .overlay.im28-attach-overlay{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

html[data-social-app="imessage"] #sheet-el.im28-attach-sheet{
  width:calc(100% - 36px)!important;
  max-width:520px!important;
  max-height:min(70%,690px)!important;
  margin:0 18px calc(70px + env(safe-area-inset-bottom,0px))!important;
  padding:15px 0 18px!important;
  border-radius:32px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:rgba(62,62,64,.74)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(34px) saturate(155%)!important;
  backdrop-filter:blur(34px) saturate(155%)!important;
  color:#fff!important;
  scrollbar-width:none!important;
}

html[data-social-app="imessage"] #sheet-el.im28-attach-sheet::-webkit-scrollbar{
  display:none!important;
}

html[data-theme="dark"][data-social-app="imessage"] #sheet-el.im28-attach-sheet{
  background:rgba(28,28,30,.78)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:
    0 20px 56px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

html[data-social-app="imessage"] #sheet-el.im28-attach-sheet .sheet-grabber{
  display:none!important;
}

html[data-social-app="imessage"] .im28-appdrawer{
  display:flex!important;
  flex-direction:column!important;
  padding:0 10px 2px!important;
}

html[data-social-app="imessage"] .im28-appdrawer>button{
  appearance:none!important;
  width:100%!important;
  min-height:70px!important;
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  padding:7px 18px!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  color:#fff!important;
  text-align:left!important;
  font:inherit!important;
  transition:background .12s ease,transform .12s ease!important;
}

html[data-social-app="imessage"] .im28-appdrawer>button:active{
  background:rgba(255,255,255,.09)!important;
  transform:scale(.995)!important;
}

html[data-social-app="imessage"] .im28-appdrawer .im28-label{
  font-size:24px!important;
  line-height:1.08!important;
  font-weight:400!important;
  letter-spacing:-.025em!important;
  color:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.10)!important;
}

html[data-social-app="imessage"] .im28-appicon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  flex:0 0 48px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}

html[data-social-app="imessage"] .im28-appicon svg{
  width:48px!important;
  height:48px!important;
  display:block!important;
  overflow:visible!important;
}

/* Secondary fake-scene tools stay available, but visually belong to Messages now. */
html[data-social-app="imessage"] .im28-appdrawer .im28-secondary{
  min-height:64px!important;
}

html[data-social-app="imessage"] .im28-appdrawer .im28-secondary .im28-label{
  font-size:21px!important;
}

html[data-social-app="imessage"] .im28-appdrawer .im28-secondary .im28-appicon,
html[data-social-app="imessage"] .im28-appdrawer .im28-secondary .im28-appicon svg{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  flex-basis:44px!important;
}

html[data-social-app="imessage"] .im28-drawer-divider{
  height:1px!important;
  margin:8px 18px!important;
  background:rgba(255,255,255,.10)!important;
}

@media(max-width:390px){
  html[data-social-app="imessage"] #sheet-el.im28-attach-sheet{
    width:calc(100% - 28px)!important;
    margin-left:14px!important;
    margin-right:14px!important;
    border-radius:29px!important;
  }
  html[data-social-app="imessage"] .im28-appdrawer>button{
    min-height:66px!important;
    gap:17px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  html[data-social-app="imessage"] .im28-appdrawer .im28-label{
    font-size:22px!important;
  }
  html[data-social-app="imessage"] .im28-appicon,
  html[data-social-app="imessage"] .im28-appicon svg{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    flex-basis:46px!important;
  }
}