/* V18 TARGETED CHAT PERFORMANCE + MOBILE ACTION POLISH
   Scope: sticker message size, reaction animation, mobile message actions,
   and the visual confirmation of a just-sent message. No data/schema rules. */

/* 1) Sent sticker/image messages: only stickers are reduced to ~50%.
      The sticker picker/list itself is untouched. Normal images keep the
      existing dimensions. */
.msg-bubble img[src*="stickers-v16/"]{
  width:120px !important;
  max-width:50% !important;
  height:auto !important;
  border-radius:10px !important;
  margin-top:4px !important;
}
@media (max-width:700px){
  .msg-bubble img[src*="stickers-v16/"]{
    width:120px !important;
    max-width:50vw !important;
  }
}

/* 2) Reaction: smoke-like drift. JS supplies a small random horizontal
      drift/rotation per reaction so repeated reactions don't look robotic. */
.reaction-fly-up{
  animation:v18SmokeReaction 3s cubic-bezier(.22,.70,.18,1) forwards !important;
  will-change:transform,opacity,filter;
  transform-origin:50% 100%;
  pointer-events:none !important;
  z-index:30 !important;
  font-size:34px !important;
}
@keyframes v18SmokeReaction{
  0%{
    opacity:0;
    filter:blur(0px);
    transform:translate(-50%,10px) scale(.55) rotate(calc(var(--rx-tilt, 0deg) * .35));
  }
  8%{
    opacity:1;
    filter:blur(0px);
    transform:translate(calc(-50% + var(--rx-drift-a, -12px)), -8px) scale(1.02) rotate(calc(var(--rx-tilt, 0deg) * .55));
  }
  20%{
    opacity:.99;
    transform:translate(calc(-50% + var(--rx-drift-b, 20px)), -85px) scale(1.06) rotate(calc(var(--rx-tilt, 0deg) * -.35));
  }
  34%{
    opacity:.96;
    transform:translate(calc(-50% + var(--rx-drift-c, -34px)), -220px) scale(1.01) rotate(calc(var(--rx-tilt, 0deg) * .8));
  }
  49%{
    opacity:.90;
    transform:translate(calc(-50% + var(--rx-drift-d, 38px)), -390px) scale(.98) rotate(calc(var(--rx-tilt, 0deg) * -.7));
  }
  64%{
    opacity:.72;
    transform:translate(calc(-50% + var(--rx-drift-e, -48px)), -610px) scale(.91) rotate(calc(var(--rx-tilt, 0deg) * .9));
  }
  78%{
    opacity:.48;
    filter:blur(.15px);
    transform:translate(calc(-50% + var(--rx-drift-f, 42px)), -790px) scale(.82) rotate(calc(var(--rx-tilt, 0deg) * -.85));
  }
  90%{
    opacity:.23;
    filter:blur(.8px);
    transform:translate(calc(-50% + var(--rx-drift-g, -26px)), -930px) scale(.70) rotate(calc(var(--rx-tilt, 0deg) * .7));
  }
  100%{
    opacity:0;
    filter:blur(2.6px);
    transform:translate(calc(-50% + var(--rx-drift-h, 14px)), -1050px) scale(.58) rotate(var(--rx-tilt, 0deg));
  }
}

/* 3) Mobile selected-message sheet: closer to the supplied Zalo-like
      composition. Theme-aware, compact, soft, and touch friendly. */
@media (max-width:700px){
  .zalo-mobile-message-sheet-v711{
    padding:0 0 env(safe-area-inset-bottom) !important;
  }
  .zalo-mobile-sheet-card-v711{
    width:min(100%, 430px) !important;
    margin:0 auto !important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    border-radius:16px 16px 0 0 !important;
    overflow:hidden !important;
    background:var(--bg-header,#ffffff) !important;
    color:var(--text-main,#111827) !important;
    border:1px solid color-mix(in srgb,var(--border-color,#d9dee7) 55%,transparent) !important;
    border-bottom:0 !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.24) !important;
  }
  .zalo-mobile-reactions-v711{
    min-height:54px !important;
    padding:2px 5px 6px !important;
    border-bottom:1px solid color-mix(in srgb,var(--border-color,#d9dee7) 70%,transparent) !important;
  }
  .zalo-mobile-reaction-v711{
    width:45px !important;
    height:45px !important;
    min-width:45px !important;
    font-size:29px !important;
    color:var(--text-main,#111827) !important;
    border-radius:11px !important;
  }
  .zalo-mobile-reaction-v711:active{
    background:color-mix(in srgb,var(--primary,#f59e0b) 12%,transparent) !important;
    transform:scale(.91) !important;
  }
  .zalo-mobile-actions-grid-v711{
    grid-template-columns:repeat(4,1fr) !important;
    gap:1px !important;
    padding:6px 0 0 !important;
  }
  .zalo-mobile-action-item-v711{
    min-height:68px !important;
    padding:6px 2px !important;
    color:var(--text-main,#111827) !important;
    background:transparent !important;
    border-radius:10px !important;
    font-size:11.5px !important;
    gap:6px !important;
  }
  .zalo-mobile-action-item-v711:active{
    background:color-mix(in srgb,var(--primary,#f59e0b) 10%,transparent) !important;
  }
  .zalo-mobile-action-icon-v711{
    width:28px !important;
    height:28px !important;
    color:var(--primary,#3b82f6) !important;
  }
  .zalo-mobile-action-item-v711.danger .zalo-mobile-action-icon-v711{
    color:#ef4444 !important;
  }
  .zalo-mobile-action-item-v711.danger{color:#ef4444 !important;}

  :root[data-theme="dark"] .zalo-mobile-sheet-card-v711{
    background:#171717 !important;
    color:#f5f5f5 !important;
    border-color:rgba(255,255,255,.09) !important;
    box-shadow:0 -14px 38px rgba(0,0,0,.55) !important;
  }
  :root[data-theme="dark"] .zalo-mobile-reactions-v711{
    border-bottom-color:rgba(255,255,255,.09) !important;
  }
  :root[data-theme="dark"] .zalo-mobile-reaction-v711,
  :root[data-theme="dark"] .zalo-mobile-action-item-v711{
    color:#f5f5f5 !important;
  }
  :root[data-theme="dark"] .zalo-mobile-reaction-v711:active,
  :root[data-theme="dark"] .zalo-mobile-action-item-v711:active{
    background:rgba(255,255,255,.08) !important;
  }
}