/* styles.css - CentralWP / Resolver Digital Mandated Palette Design System */

:root {
  --color-cabecalho: #173F67;
  --color-menu-principal: #102E4A;
  --color-colunas-laterais: #C9E0F1;
  --color-area-central: #EAF4FB;
  --color-fundo-conversa: #EDF6FC;
  --color-cards-conteudo: #F8FBFE;
  --color-item-selecionado: #2F80C2;
  --color-bordas-divisores: #AFC9DC;
  --color-texto-principal: #102A43;
  --color-texto-secundario: #627D98;
  --color-botao-principal: #F7931E;
  --color-estado-positivo: #23A36D;
  --color-automacao-ia: #7B4BC4;
  --color-erro-encerramento: #D95562;
  --color-atencao: #F4C542;
}

/* Typography Classes */
.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-area-central);
  color: var(--color-texto-principal);
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Montserrat', sans-serif;
}

/* Dynamic Tag Palette Classes (Readable over light cards & dark backgrounds) */
.tag-style-blue {
  background-color: #EAF4FB;
  color: #173F67;
  border: 1px solid #AFC9DC;
}
.tag-style-orange {
  background-color: #FFF6ED;
  color: #C25E00;
  border: 1px solid #F7931E;
}
.tag-style-purple {
  background-color: #F5EEFC;
  color: #7B4BC4;
  border: 1px solid #D3B3F4;
}
.tag-style-yellow {
  background-color: #FEFDF0;
  color: #926C05;
  border: 1px solid #F4C542;
}
.tag-style-red {
  background-color: #FDF2F3;
  color: #D95562;
  border: 1px solid #F3B0B7;
}
.tag-style-emerald {
  background-color: #EEF9F4;
  color: #23A36D;
  border: 1px solid #8BE3BD;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(16, 42, 67, 0.04);
}
::-webkit-scrollbar-thumb {
  background: #AFC9DC;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2F80C2;
}

/* A lista de conversas precisa de um trilho mais visível para facilitar a
   navegação quando há muitos atendimentos na mesma tela. */
#conversations-list-container {
  scrollbar-color: #5B8DBD rgba(16, 42, 67, 0.10);
  scrollbar-width: auto;
}
#conversations-list-container::-webkit-scrollbar {
  width: 8px;
}
#conversations-list-container::-webkit-scrollbar-track {
  background: rgba(16, 42, 67, 0.10);
  border-radius: 9999px;
}
#conversations-list-container::-webkit-scrollbar-thumb {
  background: #5B8DBD;
  border: 1px solid rgba(16, 42, 67, 0.18);
  border-radius: 9999px;
}
#conversations-list-container::-webkit-scrollbar-thumb:hover {
  background: #2F80C2;
}

