/* =========================================================
   ENW ATENDE V3
   Tema inspirado no WhatsApp Web
   Claro + Escuro
   ========================================================= */

/* =========================
   VARIÁVEIS - TEMA CLARO
   ========================= */

html.enw-atende {
  --enw-page: #ffffff;
  --enw-sidebar: #ffffff;
  --enw-sidebar-hover: #f5f6f6;
  --enw-sidebar-active: #f0f2f5;

  --enw-header: #f0f2f5;

  --enw-chat-bg: #efeae2;

  --enw-incoming: #ffffff;
  --enw-outgoing: #d9fdd3;

  --enw-composer-bar: #f0f2f5;
  --enw-input: #ffffff;

  --enw-text: #111b21;
  --enw-text-soft: #3b4a54;
  --enw-muted: #667781;

  --enw-border: #e9edef;

  --enw-green: #00a884;
  --enw-green-dark: #008069;

  --enw-blue-check: #53bdeb;
}

/* =========================
   VARIÁVEIS - TEMA ESCURO
   ========================= */

html.enw-atende.enw-dark {
  --enw-page: #111b21;
  --enw-sidebar: #111b21;
  --enw-sidebar-hover: #182229;
  --enw-sidebar-active: #202c33;

  --enw-header: #202c33;

  --enw-chat-bg: #0b141a;

  --enw-incoming: #202c33;
  --enw-outgoing: #005c4b;

  --enw-composer-bar: #202c33;
  --enw-input: #2a3942;

  --enw-text: #e9edef;
  --enw-text-soft: #d1d7db;
  --enw-muted: #8696a0;

  --enw-border: #2a3942;

  --enw-green: #00a884;
  --enw-green-dark: #00a884;

  --enw-blue-check: #53bdeb;
}

/* =========================
   TIPOGRAFIA
   ========================= */

html.enw-atende body,
html.enw-atende button,
html.enw-atende input,
html.enw-atende textarea {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}

/* =========================
   LISTA DE CONVERSAS
   ========================= */

html.enw-atende a.enw-conversation-link {
  border-radius: 0 !important;
  transition: background .12s ease !important;
}

html.enw-atende a.enw-conversation-link:hover {
  background: var(--enw-sidebar-hover) !important;
}

html.enw-atende a.enw-conversation-link.enw-current-conversation {
  background: var(--enw-sidebar-active) !important;
}

html.enw-atende a.enw-conversation-link img {
  border-radius: 50% !important;
}

/* =========================
   ÁREA DO CHAT
   ========================= */

html.enw-atende .enw-chat-stage {
  background-color: var(--enw-chat-bg) !important;

  background-image:
    radial-gradient(
      circle at 18px 18px,
      rgba(80,80,80,.045) 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 48px 36px,
      rgba(80,80,80,.03) 1px,
      transparent 1.4px
    ) !important;

  background-size:
    66px 66px,
    82px 82px !important;
}

html.enw-atende.enw-dark .enw-chat-stage {
  background-image:
    radial-gradient(
      circle at 18px 18px,
      rgba(255,255,255,.025) 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 48px 36px,
      rgba(255,255,255,.018) 1px,
      transparent 1.4px
    ) !important;
}

/* =========================
   MENSAGENS
   ========================= */

html.enw-atende .message-bubble-container {
  margin-bottom: 2px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* recebida */

html.enw-atende .left-bubble[data-bubble-name="text"] {
  background: var(--enw-incoming) !important;
  color: var(--enw-text) !important;

  border: none !important;

  border-radius:
    4px 9px 9px 9px !important;

  padding: 7px 9px !important;

  box-shadow:
    0 1px 1px rgba(11,20,26,.13) !important;
}

/* enviada */

html.enw-atende .right-bubble[data-bubble-name="text"] {
  background: var(--enw-outgoing) !important;
  color: var(--enw-text) !important;

  border: none !important;

  border-radius:
    9px 4px 9px 9px !important;

  padding: 7px 9px !important;

  box-shadow:
    0 1px 1px rgba(11,20,26,.13) !important;
}

html.enw-atende .left-bubble p,
html.enw-atende .right-bubble p {
  color: var(--enw-text) !important;
  line-height: 1.35 !important;
}

/* mídia */

html.enw-atende .message-bubble-container img {
  border-radius: 7px !important;
}

/* links */

html.enw-atende .message-bubble-container a {
  color: #027eb5 !important;
}

html.enw-atende.enw-dark .message-bubble-container a {
  color: #53bdeb !important;
}

/* =========================
   DATA - HOJE / ONTEM
   ========================= */

html.enw-atende .enw-date-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 5px 9px !important;

  border-radius: 7px !important;

  background: rgba(255,255,255,.90) !important;
  color: #54656f !important;

  border: 0 !important;

  font-size: 11px !important;
  font-weight: 500 !important;

  box-shadow:
    0 1px 1px rgba(11,20,26,.08) !important;
}

