@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
/* === BODY === */
body {
  margin: 0;
  padding: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: linear-gradient(to right, #000000, #000000) !important; /* Azul escuro para azul suave */
  color: #aaa; /* Branco suave para contraste */
  line-height: 1.6;
}

#Roniqui {
  background-color: #111A;
  border-radius: 30px;

  display: flex;              /* 💥 ativa layout horizontal */
  flex-direction: row;        /* 👉 lado a lado */
  align-items: center;        /* ⬆⬇ centraliza vertical */
  justify-content: flex-start;/* ⬅ começa da esquerda */

  gap: 16px;                  /* 🧠 espaçamento elegante */
  padding: 0 9px;

  width: fit-content;         /* cresce conforme conteúdo */
  height: auto;
  overflow: visible;
}

.udcdo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.org {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin-top: -21px;
  margin-left: 10px;
}

button {
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  background: #ffffff;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: 1px;
  will-change: transform;

  /* animação suave */
  transition: 
      transform .15s ease,
      box-shadow .3s ease,
      background .3s ease;
}

/* HOVER */
button:hover {
  transform: scale(1.08);
}

/* ACTIVE: quando clica */
button:active {
  transform: scale(0.94);
}

img { max-width: 100%; height: auto; border-radius: 20px; border: 1px solid; margin-top: 8px; }

code {
  color: #000000;
  background: #a0a0a0;
  font-family: consolas, system-ui;
  font-size: 15px;
  border-radius: 5px;
}

body.tema-escuro code { color: #ffffff; background-color: #5a5a5a70;}

pre code {
  background-color: transparent;
}

/* reset pequeno pro título (remove o espaçamento padrão do h1) */
#suac {
  line-height: 1;          /* já tinha — deixa a linha compacta */
  display: inline-block;   /* garante que o texto não crie espaço extra de linha */
  vertical-align: middle;
  font-size: 50px;

  /* seu gradient / animação */
  background: linear-gradient(270deg,
    red, orange, yellow, green, blue, indigo, violet, red);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowGlowSlowX 10s linear infinite;
  font-family: Poppins, system-ui;
  font-weight: bold;
  margin-top: -10px;
  border-radius: 25px;
}

/* animação (já tinha) */
@keyframes rainbowGlowSlowX {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

#menu-itens {
  position: fixed;
  top: 0px;
  width: auto;
  height: auto;
  
  border: solid 1px #000000 !important;
  background-color: #ffffff;
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  padding: 4px 5px;
  z-index: 1000;
  margin-left: 500px;

  transition: right 0.2s ease;
}

#cadastrar {
  color: #000000;
  font-size: larger;
  font-family: 'Roboto', system-ui;
  width: 100px;
  height: 40px;
  border-radius: 99px;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  border: solid 1px #000000 !important;
}

body.tema-escuro #cadastrar {
  background-color: #252525 !important;
  border: solid 1px #ffffff !important;
  color: #ffffff;
}

/* Itens no menu header */
body.tema-escuro #menu-itens {
  border: solid 1px #ffffff !important; /* Borda branca */
  background-color: #252525;
}

#menu-itens button {
  font-family: Roboto, system-ui;
  width: 120px;
  height: 40px !important;
  background-color: #eeeeee !important;      /* Preto puro */
  border: 1px solid #000000 !important;      /* Borda cinza */
  border-radius: 24px !important;         /* Arredonda só as laterais */
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  color: #000000 !important;                  /* Texto branco */
  font-size: 16px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;      /* Evita quebrar texto */
  margin-top: 0px;
  margin-left: 5px;
}

#oMenu, #tema-toggle {
  font-family: Roboto, system-ui;
  width: auto;
  min-width: 40px;
  height: 40px !important;
  background: #eeeeee !important;      /* Preto puro */
  border: 1px solid #ffffff !important;      /* Borda cinza */
  border-radius: 24px !important;         /* Arredonda só as laterais */
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  color: #000000 !important;                  /* Texto branco */
  font-size: 30px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;      /* Evita quebrar texto */
  margin-top: 0px;
  margin-left: 5px;
}

