/* ==========================================================================
   AI Assistant Panel — shared stylesheet
   --------------------------------------------------------------------------
   Loaded from base.html so both the dashboard (templates/index.html, where
   the panel lives behind a tab) and per-exhibit workspaces (e.g.
   templates/contracts/nsc05/exhibit_workspace.html, where the panel renders
   standalone) get the same rules.

   The original copy of these rules lives inline in templates/index.html
   (~lines 700–3054). Until that block is removed, dashboard pages will load
   both copies. Rules are byte-identical, so duplication has no visual
   effect — only a small CSS-bytes overhead. CSS unification is a follow-up.
   ========================================================================== */

/* ---- Panel base classes (subset of unified-nav rules from index.html) ---- */
.unified-panel { display:none; padding:1.5rem 0; }
.unified-panel.active { display:block; }
.unified-panel h2 { margin:0 0 .5rem 0; font-size:1.25rem; }
.panel-info { font-size:.9rem; color:#6b7280; margin:0 0 1rem 0; }

/* Standalone variant — used on per-exhibit workspaces where the panel
   renders alongside the deviations block without a parent tabbed nav. */
.ai-panel-standalone { margin-top: 1.5rem; }

/* ========== AI ASSISTANT PANEL ========== */
.ai-assistant-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .ai-assistant-container {
    grid-template-columns: 1fr;
  }
}

.ai-input-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-item-context {
  margin-bottom: 0.5rem;
}

.ai-context-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-left: 4px solid #6366f1;
  border-radius: 0.5rem;
  flex-wrap: wrap;
}

.context-badge {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.context-ref {
  color: #6b7280;
  font-size: 0.85rem;
  font-family: monospace;
}

.clear-context-btn {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid #c7d2fe;
  border-radius: 0.25rem;
  color: #6b7280;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.clear-context-btn:hover {
  background: #fff;
  border-color: #6366f1;
  color: var(--color-primary);
}

.ai-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 0.25rem;
}

.ai-context-input {
  padding: 0.6rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-context-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ai-textarea {
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 180px;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ai-textarea::placeholder {
  color: #9ca3af;
}

.ai-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

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

.ai-btn-icon {
  font-size: 1.1rem;
}

.ai-btn-risk {
  background: #fef9ee;
  color: var(--color-caution);
  border: 1px solid var(--color-caution);
}

.ai-btn-risk:hover:not(:disabled) {
  background: #fef3c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
}

.ai-btn-response {
  background: #eff6ff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.ai-btn-response:hover:not(:disabled) {
  background: #dbeafe;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.ai-btn-commercial {
  background: #f0fdf4;
  color: var(--color-positive);
  border: 1px solid var(--color-positive);
}

.ai-btn-commercial:hover:not(:disabled) {
  background: #dcfce7;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
}

.ai-btn-principle {
  background: #f8f5ff;
  color: #6b21a8;
  border: 1px solid #a855f7;
}

.ai-btn-principle:hover:not(:disabled) {
  background: #ede9fe;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
}

/* Role indicator in checklist header */
.ai-role-indicator {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: #e0e7ff;
  border-radius: 0.25rem;
  color: #4338ca;
  font-weight: 500;
}

/* Reference preview section */
.ai-reference-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.preview-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
}

.preview-toggle {
  padding: 0.25rem 0.5rem;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.preview-toggle:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.preview-content {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  background: #fff;
}

.ai-output-section {
  display: flex;
  flex-direction: column;
}

.ai-output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.ai-output-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #374151;
}

.ai-clear-btn {
  padding: 0.4rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}

.ai-clear-btn:hover {
  background: #e5e7eb;
}

.ai-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.ai-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

.ai-results {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

.ai-tips-placeholder {
  padding: 0.5rem 0;
}

.ai-tips-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0 0 0.5rem 0;
}

.ai-tips-list {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.6;
}

.ai-tips-list li {
  margin-bottom: 0.25rem;
}

.ai-tips-list strong {
  color: #4b5563;
}

.ai-tips-hint {
  color: #9ca3af;
  font-size: 0.8rem;
  font-style: italic;
  margin: 0;
}

.ai-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.ai-result-type {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.ai-result-timestamp {
  font-size: 0.8rem;
  color: #9ca3af;
}

.ai-context-used {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  color: #166534;
  margin-bottom: 0.75rem;
}

.ai-context-used .context-icon {
  font-size: 1rem;
}

.ai-result-content {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #374151;
}

.ai-result-content h2,
.ai-result-content h3,
.ai-result-content h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.ai-result-content h2 { font-size: 1.1rem; }
.ai-result-content h3 { font-size: 1rem; }
.ai-result-content h4 { font-size: 0.95rem; }

.ai-result-content p {
  margin: 0.5rem 0;
}

.ai-result-content ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ai-result-content li {
  margin-bottom: 0.25rem;
}

.ai-result-content strong {
  color: #1f2937;
}

.ai-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 1rem;
  color: #dc2626;
  font-size: 0.9rem;
}

/* Toast notification */
.ai-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: #1f2937;
  color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: slideInRight 0.3s ease-out;
  max-width: 400px;
}

