/**
 * Triple-i Side Panel Styles
 * Tab-based layout with Evaluation mode support
 */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
	/* Light theme (default) */
	--bg-primary: #ffffff;
	--bg-secondary: #f8faf9;
	--bg-tertiary: #f0f4f2;
	--text-primary: #1a2e1f;
	--text-secondary: #4a5d4f;
	--text-muted: #7a8d7f;
	--border-color: #d0ddd5;
	--accent-primary: #6fd42f;
	--accent-dark: #4a9c20;
	--accent-light: #e8fff0;
	--success: #28a745;
	--warning: #ffc107;
	--danger: #dc3545;
	--info: #17a2b8;
	--arbiter-accent: #9b59b6;
	--arbiter-light: #f3e8ff;
	--eval-accent: #3498db;
	--eval-light: #e8f4fc;
}

[data-theme="dark"] {
	--bg-primary: #1a1a2e;
	--bg-secondary: #16213e;
	--bg-tertiary: #0f0f1a;
	--text-primary: #e8e8e8;
	--text-secondary: #b0b0b0;
	--text-muted: #707070;
	--border-color: #2a2a4a;
	--accent-primary: #6fd42f;
	--accent-dark: #5cb025;
	--accent-light: #1a3a1a;
	--arbiter-light: #2a1a3a;
	--eval-light: #1a2a3a;
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	background: var(--bg-primary);
	color: var(--text-primary);
	min-width: 320px;
}

/* ============================================================================
   TAB BAR
   ============================================================================ */

.tab-bar {
	display: flex;
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-secondary);
	padding: 0 8px;
	position: sticky;
	top: 0;
	z-index: 100;
}

.tab-btn {
	background: none;
	border: none;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
	cursor: pointer;
	position: relative;
	transition: color 0.2s;
}

.tab-btn:hover {
	color: var(--accent-dark);
}

.tab-btn.active {
	color: var(--accent-dark);
}

.tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 8px;
	right: 8px;
	height: 2px;
	background: var(--accent-primary);
	border-radius: 2px 2px 0 0;
}

.tab-btn.hidden {
	display: none;
}

/* Status tab special styling when active */
.tab-btn[data-tab="status"].active {
	color: var(--accent-dark);
	font-weight: 600;
}

/* ============================================================================
   TAB CONTENT
   ============================================================================ */

.tab-content {
	padding: 12px;
}

.tab-panel {
	display: none;
}

.tab-panel.active {
	display: block;
}

/* ============================================================================
   PANEL SECTIONS
   ============================================================================ */

.panel-section {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 12px;
}

.panel-section h3 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--text-primary);
}

.panel-section h4 {
	font-size: 13px;
	font-weight: 600;
	margin: 16px 0 8px 0;
	color: var(--text-secondary);
}

.section-hint {
	font-size: 11px;
	color: var(--text-muted);
	margin: -8px 0 12px 0;
}

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

.section-header-row h3 {
	margin-bottom: 0;
}

/* ============================================================================
   EVALUATION TAB STYLES
   ============================================================================ */

.instructions-box {
	background: var(--eval-light);
	border: 1px solid var(--eval-accent);
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 16px;
}

.instructions-box p {
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--text-primary);
}

.instructions-box ol {
	margin: 0;
	padding-left: 20px;
	color: var(--text-secondary);
}

.instructions-box li {
	margin-bottom: 4px;
}

.instructions-box .hint-text {
	margin-top: 10px;
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--eval-accent);
}

.eval-status {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--bg-tertiary);
	border-radius: 6px;
	margin-top: 12px;
}

.eval-status-icon {
	font-size: 24px;
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.eval-status-text {
	font-size: 13px;
	color: var(--text-secondary);
}

.eval-status.success .eval-status-icon {
	animation: none;
}

.eval-status.error {
	background: #fde8e8;
	border: 1px solid var(--danger);
}

[data-theme="dark"] .eval-status.error {
	background: #3a1a1a;
}

.eval-status.error .eval-status-text {
	color: var(--danger);
}

/* Evaluation Result */
.eval-result {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 12px;
}

.result-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-color);
}

.result-row:last-child {
	border-bottom: none;
}

.result-label {
	font-size: 12px;
	color: var(--text-muted);
}

.result-value {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
}

.result-value.high-confidence {
	color: var(--success);
}

.result-value.low-confidence {
	color: var(--warning);
}

/* Low Confidence Warning */
.low-confidence-warning {
	background: #fff8e6;
	border: 1px solid var(--warning);
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

[data-theme="dark"] .low-confidence-warning {
	background: #3a3520;
	border-color: #ffc107;
}

.warning-icon {
	font-size: 20px;
}

.warning-text {
	font-size: 12px;
	color: var(--text-secondary);
}

/* ============================================================================
   LLM SELECTORS (Compact Horizontal)
   ============================================================================ */

.llm-selector-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.llm-option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s;
	flex: 1;
	min-width: 90px;
	max-width: 140px;
}

