/* Minni's Shoutbox
   Colors come from the settings (Shoutbox › Settings › Look) as CSS variables.
   You can also override them in your theme, e.g.: .mnsb { --mnsb-accent: #b25c75; --mnsb-name-font: "Lora", serif; } */
.mnsb {
	--mnsb-card: #ffffff;
	--mnsb-card-alt: #fdf4f5;
	--mnsb-text: #2d2a3e;
	--mnsb-muted: #a8979d;
	--mnsb-accent: #b25c75;
	--mnsb-accent-strong: #9c4862;
	--mnsb-soft: #fbe9ec;
	--mnsb-border: #f1e2e6;
	--mnsb-input: #ffffff;
	--mnsb-button: #c06a82;
	--mnsb-button-text: #ffffff;
	--mnsb-shadow: rgba(178, 92, 117, .10);
	--mnsb-error: #c0392b;
	--mnsb-ok: #4f8a6b;
	--mnsb-radius: 14px;
	--mnsb-pill: 999px;
	--mnsb-name-font: inherit;

	position: relative;
	color: var(--mnsb-text);
	font-size: 15px;
	line-height: 1.45;
}
.mnsb *, .mnsb *::before, .mnsb *::after { box-sizing: border-box; }

/* Reset theme button styles inside the box */
.mnsb button {
	margin: 0; font: inherit; text-transform: none; letter-spacing: normal;
	box-shadow: none; text-shadow: none; min-height: 0; line-height: inherit;
}

/* ---------- Messages ---------- */
.mnsb-list { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px; }
.mnsb.has-height .mnsb-list { max-height: var(--mnsb-height); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* Scrollbars in the scheme colors (list with fixed height, smiley picker).
   Firefox uses the standard properties; Chrome/Safari use ::-webkit-scrollbar
   (Chrome ignores those as soon as scrollbar-color is set, and would show arrows). */
@supports (-moz-appearance: none) {
	.mnsb.has-height .mnsb-list, .mnsb-smilies {
		scrollbar-width: thin;
		scrollbar-color: var(--mnsb-border) transparent;
		scrollbar-color: color-mix(in srgb, var(--mnsb-accent) 40%, transparent) transparent;
	}
	.mnsb.has-height .mnsb-list:hover, .mnsb-smilies:hover {
		scrollbar-color: color-mix(in srgb, var(--mnsb-accent) 70%, transparent) transparent;
	}
}
.mnsb.has-height .mnsb-list::-webkit-scrollbar, .mnsb-smilies::-webkit-scrollbar { width: 8px; }
.mnsb.has-height .mnsb-list::-webkit-scrollbar-track, .mnsb-smilies::-webkit-scrollbar-track { background: transparent; }
.mnsb.has-height .mnsb-list::-webkit-scrollbar-button, .mnsb-smilies::-webkit-scrollbar-button { display: none; }
.mnsb.has-height .mnsb-list::-webkit-scrollbar-thumb, .mnsb-smilies::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--mnsb-accent) 40%, transparent);
	border: 2px solid transparent; background-clip: padding-box; border-radius: 999px;
}
.mnsb.has-height .mnsb-list::-webkit-scrollbar-thumb:hover, .mnsb-smilies::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--mnsb-accent) 70%, transparent);
}

.mnsb-item {
	margin: 0; padding: 7px 12px 10px;
	background: var(--mnsb-card);
	border: 1px solid var(--mnsb-border);
	border-radius: var(--mnsb-radius);
	box-shadow: 0 4px 18px var(--mnsb-shadow);
	transition: box-shadow .3s;
}
.mnsb-item:nth-child(even) { background: var(--mnsb-card-alt); }
.mnsb-item.is-pending { opacity: .6; font-style: italic; }
.mnsb-item.is-flash { animation: mnsb-flash 1.2s ease-out; }
@keyframes mnsb-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--mnsb-accent); } 100% { box-shadow: 0 4px 18px var(--mnsb-shadow); } }

.mnsb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-height: 24px; }
.mnsb-time { margin-left: auto; font-size: 12px; color: var(--mnsb-muted); white-space: nowrap; }
.mnsb-text { margin: 0; overflow-wrap: anywhere; }
.mnsb-msg { white-space: pre-wrap; }
.mnsb-name { color: var(--mnsb-accent); font-family: var(--mnsb-name-font); font-weight: 700; text-decoration: none; }
a.mnsb-name:hover { color: var(--mnsb-accent-strong); text-decoration: underline; }
.mnsb-msg a { color: var(--mnsb-accent); text-underline-offset: 2px; }
.mnsb-badge {
	display: inline-block; width: .82em; height: .82em; margin: 0 1px 0 4px;
	vertical-align: middle; position: relative; top: -.1em;
	color: var(--mnsb-accent); line-height: 0;
}
.mnsb-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mnsb-badge circle { fill: currentColor; }
.mnsb-badge path { fill: none; stroke: var(--mnsb-card); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mnsb-edited { font-size: 12px; color: var(--mnsb-muted); }
.mnsb-smiley { display: inline-block; height: 1.6em; width: auto; max-width: 3em; vertical-align: -.45em; }
.mnsb-empty { padding: 28px 8px; text-align: center; color: var(--mnsb-muted); }
.mnsb-empty.mnsb-error { color: var(--mnsb-error); }

/* Formatting and spoilers */
.mnsb-msg strong { font-weight: 700; }
.mnsb-spoiler {
	padding: 0 3px; border-radius: 4px; cursor: pointer;
	background: var(--mnsb-soft); color: transparent; text-shadow: 0 0 7px var(--mnsb-text);
	transition: color .2s, text-shadow .2s;
}
.mnsb-spoiler img { filter: blur(5px); }
.mnsb-spoiler a { color: transparent; }
.mnsb-spoiler.is-open { color: inherit; text-shadow: none; }
.mnsb-spoiler.is-open img { filter: none; }
.mnsb-spoiler.is-open a { color: var(--mnsb-accent); }

/* Reply quote */
.mnsb .mnsb-quote {
	display: block; width: 100%; margin: 0 0 3px; padding: 2px 8px;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;
	font-size: 12.5px; color: var(--mnsb-muted);
	background: var(--mnsb-soft); border: 0; border-left: 3px solid var(--mnsb-accent); border-radius: 0 calc(var(--mnsb-radius) * .45) calc(var(--mnsb-radius) * .45) 0;
	cursor: pointer;
}
.mnsb .mnsb-quote strong { color: var(--mnsb-accent); font-weight: 600; }
.mnsb .mnsb-quote.is-deleted { cursor: default; font-style: italic; }

/* ---------- Reactions and actions (in the time row, so they cost no height) ---------- */
.mnsb-reacts { position: relative; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.mnsb-reacts:empty { display: none; }
.mnsb .mnsb-reacts button, .mnsb .mnsb-act {
	padding: 0 8px; height: 22px; line-height: 20px; cursor: pointer;
	font-size: 12px; color: var(--mnsb-text); background: var(--mnsb-soft);
	border: 1px solid transparent; border-radius: var(--mnsb-pill);
	transition: border-color .15s, background .15s, opacity .15s;
}
.mnsb .mnsb-reacts button:hover, .mnsb .mnsb-act:hover { border-color: var(--mnsb-accent); }
.mnsb .mnsb-reacts button:disabled { cursor: default; opacity: .85; }
.mnsb .mnsb-reacts .mnsb-chip.is-mine { border-color: var(--mnsb-accent); font-weight: 700; color: var(--mnsb-accent-strong); }
.mnsb .mnsb-act { padding: 0 6px; color: var(--mnsb-accent); background: transparent; opacity: 0; }
.mnsb-item:hover .mnsb-act, .mnsb-item:focus-within .mnsb-act, .mnsb .mnsb-add[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .mnsb .mnsb-act { opacity: .7; } }
.mnsb-picker {
	position: absolute; left: 0; top: calc(100% + 4px); z-index: 12; white-space: nowrap;
	display: inline-flex; gap: 2px; padding: 3px 5px;
	background: var(--mnsb-card); border: 1px solid var(--mnsb-border); border-radius: var(--mnsb-pill); box-shadow: 0 4px 18px var(--mnsb-shadow);
}
.mnsb-picker[hidden] { display: none; }
.mnsb .mnsb-picker button { padding: 0 6px; height: 28px; font-size: 17px; background: transparent; }
.mnsb .mnsb-picker button:hover { background: var(--mnsb-soft); border-color: transparent; transform: scale(1.15); }

/* ---------- Bar: pages + refresh ---------- */
.mnsb-bar { display: flex; align-items: center; gap: 8px; padding: 8px 2px 6px; }
.mnsb .mnsb-link {
	padding: 3px 12px; border: 0; border-radius: var(--mnsb-pill); cursor: pointer;
	font-size: 13px; color: var(--mnsb-accent); background: transparent;
	transition: background .15s;
}
.mnsb .mnsb-link:hover { background: var(--mnsb-soft); }
.mnsb .mnsb-refresh { margin-left: auto; }
.mnsb-pager { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mnsb-muted); }
.mnsb-pager[hidden] { display: none; }
.mnsb .mnsb-pager .mnsb-link:disabled { opacity: .35; cursor: default; background: transparent; }

/* ---------- Form ---------- */
.mnsb-form { position: relative; margin: 0; }
.mnsb-row { display: flex; gap: 8px; margin-bottom: 6px; }
.mnsb-input {
	flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 12px;
	font: inherit; color: var(--mnsb-text);
	background: var(--mnsb-input); border: 1px solid var(--mnsb-border); border-radius: calc(var(--mnsb-radius) * .86);
	transition: border-color .15s, box-shadow .15s;
}
.mnsb-input::placeholder { color: var(--mnsb-muted); }
.mnsb-input:focus { outline: none; border-color: var(--mnsb-accent); box-shadow: 0 0 0 3px var(--mnsb-soft); }
.mnsb-textarea { resize: none; min-height: 52px; }
.mnsb .mnsb-send {
	flex: 0 0 auto; width: 58px; padding: 0;
	font-weight: 700; letter-spacing: .02em; cursor: pointer;
	color: var(--mnsb-button-text); background: var(--mnsb-button);
	border: 0; border-radius: calc(var(--mnsb-radius) * .86);
	transition: background .15s, transform .1s;
}
.mnsb .mnsb-send:hover { background: var(--mnsb-accent-strong); }
.mnsb .mnsb-send:active { transform: scale(.96); }
.mnsb .mnsb-send:disabled { opacity: .5; cursor: wait; }
.mnsb-me { margin: 0 0 6px; font-size: 13px; color: var(--mnsb-muted); }
.mnsb-me strong { color: var(--mnsb-accent); }

/* Reply/edit banner floats over the bar above the form – no extra height */
.mnsb-context {
	position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 15;
	display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
	font-size: 13px; color: var(--mnsb-text);
	background: var(--mnsb-soft); border: 1px solid var(--mnsb-border); border-radius: calc(var(--mnsb-radius) * .86);
}
.mnsb-context[hidden] { display: none; }
.mnsb-context-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mnsb-context-text strong { color: var(--mnsb-accent); }
.mnsb .mnsb-context-cancel {
	flex: 0 0 auto; width: 24px; height: 24px; padding: 0; cursor: pointer;
	color: var(--mnsb-accent); background: transparent; border: 0; border-radius: 50%;
}
.mnsb .mnsb-context-cancel:hover { background: var(--mnsb-card); }

.mnsb-foot { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mnsb-tools { display: inline-flex; gap: 2px; margin-right: auto; }
.mnsb .mnsb-tools button {
	min-width: 28px; height: 26px; padding: 0 7px; cursor: pointer;
	font-size: 13px; color: var(--mnsb-text); background: transparent;
	border: 1px solid transparent; border-radius: calc(var(--mnsb-radius) * .57);
}
.mnsb .mnsb-tools button:hover { background: var(--mnsb-soft); }
.mnsb .mnsb-tools .mnsb-tool-spoiler { font-size: 12px; }
.mnsb-counter { margin-left: auto; color: var(--mnsb-muted); font-variant-numeric: tabular-nums; }
.mnsb-tools + .mnsb-counter { margin-left: 0; }
.mnsb-counter.is-over { color: var(--mnsb-error); font-weight: 700; }
.mnsb-status { font-size: 13px; padding-top: 4px; }
.mnsb-status:empty { display: none; }
.mnsb-status[data-type="error"] { color: var(--mnsb-error); }
.mnsb-status[data-type="ok"] { color: var(--mnsb-ok); }

/* Smiley picker floats above the form */
.mnsb-smilies {
	position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
	display: flex; flex-wrap: wrap; gap: 2px; padding: 8px;
	max-height: 210px; overflow-y: auto;
	background: var(--mnsb-card); border: 1px solid var(--mnsb-border); border-radius: calc(var(--mnsb-radius) + 2px);
	box-shadow: 0 10px 30px var(--mnsb-shadow);
}
.mnsb-form.has-context .mnsb-smilies { bottom: calc(100% + 46px); }
.mnsb-smilies[hidden] { display: none; }
.mnsb .mnsb-smilies button {
	min-width: 36px; height: 34px; padding: 0 6px; cursor: pointer;
	font-size: 15px; color: var(--mnsb-text);
	background: transparent; border: 0; border-radius: calc(var(--mnsb-radius) * .7);
}
.mnsb .mnsb-smilies button:hover { background: var(--mnsb-soft); }
.mnsb .mnsb-smilies .mnsb-sm-img img { display: block; width: 26px; height: 26px; object-fit: contain; }

.mnsb-login { margin: 8px 0 0; font-size: 14px; }
.mnsb-login a { color: var(--mnsb-accent); }

.mnsb button:focus-visible, .mnsb a:focus-visible, .mnsb-spoiler:focus-visible { outline: 2px solid var(--mnsb-accent); outline-offset: 2px; }

/* Screen readers / honeypot */
.mnsb-sr, .mnsb-hp {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 420px) {
	.mnsb-row:not(.mnsb-row-msg) { flex-direction: column; }
	.mnsb .mnsb-tools .mnsb-tool-spoiler { padding: 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
	.mnsb * { transition: none !important; animation: none !important; }
}