/* css\assistant.css */
:root {
  /* ISSUE_3500: Removed duplicate width definitions - now in variables.css */
  /* --assistant-width-expanded: calc(100vw / 5); */
  /* --assistant-width-collapsed: 0px; */

  /* 💡 Guidance Themes - Light Mode Defaults */
  --guidance-bg-success: #d1fae5;
  --guidance-text-success: #065f46;
  --guidance-bg-warning: #fef3c7;
  --guidance-text-warning: #92400e;
  --guidance-bg-error: #fee2e2;
  --guidance-text-error: #991b1b;
  --guidance-bg-info: #dbeafe;
  --guidance-text-info: #1e40af;
}

/* 🎨 PHASE 3: Unified Global Colors - Assistant Panel */
/* Light theme colors inherited from variables.css */
/* Dark theme colors inherited from variables.css */

/* Main container */
.assistant-container {
  position: fixed;
  top: calc(
    var(--nona-header-height) + var(--nona-project-name-height)
  );
  width: var(--assistant-current-width);
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border-light);
  border-top: 1px solid var(--color-border-light);
  height: calc(
    100vh - var(--nona-header-height) - var(--nona-project-name-height)
  );
  padding-bottom: 26px;
  z-index: var(--z-sticky);
  right: 0;
  margin-right: var(--spacing-0) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease,
              border-color 0.3s ease;
  will-change: width, transform;  /* ISSUE_3500: GPU acceleration hint */
  overflow: hidden;
}

[data-user-color-scheme="dark"] .assistant-container {
  background: var(--fusion-glass-bg, rgba(255, 255, 255, 0.03));
  backdrop-filter: var(--fusion-blur, none);
  border-left-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ISSUE_3500: Collapsed state - slide out to right */
.assistant-container.collapsed {
  transform: translateX(100%);  /* Slide out completely */
}

/* Toggle button */
.assistant-collapse-toggle {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  padding: var(--spacing-1);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: var(--z-base);
  transition: transform 0.3s ease;
  color: var(--color-icon);
}

/* Content sections */
.assistant-sections {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Transparent text display box at the top of assistant sections */
.spacer-text-box {
  display: none !important; /* 完全隐藏 spacer */
}

.guidance-section {
  height: calc(
    var(--assistant-total-height) * var(--guide-content-height) / 100
  );
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-0); /* 移除 spacer 后不需要上边距 */
  position: relative;
}

.guidance-section .section-header {
  height: var(--section-header-height);
  min-height: var(--section-header-height);
}

.guidance-section .section-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4);
}

.assistant-section {
  height: calc(
    var(--assistant-total-height) * var(--assistant-content-height) / 100
  );
  display: flex;
  flex-direction: column;
}

.assistant-section .section-header {
  height: var(--section-header-height);
  min-height: var(--section-header-height);
}

.assistant-section .messages-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-4);
}

.chat-input-container {
  min-height: fit-content;
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-border-light);
}

/* Section headers */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border-light);
}

[data-user-color-scheme="dark"] .section-header {
  background: var(--fusion-header-bg, rgba(255, 255, 255, 0.02));
  backdrop-filter: var(--fusion-blur, none);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Style for title headers */
.section-header.nona-nav-link {
  background: var(--color-bg-secondary) !important;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0;
  margin: 0;
}

[data-user-color-scheme="dark"] .section-header.nona-nav-link {
  background: var(--fusion-header-bg) !important;
  border-color: var(--fusion-glass-border);
  box-shadow: var(--fusion-secondary-glow);
}

/* Style for icons in section headers */
.section-header.nona-nav-link .nav-icon svg,
.section-header.nona-nav-link .icon {
  fill: var(--color-primary) !important;
  stroke: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

[data-user-color-scheme="dark"] .section-header.nona-nav-link .nav-icon svg,
[data-user-color-scheme="dark"] .section-header.nona-nav-link .icon {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.section-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--spacing-0);
  background: linear-gradient(135deg, #003b71 0%, #0066cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-user-color-scheme="dark"] .section-title {
  background: var(--fusion-primary-gradient);
}

/* Section content */
.section-content {
  padding: 16px 16px 16px 0;
  overflow-y: auto;
  height: calc(100% - 48px);
}

/* Chat input area */
.chat-input-container {
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-primary, white);
}

[data-user-color-scheme="dark"] .chat-input-container {
  border-top-color: rgba(255, 255, 255, 0.05);
  background: var(--fusion-header-bg, rgba(255, 255, 255, 0.02));
  backdrop-filter: var(--fusion-blur, none);
}

.chat-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-input {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  background: #ffffff !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: 8px;
  color: var(--color-text-primary) !important;
  font-family: var(--font-system);
  font-size: 13px;
  transition: var(--fusion-transition);
}

[data-user-color-scheme="dark"] .chat-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.chat-input:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-focus);
}

