/**
 * AGI Architect — Datacenter Monitor — public (frontend) stylesheet.
 *
 * IMPORTANT: Tailwind Play is loaded with `preflight` DISABLED so it never
 * resets the host theme's base styles. That means we must provide our OWN
 * scoped reset for everything inside #agia-app, otherwise inherited
 * theme styles (margins on <p>, list bullets, button chrome, link colours)
 * leak into the console. Everything here is namespaced under #agia-app
 * so the plugin can never affect the rest of the site.
 *
 * @package AGIA_Datacenter_Monitor
 */

/* ---------------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------------ */
#agia-app {
	--sol-bg:        #05070a;
	--sol-bg-2:      #0a0f16;
	--sol-panel:     rgba(13, 19, 28, 0.72);
	--sol-panel-2:   rgba(17, 24, 36, 0.92);
	--sol-stroke:    rgba(148, 163, 184, 0.14);
	--sol-stroke-2:  rgba(148, 163, 184, 0.28);
	--sol-amber:     #fbbf24;
	--sol-amber-2:   #f59e0b;
	--sol-cyan:      #22d3ee;
	--sol-emerald:   #10b981;
	--sol-red:       #f87171;
	--sol-orange:    #fb923c;
	--sol-violet:    #a78bfa;
	--sol-text:      #e7edf5;
	--sol-text-dim:  #93a4ba;
	--sol-text-mute: #5d6b80;
	--sol-radius:    18px;
	--sol-radius-sm: 12px;
	--sol-shadow:    0 24px 60px -20px rgba(0, 0, 0, 0.85);
	--sol-font-display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
	--sol-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	--sol-font-body:    "Sora", ui-sans-serif, system-ui, sans-serif;

	position: relative;
	width: 100%;
	height: var(--agia-stage-height, 100vh);
	min-height: 480px;
	background:
		radial-gradient(1200px 800px at 78% -10%, rgba(251, 191, 36, 0.10), transparent 55%),
		radial-gradient(1000px 700px at 6% 110%, rgba(34, 211, 238, 0.10), transparent 55%),
		linear-gradient(180deg, var(--sol-bg-2), var(--sol-bg));
	color: var(--sol-text);
	font-family: var(--sol-font-body);
	overflow: hidden;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
 * Scoped reset (because Tailwind preflight is off)
 * ------------------------------------------------------------------------ */
#agia-app *,
#agia-app *::before,
#agia-app *::after {
	box-sizing: border-box;
}
#agia-app h1, #agia-app h2, #agia-app h3,
#agia-app h4, #agia-app p, #agia-app figure,
#agia-app blockquote, #agia-app dl, #agia-app dd,
#agia-app ul, #agia-app ol {
	margin: 0;
	padding: 0;
}
#agia-app ul, #agia-app ol { list-style: none; }
#agia-app a { color: inherit; text-decoration: none; }
#agia-app img, #agia-app canvas, #agia-app svg {
	display: block;
	max-width: 100%;
}
#agia-app button {
	font: inherit;
	color: inherit;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1.2;
}
#agia-app input,
#agia-app textarea,
#agia-app select {
	font: inherit;
	color: inherit;
	margin: 0;
	background: none;
	border: 0;
}
#agia-app input:focus,
#agia-app textarea:focus,
#agia-app button:focus {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Atmosphere overlays (depth without busy colour)
 * ------------------------------------------------------------------------ */
#agia-app .sol-atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
#agia-app .sol-atmosphere::before { /* vignette */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
#agia-app .sol-atmosphere::after { /* fine scanlines */
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.018) 0px,
		rgba(255, 255, 255, 0.018) 1px,
		transparent 1px,
		transparent 3px
	);
	mix-blend-mode: overlay;
	opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * 3D stage host
 * ------------------------------------------------------------------------ */
#agia-app .sol-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	cursor: grab;
}
#agia-app .sol-stage:active { cursor: grabbing; }
#agia-app .sol-stage canvas { width: 100% !important; height: 100% !important; }

/* ---------------------------------------------------------------------------
 * Glass panel base
 * ------------------------------------------------------------------------ */
