frontend_nyla/src/pages/views/chatbot/ChatbotViews.module.css

/**
 * Chatbot Views Shared Styles
 */

.chatbotView {
  display: flex;
  height: calc(100vh - 200px);
  min-height: 600px;
  gap: 1rem;
  background: var(--bg-primary, #ffffff);
}

/* =============================================================================
 * Chat History Sidebar
 * ============================================================================= */

.chatHistory {
  width: 300px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  background: var(--surface-color, #f8f9fa);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
}

.chatHistoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  background: var(--bg-primary, #ffffff);
}

.chatHistoryTitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}

.newChatButton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--primary-color, #2563eb);
  border-radius: 6px;
  background: var(--primary-color, #2563eb);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.newChatButton:hover {
  background: var(--primary-hover, #1d4ed8);
}

.threadList {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.threadItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.threadItem:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.02));
  border-color: var(--primary-color, #2563eb);
}

.threadItem.selected {
  background: var(--primary-light, #eff6ff);
  border-color: var(--primary-color, #2563eb);
}

.threadContent {
  flex: 1;
  min-width: 0;
}

.threadTitle {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.threadMeta {
  font-size: 0.75rem;
  color: var(--text-secondary, #666);
}

.deleteButton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary, #666);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
}

.threadItem:hover .deleteButton {
  opacity: 1;
}

.deleteButton:hover {
  background: var(--error-light, #fee2e2);
  color: var(--error-color, #dc2626);
}

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

/* =============================================================================
 * Chat Area
 * ============================================================================= */

.chatArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
}

.messagesArea {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-primary, #ffffff);
  display: flex;
  flex-direction: column;
}

.messagesWrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* =============================================================================
 * Typing Indicator (WhatsApp style)
 * ============================================================================= */

.typingIndicator {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.typingBubble {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--color-surface, #f0f0f0);
  color: var(--color-text, #1a1a1a);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  max-width: 65%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.typingDots {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.typingDots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gray, #999);
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typingDots span:nth-child(1) {
  animation-delay: 0s;
}

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

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

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* =============================================================================
 * Streaming Status (with status message)
 * ============================================================================= */

.streamingStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.statusSpinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #e0e0e0);
  border-top-color: var(--primary-color, #2563eb);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.statusText {
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
  font-style: italic;
}

/* Dark theme support for streaming status */
:global(.dark-theme) .statusSpinner {
  border-color: var(--border-dark, #444);
  border-top-color: var(--primary-color, #2563eb);
}

:global(.dark-theme) .statusText {
  color: var(--text-secondary-dark, #aaa);
}

/* Dark theme support for typing indicator */
:global(.dark-theme) .typingBubble {
  background-color: var(--surface-dark, #2a2a2a);
}

:global(.dark-theme) .typingDots span {
  background-color: var(--text-secondary-dark, #aaa);
}

.inputForm {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--border-color, #e0e0e0);
  background: var(--surface-color, #f8f9fa);
}

.inputField {
  flex: 1;
}

/* =============================================================================
 * Loading & Error States
 * ============================================================================= */

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-secondary, #666);
  gap: 1rem;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color, #e0e0e0);
  border-top-color: var(--primary-color, #2563eb);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.error {
  padding: 1rem;
  color: var(--error-color, #dc2626);
  font-size: 0.875rem;
}

.retryButton {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--error-color, #dc2626);
  border-radius: 6px;
  background: transparent;
  color: var(--error-color, #dc2626);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}

.retryButton:hover {
  background: var(--error-light, #fee2e2);
}

.emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary, #666);
}

.emptyIcon {
  font-size: 3rem;
  color: var(--text-tertiary, #999);
  margin-bottom: 1rem;
}

.emptyState p {
  margin: 0.5rem 0;
  font-size: 0.875rem;
}

.emptyHint {
  font-size: 0.75rem;
  color: var(--text-tertiary, #888);
}

/* =============================================================================
 * Dark Theme
 * ============================================================================= */

:global(.dark-theme) .chatbotView {
  background: var(--surface-dark, #1a1a1a);
}

:global(.dark-theme) .chatHistory {
  background: var(--surface-dark, #1a1a1a);
  border-color: var(--border-dark, #333);
}

:global(.dark-theme) .chatHistoryHeader {
  background: var(--surface-dark, #1a1a1a);
  border-bottom-color: var(--border-dark, #333);
}

:global(.dark-theme) .chatHistoryTitle {
  color: var(--text-primary-dark, #ffffff);
}

:global(.dark-theme) .threadItem {
  background: var(--surface-dark, #1a1a1a);
  border-color: var(--border-dark, #333);
}

:global(.dark-theme) .threadItem:hover {
  background: var(--surface-dark, #2a2a2a);
  border-color: var(--primary-color, #2563eb);
}

:global(.dark-theme) .threadItem.selected {
  background: var(--primary-dark, #1e3a8a);
  border-color: var(--primary-color, #2563eb);
}

:global(.dark-theme) .threadTitle {
  color: var(--text-primary-dark, #ffffff);
}

:global(.dark-theme) .threadMeta {
  color: var(--text-secondary-dark, #aaa);
}

:global(.dark-theme) .deleteButton {
  color: var(--text-secondary-dark, #aaa);
}

:global(.dark-theme) .deleteButton:hover {
  background: var(--error-dark, #450a0a);
  color: var(--error-light, #fef2f2);
}

:global(.dark-theme) .chatArea {
  background: var(--surface-dark, #1a1a1a);
  border-color: var(--border-dark, #333);
}

:global(.dark-theme) .messagesArea {
  background: var(--surface-dark, #1a1a1a);
}

:global(.dark-theme) .inputForm {
  background: var(--surface-dark, #1a1a1a);
  border-top-color: var(--border-dark, #333);
}

:global(.dark-theme) .loading {
  color: var(--text-secondary-dark, #aaa);
}

:global(.dark-theme) .spinner {
  border-color: var(--border-dark, #333);
  border-top-color: var(--primary-color, #2563eb);
}

:global(.dark-theme) .error {
  color: var(--error-light, #fef2f2);
}

:global(.dark-theme) .retryButton {
  border-color: var(--error-color, #dc2626);
  color: var(--error-light, #fef2f2);
}

:global(.dark-theme) .retryButton:hover {
  background: var(--error-dark, #450a0a);
}

:global(.dark-theme) .emptyState {
  color: var(--text-secondary-dark, #aaa);
}

:global(.dark-theme) .emptyIcon {
  color: var(--text-tertiary-dark, #666);
}

:global(.dark-theme) .emptyHint {
  color: var(--text-tertiary-dark, #666);
}

:global(.dark-theme) .typingDots span {
  background: var(--text-secondary-dark, #aaa);
}