/*
 * Brand overrides layered on top of the prebuilt CopilotKit stylesheet
 * (styles.css). Must be linked AFTER styles.css so these rules win the
 * cascade against the cpk: utilities.
 */

/* Drop shadow on the popup window (replaces the faint default shadow-xl). */
[data-copilot-popup] {
  box-shadow:
    0 24px 60px -12px rgb(0 0 0 / 0.25),
    0 8px 24px -8px rgb(0 0 0 / 0.15);
}

/* Visible divider between the header and the chat body. */
.copilotKitHeader {
  border-bottom: 1px solid #e5e7eb;
}

/* Divider between the message list and the input area. */
[data-testid="copilot-input-overlay"] {
  border-top: 1px solid #e5e7eb;
}
.cpk\:fixed.cpk\:inset-0 {
  background-color: transparent !important;
}

div:has(> [data-testid="copilot-chat-input"]) {
  border-top: 1px solid #e5e7eb;
}
/*
 * The "+" add-attachment dropdown and toolbar tooltips render in Radix
 * portals appended to document.body with z-index 50, while the popup window
 * wrapper is fixed with z-index 1200 — so the menu opens BEHIND the chat and
 * can't be seen or clicked. Lift the portaled layers above everything,
 * including the z-9999 image lightbox.
 */
[data-copilotkit][data-slot="dropdown-menu-content"],
[data-copilotkit][data-slot="dropdown-menu-sub-content"],
[data-copilotkit][data-slot="tooltip-content"] {
  z-index: 99999;
}

/*
 * The launcher lives in the app header (top-right), so on desktop the popup
 * drops down from under the header instead of floating bottom-right.
 * Header is h-14 (3.5rem); leave a small gap below it.
 */
@media (min-width: 768px) {
  [data-copilotkit].cpk\:md\:bottom-24 {
    top: 4rem;
    bottom: auto;
    right: 1rem;
  }
}

/*
 * Full screen mode (toggled via body.ai-chat-fullscreen from AiAssistant).
 * The popup's outer wrapper stays anchored top-right under the header and is transparent, so the popup itself is pinned to the
 * viewport; the floating margins and rounded corners are dropped.
 */
@media (min-width: 768px) {
  body.ai-chat-fullscreen [data-copilot-popup] {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}

/* ── Portiom brand ────────────────────────────────────────────────────────
 * CopilotKit reads its colours from shadcn-style variables scoped to
 * [data-copilotkit]. Doubling the attribute outranks the prebuilt sheet, so
 * the send button, focus rings and accents follow the app brand (#0b5cab)
 * instead of CopilotKit's near-black default.
 */
[data-copilotkit][data-copilotkit] {
  --primary: var(--primary-color, #0b5cab);
  --primary-foreground: #ffffff;
  --ring: #8bb8e8;
  --radius: 0.625rem;
}

[data-copilot-popup] {
  font-family: var(--font-poppins), system-ui, sans-serif;
  border-color: #e5e7eb;
}

/* User messages: soft brand tint instead of the grey bubble. */
.copilotKitUserMessage .cpk\:prose {
  background-color: #eef4fb;
  color: #032d60;
  border: 1px solid #dbe7f5;
}

/* Starter suggestions: outlined pills that pick up the brand on hover. */
[data-popup-chat] [data-slot="suggestion-pill"] {
  border: 1px solid #e3e5e8;
  background-color: #ffffff;
  color: #454c54;
  font-size: 12.5px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition:
    border-color 0.15s,
    color 0.15s,
    background-color 0.15s;
}
[data-popup-chat] [data-slot="suggestion-pill"]:hover {
  border-color: #0176d3;
  color: #0b5cab;
  background-color: #f5f9fe;
}

/* Input: brand focus ring on the whole composer. */
[data-testid="copilot-chat-input"]:focus-within {
  border-color: #0176d3;
  box-shadow: 0 0 0 3px rgb(139 184 232 / 0.35);
}

/* History panel slides in over the chat (AiHistoryPanel). */
@keyframes ai-history-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.ai-history-panel {
  animation: ai-history-in 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ai-history-panel {
    animation: none;
  }
  .ai-launcher,
  .ai-launcher * {
    transition: none !important;
  }
}