/* File: server/public/portal/css/chat.css */
/* Chat Page Styles */

/* ========================================
   Chat Page Layout
   ======================================== */
.portal-chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--portal-header-height));
  background: var(--portal-bg);
}

/* Chat page in sidebar layout - add top padding for fixed header */
.portal-main-with-sidebar .portal-chat-page {
  padding-top: var(--portal-header-height);
  height: 100vh;
  box-sizing: border-box;
}

.portal-chat-container {
  display: flex;
  flex: 1;
  max-width: var(--portal-max-width);
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

/* ========================================
   Chat Main Area
   ======================================== */
.portal-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--portal-bg-white);
  border-left: 1px solid var(--portal-border-light);
  border-right: 1px solid var(--portal-border-light);
}

.portal-chat-header {
  padding: var(--portal-spacing-md) var(--portal-spacing-lg);
  border-bottom: 1px solid var(--portal-border-light);
  background: var(--portal-bg-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--portal-spacing-md);
}

.portal-chat-header-left {
  flex: 1;
  min-width: 200px;
}

.portal-chat-header-right {
  display: flex;
  align-items: center;
}

.portal-chat-title {
  font-size: var(--portal-font-size-lg);
  font-weight: 600;
  color: var(--portal-text);
}

.portal-chat-subtitle {
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text-secondary);
  margin-top: 2px;
}

/* ========================================
   Agent Selector
   ======================================== */
.portal-agent-selector {
  display: flex;
  align-items: center;
  gap: var(--portal-spacing-sm);
}

.portal-agent-selector label {
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text-secondary);
  white-space: nowrap;
}

.portal-agent-select {
  padding: var(--portal-spacing-xs) var(--portal-spacing-md);
  padding-right: var(--portal-spacing-lg);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-bg-white);
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 140px;
}

.portal-agent-select:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 2px var(--portal-primary-light);
}

.portal-agent-select:hover {
  border-color: var(--portal-primary);
}

/* Agent Tags in Welcome Area */
.portal-chat-agent-tags {
  margin: var(--portal-spacing-lg) 0;
}

.portal-chat-agent-hint {
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text-secondary);
  margin-bottom: var(--portal-spacing-md);
}

.portal-chat-agent-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--portal-spacing-sm);
  justify-content: center;
}

.portal-chat-agent-tag {
  padding: 16px;
  background: var(--portal-bg-white);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  max-width: 280px;
}

.portal-chat-agent-tag:hover {
  border-color: var(--portal-primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}

.portal-chat-agent-tag .agent-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--portal-text);
  margin-bottom: 8px;
}

.portal-chat-agent-tag .agent-desc {
  display: block;
  font-size: 14px;
  color: var(--portal-text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Current Agent Display */
.portal-chat-current-agent {
  text-align: center;
  margin-bottom: var(--portal-spacing-sm);
  min-height: 20px;
}

.portal-chat-current-agent .current-agent-label {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-text-secondary);
}

.portal-chat-current-agent .current-agent-name {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-primary);
  font-weight: 500;
}

/* Agent Badge on Messages */
.portal-chat-content {
  display: flex;
  flex-direction: column;
  /* @modified 2025-12-20 - Increased width for better readability */
  max-width: 85%;
}

.portal-chat-agent-badge {
  display: none;
  margin-bottom: var(--portal-spacing-xs);
}

.portal-chat-agent-badge .agent-badge-text {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-primary);
  background: var(--portal-primary-light);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ========================================
   Chat Messages Area
   ======================================== */
.portal-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--portal-spacing-lg);
  scroll-behavior: smooth;
}

.portal-chat-welcome {
  text-align: center;
  padding: var(--portal-spacing-xxl);
}

.portal-chat-welcome-icon {
  width: 136px;
  height: 136px;
  margin: 0 auto var(--portal-spacing-md);
  color: var(--portal-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 62%, rgba(22, 119, 255, 0.14) 0%, rgba(22, 119, 255, 0.08) 44%, rgba(22, 119, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 247, 255, 0.72) 100%);
  box-shadow: 0 18px 48px rgba(22, 119, 255, 0.12);
}

.portal-chat-welcome-icon svg {
  width: 100%;
  height: 100%;
}

.portal-chat-welcome-mascot {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
}

.portal-chat-welcome-title {
  font-size: var(--portal-font-size-xl);
  font-weight: 600;
  margin-bottom: var(--portal-spacing-sm);
}

