/* =============================================================================
   CHAT PANEL — Ask AI Drawer
   Right-side persistent drawer for Kapa AI integration.
   Slides in/out, pushes main content on desktop, overlays on mobile.
   ============================================================================= */

/* Container - positioned below fixed navbar */
.chat-panel {
  position: fixed;
  top: var(--navbar-height, 70px);
  right: 0;
  width: 420px;
  height: calc(100vh - var(--navbar-height, 70px));
  background: #fff;
  color: var(--grey-900-new, var(--grey-900, #181818));
  border-left: 1px solid var(--grey-100-new, var(--grey-100, #e5e5e5));
  box-shadow: -14px 0 40px -18px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 120;
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
}

.chat-panel.is-open {
  transform: translateX(0);
}

/* Header */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--grey-100-new, var(--grey-100, #e5e5e5));
  flex-shrink: 0;
}

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

.chat-head-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5eeff 100%);
  color: #4338ca;
}

.chat-head-name {
  font-size: calc(15 / var(--rem-base) * 1rem);
  font-weight: 600;
  color: var(--grey-900-new, var(--grey-900, #181818));
  letter-spacing: -0.0125em;
  line-height: 1.2;
}

.chat-head-sub {
  font-size: calc(14 / var(--rem-base) * 1rem);
  color: var(--grey-500-new, var(--grey-500, #6b7280));
  letter-spacing: -0.005em;
  margin-top: 2px;
}

.chat-head-actions {
  display: flex;
  gap: 2px;
}

.chat-head-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--grey-500-new, var(--grey-500, #6b7280));
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.chat-head-btn:hover {
  background: var(--grey-50-new, var(--grey-50, #f9fafb));
  color: var(--grey-900-new, var(--grey-900, #181818));
}

/* Scrollable content area */
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  min-height: 0; /* Critical for flex children to respect parent constraints */
  position: relative;
  /* Prevent content from pushing chat panel to grow */
  max-height: calc(100vh - 120px); /* Account for header and footer */
}

/* Footer disclaimer */
.chat-foot {
  padding: 8px 14px 12px;
  font-size: calc(12 / var(--rem-base) * 1rem);
  color: var(--grey-500-new, var(--grey-500, #6b7280));
  text-align: center;
  letter-spacing: -0.005em;
  flex-shrink: 0;
  border-top: 1px solid var(--grey-100-new, var(--grey-100, #e5e5e5));
  line-height: 1.5;
}

/* =============================================================================
   KAPA SDK OVERRIDES
   Style the embedded chat interface to match our design system
   ============================================================================= */

#chat-panel-kapa-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
}

/* Main container */
#chat-panel-kapa-root .chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Conversation area - scrollable */
#chat-panel-kapa-root .conversation-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 180px;
  min-height: 0;
  overscroll-behavior: contain;
}

#chat-panel-kapa-root .conversation {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Q&A Pair styling */
#chat-panel-kapa-root .qa-pair {
  margin-bottom: 20px;
}

#chat-panel-kapa-root .section-divider {
  display: none;
}

/* Question bubble - user message */
#chat-panel-kapa-root .question {
  background: #e6effe;
  color: #1d4ed8;
  border: 1px solid #bfd4fb;
  border-radius: 12px;
  border-top-right-radius: 4px;
  padding: 10px 14px;
  font-size: calc(15 / var(--rem-base) * 1rem);
  line-height: 1.55;
  margin-bottom: 12px;
  margin-left: auto;
  max-width: 85%;
  width: fit-content;
}

/* Answer bubble - assistant message */
#chat-panel-kapa-root .answer {
  background: var(--grey-50-new, #f9fafb);
  border: 1px solid var(--grey-100-new, #e5e5e5);
  border-radius: 12px;
  border-top-left-radius: 4px;
  padding: 12px 14px;
  font-size: calc(15 / var(--rem-base) * 1rem);
  line-height: 1.65;
  color: var(--body-font-color, var(--grey-900-new, #181818));
  max-width: 100%;
}

/* Strong/bold text */
#chat-panel-kapa-root .answer strong {
  font-weight: 600;
  color: inherit;
}

/* Emphasized/italic text */
#chat-panel-kapa-root .answer em {
  font-style: italic;
  color: inherit;
}

#chat-panel-kapa-root .answer p {
  margin: 0 0 10px;
}

#chat-panel-kapa-root .answer p:last-child {
  margin-bottom: 0;
}

/* Headings - matches site's .doc heading styling */
#chat-panel-kapa-root .answer h2,
#chat-panel-kapa-root .answer h3,
#chat-panel-kapa-root .answer h4 {
  font-size: calc(15 / var(--rem-base) * 1rem);
  font-weight: var(--heading-font-weight, 600);
  font-family: var(--heading-font-family, var(--font-display, "Inter Display", "Inter", sans-serif));
  color: var(--heading-font-color, var(--grey-900-new, #181818));
  margin: 16px 0 8px;
  line-height: 1.3;
}

#chat-panel-kapa-root .answer h2:first-child,
#chat-panel-kapa-root .answer h3:first-child,
#chat-panel-kapa-root .answer h4:first-child {
  margin-top: 0;
}

/* Blockquotes - matches site's .doc .quoteblock styling */
#chat-panel-kapa-root .answer blockquote {
  background: var(--quote-background, var(--panel-background));
  border-left: 5px solid var(--quote-border-color, #6b7280);
  color: var(--quote-font-color, #6b7280);
  margin: 0.75rem 0;
  padding: 0.5rem 1rem;
  font-style: italic;
}

#chat-panel-kapa-root .answer blockquote p {
  margin: 0;
}

#chat-panel-kapa-root .answer ul,
#chat-panel-kapa-root .answer ol {
  margin: 8px 0;
  padding-left: 20px;
}

#chat-panel-kapa-root .answer li {
  margin-bottom: 6px;
}

/* Links - matches site's .doc a styling */
#chat-panel-kapa-root .answer a {
  color: var(--body-font-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-aliases-static-palette-text-tertiary, #606164);
}

#chat-panel-kapa-root .answer a:hover {
  color: var(--link-highlight-color, #444ce7);
  text-decoration-color: var(--link-highlight-color, #444ce7);
}

/* Inline code - matches site's .doc p code styling */
#chat-panel-kapa-root .answer code {
  background: var(--pre-background);
  color: var(--code-font-color);
  border: 0.1rem solid #0000001a;
  border-radius: 0.25em;
  padding: 0.125em 0.25em;
  font-size: 0.9em;
  font-family: var(--monospace-font-family, var(--font-mono, "JetBrains Mono", monospace));
  font-weight: lighter;
}

/* Code blocks - matches site's .doc pre styling */
#chat-panel-kapa-root .answer pre {
  background: var(--code-background, var(--pre-background));
  color: var(--code-font-color);
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.6;
  margin: 0.75rem 0;
  font-family: var(--monospace-font-family, var(--font-mono, "JetBrains Mono", monospace));
  font-weight: lighter;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#chat-panel-kapa-root .answer pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Action buttons (Clear, Copy) */
#chat-panel-kapa-root .actions-feedback {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
}

#chat-panel-kapa-root .action-buttons {
  display: flex;
  gap: 4px;
}

#chat-panel-kapa-root .action-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--grey-200-new, #e5e5e5);
  border-radius: 6px;
  font-size: calc(12 / var(--rem-base) * 1rem);
  color: var(--grey-600-new, #4b5563);
  cursor: pointer;
  transition: all 0.12s ease;
}

#chat-panel-kapa-root .action-button:hover {
  background: var(--grey-50-new, #f9fafb);
  border-color: var(--grey-300-new, #d1d5db);
}

#chat-panel-kapa-root .action-button svg {
  width: 12px;
  height: 12px;
}

/* Feedback buttons (thumbs up/down) */
#chat-panel-kapa-root .feedback-container {
  display: flex;
  gap: 2px;
}

#chat-panel-kapa-root .feedback-group {
  display: flex;
  gap: 2px;
}

#chat-panel-kapa-root .feedback-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--grey-200-new, #e5e5e5);
  border-radius: 6px;
  color: var(--grey-500-new, #6b7280);
  cursor: pointer;
  transition: all 0.12s ease;
}

#chat-panel-kapa-root .feedback-button:hover {
  background: var(--grey-50-new, #f9fafb);
  border-color: var(--grey-300-new, #d1d5db);
  color: var(--grey-700-new, #374151);
}

#chat-panel-kapa-root .feedback-icon {
  width: 14px;
  height: 14px;
}

/* Footer wrapper - fixed at bottom */
#chat-panel-kapa-root .chat-footer-wrapper {
  background: #fff;
  border-top: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#chat-panel-kapa-root .chat-footer-wrapper.fixed-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--grey-100-new, #e5e5e5);
}

#chat-panel-kapa-root .chat-footer-wrapper form {
  flex-shrink: 0;
}

/* Chat card / input area */
#chat-panel-kapa-root .chat-card {
  background: #fff;
  border: 1px solid var(--grey-200-new, #e5e5e5);
  border-radius: 12px;
  overflow: hidden;
}

#chat-panel-kapa-root .chat-content {
  padding: 0;
}

