/**
 * Horas.io AI Chat Widget - CSS
 * Panel flotante de chat con IA para interacción con lenguaje natural
 */

/* ============================================
   Variables y configuración base
   ============================================ */
:root {
	--aic-bg: #ffffff;
	--aic-bg-secondary: #f5f7fa;
	--aic-bg-user: #00bcd4;
	--aic-bg-assistant: #f0f2f5;
	--aic-border: #e0e4e8;
	--aic-text: #333333;
	--aic-text-muted: #6b7280;
	--aic-text-user: #ffffff;
	--aic-text-assistant: #333333;
	--aic-primary: #00bcd4;
	--aic-primary-hover: #00acc1;
	--aic-danger: #f44336;
	--aic-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	--aic-radius: 16px;
	--aic-radius-sm: 12px;
	--aic-radius-xs: 8px;
	--aic-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--aic-fab-size: 56px;
	--aic-panel-width: 460px;
	--aic-panel-height: 640px;
	--aic-panel-min-width: 360px;
	--aic-panel-min-height: 460px;
	--aic-panel-max-width: min(760px, calc(100vw - 32px));
	--aic-panel-max-height: min(88vh, calc(100vh - 112px));
}

/* Tema oscuro (black) */
body[data-theme="black"] .ai-chat-panel,
body[data-theme="black"] .ai-chat-fab,
.ai-chat-panel[data-theme="black"],
.ai-chat-fab[data-theme="black"] {
	--aic-bg: #1e2a35;
	--aic-bg-secondary: #142532;
	--aic-bg-assistant: #2a3a4a;
	--aic-border: #3a4a5a;
	--aic-text: #e8e6e3;
	--aic-text-muted: #9ca3af;
	--aic-text-assistant: #e8e6e3;
	--aic-primary: #26c6da;
	--aic-primary-hover: #4dd0e1;
}

/* Tema medusa */
body[data-theme="medusa"] .ai-chat-panel,
body[data-theme="medusa"] .ai-chat-fab,
.ai-chat-panel[data-theme="medusa"],
.ai-chat-fab[data-theme="medusa"] {
	--aic-bg: #2c3f51;
	--aic-bg-secondary: #21313f;
	--aic-bg-assistant: #354d63;
	--aic-border: #4a6278;
	--aic-text: #ffffff;
	--aic-text-muted: #a0b4c5;
	--aic-text-assistant: #ffffff;
	--aic-primary: #4b709c;
	--aic-primary-hover: #5c82b0;
}

/* Tema nord */
body[data-theme="nord"] .ai-chat-panel,
body[data-theme="nord"] .ai-chat-fab,
.ai-chat-panel[data-theme="nord"],
.ai-chat-fab[data-theme="nord"] {
	--aic-bg: #3B4252;
	--aic-bg-secondary: #2E3440;
	--aic-bg-assistant: #434C5E;
	--aic-border: #4C566A;
	--aic-text: #ECEFF4;
	--aic-text-muted: #D8DEE9;
	--aic-text-assistant: #ECEFF4;
	--aic-primary: #88C0D0;
	--aic-primary-hover: #8FBCBB;
}

/* ============================================
   FAB Button
   ============================================ */
.ai-chat-fab {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 998;
	cursor: pointer;
}

.ai-chat-fab-btn {
	width: var(--aic-fab-size) !important;
	height: var(--aic-fab-size) !important;
	background: var(--aic-primary) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 188, 212, 0.35);
	transition: var(--aic-transition);
}

.ai-chat-fab-btn:hover {
	background: var(--aic-primary-hover) !important;
	box-shadow: 0 6px 24px rgba(0, 188, 212, 0.5);
	transform: scale(1.05);
}

.ai-chat-fab-btn i {
	font-size: 28px;
	line-height: var(--aic-fab-size);
}

.ai-chat-logo {
	display: block;
	object-fit: contain;
}