.portal-chat-welcome-text {
  font-size: var(--portal-font-size-base);
  color: var(--portal-text-secondary);
  margin-bottom: var(--portal-spacing-lg);
}

/* ========================================
   Suggestions
   ======================================== */
.portal-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--portal-spacing-sm);
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

.portal-chat-suggestion {
  padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  background: var(--portal-bg);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text);
  cursor: pointer;
  transition: var(--portal-transition);
}

.portal-chat-suggestion:hover {
  background: var(--portal-primary-light);
  border-color: var(--portal-primary);
  color: var(--portal-primary);
}

/* ========================================
   Chat Bubbles
   ======================================== */
.portal-chat-message {
  display: flex;
  gap: var(--portal-spacing-md);
  margin-bottom: var(--portal-spacing-lg);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portal-chat-message.user {
  flex-direction: row-reverse;
}

.portal-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portal-chat-avatar.assistant {
  background: linear-gradient(135deg, var(--portal-primary) 0%, #4096FF 100%);
  color: white;
}

.portal-chat-avatar.user {
  background: var(--portal-bg);
  border: 1px solid var(--portal-border);
  color: var(--portal-text-secondary);
}

.portal-chat-avatar svg {
  width: 20px;
  height: 20px;
}

.portal-chat-bubble {
  /* @modified 2025-12-20 - Removed max-width here, controlled by parent .portal-chat-content */
  max-width: 100%;
  padding: 12px 16px;
  border-radius: var(--portal-radius-lg);
  line-height: 1.7;
}

.portal-chat-message.assistant .portal-chat-bubble {
  background: var(--portal-bg-white);
  color: var(--portal-text);
  border: 1px solid var(--portal-border);
  border-bottom-left-radius: var(--portal-radius-sm);
}

.portal-chat-message.user .portal-chat-bubble {
  background: var(--portal-primary);
  color: var(--portal-text-white);
  border-bottom-right-radius: var(--portal-radius-sm);
  /* @added 2025-12-20 - Limit user message width for better visual balance */
  max-width: 420px;
}

.portal-chat-bubble p {
  margin: 0 0 var(--portal-spacing-sm);
}

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

.portal-chat-bubble code {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}

.portal-chat-bubble pre {
  background: rgba(0, 0, 0, 0.05);
  padding: var(--portal-spacing-md);
  border-radius: var(--portal-radius);
  overflow-x: auto;
  margin: var(--portal-spacing-sm) 0;
}

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

/* Streaming cursor */
.portal-chat-bubble.streaming::after {
  content: '▋';
  animation: blink 1s infinite;
  color: var(--portal-primary);
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ========================================
   Chat Input Area
   ======================================== */
.portal-chat-input-area {
  padding: var(--portal-spacing-md) var(--portal-spacing-lg);
  border-top: 1px solid var(--portal-border-light);
  background: var(--portal-bg-white);
}

.portal-chat-input-wrapper {
  display: flex;
  gap: var(--portal-spacing-sm);
  max-width: 800px;
  margin: 0 auto;
}

.portal-chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  font-size: 14px;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
  background: var(--portal-bg-white);
  color: var(--portal-text);
}

.portal-chat-input:focus {
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px var(--portal-primary-light);
}

.portal-chat-input::placeholder {
  color: var(--portal-text-placeholder);
}

.portal-chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--portal-radius);
  background: var(--portal-primary);
  color: var(--portal-text-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.portal-chat-send-btn:hover {
  background: var(--portal-primary-hover);
  transform: scale(1.05);
}

.portal-chat-send-btn:active {
  transform: scale(0.95);
}

.portal-chat-send-btn:disabled {
  background: var(--portal-border);
  cursor: not-allowed;
}

.portal-chat-send-btn svg {
  width: 20px;
  height: 20px;
}

.portal-chat-refresh-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--portal-radius);
  background: var(--portal-bg-white);
  color: var(--portal-text-secondary);
  border: 1px solid var(--portal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.portal-chat-refresh-btn:hover {
  border-color: var(--portal-primary);
  color: var(--portal-primary);
  background: var(--portal-primary-light);
}

.portal-chat-refresh-btn:active {
  transform: scale(0.95);
}

.portal-chat-refresh-btn svg {
  width: 20px;
  height: 20px;
}

.portal-chat-hint {
  text-align: center;
  font-size: var(--portal-font-size-xs);
  color: var(--portal-text-secondary);
  margin-top: var(--portal-spacing-sm);
}

/* ========================================
   Chat Sidebar (optional)
   ======================================== */
.portal-chat-sidebar {
  width: var(--portal-sidebar-width);
  background: var(--portal-bg-white);
  border-right: 1px solid var(--portal-border-light);
  display: flex;
  flex-direction: column;
}

.portal-chat-sidebar-header {
  padding: var(--portal-spacing-md) var(--portal-spacing-lg);
  border-bottom: 1px solid var(--portal-border-light);
}

.portal-chat-new-btn {
  width: 100%;
  padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  background: var(--portal-primary);
  color: var(--portal-text-white);
  border: none;
  border-radius: var(--portal-radius);
  font-size: var(--portal-font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--portal-spacing-sm);
  transition: var(--portal-transition);
}

.portal-chat-new-btn:hover {
  background: var(--portal-primary-hover);
}

.portal-chat-history {
  flex: 1;
  overflow-y: auto;
  padding: var(--portal-spacing-sm);
}

.portal-chat-history-item {
  padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  border-radius: var(--portal-radius);
  cursor: pointer;
  transition: var(--portal-transition);
  margin-bottom: var(--portal-spacing-xs);
}

.portal-chat-history-item:hover {
  background: var(--portal-bg);
}

.portal-chat-history-item.active {
  background: var(--portal-primary-light);
}

.portal-chat-history-title {
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-chat-history-time {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-text-secondary);
  margin-top: 2px;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1023px) {
  .portal-chat-sidebar {
    display: none;
  }
}

@media (max-width: 767px) {
  .portal-chat-page {
    height: calc(100vh - var(--portal-header-height) - 60px);
  }

  .portal-chat-messages {
    padding: var(--portal-spacing-md);
  }

  /* @modified 2025-12-20 - Wider content on mobile */
  .portal-chat-content {
    max-width: 90%;
  }

  .portal-chat-message.user .portal-chat-bubble {
    max-width: 280px;
  }

  .portal-chat-input-area {
    padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  }

  .portal-chat-suggestions {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-chat-suggestion {
    text-align: left;
  }

  .portal-chat-welcome {
    padding: var(--portal-spacing-xl) var(--portal-spacing-md);
  }

  .portal-chat-welcome-icon {
    width: 104px;
    height: 104px;
    border-radius: 28px;
  }

  .portal-chat-welcome-mascot {
    width: 88px;
    height: 88px;
  }
}

/* ========================================
   Loading State
   ======================================== */
.portal-chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--portal-spacing-md);
}

.portal-chat-typing-dot {
  width: 8px;
  height: 8px;
  background: var(--portal-text-secondary);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

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

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

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ========================================
   Knowledge Base Sources Display
   Added: 2025-12-13
   Modified: 2024-12-24 - Simplified UI, added collapsible, URL support
   ======================================== */
.portal-chat-sources {
  margin-top: var(--portal-spacing-md);
  border: 1px solid var(--portal-border-light);
  border-radius: var(--portal-radius);
  background: #F7F8FA;
  overflow: hidden;
  transition: var(--portal-transition);
}

.portal-sources-header {
  display: flex;
  align-items: center;
  gap: var(--portal-spacing-xs);
  padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  background: #F7F8FA;
  border-bottom: 1px solid var(--portal-border-light);
  cursor: pointer;
  user-select: none;
  transition: var(--portal-transition);
}

.portal-sources-header:hover {
  background: #E8EAED;
}

.portal-sources-icon {
  font-size: var(--portal-font-size-base);
}

.portal-sources-title {
  font-size: var(--portal-font-size-sm);
  font-weight: 500;
  color: var(--portal-text);
  flex: 1;
}

.portal-sources-count {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-text-secondary);
}

.portal-sources-toggle {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-text-secondary);
  margin-left: var(--portal-spacing-xs);
  transition: transform 0.2s ease;
}

