:root {
    --white: #ffffff;
    --black: #000000;
    --body-font-color: #292929;
    --font-color: #aaa3a0;
    --shape-border: #e5e5e5;
    --scrollbar-color: #aeaeae;
    --light-border: #dceee6;
    --theme-default: #363839;
    --theme-secondary: #5a5b5c;
    --body-color: #f9f7f6;
    --primary-color: #770707;
    --secondary-color: #f39159;
    --success-color: ##c0c0c0;
    --info-color: #02a2b9;
    --warning-color: #ea9200;
    --danger-color: #e74b2b;
    --light-color: #f5f5f5;
    --footer-icon: #f40000;
    --active-bg-color: #d9e8e5;
    --font-color: #aaa3a0;
    --border-color: #ebebeb;
    --light-gray: #e5e5e5;
    --light-semi-gray: #efefef;
    --bg-light: #f4f4f4;
    --light-fill: #f4f4f4;
    --dark:#292929;
    --light-background:#f2f3f7;
    --theme-body-font-color: #2f2f3b;
    --light-text: #999999;
    --light-chartist-grid-color: #f6f9fd;
    --gray-60: #cccccc;
    --span-color: #f2f3f7;
    --light-gray-color:#aaa3a0;
    --gray-200: #e9ecef;
    --gray-700: #495057;
    --gray2: #d3d3d3;
    --table-border:#e4e4e4;
    --alert-light-light: #f1efee;
    --border-light-color:#f3f3f3;
    --form-select:#ced4da;
    --timline-dot-line:#52526c;
    --light2: #1d1e26;
    --pitch-color: #fe8a7d;
    --categorie-hover: #f4f5f8;
    --color-fiord: #455a64;
    --dropdown-menu: #2B2B2B;
    --dropdown-bg-color: #F9F9F9;
    --dropdown-content-color:#F2F2F2;
    --dropdown-toggle: #308e87;
    --table-hover-color: #d9e8e5;
    --table-double-color: #DEE2E6;
    --ping-success: #369B36;
    --ping-light-success: #70C770;
    --fb: #50598E;
    --twitter: #6FA2D8;
    --google-plus: #C64E40;
    --linkedin: #0077B5;
    --face-hue1: 60;
    --face-hue2: 30;
    --delay-left: 0s;
    --delay-right: 0s;
    --delay-mouth-lower: 0s;
    --delay-mouth-upper: 0s;
    --input-hue: 60;
    --percent: 50%;
    --hue: 223;
    --face: hsl(var(--hue),10%,100%);
    --lt-gray: hsl(var(--hue),10%,95%);
    --gray1: hsl(var(--hue),10%,90%);
    --gray2: hsl(var(--hue),10%,80%);
    --gray7: hsl(var(--hue),10%,30%);
    --gray9: hsl(var(--hue),10%,10%);
    --primary: hsl(var(--hue),90%,55%);
    --trans-dur: 0.3s;
    --normal: #ECEAF3;
    --normal-shadow: #D9D8E3;
    --normal-mouth: #9795A4;
    --normal-eye: #595861;
    --active: #F8DA69;
    --active-shadow: #F4B555;
    --active-mouth: #F05136;
    --active-eye: #313036;
    --active-tear: #76b5e7;
    --active-shadow-angry: #e94f1d;
    --landing-footer-bg: #11312E;
  }
  
  .dark-only, .dark-sidebar .logo-wrapper, .dark-sidebar .page-sidebar {
    --black: #ffffff;
    --white: #181919;
    --font-color: #7c7a7a;
    --dark: #9d9999;
    --body-font-color: #e2e2e2;
    --light-gray-color: #f1f1f1;
    --gray-700: #a7a7a7;
    --gray2: #5f5f5f;
    --gray-60: #858585;
    --shape-border: #474545;
    --span-color: #1D1D1D;
    --scrollbar-color: #eee;
    --body-color: #363839;
    --light-border: #474545;
    --light-gray: #474545;
    --sub-title: #B6B0B0;
    --border-color: #474545;
    --gray-200: #313131;
    --active-bg-color: #474545;
    --table-hover-color: #474545;
    --bg-light: #363839;
    --light-semi-gray: #0e0f0f;
    --alert-light-light: #181919;
    --theme-body-font-color: #B6B0B0;
    --light-background: #0e0f0f;
    --light-color: #0e0f0f;
    --dropdown-menu: #ffffff;
    --border-light-color: #474545;
    --timline-dot-line: #B6B0B0;
    --bs-tertiary-bg: #181919;
    --bs-body-bg: #181919;
    --bs-heading-color: #c6c6c6;
    --bs-body-color: #B6B0B0;
    --bs-border-color: #474545;
    --bs-white-rgb: #0e0f0f;
    --bs-popover-header-bg: #0e0f0f;
    --bs-toast-header-bg: #0e0f0f;
    --bs-secondary-color: #B6B0B0;
    --bs-btn-color: #B6B0B0;
    --bs-btn-active-color: #B6B0B0;
    --bs-nav-tabs-link-hover-border-color: #e9ecef;
  }
  
  /* Regras específicas para o modo escuro no chat */
  .dark-only #user-name {
    color: #B6B0B0;
  }
  
  .dark-only #userMenuBtn {
    color: #B6B0B0;
  }
  
  .dark-only .sidebar-bottom {
    background: #363839;
    border-top: 1px solid #474545;
  }
  
  .dark-only #chat-sidebar {
    background: #363839;
    border-right-color: #474545;
  }
  
  .dark-only #chat-sidebar header {
    border-bottom-color: #474545;
  }
  
  .dark-only #chat-sidebar .btn-icon {
    color: #B6B0B0;
  }
  
  .dark-only #chat-sidebar .btn-icon:hover {
    background: #474545;
  }
  
  /* Padronização dos hovers no modo escuro */
  .dark-only #new-conversation:hover {
    background: #474545 !important;
    color: var(--theme-body-font-color) !important;
  }
  
  .dark-only #explore-gpt-item:hover {
    background: #474545 !important;
    color: var(--theme-body-font-color) !important;
  }
  
  .dark-only #chat-list li:hover {
    background: #474545 !important;
  }
  
  .dark-only #ai-providers-list li:hover {
    background: #474545 !important;
  }
  
  .dark-only #chat-sidebar li:hover {
    background: #474545 !important;
  }
  
  /* Padronização dos hovers no tema claro */
  #new-conversation:hover {
    background: #d9e8e5 !important;
    color: var(--theme-body-font-color) !important;
  }
  
  #explore-gpt-item:hover {
    background: #d9e8e5 !important;
    color: var(--theme-body-font-color) !important;
  }
  
  #chat-list li:hover {
    background: #d9e8e5 !important;
  }
  
  #ai-providers-list li:hover {
    background: #d9e8e5 !important;
  }
  
  #chat-sidebar li:hover {
    background: #d9e8e5 !important;
  }

