body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html.dark body {
  background-color: #0d1117;
  color: #c9d1d9;
}

html.dark #generateButton {
  background-color: #1f6feb;
}

html.dark #generateButton:hover {
  background-color: #388bfd;
}

html.dark #contentFrame {
  background-color: #161b22;
  border-color: #30363d;
}

html.dark #errorMessage {
  background: #3d1515;
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark .modal-content {
  background-color: #161b22;
  border: 1px solid #30363d;
}

html.dark .modal-content h2 {
  color: #e6edf3;
}

html.dark .modal-content p {
  color: #8b949e;
}

html.dark .modal-content hr {
  border-top-color: #30363d;
}

html.dark .modal-close-btn {
  background-color: #1f6feb;
}

/* 🔑 Barra superior */
#topbar {
  width: 99%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px;
}

#homeIcon {
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 5%;
}

#topbar img.banner {
  display: block;
  margin: 0 auto;
  width: 50%;
  border-radius: 40px;
}

/* 👤 Botão estilo O365 */
.user-button {
  display: flex;
  align-items: center;
  background: #f3f2f1;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
}

.user-button img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-button span {
  font-weight: 500;
  color: #333;
}

.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 42px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  min-width: 220px;
  z-index: 100;
  flex-direction: column;
}

.user-dropdown a, .user-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
}

.user-dropdown a:hover, .user-dropdown button:hover {
  background: #f3f2f1;
}

/* 🖋 Botão gerar assinatura */
#generateButton {
  margin-top: 30px;
  padding: 12px 30px;
  font-size: 20px;
  color: #fff;
  background-color: #3182ce;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#generateButton:hover { background-color: #2b6cb0; }
#generateButton:active { transform: scale(0.98); }
#generateButton.loading { background-color: #a0aec0; cursor: wait; }

#contentFrame {
  background-color: #ffffffc7;
  width: 50%;
  min-height: 300px;
  border: 2px solid;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 11px 11px 12px 1px rgba(0, 0, 0, 0.1);
  border-color: #1c1c1c12;
}

#errorMessage {
  display: none;
  background: #fed7d7;
  color: #c53030;
  font-size: 18px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #f56565;
  max-width: 600px;
  text-align: center;
}

/* 🔘 Botão padrão (Copiar) */
#copyButtons {
  display: none;
  justify-content: center;
  margin-top: 10px;
}

#clickCopyButton {
  background-color: #f56565;
  padding: 10px 20px;
  font-size: 20px;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#clickCopyButton:hover { background-color: #e53e3e; }
#clickCopyButton:active { transform: scale(0.98); }

/* 🔗 Botão Abrir em nova guia */
#clickCopyButton.open {
  background-color: #4a4c4e;
  color: #ffffff;
}

#clickCopyButton.open:hover {
  background-color: #4a4c4e;
}

/* 📋 Modal informativo */
.modal {
  display: flex;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.modal.hidden {
  display: none;
}

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

.modal-content {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-content h2 {
  color: #2d3748;
  margin: 0 0 12px 0;
  font-size: 20px;
}

.modal-content p {
  color: #4a5568;
  line-height: 1.6;
  margin: 10px 0;
}

.modal-content hr {
  border: none;
  border-top: 1px solid #e2e8f0;
}

.modal-close-btn {
  background-color: #3182ce;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 16px;
  width: 100%;
  transition: background-color 0.2s ease;
}

.modal-close-btn:hover {
  background-color: #2b6cb0;
}