/* ═══════════════════════════════════════════════════════════
   SisGeon Theme — Chatwoot v4
   Paleta extraída da logo oficial sisgeon.com.br
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Variáveis de cor SisGeon ─────────────────────────── */
:root {
  --sisgeon-50:   #EAF7F4;
  --sisgeon-100:  #C5EBE2;
  --sisgeon-200:  #8FD5C4;
  --sisgeon-300:  #56CAB0;  /* mint claro */
  --sisgeon-400:  #3FBD9F;  /* teal claro */
  --sisgeon-500:  #2BA891;  /* teal principal */
  --sisgeon-600:  #1D8070;  /* teal escuro */
  --sisgeon-700:  #16685B;  /* escuro médio */
  --sisgeon-800:  #0F5C4A;  /* muito escuro */
  --sisgeon-900:  #0A3D31;

  /* Override nas variáveis nativas do Chatwoot */
  --color-woot-25:  #F0FAF8;
  --color-woot-50:  #EAF7F4;
  --color-woot-100: #C5EBE2;
  --color-woot-200: #8FD5C4;
  --color-woot-300: #56CAB0;
  --color-woot-400: #3FBD9F;
  --color-woot-500: #2BA891;
  --color-woot-600: #1D8070;
  --color-woot-700: #16685B;
  --color-woot-800: #0F5C4A;
  --color-woot-900: #0A3D31;

  /* Tipografia moderna */
  --font-inter: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── 2. Tipografia global ────────────────────────────────── */
body,
.app-content,
.view-box {
  font-family: var(--font-inter) !important;
}

/* Importar Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── 3. Sidebar esquerda (navegação primária) ────────────── */
.sidebar {
  background: linear-gradient(180deg, #1D8070 0%, #16685B 100%) !important;
  border-right: none !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.12) !important;
}

/* Logo / header da sidebar */
.sidebar--header,
.account-selector--thumbnail,
.logo {
  background: transparent !important;
}

/* Ícones da nav primária */
.primary-nav .nav-item,
.primary-nav .icon,
.sidebar .icon {
  color: rgba(255,255,255,0.65) !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.primary-nav .nav-item:hover .icon,
.primary-nav .nav-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
}

.primary-nav .nav-item.active,
.primary-nav .nav-item.active .icon {
  color: #fff !important;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 10px !important;
}

/* Badge de notificações */
.badge,
.badge--notification {
  background: #56CAB0 !important;
  color: #0F5C4A !important;
  font-weight: 700 !important;
  font-size: 10px !important;
}

/* ── 4. Lista de conversas (coluna central) ──────────────── */
.conversations-list,
.conversation-list {
  background: #FAFAFA !important;
  border-right: 1px solid #E8F0EE !important;
}

/* Header da lista de conversas */
.conversations-list--header,
.inbox-view .page-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1D8070 !important;
  letter-spacing: -0.01em !important;
}

/* Item de conversa */
.conversation-item {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: background 0.12s ease !important;
  border-bottom: none !important;
}

.conversation-item:hover {
  background: var(--sisgeon-50) !important;
}

