/* ==========================================
   KLS.IA - ESTILO COMPLETO
   Chat + Histórico + Temas + Login + PDF
========================================== */

:root {
  color-scheme: dark;
  --bg: #0d1019;
  --sidebar: #111522;
  --surface: #171c2a;
  --surface-hover: #22283a;
  --border: #2b3244;
  --text: #f1f3fb;
  --muted: #9aa4bb;
  --accent: #7567ff;
  --accent-hover: #9185ff;
  --shadow: rgba(0, 0, 0, .35);
  --composer: #1b2130;
  --user-bubble: #39316c;
  --assistant-bubble: #171c2a;
}

html[data-theme="light"],
body.light {
  color-scheme: light;
  --bg: #f7f8fc;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f0f2f8;
  --border: #e1e5ef;
  --text: #20263a;
  --muted: #667187;
  --accent: #6455e9;
  --accent-hover: #796cf5;
  --shadow: rgba(27, 39, 75, .09);
  --composer: #ffffff;
  --user-bubble: #eae6ff;
  --assistant-bubble: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
}

a {
  color: var(--accent-hover);
}

::selection {
  background: rgba(117, 103, 255, .35);
}

/* ==========================================
   LAYOUT PRINCIPAL
========================================== */

.main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: 275px;
  background: var(--bg);
}

.overlay {
  display: none;
}

/* ==========================================
   MENU LATERAL
========================================== */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: 275px;
  padding: 20px 14px;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 10px;
  margin-bottom: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.6px;
}

.brand-logo-box {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(104, 92, 255, .08);
}

.brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 19px;
}

.icon-button:hover {
  background: var(--surface-hover);
}

.close-sidebar {
  display: none;
}

.new-chat-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 45px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.new-chat-button:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.new-chat-button span {
  font-size: 21px;
  line-height: 1;
}

.sidebar-label {
  margin: 25px 10px 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ==========================================
   HISTÓRICO DE CONVERSAS
========================================== */

.history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2px;
}

.history-item,
.chat-history-item,
.history button {
  max-width: 100%;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  border-radius: 10px;
}

.history-item:hover {
  background: var(--surface-hover);
}

.history-item.active {
  background: rgba(117, 103, 255, .15);
}

.history-item button,
.history-item .history-title {
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item button:first-child,
.history-item .history-title {
  flex: 1;
  min-width: 0;
  padding: 11px;
  text-align: left;
}

.history-item button:last-child {
  flex-shrink: 0;
  padding: 7px;
}

.delete-all-button {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.delete-all-button:hover {
  background: var(--surface-hover);
  color: #ff929e;
}

.sidebar-footer {
  padding: 15px 10px 2px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}

.sidebar-footer p {
  margin: 0 0 4px;
  color: var(--text);
  font-weight: 700;
}

.sidebar-footer small {
  color: var(--muted);
  font-size: 11px;
}

/* ==========================================
   BARRA SUPERIOR
========================================== */

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 70px;
  padding: 12px 27px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-right {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.topbar-brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.menu-button {
  display: none;
}

.theme-toggle,
.clear-button,
.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.theme-toggle:hover,
.clear-button:hover,
.account-button:hover {
  background: var(--surface-hover);
}

.account-button {
  border-color: rgba(117, 103, 255, .45);
  background: rgba(117, 103, 255, .13);
}

.theme-icon {
  font-size: 16px;
}

.status {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ==========================================
   ÁREA DE CONVERSAS
========================================== */

.chat-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 24px;
}

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  min-height: 55vh;
  margin: auto;
  padding: 28px 15px;
  text-align: center;
}

.welcome-logo-box {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  margin-bottom: 23px;
  border-radius: 30px;
  background: radial-gradient(
    circle,
    rgba(96, 86, 255, .13),
    transparent 75%
  );
}

.welcome-logo {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(
    0 0 15px rgba(0, 229, 255, .22)
  );
}

.welcome h1 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(25px, 3.2vw, 36px);
  font-weight: 750;
  letter-spacing: -1px;
  line-height: 1.2;
}

.welcome > p {
  max-width: 520px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 690px;
}

.suggestion {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 105px;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: .2s ease;
}

.suggestion:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.suggestion strong {
  font-size: 14px;
  font-weight: 700;
}

.suggestion span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ==========================================
   KLS.IA - CSS - PARTE 2
   MENSAGENS E CONTEÚDO
========================================== */

/* ÁREA DE MENSAGENS */

.messages,
#messages {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 15px 0 35px;
}

.message {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.8;
}

.message.user {
  align-self: flex-end;
  max-width: min(85%, 700px);
  padding: 12px 17px;
  border: 1px solid rgba(117, 103, 255, .18);
  border-radius: 17px 17px 5px 17px;
  background: var(--user-bubble);
  color: var(--text);
  white-space: pre-wrap;
}

.message.bot,
.message.assistant {
  align-self: stretch;
  padding: 17px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--assistant-bubble);
  color: var(--text);
}

.message.error {
  border-color: rgba(239, 68, 68, .45);
  color: #f87171;
}

.message.streaming {
  min-height: 48px;
}

.message.streaming::after {
  display: inline-block;
  width: 7px;
  height: 17px;
  margin-left: 5px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: middle;
  animation: klsCursor 1s steps(2) infinite;
  content: "";
}

@keyframes klsCursor {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

/* MARKDOWN */

.message.bot p,
.message.assistant p {
  margin: 0 0 13px;
}

.message.bot p:last-child,
.message.assistant p:last-child {
  margin-bottom: 0;
}

.message.bot h1,
.message.bot h2,
.message.bot h3,
.message.bot h4,
.message.assistant h1,
.message.assistant h2,
.message.assistant h3,
.message.assistant h4 {
  margin: 22px 0 10px;
  color: var(--text);
  font-weight: 750;
  line-height: 1.35;
}

.message.bot h1,
.message.assistant h1 {
  font-size: 24px;
}

.message.bot h2,
.message.assistant h2 {
  font-size: 20px;
}

.message.bot h3,
.message.assistant h3 {
  font-size: 17px;
}

.message.bot h4,
.message.assistant h4 {
  font-size: 15px;
}

.message.bot ul,
.message.bot ol,
.message.assistant ul,
.message.assistant ol {
  margin: 10px 0 15px;
  padding-left: 25px;
}

.message.bot li,
.message.assistant li {
  margin: 5px 0;
}

.message.bot strong,
.message.assistant strong {
  color: var(--text);
  font-weight: 750;
}

.message.bot blockquote,
.message.assistant blockquote {
  margin: 15px 0;
  padding: 10px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: var(--surface-hover);
  color: var(--muted);
}

.message.bot hr,
.message.assistant hr {
  height: 1px;
  margin: 22px 0;
  border: 0;
  background: var(--border);
}

.message.bot a,
.message.assistant a {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.message.bot a:hover,
.message.assistant a:hover {
  opacity: .8;
}

/* CÓDIGOS */

.message code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-hover);
  font-family: Consolas, Monaco, monospace;
  font-size: .9em;
}