.ai-chat-logo-fab {
	width: 32px;
	height: 32px;
}

.ai-chat-fab-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--aic-danger);
	color: #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================
   Chat Panel
   ============================================ */
.ai-chat-panel {
	position: fixed;
	bottom: 90px;
	left: 24px;
	width: var(--aic-panel-width);
	height: var(--aic-panel-height);
	min-width: var(--aic-panel-min-width);
	min-height: var(--aic-panel-min-height);
	max-width: var(--aic-panel-max-width);
	max-height: var(--aic-panel-max-height);
	background: var(--aic-bg);
	border-radius: var(--aic-radius);
	box-shadow: var(--aic-shadow);
	border: 1px solid var(--aic-border);
	display: flex;
	flex-direction: column;
	z-index: 998;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px) scale(0.95);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.ai-chat-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.ai-chat-panel.is-minimized {
	height: 52px;
	min-height: 52px;
}

.ai-chat-panel.is-minimized .ai-chat-messages,
.ai-chat-panel.is-minimized .ai-chat-footer,
.ai-chat-panel.is-minimized .ai-chat-loading,
.ai-chat-panel.is-minimized .ai-chat-error,
.ai-chat-panel.is-minimized .ai-chat-sidebar {
	display: none !important;
}

.ai-chat-panel.is-resizing {
	transition: none !important;
	user-select: none;
}

/* ============================================
   Header
   ============================================ */
.ai-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--aic-border);
	background: var(--aic-bg);
	flex-shrink: 0;
	min-height: 52px;
	cursor: default;
}

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

.ai-chat-title i {
	color: var(--aic-primary);
	font-size: 22px;
}

.ai-chat-logo-header {
	width: 22px;
	height: 22px;
}

.ai-chat-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ai-chat-header-actions a {
	color: var(--aic-text-muted);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--aic-transition);
}

.ai-chat-header-actions a:hover {
	background: var(--aic-bg-secondary);
	color: var(--aic-text);
}

.ai-chat-header-actions a i {
	font-size: 20px;
}

/* ============================================
   Context Banner
   ============================================ */
.ai-chat-context-banner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: rgba(255, 193, 7, 0.16);
	border-bottom: 1px solid rgba(255, 193, 7, 0.35);
	color: var(--aic-text);
	flex-shrink: 0;
}

.ai-chat-context-banner-text {
	font-size: 12px;
	line-height: 1.4;
}

.ai-chat-context-banner-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ai-chat-context-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	color: var(--aic-text) !important;
	border: 1px solid var(--aic-border);
	border-radius: 999px;
	background: var(--aic-bg);
	transition: var(--aic-transition);
}

.ai-chat-context-btn:hover {
	background: var(--aic-primary);
	border-color: var(--aic-primary);
	color: #fff !important;
}

/* ============================================
   Sidebar (Conversation History)
   ============================================ */
.ai-chat-sidebar {
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--aic-bg);
	z-index: 5;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--aic-border);
}

.ai-chat-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--aic-border);
	font-weight: 600;
	font-size: 14px;
	color: var(--aic-text);
}

.ai-chat-sidebar-close {
	color: var(--aic-text-muted) !important;
}

.ai-chat-sidebar-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}

.ai-chat-sidebar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--aic-radius-xs);
	cursor: pointer;
	transition: var(--aic-transition);
	color: var(--aic-text);
	font-size: 13px;
}

.ai-chat-sidebar-item:hover {
	background: var(--aic-bg-secondary);
}

.ai-chat-sidebar-item.active {
	background: var(--aic-bg-secondary);
	font-weight: 600;
}

.ai-chat-sidebar-item-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-chat-sidebar-item-delete {
	color: var(--aic-text-muted);
	opacity: 0;
	transition: var(--aic-transition);
	padding: 2px;
}

.ai-chat-sidebar-item:hover .ai-chat-sidebar-item-delete {
	opacity: 1;
}

