/**
 * Chat Layout Styles
 *
 * Zone-based layout styles for Multi-Mode Chat Layout System.
 * Complements chat.css with layout-specific arrangements.
 *
 * Arrangements:
 * - side-by-side: Context left, Interactive right
 * - stacked: Context top, Interactive bottom
 * - context-hidden: Interactive only, Context toggleable
 * - interactive-only: No Context Zone
 */

/* ==========================================================================
   LAYOUT BASE
   ========================================================================== */

.plexa-chat-layout {
	/* CSS Variable Defaults */
	--plexa-chat-bg: #1a1a1a;
	--plexa-chat-bg-secondary: #252525;
	--plexa-chat-bg-tertiary: #2a2a2a;
	--plexa-chat-text: #ffffff;
	--plexa-chat-text-secondary: #b0b0b0;
	--plexa-chat-text-muted: #888888;
	--plexa-chat-border: #333333;
	--plexa-chat-border-light: #444444;
	--plexa-chat-primary: #0073aa;
	--plexa-chat-primary-hover: #005d8c;
	--plexa-chat-radius: 12px;

	display: flex;
	height: 500px;
	background: var(--plexa-chat-bg);
	border-radius: var(--plexa-chat-radius);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	color: var(--plexa-chat-text);
}

.plexa-chat-layout--light {
	--plexa-chat-bg: #1a1a1a;
	--plexa-chat-text: #fff;
}

.plexa-chat-layout--dark {
	--plexa-chat-bg: #0d0d0d;
	--plexa-chat-text: #fff;
}

/* ==========================================================================
   ARRANGEMENT: SIDE-BY-SIDE
   ========================================================================== */

.plexa-chat-layout--side-by-side {
	flex-direction: row;
}

.plexa-chat-layout--side-by-side .plexa-chat-context-zone {
	flex: 0 0 350px;
	border-right: 1px solid var(--plexa-chat-border);
}

.plexa-chat-layout--side-by-side .plexa-chat-interactive-zone {
	flex: 1 1 auto;
}

/* ==========================================================================
   ARRANGEMENT: STACKED
   ========================================================================== */

.plexa-chat-layout--stacked {
	flex-direction: column;
}

.plexa-chat-layout--stacked .plexa-chat-context-zone {
	flex: 0 0 auto;
	max-height: 200px;
	border-bottom: 1px solid var(--plexa-chat-border);
}

.plexa-chat-layout--stacked .plexa-chat-interactive-zone {
	flex: 1 1 auto;
}

/* ==========================================================================
   ARRANGEMENT: CONTEXT-HIDDEN
   ========================================================================== */

.plexa-chat-layout--context-hidden {
	flex-direction: row;
	position: relative;
}

.plexa-chat-layout--context-hidden .plexa-chat-context-zone {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 350px;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 10;
	background: var(--plexa-chat-bg);
	border-right: 1px solid var(--plexa-chat-border);
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

.plexa-chat-layout--context-hidden .plexa-chat-context-zone--visible {
	transform: translateX(0);
}

.plexa-chat-layout--context-hidden .plexa-chat-interactive-zone {
	flex: 1 1 100%;
}

/* Toggle button shows in context-hidden mode */
.plexa-chat-layout--context-hidden .plexa-chat-context-zone__toggle {
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 0 8px 8px 0;
	background: var(--plexa-chat-bg-secondary);
	border: 1px solid var(--plexa-chat-border);
	border-left: none;
}

/* ==========================================================================
   ARRANGEMENT: INTERACTIVE-ONLY
   ========================================================================== */

.plexa-chat-layout--interactive-only {
	flex-direction: column;
}

.plexa-chat-layout--interactive-only .plexa-chat-context-zone {
	display: none;
}

.plexa-chat-layout--interactive-only .plexa-chat-interactive-zone {
	flex: 1 1 auto;
}

/* ==========================================================================
   CONTEXT ZONE
   ========================================================================== */

.plexa-chat-context-zone {
	display: flex;
	flex-direction: column;
	background: var(--plexa-chat-bg-secondary);
	overflow: hidden;
}

.plexa-chat-context-zone--hidden .plexa-chat-context-zone__content {
	display: none;
}

.plexa-chat-context-zone__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--plexa-chat-bg-tertiary);
	border-bottom: 1px solid var(--plexa-chat-border);
}

.plexa-chat-context-zone__title {
	font-weight: 600;
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.plexa-chat-context-zone__toggle {
	padding: 4px 8px;
	border: 1px solid var(--plexa-chat-border);
	border-radius: 4px;
	background: transparent;
	color: var(--plexa-chat-text-muted);
	cursor: pointer;
	transition: all 0.2s;
}

.plexa-chat-context-zone__toggle:hover {
	background: var(--plexa-chat-border);
	color: var(--plexa-chat-text);
}

.plexa-chat-context-zone__toggle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.plexa-chat-context-zone__content {
	flex: 1 1 auto;
	padding: 16px;
	overflow-y: auto;
}

.plexa-chat-context-zone__empty {
	color: var(--plexa-chat-text-muted);
	font-style: italic;
	font-size: 13px;
	margin: 0;
}

/* JSON Viewer */
.plexa-chat-context-zone__json {
	margin: 0;
	padding: 12px;
	background: var(--plexa-chat-bg);
	border: 1px solid var(--plexa-chat-border);
	border-radius: 6px;
	font-family: "SF Mono", Monaco, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--plexa-chat-text);
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* JSON Editor (editable mode) */
.plexa-chat-context-zone__editor {
	width: 100%;
	min-height: 200px;
	padding: 12px;
	background: var(--plexa-chat-bg);
	border: 1px solid var(--plexa-chat-border);
	border-radius: 6px;
	font-family: "SF Mono", Monaco, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--plexa-chat-text);
	resize: vertical;
}

.plexa-chat-context-zone__editor:focus {
	outline: none;
	border-color: var(--plexa-chat-primary);
}

.plexa-chat-context-zone--editable .plexa-chat-context-zone__json {
	background: transparent;
	border: none;
	padding: 0;
}

.plexa-chat-context-zone__actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
}