.portal-chat-sources.collapsed .portal-sources-list {
  display: none;
}

.portal-sources-list {
  padding: var(--portal-spacing-sm);
  background: var(--portal-bg-white);
}

.portal-source-item {
  display: flex;
  align-items: center;
  gap: var(--portal-spacing-sm);
  padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  border: 1px solid var(--portal-border-light);
  border-radius: var(--portal-radius);
  margin-bottom: var(--portal-spacing-sm);
  background: var(--portal-bg-white);
  transition: var(--portal-transition);
  flex-wrap: wrap;
}

.portal-source-item:last-child {
  margin-bottom: 0;
}

.portal-source-item:hover {
  border-color: var(--portal-primary-light);
  background: #FAFCFF;
}

.portal-source-name {
  font-size: var(--portal-font-size-sm);
  font-weight: 500;
  color: var(--portal-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/**
 * @description Score display removed (SOURCE-DISPLAY-OPT-20260103)
 * @date 2026-01-03
 * These styles are commented out as score display has been removed
 */
/*
.portal-source-score {
  font-size: var(--portal-font-size-xs);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 500;
}

.portal-source-score-high {
  color: #52C41A;
  background: rgba(82, 196, 26, 0.1);
}

.portal-source-score-medium {
  color: #FAAD14;
  background: rgba(250, 173, 20, 0.1);
}

.portal-source-score-low {
  color: #8C8C8C;
  background: rgba(140, 140, 140, 0.1);
}
*/

/**
 * @description Document grouping styles (SOURCE-DISPLAY-OPT-20260103)
 * @date 2026-01-03
 */

/* Document container */
.portal-source-document {
  margin-bottom: var(--portal-spacing-md);
  border: 1px solid var(--portal-border-light);
  border-radius: var(--portal-radius);
  background: var(--portal-bg-white);
  overflow: hidden;
}

.portal-source-document:last-child {
  margin-bottom: 0;
}

/* Document header (clickable to collapse/expand) */
.portal-doc-header {
  display: flex;
  align-items: center;
  gap: var(--portal-spacing-xs);
  padding: var(--portal-spacing-sm) var(--portal-spacing-md);
  background: #FAFCFF;
  border-bottom: 1px solid var(--portal-border-light);
  cursor: pointer;
  transition: var(--portal-transition);
}

.portal-doc-header:hover {
  background: #F0F5FF;
}

.portal-doc-icon {
  font-size: var(--portal-font-size-base);
  flex-shrink: 0;
}

.portal-doc-name {
  font-size: var(--portal-font-size-sm);
  font-weight: 500;
  color: var(--portal-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-doc-count {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-text-secondary);
  flex-shrink: 0;
}

/* Chunks container */
.portal-doc-chunks {
  padding: var(--portal-spacing-sm);
  background: var(--portal-bg-white);
}

/* Single chunk/reference */
.portal-chunk {
  display: flex;
  gap: var(--portal-spacing-sm);
  padding: var(--portal-spacing-sm);
  margin-bottom: var(--portal-spacing-sm);
  border-left: 3px solid var(--portal-primary-light);
  background: #FAFAFA;
  border-radius: 4px;
}

.portal-chunk:last-child {
  margin-bottom: 0;
}

.portal-chunk-badge {
  font-size: var(--portal-font-size-xs);
  font-weight: 600;
  color: var(--portal-primary);
  flex-shrink: 0;
  line-height: 1.5;
}

.portal-chunk-content-wrapper {
  flex: 1;
  min-width: 0;
}

.portal-chunk-title {
  font-size: var(--portal-font-size-sm);
  font-weight: 500;
  color: var(--portal-text);
  margin-bottom: 4px;
}

.portal-chunk-content {
  font-size: var(--portal-font-size-sm);
  color: var(--portal-text-secondary);
  line-height: 1.6;
  font-style: italic;
  word-break: break-word;
}

.portal-chunk-toggle {
  display: inline-block;
  font-size: 12px;
  color: var(--portal-primary);
  cursor: pointer;
  margin-top: 4px;
  user-select: none;
}

.portal-chunk-toggle:hover {
  color: #0050B3;
  text-decoration: underline;
}

/* Source detail modal */
.source-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sourceModalFadeIn 0.2s ease;
}

@keyframes sourceModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.source-detail-modal {
  background: #ffffff;
  border-radius: 8px;
  width: 860px;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  animation: sourceModalSlideIn 0.2s ease;
  overflow: hidden;
}

@keyframes sourceModalSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.source-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5edf5;
  flex-shrink: 0;
}

.source-detail-header-title {
  font-size: 15px;
  font-weight: 300;
  color: #061b31;
  letter-spacing: -0.15px;
}

.source-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-detail-doc-btn {
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid #b9b9f9;
  border-radius: 4px;
  background: #fff;
  color: #533afd;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.source-detail-doc-btn:hover {
  background: rgba(83, 58, 253, 0.05);
  border-color: #533afd;
}

.source-detail-doc-btn:disabled {
  color: #64748d;
  border-color: #e5edf5;
  background: #f8fafc;
  cursor: not-allowed;
}

.source-detail-close {
  width: 28px;
  height: 28px;
  border: none;
  background: #f5f5f5;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.source-detail-close:hover {
  background: #e8e8e8;
  color: #333;
}

.source-detail-meta {
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5edf5;
  flex-shrink: 0;
}

.source-detail-doc-name {
  font-size: 13px;
  color: #64748d;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.source-detail-doc-name span {
  color: #061b31;
  font-weight: 500;
}

.source-detail-char-count {
  font-size: 11px;
  color: #999;
  margin-left: auto;
  flex-shrink: 0;
}

.source-detail-preview {
  font-size: 13px;
  color: #64748d;
  font-style: italic;
  line-height: 1.6;
  padding: 8px 12px;
  background: #fff;
  border-left: 3px solid var(--portal-primary-light, #b9b9f9);
  border-radius: 0 4px 4px 0;
}

.source-detail-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scroll-behavior: smooth;
  position: relative;
}

/* Custom scrollbar for body */
.source-detail-body::-webkit-scrollbar {
  width: 6px;
}

.source-detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.source-detail-body::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 3px;
}

