/* =========================================================================
   Pi Web Console — BeautifulUI 组件库
   灵感来源：beautifului.dev
   Loading State / Thinking / Streaming Text / Approval Card / Tool Chips / Task Rows
   ========================================================================= */

/* ---------- 1. Loading State（加载状态） ---------- */
/* 像素动画 + shimmer 文字效果 */
.loading-state {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
}

.pixel-grid {
	display: grid;
	grid-template-columns: repeat(3, 4px);
	gap: 1.5px;
	flex-shrink: 0;
}

.pixel {
	width: 4px;
	height: 4px;
	background: var(--ink);
	border-radius: 1px;
	opacity: 0.15;
	animation: pixel-on 650ms ease-in-out infinite;
}

.pixel:nth-child(1) {
	animation-delay: 90ms;
}
.pixel:nth-child(2) {
	animation-delay: 180ms;
}
.pixel:nth-child(3) {
	animation-delay: 270ms;
}
.pixel:nth-child(4) {
	animation-delay: 0ms;
}
.pixel:nth-child(5) {
	animation-delay: 90ms;
}
.pixel:nth-child(6) {
	animation-delay: 180ms;
}
.pixel:nth-child(7) {
	animation-delay: 90ms;
}
.pixel:nth-child(8) {
	animation-delay: 180ms;
}
.pixel:nth-child(9) {
	animation-delay: 270ms;
}

@keyframes pixel-on {
	0%,
	100% {
		opacity: 0.15;
	}
	18%,
	42% {
		opacity: 1;
	}
	62% {
		opacity: 0.15;
	}
}

.shimmer-text {
	background: linear-gradient(
		90deg,
		var(--ink-3) 35%,
		var(--ink) 50%,
		var(--ink-3) 65%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: shimmer-text 1.4s linear infinite;
	font-size: 13px;
	font-weight: 500;
}

@keyframes shimmer-text {
	0% {
		background-position: 150% center;
	}
	100% {
		background-position: -50% center;
	}
}

.loading-timer {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

/* ---------- 2. Thinking（思考状态） ---------- */
/* 星星图标 + 展开/折叠动画 */
.thinking-v2 {
	display: flex;
	flex-direction: column;
	transition: min-height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.thinking-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--r-sm);
	transition: background 100ms ease-out;
	margin: 0 -6px;
}

.thinking-trigger:hover {
	background: var(--hover-2);
}

.thinking-trigger svg {
	flex-shrink: 0;
}

.thinking-trigger .thinking-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
}

.thinking-trigger .thinking-chevron {
	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.thinking-trigger[aria-expanded="true"] .thinking-chevron {
	transform: rotate(180deg);
}

.thinking-content {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 400ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.thinking-trigger[aria-expanded="true"] + .thinking-content {
	grid-template-rows: 1fr;
	opacity: 1;
}

.thinking-inner {
	overflow: hidden;
}

.thinking-steps {
	position: relative;
	margin-top: 4px;
	margin-left: 5px;
	padding-left: 16px;
}

.thinking-line {
	position: absolute;
	left: 3px;
	width: 1px;
	background: var(--line);
	top: -8px;
	height: 130px;
	transition: height 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.thinking-step {
	display: flex;
	align-items: center;
	min-height: 28px;
	width: 100%;
	gap: 8px;
	padding: 2px 6px;
	border-radius: 6px;
	text-align: left;
	animation: fade-in 300ms ease-out both;
}

.thinking-step-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--ink-3);
}

.thinking-step-text {
	font-size: 13px;
	color: var(--ink-2);
	flex: 1;
}

.thinking-step-text.is-active {
	color: var(--ink);
}

/* ---------- 3. Streaming Text（流式文字） ---------- */
/* 逐词淡入 + 模糊效果 */
.streaming-text {
	min-height: 15.5rem;
	width: 100%;
	max-width: 380px;
}

.streaming-text p {
	font-size: 13px;
	line-height: 1.625;
	color: var(--ink);
}

.streaming-word {
	display: inline;
	will-change: filter, opacity;
	animation: stream-in 420ms cubic-bezier(0.22, 0.61, 0.25, 1) both;
}

@keyframes stream-in {
	0% {
		opacity: 0;
		filter: blur(4px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

.streaming-cursor {
	display: inline-block;
	width: 2px;
	height: 12px;
	margin-left: 2px;
	transform: translateY(2px);
	border-radius: 999px;
	background: var(--ink);
	animation: fade-in 150ms ease-out both;
}

.streaming-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.streaming-text:hover .streaming-actions,
.streaming-text:focus-within .streaming-actions {
	opacity: 1;
	pointer-events: auto;
}

.streaming-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	color: var(--ink-3);
	border-radius: 6px;
	cursor: pointer;
	transition:
		background 100ms ease,
		color 100ms ease;
}

.streaming-action-btn:hover {
	background: var(--hover-2);
	color: var(--ink-2);
}

/* ---------- 4. Approval Card（审批卡片） ---------- */
/* 卡片式选择 */
.approval-card {
	width: 100%;
	max-width: 320px;
	align-self: flex-start;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	animation: fade-up 350ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes fade-up {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.approval-card-inner {
	padding: 12px;
}

.approval-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.approval-card-question {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

.approval-card-dismiss {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--ink-3);
	border-radius: var(--r-sm);
	cursor: pointer;
	flex-shrink: 0;
	transition:
		background 100ms ease,
		color 100ms ease;
}

.approval-card-dismiss:hover {
	background: var(--hover);
	color: var(--ink);
}

.approval-options {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
}

.approval-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	margin: 0 -6px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--r-sm);
	text-align: left;
	transition: background 100ms ease;
}

.approval-option:hover {
	background: var(--hover);
}

.approval-radio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 1.5px solid var(--line-strong);
	flex-shrink: 0;
	transition: border-color 200ms ease;
}

.approval-radio-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--surface);
	transform: scale(0);
	transition: transform 200ms ease;
}

