@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* AI Chat Widget - Light Theme */

.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  font-family: inherit;
}

/* Chat Toggle Button */
.chat-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chat-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.chat-toggle.active {
  background: #E5E7EB;
  border: 2px solid #D1D5DB;
}

/* Hide the floating AI toggle button on the bottom-right. The AI chat is opened
   from the "Ask AI" button that exists on every page that loads this widget, so
   the floating button was redundant and collided with the Quick Notes FAB (#3501).
   The chat panel still opens via window.chatWidget.toggleChat() and closes via its
   own header close button. */
.chat-toggle {
  display: none;
}

/* Notification Badge */
.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #EF4444;
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* Chat Panel */
.chat-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 380px;
  max-height: 520px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

.chat-panel.open {
  display: flex;
}

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

/* Chat Header */
.chat-header {
  padding: 16px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-header-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
}

.chat-status {
  font-size: 11px;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #22C55E;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.chat-header-actions {
  display: flex;
  gap: 8px;
}

.chat-action-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  color: #6B7280;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #EEF5F1;
}

/* Context Bar */
.chat-context-bar {
  padding: 10px 16px;
  background: #EEF5F1;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-height: 70px;
  overflow-y: auto;
}

.context-chip {
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

.context-chip-remove {
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.context-chip-remove:hover {
  color: #EF4444;
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #F5F4F0;
  min-height: 200px;
  max-height: 280px;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #F3F4F6;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

.chat-message {
  display: flex;
  gap: 10px;
  max-width: 85%;
  animation: fadeIn 0.3s ease;
}

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

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: white;
}

.chat-message.user .chat-message-avatar {
  background: #8B5CF6;
}

.chat-message-content {
  background: #FFFFFF;
  padding: 10px 14px;
  border-radius: 12px;
  color: #374151;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid #E5E7EB;
}

.chat-message.user .chat-message-content {
  background: var(--primary);
  color: white;
  border: none;
}

.chat-message-content p {
  margin: 0 0 8px 0;
}

.chat-message-content p:last-child {
  margin-bottom: 0;
}

.chat-message-content strong {
  font-weight: 600;
}

.chat-message-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.chat-message-content li {
  margin: 4px 0;
}

.chat-message-time {
  font-size: 10px;
  color: #9CA3AF;
  margin-top: 4px;
}

.chat-context-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chat-context-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

/* Loading Indicator */
.chat-loading {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
}

.chat-loading-dot {
  width: 8px;
  height: 8px;
  background: #9CA3AF;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.chat-loading-dot:nth-child(1) { animation-delay: -0.32s; }
.chat-loading-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Suggestions */
.chat-suggestions {
  padding: 10px 16px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.chat-suggestions::-webkit-scrollbar {
  height: 4px;
}

.chat-suggestions::-webkit-scrollbar-track {
  background: #F3F4F6;
}

.chat-suggestions::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 2px;
}

.suggestion-chip {
  padding: 6px 12px;
  background: #F5F4F0;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #EEF5F1;
}

/* Chat Input */
.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
}

.chat-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  padding: 10px 12px;
  background: #F5F4F0;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #1F2937;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  max-height: 80px;
  transition: all 0.2s;
}

.chat-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 77, 63, 0.1);
}

.chat-input::placeholder {
  color: #9CA3AF;
}

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

.chat-send-btn:hover:not(:disabled) {
  background: var(--primary-light);
  transform: translateY(-1px);
}

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Welcome Message */
.chat-welcome {
  padding: 20px;
  text-align: center;
  color: #6B7280;
}

.chat-welcome-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.chat-welcome h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #1F2937;
}

.chat-welcome p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .chat-panel {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 140px);
    bottom: 96px;
    right: 16px;
    left: 16px;
    margin: 0 auto;
  }

  .chat-widget {
    bottom: 16px;
    right: 16px;
  }
}

/* Context Menu (for adding context) */
.chat-context-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chat-context-menu.open {
  display: flex;
}

.chat-context-menu-item {
  padding: 10px 16px;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  background: none;
  text-align: left;
}

.chat-context-menu-item:hover {
  background: #F3F4F6;
}

.chat-context-menu-item:not(:last-child) {
  border-bottom: 1px solid #E5E7EB;
}