.source-detail-body::-webkit-scrollbar-thumb:hover {
  background: #98a2b3;
}

.source-detail-body-label {
  font-size: 12px;
  color: #64748d;
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-detail-body-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5edf5;
}

/* Back to top button */
.source-detail-totop {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0;
}

.source-detail-totop-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e5edf5;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #64748d;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all 0.15s;
}

.source-detail-totop-btn.visible {
  display: flex;
}

.source-detail-totop-btn:hover {
  background: #f8fafc;
  color: #061b31;
  border-color: #b9b9f9;
}

/* Scroll progress bar */
.source-detail-progress {
  height: 2px;
  background: #e5edf5;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.source-detail-progress-bar {
  height: 100%;
  background: var(--portal-primary, #1890ff);
  width: 0%;
  transition: width 0.1s ease;
}

/* Footer with scroll hint */
.source-detail-footer {
  padding: 8px 20px;
  border-top: 1px solid #e5edf5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #fafbfc;
  font-size: 11px;
  color: #999;
}

.source-detail-footer-hint {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   Source Detail Content — Typography aligned with DESIGN.md
   (Stripe-inspired: weight 300, Deep Navy headings, purple accents)
   ============================================================ */

.source-detail-content {
  font-size: 14px;
  font-weight: 300;
  color: #273951;
  line-height: 1.5;
  word-break: break-word;
}

/* --- Headings: weight 300, Deep Navy, negative tracking --- */
.source-detail-content h1,
.source-detail-content h2,
.source-detail-content h3,
.source-detail-content h4,
.source-detail-content h5 {
  color: #061b31;
  font-weight: 300;
  margin: 24px 0 12px;
  line-height: 1.15;
}

.source-detail-content h1 {
  font-size: 22px;
  letter-spacing: -0.22px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5edf5;
}

.source-detail-content h2 {
  font-size: 18px;
  letter-spacing: -0.18px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5edf5;
}

.source-detail-content h3 {
  font-size: 16px;
  letter-spacing: -0.16px;
}

.source-detail-content h4 {
  font-size: 14px;
  font-weight: 400;
}

.source-detail-content h1:first-child,
.source-detail-content h2:first-child,
.source-detail-content h3:first-child {
  margin-top: 0;
}

/* --- Paragraphs --- */
.source-detail-content p {
  margin: 0 0 12px;
}

/* --- Bold: weight 500 (not 600/700, keeping lightweight feel) --- */
.source-detail-content strong,
.source-detail-content b {
  color: #061b31;
  font-weight: 500;
}

/* --- Italic / emphasis --- */
.source-detail-content em {
  color: #64748d;
  font-style: italic;
}

/* --- Lists --- */
.source-detail-content ul,
.source-detail-content ol {
  padding-left: 24px;
  margin: 0 0 14px;
}

.source-detail-content li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.source-detail-content li > ul,
.source-detail-content li > ol {
  margin-top: 6px;
  margin-bottom: 4px;
}

.source-detail-content li::marker {
  color: #533afd;
}

/* --- Inline code: SourceCodePro, purple tint --- */
.source-detail-content code {
  font-family: 'SourceCodePro', 'SFMono-Regular', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 500;
  background: rgba(83, 58, 253, 0.06);
  color: #533afd;
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- Code block --- */
.source-detail-content pre {
  font-family: 'SourceCodePro', 'SFMono-Regular', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 2.0;
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid #e5edf5;
  overflow-x: auto;
  margin: 0 0 14px;
}

.source-detail-content pre code {
  background: none;
  padding: 0;
  color: #0d253d;
  font-size: inherit;
}

/* --- Blockquotes: purple left border on soft surface --- */
.source-detail-content blockquote {
  border-left: 3px solid #b9b9f9;
  padding: 10px 16px;
  margin: 0 0 14px;
  background: #f8fafc;
  color: #64748d;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.source-detail-content blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Horizontal rule --- */
.source-detail-content hr {
  border: none;
  border-top: 1px solid #e5edf5;
  margin: 20px 0;
}

/* --- Tables: blue-tinted shadow, clean grid --- */
.source-detail-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 13px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.08) 0px 2px 8px;
}

.source-detail-content th,
.source-detail-content td {
  border: 1px solid #e5edf5;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.4;
}

.source-detail-content th {
  background: #f0f4f8;
  font-weight: 400;
  color: #061b31;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.source-detail-content tr:nth-child(even) {
  background: #fafbfc;
}

.source-detail-content tr:hover {
  background: rgba(83, 58, 253, 0.02);
}

/* --- Links: Stripe Purple --- */
.source-detail-content a {
  color: #533afd;
  text-decoration: none;
  font-weight: 400;
}

.source-detail-content a:hover {
  color: #4434d4;
  text-decoration: underline;
}

/* --- Images (from DOCX conversion) --- */
.source-detail-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 10px 0;
  box-shadow: rgba(23, 23, 23, 0.06) 0px 3px 6px;
}

/* --- Definition lists (mammoth sometimes generates these) --- */
.source-detail-content dl {
  margin: 0 0 14px;
}

.source-detail-content dt {
  color: #061b31;
  font-weight: 400;
  margin-top: 10px;
}

.source-detail-content dd {
  margin-left: 20px;
  color: #64748d;
  margin-bottom: 6px;
}

@media (max-width: 767px) {
  .source-detail-modal {
    width: 96vw;
    max-height: 92vh;
  }
  .source-detail-body {
    padding: 14px;
  }
}

.portal-chunk-url {
  display: flex;
  align-items: center;
  gap: var(--portal-spacing-xs);
  margin-top: var(--portal-spacing-xs);
}

/* Legacy URL link display (keep for backward compatibility) */
.portal-source-url {
  display: flex;
  align-items: center;
  gap: var(--portal-spacing-xs);
  width: 100%;
  margin-top: var(--portal-spacing-xs);
  padding-left: 20px;
}

.portal-source-link-icon {
  font-size: var(--portal-font-size-xs);
  flex-shrink: 0;
}

.portal-source-link {
  font-size: var(--portal-font-size-xs);
  color: var(--portal-primary);
  text-decoration: underline;
  word-break: break-all;
  transition: var(--portal-transition);
}

.portal-source-link:hover {
  color: #0050B3;
  text-decoration: underline;
}

/* Responsive adjustments for sources */
@media (max-width: 767px) {
  .portal-chat-sources {
    margin-top: var(--portal-spacing-sm);
  }

  /**
   * @description Legacy source item styles (pre-grouping)
   * Keep for backward compatibility
   */
  .portal-source-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--portal-spacing-xs);
  }

  .portal-source-name {
    max-width: 100%;
  }

  .portal-source-url {
    padding-left: 0;
  }

  .portal-source-link {
    font-size: 11px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /**
   * @description Responsive styles for grouped document display
   * @date 2026-01-03
   */
  .portal-doc-header {
    padding: var(--portal-spacing-xs) var(--portal-spacing-sm);
  }

  .portal-doc-name {
    font-size: 13px;
  }

  .portal-doc-count {
    font-size: 11px;
  }

  .portal-doc-chunks {
    padding: var(--portal-spacing-xs);
  }

  .portal-chunk {
    flex-direction: column;
    gap: var(--portal-spacing-xs);
    padding: var(--portal-spacing-xs);
  }

  .portal-chunk-badge {
    align-self: flex-start;
  }

  .portal-chunk-title {
    font-size: 13px;
  }

  .portal-chunk-content {
    font-size: 12px;
  }

  .portal-chunk-url {
    padding-left: 0;
  }
}