#novo-chat {
  font-family: Roboto, system-ui;
  width: auto;
  min-width: 40px;
  height: 40px !important;
  background: #eeeeee !important;      /* Preto puro */
  border: 1px solid #ffffff !important;      /* Borda cinza */
  border-radius: 24px !important;         /* Arredonda só as laterais */
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  color: #000000 !important;                  /* Texto branco */
  font-size: 16px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;      /* Evita quebrar texto */
  margin-top: 0px;
  margin-left: 5px;
}

body.tema-escuro #oMenu,body.tema-escuro #tema-toggle, body.tema-escuro #novo-chat {
  background-color: #252525 !important;
  border: solid 1px #ffffff !important;
  color: #ffffff !important;
}

#plano-update {
  font-family: Roboto, system-ui;
  width: auto;
  min-width: 40px;
  height: 40px !important;
  background: linear-gradient(to right, #3535ff, #7700ff); /* Graidente roxo → azul */
  border: 1px solid #ffffff !important;      /* Borda cinza */
  border-radius: 24px !important;         /* Arredonda só as laterais */
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  color: #000000 !important;                  /* Texto branco */
  font-size: 30px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;      /* Evita quebrar texto */
  margin-top: 0px;
  margin-left: 5px;
}

#oMenu:hover, #oInfo:hover, #tema-toggle:hover, #novo-chat:hover, #plano-update:hover {
  transform: scale(1.1) !important;
}

#oMenu:active, #oInfo:active, #tema-toggle:active, #novo-chat:active, #plano-update:active {
  transform: scale(0.95) !important;
}

#menu-itens button:hover {
  box-shadow: 0 6px 16px rgba(136, 136, 136, 0.8) !important;
  transform: scale(1.05) !important;
  border: 3px solid #888 !important;  
}

#menu-itens button:active {
  transform: scale(0.95) !important;
  box-shadow: 0 3px 8px rgba(136, 136, 136, 0.6) !important;
}

/* Scroll suave para página */
html { scroll-behavior: smooth; }

/* links */
a { color: #0000ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Seleção de texto */
::selection { background-color: #00ff73; color: #000; }

/* Linha horizontal */
hr {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, rgb(36, 36, 36), rgb(105, 105, 105));
  border-radius: 10px;
}

/* Título ou Letra grande */
h1 {
  font-family: 'Roboto', Geneva, Verdana, sans-serif;
  font-size: 30px;
  color: black;
}

#ronique {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 20px;
  color: black;
  margin-left: 10px;
}

/* Botões alinhados no header */
.botoes-header {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-top: -10px !important;
}



footer::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* espessura da borda */
  border-radius: 30px;
  background-size: 300% 100%;
  background-color: #000000;

  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  z-index: -1; /* fica atrás do conteúdo */
}

body.tema-escuro footer::before { background-color: #FFF; }

.header {
  position: fixed;
  left: 50%;
  top: 05%;
  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1pt 10pt;
  border: none;
}

.esq { 
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #000000;
  background-color: #e0e0e0;
  border-radius: 30px;
  width: auto;
  height: 50px;
}

.corrector1 {
  display: flex; /* precisa disso pra alinhar */
  align-items: center;
  justify-content: center;
  flex: 1; /* ocupa todo espaço possível */
}

body.tema-escuro .esq {
  border-color: white;
  background-color: #3b3b3b;
}

#logo {
  width: 40px; /* Um pouco maior para mais visibilidade */
  height: 40px; /* Mantém o mesmo formato circular */
  border-radius: 50%; /* Garante o formato circular */
  margin-top: -3px;
  margin-left: 5px;
}

/* garante que o chat não fique embaixo do footer */
#conversa {
  max-height: calc(100vh - 140px); /* ajusta conforme header/footer */
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: rgba(255,255,255,0.5) transparent;
  padding-bottom: 90px; /* evita que a última mensagem fique por baixo do footer */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* scrollbar padrão invisível inicialmente */
#conversas::-webkit-scrollbar {
  width: 0px;             /* começa invisível */
  transition: width 0.3s ease;
}

/* track */
#conversas::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

/* thumb */
#conversas::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.5);
  border-radius: 4px;
}

