/* v212 — fast, camera-first private chat. Existing store colours are retained. */
#customerChatModal[data-chat-mode="question"]{
  --msg-blue:#172033;
  --msg-blue-deep:#172033;
  --msg-bg:#f0f2f5;
}

/* Header labels are visibly centred in every viewport. */
#customerChatModal .chat-mode-header .chat-action-pill{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
}
#customerChatModal .chat-mode-header .chat-action-pill:before{display:none!important}

/* The selected Message tab, sent messages, and Send use the View-product navy. */
#customerChatModal[data-chat-mode="question"] .chat-bubble.customer,
#customerChatModal[data-chat-mode="question"] .chat-bubble.customer p{
  background:#172033!important;
  color:#fff!important;
}
#customerChatModal[data-chat-mode="question"] .chat-bubble.seller:before,
#customerChatModal[data-chat-mode="question"] .chat-bubble-row:has(.chat-bubble.customer)::after{
  background-color:#172033!important;
  color:#172033!important;
}
#customerChatModal[data-chat-mode="question"] .messenger-quick-replies button{
  border-color:rgba(23,32,51,.26)!important;
  color:#172033!important;
}
#customerChatModal[data-chat-mode="question"] .messenger-quick-replies button:hover,
#customerChatModal[data-chat-mode="question"] .messenger-quick-replies button:focus-visible{
  border-color:#172033!important;
  background:#eef0f4!important;
}
#customerChatModal[data-chat-mode="question"] .chat-composer-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
#customerChatModal[data-chat-mode="question"] #customerChatAttach{
  width:auto!important;
  min-width:88px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 14px!important;
  border:1px solid #172033!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#172033!important;
  font:800 12px/1 system-ui,sans-serif!important;
  box-shadow:none!important;
}
#customerChatModal[data-chat-mode="question"] #customerChatAttach:after{content:none!important}
#customerChatModal[data-chat-mode="question"] #customerChatSubmit{
  width:auto!important;
  min-width:88px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 16px!important;
  border:1px solid #172033!important;
  border-radius:12px!important;
  background:#172033!important;
  color:#fff!important;
  font:800 12px/1 system-ui,sans-serif!important;
  box-shadow:0 4px 10px rgba(23,32,51,.20)!important;
}
#customerChatModal[data-chat-mode="question"] #customerChatSubmit:after{content:none!important}
#customerChatModal[data-chat-mode="question"] #customerChatSubmit:disabled{
  background:#a8afb9!important;
  border-color:#a8afb9!important;
}

/* Avoid expensive blur/compositing work in the frequently opened chat sheet. */
#customerChatModal .customer-chat-card,
#customerChatModal .chat-mode-header{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#customerChatModal .chat-action-pill,
#customerChatModal .customer-chat-card{will-change:auto!important}

@media(max-width:420px){
  #customerChatModal[data-chat-mode="question"] #customerChatAttach,
  #customerChatModal[data-chat-mode="question"] #customerChatSubmit{min-width:82px!important;padding-inline:12px!important}
}