/* The order conversation is a full-screen workspace. Its header, summary and
   messages share one scroll surface; the composer and close control stay put. */
#customerChatModal .chat-scroll-content{display:contents}

#customerChatModal[data-chat-mode="order"].modal-overlay{
  inset:var(--order-viewport-top,0px) 0 auto 0!important;
  width:100vw!important;
  height:var(--order-viewport-height,100dvh)!important;
  min-height:0!important;
  padding:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  background:#f6f7fa!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#customerChatModal[data-chat-mode="order"] .customer-chat-card{
  box-sizing:border-box!important;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#f6f7fa!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
}
#customerChatModal[data-chat-mode="order"] .chat-scroll-content{
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  scrollbar-color:#aab4c2 transparent!important;
  background:#f6f7fa!important;
}
#customerChatModal[data-chat-mode="order"] .customer-chat-card > .close{
  position:absolute!important;
  top:max(8px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  z-index:30!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.94)!important;
  color:#1b2635!important;
  font:400 29px/1 Arial,sans-serif!important;
  text-align:center!important;
  box-shadow:0 2px 10px rgba(20,38,28,.08)!important;
  transform:none!important;
}
#customerChatModal[data-chat-mode="order"] .customer-chat-card > .close:hover,
#customerChatModal[data-chat-mode="order"] .customer-chat-card > .close:focus-visible{
  background:#e9eeeb!important;
  outline:2px solid #f3a712!important;
  outline-offset:2px!important;
}
#customerChatModal[data-chat-mode="order"] .chat-head{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:70px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px 14px!important;
  width:min(100%,960px)!important;
  margin:0 auto!important;
  padding:17px max(18px,env(safe-area-inset-left)) 15px!important;
  border:0!important;
  border-bottom:1px solid #e6eaf0!important;
  background:#fff!important;
}
#customerChatModal[data-chat-mode="order"] .chat-brandline{
  grid-column:1/-1!important;
  margin:0!important;
  padding:0 52px 0 0!important;
  color:#19282e!important;
}
#customerChatModal[data-chat-mode="order"] .chat-brandline > span:first-child{
  font-size:12px!important;
  letter-spacing:.06em!important;
}
#customerChatModal[data-chat-mode="order"] .chat-brandline > span:first-child::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 8px 1px 0;
  border-radius:50%;
  background:#f3a712;
  box-shadow:0 0 0 3px rgba(243,167,18,.15);
}
#customerChatModal[data-chat-mode="order"] .chat-product-hero{
  display:block!important;
  grid-column:1!important;
  min-width:0!important;
  margin:0!important;
}
#customerChatModal[data-chat-mode="order"] .chat-product-media{
  width:70px!important;
  height:70px!important;
  border-radius:14px!important;
  background:#f7f8fa!important;
}
#customerChatModal[data-chat-mode="order"] .chat-product-media img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
#customerChatModal[data-chat-mode="order"] .chat-product-info{display:none!important}
#customerChatModal[data-chat-mode="order"] .order-location-option{
  box-sizing:border-box!important;
  grid-column:2!important;
  width:100%!important;
  max-width:none!important;
  min-height:58px!important;
  margin:0!important;
  padding:9px 12px!important;
  border-radius:12px!important;
}
#customerChatModal[data-chat-mode="order"] .order-location-option b{font-size:12px!important}
#customerChatModal[data-chat-mode="order"] .order-location-option small{font-size:10px!important}
#customerChatModal[data-chat-mode="order"] .order-location-option input{accent-color:#d99516!important}
#customerChatModal[data-chat-mode="order"] .order-location-option:has(input:checked){border-color:#e5bf74!important;background:#fff8e9!important}
#customerChatModal[data-chat-mode="order"] .chat-connection-status{
  grid-column:1/-1!important;
  margin:0!important;
}
#customerChatModal[data-chat-mode="order"] .chat-main-grid{
  box-sizing:border-box!important;
  display:block!important;
  width:min(100%,960px)!important;
  min-height:0!important;
  height:auto!important;
  margin:0 auto!important;
  overflow:visible!important;
  background:#f6f7fa!important;
}
#customerChatModal[data-chat-mode="order"] .chat-purchase-panel,
#customerChatModal[data-chat-mode="order"] .chat-purchase-panel.cart-order-panel{
  box-sizing:border-box!important;
  width:100%!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  padding:14px 18px!important;
}
#customerChatModal[data-chat-mode="order"] .chat-conversation{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  background:#f6f7fa!important;
}
#customerChatModal[data-chat-mode="order"] .customer-chat-thread{
  box-sizing:border-box!important;
  height:auto!important;
  max-height:none!important;
  min-height:max(340px,calc(var(--order-viewport-height,100dvh) - 270px))!important;
  overflow:visible!important;
  padding:20px clamp(16px,3vw,30px) 30px!important;
  background:radial-gradient(circle at 1px 1px,rgba(243,167,18,.045) 1px,transparent 0) 0 0/24px 24px,#f6f7fa!important;
}
#customerChatModal[data-chat-mode="order"] .customer-chat-form{
  box-sizing:border-box!important;
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:wrap!important;
  align-items:flex-end!important;
  gap:9px!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:12px max(18px,calc((100vw - 924px)/2)) max(12px,env(safe-area-inset-bottom))!important;
  border-top:1px solid #e6eaf0!important;
  background:#fff!important;
  box-shadow:0 -7px 22px rgba(20,38,28,.045)!important;
}
#customerChatModal[data-chat-mode="order"] .chat-compose-row,
#customerChatModal[data-chat-mode="order"] .chat-order-strip{display:none!important}
#customerChatModal[data-chat-mode="order"] .chat-attachment-preview:not([hidden]){
  order:-1!important;
  flex:0 0 100%!important;
  max-height:100px!important;
  overflow:auto!important;
}
#customerChatModal[data-chat-mode="order"] .chat-input-shell{
  flex:1 1 160px!important;
  min-width:0!important;
}
#customerChatModal[data-chat-mode="order"] #customerChatInput{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  max-height:132px!important;
  margin:0!important;
  padding:12px 32px 12px 14px!important;
  border:1px solid #e1e6ee!important;
  border-radius:14px!important;
  background:#fafbfc!important;
  color:#172033!important;
  font-size:16px!important;
  line-height:1.4!important;
  overflow-y:auto!important;
  resize:none!important;
}
#customerChatModal[data-chat-mode="order"] #customerChatInput:focus{
  outline:2px solid #f3a712!important;
  outline-offset:1px!important;
  background:#fff!important;
}
#customerChatModal[data-chat-mode="order"] .chat-composer-tools{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  margin:0!important;
}
#customerChatModal[data-chat-mode="order"] .chat-composer-tools #customerChatAttach{
  min-width:54px!important;
  min-height:48px!important;
  padding:0 5px!important;
  color:#a66a00!important;
  font-size:12px!important;
  font-weight:800!important;
}
#customerChatModal[data-chat-mode="order"] #customerChatSubmit{
  min-width:74px!important;
  min-height:48px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