.message pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 15px 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #101522;
  color: #e8ecfa;
}

.message pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}

html[data-theme="light"] .message pre {
  background: #202638;
  color: #f3f5ff;
}

/* TABELAS MARKDOWN */

.markdown-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 15px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.message table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.message th,
.message td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.message th {
  background: var(--surface-hover);
  font-weight: 750;
}

.message tr:last-child td {
  border-bottom: 0;
}

/* FONTES DA INTERNET */

.web-sources {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.web-sources h4 {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.web-sources a {
  display: block;
  overflow: hidden;
  color: var(--accent-hover);
  font-size: 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-sources a:hover {
  text-decoration: underline;
}

/* IMAGENS GERADAS */

.message.image-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.image-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.generated-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 600px;
  border: 1px solid var(--border);
  border-radius: 14px;
  object-fit: contain;
}

.download-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none !important;
}

.download-image:hover {
  background: var(--surface-hover);
}

/* CARTÃO DO PDF DENTRO DA CONVERSA */

.pdf-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}

.pdf-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==========================================
   KLS.IA - CSS - PARTE 3
   COMPOSER E FERRAMENTAS
========================================== */

/* REGIÃO INFERIOR DO CHAT */

.chat-footer,
.input-area,
.composer-area,
.chat-input-area {
  position: relative;
  z-index: 15;
  width: 100%;
  padding: 12px 22px 17px;
  background: var(--bg);
}

.chat-footer {
  margin-top: auto;
}

/* FORMULÁRIO */

#chatForm,
.chat-form {
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

/* CAIXA PRINCIPAL DE DIGITAÇÃO */

.composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--composer);
  box-shadow: 0 5px 22px var(--shadow);
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.composer:focus-within {
  border-color: rgba(117, 103, 255, .7);
  box-shadow:
    0 0 0 3px rgba(117, 103, 255, .09),
    0 5px 22px var(--shadow);
}

/* CAMPO DE TEXTO */

#userInput,
.composer textarea {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  max-height: 180px;
  padding: 7px 3px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
}

#userInput::placeholder,
.composer textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

#userInput:focus,
.composer textarea:focus {
  outline: none;
}

/* BOTÃO DE ENVIAR */

#sendBtn,
.send-button {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #ffffff;
  font-size: 19px;
  transition:
    background .2s ease,
    transform .2s ease;
}

#sendBtn:hover:not(:disabled),
.send-button:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* BOTÃO DE PARAR */

#stopBtn,
.stop-button {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 12px;
  background: rgba(239, 68, 68, .13);
  color: #f87171;
  font-size: 17px;
}

#stopBtn:hover,
.stop-button:hover {
  background: rgba(239, 68, 68, .22);
}

#stopBtn[hidden] {
  display: none !important;
}

/* LINHA DE FERRAMENTAS */

.composer-tools,
.tools-row,
.input-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 850px;
  margin: 0 auto 10px;
}

.tools-left,
.tools-right,
.mode-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* BOTÕES DOS MODOS */

.mode-button,
#webMode,
#imageMode,
#pdfAttachBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.mode-button:hover:not(:disabled),
#webMode:hover:not(:disabled),
#imageMode:hover:not(:disabled),
#pdfAttachBtn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--surface-hover);
  color: var(--text);
}

.mode-button.active,
#webMode.active,
#imageMode.active {
  border-color: rgba(117, 103, 255, .65);
  background: rgba(117, 103, 255, .15);
  color: var(--accent-hover);
}

#pdfAttachBtn {
  color: var(--text);
}

/* BOTÃO DE FERRAMENTAS */

#toolsToggle,
.tools-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

#toolsToggle:hover,
.tools-toggle:hover {
  background: var(--surface-hover);
}

/* MENU SUSPENSO */

#toolsMenu,
.tools-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 190px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 12px 35px var(--shadow);
}

#toolsMenu[hidden],
.tools-menu[hidden] {
  display: none !important;
}

#toolsMenu button,
.tools-menu button {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}

/* AVISO ABAIXO DA CAIXA */

.composer-disclaimer,
.input-disclaimer,
.chat-disclaimer {
  max-width: 850px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

/* BARRA DE ROLAGEM */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 20px;
  background: #737b9066;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #8993ab99;
  background-clip: padding-box;
}

/* ==========================================
   KLS.IA - CSS - PARTE 4
   RESPONSIVIDADE E STATUS
========================================== */

/* STATUS DA CONEXÃO */

#status,
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

#status.internet-ativa,
.status.internet-ativa {
  color: #22c55e;
}

#status.offline,
.status.offline {
  color: #ef4444;
}

/* BOTÃO DE LIMPAR CONVERSA */

#clearChat,
.clear-chat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

#clearChat:hover,
.clear-chat-button:hover {
  background: var(--surface-hover);
}

/* SOBREPOSIÇÃO PARA MENU MOBILE */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: rgba(0, 0, 0, .58);
}

#overlay.show {
  display: block;
}

/* TABLETS */

@media (max-width: 1024px) {
  .sidebar {
    width: 245px;
  }

  .main {
    margin-left: 245px;
  }

  .topbar {
    padding: 12px 19px;
  }

  .chat-area {
    padding: 18px;
  }

  .chat-footer,
  .input-area,
  .composer-area,
  .chat-input-area {
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* CELULARES */

@media (max-width: 768px) {
  .main {
    width: 100%;
    min-height: 100dvh;
    margin-left: 0;
  }

  .sidebar {
    width: min(290px, 85vw);
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 15px 0 40px rgba(0, 0, 0, .15);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .close-sidebar {
    display: grid;
  }

  .menu-button,
  #menuBtn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 21px;
  }

  .topbar {
    min-height: 60px;
    padding: 10px 13px;
  }

  .topbar-left,
  .topbar-right {
    gap: 7px;
  }

  .topbar-brand {
    font-size: 16px;
  }

  .theme-toggle,
  .clear-button,
  .account-button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  #themeText {
    display: none;
  }

  .chat-area {
    padding: 15px 12px;
  }

  .welcome {
    min-height: 48vh;
    padding: 20px 8px;
  }

  .welcome-logo-box {
    width: 95px;
    height: 95px;
    margin-bottom: 17px;
  }

  .welcome-logo {
    width: 90px;
    height: 90px;
  }

  .welcome h1 {
    font-size: 26px;
  }

  .welcome > p {
    font-size: 13px;
  }

  .suggestions {
    gap: 9px;
  }

  .suggestion {
    min-height: 95px;
    padding: 13px;
    border-radius: 12px;
  }

  .suggestion strong {
    font-size: 12px;
  }

  .suggestion span {
    font-size: 11px;
  }

  #messages,
  .messages {
    gap: 16px;
    padding-bottom: 25px;
  }

  .message.user {
    max-width: 90%;
    padding: 11px 13px;
    font-size: 13px;
  }

  .message.bot,
  .message.assistant {
    padding: 13px;
    border-radius: 13px;
    font-size: 13px;
  }

  .chat-footer,
  .input-area,
  .composer-area,
  .chat-input-area {
    padding: 9px 11px 13px;
  }

  .composer {
    gap: 8px;
    padding: 9px;
    border-radius: 14px;
  }

  #userInput,
  .composer textarea {
    font-size: 14px;
  }

  #sendBtn,
  #stopBtn {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
  }

  .mode-button,
  #webMode,
  #imageMode,
  #pdfAttachBtn,
  #toolsToggle {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* CELULARES PEQUENOS */

@media (max-width: 480px) {
  .topbar {
    gap: 5px;
    padding: 8px 10px;
  }

  .topbar-brand {
    font-size: 15px;
  }

  #status {
    font-size: 10px;
  }

  #clearChat {
    padding: 7px;
    font-size: 11px;
  }

  .welcome h1 {
    font-size: 23px;
  }

  .suggestions {
    grid-template-columns: 1fr;
  }

  .suggestion {
    min-height: auto;
    padding: 13px 15px;
  }

  .composer-tools,
  .tools-row,
  .input-tools {
    gap: 7px;
  }

  .tools-left,
  .tools-right,
  .mode-buttons {
    gap: 6px;
  }

  .mode-button,
  #webMode,
  #imageMode,
  #pdfAttachBtn,
  #toolsToggle {
    padding: 7px 8px;
    font-size: 10px;
  }

  .message.user {
    max-width: 94%;
  }
}