html.enw-atende.enw-dark .enw-date-chip {
  background: #182229 !important;
  color: #8696a0 !important;
}

/* =========================
   COMPOSITOR / RESPOSTA
   ========================= */

/*
  A V2 quebrava aqui porque pintava a caixa inteira
  e mantinha a altura grande do Chatwoot.
*/

html.enw-atende .reply-box {
  background: var(--enw-composer-bar) !important;

  border: none !important;
  border-radius: 0 !important;

  margin: 0 !important;

  padding: 7px 10px !important;

  box-shadow:
    0 -1px 0 var(--enw-border) !important;

  min-height: 0 !important;
}

/* editor */

html.enw-atende .reply-box .input {
  background: transparent !important;
}

html.enw-atende .reply-box [contenteditable="true"],
html.enw-atende .reply-box .ProseMirror {
  background: var(--enw-input) !important;

  color: var(--enw-text) !important;

  border-radius: 10px !important;

  padding: 10px 12px !important;

  min-height: 22px !important;
  max-height: 105px !important;

  overflow-y: auto !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}

html.enw-atende .reply-box .ProseMirror p {
  color: var(--enw-text) !important;
}

/* placeholder */

html.enw-atende
.reply-box
.ProseMirror
p.is-editor-empty:first-child::before {
  color: var(--enw-muted) !important;
}

/* abas responder / privada */

html.enw-atende .reply-box [role="tab"],
html.enw-atende .reply-box button {
  border-radius: 8px !important;
}

/* botão enviar */

html.enw-atende .reply-box button[class*="primary"] {
  background: var(--enw-green) !important;
}

/* tira texto técnico */
html.enw-atende .enw-hide-helper {
  display: none !important;
}

/* =========================
   LOGIN
   ========================= */

html.enw-atende.enw-login body {
  background: var(--enw-page) !important;
}

#enw-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-bottom: 20px;
}

#enw-login-brand .enw-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 12px;

  background: var(--enw-green);
  color: white;

  font-weight: 800;
  font-size: 13px;
}

#enw-login-brand strong {
  display: block;

  color: var(--enw-text);

  font-size: 21px;
  line-height: 1;
}

#enw-login-brand span {
  display: block;

  margin-top: 5px;

  color: var(--enw-muted);

  font-size: 11px;
}

/* =========================
   SCROLLBAR
   ========================= */

html.enw-atende * {
  scrollbar-width: thin;
  scrollbar-color: #aebac1 transparent;
}

html.enw-atende.enw-dark * {
  scrollbar-color: #374248 transparent;
}

html.enw-atende ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.enw-atende ::-webkit-scrollbar-thumb {
  background: #aebac1;
  border-radius: 999px;
}

html.enw-atende.enw-dark ::-webkit-scrollbar-thumb {
  background: #374248;
}

html.enw-atende ::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   ENW ATENDE - HORÁRIO ESTILO WHATSAPP
   ========================================================= */

html.enw-atende .enw-wa-import-time {
  display: inline-block !important;

  margin-left: 7px !important;

  color: var(--enw-muted) !important;

  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  opacity: .9;
}

/* horário dentro de mensagem enviada */
html.enw-atende
.right-bubble
.enw-wa-import-time {
  color: rgba(17,27,33,.58) !important;
}

html.enw-atende.enw-dark
.right-bubble
.enw-wa-import-time {
  color: rgba(233,237,239,.62) !important;
}

/* recebido */
html.enw-atende.enw-dark
.left-bubble
.enw-wa-import-time {
  color: #8696a0 !important;
}

/* esconde horário duplicado criado na importação */
html.enw-atende .enw-wa-duplicate-time {
  display: none !important;
}