.plexa-chat-context-zone__save {
	padding: 8px 16px;
	background: var(--plexa-chat-primary);
	border: none;
	border-radius: 4px;
	color: var(--plexa-chat-text);
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.plexa-chat-context-zone__save:hover {
	background: var(--plexa-chat-primary-hover);
}

.plexa-chat-context-zone__save:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   INTERACTIVE ZONE
   ========================================================================== */

.plexa-chat-interactive-zone {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.plexa-chat-interactive-zone .plexa-chat-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plexa-chat-interactive-zone .plexa-chat-input {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--plexa-chat-border);
	background: var(--plexa-chat-bg-secondary);
}

.plexa-chat-interactive-zone .plexa-chat-input__field {
	flex: 1 1 auto;
	padding: 10px 14px;
	border: 1px solid var(--plexa-chat-border-light);
	border-radius: 20px;
	font-size: 14px;
	line-height: 1.4;
	resize: none;
	max-height: 120px;
	outline: none;
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
	transition: border-color 0.2s;
}

.plexa-chat-interactive-zone .plexa-chat-input__field:focus {
	border-color: var(--plexa-chat-primary);
}

.plexa-chat-interactive-zone .plexa-chat-input__send {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--plexa-chat-primary);
	color: var(--plexa-chat-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

.plexa-chat-interactive-zone .plexa-chat-input__send:hover {
	background: var(--plexa-chat-primary-hover);
}

.plexa-chat-interactive-zone .plexa-chat-input__send:disabled {
	background: #555;
	cursor: not-allowed;
}

/* ==========================================================================
   MODE: ADMIN
   ========================================================================== */

.plexa-chat-layout--admin {
	height: 600px;
}

.plexa-chat-layout--admin .plexa-chat-context-zone {
	flex: 0 0 400px;
}

/* Full-page admin layout */
.plexa-chat--admin .plexa-chat-layout--admin {
	position: fixed;
	top: 32px;
	left: 160px;
	right: 0;
	bottom: 0;
	height: auto;
	border-radius: 0;
}

.folded .plexa-chat--admin .plexa-chat-layout--admin {
	left: 36px;
}

@media (max-width: 782px) {
	.plexa-chat--admin .plexa-chat-layout--admin {
		top: 46px;
		left: 0;
	}
}

/* ==========================================================================
   MODE: HOVER (FLOATING)
   ========================================================================== */

.plexa-chat-layout--hover {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99990;
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

body.admin-bar .plexa-chat-layout--hover {
	bottom: 56px;
}

/* Trigger Button */
.plexa-chat-layout--hover .plexa-chat-floating__trigger {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--plexa-chat-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, background-color 0.2s;
}

.plexa-chat-layout--hover .plexa-chat-floating__trigger:hover {
	background: var(--plexa-chat-primary-hover);
	transform: scale(1.05);
}

.plexa-chat-layout--hover .plexa-chat-floating__trigger .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.plexa-chat-layout--hover .plexa-chat-floating__trigger-text {
	display: none;
}

/* Icon states */
.plexa-chat-layout--hover .plexa-chat-floating__icon-close {
	display: none;
}

.plexa-chat-layout--hover.plexa-chat-floating--open .plexa-chat-floating__icon-open {
	display: none;
}

.plexa-chat-layout--hover.plexa-chat-floating--open .plexa-chat-floating__icon-close {
	display: block;
}

/* Panel */
.plexa-chat-layout--hover .plexa-chat-floating__panel {
	position: absolute;
	bottom: 70px;
	right: 0;
	width: 640px;
	height: 750px;
	background: var(--plexa-chat-bg);
	border-radius: var(--plexa-chat-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: transform 0.3s ease, opacity 0.2s, visibility 0.2s;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.plexa-chat-layout--hover.plexa-chat-floating--open .plexa-chat-floating__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Hide panel header in hover mode */
.plexa-chat-layout--hover .plexa-chat-floating__header {
	display: none;
}

/* Panel content fills available space */
.plexa-chat-layout--hover .plexa-chat-floating__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.plexa-chat-layout--hover .plexa-chat-interactive-zone {
	flex: 1 1 auto;
	height: 100%;
}

/* Context Zone in Hover - slide from left */
.plexa-chat-layout--hover .plexa-chat-context-zone {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 10;
	background: var(--plexa-chat-bg);
}

.plexa-chat-layout--hover .plexa-chat-context-zone--visible {
	transform: translateX(0);
}

/* Hover Mobile */
@media (max-width: 480px) {
	.plexa-chat-layout--hover {
		bottom: 16px;
		right: 16px;
	}

	body.admin-bar .plexa-chat-layout--hover {
		bottom: 48px;
	}

	.plexa-chat-layout--hover .plexa-chat-floating__panel {
		position: fixed;
		bottom: 80px;
		right: 16px;
		left: 16px;
		width: auto;
		height: calc(100vh - 120px);
	}

	body.admin-bar .plexa-chat-layout--hover .plexa-chat-floating__panel {
		bottom: 112px;
		height: calc(100vh - 152px);
	}
}

/* Position variants */
.plexa-chat-layout--bottom-left {
	right: auto;
	left: 24px;
}

.plexa-chat-layout--top-right {
	bottom: auto;
	top: 24px;
}

.plexa-chat-layout--top-left {
	bottom: auto;
	right: auto;
	top: 24px;
	left: 24px;
}

body.admin-bar .plexa-chat-layout--top-right,
body.admin-bar .plexa-chat-layout--top-left {
	top: 56px;
}

@media (max-width: 480px) {
	.plexa-chat-layout--bottom-left {
		left: 16px;
	}
	.plexa-chat-layout--top-right,
	.plexa-chat-layout--top-left {
		top: 16px;
	}
	body.admin-bar .plexa-chat-layout--top-right,
	body.admin-bar .plexa-chat-layout--top-left {
		top: 48px;
	}
}

/* ==========================================================================
   MODE: EMBEDDED
   ========================================================================== */

.plexa-chat-layout--embedded {
	height: 400px;
	border: 1px solid var(--plexa-chat-border);
}

.plexa-chat-layout--embedded .plexa-chat-interactive-zone {
	height: 100%;
}

/* ==========================================================================
   MODE: LANDING
   ========================================================================== */

.plexa-chat-layout--landing {
	position: relative;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--plexa-chat-bg);
	padding: 40px 20px;
	box-sizing: border-box;
}

/* Greeting Zone - visible by default */
.plexa-chat-greeting-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 600px;
	padding: 40px 20px;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.plexa-chat-greeting-zone__icon {
	margin-bottom: 24px;
}

.plexa-chat-greeting-zone__icon .dashicons {
	font-size: 64px;
	width: 64px;
	height: 64px;
	color: var(--plexa-chat-primary);
}

.plexa-chat-greeting-zone__heading {
	margin: 0 0 16px 0;
	font-size: 32px;
	font-weight: 600;
	color: var(--plexa-chat-text);
	line-height: 1.3;
}

.plexa-chat-greeting-zone__subtext {
	margin: 0 0 32px 0;
	font-size: 16px;
	color: var(--plexa-chat-text-secondary);
	line-height: 1.5;
}

.plexa-chat-greeting-zone__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* Quick Action Pills */
.plexa-chat-quick-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--plexa-chat-bg-secondary);
	border: 1px solid var(--plexa-chat-border);
	border-radius: 24px;
	color: var(--plexa-chat-text);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.plexa-chat-quick-action:hover {
	background: var(--plexa-chat-bg-tertiary);
	border-color: var(--plexa-chat-primary);
	transform: translateY(-2px);
}

.plexa-chat-quick-action .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--plexa-chat-primary);
}

.plexa-chat-quick-action__text {
	white-space: nowrap;
}

/* Interactive Zone - hidden by default in landing mode */
.plexa-chat-layout--landing .plexa-chat-interactive-zone {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
	display: flex;
	flex-direction: column;
	padding: 40px 20px;
	height: 0;
	overflow: hidden;
}

/* Landing Active State - greeting fades out, interactive zone appears */
.plexa-chat-layout--landing-active .plexa-chat-greeting-zone {
	opacity: 0;
	transform: translateY(-20px);
	pointer-events: none;
	height: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.plexa-chat-layout--landing-active .plexa-chat-interactive-zone {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	height: auto;
	overflow: visible;
	min-height: 400px;
}

/* Landing Interactive Zone Styling */
.plexa-chat-layout--landing .plexa-chat-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.plexa-chat-layout--landing .plexa-chat-input {
	flex: 0 0 auto;
	display: flex;
	gap: 12px;
	padding: 16px;
	background: var(--plexa-chat-bg-secondary);
	border-radius: var(--plexa-chat-radius);
	border: 1px solid var(--plexa-chat-border);
}

.plexa-chat-layout--landing .plexa-chat-input__field {
	flex: 1 1 auto;
	padding: 12px 16px;
	border: 1px solid var(--plexa-chat-border-light);
	border-radius: 24px;
	font-size: 15px;
	line-height: 1.4;
	resize: none;
	max-height: 150px;
	outline: none;
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
	transition: border-color 0.2s;
}

.plexa-chat-layout--landing .plexa-chat-input__field:focus {
	border-color: var(--plexa-chat-primary);
}

.plexa-chat-layout--landing .plexa-chat-input__send {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: var(--plexa-chat-primary);
	color: var(--plexa-chat-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s, transform 0.2s;
}

.plexa-chat-layout--landing .plexa-chat-input__send:hover {
	background: var(--plexa-chat-primary-hover);
	transform: scale(1.05);
}

.plexa-chat-layout--landing .plexa-chat-input__send:disabled {
	background: #555;
	cursor: not-allowed;
	transform: none;
}

/* Landing Mobile Responsive */
@media (max-width: 768px) {
	.plexa-chat-layout--landing {
		padding: 20px 16px;
	}

	.plexa-chat-greeting-zone {
		padding: 20px 16px;
	}

	.plexa-chat-greeting-zone__icon .dashicons {
		font-size: 48px;
		width: 48px;
		height: 48px;
	}

	.plexa-chat-greeting-zone__heading {
		font-size: 24px;
	}

	.plexa-chat-greeting-zone__subtext {
		font-size: 14px;
	}

	.plexa-chat-greeting-zone__actions {
		gap: 8px;
	}

	.plexa-chat-quick-action {
		padding: 8px 14px;
		font-size: 13px;
	}

	.plexa-chat-layout--landing .plexa-chat-interactive-zone {
		padding: 20px 16px;
	}
}

/* ==========================================================================
   RESPONSIVE: SIDE-BY-SIDE TO STACKED
   ========================================================================== */

@media (max-width: 768px) {
	.plexa-chat-layout--side-by-side {
		flex-direction: column;
	}

	.plexa-chat-layout--side-by-side .plexa-chat-context-zone {
		flex: 0 0 auto;
		max-height: 180px;
		border-right: none;
		border-bottom: 1px solid var(--plexa-chat-border);
	}

	.plexa-chat-layout--admin {
		height: auto;
		min-height: 500px;
	}
}

/* ==========================================================================
   MODE: APP
   Three-zone grid layout: sidebar + interactive + context panel.
   Used by both standalone /chat/ page and [plexa_chat layout="app"] embed.
   All app-specific classes use plexa-chat-app-* prefix.
   ========================================================================== */

.plexa-chat-layout--app {
	--plexa-chat-app-sidebar-width: 260px;
	--plexa-chat-app-sidebar-collapsed-width: 60px;
	--plexa-chat-app-context-width: 360px;

	position: relative;
	display: grid;
	grid-template-columns: var(--plexa-chat-app-sidebar-width) 1fr 4px var(--plexa-chat-app-context-width);
	height: 100vh;
	background: var(--plexa-chat-bg);
	border-radius: 0;
	overflow: hidden;
}

/* Sidebar collapsed: grid adjusts to narrow column */
.plexa-chat-layout--app.plexa-chat-layout--sidebar-collapsed {
	grid-template-columns: var(--plexa-chat-app-sidebar-collapsed-width) 1fr 4px var(--plexa-chat-app-context-width);
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */

.plexa-chat-app-sidebar {
	display: flex;
	flex-direction: column;
	background: var(--plexa-chat-bg-secondary);
	border-right: 1px solid var(--plexa-chat-border);
	overflow: hidden;
	transition: width 0.3s ease;
	width: var(--plexa-chat-app-sidebar-width);
}

/* Collapsed state */
.plexa-chat-app-sidebar--collapsed {
	width: var(--plexa-chat-app-sidebar-collapsed-width);
}

.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__logo-text,
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__new-chat-text,
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__tool-label,
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__section-label,
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__sessions {
	display: none;
}

.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__new-chat-btn {
	justify-content: center;
	padding: 10px;
}

.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__tool {
	justify-content: center;
	padding: 10px;
}

/* Sidebar header */
.plexa-chat-app-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--plexa-chat-border);
}

.plexa-chat-app-sidebar__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--plexa-chat-text);
	font-weight: 600;
	font-size: 15px;
}

