/* ═══════════════════════════════════════════════════════
   ScriptForge — sidebar.css
   Боковая панель: навигация по сценариям, сценам, персонажам
════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   SIDEBAR SHELL
───────────────────────────────────────────── */
#sidebar {
	width: var(--sidebar-w);
	min-width: var(--sidebar-w);
	max-width: var(--sidebar-w);
	height: 100%;
	background: var(--bg-card);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	transition:
		transform var(--trans-long),
		margin var(--trans-long);
	z-index: 10;
	overflow: hidden;
	flex-shrink: 0;
}

#sidebar.collapsed {
	transform: translateX(calc(-1 * var(--sidebar-w)));
	margin-right: calc(-1 * var(--sidebar-w));
}

/* ─── Header ─── */
.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 16px 15px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
}

.logo-icon {
	font-size: 15px;
	color: var(--accent);
	display: inline-block;
	animation: spin-slow 10s linear infinite;
}

.logo-text {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.4px;
	background: linear-gradient(135deg, var(--text-1) 40%, var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ─── Buttons ─── */
.btn-icon {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text-2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--trans);
	flex-shrink: 0;
}
.btn-icon:hover {
	background: var(--bg-hover);
	color: var(--text-1);
	border-color: var(--border-md);
}

.btn-icon-xs {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text-3);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--trans);
	flex-shrink: 0;
}
.btn-icon-xs:hover {
	background: var(--bg-hover);
	color: var(--accent);
	border-color: rgba(91, 141, 239, 0.3);
}

/* ─── Sections ─── */
.screenplay-section {
	flex: 0 0 auto;
	max-height: 180px;
	border-bottom: 1px solid var(--border);
}

.sidebar-divider {
	height: 1px;
	background: var(--border);
}

.scene-section {
	flex: 1;
	overflow: hidden;
	min-height: 60px;
}

.char-section {
	flex: 0 0 auto;
	border-top: 1px solid var(--border);
	max-height: 160px;
	overflow-y: auto;
}

.sidebar-section {
	padding: 12px 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
}

.sidebar-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2px;
	margin-bottom: 4px;
}

.sidebar-label {
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 1.4px;
	color: var(--text-3);
	padding: 0 2px;
	margin-bottom: 2px;
	display: block;
}

.sidebar-empty {
	padding: 6px 4px;
	font-size: 11px;
	color: var(--text-3);
	font-family: var(--font-mono);
}

/* ─── Screenplay Items ─── */
.screenplay-item {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--trans);
	gap: 8px;
	border: 1px solid transparent;
}
.screenplay-item:hover {
	background: var(--bg-hover);
}
.screenplay-item.active {
	background: var(--violet-dim);
	border-color: rgba(160, 91, 239, 0.2);
}
.screenplay-item-icon {
	font-size: 13px;
	opacity: 0.5;
	flex-shrink: 0;
}
.screenplay-item.active .screenplay-item-icon {
	opacity: 1;
}
.screenplay-item-info {
	flex: 1;
	min-width: 0;
}
.screenplay-item-title {
	font-size: 12.5px;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}
.screenplay-item.active .screenplay-item-title {
	color: var(--violet);
}
.screenplay-item-meta {
	font-size: 10.5px;
	color: var(--text-3);
	font-family: var(--font-mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.screenplay-item-del {
	opacity: 0;
	background: none;
	border: none;
	color: var(--text-3);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: all var(--trans);
	padding: 0 2px;
	flex-shrink: 0;
}
.screenplay-item:hover .screenplay-item-del {
	opacity: 1;
}
.screenplay-item-del:hover {
	color: var(--danger);
}

/* ─── Scene Items ─── */
.scene-item {
	display: flex;
	align-items: center;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--trans);
	gap: 6px;
	border: 1px solid transparent;
}
.scene-item:hover {
	background: var(--bg-hover);
}
.scene-item.active {
	background: var(--accent-dim);
	border-color: rgba(91, 141, 239, 0.2);
}
.scene-item-num {
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--text-3);
	min-width: 16px;
}
.scene-item-title {
	flex: 1;
	font-size: 12.5px;
	color: var(--text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.scene-item.active .scene-item-title {
	color: var(--accent);
	font-weight: 500;
}
.scene-item-del {
	opacity: 0;
	background: none;
	border: none;
	color: var(--text-3);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: all var(--trans);
	padding: 0 2px;
}
.scene-item:hover .scene-item-del {
	opacity: 1;
}
.scene-item-del:hover {
	color: var(--danger);
}

/* ─── Characters ─── */
.char-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	cursor: default;
	transition: background var(--trans);
}
.char-pill:hover {
	background: var(--bg-hover);
}
.char-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.char-name {
	font-size: 12.5px;
	color: var(--text-2);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.char-del {
	opacity: 0;
	background: none;
	border: none;
	color: var(--text-3);
	cursor: pointer;
	font-size: 13px;
	transition: all var(--trans);
}
.char-pill:hover .char-del {
	opacity: 1;
}
.char-del:hover {
	color: var(--danger);
}

.btn-text-sm {
	background: none;
	border: none;
	color: var(--text-3);
	font-family: var(--font-ui);
	font-size: 11.5px;
	cursor: pointer;
	padding: 6px 12px;
	text-align: left;
	border-radius: var(--radius-sm);
	transition: all var(--trans);
	margin-top: 2px;
}
.btn-text-sm:hover {
	color: var(--accent);
	background: var(--accent-dim);
}

/* ─── Footer ─── */
.sidebar-footer {
	padding: 10px 12px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.btn-export {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 9px;
	background: var(--bg-hover);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: all var(--trans);
}
.btn-export:hover {
	background: var(--bg-active);
	color: var(--text-1);
	border-color: var(--border-md);
}

.btn-export-main {
	background: linear-gradient(
		135deg,
		rgba(91, 141, 239, 0.15),
		rgba(160, 91, 239, 0.1)
	);
	border-color: rgba(91, 141, 239, 0.25);
	color: var(--accent);
}
.btn-export-main:hover {
	background: linear-gradient(
		135deg,
		rgba(91, 141, 239, 0.25),
		rgba(160, 91, 239, 0.18)
	);
	border-color: rgba(91, 141, 239, 0.45);
	color: var(--text-1);
	box-shadow: 0 0 18px rgba(91, 141, 239, 0.2);
}

.save-status {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--text-3);
	transition: color var(--trans);
	white-space: nowrap;
}
.save-status.saving { color: var(--accent); }
.save-status.saved  { color: var(--success); }

/* ─── Sidebar backdrop (mobile) ─── */
#sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	z-index: 99;
	animation: fadeIn 0.15s ease;
}