/* Text input */
#chat-panel-kapa-root .chat-input,
#chat-panel-kapa-root textarea.chat-input {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 12px 14px;
  font-size: calc(14 / var(--rem-base) * 1rem);
  line-height: 1.5;
  color: var(--grey-900-new, #181818);
  background: #fff;
  resize: none;
  outline: none;
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  min-height: 44px;
  max-height: 120px;
}

#chat-panel-kapa-root .chat-input::placeholder,
#chat-panel-kapa-root textarea.chat-input::placeholder {
  color: var(--grey-400-new, #9ca3af);
}

/* Footer buttons row */
#chat-panel-kapa-root .chat-footer-buttons,
#chat-panel-kapa-root .chat-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--grey-100-new, #e5e5e5);
  background: var(--grey-50-new, #f9fafb);
}

#chat-panel-kapa-root .chat-footer-buttons {
  justify-content: flex-end;
}

/* Deep thinking button */
#chat-panel-kapa-root .deep-thinking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--grey-200-new, #e5e5e5);
  border-radius: 8px;
  font-size: calc(13 / var(--rem-base) * 1rem);
  font-weight: 500;
  color: var(--grey-700-new, #374151);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
}

#chat-panel-kapa-root .deep-thinking-button:hover {
  background: var(--grey-50-new, #f9fafb);
  border-color: var(--grey-300-new, #d1d5db);
}

/* Deep thinking active state */
#chat-panel-kapa-root .deep-thinking-button.active {
  background: rgba(68, 76, 231, 0.1);
  border-color: var(--indigo-500-new, #6172f3);
  color: var(--indigo-600-new, #444ce7);
}

#chat-panel-kapa-root .deep-thinking-button.active:hover {
  background: rgba(68, 76, 231, 0.15);
  border-color: var(--indigo-600-new, #444ce7);
}

#chat-panel-kapa-root .deep-thinking-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Submit button */
#chat-panel-kapa-root .main-button,
#chat-panel-kapa-root button[type="submit"].main-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
  margin: 0;
  background: var(--grey-900-new, #181818);
  border: none;
  border-radius: 8px;
  font-size: calc(13 / var(--rem-base) * 1rem);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

#chat-panel-kapa-root .main-button:hover,
#chat-panel-kapa-root button[type="submit"].main-button:hover {
  background: #000;
}

#chat-panel-kapa-root .main-button:disabled,
#chat-panel-kapa-root button[type="submit"].main-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#chat-panel-kapa-root .main-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* =============================================================================
   WELCOME SCREEN
   Centered welcome message with sparkle icon and suggestion cards
   ============================================================================= */

#chat-panel-kapa-root .welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 24px;
  text-align: center;
  flex: 1;
  min-height: 0;
}

#chat-panel-kapa-root .welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-radius: 16px;
  color: #4f46e5;
  margin-bottom: 20px;
}

