* { box-sizing: border-box; }
body {
	font-family: 'Poppins', system-ui, sans-serif;
	background: radial-gradient(circle at 20% 20%, #f3f7ff, #e8ecf7 40%, #e3e7f2 80%);
	color: #0f172a;
	margin: 0;
	padding: 24px;
}

.page { max-width: 1080px; margin: 0 auto; display: grid; gap: 20px; }

.hero {
.panel {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.12);
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
}
.panel-main { display: grid; gap: 10px; }
.panel-side { padding-left: 12px; width: 320px; transition: width 260ms cubic-bezier(.2,.9,.2,1); overflow: hidden; }
	background: linear-gradient(120deg, #0f172a, #1f2b45);
.panel.collapsed { grid-template-columns: 1fr auto; }
	color: #eef2ff;
	border-radius: 18px;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
.panel.collapsed .panel-side { width: 64px; padding-left:6px; }
.panel.collapsed .panel-side #instructions { display: none; }
.panel.collapsed .panel-side > div { display:flex; flex-direction:column; align-items:center; gap:6px; }
.panel.collapsed .panel-side > div h3 { display: none; }
.panel.collapsed .panel-side .toggle-instr { width: 48px; padding:6px; font-size:12px; }
	gap: 16px;
	box-shadow: 0 10px 40px rgba(15,23,42,0.35);
}
.hero h1 { margin: 6px 0 10px; font-size: 32px; }
.hero .lede { max-width: 640px; line-height: 1.5; color: #c7d2fe; }
.hero .eyebrow { letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: #a5b4fc; }
.hero-badge {
	background: #10b981;
	color: #0b1727;
	padding: 10px 14px;
	border-radius: 12px;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(16,185,129,0.25);
}

.ghost {
	display: inline-block;
	margin-top: 10px;
	color: #eef2ff;
	border: 1px solid rgba(255,255,255,0.2);
	padding: 10px 14px;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }

.panel {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 8px 24px rgba(15,23,42,0.12);
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 320px;
}

.panel-main { display: grid; gap: 10px; }
.panel-side { padding-left: 12px; }

.panel-side #instructions { background: linear-gradient(180deg,#fbfdff,#ffffff); border:1px solid #e6eefc; padding: 14px; border-radius: 12px; }
.panel-side #instructions h3 { margin-top: 0; color: #0b1220; }
.panel-side #instructions ul { margin: 8px 0 0 18px; color:#334155 }
.panel-side #instructions a { color: #2563eb; text-decoration: none; }
.panel-side #instructions a:hover { text-decoration: underline; }

/* toggle button for instructions */
.toggle-instr {
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
}
.toggle-instr:hover { background:#f8fafc }

/* collapsed layout */
.panel.collapsed { grid-template-columns: 1fr 64px; }
/* when collapsed only show a small toggle column: hide the instructions and header text, keep button visible */
.panel.collapsed .panel-side #instructions { display: none; }
.panel.collapsed .panel-side { padding-left: 6px; }
.panel.collapsed .panel-side > div { display:flex; flex-direction:column; align-items:center; gap:6px; }
.panel.collapsed .panel-side > div h3 { display: none; }
.panel.collapsed .panel-side .toggle-instr { width: 48px; padding:6px; font-size:12px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; }
.panel-title { font-weight: 700; font-size: 18px; }
.panel-sub { color: #475569; font-size: 13px; }
.status-dot {
	background: #10b981;
	color: #064e3b;
	padding: 6px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}

.chat-window {
	height: 460px;
	overflow-y: auto;
	border: 1px solid #e2e8f0;
	padding: 14px;
	background: linear-gradient(180deg, #f8fafc, #f1f5f9);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.message {
	margin: 2px 0;
	padding: 10px 14px;
	border-radius: 14px;
	max-width: 78%;
	line-height: 1.45;
	box-shadow: 0 4px 10px rgba(15,23,42,0.06);
}
.message.user {
	background: #0ea5e9;
	color: #0b1727;
	margin-left: auto;
}
.message.bot {
	background: #e2e8f0;
	color: #0f172a;
}

/* Analysis formatting */
.analysis { font-size: 14px; color: #0f172a; }
.analysis h3 { margin: 6px 0 8px; color: #0f172a; font-size: 15px; }
.analysis .meta { font-size: 12px; color: #475569; margin-bottom: 8px; }
.analysis p { margin: 8px 0; line-height: 1.55; }
.analysis .highlight { background: linear-gradient(90deg,#fde68a33,#fef3c733); padding: 6px 8px; border-radius: 8px; display:inline-block; }
.analysis pre { background: #0b1220; color: #e6f0ff; padding: 10px; border-radius: 8px; overflow:auto; font-size: 13px; }
.analysis .section { margin: 8px 0; padding: 8px; border-left: 3px solid #60a5fa; background: linear-gradient(180deg,#ffffff,#fbfdff); border-radius: 6px; }
.analysis .title { font-weight: 700; color: #0b1220; }
.analysis .tag { display:inline-block; background:#eef2ff; color:#1e3a8a; padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px }

/* gallery for related images returned by analysis */
.analysis .gallery { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.analysis .gallery img { width:160px; height:110px; object-fit:cover; border-radius:8px; border:1px solid #e2e8f0; box-shadow:0 6px 18px rgba(2,6,23,0.06) }
.analysis .gallery img:hover { transform:scale(1.03); box-shadow:0 12px 36px rgba(2,6,23,0.12) }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #0f172a;
	border-radius: 999px;
	padding: 8px 12px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,0.12); }

.input-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
}
#message {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid #cbd5e1;
	font-size: 15px;
	transition: border 0.15s ease, box-shadow 0.15s ease;
}
#message:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.18); }

button[type="submit"], button.chip {
	font-weight: 600;
}
button[type="submit"] {
	padding: 12px 18px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(120deg, #0ea5e9, #2563eb);
	color: #f8fafc;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(37,99,235,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,0.3); }

/* layout for the send + ask groq buttons */
.input-actions { display: inline-flex; gap: 8px; align-items: center; }

/* make Ask Groq button visually consistent with Send */
button#ask-groq {
	padding: 12px 18px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(120deg, #0ea5e9, #2563eb);
	color: #f8fafc;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(37,99,235,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-weight: 600;
}
button#ask-groq:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,0.3); }

/* Make Upload and Analyze buttons visually consistent with Send */
button#choose-image,
button#upload-image {
	padding: 12px 18px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(120deg, #0ea5e9, #2563eb);
	color: #f8fafc;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(37,99,235,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-weight: 600;
}
button#choose-image:hover, button#upload-image:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,0.3); }

button#upload-image[disabled] { opacity: 0.55; pointer-events: none; }

.file-status { margin-left: 8px; color: #475569; font-size: 14px; }

.image-preview {
	width: 88px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	margin-left: 10px;
	border: 1px solid #e2e8f0;
}

/* inline Ask Groq buttons appended to bot messages (smaller) */
.ask-groq-inline {
	padding: 6px 10px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(120deg, #0ea5e9, #2563eb);
	color: #f8fafc;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(37,99,235,0.15);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	font-weight: 600;
	font-size: 13px;
}
.ask-groq-inline:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(37,99,235,0.2); }

.is-loading button[type="submit"] { opacity: 0.7; pointer-events: none; }

@media (max-width: 720px) {
	body { padding: 12px; }
	.page { grid-template-columns: 1fr; }
	.hero { flex-direction: column; align-items: flex-start; }
	.chat-window { height: 380px; }
}