.ai-chat-sidebar-item-delete:hover {
	color: var(--aic-danger) !important;
}

.ai-chat-sidebar-empty {
	text-align: center;
	padding: 32px 16px;
	color: var(--aic-text-muted);
	font-size: 13px;
}

/* ============================================
   Messages Area
   ============================================ */
.ai-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
}

/* Welcome state */
.ai-chat-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px 16px;
	flex: 1;
}

.ai-chat-welcome-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--aic-bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.ai-chat-welcome-icon i {
	font-size: 32px;
	color: var(--aic-primary);
}

.ai-chat-logo-welcome {
	width: 34px;
	height: 34px;
}

.ai-chat-welcome h6 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--aic-text);
}

.ai-chat-welcome p {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--aic-text-muted);
	line-height: 1.4;
}

.ai-chat-capabilities {
	width: 100%;
	max-width: 420px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0 0 16px;
}

.ai-chat-capability-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--aic-border);
	border-radius: 10px;
	background: var(--aic-bg-secondary);
	font-size: 12px;
	color: var(--aic-text);
	text-align: left;
}

.ai-chat-capability-item i {
	color: var(--aic-primary);
}

/* Quick action chips */
.ai-chat-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.ai-chat-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: var(--aic-bg-secondary);
	border: 1px solid var(--aic-border);
	border-radius: 20px;
	font-size: 12px;
	color: var(--aic-text) !important;
	cursor: pointer;
	transition: var(--aic-transition);
	white-space: nowrap;
}

.ai-chat-chip-primary {
	background: rgba(0, 188, 212, 0.12);
	border-color: rgba(0, 188, 212, 0.35);
}

.ai-chat-chip:hover {
	background: var(--aic-primary);
	color: #fff !important;
	border-color: var(--aic-primary);
}

.ai-chat-chip i {
	font-size: 14px;
}

/* Message bubbles */
.ai-chat-msg {
	display: flex;
	flex-direction: column;
	max-width: 85%;
	animation: aicFadeIn 0.3s ease;
}

.ai-chat-msg.user {
	align-self: flex-end;
}

.ai-chat-msg.assistant {
	align-self: flex-start;
}

.ai-chat-msg-bubble {
	padding: 10px 14px;
	border-radius: var(--aic-radius-sm);
	font-size: 13px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ai-chat-msg.user .ai-chat-msg-bubble {
	background: var(--aic-bg-user);
	color: var(--aic-text-user);
	border-bottom-right-radius: 4px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble {
	background: var(--aic-bg-assistant);
	color: var(--aic-text-assistant);
	border-bottom-left-radius: 4px;
}

.ai-chat-msg-time {
	font-size: 10px;
	color: var(--aic-text-muted);
	margin-top: 4px;
	padding: 0 4px;
}

.ai-chat-msg.user .ai-chat-msg-time {
	text-align: right;
}

/* Markdown rendering inside assistant bubbles */
.ai-chat-msg-bubble p {
	margin: 0 0 8px;
}

.ai-chat-msg-bubble p:last-child {
	margin-bottom: 0;
}

.ai-chat-msg-bubble strong {
	font-weight: 600;
}

.ai-chat-msg-bubble code {
	background: rgba(0, 0, 0, 0.08);
	padding: 2px 5px;
	border-radius: 4px;
	font-size: 12px;
	font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.ai-chat-msg-bubble pre {
	background: rgba(0, 0, 0, 0.08);
	padding: 10px;
	border-radius: var(--aic-radius-xs);
	overflow-x: auto;
	margin: 8px 0;
}

.ai-chat-msg-bubble pre code {
	background: none;
	padding: 0;
}

.ai-chat-msg-bubble ul,
.ai-chat-msg-bubble ol {
	margin: 4px 0;
	padding-left: 20px;
}

.ai-chat-msg-bubble li {
	margin: 2px 0;
}

/* Tool execution indicator */
.ai-chat-tool-indicator {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--aic-bg-secondary);
	border-radius: 20px;
	font-size: 11px;
	color: var(--aic-text-muted);
	align-self: center;
	max-width: 90%;
}

.ai-chat-tool-indicator i {
	font-size: 14px;
	color: var(--aic-primary);
}

/* ============================================
   Loading indicator
   ============================================ */
.ai-chat-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	flex-shrink: 0;
}

.ai-chat-typing {
	display: flex;
	gap: 4px;
	align-items: center;
}

.ai-chat-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aic-primary);
	animation: aicTyping 1.4s ease-in-out infinite;
}