#chat-panel-kapa-root .welcome-title {
  font-size: calc(23 / var(--rem-base) * 1rem);
  font-weight: 600;
  color: var(--grey-900-new, #181818);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

#chat-panel-kapa-root .welcome-description {
  font-size: calc(15 / var(--rem-base) * 1rem);
  color: var(--grey-500-new, #6b7280);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 320px;
}

/* Suggestion cards - full width buttons */
#chat-panel-kapa-root .suggestion-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

#chat-panel-kapa-root .suggestion-card {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--grey-200-new, #e5e5e5);
  border-radius: 12px;
  font-size: calc(15 / var(--rem-base) * 1rem);
  color: var(--grey-700-new, #374151);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

#chat-panel-kapa-root .suggestion-card:hover {
  background: var(--grey-50-new, #f9fafb);
  border-color: var(--grey-300-new, #d1d5db);
}

/* =============================================================================
   INPUT FORM - New rounded design
   ============================================================================= */

#chat-panel-kapa-root .chat-input-form {
  padding: 16px;
}

#chat-panel-kapa-root .chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--grey-200-new, #e5e5e5);
  border-radius: 28px;
  padding: 6px 6px 6px 18px;
  transition: border-color 0.15s ease;
}

#chat-panel-kapa-root .chat-input-wrapper:focus-within {
  border-color: #6366f1;
}