/* ==================== ESTILOS DO MODAL EXPLORE GPTS ==================== */

/* Cores padronizadas para o modal de GPTs */
:root {
  --gpt-primary: #363839;
  --gpt-primary-light: #6b7280;
  --gpt-active-bg: #d9e8e5;
  --gpt-border: #e5e5e5;
  --gpt-text: #2f2f3b;
  --gpt-white: #ffffff;
}

/* Reset completo dos botões de categoria no modal GPT */
#gptModal #gpt-categories button,
#gptModal .btn-outline-primary {
  background-color: var(--gpt-white) !important;
  border: 2px solid var(--gpt-border) !important;
  color: var(--gpt-text) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 20px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin: 0.25rem !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Estado hover dos botões de categoria */
#gptModal #gpt-categories button:hover,
#gptModal .btn-outline-primary:hover {
  background-color: var(--gpt-active-bg) !important;
  border-color: var(--gpt-primary-light) !important;
  color: var(--gpt-text) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Estado ativo dos botões de categoria */
#gptModal #gpt-categories button.active,
#gptModal .btn-outline-primary.active {
  background-color: var(--gpt-primary) !important;
  border-color: var(--gpt-primary) !important;
  color: var(--gpt-white) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Estado focus dos botões de categoria */
#gptModal #gpt-categories button:focus,
#gptModal .btn-outline-primary:focus {
  background-color: var(--gpt-white) !important;
  border-color: var(--gpt-primary-light) !important;
  color: var(--gpt-text) !important;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
  outline: none !important;
}

/* Melhorias nos cards de GPTs */
#gptModal .card {
  transition: all 0.3s ease !important;
  border: 1px solid var(--gpt-border) !important;
  cursor: pointer !important;
}

#gptModal .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15) !important;
  border-color: var(--gpt-primary-light) !important;
}

/* Estilo do campo de pesquisa */
#gptModal #gpt-search {
  border: 2px solid var(--gpt-border) !important;
  border-radius: 8px !important;
}

#gptModal #gpt-search:focus {
  border-color: var(--gpt-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1) !important;
  outline: none !important;
}

/* Header do modal */
#gptModal .modal-header {
  background: linear-gradient(135deg, var(--gpt-primary) 0%, var(--gpt-primary-light) 100%) !important;
  color: var(--gpt-white) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
}

#gptModal .modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Modo escuro para o modal */
.dark-only #gptModal {
  --gpt-primary: #6b7280;
  --gpt-primary-light: #9ca3af;
  --gpt-active-bg: #474545;
  --gpt-border: #474545;
  --gpt-text: #B6B0B0;
  --gpt-white: #363839;
}

.dark-only #gptModal .modal-content {
  background-color: #363839 !important;
  color: #B6B0B0 !important;
}

.dark-only #gptModal .card {
  background-color: #474545 !important;
  border-color: #5a5b5c !important;
  color: #B6B0B0 !important;
}

.dark-only #gptModal .card:hover {
  background-color: #5a5b5c !important;
  border-color: #6b7280 !important;
}
  
/* ==================== ESTILOS DO MODAL DE CONFIGURAÇÕES ==================== */
/* Modo escuro para o modal de Configurações */
.dark-only #settingsModal .modal-content {
  background-color: #363839 !important; /* Mesmo tom usado no sidebar */
  color: #B6B0B0 !important; /* Texto claro para contraste */
  border: none !important;
}

.dark-only #settingsModal .modal-header {
  background-color: #474545 !important; /* Cabeçalho um pouco mais claro */
  color: #B6B0B0 !important;
  border-bottom: 1px solid #5a5b5c !important;
}

.dark-only #settingsModal .btn-close {
  filter: invert(1); /* Ícone de fechar visível no fundo escuro */
}

/* Hover states dentro do modal no modo escuro */
.dark-only #settingsModal li:hover {
  background-color: #474545 !important;
}

.dark-only #settingsModal .btn-link {
  color: #B6B0B0 !important;
}
  
/* ==================== USER MENU (DROPDOWN) ==================== */
.dark-only #userMenu {
  background-color: #363839 !important;
  border-color: #474545 !important;
}

.dark-only #userMenu .dropdown-item {
  color: #B6B0B0 !important;
}

.dark-only #userMenu .dropdown-item:hover {
  background-color: #474545 !important;
  color: #B6B0B0 !important;
}