/* ========================================
   Knowledge Base Reference Citations
   Added: 2025-12-13
   ======================================== */

/* Superscript reference citation */
.kb-ref {
  display: inline-block;
  margin-left: 2px;
  color: var(--portal-primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--portal-transition);
  user-select: none;
}

.kb-ref:hover {
  color: var(--portal-primary-hover, #1890ff);
  text-decoration: underline;
  transform: scale(1.1);
}

.kb-ref:active {
  transform: scale(0.95);
}

/* Source citation number badge */
.portal-source-citation {
  display: inline-block;
  font-size: var(--portal-font-size-xs);
  font-weight: 600;
  color: var(--portal-primary);
  background: var(--portal-primary-light, rgba(22, 119, 255, 0.1));
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: var(--portal-spacing-xs);
}

/* Source item highlight animation */
.portal-source-item.highlighted {
  background: #fff9e6 !important;
  border-color: #ffc107 !important;
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  }
}

/* ========================================
   Enhanced Message Formatting
   ======================================== */

/* Paragraph styles */
.portal-chat-bubble p {
  margin: 0 0 var(--portal-spacing-sm);
  line-height: 1.7;
}

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

/* List styles */
.portal-chat-bubble ul,
.portal-chat-bubble ol {
  margin: var(--portal-spacing-sm) 0;
  padding-left: var(--portal-spacing-lg);
}