.plexa-chat-app-sidebar__logo .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--plexa-chat-primary);
}

.plexa-chat-app-sidebar__toggle {
	padding: 4px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--plexa-chat-text-muted);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.plexa-chat-app-sidebar__toggle:hover {
	background: var(--plexa-chat-border);
	color: var(--plexa-chat-text);
}

.plexa-chat-app-sidebar__toggle .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* New Chat button */
.plexa-chat-app-sidebar__new-chat {
	padding: 12px 16px;
}

.plexa-chat-app-sidebar__new-chat-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	border: 1px dashed var(--plexa-chat-border-light);
	border-radius: 8px;
	background: transparent;
	color: var(--plexa-chat-text);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
}

.plexa-chat-app-sidebar__new-chat-btn:hover {
	background: var(--plexa-chat-bg-tertiary);
	border-color: var(--plexa-chat-primary);
}

.plexa-chat-app-sidebar__new-chat-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--plexa-chat-primary);
}

/* Section labels */
.plexa-chat-app-sidebar__section {
	padding: 8px 16px;
}

.plexa-chat-app-sidebar__section-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--plexa-chat-text-muted);
	padding: 4px 0 8px;
}

/* Tool items */
.plexa-chat-app-sidebar__tools {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.plexa-chat-app-sidebar__tool {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--plexa-chat-text-secondary);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
}

