@import "tailwindcss";

@theme {
	--color-dl-primary: #ea4647;
	--color-dl-primary-dark: #c83232;
	--color-dl-primary-light: #f87171;
	--color-dl-accent: #fb923c;
	--color-dl-accent-light: #fdba74;
	--color-dl-bg-dark: #050811;
	--color-dl-bg-darker: #030509;
	--color-dl-bg-card: #0f1219;
	--color-dl-bg-card-hover: #1a1f2b;
	--color-dl-text: #f1f5f9;
	--color-dl-text-muted: #94a3b8;
	--color-dl-text-dim: #64748b;
	--color-dl-border: #1e2433;
	--color-dl-success: #34d399;
	--color-dl-warning: #fbbf24;

	--font-sans: 'Pretendard Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

html, body, #app {
	height: 100%;
	background: var(--color-dl-bg-dark);
	color: var(--color-dl-text);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.6;
}

.glow-bg {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(234,70,71,0.04) 0%, transparent 55%),
		radial-gradient(ellipse at 30% 40%, rgba(234,70,71,0.02) 0%, transparent 50%),
		radial-gradient(ellipse at 75% 60%, rgba(251,146,60,0.015) 0%, transparent 50%),
		var(--color-dl-bg-dark);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-dl-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-dl-text-dim); }

::selection { background: var(--color-dl-primary); color: white; }

@keyframes typing {
	0%, 60%, 100% { opacity: 0.3; }
	30% { opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ── Input Box (shared across components) ── */
.input-box {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid var(--color-dl-border);
	background: var(--color-dl-bg-card);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -4px rgba(0,0,0,0.2);
	transition: border-color 0.2s;
	width: 100%;
}
.input-box:focus-within { border-color: rgba(234, 70, 71, 0.3); }
.input-box.large {
	padding: 16px 20px;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.3);
	max-width: 100%;
}

.input-textarea {
	flex: 1;
	resize: none;
	background: transparent;
	border: none;
	outline: none;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-dl-text);
	font-family: inherit;
	min-height: 28px;
	max-height: 200px;
	padding: 0;
}
.input-textarea::placeholder { color: var(--color-dl-text-dim); }

.send-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	transition: all 0.15s;
	background: var(--color-dl-bg-card-hover);
	color: var(--color-dl-text-dim);
	font-family: inherit;
}
.send-btn.active { background: var(--color-dl-text); color: var(--color-dl-bg-dark); }
.send-btn.active:hover { background: var(--color-dl-text-muted); }
.send-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── Animations ── */
.animate-fadeIn {
	animation: fadeIn 0.3s ease-out;
}

/* ── Markdown prose (landing docs 스타일 통일) ── */
.prose-dartlab h1 {
	font-size: 1.35em; font-weight: 700; color: var(--color-dl-text);
	margin-top: 1.5em; margin-bottom: 0.5em;
}
.prose-dartlab h2 {
	font-size: 1.15em; font-weight: 600; color: var(--color-dl-text);
	margin-top: 1.8em; margin-bottom: 0.5em;
	padding-bottom: 0.4em; border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.prose-dartlab h3 {
	font-size: 1.05em; font-weight: 600; color: #e2e8f0;
	margin-top: 1.4em; margin-bottom: 0.4em;
}
.prose-dartlab p { line-height: 1.75; color: var(--color-dl-text-muted); margin-bottom: 0.8em; }
.prose-dartlab ul, .prose-dartlab ol { padding-left: 1.5em; margin-bottom: 0.8em; }
.prose-dartlab li { margin-bottom: 0.3em; color: var(--color-dl-text-muted); line-height: 1.7; }
.prose-dartlab code {
	background: rgba(148, 163, 184, 0.1); padding: 2px 6px; border-radius: 4px;
	font-size: 0.875em; font-family: var(--font-mono); color: #e2e8f0;
}
.prose-dartlab pre {
	background: #0d1117; padding: 1rem; border-radius: 8px;
	overflow-x: auto; margin: 0.8em 0; border: 1px solid rgba(148, 163, 184, 0.1);
	font-size: 0.85em;
}
.prose-dartlab pre code { background: none; padding: 0; color: var(--color-dl-text-muted); }
.prose-dartlab table {
	border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.85em;
	border: 1px solid rgba(148, 163, 184, 0.08); border-radius: 8px;
	overflow: hidden;
}
.prose-dartlab th {
	text-align: left; padding: 0.6rem 0.8rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(148, 163, 184, 0.04);
	color: var(--color-dl-text-muted); font-weight: 500; font-size: 0.8rem;
	white-space: nowrap; letter-spacing: 0.02em;
}
.prose-dartlab td {
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.06);
	color: var(--color-dl-text-muted);
}
.prose-dartlab td.num {
	text-align: right; font-variant-numeric: tabular-nums;
	font-family: var(--font-mono); font-size: 0.85em;
}
.prose-dartlab thead { position: sticky; top: 0; }
.prose-dartlab tbody tr:hover td { background: rgba(148, 163, 184, 0.04); }
.prose-dartlab tbody tr:last-child td { border-bottom: none; }
.prose-dartlab strong { font-weight: 600; color: var(--color-dl-text); }
.prose-dartlab blockquote {
	border-left: 3px solid var(--color-dl-primary); padding: 0.4em 1em;
	margin: 0.8em 0; background: rgba(234, 70, 71, 0.04); border-radius: 0 6px 6px 0;
	color: var(--color-dl-text-muted);
}
.prose-dartlab a { color: var(--color-dl-primary); text-decoration: none; }
.prose-dartlab a:hover { text-decoration: underline; }

/* ── Code block copy button ── */
.code-block-wrap {
	position: relative;
	margin: 0.8em 0;
}
.code-block-wrap pre { margin: 0; }
.code-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(15, 18, 25, 0.8);
	color: var(--color-dl-text-dim);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.code-block-wrap:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { color: var(--color-dl-text); background: rgba(30, 36, 51, 0.9); }

/* ── Number highlight ── */
.num-highlight {
	color: var(--color-dl-accent-light);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
	0% { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}
.skeleton-line {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(148,163,184,0.06) 25%, rgba(148,163,184,0.12) 50%, rgba(148,163,184,0.06) 75%);
	background-size: 800px 100%;
	animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
	.sidebar-overlay {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(2px);
	}
	.sidebar-mobile {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 280px;
		max-width: 85vw;
	}
	.prose-dartlab table { font-size: 0.78em; }
	.prose-dartlab th, .prose-dartlab td { padding: 0.4rem 0.5rem; }
}