.llm-option:hover {
	border-color: var(--accent-primary);
	background: var(--accent-light);
}

.llm-option.selected {
	border-color: var(--accent-primary);
	background: var(--accent-light);
	box-shadow: 0 0 0 1px var(--accent-primary);
}

.llm-option.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.llm-option input[type="checkbox"],
.llm-option input[type="radio"] {
	margin: 0;
	accent-color: var(--accent-primary);
}

.llm-option .llm-icon {
	font-size: 14px;
}

.llm-option .llm-name {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-primary);
}

/* Evaluation LLM specific styling */
.eval-llm-option.selected {
	border-color: var(--eval-accent);
	background: var(--eval-light);
	box-shadow: 0 0 0 1px var(--eval-accent);
}

.eval-llm-option input[type="radio"] {
	accent-color: var(--eval-accent);
}

/* Arbiter specific styling */
.arbiter-option.selected {
	border-color: var(--arbiter-accent);
	background: var(--arbiter-light);
	box-shadow: 0 0 0 1px var(--arbiter-accent);
}

.arbiter-option input[type="radio"] {
	accent-color: var(--arbiter-accent);
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */

.form-group {
	margin-bottom: 14px;
}

.form-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background: var(--bg-primary);
	color: var(--text-primary);
	transition: border-color 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--accent-primary);
}

.form-group textarea {
	resize: vertical;
	min-height: 80px;
	font-family: inherit;
}

/* Template details toggle (collapsible) */
.template-details-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	margin-top: 6px;
	cursor: pointer;
	border-radius: 4px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	transition: background 0.15s;
}

.template-details-toggle:hover {
	background: var(--border-color);
}

.details-toggle-text {
	font-size: 11px;
	color: var(--text-secondary);
	font-weight: 500;
}

.details-toggle-arrow {
	font-size: 9px;
	color: var(--text-muted);
	transition: transform 0.2s;
}

.details-toggle-arrow.expanded {
	transform: rotate(90deg);
}

.template-description {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 4px;
}

.template-description strong {
	color: var(--text-secondary);
	font-style: italic;
}

.template-applicability {
	margin-top: 4px;
	padding: 8px;
	background: var(--bg-tertiary);
	border-radius: 4px;
	font-size: 10px;
	line-height: 1.5;
	max-height: 200px;
	overflow-y: auto;
}

/* Cross-validation settings */
.settings-hint {
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: 10px;
	line-height: 1.4;
}

.settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}

.setting-item-labeled {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.setting-item-labeled label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 0;
}

.setting-item-labeled .setting-hint {
	font-size: 9px;
	color: var(--text-muted);
	line-height: 1.3;
	margin-bottom: 4px;
}

.setting-item-labeled input[type="number"] {
	width: 100%;
	padding: 6px 8px;
	text-align: center;
	font-size: 13px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background: var(--bg-primary);
	color: var(--text-primary);
}

.setting-item-labeled input[type="number"]:focus {
	outline: none;
	border-color: var(--accent-primary);
}

/* Legacy setting-item (backward compat) */
.settings-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.setting-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.setting-item span {
	font-size: 12px;
	color: var(--text-secondary);
}

.setting-item input[type="number"] {
	width: 60px;
	padding: 6px 8px;
	text-align: center;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 500;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

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

.btn-primary {
	background: var(--accent-primary);
	color: #1a2e1f;
}

.btn-primary:hover:not(:disabled) {
	background: var(--accent-dark);
}

.btn-secondary {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
	background: var(--border-color);
}

.btn-danger {
	background: var(--danger);
	color: white;
}

.btn-danger:hover:not(:disabled) {
	background: #c82333;
}

.btn-block {
	width: 100%;
}

.btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.btn-icon {
	padding: 8px 12px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-color);
}

.btn-icon:hover {
	background: var(--border-color);
}

.validation-message {
	text-align: center;
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 8px;
}

/* ============================================================================
   STATUS SECTION
   ============================================================================ */

.status-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.status-item {
	text-align: center;
}

.status-label {
	display: block;
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
	margin-bottom: 4px;
}

.status-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

.state-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
}