.plexa-chat-app-sidebar__tool:hover {
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
}

.plexa-chat-app-sidebar__tool--active {
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-primary);
}

.plexa-chat-app-sidebar__tool .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Session items */
.plexa-chat-app-sidebar__sessions {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 0;
	max-height: 300px;
	overflow-y: auto;
}

.plexa-chat-app-sidebar__session {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--plexa-chat-text-secondary);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
}

.plexa-chat-app-sidebar__session:hover {
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
}

.plexa-chat-app-sidebar__session--active {
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
}

.plexa-chat-app-sidebar__session-preview {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plexa-chat-app-sidebar__session-time {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--plexa-chat-text-muted);
}

/* --------------------------------------------------------------------------
   CONTEXT PANEL (inside context zone)
   -------------------------------------------------------------------------- */

.plexa-chat-app-context-panel {
	display: flex;
	flex-direction: column;
	background: var(--plexa-chat-bg-secondary);
	border-left: 1px solid var(--plexa-chat-border);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   PANEL TAB BAR
   -------------------------------------------------------------------------- */

.plexa-chat-app-context-tabs {
	display: flex;
	align-items: stretch;
	background: var(--plexa-chat-bg-tertiary);
	border-bottom: 1px solid var(--plexa-chat-border);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 0 0 auto;
}

.plexa-chat-app-context-tabs::-webkit-scrollbar {
	display: none;
}

.plexa-chat-app-context-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--plexa-chat-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.plexa-chat-app-context-tab .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

.plexa-chat-app-context-tab:hover {
	color: var(--plexa-chat-text-secondary);
}

.plexa-chat-app-context-tab:focus-visible {
	outline: 2px solid var(--plexa-chat-primary);
	outline-offset: -2px;
}

.plexa-chat-app-context-tab--active {
	color: var(--plexa-chat-primary);
	border-bottom-color: var(--plexa-chat-primary);
}

/* --------------------------------------------------------------------------
   PANEL PANES
   -------------------------------------------------------------------------- */

.plexa-chat-app-context-pane {
	display: none;
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}

.plexa-chat-app-context-pane--active {
	display: flex;
	flex-direction: column;
}

.plexa-chat-app-context-pane__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 16px;
	color: var(--plexa-chat-text-muted);
	font-size: 13px;
	font-style: italic;
}

@keyframes plexa-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.plexa-spin {
	animation: plexa-spin 1s linear infinite;
}

/* --------------------------------------------------------------------------
   HELP PANEL CONTENT
   -------------------------------------------------------------------------- */

.plexa-chat-app-help-panel {
	padding: 20px 16px;
}

.plexa-chat-app-help-panel__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--plexa-chat-text);
	margin: 0 0 4px;
}

.plexa-chat-app-help-panel__summary {
	font-size: 13px;
	color: var(--plexa-chat-text-muted);
	margin: 0 0 20px;
	line-height: 1.5;
}

.plexa-chat-app-help-section {
	margin-bottom: 20px;
}

.plexa-chat-app-help-section__heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--plexa-chat-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--plexa-chat-border);
}

.plexa-chat-app-help-section p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--plexa-chat-text-secondary);
	margin: 0;
}

/* Help: Definition list */
.plexa-chat-app-help-dl {
	margin: 0;
	padding: 0;
}

.plexa-chat-app-help-dl dt {
	font-size: 13px;
	font-weight: 600;
	color: var(--plexa-chat-primary);
	margin: 0 0 2px;
	font-family: monospace;
}

.plexa-chat-app-help-dl dd {
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
	margin: 0 0 12px 0;
	padding-left: 12px;
	line-height: 1.5;
}

.plexa-chat-app-help-dl dd:last-child {
	margin-bottom: 0;
}

/* Help: Steps list */
.plexa-chat-app-help-steps {
	margin: 0;
	padding: 0 0 0 20px;
	counter-reset: step-counter;
	list-style: none;
}

.plexa-chat-app-help-steps li {
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
	line-height: 1.6;
	margin-bottom: 8px;
	padding-left: 8px;
	position: relative;
	counter-increment: step-counter;
}

.plexa-chat-app-help-steps li::before {
	content: counter(step-counter);
	position: absolute;
	left: -20px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-primary);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 2px;
}