.conversation-item.active-conversation {
  background: #EAF7F4 !important;
  border-left: 3px solid var(--sisgeon-500) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Nome do contato na lista */
.conversation-item .sender--name {
  font-weight: 600 !important;
  color: #1A2E2C !important;
  font-size: 13.5px !important;
}

/* Preview da última mensagem */
.conversation-item .conversation--last-activity,
.conversation-item .last-message-content {
  color: #6B7C7A !important;
  font-size: 12.5px !important;
}

/* ── 5. Área principal do chat ───────────────────────────── */
.view-box,
.conversation-page {
  background: #F7FAF9 !important;
}

/* Header da conversa */
.conversation-header,
.conversation-header--details {
  background: #fff !important;
  border-bottom: 1px solid #E0EDEB !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

.conversation-header--name {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1A2E2C !important;
}

/* ── 6. Balões de mensagem ───────────────────────────────── */
/* Mensagem do agente */
.bubble.is-out,
.agent-bubble {
  background: var(--sisgeon-500) !important;
  color: #fff !important;
  border-radius: 16px 16px 4px 16px !important;
  box-shadow: 0 2px 6px rgba(43,168,145,0.25) !important;
}

/* Mensagem do cliente */
.bubble.is-in,
.contact-bubble {
  background: #fff !important;
  color: #1A2E2C !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  border: 1px solid #E8EDEC !important;
}

/* Notas internas */
.bubble.is-activity,
.activity-block {
  background: #FFF9E6 !important;
  border: 1px solid #FFE9A0 !important;
  border-radius: 8px !important;
  color: #7A6214 !important;
}

/* ── 7. Caixa de resposta (composer) ────────────────────── */
.reply-editor--note,
.reply-editor,
.replybox {
  background: #fff !important;
  border-top: 1px solid #E0EDEB !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
}

.reply-editor--note .ProseMirror,
.reply-editor .ProseMirror,
textarea.reply-box {
  font-family: var(--font-inter) !important;
  font-size: 14px !important;
  color: #1A2E2C !important;
  line-height: 1.6 !important;
}

/* ── 8. Botões primários ─────────────────────────────────── */
.button.nice.success,
.button.primary,
.woot-button,
button.button {
  background: var(--sisgeon-500) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: var(--font-inter) !important;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(43,168,145,0.3) !important;
}

.button.nice.success:hover,
.button.primary:hover,
.woot-button:hover {
  background: var(--sisgeon-600) !important;
  box-shadow: 0 4px 10px rgba(43,168,145,0.35) !important;
  transform: translateY(-1px) !important;
}

.button.nice.success:active,
.button.primary:active {
  transform: translateY(0) !important;
  background: var(--sisgeon-700) !important;
}

/* Botão "Enviar" no composer */
.send-button,
.reply-editor__send-button {
  background: var(--sisgeon-500) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* ── 9. Inputs e selects ─────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input.form-input,
.form-input,
select,
textarea {
  border-color: #D0E5E1 !important;
  border-radius: 8px !important;
  font-family: var(--font-inter) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus,
input.form-input:focus,
textarea:focus,
select:focus {
  border-color: var(--sisgeon-400) !important;
  box-shadow: 0 0 0 3px rgba(43,168,145,0.15) !important;
  outline: none !important;
}

/* ── 10. Labels / tags de status ─────────────────────────── */
.badge-label,
.label {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Status: aberto */
.status-badge--open,
.label.open {
  background: #EAF7F4 !important;
  color: var(--sisgeon-700) !important;
  border: 1px solid #C5EBE2 !important;
}

/* Status: pendente */
.status-badge--pending {
  background: #FFF3E0 !important;
  color: #9A5400 !important;
  border: 1px solid #FFD9A0 !important;
}

/* Status: resolvido */
.status-badge--resolved,
.label.resolved {
  background: #F0F0F0 !important;
  color: #555 !important;
  border: 1px solid #DDD !important;
}

/* ── 11. Tabs (abas) ─────────────────────────────────────── */
.tabs-title a,
.tab-button {
  font-family: var(--font-inter) !important;
  font-weight: 500 !important;
  color: #6B7C7A !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}

.tabs-title.is-active a,
.tab-button.active {
  color: var(--sisgeon-600) !important;
  border-bottom-color: var(--sisgeon-500) !important;
}

/* ── 12. Sidebar direita (detalhes do contato) ───────────── */
.conversation-sidebar,
.contact-conversation-details,
.contact-info--panel {
  background: #F7FAF9 !important;
  border-left: 1px solid #E0EDEB !important;
}

.contact-name {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1A2E2C !important;
}

.conversation-attribute--title,
.conv-details--title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #7A9896 !important;
}

/* ── 13. Scrollbars customizados ─────────────────────────── */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #C5EBE2 !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sisgeon-400) !important;
}

/* ── 14. Avatares e thumbnails ───────────────────────────── */
.avatar,
.thumbnail,
.user-thumbnail {
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}

/* Avatar padrão (sem foto) */
.avatar.badge--medium {
  background: var(--sisgeon-500) !important;
  color: #fff !important;
}

/* ── 15. Alerts / Toasts ─────────────────────────────────── */
.notifications-container .alert,
.woot-toast-item.woot-toast-item--success {
  border-left: 4px solid var(--sisgeon-500) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

/* ── 16. Dropdown menus ──────────────────────────────────── */
.dropdown-pane,
.dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid #E0EDEB !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
}

.dropdown-pane li a:hover,
.dropdown-menu li a:hover {
  background: var(--sisgeon-50) !important;
  color: var(--sisgeon-700) !important;
}

/* ── 17. Modal / Dialog ──────────────────────────────────── */
.modal-container,
.dialog-container {
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
}

.modal-header,
.dialog-header {
  border-bottom: 1px solid #E0EDEB !important;
  padding: 20px 24px !important;
}

.modal-header h2,
.modal-header .title {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #1A2E2C !important;
}

/* ── 18. Search bar ──────────────────────────────────────── */
.search-wrap,
.conversations-search {
  background: #F0F6F5 !important;
  border-radius: 8px !important;
  border: 1px solid #E0EDEB !important;
}

.search-wrap input,
.conversations-search input {
  background: transparent !important;
  border: none !important;
}

/* ── 19. Estado vazio (sem conversas) ────────────────────── */
.no-result,
.empty-state {
  color: #7A9896 !important;
}

.no-result .icon,
.empty-state .icon {
  color: var(--sisgeon-300) !important;
}

/* ── 20. Link e hover global ─────────────────────────────── */
a {
  color: var(--sisgeon-600) !important;
}
a:hover {
  color: var(--sisgeon-700) !important;
}