/* ao passar o mouse, aumenta largura suavemente */
#conversas:hover::-webkit-scrollbar {
  width: 8px;             /* largura final */
}

/* Animação de fade-in para as respostas */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.menu-pontinhos {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: #b6b6b6 !important;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-pontinhos:hover { background-color: #ffffff; }

/* Usuário */
.usuario {
  background: #c5c5c5 !important;
  color: white;
  align-self: center; /* alinha à direita no flex container */
  max-width: 70%; /* limitar largura para ficar estilo chat */
  margin: 5px 0; /* espaçamento vertical */
  border-radius: 2cqi !important;
  border: 2px solid #ffffff !important;
}

/* Ronique */
.resposta {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, sans-serif !important;
  align-self: center;
  margin: 10px;
  max-width: 60%;
  border-radius: 20px;
  width: 60%;
  padding: 15px;
  width: fit-content;
  position: relative;
  font-size: 16px;
  background-color: none; /* Fundo suave com opacidade */
  color: #000000 !important; /* Cor do texto */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Efeitos de transição */
}

/* Container de cada resposta com logo */
.respostaContainer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  justify-content: center;  /* <- adicionado */
}

/* Logo da Ronique ao lado da resposta (usar classe pra cada mensagem) */
.logoRespostas {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  flex: 0 0 40px;
  margin-top: 15px;
}

input {
  font-size: 16px;
  font-family: "Roboto", sans-serif !important;
  border-radius: 999px !important; /* Totalmente arredondado */
  outline: none;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  transition: 
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    transform 0.2s ease;
  border: 2px solid transparent; /* borda invisível */
}

textarea {
  width: 550px;
  height: 70%;
  font-size: 16px;
  font-family: "Roboto", sans-serif !important;
  outline: none;
  background: none;
  border: 2px solid transparent;
  resize: none; /* proíbe redimensionar */
  overflow-y: auto;
  left: 0px;
  margin-left: -141px;
  transition: 
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    transform 0.2s ease;
}

textarea::-webkit-scrollbar {
  width: 12px;              /* largura da scrollbar */
  border-radius: 10px;      /* borda geral (mais arredondada) */
}

textarea::-webkit-scrollbar-track {
  background: #f0f0f0;      /* fundo da barra */
  border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
  background: #888;          /* cor do "polegar" que você arrasta */
  border-radius: 10px;       /* deixa arredondado */
}

textarea::-webkit-scrollbar-thumb:hover {
  background: #555;          /* muda cor ao passar o mouse */
}

@keyframes rainbowGlowSlow {
  0%   { box-shadow: 0 0 3px 2px rgba(255, 0, 0, 0.4);   }
  14%  { box-shadow: 0 0 3px 2px rgba(255, 153, 0, 0.4); }
  28%  { box-shadow: 0 0 3px 2px rgba(255, 255, 0, 0.4); }
  42%  { box-shadow: 0 0 3px 2px rgba(0, 255, 0, 0.4);   }
  57%  { box-shadow: 0 0 3px 2px rgba(0, 255, 255, 0.4); }
  71%  { box-shadow: 0 0 3px 2px rgba(0, 0, 255, 0.4);   }
  85%  { box-shadow: 0 0 3px 2px rgba(255, 0, 255, 0.4); }
  100% { box-shadow: 0 0 3px 2px rgba(255, 0, 0, 0.4);   }
}

footer {
  position: relative;          /* mantém absoluto pro box2 funcionar */
  display: flex;
  align-items: center;
  justify-content: center;     /* centraliza o conteúdo dentro do footer */

  max-width: 720px;
  left: 50%;                   /* move pro meio da tela */
  transform: translateX(-50%); /* corrige a posição central */
  bottom: 20px;                /* afasta do fundo */
  backdrop-filter: blur(20px);           /* efeito blur */
  -webkit-backdrop-filter: blur(20px);   /* suporte Safari */

  padding: 6px 0;
  background: #00000000 !important;
  border-radius: 30px;
  transition: all 0.9s ease-in-out;
  margin-top: -85px;
}

