/* Estilos dos modulos novos (js/*.js). Usa as variaveis de cor do index.html. */

.btn-sm{padding:5px 10px;font-size:12px}
.field-help{font-size:11px;color:var(--text-muted);margin-top:4px}
.muted{color:var(--text-muted)}
.muted-strike{color:var(--text-muted);text-decoration:line-through}

/* Configuracoes */
.cfg-tabs{flex-wrap:wrap;margin-bottom:16px}
.cfg-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:16px;max-width:760px}
.cfg-card h3{margin:0 0 6px;font-size:15px;color:var(--title)}
.cfg-intro{margin:0 0 14px;font-size:13px;color:var(--text-muted)}
.cfg-check{display:flex;gap:8px;align-items:center;font-size:13px;margin:6px 0 12px}
.cfg-card textarea{width:100%;font-family:inherit}
.cfg-row{display:flex;gap:10px;flex-wrap:wrap}
.cfg-row .field{flex:1;min-width:160px}
.subj-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}

/* Abas da lista de conversas */
.wa-conv-list-header{display:flex;flex-direction:column;gap:8px}
.conv-tabs{display:flex;gap:4px}
.conv-tab{flex:1;border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);padding:5px 6px;font-size:12px;cursor:pointer;color:var(--text);font-family:inherit}
.conv-tab.active{background:var(--mf-petroleo-500);border-color:var(--mf-petroleo-500);color:#fff}
.conv-tab .tab-n{font-weight:700}
.tk-chip{font-size:10px;padding:1px 5px;border-radius:8px;background:var(--mf-petroleo-50);color:var(--mf-petroleo-700);margin-top:3px;white-space:nowrap}
.tk-chip.fila{background:var(--mf-atencao-100);color:var(--mf-grafite-900)}

/* Barra do chamado no topo do chat */
.tk-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.tk-bar-info{margin-right:4px}
.tk-hist-item{border-bottom:1px solid var(--border)}
.tk-hist-head{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 2px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--text)}
.tk-hist-date{display:block;font-size:11px;color:var(--text-muted)}
.tk-ev{font-size:12px;padding:3px 8px;color:var(--text)}
.tk-ev-txt{color:var(--text-muted);padding-left:8px}

/* Comentario interno no meio das mensagens */
.conv-note{align-self:center;max-width:80%;margin:6px auto;background:#FFF8DC;border:1px dashed #D9B44A;border-radius:var(--radius-sm);padding:8px 10px;font-size:13px}
.conv-note-head{font-size:11px;font-weight:700;color:#8A6D1F;margin-bottom:3px;display:flex;align-items:center;gap:4px}
.conv-note-text{white-space:pre-wrap}
.conv-note .meta{font-size:10px;color:#8A6D1F;margin-top:3px}
.btn-note{white-space:nowrap}

/* Status do atendente */
.status-wrap,.bell-wrap{position:relative}
.status-chip{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:16px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:inherit;color:var(--text);white-space:nowrap}
.st-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--mf-cinza-300)}
.st-online .st-dot,.st-dot.st-online{background:var(--mf-sucesso)}
.st-ausente .st-dot,.st-dot.st-ausente{background:#E0A800}
.st-offline .st-dot,.st-dot.st-offline{background:var(--mf-cinza-300)}
.status-menu,.bell-menu{position:absolute;right:0;top:110%;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:50;min-width:220px;padding:4px}
.status-menu button{display:flex;gap:8px;align-items:center;width:100%;background:none;border:0;padding:8px 10px;font-size:13px;cursor:pointer;text-align:left;font-family:inherit;color:var(--text)}
.status-menu button:hover{background:var(--mf-petroleo-50)}

/* Sino de notificacoes */
.bell-btn{position:relative;background:none;border:0;cursor:pointer;padding:6px;color:var(--mf-petroleo-700)}
.bell-btn svg{width:20px;height:20px}
.bell-badge{position:absolute;top:0;right:0;background:var(--mf-erro);color:#fff;border-radius:9px;font-size:10px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px}
.bell-menu{width:320px;max-height:420px;overflow:auto}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-weight:700;font-size:13px;border-bottom:1px solid var(--border)}
.bell-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border);padding:8px 10px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--text)}
.bell-item.unread{background:var(--mf-petroleo-50)}
.bell-item .meta{font-size:11px;color:var(--text-muted)}

/* Tabelas simples dos modulos */
.x-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.x-table th,.x-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.x-table th{font-size:11px;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.x-badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:9px;background:var(--mf-petroleo-50);color:var(--mf-petroleo-700)}
.x-badge.ok{background:#E3F4EA;color:#14523C}
.x-badge.warn{background:var(--mf-atencao-100);color:var(--mf-grafite-900)}
.x-badge.err{background:#FBE4E4;color:#8A2B21}
.x-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.x-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}

@media (max-width:760px){
  .status-chip{padding:4px 8px}
  .status-chip .st-label{display:none}
  .bell-menu{width:92vw;right:-60px}
  .tk-bar{font-size:11px}
}

/* Contatos: selecao em massa e campos personalizados */
.ct-sel{width:30px}
.ct-bulk{background:var(--mf-petroleo-50);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;margin:6px 0 0;width:100%}
.ct-bulk input,.ct-bulk select{max-width:180px}
.cf-group{border-top:1px dashed var(--border);margin-top:6px;padding-top:6px}

/* Relatorio: barras por hora */
.hour-bars{display:flex;gap:3px;align-items:flex-end;height:120px}
.hour-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.hour-bar div{width:100%;background:var(--mf-petroleo-500);border-radius:3px 3px 0 0;min-height:1px}
.hour-bar span{font-size:9px;color:var(--text-muted);margin-top:2px}

/* IA */
.ia-transc{font-size:12px;background:rgba(255,255,255,.55);border-left:3px solid var(--mf-petroleo-300);padding:4px 6px;margin-top:4px;white-space:pre-wrap}
.ia-transc-btn{margin-top:4px}