.portal-chat-bubble li {
  margin-bottom: var(--portal-spacing-xs);
  line-height: 1.6;
}

/* Heading styles */
.portal-chat-bubble h3,
.portal-chat-bubble h4 {
  margin: var(--portal-spacing-md) 0 var(--portal-spacing-sm);
  font-weight: 600;
  color: var(--portal-text);
}

.portal-chat-bubble h3 {
  font-size: var(--portal-font-size-lg);
  border-bottom: 1px solid var(--portal-border-light);
  padding-bottom: var(--portal-spacing-xs);
}

.portal-chat-bubble h4 {
  font-size: var(--portal-font-size-base);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .kb-ref {
    font-size: var(--portal-font-size-xs);
  }

  .portal-source-citation {
    font-size: 10px;
  }
}

/* ========================================
   Markdown Rendering Styles
   Added: 2024-12-24
   Description: Enhanced Markdown element styles for chat messages
   ======================================== */

/* Headings */
.portal-chat-bubble h1,
.portal-chat-bubble h2 {
  margin: 16px 0 12px 0;
  padding-bottom: 8px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
}

.portal-chat-bubble h1 {
  font-size: 24px;
  border-bottom: 2px solid #e0e0e0;
}

.portal-chat-bubble h2 {
  font-size: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.portal-chat-bubble h3 {
  font-size: 18px;
  margin: 14px 0 8px 0;
  font-weight: 600;
  border-bottom: none;
  padding-bottom: 0;
}

.portal-chat-bubble h4 {
  font-size: 16px;
  margin: 12px 0 6px 0;
  font-weight: 600;
}

.portal-chat-bubble h5,
.portal-chat-bubble h6 {
  font-size: 14px;
  margin: 10px 0 4px 0;
  font-weight: 600;
}

/* First heading no top margin */
.portal-chat-bubble h1:first-child,
.portal-chat-bubble h2:first-child,
.portal-chat-bubble h3:first-child,
.portal-chat-bubble h4:first-child {
  margin-top: 0;
}

/* Paragraphs */
.portal-chat-bubble p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

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

/* Lists */
.portal-chat-bubble ul,
.portal-chat-bubble ol {
  margin: 12px 0;
  padding-left: 24px;
  line-height: 1.6;
}

.portal-chat-bubble ul {
  list-style-type: disc;
}

.portal-chat-bubble ol {
  list-style-type: decimal;
}

.portal-chat-bubble li {
  margin: 6px 0;
}

.portal-chat-bubble li > p {
  margin: 4px 0;
}

/* Nested lists */
.portal-chat-bubble ul ul,
.portal-chat-bubble ol ul {
  list-style-type: circle;
  margin: 4px 0;
}

.portal-chat-bubble ul ol,
.portal-chat-bubble ol ol {
  margin: 4px 0;
}

/* Tables */
.portal-chat-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.portal-chat-bubble thead {
  background: #f5f5f5;
}

.portal-chat-bubble th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e0e0e0;
  color: #333;
}