/* PREFERÊNCIA POR MENOS ANIMAÇÕES */

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .suggestion,
  .composer,
  #sendBtn,
  .mode-button {
    transition: none;
  }

  .message.streaming::after {
    animation: none;
  }
}

/* ==========================================
   KLS.IA - CSS - PARTE 5
   CARTÃO DE PDF E BARRAS DE STATUS
========================================== */


/* PREVIA DE FOTOGRAFIA - KLS.IA */

#imagePendingPreview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  max-width: 850px;
  min-width: 0;

  margin: 0 auto 10px;
  padding: 10px 12px;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: var(--composer);
  box-shadow: 0 5px 20px var(--shadow);

  color: var(--text);
  overflow: hidden;
}

#imagePendingPreview[hidden] {
  display: none !important;
}

#imagePendingThumbnail {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: cover;
  border-radius: 8px;
}

#imagePendingPreview .pdf-pending-details {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#imagePendingName {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#imagePendingStatus {
  display: block;
  color: var(--muted);
}

#imagePendingRemove {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 8px;
}

/* CARTÃO DO PDF ACIMA DO COMPOSER */

#pdfPendingPreview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  max-width: 850px;
  min-width: 0;

  margin: 0 auto 8px;
  padding: 10px 13px;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: var(--composer);
  box-shadow: 0 5px 20px var(--shadow);

  overflow: hidden;
}

/* ESCONDE QUANDO NÃO EXISTIR PDF */

#pdfPendingPreview[hidden] {
  display: none !important;
}

/* ÍCONE DO DOCUMENTO */

#pdfPendingPreview .pdf-pending-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 40px;
  width: 40px;
  height: 44px;

  border-radius: 9px;
  background: rgba(117, 103, 255, .10);

  font-size: 22px;
}

/* ÁREA DO NOME E STATUS */

#pdfPendingPreview .pdf-pending-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;

  min-width: 0;
}

/* NOME DO PDF */

#pdfPendingName {
  display: block;

  max-width: 100%;
  overflow: hidden;

  color: var(--text);
  font-size: 13px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MENSAGEM DO STATUS */

#pdfPendingStatus {
  display: block;

  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* BOTÃO PARA REMOVER PDF */

#pdfPendingRemove {
  display: grid;
  place-items: center;

  flex: 0 0 32px;
  width: 32px;
  height: 32px;

  margin-left: auto;
  padding: 0;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--surface);
  color: var(--text);

  font-size: 15px;
}

#pdfPendingRemove:hover {
  border-color: rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .10);
  color: #ef4444;
}

/* ==========================================
   LINHA DE PROGRESSO
========================================== */

/* A linha fica abaixo do nome e status */

#pdfPendingPreview .pdf-pending-details::after {
  display: block;

  width: 100%;
  height: 3px;

  margin-top: 5px;

  border-radius: 99px;
  background: transparent;

  content: "";
}

/* ==========================================
   VERMELHA - PDF CARREGANDO
========================================== */

#pdfPendingPreview.pdf-loading
.pdf-pending-details::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ef4444 35%,
    #ff6b6b 50%,
    #ef4444 65%,
    transparent 100%
  );

  background-size: 200% 100%;

  animation: klsPdfBarra 1.2s linear infinite;
}

/* ==========================================
   VERDE - PDF PRONTO
========================================== */

#pdfPendingPreview.pdf-ready
.pdf-pending-details::after {
  background: #22c55e;
  animation: none;
}

/* ==========================================
   VERMELHA FIXA - ERRO NO PDF
========================================== */

#pdfPendingPreview.pdf-error
.pdf-pending-details::after {
  background: #ef4444;
  animation: none;
}

/* ==========================================
   ANIMAÇÃO DA LINHA VERMELHA
========================================== */

@keyframes klsPdfBarra {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ==========================================
   ESTADOS VISUAIS DO CARTÃO
========================================== */

#pdfPendingPreview.pdf-loading {
  border-color: rgba(239, 68, 68, .28);
}

#pdfPendingPreview.pdf-ready {
  border-color: rgba(34, 197, 94, .28);
}

#pdfPendingPreview.pdf-error {
  border-color: rgba(239, 68, 68, .45);
}

/* ==========================================
   PDF EM TELAS MENORES
========================================== */

@media (max-width: 768px) {
  #pdfPendingPreview {
    gap: 10px;
    padding: 9px 11px;
    margin-bottom: 7px;
    border-radius: 12px;
  }

  #pdfPendingPreview .pdf-pending-icon {
    flex-basis: 36px;
    width: 36px;
    height: 40px;
    font-size: 20px;
  }

  #pdfPendingName {
    font-size: 12px;
  }

  #pdfPendingStatus {
    font-size: 10px;
  }

  #pdfPendingRemove {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  #pdfPendingPreview {
    gap: 8px;
    padding: 8px 9px;
  }

  #pdfPendingPreview .pdf-pending-icon {
    flex-basis: 33px;
    width: 33px;
    height: 37px;
    font-size: 18px;
  }

  #pdfPendingName {
    font-size: 11px;
  }

  #pdfPendingStatus {
    font-size: 10px;
  }
}

/* ==========================================
   ACESSIBILIDADE
========================================== */

