/* Yappy v15 — attachment sheet + composer controls closer to WhatsApp iOS */

:root{--attach-disc:#f4f4f5}
:root[data-theme="dark"]{--attach-disc:#303033}

.v15-attach-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:28px 10px!important;
  padding:18px 10px 28px!important;
  align-items:start;
}
.v15-attach-item{
  min-width:0!important;
  padding:0!important;
  gap:9px!important;
  font-size:14.5px!important;
  line-height:18px!important;
  color:var(--text-main)!important;
  background:none!important;
  border:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.v15-attach-item>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v15-disc{
  width:64px!important;
  height:64px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:var(--attach-disc)!important;
  color:#f7f7f8!important;
  box-shadow:none!important;
}
.v15-disc svg{width:34px!important;height:34px!important;display:block!important}
.disc-photos{color:#55a8ff!important}
.disc-camera{color:#f0f0f2!important}
.disc-location{color:#18c98b!important}
.disc-contact{color:#f0f0f2!important}
.disc-document{color:#12a9e8!important}
.disc-video{color:#8b7cff!important}
.disc-voice{color:#ffb33e!important}
.disc-call{color:#22c781!important}
.disc-date{color:#ff3b64!important}
.disc-typing{color:#8e8e93!important}
.disc-block{color:#ff453a!important}

:root[data-theme="light"] .v15-disc{
  --attach-disc:#ededf0;
  background:#ededf0!important;
}
:root[data-theme="light"] .disc-camera,
:root[data-theme="light"] .disc-contact{color:#56565b!important}

/* The native iOS sheet is visually quiet: no sender selector here. Sender/time/status live behind the clock control. */
.overlay .bottom-sheet:has(.v15-attach-grid){
  padding-top:8px!important;
  background:rgba(28,28,30,.98)!important;
}
:root[data-theme="light"] .overlay .bottom-sheet:has(.v15-attach-grid){
  background:rgba(248,248,250,.98)!important;
}
.overlay .bottom-sheet:has(.v15-attach-grid) .sheet-handle{margin-bottom:4px!important}

/* Sticker stays beside the message field, like the WhatsApp iOS reference. */
#cv-sticker{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:var(--text-main)!important;
}
#cv-sticker svg{width:24px!important;height:24px!important}
#cv-sticker:active{background:rgba(118,118,128,.13)!important}

/* Slightly refine call cards to the reference screenshots. */
.bubble.call-entry.wa-call-card{
  min-width:228px!important;
  padding:7px 8px!important;
  border-radius:18px!important;
}
.wa-call-main{grid-template-columns:52px minmax(0,1fr) auto!important;gap:10px!important;min-height:54px!important}
.wa-call-icon{width:50px!important;height:50px!important;background:rgba(255,255,255,.7)!important}
:root[data-theme="dark"] .wa-call-icon{background:rgba(255,255,255,.07)!important}
.bubble.call-entry.out .wa-call-icon{background:rgba(255,255,255,.44)!important}
.wa-call-copy strong{font-size:15.5px!important;line-height:19px!important;font-weight:650!important}
.wa-call-copy span{font-size:13px!important;line-height:16px!important}
.wa-call-main time{font-size:11.5px!important;padding-bottom:2px!important}

@media(max-width:380px){
  .v15-attach-grid{gap:24px 7px!important;padding-inline:7px!important}
  .v15-disc{width:58px!important;height:58px!important}
  .v15-disc svg{width:31px!important;height:31px!important}
  .v15-attach-item{font-size:13px!important}
}
@media(max-width:330px){
  .v15-attach-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}