.ai-chat-typing span:nth-child(2) {
	animation-delay: 0.2s;
}

.ai-chat-typing span:nth-child(3) {
	animation-delay: 0.4s;
}

.ai-chat-loading-text {
	font-size: 12px;
	color: var(--aic-text-muted);
}

/* ============================================
   Error banner
   ============================================ */
.ai-chat-error {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: #fff3f3;
	border-top: 1px solid #ffcccc;
	font-size: 12px;
	color: var(--aic-danger);
	flex-shrink: 0;
}

.ai-chat-error-close {
	margin-left: auto;
	color: var(--aic-danger) !important;
	cursor: pointer;
}

/* ============================================
   Footer / Input Area
   ============================================ */
.ai-chat-footer {
	border-top: 1px solid var(--aic-border);
	background: var(--aic-bg);
	flex-shrink: 0;
	padding: 12px 16px 10px;
}

.ai-chat-input-wrapper {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	background: var(--aic-bg-secondary);
	border-radius: var(--aic-radius-sm);
	border: 1px solid var(--aic-border);
	padding: 8px 12px;
	transition: var(--aic-transition);
}

.ai-chat-input-wrapper:focus-within {
	border-color: var(--aic-primary);
	box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.15);
}

.ai-chat-input {
	flex: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	resize: none;
	overflow-y: auto;
	font-size: 13px;
	line-height: 1.4;
	color: var(--aic-text);
	max-height: 220px;
	min-height: 20px;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	font-family: inherit;
	height: 20px;
}

.ai-chat-input::placeholder {
	color: var(--aic-text-muted);
}

.ai-chat-send-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--aic-primary);
	padding: 4px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--aic-transition);
	flex-shrink: 0;
}

.ai-chat-send-btn:hover:not(:disabled) {
	background: rgba(0, 188, 212, 0.1);
}

.ai-chat-send-btn:disabled {
	color: var(--aic-text-muted);
	opacity: 0.5;
	cursor: default;
}

.ai-chat-send-btn i {
	font-size: 20px;
}

.ai-chat-footer-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 4px 0;
}

/* Model Picker (custom dropdown) */
.ai-chat-model-picker {
	position: relative;
}

.ai-chat-model-current {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--aic-bg-secondary);
	border: 1px solid var(--aic-border);
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	transition: var(--aic-transition);
	user-select: none;
}

.ai-chat-model-current:hover {
	border-color: var(--aic-primary);
}

.ai-chat-model-icon {
	font-size: 14px;
	color: var(--aic-primary);
}

.ai-chat-model-current span {
	font-size: 12px;
	font-weight: 500;
	color: var(--aic-text);
}

.ai-chat-model-arrow {
	font-size: 16px;
	color: var(--aic-text-muted);
	transition: transform 0.2s ease;
}

.ai-chat-model-picker.open .ai-chat-model-arrow {
	transform: rotate(180deg);
}

.ai-chat-model-dropdown {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	min-width: 180px;
	background: var(--aic-bg);
	border: 1px solid var(--aic-border);
	border-radius: var(--aic-radius-xs);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	z-index: 10;
	padding: 4px 0;
	max-height: 260px;
	overflow-y: auto;
}

