/* Whaticket PHP - mock visual (MVP) */
:root{
  --wt-bg: #f4f6f9;
  --wt-sidebar: #1e2a3a;
  --wt-sidebar-hover: #2a3b52;
  --wt-primary: #25d366;
  --wt-primary-dark: #1da851;
  --wt-accent: #7367f0;
  --wt-border: #e4e6ef;
  --wt-text-muted: #7e8299;
  --wt-bubble-out: #dcf8c6;
  --wt-bubble-in: #ffffff;
}

html, body{
  height: 100%;
}

body{
  background: var(--wt-bg);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #2b2b40;
}

/* ---------- Layout base ---------- */
.wt-app{
  display: flex;
  height: 100vh;
}

.wt-sidebar{
  width: 250px;
  flex-shrink: 0;
  background: var(--wt-sidebar);
  color: #cfd6e4;
  display: flex;
  flex-direction: column;
}

.wt-sidebar .wt-brand{
  padding: 20px 18px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.wt-sidebar .wt-brand .wt-brand-icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--wt-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #123;
}

.wt-nav{
  flex: 1;
  padding: 14px 10px;
  overflow-y: auto;
}

.wt-nav .wt-nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #cfd6e4;
  text-decoration: none;
  font-size: .92rem;
  margin-bottom: 2px;
  transition: background .15s ease;
}

.wt-nav .wt-nav-link i{ font-size: 1.05rem; width: 20px; text-align: center; }