[data-user-color-scheme="dark"] .chat-input:focus {
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.2s ease;
}

[data-user-color-scheme="dark"] .send-button {
  background: var(--fusion-primary-gradient);
  transition: var(--fusion-transition);
  box-shadow: var(--fusion-primary-glow);
}

.send-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

@media screen and (max-width: 768px) {
  .assistant-container {
    width: 260px;
  }

  .assistant-container.collapsed {
    width: var(--assistant-width-collapsed);
  }
}

/* Animation effects */
.assistant-container {
  transition: width 0.3s ease, transform 0.3s ease;
}

.section-content {
  transition: opacity 0.2s ease;
}

/* Collapsed state modifications */
.assistant-container.collapsed .section-title,
.assistant-container.collapsed .section-content,
.assistant-container.collapsed .chat-input-container {
  display: none;
}

/* Message styles */
.message {
  margin: 0;
  padding: var(--spacing-4);
  border-radius: 0;
  font-size: 13px;
  line-height: 1.6;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: none;
  transition: transform 0.2s ease;
}

[data-user-color-scheme="dark"] .message {
  backdrop-filter: var(--fusion-blur, none);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.message.user {
  background: #f0f7ff;
  border-left: 3px solid #0066cc;
  color: #003b71;
}

[data-user-color-scheme="dark"] .message.user {
  background: rgba(59, 130, 246, 0.15);
  border-left-color: #3b82f6;
  color: #ffffff;
}

.message.assistant {
  background: #ffffff;
  color: #4b5563;
}

[data-user-color-scheme="dark"] .message.assistant {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
}

.nav-text {
  flex-grow: 1;
  font-family: var(--font-system) !important;
  white-space: nowrap;
  color: #003681;
  font-size: var(--font-size-nav-text) !important;  /* Use centralized nav text font size */
  font-weight: var(--font-weight-nav-text);  /* Use centralized nav text font weight */
}

.nav-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon {
  width: 16px;
  height: 16px;
  color: var(--color-icon);
}

.nav-item.active .icon {
  color: var(--color-active);
}

/* Website Guide Theme Classes */
.guidance-theme-default,
.guidance-theme-success,
.guidance-theme-error,
.guidance-theme-warning,
.guidance-theme-info,
.guidance-theme-processing {
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
  overflow: hidden;
}

[data-user-color-scheme="dark"] .guidance-theme-default,
[data-user-color-scheme="dark"] .guidance-theme-success,
[data-user-color-scheme="dark"] .guidance-theme-error,
[data-user-color-scheme="dark"] .guidance-theme-warning,
[data-user-color-scheme="dark"] .guidance-theme-info,
[data-user-color-scheme="dark"] .guidance-theme-processing {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.guidance-theme-default {
  background: var(--color-bg-primary) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text-primary) !important;
}

[data-user-color-scheme="dark"] .guidance-theme-default {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

[data-user-color-scheme="dark"] .guidance-theme-success {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.4) 0%, rgba(10, 50, 25, 0.6) 100%) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #a7f3d0 !important;
}

[data-user-color-scheme="dark"] .guidance-theme-error {
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.4) 0%, rgba(80, 10, 10, 0.6) 100%) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fecaca !important;
}

[data-user-color-scheme="dark"] .guidance-theme-warning {
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.4) 0%, rgba(80, 40, 5, 0.6) 100%) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fde68a !important;
}

[data-user-color-scheme="dark"] .guidance-theme-info {
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.4) 0%, rgba(10, 50, 80, 0.6) 100%) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #bfdbfe !important;
}

[data-user-color-scheme="dark"] .guidance-theme-processing {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
}

