.root { --bg: #f4f6f8; --card: #fff; --text: #222; --muted: #666; --primary: #2563eb; --user-bg: #e6f7ff; --bot-bg: #fff8e6; --chat-bg: #fbfdff; }

body { font-family: Arial, sans-serif; background: var(--bg); color:var(--text); margin:0; padding:12px; }
.container { position:relative; z-index:2; width:100%; max-width:720px; margin:12px auto; background:var(--card); border-radius:8px; padding:12px; box-shadow:0 6px 18px rgba(30,40,60,0.08); }
h1 { margin-top:0; }
.chat { height:56vh; min-height:260px; overflow:auto; border:1px solid #e3e8ee; padding:10px; border-radius:6px; background:var(--chat-bg); }
.message { padding:8px 10px; margin:8px 0; border-radius:6px; }
.message.user { background:var(--user-bg); align-self:flex-end; }
.message.bot { background:var(--bot-bg); }
.message.loading { opacity:0.8; font-style:italic; }
.message { display:flex; gap:8px; align-items:flex-start; transform-origin:left top; }
.message .avatar { width:36px; height:36px; border-radius:50%; flex:0 0 36px; display:inline-block; background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); }
.message .avatar.user { background:linear-gradient(180deg, rgba(6,182,212,0.14), rgba(6,182,212,0.06)); }
.message .avatar.bot { background:linear-gradient(180deg, rgba(255,223,93,0.12), rgba(255,239,170,0.04)); }
.message .bubble { flex:1 1 auto; }
.message .bubble strong { display:block; margin-bottom:4px; }
.message .ts { display:block; margin-top:6px; font-size:11px; color:var(--muted); }
.message.enter { transform: translateY(6px); opacity:0; animation: enterMsg 180ms forwards ease-out; }
@keyframes enterMsg { to { transform: translateY(0); opacity:1; } }
.chat-form { display:flex; gap:8px; margin-top:12px; }
.chat-form input { flex:1; padding:10px; border-radius:6px; border:1px solid #d0d7de; }
.chat-form button { padding:0 16px; border-radius:6px; border:none; background:var(--primary); color:white; }
.chat-controls { display:flex; gap:8px; align-items:center; }
.note { font-size:12px; color:var(--muted); margin-top:10px; }

/* X Platform palette (cool blue/teal) */
.theme-x { --bg: #0f1724; --card: #0b1220; --text: #e6f0ff; --muted: #a8b4d9; --primary: #06b6d4; --user-bg: #05202a; --bot-bg: #081926; --chat-bg: #071422; }

/* Matrix palette (neon green on dark) */
.theme-matrix { --bg: #0b0f0b; --card: #071009; --text: #aef08a; --muted: #6fa46f; --primary: #00ff55; --user-bg: #09220a; --bot-bg: #081a09; --chat-bg: #051007; }

/* small utility for selector */
.theme-selector { float:right; font-size:13px; }

.social-buttons { display:flex; gap:8px; }
.btn { display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; font-size:15px; line-height:1.2; cursor:pointer; border:0; }
.btn:disabled, button:disabled { opacity:0.55; cursor:not-allowed; }

/* primary and outline variants */
.btn-primary, .btn.btn-x { background:var(--primary); color:#fff; }
.btn-outline, .btn-x-outline { background:transparent; border:1px solid rgba(0,0,0,0.08); color:var(--text); }

/* hover/active/focus */
.btn-primary:hover, .btn.btn-x:hover { filter:brightness(0.95); }
.btn-outline:hover, .btn-x-outline:hover { background: rgba(0,0,0,0.03); }
.btn:focus, button:focus, a.btn:focus { outline:3px solid rgba(37,99,235,0.18); outline-offset:2px; }

/* small button */
.btn-sm { padding:6px 8px; font-size:13px; }
.btn-x { background: linear-gradient(90deg,#1da1f2,#006dbf); color:white; }
.btn-x-outline { border:1px solid rgba(0,0,0,0.08); background:transparent; color:var(--text); }

/* tweak for dark themes */
.theme-x .btn-x-outline, .theme-matrix .btn-x-outline { border-color: rgba(255,255,255,0.08); color:var(--text); }
.theme-x .btn-x { background: linear-gradient(90deg,#06b6d4,#036b9a); }
.theme-matrix .btn-x { background: linear-gradient(90deg,#00ff55,#00cc44); color:#081009; }

/* grouped answers */
.message.group { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); padding:10px; }
.group-title { font-weight:600; margin-bottom:6px; }
.group-list { margin:6px 0 0 18px; padding:0; }
.group-list.hidden { display:none; }
.group-list li { margin:6px 0; }

/* feedback controls for messages */
.msg-feedback { display:inline-flex; gap:8px; margin-top:6px; align-items:center; }
.msg-feedback button { background:transparent; border:1px solid rgba(0,0,0,0.06); padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; }
.msg-feedback button.active { background:rgba(37,99,235,0.12); border-color:rgba(37,99,235,0.18); }
.msg-feedback .count { font-size:12px; color:var(--muted); margin-left:4px; }

/* Animated background overlay (toggle by adding `animated-bg` class on body) */
body.animated-bg::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(120deg, rgba(6,182,212,0.12), rgba(37,99,235,0.10), rgba(99,102,241,0.10));
	background-size: 400% 400%;
	filter: blur(18px) saturate(1.05);
	opacity: 0.9;
	animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Theme-specific tinting for the animated overlay */
.theme-x body.animated-bg::before, .theme-x.animated-bg::before { background: linear-gradient(120deg, rgba(6,182,212,0.10), rgba(6,182,212,0.08), rgba(3,107,154,0.08)); }
.theme-matrix body.animated-bg::before, .theme-matrix.animated-bg::before { background: linear-gradient(120deg, rgba(0,255,85,0.06), rgba(0,204,68,0.06), rgba(10,20,10,0.02)); }

/* Canvas used for Matrix rain effect. Inserted/removed by JS when Matrix theme + animated BG are active */
#matrixCanvas {
	position: fixed;
	inset: 0;
	z-index: 10; /* keep canvas below modal but above page background */
	pointer-events: none;
	mix-blend-mode: screen;
	background: transparent;
}

/* Disable gradient overlay for Matrix theme when using canvas-based rain */
.theme-matrix body.animated-bg::before { display: none; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	body.animated-bg::before { animation: none; }
}

/* modal for image prompt */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal-content { background:var(--card); color:var(--text); padding:16px; border-radius:8px; width:720px; max-width:95%; box-shadow:0 8px 30px rgba(0,0,0,0.4); z-index:10000; }
.modal-content h3 { margin-top:0; }
.modal-content button { padding:8px 12px; border-radius:6px; border:none; background:var(--primary); color:white; }

/* Responsive: stack header items on small screens */
@media (max-width:640px) {
	.container > div { flex-direction:column; gap:8px; align-items:flex-start; }
	.social-buttons a, .theme-selector, #answerCount, .theme-selector select { width:100%; display:block; }
	.social-buttons { width:100%; }
	.social-buttons a { display:block; }
	.chat-form { flex-direction:column; }
	.chat-form input { width:100%; font-size:16px; padding:12px; }
	.chat-form button { width:100%; padding:12px; font-size:16px; }
	.btn { width:100%; box-sizing:border-box; }
	.modal-content { width:100%; height:90vh; padding:12px; border-radius:8px; overflow:auto; }
	.modal-content textarea { width:100%; min-height:120px; }
}