#versao {text-align: center; font-family: Poppins, sans-serif; margin-top: -20px;}
/* Box2 fica no canto direito */
#box2 {
  background-color: #CCC;
  border: 1px solid #000;
  position: absolute;
  right: 4px;               /* distância da borda direita */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 50px;
  padding: 5px;
}

body.tema-escuro #box2 {
  background-color: #000;
  border: 1px solid #FFF;
}

/* Botão circular com imagem */
#mpp {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: #000;
  background-image: url('https://tse3.mm.bing.net/th/id/OIP.5u1aYbbfNIMwIWuMrf9nnAHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: red;               /* cor do texto */
  cursor: pointer;

  display: flex;            
  align-items: center;
  justify-content: center;

  transition: width 0.3s ease, border-radius 0.3s ease;
}

#anexar {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: #ffffff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: red;               /* cor do texto */
  cursor: pointer;
  display: flex;            
  align-items: center;
  justify-content: center;
  font-size: 22px;

  transition: width 0.3s ease, border-radius 0.3s ease;
}

/* ao segurar */
#mpp.active {
  background: none;
  width: 120px;        /* largura engordada */
  border-radius: 20px; /* mais retangular */
}

/* Botão enviar com animação */
#enviar {
  color: #000;
  font-size: larger;
  font-family: 'Roboto', system-ui;
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

#enviar:hover {
  background-color: rgba(138, 43, 226, 0.6);
  opacity: 0.85;
  transform: scale(1.1);
}

#enviar:active {
  background: linear-gradient(90deg, #8a2be2, #0000ff, #8a2be2);
  background-size: 300%;
  animation: moverCores 1s linear infinite;
  transform: scale(0.95);
}

#enviar.bloqueado {
  cursor: not-allowed !important;
  opacity: 0.6;
}

#enviar.bloqueado:hover {
  cursor: not-allowed !important;
}

#enviar button.animado {
  background: linear-gradient(90deg, #8a2be2, #0000ff, #8a2be2);
  background-size: 300% 100%;
  animation: moverCores 1.5s linear infinite;
  opacity: 1;
}