.portal-chat-bubble td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.portal-chat-bubble tbody tr:nth-child(odd) {
  background: #fafafa;
}

.portal-chat-bubble tbody tr:hover {
  background: #f0f0f0;
}

.portal-chat-bubble tbody tr:last-child td {
  border-bottom: none;
}

/* Table responsive scroll on mobile */
@media (max-width: 767px) {
  .portal-chat-bubble table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Code blocks */
.portal-chat-bubble code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  color: #d63384;
}

.portal-chat-bubble pre {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 14px;
  margin: 14px 0;
  overflow-x: auto;
  line-height: 1.5;
}

.portal-chat-bubble pre code {
  background: transparent;
  padding: 0;
  color: #333;
  font-size: 13px;
  border-radius: 0;
}

/* Links */
.portal-chat-bubble a {
  color: #6366f1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.portal-chat-bubble a:hover {
  border-bottom-color: #6366f1;
}

/* Blockquotes */
.portal-chat-bubble blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 4px solid #6366f1;
  background: #f5f5f5;
  color: #555;
  font-style: italic;
}

.portal-chat-bubble blockquote p {
  margin: 0;
}

/* Horizontal rule */
.portal-chat-bubble hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 20px 0;
}

/* Strong/Bold */
.portal-chat-bubble strong,
.portal-chat-bubble b {
  font-weight: 600;
  color: #333;
}