.plexa-chat-app-help-steps li:last-child {
	margin-bottom: 0;
}

/* Legacy header kept for backward compat — hidden when tabs are active */
.plexa-chat-app-context-panel__header {
	display: none;
}

.plexa-chat-app-context-panel__title {
	font-weight: 600;
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.plexa-chat-app-context-panel__content {
	flex: 1 1 auto;
	padding: 16px;
	overflow-y: auto;
}

.plexa-chat-app-context-panel__loading {
	color: var(--plexa-chat-text-muted);
	font-style: italic;
	font-size: 13px;
	margin: 0;
	text-align: center;
	padding: 40px 0;
}

/* --------------------------------------------------------------------------
   CONTEXT FOOTER (Save/Reset)
   -------------------------------------------------------------------------- */

.plexa-chat-app-context-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--plexa-chat-border);
	background: var(--plexa-chat-bg-tertiary);
}

.plexa-chat-app-context-footer__actions {
	display: flex;
	gap: 8px;
}

.plexa-chat-app-context-footer__save {
	padding: 6px 16px;
	border: none;
	border-radius: 4px;
	background: var(--plexa-chat-primary);
	color: var(--plexa-chat-text);
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.plexa-chat-app-context-footer__save:hover {
	background: var(--plexa-chat-primary-hover);
}

.plexa-chat-app-context-footer__save:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.plexa-chat-app-context-footer__reset {
	padding: 6px 16px;
	border: 1px solid var(--plexa-chat-border-light);
	border-radius: 4px;
	background: transparent;
	color: var(--plexa-chat-text-secondary);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
}

.plexa-chat-app-context-footer__reset:hover {
	background: var(--plexa-chat-border);
	color: var(--plexa-chat-text);
}

/* Dirty indicator */
.plexa-chat-app-dirty-indicator {
	font-size: 12px;
	color: #c97b7b;
	display: flex;
	align-items: center;
	gap: 6px;
}

.plexa-chat-app-dirty-indicator::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c97b7b;
}

/* --------------------------------------------------------------------------
   ACCORDION (Topic clusters in context panel)
   -------------------------------------------------------------------------- */

.plexa-chat-app-accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.plexa-chat-app-accordion__item {
	border: 1px solid var(--plexa-chat-border);
	border-radius: 8px;
	overflow: hidden;
}

.plexa-chat-app-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--plexa-chat-bg-tertiary);
	cursor: pointer;
	transition: background-color 0.2s;
}

.plexa-chat-app-accordion__header:hover {
	background: var(--plexa-chat-border);
}

.plexa-chat-app-accordion__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--plexa-chat-text);
}

.plexa-chat-app-accordion__stats {
	font-size: 12px;
	color: var(--plexa-chat-text-muted);
}

.plexa-chat-app-accordion__toggle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--plexa-chat-text-muted);
	transition: transform 0.2s;
}

.plexa-chat-app-accordion__item--expanded .plexa-chat-app-accordion__toggle .dashicons {
	transform: rotate(180deg);
}

.plexa-chat-app-accordion__body {
	display: none;
	padding: 12px 14px;
	border-top: 1px solid var(--plexa-chat-border);
}

.plexa-chat-app-accordion__item--expanded .plexa-chat-app-accordion__body {
	display: block;
}

/* Gap row highlight */
.plexa-chat-app-gap-row {
	background: rgba(232, 168, 56, 0.1);
	border-left: 3px solid #e8a838;
	padding: 4px 8px;
	margin: 4px 0;
	border-radius: 4px;
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
}

/* --------------------------------------------------------------------------
   APP MODE: RESIZE HANDLE
   -------------------------------------------------------------------------- */

.plexa-chat-app-resize-handle {
	width: 4px;
	cursor: col-resize;
	background: var(--plexa-chat-border);
	transition: background-color 0.2s;
	position: relative;
	z-index: 5;
}

.plexa-chat-app-resize-handle:hover,
.plexa-chat-app-resize-handle--active {
	background: var(--plexa-chat-primary);
}

/* Wider hit area for easier grabbing */
.plexa-chat-app-resize-handle::before {
	content: '';
	position: absolute;
	top: 0;
	left: -4px;
	right: -4px;
	bottom: 0;
}

/* Prevent text selection during drag */
.plexa-chat-layout--resizing {
	user-select: none;
	cursor: col-resize;
}

/* --------------------------------------------------------------------------
   APP MODE: ROUTINE PILLS (below chat input)
   -------------------------------------------------------------------------- */

.plexa-chat-app-routine-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 16px;
	border-top: 1px solid var(--plexa-chat-border, rgba(255,255,255,0.08));
}

.plexa-chat-app-routine-pills:empty {
	display: none;
}

.plexa-chat-quick-action--routine {
	background: rgba(255, 255, 255, 0.08);
	color: var(--plexa-chat-text-muted, #a0a0b0);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 4px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.plexa-chat-quick-action--routine:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--plexa-chat-text, #e0e0e0);
}

.plexa-chat-quick-action--routine .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

/* --------------------------------------------------------------------------
   APP MODE: ZONE ORDER (render() outputs context before interactive)
   -------------------------------------------------------------------------- */

.plexa-chat-layout--app .plexa-chat-interactive-zone {
	order: 1;
}

.plexa-chat-layout--app .plexa-chat-app-resize-handle {
	order: 2;
}

.plexa-chat-layout--app .plexa-chat-context-zone {
	order: 3;
}

/* --------------------------------------------------------------------------
   APP MODE: INTERACTIVE ZONE OVERRIDES
   -------------------------------------------------------------------------- */

.plexa-chat-layout--app .plexa-chat-interactive-zone {
	height: 100%;
	background: var(--plexa-chat-bg);
}

.plexa-chat-layout--app .plexa-chat-messages {
	padding: 24px 32px;
}

.plexa-chat-layout--app .plexa-chat-input {
	padding: 16px 32px;
	background: var(--plexa-chat-bg);
	border-top: none;
}

/* --------------------------------------------------------------------------
   POPUP SYSTEM (generic container)
   -------------------------------------------------------------------------- */

.plexa-chat-popup {
	position: absolute;
	z-index: 300;
	background: var(--plexa-chat-bg-secondary);
	border: 1px solid var(--plexa-chat-border);
	border-radius: var(--plexa-chat-radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100vh - 20px);
}

.plexa-chat-popup__content {
	padding: 0;
}

.plexa-chat-popup__loading {
	padding: 24px;
	text-align: center;
	color: var(--plexa-chat-text-secondary);
}

.plexa-chat-popup__loading .dashicons {
	animation: plexa-spin 1s linear infinite;
}

@keyframes plexa-spin {
	100% { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   SIDEBAR FOOTER (User / Login trigger)
   -------------------------------------------------------------------------- */

.plexa-chat-app-sidebar__footer {
	margin-top: auto;
	flex-shrink: 0;
	padding: 12px 16px;
	border-top: 1px solid var(--plexa-chat-border);
}

.plexa-chat-app-sidebar__user-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--plexa-chat-text);
	font-size: 14px;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.2s;
}

.plexa-chat-app-sidebar__user-trigger:hover {
	background: var(--plexa-chat-bg-tertiary);
}

.plexa-chat-app-sidebar__user-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--plexa-chat-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.plexa-chat-app-sidebar__login-link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--plexa-chat-text-secondary);
	font-size: 14px;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.plexa-chat-app-sidebar__login-link:hover {
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
}