@media (prefers-reduced-motion: reduce) {
  #pdfPendingPreview.pdf-loading
  .pdf-pending-details::after {
    animation: none;
    background: #ef4444;
  }


/* ==========================================
   CORREÇÃO DO BOTÃO DE FERRAMENTAS
   KLS.IA
========================================== */

/* Botão que abre as ferramentas */

#toolsToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  width: auto;
  min-width: 38px;
  height: 36px;

  padding: 7px 10px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface);
  color: var(--text);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

#toolsToggle:hover {
  background: var(--surface-hover);
}

/* Menu que aparece ao clicar no botão */

#toolsMenu {
  position: absolute;
  z-index: 999;

  display: flex;
  flex-direction: column;
  gap: 7px;

  min-width: 190px;
  padding: 10px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
  box-shadow: 0 10px 30px var(--shadow);
}

#toolsMenu[hidden] {
  display: none !important;
}

/* Opções dentro do menu */

#toolsMenu .mode-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  min-height: 38px;

  padding: 9px 12px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--composer);
  color: var(--text);

  text-align: left;
  font-size: 12px;
}

#toolsMenu .mode-button:hover {
  background: var(--surface-hover);
}


/* ==========================================
   KLS.IA - CORREÇÃO FINAL DO MENU
========================================== */

/* Botão com o clipe */

#toolsToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 38px;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface);
  color: var(--text);

  font-size: 19px;
  line-height: 1;
}

/* O formulário será a referência do menu */

#chatForm {
  position: relative;
}

/* Menu diretamente acima do botão */

#toolsMenu {
  position: absolute;

  left: 0;
  right: auto;
  bottom: calc(100% + 12px);

  z-index: 999;

  width: 190px;
  min-width: 190px;

  padding: 9px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
  box-shadow: 0 12px 30px var(--shadow);
}

/* Esconde o menu quando fechado */

#toolsMenu[hidden] {
  display: none !important;
}

/* Botões internos */

#toolsMenu .mode-button {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  min-height: 37px;

  padding: 9px 10px;

  font-size: 12px;
  text-align: left;
}

/* Ajustes no celular */

@media (max-width: 768px) {
  #toolsToggle {
    flex-basis: 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  #toolsMenu {
    width: 185px;
    min-width: 185px;
  }

}
}

/* ==========================================
   FIM DO CSS - KLS.IA
========================================== */




/* CAMERA AO VIVO KLS IA */
.kls-camera-modal[hidden] {
  display: none !important;
}

.kls-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.82);
}

.kls-camera-panel {
  width: min(560px, 100%);
  padding: 18px;
  border-radius: 20px;
  background: #242424;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.kls-camera-top,
.kls-camera-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kls-camera-top {
  margin-bottom: 14px;
}

.kls-camera-top button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

#klsCameraVideo {
  display: block;
  width: 100%;
  max-height: 60vh;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #111;
  border-radius: 12px;
}

#klsCameraStatus {
  margin: 12px 0;
  color: #ccc;
  font-size: 13px;
}

.kls-camera-actions button {
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: #444;
  color: #fff;
  cursor: pointer;
}

#klsCameraCapture {
  background: #2563eb;
  font-weight: 600;
}

#klsCameraCapture:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* KLS IA - CORRECAO CAMPO FIXO */

/* Mantem o chat dentro da altura da tela */
.main {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Permite rolar somente as mensagens */
.chat-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mantem a caixa de digitacao visivel */
.composer-wrapper {
  flex: 0 0 auto;
  position: relative;
  z-index: 15;
}


/* ==========================================
   KLS IA - VISUAL EXCLUSIVO DO ANEXO TXT
   ========================================== */

#textPendingPreview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  max-width: 850px;
  margin: 0 auto 10px;
  padding: 12px 14px;

  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--composer);
  box-shadow: 0 5px 20px var(--shadow);

  color: var(--text);
  box-sizing: border-box;
}

#textPendingPreview[hidden] {
  display: none !important;
}

#textPendingPreview .pdf-pending-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 44px;
  font-size: 25px;
}

#textPendingPreview .pdf-pending-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#textPendingName {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#textPendingStatus {
  color: var(--muted);
  font-size: 11px;
}

#textPendingRemove {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

#textPendingRemove:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

@media (max-width: 600px) {
  #textPendingPreview {
    gap: 8px;
    padding: 9px;
  }

  #textPendingName {
    font-size: 12px;
  }
}


/* CENTRAL DA CONTA KLS.IA */

.account-sidebar[hidden],
.profile-menu[hidden] {
    display: none !important;
}

.account-sidebar {
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 12px;
}

.profile-menu-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.profile-menu-button:hover {
    background: var(--surface-hover);
}

.profile-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-hover);
    font-size: 18px;
}

.profile-button-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.profile-button-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-button-text small {
    color: var(--muted);
    font-size: 11px;
}

.profile-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 150;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--sidebar);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.profile-menu button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.profile-menu button:hover {
    background: var(--surface-hover);
}

#profileLogoutBtn {
    border-top: 1px solid var(--border);
    border-radius: 0;
    margin-top: 5px;
    color: #ff929e;
}

/* =========================================================
   KLS.IA - ESTILOS DA TELA DE LOGIN
   ========================================================= */

/* Esconde completamente a janela quando estiver desativada. */
.auth-overlay[hidden] {
    display: none !important;
}

/* Cria o fundo escurecido e centraliza a janela de login. */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.65);
    overflow-y: auto;
}

/* Define o tamanho e a aparencia da janela de login. */
.auth-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--sidebar);
    color: var(--text);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
}

/* Centraliza o logotipo dentro da janela. */
.auth-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Impede que o logotipo ocupe toda a tela. */
.auth-logo {
    display: block;
    width: 76px;
    height: 76px;
    max-width: 100%;
    object-fit: contain;
}

/* Posiciona o botao de fechar no canto superior direito. */
.auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
}

/* Destaca o botao de fechar ao passar o mouse. */
.auth-close:hover {
    background: var(--surface-hover);
}

/* Organiza os elementos do formulario verticalmente. */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Adapta a janela para telas pequenas. */
@media (max-width: 480px) {
    .auth-overlay {
        padding: 12px;
    }

    .auth-card {
        padding: 22px 18px;
        max-height: calc(100vh - 24px);
    }
}

/* ==========================================================
   KLS.IA - FORMULARIO DE LOGIN PROFISSIONAL
   ========================================================== */

/* Esconde os elementos desativados pelo JavaScript. */
.auth-card [hidden] {
    display: none !important;
}

/* Organiza cada campo com o titulo acima da caixa de texto. */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Define a aparencia dos titulos dos campos. */
.auth-field label {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

/* Estiliza os campos de nome, e-mail e senha. */
.auth-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--sidebar);
    color: var(--text);
    font-size: 14px;
    outline: none;
}

/* Destaca o campo selecionado pelo usuario. */
.auth-field input:focus {
    border-color: #19b9d0;
    box-shadow: 0 0 0 3px rgba(25, 185, 208, 0.14);
}

/* Ajusta a cor do texto de exemplo dos campos. */
.auth-field input::placeholder {
    color: var(--muted);
}