.approval-option[aria-pressed="true"] .approval-radio {
	border-color: var(--accent);
	background: var(--accent);
}

.approval-option[aria-pressed="true"] .approval-radio-dot {
	transform: scale(1);
}

.approval-option-text {
	font-size: 13px;
	color: var(--ink-2);
	transition: color 200ms ease;
}

.approval-option[aria-pressed="true"] .approval-option-text {
	color: var(--ink);
}

.approval-custom {
	margin-top: 4px;
	padding: 4px 6px;
	margin-left: -6px;
	margin-right: -6px;
}

.approval-custom-input {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--page);
	font-size: 13px;
	color: var(--ink);
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease;
}

.approval-custom-input::placeholder {
	color: var(--ink-3);
}

.approval-custom-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--ring);
}

/* ---------- 5. Tool Chips（工具芯片） ---------- */
/* 紧凑的工具调用展示 */
.tool-chips {
	display: flex;
	flex-direction: column;
	min-height: 220px;
	width: 100%;
	max-width: 320px;
	padding-bottom: 4px;
}

.tool-chips-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	margin: 0 -6px;
	font-size: 12.5px;
	color: var(--ink-2);
	cursor: pointer;
	border: none;
	background: transparent;
	border-radius: var(--r-sm);
	transition: background 100ms ease;
}

.tool-chips-header:hover {
	background: var(--hover-2);
}

.tool-chips-header svg {
	transition: transform 200ms ease;
}

.tool-chips-header[aria-expanded="true"] svg {
	transform: rotate(0deg);
}

.tool-chips-count {
	font-variant-numeric: tabular-nums;
}

.tool-chips-list {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 300ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 200ms ease;
	overflow: hidden;
}

.tool-chips-header[aria-expanded="true"] + .tool-chips-list {
	grid-template-rows: 1fr;
	opacity: 1;
}

.tool-chips-inner {
	overflow: hidden;
	padding: 0 6px 4px;
}

.tool-chips-items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
}

.tool-chip {
	display: flex;
	align-items: center;
	min-height: 28px;
	width: calc(100% + 6px);
	margin: 0 -3px;
	padding: 0 3px;
	gap: 8px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--r-sm);
	text-align: left;
	transition: background 100ms ease;
	animation: fade-up 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.tool-chip:hover {
	background: var(--hover-2);
}

.tool-chip-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--ink-3);
}

.tool-chip-icon .icon-default {
	transition: opacity 100ms ease;
}

.tool-chip:hover .tool-chip-icon .icon-default {
	opacity: 0;
}

.tool-chip-icon .icon-hover {
	position: absolute;
	opacity: 0;
	transition: opacity 100ms ease;
}

.tool-chip:hover .tool-chip-icon .icon-hover {
	opacity: 1;
}

.tool-chip-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tool-chip-status {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: var(--r-full);
	flex-shrink: 0;
}

.tool-chip-status.running {
	color: var(--orange);
	background: var(--orange-tint);
}

.tool-chip-status.done {
	color: var(--green);
	background: var(--green-tint);
}

.tool-chip-status.error {
	color: var(--red);
	background: var(--red-tint);
}

/* ---------- 6. Task Rows（任务行） ---------- */
/* 可折叠的任务列表 */
.task-rows {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 440px;
	gap: 8px;
	min-height: 196px;
}