.plexa-chat-app-sidebar__login-link .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Collapsed sidebar: hide text, center icon */
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__user-name,
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__login-text {
	display: none;
}

.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__user-trigger,
.plexa-chat-app-sidebar--collapsed .plexa-chat-app-sidebar__login-link {
	justify-content: center;
	padding: 10px;
}

/* --------------------------------------------------------------------------
   USER MENU POPUP (consumer of generic popup system)
   -------------------------------------------------------------------------- */

.plexa-chat-popup-user-menu {
	padding: 4px;
}

.plexa-chat-popup-user-menu__info {
	padding: 12px 16px;
}

.plexa-chat-popup-user-menu__name {
	display: block;
	font-weight: 600;
	color: var(--plexa-chat-text);
}

.plexa-chat-popup-user-menu__email {
	display: block;
	font-size: 0.85em;
	color: var(--plexa-chat-text-secondary);
	margin-top: 2px;
}

.plexa-chat-popup-user-menu__divider {
	height: 1px;
	margin: 4px 0;
	border: none;
	background: var(--plexa-chat-border);
}

.plexa-chat-popup-user-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--plexa-chat-text);
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	text-align: left;
	transition: background-color 0.15s;
}

.plexa-chat-popup-user-menu__item:hover:not([aria-disabled="true"]) {
	background: var(--plexa-chat-bg-tertiary);
}

.plexa-chat-popup-user-menu__item[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
}

.plexa-chat-popup-user-menu__item .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--plexa-chat-text-muted);
}

.plexa-chat-popup-user-menu__item--danger {
	color: #e74c3c;
}

.plexa-chat-popup-user-menu__item--danger .dashicons {
	color: #e74c3c;
}

/* --------------------------------------------------------------------------
   USAGE POPUP
   -------------------------------------------------------------------------- */

.plexa-chat-popup-usage {
	padding: 16px;
}

.plexa-chat-popup-usage__header {
	margin-bottom: 12px;
}

.plexa-chat-popup-usage__title {
	font-weight: 600;
	font-size: 15px;
	color: var(--plexa-chat-text);
}

.plexa-chat-popup-usage__section {
	margin-bottom: 16px;
}

.plexa-chat-popup-usage__section:last-child {
	margin-bottom: 0;
}

.plexa-chat-popup-usage__section-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--plexa-chat-text-muted);
	margin-bottom: 8px;
}

.plexa-chat-popup-usage__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
}

.plexa-chat-popup-usage__agent {
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
}

.plexa-chat-popup-usage__tokens {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--plexa-chat-text);
}

.plexa-chat-popup-usage__row--total .plexa-chat-popup-usage__agent,
.plexa-chat-popup-usage__row--total .plexa-chat-popup-usage__tokens {
	font-weight: 600;
	color: var(--plexa-chat-text);
}

.plexa-chat-popup-usage__divider {
	height: 1px;
	margin: 6px 0;
	background: var(--plexa-chat-border);
}

.plexa-chat-popup-usage__empty {
	font-size: 13px;
	color: var(--plexa-chat-text-muted);
	margin: 0;
	padding: 4px 0;
}

/* --------------------------------------------------------------------------
   SETTINGS POPUP
   -------------------------------------------------------------------------- */

.plexa-chat-popup-settings {
	padding: 16px;
}

.plexa-chat-popup-settings__title {
	font-weight: 600;
	font-size: 15px;
	color: var(--plexa-chat-text);
	margin-bottom: 12px;
}

.plexa-chat-popup-settings__placeholder {
	font-size: 13px;
	color: var(--plexa-chat-text-muted);
}

/* --------------------------------------------------------------------------
   LOGIN POPUP (consumer of generic popup system)
   -------------------------------------------------------------------------- */

.plexa-chat-popup-login {
	padding: 20px;
}

.plexa-chat-popup-login__header {
	margin-bottom: 16px;
}

.plexa-chat-popup-login__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plexa-chat-text);
}

.plexa-chat-popup-login__subtitle {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
	line-height: 1.4;
}

.plexa-chat-popup-login__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plexa-chat-popup-login__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.plexa-chat-popup-login__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--plexa-chat-text-secondary);
}

.plexa-chat-popup-login__input {
	padding: 8px 12px;
	border: 1px solid var(--plexa-chat-border);
	border-radius: 6px;
	background: var(--plexa-chat-bg-tertiary);
	color: var(--plexa-chat-text);
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
}

.plexa-chat-popup-login__input:focus {
	border-color: var(--plexa-chat-primary);
}

.plexa-chat-popup-login__remember {
	font-size: 13px;
	color: var(--plexa-chat-text-secondary);
}

.plexa-chat-popup-login__remember label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.plexa-chat-popup-login__remember input[type="checkbox"] {
	accent-color: var(--plexa-chat-primary);
}

