/* Banners, on top of the admin's admin.css (cards, notices, badges, buttons, the cabinet switch). */
.narrow-card { max-width: 40rem; }
.notice.plain { border: 1px solid var(--pico-muted-border-color); }
.notice .refresh { margin: 0 0 0 0.6rem; padding: 0.15rem 0.6rem; }
.notice .bot-link { margin-left: 0.4rem; }

.set .card-head h3 { margin: 0; overflow-wrap: anywhere; }
.toggle { margin: 0; }
.head-actions { gap: 0.8rem; align-items: center; }
.head-actions button { margin: 0; }
.fold-summary { margin: 0.6rem 0 0; color: var(--pico-muted-color); font-size: 0.9rem; }
.first-hint { display: block; color: var(--pico-muted-color); margin: -0.4rem 0 0.8rem; }
.toggle input { margin: 0; }
.set-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0 1rem; margin-top: 1rem; }
.set-fields label:first-child { grid-column: 1 / -1; }
.obs small { color: var(--pico-muted-color); }
.set h4 { margin: 1rem 0 0.6rem; font-size: 1rem; }
.set > footer { margin-top: 1rem; }

/* A picture and its chat lines: side by side on a wide screen, one under the other on a phone. */
.item { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.8rem; margin-bottom: 0.8rem; }
.item.new { border-style: dashed; border-color: var(--pico-primary); }
.item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.item-head .row > * { margin: 0; }
.item-body { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 700px) { .item-body { grid-template-columns: minmax(0, 1fr); } }
img.picture { width: 100%; max-height: 10rem; object-fit: contain; border-radius: 4px; background: var(--pico-code-background-color); }
.line { margin-bottom: 0.6rem; }
.line textarea { margin-bottom: 0.3rem; }
.line .row > * { margin-bottom: 0; }
.line select { width: auto; flex: 1 1 14rem; }
.lines .hint { display: block; color: var(--pico-muted-color); margin-bottom: 0.4rem; }

/* A confirmation: the whole screen, its card in the middle (as in /bot/). */
dialog[open] { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; overflow-y: auto; }
dialog article { width: min(34rem, calc(100vw - 2rem)); margin: auto; }