/*
 * Camada visual compartilhada do Chat ao vivo.
 * Não altera app.js, APIs, relatórios, dados, permissões ou automações.
 * Virando a Chave mantém o seu shell próprio em virando-admin-shell.css.
 */

/* Chat ocupa a área de trabalho, sem cartões ou bordas externas. */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #main-content.main.chat-mode,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #main-content.main.crm-chat-mode {
  padding: 0 !important;
  overflow: hidden !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat {
  box-sizing: border-box !important;
  padding: 0 !important;
  background: #ffffff !important;
  font-family: Inter, "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-layout {
  overflow: hidden !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Lista de conversas */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar {
  width: 356px !important;
  min-width: 302px !important;
  background: #ffffff !important;
  border-right: 1px solid #e1e3e5 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar-header {
  min-height: 68px !important;
  padding: 18px 18px 10px !important;
  background: #ffffff !important;
  border: 0 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar-title {
  color: #202223 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar-status,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-empty,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sync-empty {
  color: #6d7175 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar-status {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #chat-connection-filter {
  min-height: 0 !important;
  padding: 4px 16px 3px !important;
  gap: 6px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #chat-connection-filter > div > button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid #c9cccf !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #202223 !important;
  box-shadow: 0 1px 1px rgba(32, 34, 35, .05) !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #conn-dropdown,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-type-menu {
  overflow: hidden !important;
  padding: 4px !important;
  background: #ffffff !important;
  border: 1px solid #d2d5d8 !important;
  border-radius: 9px !important;
  box-shadow: 0 10px 28px rgba(32, 34, 35, .16) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #conn-dropdown label,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-type-menu button {
  color: #202223 !important;
  border-radius: 6px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #conn-dropdown label:hover,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-type-menu button:hover {
  background: #f6f6f7 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar > div[style*="padding:8px 12px 0"] {
  padding: 7px 16px !important;
  gap: 6px !important;
  border-bottom: 1px solid #f1f1f1 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-unread-toggle, .wa-sound-toggle, .wa-crmf-toggle, .wa-type-toggle) {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid #c9cccf !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #202223 !important;
  box-shadow: 0 1px 1px rgba(32, 34, 35, .05) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-sound-toggle, .wa-crmf-toggle-compact) {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-unread-toggle span {
  min-width: 17px !important;
  padding: 1px 5px !important;
  border-radius: 5px !important;
  background: #f1f1f1 !important;
  color: #5c5f62 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-unread-toggle.active,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-type-toggle.active,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-crmf-toggle.aberto {
  border-color: #2c6ecb !important;
  background: #ebf5ff !important;
  color: #1a5eac !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-crm-filters {
  gap: 6px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid #f1f1f1 !important;
  background: #fafafa !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-crm-filter,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#chat-hoje-btn, #chat-datefilter-trigger, #chat-datefilter-clear) {
  min-height: 31px !important;
  border: 1px solid #d2d5d8 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #5c5f62 !important;
  font-size: 11.5px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-search-wrap {
  padding: 10px 16px 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e1e3e5 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-search-box {
  min-height: 38px !important;
  padding: 0 11px !important;
  border: 1px solid #c9cccf !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #6d7175 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-search-box:focus-within,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-input:focus {
  border-color: #2c6ecb !important;
  box-shadow: 0 0 0 1px #2c6ecb !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-search-input,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-input {
  color: #202223 !important;
  font-family: inherit !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-search-input, .wa-input)::placeholder {
  color: #8c9196 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-conv-list {
  background: #ffffff !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-conv-list::-webkit-scrollbar {
  width: 8px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-conv-list::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  background: #c9cccf !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-item {
  min-height: 74px !important;
  box-sizing: border-box !important;
  gap: 11px !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f1f1 !important;
  background: #ffffff !important;
  transition: background .12s ease, box-shadow .12s ease !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-item:hover {
  background: #f6f6f7 !important;
}

/* A conversa selecionada não pode se perder na lista. */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-item.active,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-item.active.crm-conv-unread {
  border-bottom-color: #b9d5f5 !important;
  background: #dbeafe !important;
  box-shadow: inset 4px 0 0 #1f6feb, inset 0 0 0 1px #93c5fd !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-item.crm-conv-unread {
  border-left: 3px solid #2c6ecb !important;
  box-shadow: inset 3px 0 0 #2c6ecb !important;
  animation: none !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-item.active :is(.conv-name, .conv-time, .conv-last) {
  color: #163f73 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-name {
  overflow: hidden !important;
  color: #202223 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.conv-time, .conv-last) {
  color: #6d7175 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-time { font-size: 11px !important; }
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-last { font-size: 12px !important; line-height: 1.4 !important; }

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .conv-unread-badge {
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  background: #2c6ecb !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Conversa */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-main, .wa-welcome) {
  background: #ffffff !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-welcome {
  color: #6d7175 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-welcome h3,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-convo-name {
  color: #202223 !important;
  font-weight: 700 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-convo-header {
  min-height: 68px !important;
  box-sizing: border-box !important;
  gap: 11px !important;
  padding: 10px 16px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #e1e3e5 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-convo-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: #eaf3ff !important;
  color: #1a5eac !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-convo-name {
  overflow: hidden !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-convo-sub {
  overflow: hidden !important;
  color: #6d7175 !important;
  font-size: 11.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-header-btn, .wa-sound-toggle, .wa-crmf-toggle) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid #c9cccf !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #5c5f62 !important;
  box-shadow: 0 1px 1px rgba(32, 34, 35, .05) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-header-btn, .wa-sound-toggle, .wa-crmf-toggle):hover {
  border-color: #8c9196 !important;
  background: #f6f6f7 !important;
  color: #202223 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-leadctl-sel, #wa-header-label-select, #chat-direct-conn-select, #chat-group-conn-select) {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 34px 0 13px !important;
  border: 1px solid #c9cccf !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #202223 !important;
  box-shadow: 0 1px 1px rgba(32, 34, 35, .05) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}

/* Responsável e etiqueta ficam discretos, mas continuam selects nativos. */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#wa-header-label-select, .wa-leadctl-sel.wa-leadctl-owner-icon) {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: transparent !important;
  font-size: 1px !important;
  line-height: 1 !important;
  text-indent: -9999px !important;
  cursor: pointer;
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-leadctl-sel.wa-leadctl-owner-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c5f62' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 21a7 7 0 0 1 14 0'/%3E%3C/svg%3E") !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #wa-header-label-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c5f62' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 11 23l-8.59-8.59a2 2 0 0 1 0-2.82L11 3h8a2 2 0 0 1 2 2v8a2 2 0 0 1-.41 1.41Z'/%3E%3Ccircle cx='16' cy='8' r='1'/%3E%3C/svg%3E") !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#wa-header-label-select, .wa-leadctl-sel.wa-leadctl-owner-icon):hover {
  border-color: #8c9196 !important;
  background-color: #f6f6f7 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#wa-header-label-select, .wa-leadctl-sel.wa-leadctl-owner-icon):focus-visible {
  outline: 2px solid #2c6ecb !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#wa-header-label-select, .wa-leadctl-sel.wa-leadctl-owner-icon) option {
  color: #202223 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-indent: 0 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-messages, .wa-welcome) {
  background: var(--vac-chat-background, #ffffff) !important;
  background-image: none !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-messages {
  padding: 14px 16px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-messages::-webkit-scrollbar-thumb {
  border: 2px solid var(--vac-chat-background, #ffffff) !important;
  border-radius: 8px !important;
  background: #c9cccf !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg {
  max-width: 78% !important;
  margin-bottom: 5px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-bubble {
  padding: 10px 13px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: var(--vac-chat-font-size, 13.5px) !important;
  line-height: var(--vac-chat-font-line-height, 1.48) !important;
  box-shadow: none !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg.in .chat-bubble {
  border: 0 !important;
  border-bottom-left-radius: 3px !important;
  background: #ffffff !important;
  color: #202223 !important;
  box-shadow: 0 1px 2px rgba(32, 34, 35, .12) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg.out:not(.ai-sent) .chat-bubble {
  border: 1px solid var(--vac-chat-outgoing, #2c6ecb) !important;
  border-bottom-right-radius: 3px !important;
  background: var(--vac-chat-outgoing, #2c6ecb) !important;
  color: #ffffff !important;
}

/* IA sempre é laranja; a cor escolhida vale apenas para mensagens humanas. */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg.out.ai-sent .chat-bubble {
  border-color: #f17b25 !important;
  background: #f17b25 !important;
  color: #ffffff !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg .msg-meta span[style] {
  color: #6d7175 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg.out .msg-meta span[style] {
  color: rgba(255, 255, 255, .78) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-date-sep span {
  border: 1px solid #e1e3e5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #6d7175 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 9px !important;
}

/* Estado e comandos da IA */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #ai-toolbar {
  min-height: 44px !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-top: 1px solid #e1e3e5 !important;
  border-bottom: 1px solid #e1e3e5 !important;
  background: #ffffff !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#ai-chatbot-status, #ai-toolbar .btn-sidebar-action, #ai-chatbot-assumir-btn, #ai-chatbot-toggle) {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid #c9cccf !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #202223 !important;
  box-shadow: 0 1px 1px rgba(32, 34, 35, .05) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #ai-chatbot-status.is-paused,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #ai-chatbot-toggle[data-state="paused"] {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #b45309 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #ai-chatbot-status.is-active,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat #ai-chatbot-toggle[data-state="active"] {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #167a45 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-control {
  position: relative !important;
  z-index: 70 !important;
  flex: 0 0 auto !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-trigger {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #a8adb3 !important;
  cursor: pointer !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-trigger:hover,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-trigger[aria-expanded="true"] {
  background: #f1f1f1 !important;
  color: #5c5f62 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-pencil {
  width: 16px !important;
  height: 16px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-menu {
  width: 236px !important;
  padding: 14px !important;
  border: 1px solid #d2d5d8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(32, 34, 35, .18) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-section-divider {
  height: 1px !important;
  margin: 13px 0 12px !important;
  background: #e1e3e5 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.chat-color-menu-title, .chat-background-title) {
  color: #202223 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-options button.selected {
  border-color: #202223 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#chat-color-custom, #chat-background-custom) {
  width: 31px !important;
  height: 25px !important;
  border: 1px solid #d2d5d8 !important;
  border-radius: 7px !important;
}

/* Personalização individual do Chat: a preferência é salva por cliente e atendente. */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar-header {
  position: relative !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-menu {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  right: 0 !important;
  display: none !important;
  z-index: 90 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-menu.open {
  display: block !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-menu-title {
  margin-bottom: 10px !important;
  color: #202223 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-options {
  display: flex !important;
  gap: 7px !important;
  margin-bottom: 12px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-options button {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-options button span {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  border-radius: 50% !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-options button:hover,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-options button.selected {
  border-color: #202223 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-color-custom-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  border-top: 1px solid #e1e3e5 !important;
  color: #6d7175 !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-background-custom-label {
  padding-top: 0 !important;
  border-top: 0 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-background-options button span {
  box-shadow: inset 0 0 0 1px rgba(32, 34, 35, .18) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options button {
  min-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px 4px !important;
  border: 1px solid #d2d5d8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #5c5f62 !important;
  cursor: pointer !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options button:hover,
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options button.selected {
  border-color: #2c6ecb !important;
  background: #f0f5ff !important;
  color: #202223 !important;
  box-shadow: inset 0 0 0 1px #2c6ecb !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-preview {
  font-weight: 700 !important;
  line-height: 1 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options button:nth-child(1) .chat-font-size-preview { font-size: 12px !important; }
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options button:nth-child(2) .chat-font-size-preview { font-size: 14px !important; }
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-options button:nth-child(3) .chat-font-size-preview { font-size: 16px !important; }

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-font-size-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Compositor */
body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(#chat-direct-conn-bar, #chat-group-conn-bar, #chat-tpl-panel, #chat-qs-panel) {
  border-top-color: #e1e3e5 !important;
  background: #ffffff !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-input-bar {
  gap: 8px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border-top: 1px solid #e1e3e5 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-input {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid #c9cccf !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-tpl-btn, .wa-input-bar .wa-header-btn) {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid #c9cccf !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #5c5f62 !important;
  box-shadow: 0 1px 1px rgba(32, 34, 35, .05) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat :is(.wa-tpl-btn, .wa-input-bar .wa-header-btn):hover {
  border-color: #8c9196 !important;
  background: #f6f6f7 !important;
  color: #202223 !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-send-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  background: #202223 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(32, 34, 35, .18) !important;
}

body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-send-btn:hover:not(:disabled) {
  background: #3f4245 !important;
  box-shadow: 0 2px 5px rgba(32, 34, 35, .18) !important;
}

@media (max-width: 860px) {
  body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-sidebar {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[class*="client-"]:not(.client-virandoachave).wa-thread-open #screen-dashboard #tab-chat :is(.wa-main, #wa-convo, .wa-messages) {
    background: var(--vac-chat-background, #ffffff) !important;
  }

  body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .wa-messages {
    padding: 12px 10px !important;
  }

  body[class*="client-"]:not(.client-virandoachave) #screen-dashboard #tab-chat .chat-msg {
    max-width: 90% !important;
  }
}