.ai-chat-model-picker.open .ai-chat-model-dropdown {
	display: block;
	animation: aicFadeIn 0.15s ease;
}

.ai-chat-model-group-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--aic-text-muted);
	padding: 8px 12px 4px;
}

.ai-chat-model-option {
	padding: 7px 12px;
	font-size: 12px;
	color: var(--aic-text);
	cursor: pointer;
	transition: background 0.15s ease;
}

.ai-chat-model-option:hover {
	background: var(--aic-bg-secondary);
}

.ai-chat-model-option.selected {
	color: var(--aic-primary);
	font-weight: 600;
}

.ai-chat-powered {
	font-size: 10px;
	color: var(--aic-text-muted);
	opacity: 0.7;
}

/* Resize handle */
.ai-chat-resize-handle {
	position: absolute;
	right: 0;
	top: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aic-text-muted);
	background: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.04) 50%);
	border-top-right-radius: var(--aic-radius);
	cursor: nesw-resize;
	z-index: 8;
}

.ai-chat-resize-handle i {
	font-size: 14px;
	pointer-events: none;
}

.ai-chat-resize-handle:hover {
	color: var(--aic-primary);
}

/* No API Key state */
.ai-chat-no-key {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px 20px;
	flex: 1;
	gap: 0;
}

.ai-chat-no-key-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--aic-bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	border: 2px solid var(--aic-border);
}

.ai-chat-no-key-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--aic-text);
}

.ai-chat-no-key-desc {
	font-size: 13px;
	color: var(--aic-text-muted);
	line-height: 1.45;
	margin: 0 0 18px;
	max-width: 300px;
}

.ai-chat-no-key-steps {
	width: 100%;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.ai-chat-no-key-step {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	font-size: 12px;
	color: var(--aic-text);
	line-height: 1.4;
}

.ai-chat-no-key-step a {
	color: var(--aic-primary) !important;
	text-decoration: none;
	font-weight: 500;
}

.ai-chat-no-key-step a:hover {
	text-decoration: underline;
}

.ai-chat-no-key-step-num {
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	background: var(--aic-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ai-chat-no-key-security {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--aic-text-muted);
	padding: 8px 12px;
	border-radius: var(--aic-radius-xs);
	background: var(--aic-bg-secondary);
	max-width: 300px;
}

.ai-chat-no-key-security i {
	font-size: 14px !important;
	color: var(--aic-primary);
}

/* ============================================
   Animations
   ============================================ */
@keyframes aicFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes aicTyping {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	30% {
		transform: translateY(-6px);
		opacity: 1;
	}
}

/* ============================================
   Mobile responsive
   ============================================ */
@media screen and (max-width: 600px) {
	.ai-chat-panel {
		width: 100vw;
		height: 100vh;
		min-width: 100vw;
		min-height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 0;
	}

	.ai-chat-panel.is-open {
		transform: translateY(0) scale(1);
	}

	.ai-chat-fab {
		bottom: 16px;
		left: 16px;
	}

	.ai-chat-resize-handle {
		display: none;
	}
}

@media screen and (max-width: 400px) {
	.ai-chat-capabilities {
		max-width: 100%;
	}

	.ai-chat-quick-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ai-chat-chip {
		justify-content: center;
	}
}

/* ============================================
   Scrollbar
   ============================================ */
.ai-chat-messages::-webkit-scrollbar,
.ai-chat-sidebar-list::-webkit-scrollbar {
	width: 5px;
}

.ai-chat-messages::-webkit-scrollbar-track,
.ai-chat-sidebar-list::-webkit-scrollbar-track {
	background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb,
.ai-chat-sidebar-list::-webkit-scrollbar-thumb {
	background: var(--aic-border);
	border-radius: 10px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover,
.ai-chat-sidebar-list::-webkit-scrollbar-thumb:hover {
	background: var(--aic-text-muted);
}

/* ============================================
   Settings Panel
   ============================================ */
.ai-chat-settings {
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--aic-bg);
	z-index: 5;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--aic-border);
}

.ai-chat-settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--aic-border);
	font-weight: 600;
	font-size: 14px;
	color: var(--aic-text);
}

