/* The bot's feature pages (/bot/<slug>, Pages/BotFeature.cshtml): the page's own bits on top of the guide look, and the drawing of the bot's reply (made-up names), sized in plain pixels so it
   looks the same everywhere. */

.feature-page { max-width: 760px; }

.fp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.9rem; color: var(--bs-secondary-color); }
.fp-crumbs a { color: inherit; }
.fp-crumbs span[aria-current] { color: var(--bs-body-color); }

.fp-list { padding-left: 1.25rem; }
.fp-list li { margin-bottom: 0.45rem; }
.fp-list code, .fp-commands code { font-size: 0.9em; }

.fp-commands { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.fp-commands li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; padding: 0.35rem 0; border-bottom: 1px solid var(--bs-border-color); }
.fp-badge { padding: 0.05rem 0.55rem; border: 1px solid var(--bs-border-color); border-radius: 999px; font-size: 0.78rem; color: var(--bs-secondary-color); }

.fp-more { padding-left: 1.25rem; }
.fp-more li { margin-bottom: 0.3rem; }

/* the drawing of the bot's message */
.fp-mock { margin: 1.5rem 0; }
.fp-mock figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--bs-secondary-color); text-align: center; }

.fp-mock-inner {
  max-width: 560px; margin: 0 auto; padding: 1.4rem 1.6rem; border-radius: 14px; color: #dcddde; text-align: left; line-height: 1.4;
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px;
  background: radial-gradient(circle at 15% 0%, rgba(249, 115, 22, 0.16), transparent 60%), #0b0b0b;
}

.fp-cmd { margin-bottom: 1rem; color: #b5bac1; }
.fp-cmd b { color: #fff; }
.fp-cmd i { color: #facc15; font-style: normal; }
.fp-event { color: #8e9297; font-style: italic; }

.fp-msg { display: flex; gap: 0.8rem; }
.fp-avatar { flex: none; width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: #2a2018; }
.fp-body { min-width: 0; }
.fp-name { margin-bottom: 0.25rem; font-weight: 700; color: #fff; }
.fp-tag { margin-left: 0.3rem; padding: 0.08rem 0.4rem; border-radius: 4px; background: #5865f2; font-size: 0.7em; vertical-align: 0.1em; }

.fp-embed { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 1rem; border-left: 4px solid #f97316; border-radius: 5px; background: #19191b; }
.fp-embed strong { color: #fff; }
.fp-embed span { color: #b5bac1; }
.fp-say { color: #dcddde; }

.fp-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.fp-buttons u { padding: 0.35rem 1.1rem; border-radius: 5px; background: #4e5058; color: #fff; font-weight: 600; text-decoration: none; }
.fp-buttons u.primary { background: #5865f2; }

.fp-channels { max-width: 300px; margin: 0 auto; padding: 0.4rem 0; }
.fp-cat { margin-bottom: 0.3rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #8e9297; }
.fp-chan { padding: 0.3rem 0.5rem; border-radius: 5px; color: #b5bac1; }
.fp-chan-icon { opacity: 0.7; }

@media (max-width: 575.98px) {
  .fp-mock-inner { padding: 1rem; font-size: 14px; }
}