/* =========================================================
   Dzia-dekBomba Shop — FINAL TICKET UI
   Loaded LAST so it wins against older panel/mobile rules.
   ========================================================= */
#messageForm.ticket-form,
#messageForm.ticket-form *{box-sizing:border-box}

/* --- composer: desktop --- */
#messageForm.ticket-form{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  width:100%!important;
  padding:12px 14px 10px!important;
  margin:0!important;
  border-top:1px solid rgba(255,255,255,.075)!important;
  background:linear-gradient(180deg,rgba(9,12,18,.96),rgba(7,10,15,.99))!important;
}
#messageForm .ticket-attachments-preview{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  max-height:84px!important;
  overflow:auto!important;
}
#messageForm .ticket-attachments-preview[hidden]{display:none!important}
#messageForm .ticket-compose{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 100px!important;
  align-items:stretch!important;
  gap:9px!important;
  width:100%!important;
  margin:0!important;
}

/* Exactly one attach button; kill stray pseudo icons from older CSS. */
#messageForm .ticket-compose .ticket-attach-button ~ .ticket-attach-button,
#messageForm .ticket-compose #attachButton ~ #attachButton{display:none!important}
#messageForm #attachButton::after{content:none!important;display:none!important}
#messageForm .ticket-attach-button,
#messageForm #attachButton{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#121822,#0e141d)!important;
  color:#dce3ef!important;
  font-size:0!important;
  line-height:0!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.16)!important;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease!important;
}
#messageForm .ticket-attach-button::before,
#messageForm #attachButton::before{
  content:""!important;
  display:block!important;
  width:20px!important;height:20px!important;
  background:currentColor!important;
  -webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.44a2 2 0 1 1-2.83-2.83l8.48-8.48"/%3E%3C/svg%3E') center/contain no-repeat!important;
  mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.44a2 2 0 1 1-2.83-2.83l8.48-8.48"/%3E%3C/svg%3E') center/contain no-repeat!important;
}
#messageForm .ticket-attach-button:hover:not(:disabled),
#messageForm .ticket-attach-button:focus-visible:not(:disabled){
  border-color:rgba(124,108,255,.52)!important;
  background:linear-gradient(145deg,#171f2d,#111823)!important;
  color:#aaa0ff!important;
  transform:translateY(-1px)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(124,108,255,.10),0 10px 26px rgba(0,0,0,.18)!important;
}
#messageForm .ticket-attach-button:disabled{opacity:.45!important;cursor:not-allowed!important}

#messageForm #messageInput{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  max-height:130px!important;
  resize:none!important;
  margin:0!important;
  padding:13px 14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:#10161f!important;
  color:#f3f6fb!important;
  outline:none!important;
  font-size:13px!important;
  line-height:1.45!important;
  overflow:auto!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
#messageForm #messageInput:focus{
  border-color:rgba(124,108,255,.62)!important;
  box-shadow:0 0 0 3px rgba(124,108,255,.09),inset 0 1px rgba(255,255,255,.035)!important;
}
#messageForm #messageInput::placeholder{color:#7d8798!important;opacity:1!important}

#messageForm .ticket-send-button,
#messageForm #sendButton{
  width:100px!important;
  min-width:100px!important;
  max-width:100px!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid rgba(167,154,255,.22)!important;
  border-radius:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  background:linear-gradient(135deg,#766dff,#5d8fff)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:850!important;
  box-shadow:0 12px 24px rgba(78,91,210,.22)!important;
}
#messageForm #sendButton:not(:disabled):hover{filter:brightness(1.06)!important;transform:translateY(-1px)!important}
#messageForm #sendButton:disabled{opacity:.48!important;cursor:not-allowed!important;box-shadow:none!important}
#messageForm .ticket-send-button span{font-size:14px!important}
#messageForm .ticket-compose-hint{
  display:block!important;
  margin:0 2px!important;
  color:#6e798a!important;
  font-size:10px!important;
  line-height:1.35!important;
}
#messageForm #attachmentInput{display:none!important}