@media(max-width:620px){
  #customerChatModal[data-chat-mode="order"] .chat-head{
    grid-template-columns:60px minmax(0,1fr)!important;
    gap:9px 10px!important;
    padding:12px max(12px,env(safe-area-inset-left))!important;
  }
  #customerChatModal[data-chat-mode="order"] .chat-product-media{width:60px!important;height:60px!important}
  #customerChatModal[data-chat-mode="order"] .order-location-option{min-height:54px!important;padding:7px 9px!important}
  #customerChatModal[data-chat-mode="order"] .chat-purchase-panel,
  #customerChatModal[data-chat-mode="order"] .chat-purchase-panel.cart-order-panel{padding:12px!important}
  #customerChatModal[data-chat-mode="order"] .customer-chat-thread{padding:16px 12px 24px!important}
  #customerChatModal[data-chat-mode="order"] .customer-chat-form{
    gap:5px!important;
    padding:9px 10px max(9px,env(safe-area-inset-bottom))!important;
  }
  #customerChatModal[data-chat-mode="order"] .chat-composer-tools #customerChatAttach{min-width:46px!important;font-size:11px!important}
  #customerChatModal[data-chat-mode="order"] #customerChatSubmit{min-width:64px!important;padding:0 8px!important}
}
@media(max-width:350px){
  #customerChatModal[data-chat-mode="order"] .chat-brandline > span:first-child{font-size:10px!important}
  #customerChatModal[data-chat-mode="order"] .order-location-option small{font-size:8px!important}
  #customerChatModal[data-chat-mode="order"] .chat-composer-tools #customerChatAttach{min-width:42px!important;font-size:10px!important}
  #customerChatModal[data-chat-mode="order"] #customerChatSubmit{min-width:56px!important;font-size:11px!important}
}