/**
 * Context Component: Tree Styles
 *
 * Hierarchical tree with expand/collapse, indentation, badges.
 */

/* ==========================================================================
   TREE CONTAINER
   ========================================================================== */

.plexa-chat-context-tree {
	font-size: 13px;
}

/* ==========================================================================
   NODE LIST
   ========================================================================== */

.plexa-chat-context-tree__children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nested children are indented and hidden by default */
.plexa-chat-context-tree__node > .plexa-chat-context-tree__children {
	padding-left: 20px;
	display: none;
}

/* Show children when parent is expanded */
.plexa-chat-context-tree__node--expanded > .plexa-chat-context-tree__children {
	display: block;
}

/* ==========================================================================
   NODE ROW
   ========================================================================== */

.plexa-chat-context-tree__row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 4px;
	cursor: default;
	transition: background-color 0.15s;
}

.plexa-chat-context-tree__node--parent > .plexa-chat-context-tree__row {
	cursor: pointer;
}

.plexa-chat-context-tree__row:hover {
	background: var(--plexa-chat-bg-tertiary, #2a2a2a);
}

/* ==========================================================================
   TOGGLE
   ========================================================================== */

.plexa-chat-context-tree__toggle {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s;
}

.plexa-chat-context-tree__toggle .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--plexa-chat-text-muted, #888888);
}

/* Rotate arrow when expanded */
.plexa-chat-context-tree__node--expanded > .plexa-chat-context-tree__row .plexa-chat-context-tree__toggle {
	transform: rotate(90deg);
}

/* Spacer for leaf nodes (aligns with parent toggle) */
.plexa-chat-context-tree__toggle-spacer {
	flex: 0 0 16px;
	width: 16px;
}

/* ==========================================================================
   ICON
   ========================================================================== */

.plexa-chat-context-tree__icon {
	flex: 0 0 16px;
}

.plexa-chat-context-tree__icon .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--plexa-chat-primary, #0073aa);
}

/* ==========================================================================
   LABEL
   ========================================================================== */

.plexa-chat-context-tree__label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--plexa-chat-text, #ffffff);
}

/* ==========================================================================
   BADGE
   ========================================================================== */

.plexa-chat-context-tree__badge {
	flex: 0 0 auto;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 8px;
	background: var(--plexa-chat-bg-tertiary, #2a2a2a);
	color: var(--plexa-chat-text-muted, #888888);
	white-space: nowrap;
}