#chat-panel-kapa-root .chat-input-wrapper .chat-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  font-size: calc(15 / var(--rem-base) * 1rem);
  color: var(--grey-900-new, #181818);
  outline: none;
  font-family: inherit;
  min-width: 0;
}

#chat-panel-kapa-root .chat-input-wrapper .chat-input::placeholder {
  color: var(--grey-400-new, #9ca3af);
}

#chat-panel-kapa-root .submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #6366f1;
  border: none;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

#chat-panel-kapa-root .submit-button:hover:not(:disabled) {
  background: #4f46e5;
}

#chat-panel-kapa-root .submit-button:disabled {
  background: var(--grey-200-new, #e5e5e5);
  color: var(--grey-400-new, #9ca3af);
  cursor: not-allowed;
}

#chat-panel-kapa-root .submit-button.stop-button {
  background: #ef4444;
}

#chat-panel-kapa-root .submit-button.stop-button:hover {
  background: #dc2626;
}

#chat-panel-kapa-root .submit-button svg {
  width: 18px;
  height: 18px;
  display: block;
  color: #fff;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2 !important;
}

#chat-panel-kapa-root .submit-button svg path {
  stroke: #fff !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* Disclaimer - always visible at bottom */
#chat-panel-kapa-root .disclaimer {
  padding: 10px 14px 14px;
  font-size: calc(12 / var(--rem-base) * 1rem);
  color: var(--grey-500-new, #6b7280);
  text-align: center;
  line-height: 1.5;
  background: #fff;
  border-top: none;
  flex-shrink: 0;
}

#chat-panel-kapa-root .disclaimer p {
  margin: 0 0 4px;
}

#chat-panel-kapa-root .disclaimer p:last-child {
  margin-bottom: 0;
}

#chat-panel-kapa-root .disclaimer a {
  color: #4f46e5;
  text-decoration: none;
}

#chat-panel-kapa-root .disclaimer a:hover {
  text-decoration: underline;
}

/* Button icons */
#chat-panel-kapa-root .button-icon,
#chat-panel-kapa-root .button-icon-left {
  display: inline-flex;
  align-items: center;
}

#chat-panel-kapa-root .button-text {
  display: inline-block;
}

/* Utility classes used by Kapa */
#chat-panel-kapa-root .flex {
  display: flex;
}

#chat-panel-kapa-root .items-center {
  align-items: center;
}

#chat-panel-kapa-root .justify-between {
  justify-content: space-between;
}

#chat-panel-kapa-root .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Responsive behavior */

/* Narrow desktop: reduce chat panel width to fit better */
@media (min-width: 1024px) and (max-width: 1399px) {
  .chat-panel {
    width: 340px;
  }
}

/* Tablet/mobile: full width */
@media (max-width: 520px) {
  .chat-panel {
    width: 100%;
  }
}

/* =============================================================================
   DARK MODE
   Using !important to override Kapa SDK inline styles
   ============================================================================= */