/* Estiliza o botao principal de entrar ou criar conta. */
.auth-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(110deg, #079ed0, #08bd83);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease;
}

/* Destaca o botao quando o mouse passa sobre ele. */
.auth-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

/* Diferencia o botao enquanto uma solicitacao esta em andamento. */
.auth-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Centraliza a divisoria entre login por e-mail e Google. */
.auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0;
    color: var(--muted);
    font-size: 12px;
}

/* Cria as linhas laterais da divisoria. */
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Adiciona espaco ao redor da palavra "ou". */
.auth-divider span {
    padding: 0 14px;
}

/* Centraliza o botao oficial de login do Google. */
.google-login-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Centraliza o convite para criar ou acessar uma conta. */
.auth-switch-text {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* Estiliza o botao que alterna login e cadastro. */
.auth-switch-button {
    padding: 5px;
    border: 0;
    background: transparent;
    color: #079ed0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* Destaca a alternancia de login e cadastro. */
.auth-switch-button:hover {
    text-decoration: underline;
}

/* Exibe mensagens de erro de forma legivel. */
.auth-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    font-size: 13px;
}

/* Destaca o aviso de limite gratuito. */
.auth-limit-message {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

/* Melhora a leitura da descricao da janela. */
.auth-description {
    margin: 10px 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Organiza o rodape da janela de login. */
.auth-footer {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

/* Centraliza e destaca o titulo da janela. */
.auth-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

/* Centraliza a descricao logo abaixo do titulo. */
.auth-card .auth-description {
    text-align: center;
}

/* ==========================================================
   KLS.IA - JANELA MEU PERFIL
   ========================================================== */

/* Mantem a janela invisivel quando estiver fechada. */
.account-profile-overlay[hidden] {
    display: none !important;
}

/* Cria o fundo escurecido e centraliza a janela. */
.account-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.60);
}

/* Define a aparencia principal da janela. */
.account-profile-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--sidebar);
    color: var(--text);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
}

/* Estiliza o titulo Meu Perfil. */
.account-profile-card h2 {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
}

/* Posiciona o botao de fechar no canto superior direito. */
.account-profile-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
}

/* Destaca o botao de fechar ao passar o mouse. */
.account-profile-close:hover {
    background: var(--surface-hover);
}

/* Centraliza a foto ou o avatar do usuario. */
.account-profile-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

/* Define o tamanho e o formato circular da foto. */
.account-profile-photo img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
}

/* Oculta a imagem quando nao existir foto cadastrada. */
.account-profile-photo img[hidden] {
    display: none !important;
}

/* Cria um avatar alternativo para contas sem foto. */
.account-profile-photo span {
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--surface-hover);
    font-size: 38px;
}

/* Organiza cada informacao do usuario. */
.account-profile-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Estiliza os rotulos Nome e E-mail. */
.account-profile-field strong {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* Destaca os dados reais da conta. */
.account-profile-field span {
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 500;
}

/* Estiliza o aviso sobre futuras edicoes. */
.account-profile-note {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* Ajusta a janela para celulares. */
@media (max-width: 480px) {
    .account-profile-overlay {
        padding: 12px;
    }

    .account-profile-card {
        padding: 24px 18px;
        max-height: calc(100vh - 24px);
    }
}

/* ==========================================================
   KLS.IA - ESTILOS DO EDITOR DE NOME
   ========================================================== */

/* Garante que os controles ocultos continuem invisiveis. */
#accountProfileNameEditor[hidden],
#accountProfileEditName[hidden] {
    display: none !important;
}

/* Organiza os elementos do formulario de edicao. */
#accountProfileNameEditor {
    width: 100%;
    margin-top: 12px;
}

/* Coloca o texto Novo nome acima do campo. */
#accountProfileNameEditor label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

/* Faz o campo ocupar toda a largura disponivel. */
#accountProfileNameInput {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--sidebar);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
}

/* Destaca o campo quando o usuario estiver digitando. */
#accountProfileNameInput:focus {
    border-color: #6254d8;
    box-shadow: 0 0 0 3px rgba(98, 84, 216, 0.12);
}

/* Estiliza o botao que abre a edicao. */
#accountProfileEditName {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-hover);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Organiza os botoes Salvar e Cancelar lado a lado. */
.account-profile-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* Define o formato compartilhado dos botoes. */
.account-profile-edit-actions button {
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* Destaca a acao principal de salvar. */
#accountProfileSaveName {
    flex: 1;
    border: 1px solid #6254d8;
    background: #6254d8;
    color: #ffffff;
}

/* Mantem o botao Cancelar discreto. */
#accountProfileCancelName {
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
}

/* Fornece retorno visual ao passar o mouse. */
.account-profile-edit-actions button:hover,
#accountProfileEditName:hover {
    opacity: 0.85;
}

/* Identifica visualmente um botao temporariamente desativado. */
.account-profile-edit-actions button:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Organiza mensagens de erro e confirmacao. */
#accountProfileNameMessage {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Evita espaco vazio quando nao existe mensagem. */
#accountProfileNameMessage:empty {
    display: none;
}

/* Ajusta os botoes em telas muito pequenas. */
@media (max-width: 360px) {
    .account-profile-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .account-profile-edit-actions button {
        width: 100%;
    }
}

/* ==========================================================
   KLS.IA - ESTILOS DA JANELA CONFIGURACOES
   ========================================================== */

/* Define o espacamento da janela de configuracoes. */
.account-settings-card {
    max-width: 440px;
}

/* Organiza a secao Aparencia. */
.account-settings-section {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* Estiliza o titulo Aparencia. */
.account-settings-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

/* Estiliza a descricao das preferencias. */
.account-settings-section > p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Remove as bordas padrao do grupo de opcoes. */
.account-settings-theme-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

/* Mantem a legenda acessivel sem ocupar espaco visual. */
.account-settings-theme-options legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Cria uma area clicavel para cada opcao de tema. */
.account-settings-theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--sidebar);
    color: var(--text);
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

/* Destaca a opcao quando o mouse passa sobre ela. */
.account-settings-theme-option:hover {
    background: var(--surface-hover);
}

/* Estiliza os botoes circulares de selecao. */
.account-settings-theme-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #6254d8;
    cursor: pointer;
}

/* Organiza o texto de cada tema. */
.account-settings-theme-option span {
    font-size: 14px;
    font-weight: 500;
}

/* Destaca a opcao atualmente selecionada. */
.account-settings-theme-option:has(input:checked) {
    border-color: #6254d8;
    background: rgba(98, 84, 216, 0.08);
}

/* Destaca o foco para navegacao por teclado. */
.account-settings-theme-option:focus-within {
    outline: 2px solid #6254d8;
    outline-offset: 2px;
}

/* Ajusta os espacamentos em celulares. */
@media (max-width: 480px) {
    .account-settings-theme-option {
        min-height: 48px;
        padding: 12px;
    }
}