.ai-toast.ai-toast-success {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  border-left: 4px solid var(--color-positive);
}

.ai-toast.ai-toast-info {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-left: 4px solid #3b82f6;
}

.ai-toast.ai-toast-warning {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  border-left: 4px solid #f59e0b;
}

.ai-toast-icon {
  font-size: 1.25rem;
}

.ai-toast-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ai-toast-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.15s;
}

.ai-toast-close:hover {
  color: #fff;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.ai-toast.ai-toast-leaving {
  animation: slideOutRight 0.2s ease-in forwards;
}

/* Response time guidance bar */
.ai-guidance-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #0369a1;
}

.ai-guidance-icon {
  font-size: 1rem;
  color: #0ea5e9;
}

.ai-guidance-text {
  flex: 1;
}

.ai-help-toggle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #0ea5e9;
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.ai-help-toggle:hover {
  background: #0284c7;
}

/* Help guide */
.ai-help-guide {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.ai-help-steps {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.ai-help-step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
}

.step-number {
  width: 1.5rem;
  height: 1.5rem;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.step-text {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.4;
}

.ai-help-close {
  padding: 0.375rem 0.75rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.ai-help-close:hover {
  background: var(--color-primary);
}

/* Context checklist */
.ai-context-checklist {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.checklist-header {
  margin-bottom: 0.5rem;
}

.checklist-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.checklist-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
}

.checklist-item input[type="checkbox"] {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: #6366f1;
}

.checklist-item input[type="checkbox"]:disabled {
  cursor: default;
}

.checklist-status {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  background: #e5e7eb;
  border-radius: 0.25rem;
  color: #6b7280;
}

.checklist-status.status-ready {
  background: #d1fae5;
  color: #065f46;
}

.checklist-status.status-empty {
  background: #fef3c7;
  color: #92400e;
}

/* Last analyzed indicator */
.ai-last-analyzed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: #166534;
}

.ai-last-analyzed-text {
  flex: 1;
}

.ai-resend-btn {
  background: transparent;
  border: 1px solid #86efac;
  color: #166534;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-resend-btn:hover {
  background: #dcfce7;
  border-color: #22c55e;
}

/* Loading timer */
.ai-loading-timer {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-left: 0.5rem;
}

/* Copy button */
.ai-copy-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-copy-btn:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.ai-copy-btn.copied {
  background: #d1fae5;
  border-color: #86efac;
  color: #166534;
}

.ai-output-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Use in Conversation dropdown */
.ai-use-dropdown {
  position: relative;
}

.ai-use-btn {
  background: #3b82f6;
  border: 1px solid #2563eb;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  color: white;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-use-btn:hover {
  background: #2563eb;
}

.ai-use-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 280px;
  max-width: 350px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
}

.ai-use-menu.open {
  display: block;
}

.ai-use-menu-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: #374151;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.ai-use-menu-section {
  padding: 0.5rem 0;
}