.plexa-chat-popup-login__submit {
	padding: 10px;
	border: none;
	border-radius: 6px;
	background: var(--plexa-chat-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.2s;
}

.plexa-chat-popup-login__submit:hover {
	opacity: 0.9;
}

.plexa-chat-popup-login__submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.plexa-chat-popup-login__footer {
	margin-top: 12px;
	text-align: center;
}

.plexa-chat-popup-login__forgot-link {
	border: none;
	background: none;
	color: var(--plexa-chat-primary);
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}

.plexa-chat-popup-login__forgot-link:hover {
	text-decoration: underline;
}

.plexa-chat-popup-login__error {
	padding: 8px 12px;
	border-radius: 6px;
	background: rgba(220, 38, 38, 0.12);
	color: #ef4444;
	font-size: 13px;
	line-height: 1.4;
}

.plexa-chat-popup-login__error--shake {
	animation: plexa-shake 0.3s ease;
}

.plexa-chat-popup-login__success {
	padding: 8px 12px;
	border-radius: 6px;
	background: rgba(22, 163, 74, 0.12);
	color: #22c55e;
	font-size: 13px;
	line-height: 1.4;
}

@keyframes plexa-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE: APP LAYOUT
   -------------------------------------------------------------------------- */

/* Tablet: sidebar collapsed, context as slide-over */
@media (max-width: 1024px) {
	.plexa-chat-layout--app {
		grid-template-columns: var(--plexa-chat-app-sidebar-collapsed-width) 1fr;
	}

	.plexa-chat-app-sidebar {
		width: var(--plexa-chat-app-sidebar-collapsed-width);
	}

	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__logo-text,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__new-chat-text,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__tool-label,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__section-label,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__sessions {
		display: none;
	}

	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__new-chat-btn,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__tool {
		justify-content: center;
		padding: 10px;
	}

	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__user-name,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__login-text {
		display: none;
	}

	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__user-trigger,
	.plexa-chat-app-sidebar .plexa-chat-app-sidebar__login-link {
		justify-content: center;
		padding: 10px;
	}

	.plexa-chat-app-resize-handle {
		display: none;
	}

	.plexa-chat-app-context-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--plexa-chat-app-context-width);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 100;
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
	}

	.plexa-chat-app-context-panel--visible {
		transform: translateX(0);
	}
}

/* Mobile: sidebar as drawer overlay, context as bottom sheet */
@media (max-width: 768px) {
	.plexa-chat-layout--app {
		grid-template-columns: 1fr;
	}

	.plexa-chat-app-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--plexa-chat-app-sidebar-width);
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 200;
		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
	}

	.plexa-chat-app-sidebar--open {
		transform: translateX(0);
	}

	/* Show all sidebar content when open on mobile */
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__logo-text,
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__new-chat-text,
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__tool-label,
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__section-label,
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__sessions {
		display: block;
	}

	/* When sidebar drawer is open, show footer text again */
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__user-name,
	.plexa-chat-app-sidebar--open .plexa-chat-app-sidebar__login-text {
		display: inline;
	}

	.plexa-chat-app-context-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 60vh;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 100;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
	}

	.plexa-chat-app-context-panel--visible {
		transform: translateY(0);
	}

	.plexa-chat-layout--app .plexa-chat-messages {
		padding: 16px;
	}

	.plexa-chat-layout--app .plexa-chat-input {
		padding: 12px 16px;
	}
}

/* --------------------------------------------------------------------------
   EMPTY STATES
   -------------------------------------------------------------------------- */

.plexa-chat-app-sidebar__empty {
	font-size: 12px;
	color: var(--plexa-chat-text-muted);
	font-style: italic;
	margin: 0;
	padding: 8px 12px;
}

.plexa-chat-app-context-panel__empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 24px;
	color: var(--plexa-chat-text-muted);
}

.plexa-chat-app-context-panel__empty-state .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	opacity: 0.3;
}

.plexa-chat-app-context-panel__empty-state p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	max-width: 240px;
}

/* --------------------------------------------------------------------------
   LOADING SKELETON
   -------------------------------------------------------------------------- */

@keyframes plexa-skeleton-pulse {
	0% { opacity: 0.4; }
	50% { opacity: 0.7; }
	100% { opacity: 0.4; }
}

.plexa-chat-app-skeleton {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}

.plexa-chat-app-skeleton__line {
	height: 14px;
	background: var(--plexa-chat-border);
	border-radius: 4px;
	animation: plexa-skeleton-pulse 1.5s ease-in-out infinite;
}

.plexa-chat-app-skeleton__line--short {
	width: 60%;
}

.plexa-chat-app-skeleton__line--medium {
	width: 80%;
}

.plexa-chat-app-skeleton__line--full {
	width: 100%;
}

.plexa-chat-app-skeleton__block {
	height: 60px;
	background: var(--plexa-chat-border);
	border-radius: 8px;
	animation: plexa-skeleton-pulse 1.5s ease-in-out infinite;
}

/* Standalone page specific */
.plexa-chat-app-standalone .plexa-chat-layout--app {
	height: 100vh;
	border-radius: 0;
}

/* ==========================================================================
   TOPIC MAP DOCUMENT PANEL (tm-*)
   White document view inside context panel. Each cluster gets a cycling
   accent color via CSS custom properties: --tm-accent, --tm-bg, --tm-row.
   ========================================================================== */

.tm-doc {
	background: #ffffff;
	border-radius: 8px;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	color: #1e293b;
	line-height: 1.5;
}

.tm-doc--empty {
	text-align: center;
	padding: 48px 24px;
	color: #64748b;
}

.tm-doc--empty p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   DOCUMENT HEADER
   -------------------------------------------------------------------------- */

.tm-doc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e2e8f0;
}

.tm-doc__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

.tm-doc__stats {
	display: flex;
	gap: 8px;
}

.tm-doc__stat {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	background: #f1f5f9;
	padding: 3px 10px;
	border-radius: 12px;
}

.tm-doc__message {
	padding: 10px 14px;
	font-size: 13px;
	color: #64748b;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   CLUSTER ACCORDION
   -------------------------------------------------------------------------- */

.tm-cluster {
	margin-bottom: 10px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	overflow: hidden;
	background: #fff;
}

.tm-cluster__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--tm-bg);
	border-left: 4px solid var(--tm-accent);
	cursor: pointer;
	user-select: none;
	transition: filter 0.15s;
}