/* ==========================================================
   KLS.IA - ESTILOS DOS TRES PLANOS
   ========================================================== */

/* Define a largura da janela e permite rolagem em telas pequenas. */
.account-plans-card {
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    box-sizing: border-box;
}

/* Estiliza a descricao abaixo do titulo Planos. */
.account-plans-intro {
    margin: 4px 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Cria os cartoes individuais de cada plano. */
.account-plan-item {
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--sidebar);
}

/* Organiza o nome do plano e seu identificador. */
.account-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 13px;
}

/* Destaca o nome do plano. */
.account-plan-header strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

/* Identifica o plano atual com um selo verde. */
.account-plans-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
}

/* Identifica os planos que ainda nao estao disponiveis. */
.account-plan-soon {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

/* Remove a formatacao padrao das listas de recursos. */
.account-plan-item ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Organiza cada recurso do plano. */
.account-plan-item li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

/* Adiciona um simbolo de confirmacao antes dos recursos. */
.account-plan-item li::before {
    content: "\2713";
    flex-shrink: 0;
    color: #16a34a;
    font-weight: 800;
}

/* Identifica visualmente a ausencia de geracao no plano gratuito. */
.account-plan-item:first-of-type li:nth-child(2)::before {
    content: "\00D7";
    color: var(--muted);
}

/* Estiliza a informacao de cobranca do plano gratuito. */
.account-plan-item small {
    display: block;
    margin-top: 13px;
    color: var(--muted);
    font-size: 12px;
}

/* Destaca discretamente o cartao Pro. */
.account-plan-item:nth-of-type(3) {
    border-color: rgba(98, 84, 216, 0.5);
}

/* Estiliza a mensagem final sobre os planos premium. */
.account-plans-footer {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* Ajusta a janela para telas de celulares. */
@media (max-width: 480px) {
    .account-plans-card {
        max-height: calc(100dvh - 24px);
    }

    .account-plan-item {
        padding: 13px;
    }
}

/* ==========================================================
   KLS.IA - ESTILOS DA JANELA SEGURANCA
   ========================================================== */

/* Garante que a janela oculta nao apareca na tela. */
#accountSecurityOverlay[hidden] {
    display: none !important;
}

/* Define a largura e permite rolagem em telas pequenas. */
.account-security-card {
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    box-sizing: border-box;
}

/* Organiza cada secao da janela. */
.account-security-section {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--border);
}

/* Estiliza os titulos das secoes. */
.account-security-section h3 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

/* Estiliza as explicacoes das secoes. */
.account-security-section > p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Organiza o formulario de alteracao de senha. */
.account-security-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--sidebar);
}

/* Estiliza os rotulos dos campos. */
.account-security-form label {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

/* Estiliza os campos de senha. */
.account-security-form input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin-bottom: 7px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--sidebar);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
}

/* Destaca o campo quando recebe o foco. */
.account-security-form input:focus {
    border-color: #6254d8;
    box-shadow: 0 0 0 3px rgba(98, 84, 216, 0.12);
}

/* Mantem os campos desativados visualmente discretos. */
.account-security-form input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Estiliza o botao de alterar senha. */
#accountSecuritySavePassword {
    min-height: 43px;
    margin-top: 5px;
    padding: 11px 15px;
    border: 1px solid #6254d8;
    border-radius: 10px;
    background: #6254d8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* Identifica que o botao ainda nao esta disponivel. */
#accountSecuritySavePassword:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Reserva espaco para mensagens de validacao. */
#accountSecurityPasswordMessage {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Esconde a area de mensagem enquanto estiver vazia. */
#accountSecurityPasswordMessage:empty {
    display: none;
}

/* Cria o cartao informativo da sessao atual. */
.account-security-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--sidebar);
}

/* Organiza as informacoes da sessao. */
.account-security-session > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Destaca o nome do dispositivo. */
.account-security-session strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

/* Estiliza a descricao da sessao. */
.account-security-session small {
    color: var(--muted);
    font-size: 12px;
}

/* Cria o indicador verde de sessao ativa. */
.account-security-active {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Estiliza o aviso sobre o gerenciamento de sessoes. */
.account-security-section .account-security-note {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* Ajusta a janela para telas de celulares. */
@media (max-width: 480px) {
    .account-security-card {
        max-height: calc(100dvh - 24px);
    }

    .account-security-form,
    .account-security-session {
        padding: 13px;
    }
}

/* ==========================================================
   KLS.IA - OCULTAR BOTOES SUPERIORES
   ========================================================== */

/* Oculta o botao Entrar sem remover sua referencia interna. */
#accountBtn {
    display: none !important;
}

/* Oculta o botao de tema, mantendo o controle por Configuracoes. */
#themeToggle {
    display: none !important;
}

/* ==========================================================
   KLS.IA - BOTAO DO MENU SEMPRE VISIVEL
   ========================================================== */

/* Mantem o botao de abrir o menu acessivel no cabecalho. */
#menuBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-shrink: 0;
}

/* Garante que o cabecalho possa exibir o botao. */
.topbar-left {
    display: flex;
    align-items: center;
}

/* Evita que o botao fique atras de outros elementos. */
#menuBtn {
    position: relative;
    z-index: 10;
}

/* ==========================================================
   KLS.IA - LAYOUT RETRATIL DESKTOP
   ========================================================== */

/* No computador, esconde completamente o menu lateral. */
@media (min-width: 769px) {

  body.sidebar-collapsed #sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
  }

  /* Libera todo o espaco para a conversa. */
  body.sidebar-collapsed .main {
    margin-left: 0;
  }

  /* Evita que o menu crie fundo escurecido. */
  .overlay,
  .overlay.show {
    display: none !important;
  }

  /* Suaviza a abertura e o fechamento. */
  #sidebar {
    transition: transform 0.22s ease, visibility 0.22s;
  }

  .main {
    transition: margin-left 0.22s ease;
  }
}

/* No celular, nao aplica o recolhimento do computador. */
@media (max-width: 768px) {

  body.sidebar-collapsed .main {
    margin-left: 0;
  }

}

/* ==========================================================
   KLS.IA - ENTRAR DEPOIS DE LIMPAR
   ========================================================== */

/* Mantem os controles do cabecalho organizados em linha. */
.topbar-right {
    display: flex;
    align-items: center;
}

/* Coloca o botao Limpar antes do botao Entrar. */
#clearChat {
    order: 1;
}

/* Mostra novamente o botao de autenticacao. */
#accountBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 2;
}

/* Mantem o indicador de status depois do botao Entrar. */
#status {
    order: 3;
}

/* Preserva o botao de tema oculto no cabecalho. */
#themeToggle {
    display: none !important;
}

/* ==========================================================
   KLS.IA - RODAPE CENTRALIZADO COM ASSINATURA
   ========================================================== */

/* Centraliza o aviso e a assinatura na largura disponivel. */
.kls-chat-credits {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 14px 12px;
    text-align: center;
}