.ai-use-menu-label {
  padding: 0.25rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-use-conv-list {
  max-height: 200px;
  overflow-y: auto;
}

.ai-use-menu-item {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.85rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}

.ai-use-menu-item:hover {
  background: #f3f4f6;
}

.ai-use-menu-item.ai-use-new-conv {
  color: #2563eb;
  font-weight: 500;
}

.ai-use-menu-item .conv-title {
  font-weight: 500;
}

.ai-use-menu-item .conv-status {
  font-size: 0.75rem;
  color: #6b7280;
  margin-left: 0.5rem;
}

.ai-use-menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.25rem 0;
}

.ai-use-loading {
  padding: 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.85rem;
}

.ai-use-empty {
  padding: 1rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
  font-style: italic;
}

/* Enhanced context indicator */
.ai-context-indicator-enhanced {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  border-left: 4px solid #6366f1;
  border-radius: 0.5rem;
}

.context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.context-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.context-icon-large {
  font-size: 1.25rem;
}

.context-badge-enhanced {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.95rem;
}

.context-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.context-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #fff;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

.context-detail-chip.bimco-available {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

/* Dark mode for AI Assistant */
body.dark-mode .ai-label { color: var(--color-text); }
body.dark-mode .ai-context-input {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.dark-mode .ai-context-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}
body.dark-mode .ai-textarea {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.dark-mode .ai-textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}
body.dark-mode .ai-textarea::placeholder { color: #6b7280; }

body.dark-mode .ai-btn-risk {
  background: var(--color-bg-raised);
  color: var(--color-caution);
  border-color: var(--color-caution);
}
body.dark-mode .ai-btn-risk:hover:not(:disabled) {
  background: #422006;
}

body.dark-mode .ai-btn-response {
  background: var(--color-bg-raised);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
body.dark-mode .ai-btn-response:hover:not(:disabled) {
  background: #172554;
}

body.dark-mode .ai-btn-commercial {
  background: var(--color-bg-raised);
  color: var(--color-positive);
  border-color: var(--color-positive);
}
body.dark-mode .ai-btn-commercial:hover:not(:disabled) {
  background: #052e16;
}

body.dark-mode .ai-btn-principle {
  background: var(--color-bg-raised);
  color: #a78bfa;
  border-color: #7c3aed;
}
body.dark-mode .ai-btn-principle:hover:not(:disabled) {
  background: #2e1065;
}

body.dark-mode .ai-role-indicator {
  background: #312e81;
  color: #a5b4fc;
}

body.dark-mode .ai-reference-preview {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .preview-header {
  background: #111827;
  border-bottom-color: #374151;
}
body.dark-mode .preview-title { color: #d1d5db; }
body.dark-mode .preview-toggle {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}
body.dark-mode .preview-toggle:hover {
  background: #4b5563;
}
body.dark-mode .preview-content {
  background: #1f2937;
  color: #e5e7eb;
}

body.dark-mode .ai-output-header h3 { color: #e0e0e0; }
body.dark-mode .ai-clear-btn {
  background: var(--color-bg-raised);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.dark-mode .ai-clear-btn:hover { background: var(--color-border); }

body.dark-mode .ai-loading {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
body.dark-mode .ai-spinner {
  border-color: var(--color-border);
  border-top-color: var(--color-primary);
}

body.dark-mode .ai-results {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}
body.dark-mode .ai-tips-title { color: #9ca3af; }
body.dark-mode .ai-tips-list { color: #9ca3af; }
body.dark-mode .ai-tips-list strong { color: #d1d5db; }
body.dark-mode .ai-tips-hint { color: #6b7280; }
body.dark-mode .ai-result-header { border-bottom-color: var(--color-border); }
body.dark-mode .ai-result-type { color: var(--color-primary); }
body.dark-mode .ai-result-timestamp { color: #6b7280; }
body.dark-mode .ai-result-content { color: var(--color-text); }
body.dark-mode .ai-result-content h2,
body.dark-mode .ai-result-content h3,
body.dark-mode .ai-result-content h4 { color: #f3f4f6; }
body.dark-mode .ai-result-content strong { color: #f3f4f6; }

body.dark-mode .ai-error {
  background: #4a1a1a;
  border-color: #8a2a2a;
  color: #ff6b6b;
}

body.dark-mode .ai-context-indicator {
  background: #1e1b4b;
  border-color: #4338ca;
}
body.dark-mode .context-badge { color: #818cf8; }
body.dark-mode .context-ref { color: #9ca3af; }
body.dark-mode .clear-context-btn {
  border-color: #4338ca;
  color: #9ca3af;
}
body.dark-mode .clear-context-btn:hover {
  background: #312e81;
  color: #c7d2fe;
}
body.dark-mode .ai-context-used {
  background: #052e16;
  border-color: #166534;
  color: #86efac;
}

/* Dark mode for new AI assistant elements */
body.dark-mode .ai-guidance-bar {
  background: #1e3a5f;
  border-color: #0c4a6e;
  color: #7dd3fc;
}
body.dark-mode .ai-guidance-icon { color: #38bdf8; }
body.dark-mode .ai-help-toggle {
  background: #0369a1;
}
body.dark-mode .ai-help-toggle:hover { background: #0284c7; }

body.dark-mode .ai-help-guide {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .step-text { color: #d1d5db; }
body.dark-mode .ai-help-close {
  background: var(--color-primary);
}

body.dark-mode .ai-context-checklist {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .checklist-title { color: #9ca3af; }
body.dark-mode .checklist-item { color: #e5e7eb; }
body.dark-mode .checklist-status {
  background: #374151;
  color: #9ca3af;
}
body.dark-mode .checklist-status.status-ready {
  background: #052e16;
  color: #86efac;
}
body.dark-mode .checklist-status.status-empty {
  background: #422006;
  color: #fbbf24;
}

body.dark-mode .ai-last-analyzed {
  background: #052e16;
  border-color: #166534;
  color: #86efac;
}
body.dark-mode .ai-resend-btn {
  border-color: #166534;
  color: #86efac;
}
body.dark-mode .ai-resend-btn:hover {
  background: #14532d;
}

body.dark-mode .ai-copy-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
body.dark-mode .ai-copy-btn:hover {
  background: #4b5563;
}
body.dark-mode .ai-copy-btn.copied {
  background: #14532d;
  border-color: #166534;
  color: #86efac;
}

/* Dark mode: Use in Conversation dropdown */
body.dark-mode .ai-use-btn {
  background: #3b82f6;
  border-color: #2563eb;
}
body.dark-mode .ai-use-btn:hover {
  background: #2563eb;
}
body.dark-mode .ai-use-menu {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
body.dark-mode .ai-use-menu-header {
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-mode .ai-use-menu-label {
  color: #9ca3af;
}
body.dark-mode .ai-use-menu-item {
  color: #e5e7eb;
}
body.dark-mode .ai-use-menu-item:hover {
  background: #374151;
}
body.dark-mode .ai-use-menu-item.ai-use-new-conv {
  color: #60a5fa;
}
body.dark-mode .ai-use-menu-item .conv-status {
  color: #9ca3af;
}
body.dark-mode .ai-use-menu-divider {
  background: #374151;
}
body.dark-mode .ai-use-loading,
body.dark-mode .ai-use-empty {
  color: #9ca3af;
}

body.dark-mode .ai-context-indicator-enhanced {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-color: #4338ca;
}
body.dark-mode .context-badge-enhanced { color: #a5b4fc; }
body.dark-mode .context-detail-chip {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}
body.dark-mode .context-detail-chip.bimco-available {
  background: #14532d;
  border-color: #166534;
  color: #86efac;
}

/* ========== AI ASSISTANT MODE TABS ========== */
.ai-mode-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.ai-mode-tab {
  padding: 0.625rem 1rem;
  border: 2px solid transparent;
  border-bottom: none;
  background: #f3f4f6;
  border-radius: 0.5rem 0.5rem 0 0;
  color: #6b7280;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ai-mode-tab:hover {
  background: #e5e7eb;
  color: #374151;
}

.ai-mode-tab.active {
  background: #fff;
  color: var(--color-primary);
  border-color: #e5e7eb;
  font-weight: 600;
}

.ai-mode-tab .mode-icon {
  font-size: 1rem;
}

#ai-orientation-toggle {
  margin-left: auto;
}

.ai-mode-content {
  display: none;
}

.ai-mode-content.active {
  display: block;
}

.mode-description {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

/* ========== PRINCIPLE TO TEXT WIZARD ========== */
.principle-wizard {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* Progress indicator */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 0.5rem;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.step-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.progress-step.active .step-circle,
.progress-step.completed .step-circle {
  background: var(--color-primary);
  color: #fff;
}

.progress-step.completed .step-circle {
  background: var(--color-positive);
}

.step-label {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 500;
}

.progress-step.active .step-label {
  color: var(--color-primary);
  font-weight: 600;
}

.progress-step.completed .step-label {
  color: var(--color-positive);
}

.progress-line {
  flex: 0 0 3rem;
  height: 2px;
  background: #e5e7eb;
  margin: 0 0.25rem;
  margin-bottom: 1.25rem;
}

/* Wizard steps */
.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
}

.wizard-step h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  color: #1f2937;
}

.wizard-step .step-info {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

/* Example buttons */
.principle-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.example-btn {
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  font-size: 0.8rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.example-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Principle textarea */
.principle-textarea {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 120px;
}

.principle-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Wizard actions */
.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

/* Analysis summary */
.analysis-summary {
  padding: 0.75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  color: #166534;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Clause selection list */
.clause-selection-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

.clause-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.clause-option:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.clause-option input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

.clause-info {
  flex: 1;
}

.clause-info strong {
  display: block;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.relevance-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.relevance-badge.high {
  background: #dcfce7;
  color: #166534;
}

.relevance-badge.medium {
  background: #fef3c7;
  color: #92400e;
}

.clause-explanation {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.suggested-focus {
  font-size: 0.8rem;
  color: var(--color-primary);
  margin-top: 0.25rem;
  font-style: italic;
}

/* Changes review */
.changes-review {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.clause-change {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.change-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.change-header strong {
  color: #1f2937;
}

.change-summary {
  font-size: 0.8rem;
  color: #6b7280;
}

.diff-view {
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #fff;
}

.diff-view del {
  background-color: #fee2e2;
  color: #991b1b;
  text-decoration: line-through;
  padding: 0.1rem 0.2rem;
  border-radius: 0.125rem;
}

.diff-view ins {
  background-color: #dcfce7;
  color: #166534;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  border-radius: 0.125rem;
}

.change-rationale {
  padding: 0.75rem 1rem;
  background: #f0f9ff;
  border-top: 1px solid #e5e7eb;
  font-size: 0.85rem;
  color: #0369a1;
}

.change-rationale em {
  font-weight: 600;
  color: #0c4a6e;
}

/* Selection controls for spawning conversations */
.changes-selection-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selection-count {
  font-weight: 500;
  color: #166534;
}

.selection-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

/* Checkbox in clause change header */
.clause-change-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clause-change-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-positive);
}

.clause-change-checkbox label {
  cursor: pointer;
  font-weight: 600;
  color: #1f2937;
}

.clause-change.selected {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Principle conversations modal */
.principle-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.principle-modal {
  background: white;
  border-radius: 0.75rem;
  width: 90%;
  max-width: 550px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.principle-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.principle-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #1f2937;
}

.principle-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  line-height: 1;
}

.principle-modal-close:hover {
  color: #1f2937;
}

.principle-modal-body {
  padding: 1.25rem;
  max-height: 50vh;
  overflow-y: auto;
}

.modal-success-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #d1fae5;
  border-radius: 0.5rem;
  color: #065f46;
  font-weight: 500;
  margin-bottom: 1rem;
}

.modal-success-message .success-icon {
  font-size: 1.25rem;
}

.modal-principle-ref {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.modal-principle-ref code {
  background: #f3f4f6;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.8rem;
}

.modal-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-conv-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

.modal-conv-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.modal-conv-title {
  font-weight: 500;
  color: #1f2937;
}

.modal-conv-clause {
  font-size: 0.8rem;
  color: #6b7280;
}

.modal-conv-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.modal-conv-link:hover {
  text-decoration: underline;
}

.principle-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Warnings and notes */
.principle-warnings {
  padding: 0.75rem 1rem;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 0.5rem;
  color: #92400e;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.principle-warnings ul {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}

.principle-notes {
  padding: 0.75rem 1rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 0.5rem;
  color: #0369a1;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Loading overlay */
.principle-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 0.75rem;
  z-index: 10;
}

.principle-error {
  padding: 1rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 0.5rem;
  color: #991b1b;
  margin-top: 1rem;
}

/* Dark mode for wizard */
body.dark-mode .ai-mode-tabs {
  border-color: #374151;
}

body.dark-mode .ai-mode-tab {
  background: #1f2937;
  color: #9ca3af;
}

body.dark-mode .ai-mode-tab:hover {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .ai-mode-tab.active {
  background: #111827;
  color: #818cf8;
  border-color: #374151;
}

body.dark-mode .principle-wizard {
  background: #111827;
  border-color: #374151;
}

body.dark-mode .wizard-step h3 {
  color: #e5e7eb;
}

body.dark-mode .principle-textarea {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark-mode .principle-textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

body.dark-mode .example-btn {
  background: #1f2937;
  border-color: #374151;
  color: #9ca3af;
}

body.dark-mode .example-btn:hover {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .clause-option {
  background: #1f2937;
  border-color: #374151;
}

body.dark-mode .clause-option:hover {
  background: #374151;
  border-color: #4b5563;
}

body.dark-mode .clause-info strong {
  color: #e5e7eb;
}

body.dark-mode .clause-change {
  border-color: #374151;
}

body.dark-mode .change-header {
  background: #1f2937;
  border-color: #374151;
}

body.dark-mode .change-header strong {
  color: #e5e7eb;
}

body.dark-mode .diff-view {
  background: #111827;
  color: #e5e7eb;
}

body.dark-mode .diff-view del {
  background-color: #450a0a;
  color: #fca5a5;
}

body.dark-mode .diff-view ins {
  background-color: #14532d;
  color: #86efac;
}

body.dark-mode .change-rationale {
  background: #1e3a5f;
  border-color: #374151;
  color: #7dd3fc;
}

/* Dark mode: Selection controls */
body.dark-mode .changes-selection-controls {
  background: #064e3b;
  border-color: #10b981;
}

body.dark-mode .selection-count {
  color: #a7f3d0;
}

body.dark-mode .clause-change-checkbox label {
  color: #e5e7eb;
}

body.dark-mode .clause-change.selected {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

/* Dark mode: Modal */
body.dark-mode .principle-modal {
  background: #1f2937;
}

body.dark-mode .principle-modal-header {
  background: #111827;
  border-color: #374151;
}

body.dark-mode .principle-modal-header h3 {
  color: #e5e7eb;
}

body.dark-mode .principle-modal-close {
  color: #9ca3af;
}

body.dark-mode .principle-modal-close:hover {
  color: #e5e7eb;
}

body.dark-mode .modal-success-message {
  background: #064e3b;
  color: #a7f3d0;
}

body.dark-mode .modal-principle-ref {
  color: #9ca3af;
}

body.dark-mode .modal-principle-ref code {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .modal-conv-item {
  background: #111827;
  border-color: #374151;
}

body.dark-mode .modal-conv-title {
  color: #e5e7eb;
}

body.dark-mode .modal-conv-clause {
  color: #9ca3af;
}

body.dark-mode .modal-conv-link {
  color: #60a5fa;
}

body.dark-mode .principle-modal-footer {
  background: #111827;
  border-color: #374151;
}

body.dark-mode .principle-loading {
  background: rgba(17, 24, 39, 0.95);
}

body.dark-mode .step-circle {
  background: #374151;
  color: #9ca3af;
}

body.dark-mode .progress-line {
  background: #374151;
}