/* Shoutbox staff tools, pinned announcement and Admin CP > Shoutbox. Loads only while the shoutbox is on. */
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.sb-head > span { min-width: 0; overflow-wrap: anywhere; }
.sb-manage { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; margin: -6px -6px -6px 0; border-radius: var(--r-pill); color: var(--text-faint); }
.sb-manage:hover, .sb-manage:focus-visible { color: var(--text); background: var(--surface-2); }
.sb-manage svg { width: 15px; height: 15px; }

.sb-pin { display: flex; align-items: flex-start; gap: 8px; margin: 0 var(--s-5) 4px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--fs-sm); line-height: 1.45; }
.sb-pin > svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.sb-pin-body { min-width: 0; overflow-wrap: anywhere; }
.sb-pin-body > :first-child { margin-top: 0; } .sb-pin-body > :last-child { margin-bottom: 0; }

/* The sidebar card floats in with the others: Online now is 2, Community stats 4. */
.side .shoutbox.rise { --i: 1; } /* first card in the sidebar, floats in first */
.shout { overflow-wrap: anywhere; }
.sb-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; opacity: 0; transition: opacity var(--t-med, .2s) ease; }
.shout:hover .sb-tools, .shout:focus-within .sb-tools { opacity: 1; }
@media (hover: none) { .sb-tools { opacity: 1; } }
.sb-tools form { display: inline-flex; margin: 0; }
.sb-tool { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-faint); cursor: pointer; line-height: 0; }
.sb-tool svg { width: 13px; height: 13px; }
.sb-tool:hover, .sb-tool:focus-visible { color: var(--text); background: var(--surface-2); }
.sb-tools form .sb-tool:hover { color: var(--neg); }
.sb-muted { padding: 10px var(--s-5); border-top: 1px solid var(--border); }

.sb-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: var(--s-4); }
.sb-choice label.check { margin: 0; }
.sb-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: var(--s-4) var(--s-5) 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--fs-sm); }
.sb-now > span { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }

.sb-kpis { grid-template-columns: repeat(3, 1fr); }
.sb-tidy { display: grid; gap: 10px; }
.sb-tidy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--fs-sm); }
.sb-tidy-row > span, .sb-tidy-row > label { min-width: 0; flex: 1 1 220px; }
.form label.sb-inline, label.sb-inline { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-weight: 500; }
.sb-inline select { width: auto; }
.sb-mutes { display: grid; gap: 8px; padding: var(--s-4) var(--s-5) 0; }
.sb-mute { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.sb-mute-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 220px; }
.sb-mute-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-weight: 600; }
.sb-kind { flex: none; white-space: nowrap; padding: 2px 8px; border-radius: var(--r-pill); font: 650 var(--fs-xs)/1.4 var(--font-ui); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.sb-reason { min-width: 0; overflow-wrap: anywhere; }
.sb-mute form { margin: 0; display: inline-flex; flex: none; }
@media (max-width: 640px) { .sb-kpis { grid-template-columns: 1fr; } }