/* Emphasis/Italic */
.portal-chat-bubble em,
.portal-chat-bubble i {
  font-style: italic;
}

/* Strikethrough */
.portal-chat-bubble del,
.portal-chat-bubble s {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Images (if needed) */
.portal-chat-bubble img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 12px 0;
}

/* Mobile optimizations */
@media (max-width: 767px) {
  .portal-chat-bubble h1 { font-size: 20px; }
  .portal-chat-bubble h2 { font-size: 18px; }
  .portal-chat-bubble h3 { font-size: 16px; }
  .portal-chat-bubble h4 { font-size: 15px; }

  .portal-chat-bubble ul,
  .portal-chat-bubble ol {
    padding-left: 20px;
  }

  .portal-chat-bubble pre {
    font-size: 12px;
    padding: 10px;
  }
}

/* Ensure Markdown elements don't break streaming animation */
.portal-chat-bubble.streaming h1,
.portal-chat-bubble.streaming h2,
.portal-chat-bubble.streaming h3,
.portal-chat-bubble.streaming h4,
.portal-chat-bubble.streaming ul,
.portal-chat-bubble.streaming ol,
.portal-chat-bubble.streaming table,
.portal-chat-bubble.streaming pre {
  animation: none;
}

/* ========================================
   Typing Cursor Animation
   @description Blinking cursor for streaming messages
   @date 2025-12-31
   ======================================== */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: var(--portal-primary, #3498db);
  animation: blink 1s infinite;
  vertical-align: middle;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ========================================
   Streaming Content Styles
   @description Styles for incremental Markdown rendering during streaming
   @date 2025-12-31
   ======================================== */
.streaming-current-line {
  opacity: 0.9;
}

/* Ensure Markdown elements render properly during streaming */
.portal-chat-bubble.streaming h1,
.portal-chat-bubble.streaming h2,
.portal-chat-bubble.streaming h3,
.portal-chat-bubble.streaming h4,
.portal-chat-bubble.streaming h5,
.portal-chat-bubble.streaming h6 {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
}

.portal-chat-bubble.streaming ul,
.portal-chat-bubble.streaming ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.portal-chat-bubble.streaming li {
  margin: 0.25em 0;
}

.portal-chat-bubble.streaming p {
  margin: 0.5em 0;
}

.portal-chat-bubble.streaming p:first-child {
  margin-top: 0;
}

.portal-chat-bubble.streaming code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
}

.portal-chat-bubble.streaming pre {
  background: #f6f8fa;
  padding: 0.75em 1em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.5em 0;
}

.portal-chat-bubble.streaming pre code {
  background: none;
  padding: 0;
}