.ai-chat-settings-close {
	color: var(--aic-text-muted) !important;
}

.ai-chat-settings-content {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
}

.ai-chat-settings-section {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--aic-border);
}

.ai-chat-settings-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.ai-chat-settings-section-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aic-text);
	margin-bottom: 10px;
}

.ai-chat-settings-section-title i {
	color: var(--aic-primary);
}

/* API Key status */
.ai-chat-key-active,
.ai-chat-key-inactive {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--aic-text);
	margin-bottom: 8px;
}

.ai-chat-settings-key-change {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.ai-chat-settings-key-input {
	flex: 1;
	border: 1px solid var(--aic-border) !important;
	border-radius: var(--aic-radius-xs) !important;
	padding: 6px 10px !important;
	font-size: 12px !important;
	height: auto !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: var(--aic-bg-secondary) !important;
	color: var(--aic-text) !important;
}

.ai-chat-delete-key-btn {
	margin-left: auto !important;
	padding: 0 8px !important;
	line-height: 28px !important;
	height: 28px !important;
	font-size: 12px !important;
}

/* API Key inline setup (no-key state) */
.ai-chat-key-setup {
	width: 100%;
	max-width: 300px;
	margin-bottom: 18px;
}

.ai-chat-key-input-wrapper {
	position: relative;
	margin-bottom: 10px;
}

.ai-chat-key-input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px !important;
	color: var(--aic-text-muted);
	pointer-events: none;
	z-index: 1;
}

.ai-chat-key-input {
	width: 100%;
	border: 1.5px solid var(--aic-border) !important;
	border-radius: var(--aic-radius-xs) !important;
	padding: 11px 14px 11px 38px !important;
	font-size: 13px !important;
	height: auto !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: var(--aic-bg-secondary) !important;
	color: var(--aic-text) !important;
	text-align: left;
	letter-spacing: 1px;
	transition: border-color 0.2s;
	-webkit-text-security: disc;
}

.ai-chat-key-input:focus {
	border-color: var(--aic-primary) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.12);
}

.ai-chat-save-key-btn {
	width: 100%;
	background-color: var(--aic-primary) !important;
	border-radius: var(--aic-radius-xs) !important;
	font-weight: 600;
	letter-spacing: 0.3px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-transform: none;
	box-shadow: 0 2px 8px rgba(0, 188, 212, 0.25);
	transition: background 0.2s, box-shadow 0.2s;
}

.ai-chat-save-key-btn:hover {
	background-color: var(--aic-primary-hover) !important;
	box-shadow: 0 4px 12px rgba(0, 188, 212, 0.35);
}

/* Legacy hint (kept for settings panel key form) */
.ai-chat-key-hint {
	font-size: 11px !important;
	color: var(--aic-text-muted) !important;
	margin-top: 10px !important;
}

.ai-chat-key-hint a {
	color: var(--aic-primary) !important;
}

/* Tool permissions */
.ai-chat-tool-permissions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-chat-radio-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: var(--aic-radius-xs);
	cursor: pointer;
	transition: background 0.15s;
	font-size: 13px;
	color: var(--aic-text);
}

.ai-chat-radio-label:hover {
	background: var(--aic-bg-secondary);
}

.ai-chat-radio-label input[type="radio"] {
	margin-right: 4px;
}

.ai-chat-radio-label span {
	font-weight: 500;
}

.ai-chat-radio-label small {
	width: 100%;
	padding-left: 24px;
	font-size: 11px;
	color: var(--aic-text-muted);
	margin-top: 2px;
}

/* Usage stats */
.ai-chat-usage-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.ai-chat-usage-item {
	text-align: center;
	padding: 10px 6px;
	background: var(--aic-bg-secondary);
	border-radius: var(--aic-radius-xs);
}