/* Centraliza o texto de aviso e remove margens laterais. */
.kls-chat-credits .disclaimer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text);
    opacity: 0.7;
}

/* Destaca a linha de credito sem ocupar muito espaco. */
.kls-developer-credit {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    text-align: center;
}

/* Destaca o nome da empresa e permite clicar no WhatsApp. */
.kls-developer-credit a {
    color: #6354ed;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Mostra uma resposta visual ao passar o mouse no link. */
.kls-developer-credit a:hover {
    color: #4938c7;
}

/* Facilita a navegacao pelo teclado. */
.kls-developer-credit a:focus-visible {
    outline: 2px solid #6354ed;
    outline-offset: 3px;
    border-radius: 2px;
}


/* BLUE - AJUSTES VISUAIS - ETAPA 413 */

/* Logo original da Intramind no menu */
.brand-logo-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: transparent;
}

.brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* Mascote original Blue no centro */
.welcome-logo-box {
    width: 190px;
    height: 260px;
    margin-bottom: 20px;
    border-radius: 0;
    background: transparent;
}

.welcome-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 120, 220, 0.14));
}

/* Ajuste para telas menores */
@media (max-width: 600px) {
    .welcome-logo-box {
        width: 145px;
        height: 200px;
        margin-bottom: 16px;
    }

    .welcome-logo {
        width: 100%;
        height: 100%;
    }
}


/* BLUE - LOGO MENU - ETAPA 415 */

/* Centralizar a identidade visual no menu */
.brand-logo-box {
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border-radius: 0;
}

/* Ampliar a imagem original sem deformar */
.brand-logo {
    display: block;
    width: 110px;
    height: 76px;
    max-width: 100%;
    object-fit: contain;
}


/* BLUE - CENTRALIZACAO - ETAPA 417 */

/* Fazer a area da logo ocupar a largura do menu */
.brand {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centralizar a logo dentro dessa area */
.brand-logo-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

/* Preservar o tamanho aprovado */
.brand-logo {
    width: 110px;
    height: 76px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}


/* BLUE - PALETA OFICIAL - ETAPA 419 */

/* Tema escuro */
:root {
    --bg: #0B1424;
    --sidebar: #101D31;
    --surface: #17263C;
    --surface-hover: #213650;
    --border: #2B415D;
    --text: #EDF6FF;
    --muted: #A4B8CF;
    --accent: #2687F5;
    --accent-hover: #51B7FF;
    --shadow: rgba(0, 8, 24, 0.32);
    --composer: #17263C;
    --user-bubble: #173E70;
    --assistant-bubble: #17263C;
}

/* Tema claro */
html[data-theme="light"],
body.light {
    --bg: #F3F8FF;
    --sidebar: #FFFFFF;
    --surface: #FFFFFF;
    --surface-hover: #EAF4FF;
    --border: #D9E7F5;
    --text: #102A4C;
    --muted: #60758F;
    --accent: #075BC7;
    --accent-hover: #087CE5;
    --shadow: rgba(14, 75, 140, 0.09);
    --composer: #FFFFFF;
    --user-bubble: #DCEEFF;
    --assistant-bubble: #FFFFFF;
}

/* Selecao de texto */
::selection {
    background: rgba(0, 188, 235, 0.25);
}


/* BLUE - MENU AZUL - ETAPA 423 */

/* Menu lateral azul-marinho */
.sidebar {
    color: #F4FAFF;
    border-right: 1px solid rgba(64, 175, 255, 0.22);
    background:
        radial-gradient(
            ellipse at 10% 85%,
            rgba(0, 147, 255, 0.35),
            transparent 55%
        ),
        linear-gradient(
            165deg,
            #061D45 0%,
            #073578 55%,
            #064A9C 100%
        );
}

/* Titulos e textos dentro do menu */
.sidebar .brand,
.sidebar .sidebar-label,
.sidebar .sidebar-footer p {
    color: #F4FAFF;
}

.sidebar .sidebar-label,
.sidebar .sidebar-footer small {
    color: #B9D9FA;
}

/* Separacoes discretas */
.sidebar .sidebar-footer {
    border-top-color: rgba(188, 225, 255, 0.22);
}

/* Manter a logo centralizada */
.sidebar .brand,
.sidebar .brand-logo-box {
    justify-content: center;
    align-items: center;
}

/* Botao Nova conversa */
.sidebar #newChatBtn,
.sidebar .new-chat-btn {
    color: #FFFFFF;
    border: 1px solid rgba(120, 215, 255, 0.30);
    border-radius: 18px;
    background: linear-gradient(
        110deg,
        #087FF0,
        #0759D1
    );
    box-shadow: 0 7px 18px rgba(0, 30, 95, 0.22);
}

/* Efeito ao passar o mouse */
.sidebar #newChatBtn:hover,
.sidebar .new-chat-btn:hover {
    background: linear-gradient(
        110deg,
        #159BFF,
        #0870E6
    );
}

/* Texto da area da conta */
.sidebar .account-sidebar {
    color: #F4FAFF;
}


/* BLUE - CONTRASTE MENU - ETAPA 425 */

/* Cor padrao legivel dentro do menu */
.sidebar {
    color: #F5FAFF;
    --text: #F5FAFF;
    --muted: #BBD8F5;
    --border: rgba(200, 230, 255, 0.24);
    --surface: rgba(255, 255, 255, 0.08);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --accent: #4DB9FF;
    --accent-hover: #8AD9FF;
}

/* Titulos e links do menu */
.sidebar .sidebar-label,
.sidebar .sidebar-footer small {
    color: #C7E3FF;
}

/* Botao Nova conversa em azul */
.sidebar #newChatBtn,
.sidebar .new-chat-btn {
    color: #FFFFFF;
    background: linear-gradient(110deg, #087FF0, #0759D1);
    border-color: rgba(120, 215, 255, 0.35);
}

/* Estados de foco acessiveis */
.sidebar button:focus-visible,
.sidebar a:focus-visible {
    outline: 2px solid #8AD9FF;
    outline-offset: 2px;
}


/* BLUE - FUNDO COM ONDAS - ETAPA 427 */

/* Fundo principal com tons suaves de azul */
html[data-theme="light"] .main,
body.light .main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(
            ellipse at 92% 8%,
            rgba(0, 188, 235, 0.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #EAF6FF 0%,
            #F5FAFF 52%,
            #DDEFFF 100%
        );
}

/* Ondas decorativas no fundo */
html[data-theme="light"] .main::before,
body.light .main::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 48%;
    height: 230px;
    pointer-events: none;
    border-radius: 0 0 0 100%;
    background: linear-gradient(
        125deg,
        rgba(0, 185, 245, 0.24),
        rgba(0, 110, 230, 0.05)
    );
}

/* Onda inferior */
html[data-theme="light"] .main::after,
body.light .main::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 175px;
    pointer-events: none;
    border-radius: 100% 0 0 0;
    background: linear-gradient(
        135deg,
        rgba(0, 185, 245, 0.08),
        rgba(0, 150, 245, 0.28)
    );
}