/* guidance-theme-custom handled via style attribute */

/* Text elements within themed sections */
.guidance-theme-default .guidance-text,
.guidance-theme-success .guidance-text,
.guidance-theme-error .guidance-text,
.guidance-theme-warning .guidance-text,
.guidance-theme-info .guidance-text,
.guidance-theme-processing .guidance-text {
  color: inherit !important;
}

/* Ensure proper contrast and readability - Theme-aware text colors */
.guidance-theme-default .guidance-text { color: #003b71 !important; }
[data-user-color-scheme="dark"] .guidance-theme-default .guidance-text { color: #f9fafb !important; }

.guidance-theme-success .guidance-text { color: #166534 !important; }
[data-user-color-scheme="dark"] .guidance-theme-success .guidance-text { color: #a7f3d0 !important; }

.guidance-theme-error .guidance-text { color: #991b1b !important; }
[data-user-color-scheme="dark"] .guidance-theme-error .guidance-text { color: #fecaca !important; }

.guidance-theme-warning .guidance-text { color: #92400e !important; }
[data-user-color-scheme="dark"] .guidance-theme-warning .guidance-text { color: #fde68a !important; }

.guidance-theme-info .guidance-text { color: #0369a1 !important; }
[data-user-color-scheme="dark"] .guidance-theme-info .guidance-text { color: #bfdbfe !important; }

.guidance-theme-processing .guidance-text { color: #374151 !important; }
[data-user-color-scheme="dark"] .guidance-theme-processing .guidance-text { color: #e5e7eb !important; }

/* White background send button with plane icon */
.assistant-send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #003b71 0%, #0066cc 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  margin-left: var(--spacing-2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 59, 113, 0.15);
}

.assistant-send-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--border-interactive) !important;
}

.assistant-send-button svg {
  fill: #ffffff;
  width: 16px;
  height: 16px;
}

/* 🔘 Assistant Navigation Buttons */
.nav-item-btn,
.nav-item-btn-danger {
  background: var(--color-bg-primary, white);
  border: 1px solid var(--color-border-light);
  font-size: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.nav-item-btn {
  color: var(--color-primary);
}

.nav-item-btn:hover {
  background: var(--color-bg-hover);
}

.nav-item-btn-danger {
  color: var(--color-error, #dc3545);
}

.nav-item-btn-danger:hover {
  background: #fee2e2;
}

[data-user-color-scheme="dark"] .nav-item-btn,
[data-user-color-scheme="dark"] .nav-item-btn-danger {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-user-color-scheme="dark"] .nav-item-btn {
  color: #60a5fa;
}

[data-user-color-scheme="dark"] .nav-item-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-user-color-scheme="dark"] .nav-item-btn-danger {
  color: #f87171;
}

[data-user-color-scheme="dark"] .nav-item-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* 🔗 Interactive Elements */
.check-text {
  text-decoration: underline;
  font-style: italic;
  cursor: pointer;
  color: #0066cc;
  transition: color 0.2s ease;
}

[data-user-color-scheme="dark"] .check-text {
  color: #60a5fa;
}

.check-text:hover {
  color: #003b71;
}

[data-user-color-scheme="dark"] .check-text:hover {
  color: #93c5fd;
}

.choice-buttons {
  margin: var(--spacing-2) 0;
  display: flex;
  gap: 8px;
}

.choice-button {
  background: var(--color-bg-primary, white);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: all 0.2s ease;
}

[data-user-color-scheme="dark"] .choice-button {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.choice-button:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-primary);
}

[data-user-color-scheme="dark"] .choice-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #60a5fa;
}

/* ========================================
 * ISSUE_3500: Close Button Styles
 * Help button moved to bottom toolbar (see bottom-toolbar.php)
 * ======================================== */

/* Close Button - Top right of assistant */
.assistant-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.assistant-close-button:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

[data-user-color-scheme="dark"] .assistant-close-button {
  color: rgba(255, 255, 255, 0.6);
}

[data-user-color-scheme="dark"] .assistant-close-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile adaptations */
@media (max-width: 768px) {
  .assistant-container {
    width: 100vw !important;
    z-index: var(--z-modal);
  }

  /* ISSUE_3500: Help button removed - moved to bottom toolbar */
}