/* animação de cores */
@keyframes moverCores {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* === BOX DO CÓDIGO === */
.code-box {
  background: #ffffff;
  color: #d0d0d0;
  border: 2px solid #000000;
  border-radius: 25px;
  padding: 15px 10px 8px 10px; /* menos espaço embaixo */
  margin: 16px 0 8px 0;        /* menos margem embaixo */
  font-family: 'Consolas', sans-serif, monospace !important;
  font-size: 12px !important;
  max-width: 100%;
  overflow-x: auto;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  user-select: text;
  position: relative;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Scrollbar Custom (WebKit only) ===== */
.code-box::-webkit-scrollbar {
  height: 8px;              /* Scroll horizontal fino */
  width: 8px;               /* Scroll vertical fino (caso ative vertical também) */
}

.code-box::-webkit-scrollbar-track {
  background: #e0e0e0;      /* Trilha do scroll */
  border-radius: 10px;
}

.code-box::-webkit-scrollbar-thumb {
  background: #888;         /* Cor da barrinha */
  border-radius: 10px;
  transition: background 0.3s ease;
}

.code-box::-webkit-scrollbar-thumb:hover {
  background: #555;         /* Cor da barrinha ao passar o mouse */
}

.code-box-header,
.resposta .code-box-header {
  font-family: 'Consolas', Roboto, system-ui, sans-serif;
  background: #cccccc; /* preto com cinza bem escuro */
  color: #000000; /* cinza claro */
  padding: 4px 18px;
  border: 2px solid #000000;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  user-select: none;
  display: flex;
  align-items: center;
  margin-top: -7px;
}

/* === BOX DO CÓDIGO (ESCURO) === */
body.tema-escuro .code-box {
  background: #2e2e2e;
  color: #d0d0d0;
  border: 2px solid #ffffff;
}

body.tema-escuro .code-box-header,
body.tema-escuro .resposta .code-box-header {
  font-family: 'Consolas', Roboto, system-ui, sans-serif;
  background: #000000; /* preto com cinza bem escuro */
  color: #000000; /* cinza claro */
  border: 2px solid #ffffff;
}

/* === TABELA === */
table {
  width: 100%;
  border-collapse: collapse;
  background: #6e6e6e;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  border: #00000000;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

thead    { background-color: #274472; color: #e0ecff; text-shadow: 0 1px 2px #1a2c4f; }
table th { padding: 14px 20px; font-weight: bold; border-bottom: 2px solid #ffffff; letter-spacing: 0.5px; background: #c4c4c4; box-shadow: inset 0 -1px 0 #000000; color: #000; }
table td { padding: 12px 20px; border-bottom: 1px solid #ffffff; background: none; transition: background-color 0.3s ease; }
table tr { font-weight: bold; transition: all 0.2s ease-in-out; }
table tr:last-child td { border-bottom: none; }

/* === CONTA MATEMÁTICA === */
.romeths0101b7 {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 25px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin: 15px 0;
  font-family: "Times New Roman Condensed", "Times New Roman", Times, serif;
  font-size: 25px;
  font-weight: bold; /* 🔥 Deixa o texto grosso */
  color: #333;
}

@keyframes aparecer { to { opacity: 1; } }

/* === HIGHLIGHT FOR JAVASCRIPT === */
/* Principal */
.hljs {
  display: block !important;
  overflow-x: auto !important;
  background: transparent !important;
  color: #000000 !important;
  padding: 1px !important;
  font-family: Consolas, monospace !important; 
  font-size: 15px !important;
}

/* ========== TEMA CLARO ========== */

/* Palavras-chave e seletores */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  color: #15b5ff !important;
  font-weight: bold !important;
}

/* Comentários */
.hljs-comment,
.hljs-quote {
  color: #616161 !important;
  font-style: italic !important;
}

/* Strings e atributos */
.hljs-string,
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-template-tag,
.hljs-template-variable {
  color: #ffa600 !important;
}

/* Números e símbolos */
.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: #73ff00 !important;
}

/* Funções */
.hljs-function .hljs-title,
.hljs-function {
  color: #0051ff !important;
}

/* Variáveis e propriedades */
.hljs-variable,
.hljs-property,
.hljs-params {
  color: hsl(0, 100%, 84%) !important;
}

/* Metadados e tags */
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag,
.hljs-built_in,
.hljs-doctag {
  color: #3e5231 !important;
}

/* Ênfase */
.hljs-emphasis {
  font-style: italic !important;
}

/* BOLD */
.hljs-strong {
  font-weight: bolder !important;
}

/* Erros ou código inválido */
.hljs-error {
  color: red !important;
  background-color: #ff0000 !important;
  font-weight: italic !important;
}

/* ========== TEMA ESCURO ========== */
/* Principal */
body.tema-escuro .hljs {
  display: block !important;
  overflow-x: auto !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 1px !important;
  font-family: Consolas, monospace !important; 
  font-size: 15px !important;
}

body.tema-escuro .hljs-keyword,
body.tema-escuro .hljs-selector-tag,
body.tema-escuro .hljs-literal,
body.tema-escuro .hljs-section,
body.tema-escuro .hljs-link {
  color: #15b5ff !important;
  font-weight: bold !important;
}

body.tema-escuro .hljs-comment,
body.tema-escuro .hljs-quote {
  color: #616161 !important;
  font-style: italic !important;
}

body.tema-escuro .hljs-string,
body.tema-escuro .hljs-title,
body.tema-escuro .hljs-name,
body.tema-escuro .hljs-type,
body.tema-escuro .hljs-attribute,
body.tema-escuro .hljs-template-tag,
body.tema-escuro .hljs-template-variable {
  color: #ffa600 !important;
}

body.tema-escuro .hljs-string {
  color: #a6ff00 !important;
}

body.tema-escuro .hljs-number,
body.tema-escuro .hljs-symbol,
body.tema-escuro .hljs-bullet,
body.tema-escuro .hljs-punctuation {
  color: #00ff40 !important;
}

body.tema-escuro .hljs-function .hljs-title,
body.tema-escuro .hljs-function {
  color: #90b3ff !important;
}

body.tema-escuro .hljs-variable,
body.tema-escuro .hljs-property,
body.tema-escuro .hljs-params {
  color: hsl(0, 100%, 50%) !important;
}

body.tema-escuro .hljs-meta,
body.tema-escuro .hljs-meta-keyword,
body.tema-escuro .hljs-tag,
body.tema-escuro .hljs-built_in,
body.tema-escuro .hljs-doctag {
  color: #002fff !important;
}

body.tema-escuro .hljs-emphasis {
  font-style: italic !important;
}

body.tema-escuro .hljs-strong {
  font-weight: bolder !important;
}

body.tema-escuro .hljs-error {
  color: red !important;
  background-color: #ff0000 !important;
  font-weight: italic !important;
}

/* === CITAÇÃO === */
blockquote {
  font-style: italic;
  background: #f5f5f5cc;
  color: #111;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative;
  overflow: hidden;
}

/* borda esquerda moderna */
blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 90%;
  background: linear-gradient(to bottom, #000000, #000000);
  border-radius: 20px;
  margin-left: 4px;
  margin-top: 2px;
}

html, body { margin: 0; padding: 0; overflow: hidden; }

.menu-acao {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.menu-pontinhos:hover { color: white; }

.menu-opcoes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  background-color: #c9c9c9;
  border: 1px solid #ffffff;
  padding: 8px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.menu-opcoes button {
  font-family: 'Roboto', system-ui, sans-serif;
  background-color: #ffffff !important;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-opcoes button:hover { background-color: #666; }

.oculto { display: none; }

.resposta { word-break: break-word; overflow-wrap: anywhere; }

body.tema-escuro #tp {
  background: #000000 !important;
  color: #ffffff !important;
}

#tp:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9) !important; }
#tp:active { transform: translateY(0) scale(0.95) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.8) !important; }

    /* === FUNDO ESCURECIDO === */
.fundo-escuro {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  display: block;
  z-index: 9999;
  animation: aparecerFundo 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

@keyframes aparecerFundo {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === FRAME MAIOR ULTRA MODERNO === */
.frame-janela,
.frame-janela-conversas,
.frame-janela-perfil,
.frame-janela-menu,
.frame-janela-info {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  
  backdrop-filter: blur(16px) saturate(180%) !important;
  width: 900px !important;
  height: 900px !important;
  animation: surgirModerno 0.3s ease-out;
  transition: transform 0.45s ease-in-out, opacity 0.3s ease;
  overflow: auto !important;
  padding: 16px !important;
  color: #000000 !important;
  background-color: #0000;
}

/* entrando da direita */
.frame-slide-in {
  transform: translateX(0);
  opacity: 1;
}

/* antes de entrar (fora da tela no lado direito) */
.frame-pos-right {
  transform: translateX(120%);
  opacity: 0;
}

/* saindo pra esquerda */
.frame-slide-out-left {
  transform: translateX(-120%);
  opacity: 0;
}

/* saindo pra direita */
.frame-slide-out-right {
  transform: translateX(120%);
  opacity: 0;
}

/* Animação moderna */
@keyframes surgirModerno {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Suporte ao modo claro */
@media (prefers-color-scheme: light) {
  .frame-janela,
  .frame-janela-conversas,
  .frame-janela-perfil {
    color: #1110 !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
  }
}

    /* === TOPO DO FRAME === */
.frame-topo {
  background-color: #ffffff00;
  padding: 3px 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: move !important;
  border-radius: 30px !important;
  backdrop-filter: blur(8px) !important;
}

.frame-titulo {
  font-family: Roboto, Verdana, Tahoma, sans-serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  color: #000000 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.5px !important;
  user-select: none !important;
  background-color: #d6d6d6;
  border-radius: 50px;
  padding: 0 11px; 
}

    /* === BOTÃO DE FECHAR === */
.frame-fechar {
  background: radial-gradient(circle at center, #ff4d4d, #cc0000) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  border: none !important;
  color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  font-size: 16px !important;
  transition: all 0.2s ease-in-out !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important;
}

.frame-fechar:hover { background: linear-gradient(to bottom, #000000, #000000) !important; }
.frame-fechar:active { transform: scale(0.95) !important; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important; }

/* === CONTEÚDO DO FRAME — ULTRA MODERNO === */
.frame-conteudo {
  font-family: 'Roboto', Arial, sans-serif !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  padding: 24px 32px !important;
  font-size: 16px !important;
  color: #00000000 !important;
  line-height: 1.7 !important;
  border-radius: 18px !important;
  animation: surgir 0.35s ease-in-out !important;
  transition: all 0.3s ease-in-out !important;
}

.frame-conteudo ul { padding-left: 24px !important; list-style-type: disc !important; }
.frame-conteudo li { margin-bottom: 10px !important; color: #000000dd !important; font-size: 15px !important; }

/* === ANIMAÇÃO DE ENTRADA === */
@keyframes surgir { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* estado inicial: tudo invisível */
.fundo-escuro,
.frame-janela,
.frame-janela-conversas {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out,
              transform 0.3s ease-in-out,
              visibility 0.3s ease-in-out;
}

/* quando tiver a classe .ativo, aparece tudo */
.fundo-escuro.ativo, .frame-janela.ativo, .frame-janela-conversas.ativo { opacity: 1; pointer-events: auto; }

    /* Estilo geral do form dentro do frame */
    #config-form { margin-top: 15px; font-family: 'Roboto', sans-serif; font-size: 15px; color: #ffffff; } 

    /* Estilo dos labels que envolvem os checkboxes */
    #config-form label {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-bottom: 12px;
      user-select: none;
    }

    /* Checkbox customizado básico */
    #config-form input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin-right: 10px;
      cursor: pointer;
      accent-color: #00cc3d;
      flex-shrink: 0;
    }

    /* Estilo para o select (combo box) */
    #config-form select {
      width: 100%;
      max-width: 300px;
      padding: 8px 12px;
      border: 2px solid #66ff00;
      border-radius: 8px;
      font-size: 16px;
      font-family: inherit;
      background-color: #fff;
      color: #222;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      outline: none;
    }

    /* Focus do select */
    #config-form select:focus { border-color: #004a99; box-shadow: 0 0 6px rgba(0, 70, 160, 0.5); }

#enviar button { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; }
#enviar button img { width: 24px; height: 24px; }

@keyframes deslizar-esquerda { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100px); opacity: 0; } }
@keyframes deslizar-direita { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100px); opacity: 0; } }

.resposta.saindo-esquerda { animation: deslizar-esquerda 0.4s ease forwards; }
.usuario.saindo-direita { animation: deslizar-direita 0.4s ease forwards; }
.menu-ativo { display: block; animation: descer 0.3s forwards; }
.menu-esconder { animation: subir 0.3s forwards; }

@keyframes descer { from { height: 0; } to { height: 43px; /* altura final do seu menu */ } }
@keyframes subir { from { height: 43px; } to { height: 0; } }

#painel-frame-conversas,
#painel-frame-definicoes,
#painel-frame-perfil,
#painel-frame-versoes,
#painel-frame-menu,
#painel-frame-info,
#painel-frame-s {
  position: fixed;
  top: 25%;
  left: 13%;
  border-radius: 12px;
  z-index: 1000;   /* acima do fundo do modal */
  padding: 20px;
  border-radius: 12px;
  max-width: 90vw;
  max-height: 50vh;
  overflow-y: auto;
}

#profile {
    color: #000000;
    font-size: small; font-family: 'Roboto', system-ui;
    width: 100px; height: 40px;
    border-radius: 99px;
    background-color: #ffffff !important;
    display: flex;
    align-items: center; justify-content: center;
    overflow: hidden;
    transition: 0.3s ease;
    margin-top: -5px;
  }

#profile:hover { background-color: rgba(138, 43, 226, 0.6); opacity: 0.85; transform: scale(1.1); transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; }
#profile:active { background-size: 300%; transform: scale(0.95); transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; }

#painel-frame-conversas.ativo, #painel-frame-definicoes.ativo, #painel-frame-versoes.ativo #painel-frame-perfil.ativo { display: block !important; }
#reset-conversas { display: flex; opacity: 1; background-color: red; margin: auto; border-radius: 50px; }

#fotoperfil img {
  max-width: 140%;
  max-height: 140%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
  margin-left: -7px;
  margin-top: -2px;
}

#fotoperfil:after { border: 4px solid; border-image-slice: 1; border-image-source: linear-gradient(45deg, white, black); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5); }

#fotoperfil {
    font-size: 30px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgb(0, 0, 0);
    background-color: #ffffff;
    cursor: default;
    font-weight: bold;

    display: flex;
    align-items: center;     /* vertical */
    justify-content: center; /* horizontal */

    transition: transform 0.2s ease, box-shadow 0.3s ease !important;
}

body.pagina-invertida { filter: invert(1); }
body.resposta-rapida #conversa p { transition: 0.1s; /* super rápido */ }

#enviar button.animado { transform: scale(1.2); background: lime; transition: all 0.3s; }

#eFoto {
  font-family: Roboto, system-ui;
  width: auto;
  height: 40px !important;
  background-color: #eeeeee !important;      /* Preto puro */
  border: 1px solid #ffffff !important;      /* Borda cinza */
  border-radius: 24px !important;         /* Arredonda só as laterais */
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  color: #000000 !important;                  /* Texto branco */
  font-size: 16px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;      /* Evita quebrar texto */
  margin-top: 0px;
  margin-left: 5px;
}

#mostrarPlano {
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 10px;
  text-align: center;
  height: 16px;
  min-width: 40px;
  background-color: #000;
  border: 1px solid #404040 !important;
  border-radius: 24px !important;
  margin-top: 32px !important;
  margin-left: -42px;
  z-index: 9999;
}