/* Em telas pequenas, ondas mais discretas */
@media (max-width: 600px) {
    html[data-theme="light"] .main::before,
    body.light .main::before {
        width: 65%;
        height: 130px;
    }

    html[data-theme="light"] .main::after,
    body.light .main::after {
        width: 65%;
        height: 110px;
    }
}


/* BLUE - BOAS-VINDAS - ETAPA 431 */

/* Mascote original maior e centralizado */
.welcome-logo-box {
    width: 240px;
    height: 330px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    background: transparent;
}

.welcome-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(
        0 12px 20px rgba(0, 100, 210, 0.16)
    );
}

/* Saudacao principal */
.welcome .blue-greeting {
    margin: 0;
    color: #102A4C;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -1px;
    text-align: center;
}

/* Nome Blue destacado */
.welcome .blue-name {
    color: #087CE5;
}

/* Segunda frase */
.welcome .blue-greeting-subtitle {
    display: block;
    margin-top: 8px;
    color: #60758F;
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 500;
    letter-spacing: -0.3px;
}

/* Ajustes para celulares */
@media (max-width: 600px) {
    .welcome-logo-box {
        width: 165px;
        height: 225px;
        margin-bottom: 10px;
    }

    .welcome .blue-greeting {
        font-size: 27px;
    }

    .welcome .blue-greeting-subtitle {
        font-size: 17px;
    }
}

/* =========================================================
   BLUE - MENU DA CONTA - ETAPA 422
   Cores independentes do tema claro/escuro
   ========================================================= */

.sidebar .profile-menu-button {
    background: #172942;
    border-color: #2B415D;
    color: #EDF6FF;
}

.sidebar .profile-menu-button:hover {
    background: #213650;
}

.sidebar .profile-menu-button .profile-button-text strong {
    color: #EDF6FF;
}

.sidebar .profile-menu-button .profile-button-text small {
    color: #BBD8F5;
}

.sidebar .profile-menu-button .profile-avatar {
    background: #213650;
    color: #EDF6FF;
}

.sidebar .profile-menu {
    background: #101D31;
    border-color: #2B415D;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.sidebar .profile-menu button {
    background: transparent;
    color: #EDF6FF;
}

.sidebar .profile-menu button:hover,
.sidebar .profile-menu button:focus-visible {
    background: #213650;
    color: #FFFFFF;
}

.sidebar .profile-menu #profileLogoutBtn {
    border-top: 1px solid #2B415D;
    color: #FF929E;
}

.sidebar .profile-menu #profileLogoutBtn:hover {
    background: #38283C;
    color: #FFD5DA;
}

/* =========================================================
   BLUE - LOGIN E CADASTRO - ETAPA 426
   Identidade visual Blue / Intramind
   ========================================================= */

/* Fundo escurecido atras da janela */
.auth-overlay {
    background: rgba(6, 29, 69, 0.65);
    backdrop-filter: blur(5px);
}

/* Janela principal */
.auth-overlay .auth-card {
    background: #FFFFFF;
    color: #102A4C;
    border: 1px solid #D9E7F5;
    box-shadow: 0 22px 70px rgba(6, 29, 69, 0.25);
}

/* Logotipo Intramind */
.auth-overlay .auth-logo {
    width: 170px;
    height: 90px;
    max-width: 100%;
    object-fit: contain;
}

/* Titulo e descricao */
.auth-overlay .auth-card h2 {
    color: #102A4C;
}

.auth-overlay .auth-description,
.auth-overlay .auth-switch-text,
.auth-overlay .auth-footer,
.auth-overlay .auth-divider {
    color: #60758F;
}

/* Botao fechar */
.auth-overlay .auth-close {
    color: #60758F;
}

.auth-overlay .auth-close:hover {
    background: #EAF4FF;
    color: #075BC7;
}

/* Titulos dos campos */
.auth-overlay .auth-field label {
    color: #102A4C;
}

/* Campos de texto */
.auth-overlay .auth-field input {
    background: #F8FBFF;
    border: 1px solid #D9E7F5;
    color: #102A4C;
}

.auth-overlay .auth-field input::placeholder {
    color: #60758F;
}

/* Destaque ao selecionar um campo */
.auth-overlay .auth-field input:focus {
    border-color: #087CE5;
    box-shadow: 0 0 0 3px rgba(8, 124, 229, 0.16);
}

/* Botao principal azul */
.auth-overlay .auth-submit {
    background: linear-gradient(110deg, #087FF0, #0759D1);
    color: #FFFFFF;
}

.auth-overlay .auth-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

/* Link alternar login e cadastro */
.auth-overlay .auth-switch-button {
    color: #075BC7;
}

/* Linhas da divisoria */
.auth-overlay .auth-divider::before,
.auth-overlay .auth-divider::after {
    background: #D9E7F5;
}

/* Mensagens de erro */
.auth-overlay .auth-error {
    background: #FFF1F2;
    color: #B42332;
}

/* Aviso do limite gratuito */
.auth-overlay .auth-limit-message {
    background: #FFF8E8;
    border-color: #F3D79A;
    color: #6B4E16;
}

/* =====================================================
   BLUE - BOTAO ALTERAR SENHA - ETAPA 428
   ===================================================== */

/* Botao principal da janela Seguranca */
.account-security-card button[type="submit"],
.account-security-card .security-save-button,
.account-security-card .security-submit {
    background: linear-gradient(110deg, #087FF0, #0759D1);
    color: #FFFFFF;
    border-color: #0759D1;
}

/* Efeito ao passar o mouse */
.account-security-card button[type="submit"]:hover:not(:disabled),
.account-security-card .security-save-button:hover:not(:disabled),
.account-security-card .security-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

/* Destaque ao navegar pelo teclado */
.account-security-card button[type="submit"]:focus-visible,
.account-security-card .security-save-button:focus-visible,
.account-security-card .security-submit:focus-visible {
    outline: 2px solid #51B7FF;
    outline-offset: 3px;
}

/* =====================================================
   BLUE - SEGURANCA - ETAPA 431
   Correcao do botao Alterar senha
   ===================================================== */

/* Botao exato identificado no HTML */
#accountSecurityOverlay #accountSecuritySavePassword {
    background: linear-gradient(110deg, #087FF0, #0759D1);
    border: 1px solid #0759D1;
    color: #FFFFFF;
}

/* Efeito ao passar o mouse */
#accountSecurityOverlay #accountSecuritySavePassword:hover:not(:disabled) {
    filter: brightness(1.08);
}

/* Destaque de acessibilidade */
#accountSecurityOverlay #accountSecuritySavePassword:focus-visible {
    outline: 2px solid #51B7FF;
    outline-offset: 3px;
}

/* Campos de senha com destaque azul */
#accountSecurityOverlay .account-security-form input:focus {
    border-color: #087CE5;
    box-shadow: 0 0 0 3px rgba(8, 124, 229, 0.16);
}