.task-row {
	overflow: hidden;
	border-radius: 22px;
	background: var(--surface);
	box-shadow: var(--shadow-card);
	transition:
		border-radius 300ms ease,
		background-color 300ms ease;
	animation: fade-up 450ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.task-row:hover {
	background: var(--inset);
}

.task-row-header {
	display: flex;
	align-items: center;
	height: 44px;
	width: 100%;
	gap: 10px;
	padding: 0 10px;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.task-row-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.task-row-check-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	color: white;
	animation: pop-in 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes pop-in {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.task-row-check-circle.completed {
	background: var(--green);
}

.task-row-check-circle.in-progress {
	background: var(--accent);
}

.task-row-check-circle.pending {
	background: var(--line-strong);
}

.task-row-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.task-row-meta {
	font-size: 12.5px;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.task-row-status {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 500;
	flex-shrink: 0;
}

.task-row-status.completed {
	color: var(--green);
	background: var(--green-tint);
}

.task-row-status.in-progress {
	color: var(--accent);
	background: var(--accent-tint);
}

.task-row-status.pending {
	color: var(--ink-3);
	background: var(--inset);
}

.task-row-chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--ink-3);
	flex-shrink: 0;
	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.task-row[aria-expanded="true"] .task-row-chevron {
	transform: rotate(180deg);
}

.task-row-content {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 300ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 200ms ease;
}

.task-row[aria-expanded="true"] .task-row-content {
	grid-template-rows: 1fr;
	opacity: 1;
}

.task-row-inner {
	overflow: hidden;
	padding: 0 10px 12px;
}

.task-row-body {
	font-size: 13px;
	color: var(--ink-2);
	line-height: 1.5;
}

/* ---------- 7. Chat Prompt（聊天输入框） ---------- */
.chat-prompt {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.chat-prompt-input-wrap {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	padding: 12px 16px;
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease;
}

.chat-prompt-input-wrap:focus-within {
	border-color: var(--accent);
	box-shadow: var(--ring);
}

.chat-prompt-input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	color: var(--ink);
	resize: none;
	outline: none;
	min-height: 24px;
	max-height: 200px;
	line-height: 1.5;
}

.chat-prompt-input::placeholder {
	color: var(--ink-3);
}

.chat-prompt-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.chat-prompt-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--accent);
	color: white;
	border-radius: var(--r-md);
	cursor: pointer;
	transition:
		background 150ms ease,
		transform 100ms ease;
}

.chat-prompt-btn:hover {
	background: var(--accent-ink);
}

.chat-prompt-btn:active {
	transform: scale(0.95);
}

.chat-prompt-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.chat-prompt-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 8px;
	font-size: 11px;
	color: var(--ink-3);
}

.chat-prompt-hint kbd {
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 1px 4px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--page);
}

/* ---------- 8. Search Input（搜索输入框） ---------- */
.search-input {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.search-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.search-input-icon {
	position: absolute;
	left: 12px;
	width: 16px;
	height: 16px;
	color: var(--ink-3);
	pointer-events: none;
}

.search-input-field {
	width: 100%;
	padding: 8px 12px 8px 36px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	font-size: 13px;
	color: var(--ink);
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease;
}

.search-input-field::placeholder {
	color: var(--ink-3);
}

.search-input-field:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--ring);
}

/* ---------- 9. Stats Cards（统计卡片） ---------- */
.stats-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	width: 100%;
}

.stat-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	padding: 16px;
	transition: all 200ms ease;
}

.stat-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.stat-card-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-3);
	margin-bottom: 4px;
}

.stat-card-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.stat-card-change {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12px;
	font-weight: 500;
	margin-top: 4px;
}

.stat-card-change.positive {
	color: var(--green);
}

.stat-card-change.negative {
	color: var(--red);
}

/* ---------- 10. Status Badge（状态徽章） ---------- */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--r-full);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.status-badge.online {
	color: var(--green);
	background: var(--green-tint);
}

.status-badge.offline {
	color: var(--red);
	background: var(--red-tint);
}

.status-badge.running {
	color: var(--orange);
	background: var(--orange-tint);
}

.status-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
}

.status-badge.running .status-badge-dot {
	animation: pulse 1.4s ease-in-out infinite;
}

/* ---------- 11. Icon Button Group（图标按钮组） ---------- */
.icon-btn-group {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	background: var(--inset);
	border-radius: var(--r-lg);
}

.icon-btn-group .icon-btn {
	width: 28px;
	height: 28px;
	border-radius: var(--r-md);
}

.icon-btn-group .icon-btn.active {
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-xs);
}

/* ---------- 12. Empty State（空状态） ---------- */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	text-align: center;
}

.empty-state-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	border-radius: var(--r-xl);
	background: var(--inset);
	color: var(--ink-3);
}

.empty-state-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 4px;
}

.empty-state-desc {
	font-size: 13px;
	color: var(--ink-2);
	max-width: 320px;
	line-height: 1.5;
}

.empty-state-action {
	margin-top: 16px;
}