@keyframes mb-attach-in{
  from{opacity:0;transform:translateY(10px) scale(.88)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mb-voice-in{
  from{opacity:0;transform:translateX(12px) scale(.96)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes mb-msg-in{
  from{opacity:0;transform:translateY(12px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mb-icon-pop{
  0%{transform:scale(.6);opacity:.4}
  70%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes mb-send-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent,#38bdf8) 45%,transparent)}
  100%{box-shadow:0 0 0 12px transparent}
}
.mb-anim-attach{
  animation:mb-attach-in .22s cubic-bezier(.2,.9,.25,1) both;
  transform-origin:bottom center;
}
.mb-anim-attach button:active{transform:scale(.94)}
.mb-anim-voice{animation:mb-voice-in .26s cubic-bezier(.2,.9,.25,1) both}
.mb-anim-msg{animation:mb-msg-in .3s cubic-bezier(.2,.85,.25,1) both}
.mb-anim-action{
  transition:transform .16s cubic-bezier(.2,.9,.25,1),box-shadow .2s,opacity .15s,filter .15s;
}
.mb-anim-action:active{transform:scale(.9)!important}
.mb-anim-action.mb-is-send{animation:mb-send-pulse .45s ease-out}
.mb-anim-icon{display:inline-grid;place-items:center;animation:mb-icon-pop .22s cubic-bezier(.2,.9,.25,1) both}
.mb-plus-spin{display:block;transition:transform .22s cubic-bezier(.2,.9,.25,1)}

/* full chat shell: header + msgs + composer locked */
.mb-ticket-chat{
  --mb-ticket-top: calc(4.35rem + env(safe-area-inset-top, 0px));
  --mb-ticket-bottom: calc(5.65rem + env(safe-area-inset-bottom, 0px));
  position: fixed;
  z-index: 40;
  inset-inline: 0;
  top: var(--mb-ticket-top);
  bottom: var(--mb-ticket-bottom);
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
  background: var(--color-bg);
  box-sizing: border-box;
}
@media (min-width:768px){
  .mb-ticket-chat{ max-width: 42rem; }
}
@media (min-width:1100px){
  .mb-ticket-chat{ max-width: 56rem; }
}
.mb-ticket-chat-head{
  flex: 0 0 auto;
  z-index: 2;
  padding: .15rem 0 .45rem;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border, #24344d) 70%, transparent);
}
.mb-ticket-chat-msgs{
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: .35rem .5rem;
  -webkit-overflow-scrolling: touch;
}
.mb-ticket-chat-composer{
  flex: 0 0 auto;
  z-index: 2;
  padding: .4rem 0 .15rem;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--color-border, #24344d) 70%, transparent);
}
.mb-ticket-chat-composer form{ border-top: 0 !important; padding-top: 0 !important; }
.mb-ticket-chat-composer textarea{
  direction: rtl !important;
  text-align: right !important;
}
.mb-sticker-pack{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:0;
  margin-bottom:.4rem;
  border:1px solid color-mix(in srgb,var(--color-border,#2a3d5c) 75%,transparent);
  border-radius:1.15rem;
  background:color-mix(in srgb,var(--color-bg,#07111f) 90%,transparent);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.mb-sticker-item{
  appearance:none;
  border:0;
  background:transparent;
  border-radius:0;
  padding:.55rem .35rem;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease;
  box-shadow:
    1px 0 0 0 color-mix(in srgb,var(--color-border,#2a3d5c) 55%,transparent),
    0 1px 0 0 color-mix(in srgb,var(--color-border,#2a3d5c) 55%,transparent);
}
.mb-sticker-item:nth-child(4n){
  box-shadow: 0 1px 0 0 color-mix(in srgb,var(--color-border,#2a3d5c) 55%,transparent);
}
.mb-sticker-item:hover{background:color-mix(in srgb,var(--color-accent,#2dd4bf) 10%,transparent)}
.mb-sticker-item:active{transform:scale(.94)}
.mb-sticker-view{display:grid;place-items:center;line-height:0;margin-inline:auto}
.mb-sticker-view lottie-player{display:block}
.mb-sticker-view[data-playing="0"]{opacity:.96}
.mb-gift-sticker-pick{max-height:14rem;overflow:auto}.mb-gift-sticker-pick .mb-sticker-view{width:52px;height:52px}