.tm-cluster__header:hover {
	filter: brightness(0.97);
}

.tm-cluster__toggle {
	font-size: 10px;
	color: var(--tm-accent);
	transition: transform 0.2s;
	display: inline-block;
}

.tm-cluster__header[data-expanded="true"] .tm-cluster__toggle {
	transform: rotate(90deg);
}

.tm-cluster__name {
	font-weight: 600;
	font-size: 14px;
	color: #0f172a;
	flex: 1;
}

.tm-cluster__badges {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tm-cluster__body {
	display: none;
	border-top: 1px solid #e2e8f0;
	padding: 12px 14px;
}

.tm-cluster--expanded .tm-cluster__body {
	display: block;
}

.tm-cluster--expanded .tm-cluster__toggle {
	transform: rotate(90deg);
}

.tm-cluster__empty {
	padding: 16px;
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   BADGES + HEALTH DOT
   -------------------------------------------------------------------------- */

.tm-badge {
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.tm-badge--count {
	background: rgba(0, 0, 0, 0.06);
	color: #64748b;
}

.tm-badge--primary {
	background: #ede9fe;
	color: #7c3aed;
}

.tm-health {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.tm-health--ok {
	background: #22c55e;
}

.tm-health--warn {
	background: #f59e0b;
}

.tm-health--gap {
	background: #ef4444;
}

/* --------------------------------------------------------------------------
   KEYWORD TABLE
   -------------------------------------------------------------------------- */

.tm-section-title {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	padding: 10px 10px 4px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.tm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.tm-table__th {
	padding: 8px 10px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #64748b;
	border-bottom: 1px solid #e2e8f0;
	text-align: left;
	white-space: nowrap;
}

.tm-table__th--center {
	text-align: center;
}

.tm-table__th--right {
	text-align: right;
}

.tm-table__row {
	transition: background-color 0.1s;
}

.tm-table__row:nth-child(even) {
	background: var(--tm-row);
}

.tm-table__row:hover {
	background: var(--tm-row);
	filter: brightness(0.98);
}

.tm-table__td {
	padding: 6px 10px;
	border-bottom: 1px solid #f1f5f9;
	color: #334155;
}

.tm-table__td--keyword {
	font-weight: 500;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tm-table__td--label {
	font-weight: 600;
	color: #64748b;
	white-space: nowrap;
	width: 1%;
}

.tm-table__td--center {
	text-align: center;
}

.tm-table__td--right {
	text-align: right;
}

.tm-table__td--mono {
	font-family: "SF Mono", Monaco, "Courier New", monospace;
	font-size: 11px;
}

.tm-table__td--page {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ROLE BADGES
   -------------------------------------------------------------------------- */

.tm-role {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.tm-role--pillar {
	background: #ede9fe;
	color: #7c3aed;
}

.tm-role--supporting {
	background: #dcfce7;
	color: #16a34a;
}

.tm-role--secondary {
	background: #f1f5f9;
	color: #64748b;
}

.tm-role--longtail {
	background: #ffedd5;
	color: #ea580c;
}

/* --------------------------------------------------------------------------
   STATUS BADGES
   -------------------------------------------------------------------------- */

.tm-status {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.tm-status--published {
	background: #dcfce7;
	color: #16a34a;
}

.tm-status--planned {
	background: #dbeafe;
	color: #2563eb;
}

.tm-status--consideration {
	background: #fef3c7;
	color: #d97706;
}

/* --------------------------------------------------------------------------
   KD DIFFICULTY
   -------------------------------------------------------------------------- */

.tm-kd {
	font-weight: 600;
	font-size: 11px;
}

.tm-kd--easy {
	color: #16a34a;
}

.tm-kd--medium {
	color: #d97706;
}

.tm-kd--hard {
	color: #dc2626;
}

/* --------------------------------------------------------------------------
   PAGE LINK
   -------------------------------------------------------------------------- */

.tm-page-link {
	color: var(--tm-accent, #3b82f6);
	text-decoration: none;
	font-size: 12px;
}

.tm-page-link:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SITE KEYWORD TARGETS SECTION
   -------------------------------------------------------------------------- */

.tm-keywords {
	margin-top: 16px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.tm-keywords__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.tm-keywords__title {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	flex: 1;
}

.tm-keywords .tm-table__row:nth-child(odd) {
	background: #ffffff;
}

.tm-keywords .tm-table__row:nth-child(even) {
	background: #f8fafc;
}

.tm-keywords .tm-table__row:hover {
	background: #f1f5f9;
}

.tm-badge--new {
	background: #dbeafe;
	color: #2563eb;
}

.tm-table__th--num,
.tm-table__td--num {
	text-align: right;
	width: 50px;
	font-variant-numeric: tabular-nums;
}

.tm-kw-status {
	font-size: 10px;
}

.tm-kw-status--saved {
	color: #16a34a;
}

.tm-kw-status--new {
	color: #3b82f6;
}

/* --------------------------------------------------------------------------
   TM RESEARCH STATUS INDICATORS
   -------------------------------------------------------------------------- */

.tm-unmatched {
	color: #9ca3af;
	font-style: italic;
}

.tm-stat-inline {
	color: #6b7280;
	font-size: 0.85em;
	margin-left: 4px;
}

.tm-needs-page {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	color: #d97706;
	background: #fef3c7;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
}

.tm-pillar-summary {
	padding: 6px 0 8px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   TM-DOC RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.tm-doc {
		padding: 12px;
	}

	.tm-doc__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.tm-doc__title {
		font-size: 16px;
	}

	.tm-table__td--keyword {
		max-width: 100px;
	}

	.tm-table__td--page {
		max-width: 80px;
	}
}

/* ==========================================================================
   PROMPT FOOTER
   ========================================================================== */

.plexa-chat-prompt-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 16px 8px;
	min-height: 20px;
	font-size: 11px;
	color: var(--plexa-chat-text-muted);
}

.plexa-chat-prompt-footer__left {
	flex: 1 1 auto;
}

.plexa-chat-prompt-footer__right {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.3s ease, color 0.3s ease;
}

.plexa-chat-prompt-footer__right:empty {
	display: none;
}

.plexa-chat-prompt-footer__right--highlight {
	color: var(--plexa-chat-primary);
}