#agia-app .sol-glass {
	background: var(--sol-panel);
	border: 1px solid var(--sol-stroke);
	border-radius: var(--sol-radius);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: var(--sol-shadow);
}

/* Eyebrow / label text */
#agia-app .sol-eyebrow {
	font-family: var(--sol-font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sol-text-mute);
}
#agia-app .sol-mono { font-family: var(--sol-font-mono); }
#agia-app .sol-display { font-family: var(--sol-font-display); }

/* ---------------------------------------------------------------------------
 * Boot loader (shown before React mounts)
 * ------------------------------------------------------------------------ */
#agia-app .agia-boot {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	z-index: 5;
	text-align: center;
	padding: 24px;
}
#agia-app .agia-boot__ring {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 3px solid rgba(251, 191, 36, 0.18);
	border-top-color: var(--sol-amber);
	border-right-color: var(--sol-cyan);
	animation: sol-spin 0.9s linear infinite;
	box-shadow: 0 0 30px rgba(251, 191, 36, 0.25);
}
#agia-app .agia-boot__label {
	font-family: var(--sol-font-display);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--sol-text);
}
#agia-app .agia-boot__sub {
	font-family: var(--sol-font-mono);
	font-size: 11px;
	color: var(--sol-text-mute);
}
@keyframes sol-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
 * Draggable rack modal (improvement b)
 * ------------------------------------------------------------------------ */
#agia-app .sol-modal {
	position: absolute;
	z-index: 30;
	width: 340px;
	max-width: calc(100% - 24px);
	border-radius: var(--sol-radius);
	overflow: hidden;
	animation: sol-pop 0.18s ease-out;
}
#agia-app .sol-modal__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	cursor: grab;
	user-select: none;
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.02));
	border-bottom: 1px solid var(--sol-stroke);
	touch-action: none;
}
#agia-app .sol-modal__bar:active { cursor: grabbing; }
#agia-app .sol-modal__grip {
	width: 22px;
	color: var(--sol-text-mute);
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 0.6;
}
#agia-app .sol-modal__btns { margin-left: auto; display: flex; gap: 6px; }
#agia-app .sol-iconbtn {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	color: var(--sol-text-dim);
	border: 1px solid transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#agia-app .sol-iconbtn:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--sol-text);
	border-color: var(--sol-stroke-2);
}
#agia-app .sol-modal__body { padding: 16px; max-height: 60vh; overflow-y: auto; }
#agia-app .sol-modal.is-min .sol-modal__body { display: none; }

@keyframes sol-pop {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stat rows inside modal/panels */
#agia-app .sol-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--sol-stroke);
}
#agia-app .sol-row:last-child { border-bottom: 0; }
#agia-app .sol-row__k { font-size: 12px; color: var(--sol-text-dim); }
#agia-app .sol-row__v { font-family: var(--sol-font-mono); font-size: 13px; font-weight: 500; }

/* ---------------------------------------------------------------------------
 * Health ring
 * ------------------------------------------------------------------------ */
#agia-app .sol-ring { position: relative; width: 92px; height: 92px; flex: none; }
#agia-app .sol-ring svg { transform: rotate(-90deg); }
#agia-app .sol-ring__num {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--sol-font-mono);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
}
#agia-app .sol-ring__num span { font-size: 9px; font-weight: 500; color: var(--sol-text-mute); margin-top: 3px; letter-spacing: 0.12em; }

/* ---------------------------------------------------------------------------
 * Pills / badges
 * ------------------------------------------------------------------------ */
#agia-app .sol-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	font-family: var(--sol-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	border: 1px solid var(--sol-stroke-2);
	color: var(--sol-text-dim);
	white-space: nowrap;
}
#agia-app .sol-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#agia-app .sol-blink { animation: sol-blink 1.6s ease-in-out infinite; }
@keyframes sol-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

#agia-app .is-optimal  { color: var(--sol-emerald); }
#agia-app .is-healthy  { color: var(--sol-emerald); }
#agia-app .is-degraded { color: var(--sol-amber); }
#agia-app .is-at-risk  { color: var(--sol-orange); }
#agia-app .is-critical { color: var(--sol-red); }

