/* ========================================
   Sicza Cube — 表情选择器样式
   ======================================== */

/* 布局容器 */
.sicza-emoji-layout {
	display: flex;
	flex-direction: column;
}

.sicza-emoji-bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

/* 表情选择器 */
.sicza-emoji-picker {
	position: relative;
	flex-shrink: 0;
}

/* 切换按钮 */
.sicza-emoji-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	cursor: pointer;
	font-size: 13px;
	color: #666;
	transition: all 0.2s;
	font-family: inherit;
	line-height: 1.4;
}

.sicza-emoji-toggle:hover {
	border-color: oklch(0.58 0.16 35);
	color: oklch(0.58 0.16 35);
}

/* 面板 */
.sicza-emoji-panel {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,.12);
	overflow: hidden;
	width: 400px;
	max-width: 95vw;
	z-index: 9999;
}

/* 标签页 */
.sicza-emoji-tabs {
	display: flex;
	border-bottom: 1px solid #f0f0f0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sicza-emoji-tab {
	flex-shrink: 0;
	padding: 8px 14px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 13px;
	color: #888;
	border-bottom: 2px solid transparent;
	transition: all 0.2s;
	font-family: inherit;
}

.sicza-emoji-tab:hover { color: #333; background: #fafafa; }

.sicza-emoji-tab--active {
	color: oklch(0.58 0.16 35);
	border-bottom-color: oklch(0.58 0.16 35);
	font-weight: 500;
}

/* 网格 */
.sicza-emoji-grid {
	display: grid;
	grid-template-columns: repeat(var(--per-row, 10), 1fr);
	gap: 2px;
	padding: 10px;
	max-height: 240px;
	overflow-y: auto;
}

/* 表情项 */
.sicza-emoji-item {
	width: 100%;
	aspect-ratio: 1;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	padding: 4px;
	transition: transform 0.15s, background 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sicza-emoji-item:hover {
	background: oklch(0.96 0.03 35);
	transform: scale(1.15);
}

.sicza-emoji-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* 正文中的表情 */
img.sicza-emoji {
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	vertical-align: -0.2em;
	margin: 0 2px;
}

/* 响应式 */
@media (max-width: 480px) {
	.sicza-emoji-panel { width: 95vw; }
	.sicza-emoji-grid { grid-template-columns: repeat(8, 1fr); }
}