/* V2 TARGETED ONLY: search, picker/stickers, reaction motion, modal cleanup. */

/* Remove the accidental borders seen on the mobile search/filter strips. */
@media(max-width:768px){
  .search-box-area,
  .filter-tabs{
    border-bottom:0 !important;
  }

  /* Compact search; tapping/focusing expands it. */
  .search-box-area{
    padding:8px 10px !important;
    min-height:44px !important;
  }
  .search-input{
    width:46px !important;
    flex:0 0 46px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    font-size:0 !important;
    border:1px solid transparent !important;
    transition:width .18s ease, flex-basis .18s ease, font-size .12s ease, border-color .18s ease !important;
    background:var(--input-bg) !important;
  }
  .search-input:focus,
  .search-input.v2-search-expanded{
    width:min(310px,calc(100vw - 72px)) !important;
    flex-basis:min(310px,calc(100vw - 72px)) !important;
    font-size:14px !important;
    border-color:color-mix(in srgb, var(--primary) .35, transparent) !important;
  }

  .msg-search-wrapper{
    width:42px !important;
    flex:0 0 42px !important;
    transition:width .18s ease !important;
  }
  .msg-search-box{
    width:42px !important;
    height:34px !important;
    padding:6px 8px !important;
    font-size:0 !important;
    border-color:transparent !important;
    transition:width .18s ease,font-size .12s ease,border-color .18s ease !important;
  }
  .msg-search-box:focus,
  .msg-search-box.v2-search-expanded{
    width:min(210px,48vw) !important;
    font-size:12px !important;
    border-color:color-mix(in srgb, var(--primary) .35, transparent) !important;
  }
}

/* Picker: stickers should look like the emoji grid, not tall cards. */
.sticker-grid.v16-sticker-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:5px !important;
  max-height:280px !important;
  padding:9px !important;
}
.v16-sticker-item{
  width:100% !important;
  aspect-ratio:1 !important;
  height:auto !important;
  min-height:38px !important;
  padding:5px !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:none !important;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background .16s ease !important;
}
.v16-sticker-item:hover,
.v16-sticker-item:focus-visible,
.v16-sticker-item:active{
  transform:scale(1.12) !important;
  background:color-mix(in srgb, var(--primary) .10, transparent) !important;
  outline:none !important;
}
@media(max-width:767px){
  .sticker-grid.v16-sticker-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:4px !important;
    padding:8px !important;
    max-height:min(38dvh,300px) !important;
  }
  .v16-sticker-item{
    min-height:40px !important;
    padding:4px !important;
  }
}

/* The supplied V18/V17/V7.23 motion was too segmented. Use one continuous,
   gentle drift with no large left/right jumps. */
.reaction-fly-up{
  animation:v2NaturalReaction 2.65s cubic-bezier(.16,.72,.24,1) forwards !important;
  will-change:transform,opacity,filter !important;
  transform-origin:50% 100% !important;
}
@keyframes v2NaturalReaction{
  0%{
    opacity:0;
    filter:blur(0);
    transform:translate3d(-50%,10px,0) scale(.68) rotate(-3deg);
  }
  12%{
    opacity:1;
    transform:translate3d(calc(-50% - 3px),-14px,0) scale(1.04) rotate(1deg);
  }
  32%{
    opacity:.98;
    transform:translate3d(calc(-50% + 4px),-115px,0) scale(1.02) rotate(-1deg);
  }
  54%{
    opacity:.88;
    transform:translate3d(calc(-50% - 2px),-235px,0) scale(.98) rotate(.8deg);
  }
  74%{
    opacity:.58;
    transform:translate3d(calc(-50% + 3px),-365px,0) scale(.91) rotate(-.7deg);
  }
  90%{
    opacity:.25;
    filter:blur(.7px);
    transform:translate3d(calc(-50% - 1px),-470px,0) scale(.82) rotate(.4deg);
  }
  100%{
    opacity:0;
    filter:blur(1.8px);
    transform:translate3d(-50%,-540px,0) scale(.74) rotate(0deg);
  }
}

/* Keep the image modal clean around the new isolated actions. */
#invoiceExportBar{
  border:0 !important;
}