#agia-app .bg-sev-info     { background: var(--sol-cyan); }
#agia-app .bg-sev-warning  { background: var(--sol-amber); }
#agia-app .bg-sev-critical { background: var(--sol-red); }

/* ---------------------------------------------------------------------------
 * Event ticker / lists
 * ------------------------------------------------------------------------ */
#agia-app .sol-event {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--sol-stroke);
	font-size: 12px;
}
#agia-app .sol-event:last-child { border-bottom: 0; }
#agia-app .sol-event__meta { font-family: var(--sol-font-mono); font-size: 10px; color: var(--sol-text-mute); }

/* ---------------------------------------------------------------------------
 * Prompt box (improvement c — egress Q&A)
 * ------------------------------------------------------------------------ */
#agia-app .sol-prompt { display: flex; flex-direction: column; gap: 10px; }
#agia-app .sol-prompt__log {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 230px;
	overflow-y: auto;
	padding-right: 4px;
}
#agia-app .sol-msg {
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	border: 1px solid var(--sol-stroke);
}
#agia-app .sol-msg--user {
	align-self: flex-end;
	max-width: 86%;
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.05));
	border-color: rgba(251, 191, 36, 0.32);
	color: #fde9b8;
}
#agia-app .sol-msg--bot {
	align-self: flex-start;
	max-width: 94%;
	background: rgba(34, 211, 238, 0.06);
	border-color: rgba(34, 211, 238, 0.20);
	white-space: pre-wrap;
}
#agia-app .sol-msg__tag {
	display: block;
	font-family: var(--sol-font-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sol-text-mute);
	margin-bottom: 5px;
}
#agia-app .sol-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
#agia-app .sol-chip {
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	border: 1px solid var(--sol-stroke-2);
	color: var(--sol-text-dim);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#agia-app .sol-chip:hover {
	background: rgba(34, 211, 238, 0.10);
	border-color: rgba(34, 211, 238, 0.4);
	color: var(--sol-text);
}
#agia-app .sol-inputrow {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	border: 1px solid var(--sol-stroke-2);
	border-radius: 12px;
	padding: 8px;
	background: rgba(5, 7, 10, 0.6);
	transition: border-color 0.15s, box-shadow 0.15s;
}
#agia-app .sol-inputrow:focus-within {
	border-color: rgba(251, 191, 36, 0.5);
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}
#agia-app .sol-inputrow textarea {
	flex: 1;
	resize: none;
	min-height: 22px;
	max-height: 96px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sol-text);
}
#agia-app .sol-inputrow textarea::placeholder { color: var(--sol-text-mute); }
#agia-app .sol-send {
	flex: none;
	padding: 8px 14px;
	border-radius: 9px;
	font-family: var(--sol-font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #1a1206;
	background: linear-gradient(180deg, var(--sol-amber), var(--sol-amber-2));
	transition: filter 0.15s, transform 0.05s;
}
#agia-app .sol-send:hover { filter: brightness(1.08); }
#agia-app .sol-send:active { transform: translateY(1px); }
#agia-app .sol-send:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); }

/* Typing dots */
#agia-app .sol-typing { display: inline-flex; gap: 4px; align-items: center; }
#agia-app .sol-typing i {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--sol-cyan);
	animation: sol-typing 1s infinite ease-in-out;
}
#agia-app .sol-typing i:nth-child(2) { animation-delay: 0.15s; }
#agia-app .sol-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sol-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------------------------------------------------------------------------
 * Progress bars (workloads + utilisation)
 * ------------------------------------------------------------------------ */
#agia-app .sol-bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
#agia-app .sol-bar > i { display: block; height: 100%; border-radius: 999px; transition: width 0.5s ease; }

/* ---------------------------------------------------------------------------
 * Metric cards (bottom dock)
 * ------------------------------------------------------------------------ */
#agia-app .sol-metric { padding: 12px 14px; border-radius: var(--sol-radius-sm); border: 1px solid var(--sol-stroke); background: var(--sol-panel); }
#agia-app .sol-metric__v { font-family: var(--sol-font-mono); font-weight: 700; font-size: 20px; line-height: 1.1; }
#agia-app .sol-metric__u { font-size: 11px; font-weight: 500; color: var(--sol-text-mute); margin-left: 3px; }

