body {
  font-family: 'Courier New', monospace;
  background: #f3f3f3;
  color: #111;
  display: flex;
  justify-content: center;
  padding: 20px;
}

#app {
  width: 600px;
  max-width: 98vw;
  border: 2px solid #999;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#chatList button {
  display: block;
  width: 100%;
  background: #e9e9e9;
  border: 1px solid #bbb;
  padding: 6px;
  margin: 4px 0;
  cursor: pointer;
  text-align: left;
}

#chatView.hidden {
  display: none;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed #999;
  margin-bottom: 8px;
  padding-bottom: 4px;
}

#chatContainer {
  white-space: pre-wrap;
}

.break-line {
  text-align: center;
  color: #aaa;
  margin: 6px 0;
}

/* Tema escuro */
body.dark {
  background: #1a1a1a;
  color: #eee;
}

body.dark #app {
  background: #2a2a2a;
  border-color: #555;
}

body.dark #chatList button {
  background: #333;
  border-color: #555;
  color: #eee;
}

#forum-footer {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
  font-size: 0.95em;
  color: #666;
  text-align: center;
}
#forum-footer a {
  color: inherit;
  text-decoration: none;
  margin: 0 6px;
}
#forum-footer a:hover {
  text-decoration: underline;
}
body.dark #forum-footer {
  border-top-color: #444;
  color: #aaa;
}

.attachment {
  margin: 6px 0;
  text-align: left;
}
.attachment .attach-bubble {
  display: inline-block;
  background: #f6f8ff;
  border: 1px solid #d6dbff;
  padding: 6px 10px;
  border-radius: 8px;
  font-style: italic;
  color: #222;
}
.event {
  font-style: italic;
  color: #888;
}

/* Tema escuro: ajustar bolha de anexo */
body.dark .attachment .attach-bubble {
  background: #2f343a;
  border-color: #454b52;
  color: #e9eef6;
}

/* estilo para o link fictício em anexo (inline, itálico) */
.fake-attachment {
  font-style: italic;
  color: inherit;
  text-decoration: underline dotted;
  cursor: pointer;
}

/* garantir <em> esteja em itálico e sem quebrar layout */
.chat-container em, .attach-bubble em {
  font-style: italic;
}

.device-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  font-size: 12px;
  color: #222;
  background: #e8eef7;
  border-radius: 999px;
  vertical-align: middle;
}

/* variações para tema escuro, se você usar body.dark */
body.dark .device-badge {
  background: #33383f;
  color: #e9eef6;
}

/* opcional: regras específicas para mobile/desktop */
body.mobile #chatContainer { font-size: 14px; }
body.desktop #chatContainer { font-size: 16px; }

.narracao {
  margin: 12px 0;
  color: #222;
  font-style: normal;
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  text-align: center;
}
body.dark .narracao {
  background: none;
  color: #eee;
  border: none;
}

.pesterlog.hidden { display: none; }

/* Mobile: reduz largura e padding */
@media (max-width: 767px) {
  #app {
    width: 100vw;
    max-width: 100vw;
    padding: 2vw;
    border-width: 1px;
  }
  #header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .chat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Adicione ao style.css ou dentro do <style> do historinhas/index.html */
#listaCapitulos {
  display: block;
  margin-top: 32px;
  padding: 0 12px;
}

.cap-link {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 16px auto;
  padding: 5px 0;
  font-size: 1em;
  background: #e9e9e9;
  color: #222;
  border: 2px solid #bbb;
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  cursor: pointer;
}
.cap-link:hover,
.cap-link:focus {
  background: #d6d6d6;
  color: #000;
  outline: none;
}
body.dark .cap-link {
  background: #222;
  color: #eee;
  border-color: #444;
}
body.dark .cap-link:hover,
body.dark .cap-link:focus {
  background: #333;
  color: #fff;
}