.wt-nav .wt-nav-link:hover{ background: var(--wt-sidebar-hover); color: #fff; }
.wt-nav .wt-nav-link.active{ background: var(--wt-primary); color: #093; color:#0b2b16; font-weight: 600; }

.wt-sidebar-footer{
  padding: 12px 18px;
  font-size: .75rem;
  color: #8a93a6;
  border-top: 1px solid rgba(255,255,255,.08);
}

.wt-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.wt-topbar{
  height: 60px;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--wt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.wt-topbar .wt-empresa{
  font-weight: 600;
  color: #3f4254;
  font-size: .95rem;
}

.wt-topbar .wt-user{
  display: flex;
  align-items: center;
  gap: 10px;
}

.wt-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wt-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
  overflow: hidden;
}
.wt-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-content{
  flex: 1;
  overflow: auto;
  padding: 24px;
}

.wt-content.wt-content-flush{
  padding: 0;
  overflow: hidden;
  display: flex;
}

.wt-page-title{
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.wt-page-subtitle{
  color: var(--wt-text-muted);
  font-size: .88rem;
  margin-bottom: 20px;
}

.wt-card{
  background: #fff;
  border: 1px solid var(--wt-border);
  border-radius: 12px;
}

/* ---------- badges / status ---------- */
.wt-badge-provider{
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.wt-badge-baileys{ background:#e7f6ec; color:#1da851; }
.wt-badge-wppconnect{ background:#eaf1ff; color:#3767ea; }
.wt-badge-wwebjs{ background:#fdeee8; color:#d9531e; }

.wt-status-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.wt-status-conectado{ background: #1da851; }
.wt-status-desconectado{ background: #d9214e; }
.wt-status-qrcode{ background: #f1a30f; }
.wt-status-conectando{ background: #7367f0; }

.wt-fila-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:600;
  padding:2px 9px;
  border-radius: 20px;
}

/* ---------- Tela de Atendimento ---------- */
.wt-atendimento{
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  min-width: 0;
}

.wt-tickets-col{
  width: 420px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--wt-border);
  display: flex;
  flex-direction: column;
}

.wt-tickets-toolbar{
  padding: 14px 14px 0 14px;
}

.wt-tickets-todos{
  padding: 10px 14px 0 14px;
}

.wt-tickets-search{
  padding: 14px;
  border-bottom: 1px solid var(--wt-border);
}

.posrelative{ position: relative; }
.wt-filtro-dot{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wt-primary);
  border: 1px solid #fff;
}

.wt-filtro-filas-menu{
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
}
.wt-filtro-filas-menu .form-check{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 2.2em;
  border-radius: 6px;
}
.wt-filtro-filas-menu .form-check:hover{ background:#f5f6f8; }
.wt-filtro-filas-menu .form-check-label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: .85rem;
  cursor: pointer;
  flex: 1;
}
.wt-filtro-filas-menu .wt-filtro-cor{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wt-filtro-filas-menu .wt-filtro-count{
  font-size: .72rem;
  color: var(--wt-text-muted);
  font-weight: 600;
}
.wt-filtro-filas-menu .wt-filtro-limpar{
  font-size: .78rem;
}

.wt-autocomplete{ position: relative; }
.wt-autocomplete-list{
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 1080;
  background: #fff;
  border: 1px solid var(--wt-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  max-height: 220px;
  overflow-y: auto;
}
.wt-autocomplete-list .wt-autocomplete-item{
  padding: 8px 12px;
  font-size: .85rem;
  cursor: pointer;
}
.wt-autocomplete-list .wt-autocomplete-item:hover,
.wt-autocomplete-list .wt-autocomplete-item.active{
  background: #f5f6f8;
}
.wt-autocomplete-list .wt-autocomplete-empty{
  padding: 8px 12px;
  font-size: .82rem;
  color: var(--wt-text-muted);
}

.wt-tickets-tabs{
  display: flex;
  border-bottom: 1px solid var(--wt-border);
}
.wt-tickets-tabs .wt-tab{
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--wt-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wt-tickets-tabs .wt-tab.active{
  color: var(--wt-primary-dark);
  border-bottom-color: var(--wt-primary);
}
.wt-tab-count{
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  margin-left: 3px;
  border-radius: 10px;
  background: #eef0f3;
  color: var(--wt-text-muted);
  font-size: .68rem;
  font-weight: 700;
}
.wt-tab.active .wt-tab-count{
  background: var(--wt-primary);
  color: #0b2b16;
}

.wt-tickets-list{
  flex: 1;
  overflow-y: auto;
}

.wt-ticket-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f2f5;
  cursor: pointer;
  position: relative;
}
.wt-ticket-item:hover{ background: #fafbfc; }
.wt-ticket-item.active{ background: #eefaf1; }

.wt-ticket-item .wt-avatar{ width: 44px; height:44px; font-size:1rem; flex-shrink: 0; }

.btnAssumirTicketLista_8{ flex-shrink: 0; }

.wt-ticket-info{ flex: 1; min-width: 0; }
.wt-ticket-info .wt-ticket-top{
  display:flex; justify-content: space-between; align-items:baseline;
}
.wt-ticket-info .wt-ticket-name{ font-weight:600; font-size:.9rem; }
.wt-ticket-info .wt-ticket-time{ font-size:.68rem; color: var(--wt-text-muted); }
.wt-ticket-info .wt-ticket-msg{
  font-size: .8rem;
  color: var(--wt-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-ticket-info .wt-ticket-meta{
  display:flex; align-items:center; gap:6px; margin-top:4px;
}

.wt-usuario-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  color: var(--wt-text-muted);
}
.wt-usuario-chip.dnone{ display:none !important; }
.wt-usuario-chip i{ font-size:.72rem; }

.wt-unread-badge{
  background: var(--wt-primary);
  color:#0b2b16;
  font-size:.68rem;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  padding: 0 5px;
}

.wt-chat-col{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #e9edf1;
  background-image: radial-gradient(circle, #dfe4ea 1px, transparent 1px);
  background-size: 18px 18px;
}

.wt-chat-header{
  height: 66px;
  flex-shrink:0;
  background:#fff;
  border-bottom: 1px solid var(--wt-border);
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 18px;
}

.wt-chat-header .wt-chat-header-info{ display:flex; align-items:center; gap:12px; min-width:90px; }
.wt-chat-header .wt-chat-header-info > div:last-child{ min-width:0; }
.wt-chat-header > .d-flex{ flex-shrink:0; }
.nome_contato_8{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.wt-chat-messages{
  flex: 1;
  overflow-y: auto;
  padding: 20px 8%;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Cada dia da conversa fica dentro do seu próprio wrapper — o "position:
   sticky" do separador é limitado aos limites do PAI, então sem esse
   wrapper por dia dois separadores adjacentes ficariam sticky ao mesmo
   tempo (sobrepostos) assim que ambos passassem do topo da rolagem. */
.wt-data-grupo{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wt-data-separador{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 4px 0;
  pointer-events: none;
}
.wt-data-separador span{
  background: rgba(233,236,241,.95);
  color: #54657a;
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.wt-bubble{
  max-width: 60%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .88rem;
  line-height:1.4;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}
.wt-bubble.wt-in{
  background: var(--wt-bubble-in);
  align-self: flex-start;
  border-top-left-radius: 2px;
}
.wt-bubble.wt-out{
  background: var(--wt-bubble-out);
  align-self: flex-end;
  border-top-right-radius: 2px;
}
.wt-bubble .wt-bubble-meta{
  display:flex; gap:5px; align-items:center; justify-content:flex-end;
  font-size:.65rem; color: var(--wt-text-muted); margin-top:3px;
}
.wt-bubble .wt-mono{
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: rgba(0,0,0,.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: .85em;
}
.wt-bubble.wt-out .wt-bubble-meta i.wt-check-lida{ color:#3767ea; font-size: 0.9rem; }
.wt-bubble a{ color:#039be5; text-decoration: underline; word-break: break-all; }
.wt-bubble a:hover{ color:#0288c7; }

.wt-bubble.wt-bubble-midia{ padding: 4px; }
.wt-bubble .wt-bubble-imagem{
  display:block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 7px;
  object-fit: cover;
  cursor: zoom-in;
}
.wt-bubble .wt-bubble-legenda{ padding: 6px 6px 0; }
.wt-bubble .wt-bubble-video{
  display:block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 7px;
}

.wt-audio-player{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 220px;
  padding: 4px 2px;
}
.wt-audio-player .wt-audio-play{
  border:none;
  background: var(--wt-verde, #25d366);
  color:#fff;
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.wt-audio-player .wt-audio-seek{ flex:1; accent-color: var(--wt-verde, #25d366); }
.wt-audio-player .wt-audio-time{ font-size:.7rem; color: var(--wt-text-muted); min-width:32px; }
.wt-audio-player .wt-audio-speed{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  border-radius:12px;
  font-size:.68rem;
  font-weight:600;
  padding:1px 7px;
  flex-shrink:0;
}

.wt-bubble.wt-bubble-erro{
  background: #fdecea;
  border: 1px solid #f5c2c0;
}
.wt-bubble-meta.wt-bubble-meta-erro{ color:#dc3545; font-weight:600; }
.wt-bubble-meta.wt-bubble-meta-erro i{ color:#dc3545; }

.wt-bubble-apagada{
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--wt-text-muted);
  font-style: italic;
  font-size: .85em;
}

/* Botão "..." que abre o menu Responder/Deletar — só aparece no hover pra
   não poluir a bolha o tempo todo. */
.wt-bubble-menu-btn{
  position:absolute;
  top:2px;
  right:2px;
  width:22px; height:22px;
  border:none;
  background: rgba(0,0,0,.08);
  color: var(--wt-text-muted);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem;
  opacity:0;
  transition: opacity .12s;
}
.wt-bubble:hover .wt-bubble-menu-btn{ opacity:1; }

.wt-msg-menu{
  position:absolute;
  background:#fff;
  border-radius:8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  padding:4px;
  min-width:130px;
  z-index:2000;
}
.wt-msg-menu-item{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  padding:7px 10px;
  border-radius:5px;
  font-size:.85rem;
}
.wt-msg-menu-item:hover{ background: var(--wt-bg, #f4f4f5); }
.wt-msg-menu-deletar{ color:#dc3545; }

/* Citação (mensagem respondida) dentro da bolha */
.wt-bubble-citacao{
  border-left: 3px solid var(--wt-accent);
  background: rgba(0,0,0,.05);
  border-radius: 5px;
  padding: 4px 8px;
  margin-bottom: 5px;
  font-size: .82em;
}
.wt-bubble-citacao-autor{ font-weight:600; color: var(--wt-accent); }
.wt-bubble-citacao-texto{
  color: var(--wt-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Barra "Respondendo ..." acima do campo de mensagem */
.wt-reply-compose{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-top: 1px solid var(--wt-border);
  padding: 8px 16px;
}
.wt-reply-compose-info{
  flex:1;
  min-width:0;
  border-left: 3px solid var(--wt-accent);
  padding-left:8px;
}
.wt-reply-compose-autor{ font-weight:600; font-size:.8rem; color: var(--wt-accent); }
.wt-reply-compose-texto{
  font-size:.82rem;
  color: var(--wt-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-chat-input{
  position: relative;
  background:#fff;
  border-top: 1px solid var(--wt-border);
  padding: 12px 16px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.wt-chat-input .btnEnviarMensagem_8{ flex-shrink: 0; }

.wt-chat-input .wt-assinar-switch{ align-self:center; flex-shrink: 0; white-space:nowrap; }

.wt-chat-input textarea#texto_mensagem_8{
  resize: none;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.35;
}

.wt-chat-input-bloqueado{
  justify-content: center;
  color: var(--wt-text-muted);
  font-size: .88rem;
}
.wt-chat-input-bloqueado i{ font-size: 1rem; }

.wt-chat-input-gravando{ align-items: center; }
.wt-gravando-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dc3545;
  animation: wt-pulso-gravacao 1s infinite;
}
#cronometro_gravacao_8{ font-variant-numeric: tabular-nums; font-weight: 600; }
@keyframes wt-pulso-gravacao{
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.btnGravarAudio_8.wt-gravando{ background: #dc3545; color:#fff; border-color:#dc3545; }

.wt-quickreply-hint{
  font-size:.72rem;
  color: var(--wt-text-muted);
  padding: 4px 16px;
  background:#fff;
}

.wt-quickreply-wrap{ position: relative; flex: 1; }

.wt-quickreply-list{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1080;
  background: #fff;
  border: 1px solid var(--wt-border);
  border-radius: 10px;
  box-shadow: 0 -4px 18px rgba(0,0,0,.14);
  max-height: 260px;
  overflow-y: auto;
}
.wt-quickreply-list .wt-quickreply-item{
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f2f5;
}
.wt-quickreply-list .wt-quickreply-item:last-child{ border-bottom: none; }
.wt-quickreply-list .wt-quickreply-item:hover,
.wt-quickreply-list .wt-quickreply-item.active{ background:#f5f6f8; }
.wt-quickreply-list .wt-quickreply-atalho{
  font-size:.82rem;
  font-weight:700;
  color: var(--wt-primary-dark);
}
.wt-quickreply-list .wt-quickreply-texto{
  font-size:.78rem;
  color: var(--wt-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-quickreply-list .wt-quickreply-empty{
  padding: 8px 12px;
  font-size: .82rem;
  color: var(--wt-text-muted);
}

.wt-emoji-wrap{ position: static; }
.wt-emoji-picker{
  /* Posição fixa relativa à barra de mensagem inteira (não ao botão) —
     sempre abre encostado no canto inferior esquerdo dela. Como a coluna do
     chat tem no mínimo uns 350px de largura, 232px de painel nunca vaza pra
     fora do lado direito, então não precisa de nenhum cálculo dinâmico. */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 16px;
  right: auto;
  z-index: 1080;
  background: #fff;
  border: 1px solid var(--wt-border);
  border-radius: 10px;
  box-shadow: 0 -4px 18px rgba(0,0,0,.14);
  padding: 8px;
  width: 267px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.wt-emoji-picker .wt-emoji-item{
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
.wt-emoji-picker .wt-emoji-item:hover{ background: #f5f6f8; }

.wt-contact-col{
  width: 300px;
  flex-shrink: 0;
  background:#fff;
  border-left: 1px solid var(--wt-border);
  padding: 20px;
  overflow-y:auto;
}
.wt-contact-col .wt-avatar{
  width:150px; height:150px; font-size:1.8rem; margin: 0 auto 12px;
  overflow: hidden;
}
.wt-contact-col .wt-avatar img{
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Login ---------- */
.wt-login-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, var(--wt-sidebar) 0%, #16202d 100%);
}
.wt-login-card{
  width: 380px;
  background:#fff;
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* ---------- SPA (troca de tela sem reload) ---------- */
.dnone{ display: none !important; }

.wt-block-loading{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1990;
}

.todasPaginas{
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* misc */
.wt-empty-state{
  text-align:center;
  color: var(--wt-text-muted);
  padding: 60px 20px;
}
.wt-empty-state i{ font-size: 2.6rem; opacity:.4; }

.table thead th{
  font-size:.75rem;
  text-transform: uppercase;
  color: var(--wt-text-muted);
  border-bottom-width: 1px;
}

.wt-tabela-clicavel tr{ cursor: pointer; }
.wt-tabela-clicavel tr:hover{ background: #f5f6f8; }

/* Lightbox — amplia imagem da bolha de chat */
.wt-lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.wt-lightbox img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  cursor: default;
}
.wt-lightbox-fechar{
  position: absolute;
  top: 18px;
  right: 24px;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-lightbox-fechar:hover{ background: rgba(255,255,255,.22); }