/* ---------------------------------------------------------------------------
 * Custom scrollbars (scoped)
 * ------------------------------------------------------------------------ */
#agia-app *::-webkit-scrollbar { width: 9px; height: 9px; }
#agia-app *::-webkit-scrollbar-track { background: transparent; }
#agia-app *::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); border-radius: 999px; }
#agia-app *::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); }

/* ---------------------------------------------------------------------------
 * Layout scaffolding for the React overlay
 * ------------------------------------------------------------------------ */
#agia-app .sol-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#agia-app .sol-ui > * { pointer-events: auto; }

#agia-app .sol-topbar {
	position: absolute;
	top: 14px; left: 14px; right: 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	flex-wrap: wrap;
}
#agia-app .sol-brand { display: flex; align-items: center; gap: 12px; }
#agia-app .sol-brand__mark {
	width: 34px; height: 34px; border-radius: 9px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, rgba(251,191,36,0.9), rgba(245,158,11,0.7));
	color: #160f04; font-family: var(--sol-font-display); font-weight: 700; font-size: 17px;
	box-shadow: 0 0 22px rgba(251, 191, 36, 0.4);
}
#agia-app .sol-brand__name { font-family: var(--sol-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
#agia-app .sol-brand__sub { font-family: var(--sol-font-mono); font-size: 10px; color: var(--sol-text-mute); }
#agia-app .sol-topbar__stats { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* Right rail */
#agia-app .sol-rail {
	position: absolute;
	top: 92px; right: 14px; bottom: 116px;
	width: 340px;
	max-width: calc(100% - 28px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}
#agia-app .sol-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#agia-app .sol-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#agia-app .sol-card--scroll { overflow-y: auto; }
#agia-app .sol-scrolllist { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

/* Bottom metric dock */
#agia-app .sol-dock {
	position: absolute;
	left: 14px; right: 14px; bottom: 14px;
	padding: 12px 14px;
}
#agia-app .sol-dock__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}
#agia-app .sol-dock__label { margin-bottom: 9px; }

/* Left hint cluster */
#agia-app .sol-hint {
	position: absolute;
	left: 14px; top: 92px;
	max-width: 230px;
	padding: 12px 14px;
	font-size: 11px;
	color: var(--sol-text-dim);
	line-height: 1.5;
}
#agia-app .sol-hint b { color: var(--sol-amber); font-weight: 600; }
#agia-app .sol-hint .sol-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
#agia-app .sol-legend__item { display: flex; align-items: center; gap: 7px; font-family: var(--sol-font-mono); font-size: 10px; }
#agia-app .sol-legend__sw { width: 14px; height: 3px; border-radius: 2px; }

/* FAB to reopen the prompt / panels on small screens */
#agia-app .sol-fab {
	position: absolute;
	right: 16px; bottom: 130px;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	font-family: var(--sol-font-display);
	font-weight: 600;
	font-size: 12px;
	color: #160f04;
	background: linear-gradient(180deg, var(--sol-amber), var(--sol-amber-2));
	box-shadow: 0 12px 30px -8px rgba(251, 191, 36, 0.6);
	z-index: 25;
}

/* ---------------------------------------------------------------------------
 * Responsive: collapse rail under ~960px, stack dock on phones
 * ------------------------------------------------------------------------ */
@media (max-width: 960px) {
	#agia-app .sol-rail {
		position: absolute;
		top: auto;
		bottom: 14px;
		right: 14px;
		left: 14px;
		width: auto;
		max-width: none;
		height: min(62%, 460px);
		transform: translateY(calc(100% + 24px));
		transition: transform 0.28s ease;
	}
	#agia-app.sol-rail-open .sol-rail { transform: translateY(0); }
	#agia-app .sol-dock { display: none; }
	#agia-app .sol-hint { display: none; }
	#agia-app .sol-fab { display: inline-flex; }
	#agia-app.sol-rail-open .sol-fab { display: none; }
}
@media (max-width: 560px) {
	#agia-app .sol-topbar__stats { display: none; }
	#agia-app .sol-modal { width: calc(100% - 24px); }
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	#agia-app *,
	#agia-app *::before,
	#agia-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}