/* ============================================================================
   Awwee renderer styles (scoped under .awwee-msg — cannot leak to the page)
   ----------------------------------------------------------------------------
   NOTE ON !important: site-wide CSS resets commonly kill list bullets and
   italics. These few rules are deliberately forced so the chat renders the same
   on any theme. Everything stays scoped under .awwee-msg, so nothing else on
   the site is affected.

   DARK / LIGHT: the colour follows the CHAT PANEL's own theme, not the OS.
   Put class="awwee-light" or "awwee-dark" on the chat container (the same place
   your sun/moon toggle switches). Light = blue (readable on white).
   Dark = brand yellow (pops on dark). Never yellow on white — it disappears.
   ============================================================================ */

.awwee-msg {
  --awwee-key: #1a6fd4;              /* default = light mode blue */
  line-height: 1.55;
  word-break: break-word;
}

/* theme, driven by the chat panel's own toggle (authoritative).
   .aw.light / .aw.dark are the exact classes the sun/moon button in
   awwee-chat.js already toggles — no extra JS hook needed. */
.aw.light .awwee-msg { --awwee-key: #1a6fd4; }  /* blue on light background */
.aw.dark  .awwee-msg { --awwee-key: #ffcf33; }  /* yellow on dark background */

/* line rhythm: a blank line becomes a real gap between thoughts */
.awwee-msg .awwee-line { display: block; }
.awwee-msg .awwee-line + .awwee-line,
.awwee-msg .awwee-line + ul, .awwee-msg .awwee-line + ol,
.awwee-msg ul + .awwee-line, .awwee-msg ol + .awwee-line { margin-top: 0.55em; }

/* emphasis — forced past site resets */
.awwee-msg strong, .awwee-msg b { font-weight: 700 !important; }
.awwee-msg em, .awwee-msg i     { font-style: italic !important; }
.awwee-msg u {
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* the one key thing — subtle weight + theme-aware colour */
.awwee-msg .awwee-key { font-weight: 600; color: var(--awwee-key); }

/* LISTS — most sites reset list-style to none, so set it explicitly */
.awwee-msg ul.awwee-ul {
  list-style: disc outside !important;
  margin: 0.45em 0 !important;
  padding-left: 1.35em !important;
}
.awwee-msg ol.awwee-ol {
  list-style: decimal outside !important;
  margin: 0.45em 0 !important;
  padding-left: 1.5em !important;
}
.awwee-msg ul.awwee-ul > li {
  list-style: disc outside !important;
}
.awwee-msg ol.awwee-ol > li {
  list-style: decimal outside !important;
}
.awwee-msg li {
  display: list-item !important;
  margin: 0.22em 0;
  padding: 0;
}
.awwee-msg li::marker { color: inherit; }

/* emoji a touch larger reads warmer */
.awwee-msg .awwee-emoji { font-size: 1.15em; line-height: 1; vertical-align: -0.05em; }

/* gentle entrance; respects reduced-motion */
@keyframes awweeRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.awwee-msg.awwee-animate { animation: awweeRise 260ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .awwee-msg.awwee-animate { animation: none; } }