/* --- readable order/embed message --- */
#messages .ticket-message.bot,
#messages .ticket-message.staff{
  width:min(100%,760px)!important;
  max-width:100%!important;
}
#messages .ticket-message.bot .ticket-bubble{
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
#messages .website-order-embed{
  width:100%!important;
  max-width:760px!important;
  margin:0 0 18px!important;
  padding:22px!important;
  border:1px solid rgba(88,101,242,.38)!important;
  border-left:4px solid #6875ff!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#252a3b,#171b28 72%)!important;
  color:#f5f7fb!important;
  box-shadow:0 20px 44px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035)!important;
}
#messages .website-order-embed__brand{font-size:12px!important;color:#b9c1cf!important}
#messages .website-order-embed__logo{width:32px!important;height:32px!important;font-size:11px!important}
#messages .website-order-embed h2{margin:14px 0 11px!important;font-size:20px!important;line-height:1.2!important;color:#fff!important;letter-spacing:-.02em!important}
#messages .website-order-embed p{margin:10px 0!important;color:#e0e4eb!important;font-size:14px!important;line-height:1.65!important}
#messages .website-order-embed__fields{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:18px!important}
#messages .website-order-embed__fields > div{padding:12px 13px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:12px!important;background:rgba(8,12,18,.24)!important}
#messages .website-order-embed small{margin-bottom:5px!important;color:#9da7b7!important;font-size:11px!important}
#messages .website-order-embed__fields strong{font-size:13px!important;line-height:1.45!important;color:#f3f5f9!important}
#messages .website-order-embed__actions{margin-top:18px!important;padding-top:15px!important;font-size:12px!important;color:#dfe4eb!important}
#messages .website-order-embed__actions small{font-size:11px!important;color:#f3f5f9!important}

/* --- cleaner messages --- */
#messages .ticket-message{max-width:min(78%,760px)!important;margin-bottom:18px!important}
#messages .ticket-message.customer{margin-left:auto!important}
#messages .ticket-message .ticket-meta{margin-bottom:7px!important;font-size:11px!important;color:#7f899a!important}
#messages .ticket-bubble{padding:12px 14px!important;border-radius:15px!important;background:#141b25!important;border:1px solid rgba(255,255,255,.055)!important;line-height:1.55!important;font-size:13px!important}
#messages .ticket-message.customer .ticket-bubble{background:linear-gradient(135deg,#685dff,#5865f2)!important;border-color:rgba(255,255,255,.08)!important}

/* --- mobile: real chat composer --- */
@media (max-width:700px){
  #messageForm.ticket-form{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    padding:9px 10px 8px!important;
    gap:7px!important;
    background:linear-gradient(180deg,rgba(7,10,15,.92),rgba(7,10,15,.99))!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  #messageForm .ticket-compose{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    gap:7px!important;
  }
  #messageForm .ticket-attach-button,
  #messageForm #attachButton{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;border-radius:13px!important}
  #messageForm .ticket-attach-button::before,
  #messageForm #attachButton::before{width:18px!important;height:18px!important}
  #messageForm #messageInput{height:46px!important;min-height:46px!important;max-height:110px!important;padding:12px 12px!important;font-size:13px!important;border-radius:13px!important}
  #messageForm .ticket-send-button,
  #messageForm #sendButton{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;border-radius:13px!important;font-size:0!important}
  #messageForm #sendButton span{font-size:17px!important}
  #messageForm .ticket-compose-hint{font-size:9px!important;margin:0 1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #messageForm .ticket-attachments-preview{max-height:76px!important}
  #messages .ticket-message{max-width:94%!important}
  #messages .ticket-message.bot{max-width:100%!important;width:100%!important}
  #messages .website-order-embed{max-width:none!important;padding:17px!important;border-radius:15px!important}
  #messages .website-order-embed h2{font-size:18px!important}
  #messages .website-order-embed p{font-size:13px!important;line-height:1.58!important}
  #messages .website-order-embed__fields{grid-template-columns:1fr!important}
  #messages .website-order-embed__fields > div{padding:11px 12px!important}
  #messages .website-order-embed__fields strong{font-size:13px!important}
}
@media (max-width:420px){
  #messageForm .ticket-compose{grid-template-columns:44px minmax(0,1fr) 44px!important;gap:6px!important}
  #messageForm .ticket-attach-button,
  #messageForm #attachButton,
  #messageForm .ticket-send-button,
  #messageForm #sendButton{width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;border-radius:12px!important}
  #messageForm #messageInput{height:44px!important;min-height:44px!important;font-size:12.5px!important}
  #messages .website-order-embed{padding:15px!important}
}