.ai-chat-usage-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--aic-primary);
	line-height: 1.2;
}

.ai-chat-usage-label {
	font-size: 10px;
	color: var(--aic-text-muted);
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ai-chat-usage-models-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--aic-text);
	margin-bottom: 6px;
}

.ai-chat-usage-models {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ai-chat-usage-model-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--aic-text);
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--aic-bg-secondary);
}

.ai-chat-usage-model-name {
	flex: 1;
	font-weight: 500;
}

.ai-chat-usage-model-count {
	color: var(--aic-text-muted);
}

.ai-chat-usage-model-cost {
	color: var(--aic-primary);
	font-weight: 500;
}

.ai-chat-usage-inline-stats {
	display: flex;
	gap: 12px;
	font-size: 11px;
	color: var(--aic-text-muted);
	margin: 2px 0 12px;
}

.ai-chat-usage-inline-stats strong {
	color: var(--aic-text);
}

.ai-chat-usage-log-date {
	font-size: 10px;
	color: var(--aic-text-muted);
	margin: -2px 0 4px 8px;
}

.ai-chat-usage-log-failed {
	border-left: 2px solid var(--aic-danger);
}

.ai-chat-usage-empty,
.ai-chat-usage-loading {
	font-size: 12px;
	color: var(--aic-text-muted);
	text-align: center;
	padding: 12px;
}

/* Models loading in dropdown */
.ai-chat-models-loading {
	padding: 12px;
	text-align: center;
	font-size: 12px;
	color: var(--aic-text-muted);
}

/* Settings scrollbar */
.ai-chat-settings-content::-webkit-scrollbar {
	width: 5px;
}

.ai-chat-settings-content::-webkit-scrollbar-track {
	background: transparent;
}

.ai-chat-settings-content::-webkit-scrollbar-thumb {
	background: var(--aic-border);
	border-radius: 10px;
}

.ai-chat-settings-content::-webkit-scrollbar-thumb:hover {
	background: var(--aic-text-muted);
}

/* ============================================
   Entity actions — interactive card/list chips
   ============================================ */
.ai-chat-entities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--aic-border);
}

.ai-chat-entity-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px 4px 8px;
	border-radius: 8px;
	background: var(--aic-bg-secondary);
	border: 1px solid var(--aic-border);
	font-size: 12px;
	line-height: 1.3;
	transition: border-color 0.15s;
}

.ai-chat-entity-item:hover {
	border-color: var(--aic-primary);
}

.ai-chat-entity-icon {
	color: var(--aic-primary) !important;
	font-size: 14px !important;
	flex-shrink: 0;
}

.ai-chat-entity-label {
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--aic-text);
	font-weight: 500;
}

.ai-chat-entity-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	color: var(--aic-text-muted) !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}

.ai-chat-entity-btn:hover {
	background: rgba(0, 188, 212, 0.15);
	color: var(--aic-primary) !important;
}

.ai-chat-entity-btn i {
	font-size: 15px !important;
}

/* Clickable ticket references in markdown */
.ai-chat-ticket-ref {
	color: var(--aic-primary);
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dashed var(--aic-primary);
	transition: color 0.15s;
}

.ai-chat-ticket-ref:hover {
	color: var(--aic-primary-hover);
}

/* Highlight animation for cards/lists navigated from chat */
@keyframes ai-chat-highlight-pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.6); }
	50% { box-shadow: 0 0 0 8px rgba(0, 188, 212, 0.15); }
	100% { box-shadow: 0 0 0 0 rgba(0, 188, 212, 0); }
}

.ai-chat-highlight {
	animation: ai-chat-highlight-pulse 0.7s ease-out 3;
	outline: 2px solid var(--aic-primary);
	outline-offset: 2px;
	z-index: 10;
	position: relative;
}