.state-idle { background: var(--bg-tertiary); color: var(--text-muted); }
.state-distributing { background: #fff3cd; color: #856404; }
.state-waiting_responses { background: #cce5ff; color: #004085; }
.state-arbitrating { background: #f3e8ff; color: #6f42c1; }
.state-synthesizing { background: #d4edda; color: #155724; }
.state-paused { background: #ffeaa7; color: #856404; }
.state-completed { background: #d4edda; color: #155724; }

[data-theme="dark"] .state-distributing { background: #3a3520; color: #ffc107; }
[data-theme="dark"] .state-waiting_responses { background: #1a2a3a; color: #6db3f2; }
[data-theme="dark"] .state-arbitrating { background: #2a1a3a; color: #b388ff; }
[data-theme="dark"] .state-synthesizing { background: #1a3a1a; color: #66bb6a; }
[data-theme="dark"] .state-paused { background: #3a3520; color: #ffc107; }
[data-theme="dark"] .state-completed { background: #1a3a1a; color: #66bb6a; }

.status-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
}

/* ============================================================================
   RESULTS SECTION
   ============================================================================ */

#resultsSection h3 {
	margin-top: 16px;
}

.accordion-item {
	border: 1px solid var(--border-color);
	border-radius: 6px;
	margin-bottom: 8px;
	overflow: hidden;
}

.accordion-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--bg-tertiary);
	cursor: pointer;
	font-weight: 500;
}

.accordion-header:hover {
	background: var(--border-color);
}

.accordion-content {
	padding: 12px;
	background: var(--bg-primary);
	border-top: 1px solid var(--border-color);
}

.accordion-content.collapsed {
	display: none;
}

.collapse-icon {
	font-size: 10px;
	color: var(--text-muted);
}

.loop-verdict {
	margin-left: auto;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
}

.verdict-yes { background: #d4edda; color: #155724; }
.verdict-no { background: #f8d7da; color: #721c24; }

[data-theme="dark"] .verdict-yes { background: #1a3a1a; color: #66bb6a; }
[data-theme="dark"] .verdict-no { background: #3a1a1a; color: #ff6b6b; }

.loop-response {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}

.loop-response:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.loop-response strong {
	display: block;
	margin-bottom: 4px;
	color: var(--text-secondary);
}

.loop-response p {
	font-size: 12px;
	color: var(--text-primary);
	white-space: pre-wrap;
}

#finalSynthesis {
	margin-top: 16px;
}

.synthesis-content {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 12px;
	font-size: 12px;
	white-space: pre-wrap;
	max-height: 300px;
	overflow-y: auto;
	margin-bottom: 8px;
}

.links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.llm-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	color: var(--text-primary);
	text-decoration: none;
	font-size: 12px;
}

.llm-link:hover {
	background: var(--accent-light);
	border-color: var(--accent-primary);
}

/* ============================================================================
   COLLAPSIBLE SECTIONS (generic)
   ============================================================================ */

.collapsible-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: 4px 0;
	user-select: none;
}

.collapsible-header h3 {
	margin: 0;
}

.collapsible-header:hover .collapsible-arrow {
	color: var(--accent-primary);
}

.collapsible-arrow {
	font-size: 10px;
	color: var(--text-muted);
	transition: transform 0.2s;
}

.collapsible-arrow.expanded {
	transform: rotate(90deg);
}

.collapsible-body {
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.collapsible-body.collapsed {
	display: none;
}

/* ============================================================================
   HISTORY LIST
   ============================================================================ */

.history-list {
	max-height: 200px;
	overflow-y: auto;
}

.history-item {
	padding: 10px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
	border-bottom: 1px solid var(--border-color);
}

.history-item:last-child {
	border-bottom: none;
}

.history-item:hover {
	background: var(--accent-light);
}

.history-name {
	font-weight: 500;
	font-size: 12px;
	color: var(--text-primary);
}

.history-meta {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

.history-empty {
	text-align: center;
	color: var(--text-muted);
	padding: 16px;
	font-size: 12px;
}

/* ============================================================================
   PREFERENCES TAB
   ============================================================================ */

.preference-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
}

.preference-row span {
	font-size: 13px;
	color: var(--text-primary);
}

.text-muted {
	color: var(--text-muted) !important;
	font-size: 11px !important;
}

.about-text {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ============================================================================
   EVALUATION RESULT ACTIONS
   ============================================================================ */

.eval-result-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.eval-result-actions .btn {
	flex: 1;
}

/* Template with confidence badge layout */
.template-with-confidence {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.template-with-confidence label {
	margin-bottom: 0;
}

.confidence-badge {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
}

.confidence-badge.high-confidence {
	background: var(--success-light, #d4edda);
	color: var(--success, #28a745);
}

.confidence-badge.low-confidence {
	background: var(--warning-light, #fff3cd);
	color: var(--warning, #856404);
}

[data-theme="dark"] .confidence-badge.high-confidence {
	background: #1a3a1a;
	color: #66bb6a;
}

[data-theme="dark"] .confidence-badge.low-confidence {
	background: #3a3520;
	color: #ffc107;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.hidden {
	display: none !important;
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}