/* Chat Background Pattern with Tech Nodes Watermark (STRETCHED/COVER cleanly) */
.chat-bg-pattern {
  background-color: #EDF6FC;
  background-image: url('/assets/chat-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Panel Background Pattern for White/Light Surfaces */
.panel-tech-bg {
  background-color: #F8FBFE;
  background-image: url('/assets/panel-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hide Scrollbar for horizontal scroll pills */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Primary Brand Action Button - Laranja #F7931E */
.btn-brand-primary {
  background-color: var(--color-botao-principal);
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-brand-primary:hover {
  background-color: #E08200;
}

/* Selected Conversation Highlight - #2F80C2 with #F7931E Left Border */
.conversation-active {
  background-color: #2F80C2 !important;
  color: #FFFFFF !important;
  border-left: 5px solid #F7931E !important;
}

/* Message Sent Bubble - #173F67 or #2F80C2 */
.bubble-sent {
  background-color: #173F67;
  color: #FFFFFF;
}

/* Message Received Bubble - #F8FBFE */
.bubble-received {
  background-color: #F8FBFE;
  color: #102A43;
  border: 1px solid #AFC9DC;
}

/* O shell compacto mantém os mesmos IDs e ações do modo expandido, mas
   reduz os indicadores ao ícone para não criar uma coluna estreita ilegível. */
.sidebar-collapsed #header-whatsapp-status,
.sidebar-collapsed #header-n8n-status,
.sidebar-collapsed #header-samantha-status {
  display: none !important;
}

/* Player de áudio da conversa — sem a caixa azul escura que competia com a
   bolha. A cor de ação segue o laranja principal da Resolver Digital. */
.audio-progress {
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  cursor: pointer;
  outline: none;
}

.audio-progress-agent {
  background: rgba(255, 255, 255, 0.28);
}

.audio-progress-received {
  background: #AFC9DC;
}

.audio-progress::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  background: #F7931E;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(16, 42, 67, 0.28);
}

.audio-progress::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  background: #F7931E;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(16, 42, 67, 0.28);
}

/* Disabled Future Feature styling */
.feature-disabled, [aria-disabled="true"] {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  position: relative;
  user-select: none;
}

.feature-disabled *, [aria-disabled="true"] * {
  pointer-events: none !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Disabled Future Feature styling */
.feature-disabled, [aria-disabled="true"] {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  position: relative;
  user-select: none;
}

.feature-disabled *, [aria-disabled="true"] * {
  pointer-events: none !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

.pulse-subtle {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Transcrição de áudio: limitar em até 4 linhas com reticências */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   ===== TEMA ESCURO =====
   Camada de override central: o app inteiro usa classes arbitrárias do
   Tailwind (bg-[#...], text-[#...]) espalhadas pelos templates JS, então o
   tema escuro é aplicado por seletores de atributo escopados em html.dark.
   O tema claro continua sendo o padrão e permanece intocado.

   Níveis de superfície:
     #0F1B2A  fundo da página          (era #EAF4FB / #EDF6FC / #F7F9FC)
     #16283C  cartões                  (era #F8FBFE / #F8FAFC)
     #1D3149  elementos elevados       (era white — inputs, botões, chips)
     #12233A  colunas laterais         (era #C9E0F1)
   Texto:  #E4EDF5 principal | #9DB2C8 secundário | bordas #2C4258
   Cores de ação/status (laranja/azul/verde/vermelho) NÃO são alteradas.
   A sidebar (#main-sidebar) já é escura: overrides de fundo a excluem.
   ========================================================================== */

/* --- Variáveis institucionais (body e componentes que usam var()) --- */
html.dark {
  --color-colunas-laterais: #12233A;
  --color-area-central: #0F1B2A;
  --color-fundo-conversa: #0F1B2A;
  --color-cards-conteudo: #16283C;
  --color-bordas-divisores: #2C4258;
  --color-texto-principal: #E4EDF5;
  --color-texto-secundario: #9DB2C8;
  color-scheme: dark;
}

/* --- Fundos: página --- */
html.dark [class*="bg-[#EAF4FB]"]:not(#main-sidebar *),
html.dark [class*="bg-[#EDF6FC]"]:not(#main-sidebar *),
html.dark [class*="bg-[#F7F9FC]"]:not(#main-sidebar *) {
  background-color: #0F1B2A !important;
}

/* --- Fundos: cartões --- */
html.dark [class*="bg-[#F8FBFE]"]:not(#main-sidebar *),
html.dark [class*="bg-[#F8FAFC]"]:not(#main-sidebar *) {
  background-color: #16283C !important;
}

/* --- Fundos: elementos elevados (inputs, botões brancos, chips) --- */
html.dark [class*="bg-white"]:not([class*="bg-white/"]):not(#main-sidebar *) {
  background-color: #1D3149 !important;
}

/* --- Fundos: colunas laterais --- */
html.dark [class*="bg-[#C9E0F1]"]:not(#main-sidebar *) {
  background-color: #12233A !important;
}

/* --- Hovers de superfícies claras (especificidade maior via :hover) --- */
html.dark [class*="hover:bg-white"]:not(#main-sidebar *):hover,
html.dark [class*="hover:bg-[#EAF4FB]"]:not(#main-sidebar *):hover,
html.dark [class*="hover:bg-[#F8FBFE]"]:not(#main-sidebar *):hover,
html.dark [class*="hover:bg-[#EDF6FC]"]:not(#main-sidebar *):hover,
html.dark [class*="hover:bg-[#C9E0F1]"]:not(#main-sidebar *):hover {
  background-color: #24405E !important;
}

/* --- Textos escuros -> claros --- */
html.dark [class*="text-[#102A43]"] { color: #E4EDF5 !important; }
html.dark [class*="text-[#173F67]"] { color: #CBDCEB !important; }
html.dark [class*="text-[#627D98]"] { color: #9DB2C8 !important; }
html.dark [class*="placeholder-[#627D98]"]::placeholder { color: #7E93A9 !important; }

/* --- Bordas claras -> escuras --- */
html.dark [class*="border-[#AFC9DC]"]:not(#main-sidebar *),
html.dark [class*="border-[#C9E0F1]"]:not(#main-sidebar *),
html.dark [class*="border-[#CEE1ED]"]:not(#main-sidebar *) {
  border-color: #2C4258 !important;
}
html.dark [class*="ring-[#AFC9DC]"]:not(#main-sidebar *) {
  --tw-ring-color: #2C4258 !important;
}
/* bg-[#AFC9DC] usado como divisor/pill neutro */
html.dark [class*="bg-[#AFC9DC]"]:not(#main-sidebar *) {
  background-color: #2C4258 !important;
}
html.dark [class*="text-[#AFC9DC]"]:not(#main-sidebar *) { color: #6E8CA6 !important; }

/* --- Pastéis de status -> versões escuras translúcidas (mantém a cor de
       ação/estado do texto/ícone, só escurece o fundo) --- */
/* laranja / atenção */
html.dark [class*="bg-[#FFF7ED]"], html.dark [class*="bg-[#FFF8F0]"],
html.dark [class*="bg-[#FFF6ED]"], html.dark [class*="bg-[#FFFCF0]"] {
  background-color: rgba(247, 147, 30, 0.13) !important;
}
html.dark [class*="bg-[#FEF3C7]"], html.dark [class*="bg-[#FEFDF0]"] {
  background-color: rgba(244, 197, 66, 0.13) !important;
}
/* vermelho / erro */
html.dark [class*="bg-[#FDF2F2]"], html.dark [class*="bg-[#FFF5F5]"],
html.dark [class*="bg-[#FEF2F2]"], html.dark [class*="bg-[#FDF2F3]"] {
  background-color: rgba(217, 85, 98, 0.15) !important;
}
/* verde / positivo */
html.dark [class*="bg-[#EAF8F1]"], html.dark [class*="bg-[#EEF9F4]"],
html.dark [class*="bg-[#F0FDF4]"] {
  background-color: rgba(35, 163, 109, 0.15) !important;
}
/* roxo / automação IA */
html.dark [class*="bg-[#F5EEFC]"], html.dark [class*="bg-[#F3E8FF]"],
html.dark [class*="bg-[#FAF5FF]"] {
  background-color: rgba(123, 75, 196, 0.18) !important;
}
/* azul-claro / informativo */
html.dark [class*="bg-[#EBF9FF]"] { background-color: rgba(9, 187, 252, 0.10) !important; }
/* rosa e índigo (etiquetas de grupo) */
html.dark [class*="bg-[#FDF2F8]"] { background-color: rgba(160, 16, 80, 0.20) !important; }
html.dark [class*="bg-[#EEF2FF]"] { background-color: rgba(99, 102, 241, 0.16) !important; }

/* --- Textos de status escuros que perdem contraste no fundo escuro --- */
html.dark [class*="text-[#C25E00]"], html.dark [class*="text-[#C2560B]"],
html.dark [class*="text-[#9A4B09]"], html.dark [class*="text-[#B45309]"],
html.dark [class*="text-[#854D0E]"], html.dark [class*="text-[#8A6116]"],
html.dark [class*="text-[#926C05]"] { color: #F5B15C !important; }
html.dark [class*="text-[#C62839]"], html.dark [class*="text-[#B42318]"] { color: #F0949D !important; }
html.dark [class*="text-[#15803D]"], html.dark [class*="text-[#18794E]"] { color: #5FCB97 !important; }
html.dark [class*="text-[#6B21A8]"], html.dark [class*="text-[#5B218C]"],
html.dark [class*="text-[#4C1D95]"], html.dark [class*="text-[#6F258D]"],
html.dark [class*="text-[#7E22CE]"], html.dark [class*="text-[#6B4B8A]"],
html.dark [class*="text-[#7B4BC4]"] { color: #C4A5EE !important; }
html.dark [class*="text-[#3730A3]"] { color: #A5B4FC !important; }
html.dark [class*="text-[#A01050]"] { color: #F27BAD !important; }
html.dark [class*="text-[#0369A1]"], html.dark [class*="text-[#0284C7]"] { color: #64C3F5 !important; }

/* --- Campos de formulário: fundo escuro, texto claro, placeholder legível --- */
html.dark input:not(#main-sidebar input):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select:not(#main-sidebar select),
html.dark textarea:not(#main-sidebar textarea) {
  background-color: #1D3149 !important;
  color: #E4EDF5 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #7E93A9 !important;
  opacity: 1;
}
html.dark select option {
  background-color: #1D3149;
  color: #E4EDF5;
}

/* --- Componentes próprios do styles.css --- */
html.dark .chat-bg-pattern { background-color: #0F1B2A; background-image: none; }
html.dark .panel-tech-bg { background-color: #16283C; background-image: none; }
html.dark .bubble-received {
  background-color: #1D3149;
  color: #E4EDF5;
  border-color: #2C4258;
}
html.dark .audio-progress-received { background: #2C4258; }

/* Tags dinâmicas: fundo translúcido escuro, texto clareado */
html.dark .tag-style-blue    { background-color: rgba(47, 128, 194, 0.18); color: #9CCAF0; border-color: #2C4258; }
html.dark .tag-style-orange  { background-color: rgba(247, 147, 30, 0.14); color: #F5B15C; border-color: rgba(247, 147, 30, 0.55); }
html.dark .tag-style-purple  { background-color: rgba(123, 75, 196, 0.18); color: #C4A5EE; border-color: rgba(211, 179, 244, 0.45); }
html.dark .tag-style-yellow  { background-color: rgba(244, 197, 66, 0.14); color: #EBCB6C; border-color: rgba(244, 197, 66, 0.55); }
html.dark .tag-style-red     { background-color: rgba(217, 85, 98, 0.16); color: #F0949D; border-color: rgba(243, 176, 183, 0.45); }
html.dark .tag-style-emerald { background-color: rgba(35, 163, 109, 0.16); color: #5FCB97; border-color: rgba(139, 227, 189, 0.40); }

/* Scrollbars */
html.dark ::-webkit-scrollbar-track { background: rgba(228, 237, 245, 0.05); }
html.dark ::-webkit-scrollbar-thumb { background: #2C4258; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #2F80C2; }
html.dark #conversations-list-container {
  scrollbar-color: #3A5A7C rgba(228, 237, 245, 0.08);
}
html.dark #conversations-list-container::-webkit-scrollbar-track {
  background: rgba(228, 237, 245, 0.08);
}
html.dark #conversations-list-container::-webkit-scrollbar-thumb {
  background: #3A5A7C;
  border-color: rgba(228, 237, 245, 0.12);
}
/* ===== BLOQUEIO EM CELULAR =====
   Variante institucional aprovada pelo Cacio em 14/08/2026: assinada com a
   marca, para ler como decisão de projeto e não como defeito do sistema.
   Exige os TRÊS sinais ao mesmo tempo: ponteiro grosso (dedo), sem hover real
   e tela abaixo de 820px. Bloquear só por largura trancaria o monitor em
   retrato (1080px) fora do sistema — ele tem mouse e hover, então nunca casa
   com esta regra. A classe .mobile-liberado no <html> é a saída de emergência,
   válida apenas na sessão atual. */
#bloqueio-mobile { display: none; }

@media (pointer: coarse) and (hover: none) and (max-width: 819px) {
  html:not(.mobile-liberado) #bloqueio-mobile {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 46px 26px 30px;
    text-align: center;
    background: linear-gradient(170deg, #173F67 0%, #0F2337 100%);
    color: #E4EDF5;
    font-family: 'Inter', system-ui, sans-serif;
    overflow-y: auto;
  }

  #bloqueio-mobile .bm-marca { display: flex; align-items: center; gap: 9px; }
  #bloqueio-mobile .bm-marca img { width: 28px; height: 28px; }
  #bloqueio-mobile .bm-marca span {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 19px;
    letter-spacing: -0.3px;
  }
  #bloqueio-mobile .bm-marca i { color: #F7931E; font-style: normal; }

  #bloqueio-mobile .bm-meio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  #bloqueio-mobile .bm-risco {
    width: 40px;
    height: 3px;
    background: #F7931E;
    border-radius: 2px;
  }

  #bloqueio-mobile .bm-selo {
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8FA9C2;
    font-weight: 700;
  }

  #bloqueio-mobile h1 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
  }

  #bloqueio-mobile p {
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 27ch;
    color: #A9BFD4;
    margin: 0;
  }

  #bloqueio-mobile button {
    background: none;
    border: 1px solid rgba(228, 237, 245, 0.22);
    border-radius: 9px;
    padding: 9px 16px;
    color: #9DB2C8;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }

  #bloqueio-mobile button:active { background: rgba(228, 237, 245, 0.08); }
}