html[data-theme="dark"] .chat-panel {
  background: #1a2332 !important;
  color: #e8eef6 !important;
  border-left-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: -14px 0 40px -18px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .chat-head {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .chat-head-name {
  color: #e8eef6 !important;
}

html[data-theme="dark"] .chat-head-sub {
  color: #7c8ca8 !important;
}

html[data-theme="dark"] .chat-head-btn {
  color: #7c8ca8 !important;
}

html[data-theme="dark"] .chat-head-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] .chat-foot {
  color: #7c8ca8 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode - Kapa SDK overrides */
html[data-theme="dark"] #chat-panel-kapa-root {
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .question {
  background: #3730a3 !important;
  color: #e0e7ff !important;
  border-color: #4338ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .answer {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .answer h2,
html[data-theme="dark"] #chat-panel-kapa-root .answer h3,
html[data-theme="dark"] #chat-panel-kapa-root .answer h4 {
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .answer a {
  color: #e8eef6 !important;
  text-decoration-color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .answer a:hover {
  color: var(--link-highlight-color, #818cf8) !important;
  text-decoration-color: var(--link-highlight-color, #818cf8) !important;
}

/* Dark mode inline code */
html[data-theme="dark"] #chat-panel-kapa-root .answer code {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e8eef6 !important;
}

/* Dark mode code blocks */
html[data-theme="dark"] #chat-panel-kapa-root .answer pre {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .answer pre code {
  background: none !important;
  border: none !important;
  color: inherit !important;
}

/* Dark mode blockquotes */
html[data-theme="dark"] #chat-panel-kapa-root .answer blockquote {
  background: rgba(255, 255, 255, 0.04) !important;
  border-left-color: #7c8ca8 !important;
  color: #aab8ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-footer-wrapper {
  background: #1a2332 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-card {
  background: #232f3e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-input,
html[data-theme="dark"] #chat-panel-kapa-root textarea.chat-input {
  background: #232f3e !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-input::placeholder,
html[data-theme="dark"] #chat-panel-kapa-root textarea.chat-input::placeholder {
  color: #8fa3bd !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-footer-buttons,
html[data-theme="dark"] #chat-panel-kapa-root .chat-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .deep-thinking-button {
  background: #232f3e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #aab8ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .deep-thinking-button:hover {
  background: #2a3a4d !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e8eef6 !important;
}

/* Dark theme deep thinking active state */
html[data-theme="dark"] #chat-panel-kapa-root .deep-thinking-button.active {
  background: rgba(99, 102, 241, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #a5b4fc !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .deep-thinking-button.active:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  color: #c7d2fe !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .main-button,
html[data-theme="dark"] #chat-panel-kapa-root button[type="submit"].main-button {
  background: #e8eef6 !important;
  color: #1a2332 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  border: none !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .main-button:hover,
html[data-theme="dark"] #chat-panel-kapa-root button[type="submit"].main-button:hover {
  background: #fff !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chip {
  background: #232f3e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #aab8ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chip:hover {
  background: #2a3a4d !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .more-chip {
  color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .pulldown-item {
  background: #232f3e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #aab8ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .pulldown-item:hover {
  background: #2a3a4d !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e8eef6 !important;
}

/* Dark mode - Welcome screen */
html[data-theme="dark"] #chat-panel-kapa-root .welcome-icon {
  background: linear-gradient(135deg, #312e81 0%, #3730a3 100%) !important;
  color: #a5b4fc !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .welcome-title {
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .welcome-description {
  color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .suggestion-card {
  background: #232f3e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #aab8ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .suggestion-card:hover {
  background: #2a3a4d !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e8eef6 !important;
}

/* Dark mode - Input form */
html[data-theme="dark"] #chat-panel-kapa-root .chat-input-wrapper {
  background: #232f3e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-input-wrapper:focus-within {
  border-color: #6366f1 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-input-wrapper .chat-input {
  background: transparent !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-input-wrapper .chat-input::placeholder {
  color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .submit-button {
  background: #6366f1 !important;
  color: #fff !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .submit-button:hover:not(:disabled) {
  background: #818cf8 !important;
  color: #fff !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .submit-button:disabled {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .submit-button svg {
  stroke: #fff !important;
  stroke-width: 2 !important;
  fill: none !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .submit-button svg path {
  stroke: #fff !important;
  stroke-width: 2 !important;
  fill: none !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .disclaimer {
  color: #7c8ca8 !important;
  background: #1a2332 !important;
  border-top: none !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .disclaimer a {
  color: #818cf8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .action-button {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .action-button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #aab8ca !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .feedback-button {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #7c8ca8 !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .feedback-button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #aab8ca !important;
}

/* =============================================================================
   TOAST NOTIFICATIONS
   Floating toast for copy/feedback confirmations
   ============================================================================= */

#chat-panel-kapa-root .chat-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: calc(14 / var(--rem-base) * 1rem);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 200;
  animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Success toast */
#chat-panel-kapa-root .chat-toast-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
  border: 1px solid #a7f3d0;
}

#chat-panel-kapa-root .chat-toast-success .chat-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #10b981;
  border-radius: 50%;
  color: #fff;
}

#chat-panel-kapa-root .chat-toast-success .chat-toast-icon svg {
  width: 12px;
  height: 12px;
}

/* Error toast */
#chat-panel-kapa-root .chat-toast-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  color: #991b1b;
  border: 1px solid #fca5a5;
}

#chat-panel-kapa-root .chat-toast-error .chat-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #ef4444;
  border-radius: 50%;
  color: #fff;
}

#chat-panel-kapa-root .chat-toast-error .chat-toast-icon svg {
  width: 12px;
  height: 12px;
}

#chat-panel-kapa-root .chat-toast-message {
  white-space: nowrap;
}

/* Dark mode toast */
html[data-theme="dark"] #chat-panel-kapa-root .chat-toast-success {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
  color: #a7f3d0 !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="dark"] #chat-panel-kapa-root .chat-toast-error {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
  color: #fecaca !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
}