/* sidebar-chat.css — Chat color tokens (light+dark), chat container, messages area, welcome state, message bubbles, markdown in bubbles, action row, TTS button, insert button, input area, touch targets, mic recording, typing indicator, reset button, error message, undo toast, shared animations */
/* ============================================================
   SIDEBAR CHAT
   ============================================================ */

/* Chat color tokens — light mode */
:root {
  --chat-ai-bg: #f1f5f9;
  --chat-ai-text: #1e293b;
  --chat-user-bg: rgb(19, 19, 19);   /* #2563eb — WCAG AA 4.6:1 with white */
  --chat-user-text: #ffffff;
  --chat-input-bg: var(--color-card);
  --chat-input-border: rgba(0, 0, 0, 0.08);
  --chat-mic-active: var(--color-error);         /* #ef4444 */
}

/* Chat color tokens — dark mode (data-theme) */
[data-theme="dark"] {
  --chat-ai-bg: #1e293b;
  --chat-ai-text: #e2e8f0;
  --chat-user-bg: #2563eb;
  --chat-user-text: #ffffff;
  --chat-input-bg: #0f172a;
  --chat-input-border: #334155;
}

/* prefers-color-scheme fallback removed — theme controlled by [data-theme] only */

/* Override panel-content display for chat tab — needs flex for sticky input */
#tab-chat.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Chat container */
.sidebar-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Messages area — scrollable */
.sidebar-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Welcome state */
.sidebar-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  flex: 1;
}

.sidebar-chat-welcome-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.sidebar-chat-welcome-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.sidebar-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sidebar-chat-suggestion {
  padding: 10px 16px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}

.sidebar-chat-suggestion:hover {
  border-color: var(--chat-user-bg);
  background: rgba(0, 0, 0, 0.04);
}

/* Message bubbles */
.sidebar-chat-msg {
  display: flex;
  max-width: 90%;
  gap: 10px;
}

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

.sidebar-chat-msg-ai {
  align-self: flex-start;
  flex-direction: row;
  align-items: flex-start;
}

.sidebar-chat-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chat-ai-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.sidebar-chat-avatar img {
  width: 20px;
  height: 20px;
  border-radius: 0;
}

.sidebar-chat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-chat-bubble {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sidebar-chat-msg-ai .sidebar-chat-bubble {
  background: var(--chat-ai-bg);
  color: var(--chat-ai-text);
  border-radius: 6px 12px 12px 12px;
}

.sidebar-chat-msg-user .sidebar-chat-bubble {
  background: var(--chat-user-bg);
  color: var(--chat-user-text);
  border-radius: 12px 12px 4px 12px;
}

/* Markdown inside bubbles */
.sidebar-chat-bubble p {
  margin: 0;
}

.sidebar-chat-bubble p + p {
  margin-top: 8px;
}

.sidebar-chat-bubble ul,
.sidebar-chat-bubble ol {
  margin: 8px 0;
  padding-left: 20px;
}

.sidebar-chat-bubble li {
  margin-bottom: 4px;
}

.sidebar-chat-bubble code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 14px;
}

.sidebar-chat-bubble strong {
  font-weight: 600;
}

/* Action row below AI bubble */
.sidebar-chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-left: 2px;
}

/* TTS button — compact, subtle */
.sidebar-chat-tts-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.sidebar-chat-tts-btn:hover {
  background: var(--chat-ai-bg);
  color: var(--chat-ai-text);
  border-color: var(--chat-input-border);
}

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

.sidebar-chat-tts-btn .loading-spinner {
  display: none;
}

.sidebar-chat-tts-btn.loading .tts-icon {
  display: none;
}

.sidebar-chat-tts-btn.loading .loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--chat-input-border);
  border-top-color: var(--chat-user-bg);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* "Indsaet i teksten" button */
.sidebar-chat-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-family);
  color: var(--chat-user-bg);
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
  white-space: nowrap;
}

.sidebar-chat-insert-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--chat-user-bg);
}

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

/* Input area — sticky bottom */
.sidebar-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 0.5px solid var(--chat-input-border);
  background: var(--chat-input-bg);
  flex-shrink: 0;
}

#sidebar-chat-textarea {
  flex: 1;
  resize: none;
  border: 0.5px solid var(--chat-input-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-family);
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  background: var(--chat-input-bg);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 200ms;
}

#sidebar-chat-textarea:focus {
  border-color: var(--chat-user-bg);
}

/* Touch targets — WCAG 2.5.5: minimum 44x44px */
.sidebar-chat-mic,
.sidebar-chat-send {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms, color 200ms;
}

.sidebar-chat-send {
  background: var(--chat-user-bg);
  color: #ffffff;
}

.sidebar-chat-send:hover {
  background: rgb(19, 19, 19);
}

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

.sidebar-chat-mic {
  background: transparent;
  color: var(--color-text-secondary);
}

.sidebar-chat-mic:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

.sidebar-chat-mic .loading-spinner {
  display: none;
}

/* Mic recording state */
.sidebar-chat-mic.recording {
  color: var(--chat-mic-active);
}

.sidebar-chat-mic.recording .mic-icon {
  animation: pulse-mic 1.5s ease infinite;
}

@keyframes pulse-mic {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Typing indicator */
.sidebar-chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
  background: var(--chat-ai-bg);
  border-radius: 12px 12px 12px 4px;
}

.sidebar-chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chat-ai-text);
  opacity: 0.4;
  animation: bounce-dot 1.4s ease infinite;
}

.sidebar-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.sidebar-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* Reset (new conversation) button */
.sidebar-chat-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  z-index: 1;
  transition: background 200ms, color 200ms;
}

.sidebar-chat-reset:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

/* Error message */
.sidebar-chat-error {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--color-error);
  background: var(--color-error-light);
  border-radius: var(--radius-md);
  align-self: center;
  text-align: center;
  animation: fade-in 200ms ease;
}

/* Undo toast */
.sidebar-chat-undo-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-sidebar);
  color: #ffffff;
  border-radius: var(--radius-md);
  font-size: 14px;
  animation: fade-in 200ms ease;
}

.sidebar-chat-undo-btn {
  padding: 4px 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms;
}

.sidebar-chat-undo-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Shared animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}