/* Cobre o body inteiro (é div e com blur) */
#saudacao {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#l5u8ty3w0 {
  display: flex;
  background: #ffffff;
  padding: 0 24px 24px 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  text-align: center;
  z-index: 9999;
}
/* === TEMA ESCURO === */

body.tema-escuro {  background: linear-gradient(125deg, #505050, #272727) !important; color: #ffffff !important; display: flex !important; flex-direction: column !important; }
body.tema-escuro .frame-conteudo,
body.tema-escuro .frame-janela,
body.tema-escuro .frame-janela-conversas,
body.tema-escuro .frame-janela-perfil {
  color: white;
}

body.tema-escuro #enviar { background-color: #000000 !important; color: #ffffff !important; }
body.tema-escuro .resposta { color: #ffffff !important; }
body.tema-escuro .usuario { color: #ffffff !important; background: #000000 !important; }
body.tema-escuro blockquote { background-color: rgb(129, 129, 129) !important; color: rgb(0, 0, 0) !important; }
body.tema-escuro input { background-color: #272727 !important; color: #ffffff !important; padding: 5px !important; }
body.tema-escuro #pensarRonique, body.tema-escuro #mpp ,body.tema-escuro .romeths0101b7 { background-color: #272727 !important; }
body.tema-escuro button { background-color: #333 !important; color: #fff !important; border: 1px solid #ffffff !important; cursor: pointer !important; }
body.tema-escuro #profile { background-color: #111111 !important; color: #ffffff !important; border: 1px solid #555555 !important; cursor: pointer !important; }
body.tema-escuro button:hover { background-color: #333333 !important; }

/* Tema Escuro Roxo para tabela */
table.tema-escuro {
  border-collapse: collapse;
  background: linear-gradient(to bottom, #2e1a3e, #1a0f27);
  color: #d9ccff;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  border: 2px solid #7c4dff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(124, 77, 255, 0.5);
  overflow: hidden;
}

body.tema-escuro #menu-itens button { font-family: Roboto, system-ui; background-color: #525252 !important; border: 1px solid #ffffff !important; color: #ffffff !important; }
body.tema-escuro h1, body.tema-escuro h2, body.tema-escuro h3, 
body.tema-escuro h4, body.tema-escuro h5, body.tema-escuro h6, 
body.tema-escuro p, body.tema-escuro input, body.tema-escuro textarea, 
body.tema-escuro strong,body.tema-escuro i, body.tema-escuro label,
body.tema-escuro span, body.tema-escuro ul, body.tema-escuro li { 
  color: white !important; 
}

.resposta.digitando { animation: piscandoOpacidade 1.5s infinite; opacity: 0.3; /* valor inicial */ font-style: italic; color: gray; }
@keyframes piscandoOpacidade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }