:root {
	--bg: #fbfaf6;
	--fg: #1b1b1a;
	--muted: #5f5f58;
	--accent: #1f6f5c;
	--accent-fg: #ffffff;
	--card: #ffffff;
	--border: #e4e2d8;
	--ok-bg: #e8f5ee; --ok-fg: #14683f; --ok-border: #9fd6b7;
	--bad-bg: #fbe9e7; --bad-fg: #a3281c; --bad-border: #efb3ab;
	--warn-bg: #fdf4e3; --warn-fg: #8a5a12; --warn-border: #e9ce93;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #15171a; --fg: #e9e8e2; --muted: #a2a299; --accent: #4bbf9e;
		--accent-fg: #0c1a16; --card: #1e2125; --border: #2e3237;
		--ok-bg: #16302510; --ok-fg: #6cd39f; --ok-border: #2c5a43;
		--bad-bg: #3a1c1810; --bad-fg: #f0948a; --bad-border: #5e2d28;
		--warn-bg: #3a2e1510; --warn-fg: #e8c483; --warn-border: #5c4a26;
	}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); }

header.site, footer.site {
	display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
	padding: 16px 20px; max-width: 820px; width: 100%; margin: 0 auto;
}
header.site { border-bottom: 1px solid var(--border); }
footer.site {
	border-top: 1px solid var(--border); margin-top: auto; color: var(--muted); font-size: 15px;
}
.brand { font-weight: 700; font-size: 20px; color: var(--fg); text-decoration: none; }
header.site nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--fg); }

main { max-width: 820px; width: 100%; margin: 0 auto; padding: 24px 20px 48px; flex: 1; }
.prose h1 { font-size: 2rem; line-height: 1.2; margin: .2em 0 .6em; }
.prose h2 { margin-top: 1.6em; }
.prose .lede { font-size: 1.2rem; color: var(--muted); }
.updated { color: var(--muted); font-size: 14px; margin-top: 2.5em; }
.hint { color: var(--muted); }
.small { font-size: 14px; }

.card {
	background: var(--card); border: 1px solid var(--border); border-radius: 12px;
	padding: 18px 20px; margin: 18px 0;
}
.card label { display: block; font-weight: 600; margin-bottom: 4px; }
.card input[type=text], .card textarea {
	width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--border);
	border-radius: 8px; background: var(--bg); color: var(--fg); margin: 6px 0 12px;
}
button {
	background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 8px;
	padding: 10px 18px; font-size: 16px; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.05); }
button:disabled { opacity: .5; cursor: default; }
.card textarea { font-family: ui-monospace, monospace; resize: vertical; }
details.card summary { cursor: pointer; font-weight: 600; }

.result.ok { background: var(--ok-bg); border-color: var(--ok-border); }
.result.ok h2 { color: var(--ok-fg); }
.result.bad { background: var(--bad-bg); border-color: var(--bad-border); }
.result.bad h2 { color: var(--bad-fg); }
.result.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.result.warn h2 { color: var(--warn-fg); }
.result .advice { margin-top: 10px; }

.products { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.product .price { font-size: 1.4rem; font-weight: 700; margin: 8px 0 14px; }

/* Chat */
main.chat { display: flex; flex-direction: column; height: calc(100vh - 66px); max-width: 720px; }
.chat-log { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble.pending { opacity: .6; }
.chat-input { display: flex; gap: 10px; padding: 10px 0; align-items: flex-end; }
.chat-input textarea {
	flex: 1; resize: none; padding: 10px 12px; font: inherit; border: 1px solid var(--border);
	border-radius: 10px; background: var(--card); color: var(--fg); max-height: 160px;
}

/* Tickets: the chat as a thread (app/static/chat.js) */
.bubble.system { align-self: center; max-width: 90%; background: transparent; color: var(--muted); font-size: 15px; text-align: center; padding: 4px 8px; }
.bubble.admin { align-self: flex-start; background: var(--ok-bg); border: 1px solid var(--ok-border); border-bottom-left-radius: 4px; }
.bubble .who { display: block; font-size: 13px; font-weight: 700; color: var(--ok-fg); }
.card.quote { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 10px 0; }
.card.quote .price { color: var(--muted); }
.card.quote .paid { color: var(--ok-fg); font-weight: 700; }
.card input[type=email], .card input[type=tel], .card input[type=password], .card textarea, .card select {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--border);
	border-radius: 8px; background: var(--bg); color: var(--fg); margin: 6px 0 12px;
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); }
button.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 400; text-decoration: underline; cursor: pointer; }
form.inline { display: inline; }

/* Admin */
main.wide { max-width: 1100px; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
table.list th, table.list td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.list tr.needs { background: var(--warn-bg); }
.thread { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.thread .msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--card); }
.thread .msg.user { border-color: var(--accent); }
.thread .msg.admin { background: var(--ok-bg); }
.thread .msg.system, .thread .msg.unheard { color: var(--muted); font-size: 15px; }
.thread .who { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.thread .body { white-space: pre-wrap; word-wrap: break-word; }
.actions form { margin-right: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose td:last-child { white-space: nowrap; font-weight: 600; }
.card.ok { background: var(--ok-bg); border-color: var(--ok-border); }
.ticket-bar { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; margin: 0 0 6px; }