@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

/* CopilotKit v2 style overrides — IdeaBox Co-pilot (Jost font) */
/* Ported from BuildOS globals.css for consistent look */

/* ── CopilotKit Theme ── */
:root {
  --copilot-kit-primary-color: hsl(var(--primary));
  --copilot-kit-contrast-color: #ffffff;
  --copilot-kit-secondary-color: hsl(var(--secondary));
  --copilot-kit-response-button-background-color: hsl(var(--muted));
  --copilot-kit-response-button-color: hsl(var(--muted-foreground));
}

.dark {
  --copilot-kit-primary-color: hsl(var(--primary));
  --copilot-kit-contrast-color: #ffffff;
  --copilot-kit-secondary-color: hsl(var(--secondary));
  --copilot-kit-response-button-background-color: hsl(var(--secondary));
  --copilot-kit-response-button-color: hsl(var(--muted-foreground));
}

/* ── CopilotKit Prose Overrides (light + inherit app variables in .dark below) ── */
[data-copilotkit] {
  --tw-prose-body: #334155;
  --tw-prose-headings: #0f172a;
  --tw-prose-links: hsl(var(--primary));
  --tw-prose-bold: #0f172a;
  --tw-prose-th-borders: #cbd5e1;
  --tw-prose-td-borders: #f1f5f9;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
}

/* Chat surfaces — align with app bg tokens (CopilotKit cpk:dark:* tracks prefers-color-scheme, not our `.dark`) */
[data-testid="copilot-chat"],
[data-testid="copilot-message-list"] {
  color: hsl(var(--text));
}

/* User bubble: Copilot uses `cpk:bg-muted`; tie to app `--muted` / `--text` (not CopilotKit’s cpk:dark) */
[data-testid="copilot-user-message"] [class*="cpk:bg-muted"][class*="cpk:prose"] {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--text)) !important;
}

/* ── Chat container — fill space, flex column so messages scroll and input sticks to bottom ── */
[data-copilotkit] {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

/* ── CopilotKit v2 inner layout — messages scroll, input pinned at bottom ── */

/* The single wrapper inside copilot-chat — must be flex column, constrained */
[data-testid="copilot-chat"] > div {
  display: flex !important;
  flex-direction: column !important;
  max-height: 100% !important;
}

/* Scrollable messages/welcome area — override CopilotKit's inline height:100% */
[data-testid="copilot-chat"] > div > div:first-child {
  flex: 1 1 0% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Breathing room below CopilotHeader / top of welcome & message thread */
  padding-top: 1.25rem !important;
  background: hsl(var(--background)) !important;
}

/* Input slot — always visible pinned at bottom */
[data-testid="copilot-chat"] > div > div:last-child {
  flex-shrink: 0 !important;
  height: auto !important;
  position: relative !important;
  z-index: 20 !important;
  background: hsl(var(--background)) !important;
  /* Match message list horizontal inset (px-4); error/run banners sit here too */
  padding: 0 1rem 1rem !important;
  box-sizing: border-box !important;
}

/* Run/error UI + custom input slot: same width band as ChatInputField (max-w-[54rem] mx-auto) */
[data-testid="copilot-chat"] > div > div:last-child > * {
  max-width: 54rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Feather (CopilotChatView.Feather): CopilotKit uses a full-width h-24 gradient from solid white
   (dark: rgb 33,33,33) — it covers message content and looks like an opaque “outer box” behind the
   scroll-to-bottom control. Disable it; the chip keeps its own surface/shadow. */
[data-copilotkit] div[class*="cpk:absolute"][class*="cpk:h-24"][class*="cpk:bg-gradient-to-t"][class*="cpk:from-white"][class*="cpk:pointer-events-none"] {
  background: transparent !important;
  background-image: none !important;
}

/* ── Scroll-to-bottom row: `cpk:inset-x-0` stretches the absolute flex row to full width.
   Target only the absolute inset-x-0 wrapper (not any large ancestor that :has() could match). */
[data-copilotkit]
  div[class*="cpk:absolute"][class*="cpk:inset-x-0"]:has([data-testid="copilot-scroll-to-bottom"]) {
  inset-inline: auto !important;
  width: fit-content !important;
  max-width: none !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Button — app tokens (override cpk:bg-white / cpk:dark:bg-gray-900); icon uses --text for contrast */
[data-copilotkit] [data-testid="copilot-scroll-to-bottom"] {
  z-index: 30 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: hsl(var(--background-second)) !important;
  background-color: hsl(var(--background-second)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--text)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
[data-copilotkit] [data-testid="copilot-scroll-to-bottom"]:hover {
  background: hsl(var(--background-hover)) !important;
  background-color: hsl(var(--background-hover)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
[data-copilotkit] [data-testid="copilot-scroll-to-bottom"] svg {
  color: hsl(var(--text)) !important;
}

.dark [data-copilotkit] [data-testid="copilot-scroll-to-bottom"] {
  background: hsl(var(--background-second)) !important;
  background-color: hsl(var(--background-second)) !important;
  border-color: hsl(var(--border)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}
.dark [data-copilotkit] [data-testid="copilot-scroll-to-bottom"]:hover {
  background: hsl(var(--background-hover)) !important;
  background-color: hsl(var(--background-hover)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
.dark [data-copilotkit] [data-testid="copilot-scroll-to-bottom"] svg {
  color: hsl(var(--text)) !important;
}

/* Copilot often keeps `cpk:bg-white` on the chip — beat it in both light and `.dark` */
[data-copilotkit] [data-testid="copilot-scroll-to-bottom"][class*="bg-white"],
[data-copilotkit] [data-testid="copilot-scroll-to-bottom"][class*="cpk:bg-white"] {
  background: hsl(var(--background-second)) !important;
  background-color: hsl(var(--background-second)) !important;
}

/* Hide default CopilotKit header — we use our own CopilotHeader */
[data-copilotkit] .copilotKitHeader,
[data-copilotkit] [class*="cpk:border-b"][class*="cpk:px-4"][class*="cpk:py-3"]:first-child {
  display: none !important;
}

/* ── Hide CopilotKit branding ── */
[data-copilotkit] a[href*="copilotkit.ai"],
[data-copilotkit] [class*="powered"] {
  display: none !important;
}

/* ── Enhanced Table Styling (semantic tokens) ── */
[data-copilotkit] table,
[data-copilotkit] table[data-streamdown="table"] {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  margin: 0.75rem 0 !important;
  background: hsl(var(--card-bg)) !important;
}

[data-copilotkit] thead,
[data-copilotkit] [data-streamdown="table-header"] {
  background: hsl(var(--muted)) !important;
}

[data-copilotkit] thead th,
[data-copilotkit] [data-streamdown="table-header-cell"] {
  padding: 0.625rem 0.75rem !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: hsl(var(--muted-foreground)) !important;
  border-bottom: 2px solid hsl(var(--border)) !important;
  white-space: nowrap !important;
  background: transparent !important;
}

[data-copilotkit] tbody,
[data-copilotkit] [data-streamdown="table-body"] {
  background: transparent !important;
}

[data-copilotkit] tbody td,
[data-copilotkit] [data-streamdown="table-cell"] {
  padding: 0.5rem 0.75rem !important;
  color: hsl(var(--text)) !important;
}

[data-copilotkit] tbody tr,
[data-copilotkit] [data-streamdown="table-row"] {
  border-bottom: 1px solid hsl(var(--border)) !important;
  transition: background 0.15s;
}

[data-copilotkit] tbody tr:last-child,
[data-copilotkit] [data-streamdown="table-row"]:last-child {
  border-bottom: none !important;
}

[data-copilotkit] tbody tr:hover,
[data-copilotkit] [data-streamdown="table-row"]:hover {
  background: hsl(var(--background-hover)) !important;
}

/* Table controls (streamdown) */
[data-copilotkit] div[data-streamdown="table-wrapper"],
[data-testid="copilot-assistant-message"] div[data-streamdown="table-wrapper"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  background: hsl(var(--card-bg)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  color: hsl(var(--text)) !important;
}

div[data-streamdown="table-wrapper"] > div:has(button[title*="table"]) {
  justify-self: end !important;
  order: -1 !important;
  gap: 0.5rem !important;
}

/* Markdown / Streamdown tables inside messages — prose can leave cells dark-on-light */
.dark [data-testid="copilot-message-list"] .cpk\:prose table,
.dark [data-testid="copilot-assistant-message"] .cpk\:prose table,
.dark [data-copilotkit] .cpk\:prose table,
.dark [data-testid="copilot-message-list"] table,
.dark [data-testid="copilot-assistant-message"] table {
  background-color: hsl(var(--card-bg)) !important;
}

.dark [data-testid="copilot-message-list"] .cpk\:prose thead,
.dark [data-testid="copilot-assistant-message"] .cpk\:prose thead,
.dark [data-copilotkit] .cpk\:prose thead {
  background-color: hsl(var(--muted)) !important;
}

.dark [data-testid="copilot-message-list"] .cpk\:prose td,
.dark [data-testid="copilot-message-list"] .cpk\:prose th,
.dark [data-testid="copilot-assistant-message"] .cpk\:prose td,
.dark [data-testid="copilot-assistant-message"] .cpk\:prose th,
.dark [data-copilotkit] .cpk\:prose td,
.dark [data-copilotkit] .cpk\:prose th {
  color: hsl(var(--text)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ── CopilotKit Message Avatars ── */
[data-testid="copilot-assistant-message"] {
  position: relative;
  padding-left: 2.5rem !important;
}

[data-testid="copilot-assistant-message"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background-color: hsl(var(--primary)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='m2 14 6-6 6 6'/%3E%3Cpath d='m14 8 6 6'/%3E%3C/svg%3E") !important;
  background-size: 1rem !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0;
}

[data-testid="copilot-user-message"] {
  position: relative;
  padding-right: 2.5rem !important;
}

[data-testid="copilot-user-message"]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2.5rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: hsl(var(--muted));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.dark [data-testid="copilot-user-message"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* ── Hide repeated assistant avatars on consecutive messages ── */
[data-testid="copilot-assistant-message"] + [data-testid="copilot-assistant-message"] {
  padding-left: 2.5rem !important;
}

[data-testid="copilot-assistant-message"] + [data-testid="copilot-assistant-message"]::before {
  display: none !important;
}

/* ── Tool call pills flow horizontally ── */
[data-testid="copilot-assistant-message"] + [data-testid="copilot-assistant-message"]:has(> [data-tool-pill]) {
  display: inline !important;
  padding-left: 2.5rem !important;
}

[data-testid="copilot-assistant-message"]:has(> [data-tool-pill]) > [data-tool-pill] {
  vertical-align: middle;
}

/* ── Copy toolbar: hide all, show only on last assistant message ── */
[data-testid="copilot-assistant-toolbar"] {
  display: none !important;
}
[data-testid="copilot-message-list"] > [data-testid="copilot-assistant-message"]:last-of-type [data-testid="copilot-assistant-toolbar"] {
  display: flex !important;
}

/* ── Loading cursor: Claude-style thinking indicator ── */
[data-testid="copilot-loading-cursor"] {
  width: auto !important;
  height: auto !important;
  border-radius: 1rem !important;
  background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--muted) / 0.7)) !important;
  padding: 0.5rem 1.25rem !important;
  margin-left: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  animation: thinking-shimmer 2s ease-in-out infinite !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid hsl(var(--border) / 0.5);
}

[data-testid="copilot-loading-cursor"]::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation: thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes thinking-shimmer {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* ── Send button — paper-plane style blue rounded square ── */
[data-testid="copilot-send-button"],
[data-testid="copilot-chat-input"] button[data-testid*="send"] {
  background: #6B8AEC !important;
  color: #ffffff !important;
  border-radius: 0.75rem !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

[data-testid="copilot-send-button"]:hover,
[data-testid="copilot-chat-input"] button[data-testid*="send"]:hover {
  background: #5A7ADE !important;
}

[data-testid="copilot-send-button"]:disabled,
[data-testid="copilot-chat-input"] button[data-testid*="send"]:disabled {
  background: #B8C9F0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-testid="copilot-send-button"] svg,
[data-testid="copilot-chat-input"] button[data-testid*="send"] svg {
  color: #ffffff !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
}

/* ── Stop button — red on hover ── */
[data-testid="copilot-chat-input"] button[class*="cpk:rounded-full"]:has(svg rect) {
  transition: all 0.15s ease !important;
}

[data-testid="copilot-chat-input"] button[class*="cpk:rounded-full"]:has(svg rect):hover {
  background: hsl(var(--destructive) / 0.12) !important;
  border-color: hsl(var(--destructive)) !important;
}

[data-testid="copilot-chat-input"] button[class*="cpk:rounded-full"]:has(svg rect):hover svg {
  color: hsl(var(--destructive)) !important;
}

/* ── Chat input — styled by our CopilotInput slot component ── */

/* ── Force all containers between copilot-chat and copilot-chat-input to stretch ── */
[data-testid="copilot-chat"] div:has(> [data-testid="copilot-chat-input"]),
[data-testid="copilot-chat"] div:has(> div > [data-testid="copilot-chat-input"]),
[data-testid="copilot-chat"] div:has(> div > div > [data-testid="copilot-chat-input"]) {
  width: 100% !important;
  max-width: 54rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Input section padding ── */
[data-testid="copilot-chat"] > div:last-child {
  padding: 0 !important;
}

/* ── Message list max-width for readability ── */
[data-testid="copilot-message-list"] {
  max-width: 54rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1rem !important;
}

/* Long URLs / unbroken strings: stay inside bubbles (flex row + default min-width:auto overflows) */
[data-testid="copilot-message-list"] > [data-testid="copilot-user-message"],
[data-testid="copilot-message-list"] > [data-testid="copilot-assistant-message"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

[data-testid="copilot-user-message"] .cpk\:max-w-\[80\%\],
[data-testid="copilot-assistant-message"] .cpk\:max-w-\[80\%\],
[data-testid="copilot-user-message"] > div,
[data-testid="copilot-assistant-message"] > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

[data-testid="copilot-user-message"] .cpk\:prose,
[data-testid="copilot-assistant-message"] .cpk\:prose,
[data-testid="copilot-user-message"] .prose,
[data-testid="copilot-assistant-message"] .prose {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

[data-testid="copilot-user-message"] .cpk\:prose pre,
[data-testid="copilot-assistant-message"] .cpk\:prose pre,
[data-testid="copilot-user-message"] .prose pre,
[data-testid="copilot-assistant-message"] .prose pre {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

[data-testid="copilot-user-message"] .cpk\:whitespace-pre-wrap,
[data-testid="copilot-user-message"] p,
[data-testid="copilot-user-message"] a {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

[data-copilotkit] [data-streamdown="paragraph"],
[data-copilotkit] [data-streamdown="inline-code"] {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

[data-copilotkit] [class*="tool-card"],
[data-copilotkit] [class*="ToolCard"],
[data-copilotkit] [class*="rich-tool"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

[data-copilotkit] [class*="tool-card"] pre,
[data-copilotkit] [class*="ToolCard"] pre,
[data-copilotkit] [class*="rich-tool"] pre {
  word-break: normal !important;
  overflow-x: auto !important;
}

/* ── Tighten assistant message prose spacing & line height ── */
[data-testid="copilot-assistant-message"] .cpk\:prose {
  --tw-prose-spacing: 0.4em;
  line-height: 1.5 !important;
  font-size: 0.9375rem !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose h1 {
  margin-top: 0.6em !important;
  margin-bottom: 0.2em !important;
  line-height: 1.3 !important;
  font-size: 1.35rem !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose h2 {
  margin-top: 0.5em !important;
  margin-bottom: 0.15em !important;
  line-height: 1.3 !important;
  font-size: 1.2rem !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose h3,
[data-testid="copilot-assistant-message"] .cpk\:prose h4 {
  margin-top: 0.4em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.3 !important;
  font-size: 1.05rem !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose p {
  margin-top: 0.2em !important;
  margin-bottom: 0.2em !important;
  line-height: 1.5 !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose ul,
[data-testid="copilot-assistant-message"] .cpk\:prose ol {
  margin-top: 0.15em !important;
  margin-bottom: 0.15em !important;
  padding-left: 1.25em !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose li {
  margin-top: 0.05em !important;
  margin-bottom: 0.05em !important;
  line-height: 1.45 !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose li p {
  margin: 0 !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose blockquote {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
  padding-top: 0.15em !important;
  padding-bottom: 0.15em !important;
  line-height: 1.45 !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose table {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose th,
[data-testid="copilot-assistant-message"] .cpk\:prose td {
  padding: 0.2em 0.5em !important;
}
[data-testid="copilot-assistant-message"] .cpk\:prose pre {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
  padding: 0.5em 0.75em !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
}

/* ── User message bubble ── */
[data-copilotkit] [class*="cpk:items-end"] [class*="cpk:rounded"] {
  border-radius: 18px;
  font-family: 'Jost', sans-serif;
}

/* ── Assistant message font ── */
[data-copilotkit] [class*="cpk:prose"] {
  font-family: 'Jost', sans-serif;
}

/* ── Suggestion buttons (quick-select pills) — theme tokens ── */
[data-copilotkit] button[class*="cpk:rounded-full"]:not([data-testid*="send"]):not([data-testid*="stop"]) {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  border: 1.5px solid hsl(var(--border)) !important;
  background: hsl(var(--card-bg)) !important;
  color: hsl(var(--text)) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

[data-copilotkit] button[class*="cpk:rounded-full"]:not([data-testid*="send"]):not([data-testid*="stop"]):hover {
  background: hsl(var(--background-hover)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.18) !important;
  transform: translateY(-1px);
}

/* ── Suggestion container row — horizontal pills ── */
[data-copilotkit] div[class*="cpk:flex-wrap"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

/* ── User message copy button ── */
[data-copilotkit] [class*="cpk:items-end"] button[aria-label*="copy"],
[data-copilotkit] [class*="cpk:items-end"] button[class*="copy"] {
  opacity: 0;
  transition: opacity 0.15s ease;
}

[data-copilotkit] [class*="cpk:items-end"]:hover button[aria-label*="copy"],
[data-copilotkit] [class*="cpk:items-end"]:hover button[class*="copy"] {
  opacity: 1;
}

/* ── Feedback buttons (thumbs up/down) ── */
[data-copilotkit] button[aria-label*="thumb"],
[data-copilotkit] button[class*="feedback"] {
  opacity: 0;
  transition: opacity 0.15s ease;
}

[data-copilotkit] [class*="cpk:pt-6"]:hover button[aria-label*="thumb"],
[data-copilotkit] [class*="cpk:pt-6"]:hover button[class*="feedback"] {
  opacity: 1;
}

/* ── Welcome screen ── */
[data-copilotkit] .copilotKitWelcome {
  font-family: 'Jost', sans-serif;
}

/* ── Scrollbar inside chat ── */
[data-copilotkit] ::-webkit-scrollbar {
  width: 6px;
}

[data-copilotkit] ::-webkit-scrollbar-track {
  background: transparent;
}

[data-copilotkit] ::-webkit-scrollbar-thumb {
  background: hsl(var(--gray-300));
  border-radius: 3px;
}

[data-copilotkit] ::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--gray-400));
}

/* ── Markdown / Prose styling for assistant messages ──────── */

/* Base prose styling */
[data-testid="copilot-assistant-message"] .cpk\:prose,
[data-copilotkit] .cpk\:prose {
  color: #334155 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
}

/* Paragraphs */
[data-copilotkit] .cpk\:prose p {
  margin-top: 0.15em !important;
  margin-bottom: 0.15em !important;
  color: #475569 !important;
}

/* H1 — main title with brand accent underline */
[data-copilotkit] .cpk\:prose h1 {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  font-family: 'Jost', sans-serif !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.2em !important;
  padding-bottom: 0.2em !important;
  border-bottom: 2px solid #3b5ef5 !important;
  line-height: 1.25 !important;
}

/* H2 — section headers with left accent */
[data-copilotkit] .cpk\:prose h2 {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  font-family: 'Jost', sans-serif !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.15em !important;
  padding-left: 0.65em !important;
  border-left: 3px solid #3b5ef5 !important;
  line-height: 1.25 !important;
}

/* H3 — subsection */
[data-copilotkit] .cpk\:prose h3 {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  font-family: 'Jost', sans-serif !important;
  margin-top: 0.4em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.25 !important;
}

/* H4 — minor heading */
[data-copilotkit] .cpk\:prose h4 {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  font-family: 'Jost', sans-serif !important;
  margin-top: 0.35em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.25 !important;
}

/* Links */
[data-copilotkit] .cpk\:prose a {
  color: #3b5ef5 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s !important;
}

[data-copilotkit] .cpk\:prose a:hover {
  color: #2b4cd4 !important;
}

/* Bold — slightly darker than body */
[data-copilotkit] .cpk\:prose strong {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Unordered lists */
[data-copilotkit] .cpk\:prose ul {
  list-style-type: none !important;
  padding-left: 0.5em !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
}

[data-copilotkit] .cpk\:prose ul > li {
  position: relative !important;
  padding-left: 1.25em !important;
  margin-top: 0.05em !important;
  margin-bottom: 0.05em !important;
  line-height: 1.35 !important;
}

[data-copilotkit] .cpk\:prose ul > li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.55em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #3b5ef5 !important;
}

/* Ordered lists */
[data-copilotkit] .cpk\:prose ol {
  list-style-type: none !important;
  padding-left: 0 !important;
  counter-reset: ol-counter !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
}

[data-copilotkit] .cpk\:prose ol > li {
  counter-increment: ol-counter !important;
  position: relative !important;
  padding-left: 2em !important;
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.35 !important;
}

[data-copilotkit] .cpk\:prose ol > li::before {
  content: counter(ol-counter) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.1em !important;
  width: 1.4em !important;
  height: 1.4em !important;
  border-radius: 50% !important;
  background: #eef2ff !important;
  color: #3b5ef5 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Nested lists */
[data-copilotkit] .cpk\:prose li p {
  margin: 0 !important;
}

/* Inline code */
[data-copilotkit] .cpk\:prose code:not(pre code) {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 0.25rem !important;
  padding: 0.125rem 0.4rem !important;
  font-size: 0.8125rem !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: #3b5ef5 !important;
}

/* Code blocks */
[data-copilotkit] .cpk\:prose pre {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: 0.625rem !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  border: 1px solid #334155 !important;
  margin: 0.75rem 0 !important;
}

[data-copilotkit] .cpk\:prose pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* Blockquote — brand accent */
[data-copilotkit] .cpk\:prose blockquote {
  border-left: 3px solid #3b5ef5 !important;
  padding: 0.625rem 1rem !important;
  color: #475569 !important;
  font-style: italic !important;
  background: #f8fafc !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
  margin: 0.75rem 0 !important;
}

/* Horizontal rule */
[data-copilotkit] .cpk\:prose hr {
  border-color: #e2e8f0 !important;
  margin: 1.25rem 0 !important;
}

/* Images */
[data-copilotkit] .cpk\:prose img {
  border-radius: 0.5rem !important;
  border: 1px solid #e2e8f0 !important;
}

/* ── Dark mode prose ── */
.dark [data-copilotkit] .cpk\:prose,
.dark [data-copilotkit] .cpk\:prose p {
  color: #cbd5e1 !important;
}

.dark [data-copilotkit] .cpk\:prose h1 {
  color: #f1f5f9 !important;
  border-bottom-color: #3b5ef5 !important;
}

.dark [data-copilotkit] .cpk\:prose h2 {
  color: #e2e8f0 !important;
  border-left-color: #3b5ef5 !important;
}

.dark [data-copilotkit] .cpk\:prose h3,
.dark [data-copilotkit] .cpk\:prose h4 {
  color: #e2e8f0 !important;
}

.dark [data-copilotkit] .cpk\:prose strong {
  color: #f1f5f9 !important;
}

.dark [data-copilotkit] .cpk\:prose code:not(pre code) {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #818cf8 !important;
}

.dark [data-copilotkit] .cpk\:prose blockquote {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border-left-color: #3b5ef5 !important;
}

.dark [data-copilotkit] .cpk\:prose ul > li::before {
  background: #818cf8 !important;
}

.dark [data-copilotkit] .cpk\:prose ol > li::before {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--primary)) !important;
}

.dark [data-copilotkit] .cpk\:prose a {
  color: hsl(var(--primary)) !important;
}

.dark [data-copilotkit] .cpk\:prose a:hover {
  color: hsl(var(--primary-lighter)) !important;
}

.dark [data-copilotkit] .cpk\:prose hr {
  border-color: hsl(var(--border)) !important;
}

.dark [data-copilotkit] .cpk\:prose img {
  border-color: hsl(var(--border)) !important;
}

/* Built-in Copilot input & slash menu (when not fully replaced by custom slot) — `cpk:dark:*` follows OS theme only */
.dark [data-copilotkit] [data-testid="copilot-chat-input"] {
  background-color: hsl(var(--background-second)) !important;
  box-shadow: 0 4px 4px rgb(0 0 0 / 0.2), 0 0 1px rgb(0 0 0 / 0.35) !important;
}

.dark [data-copilotkit] [data-testid="copilot-slash-menu"] {
  background-color: hsl(var(--popover)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ── "Powered by Vector AI" branding after toolbar ── */
[data-testid="copilot-assistant-toolbar"]::after {
  content: "Powered by Vector AI";
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-family: 'Jost', sans-serif;
  opacity: 0.8;
  padding-left: 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b0bec5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0.875rem;
}

/* ── Claude-style Thinking Block ──────────────────────── */

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

/* ── Tool Card Animations ──────────────────────────────── */

/* ── Tool card prose overrides — kill extra spacing from <br> and Tailwind ── */
[data-copilotkit] .prose br {
  display: none !important;
}

[data-copilotkit] .prose {
  line-height: 1.4 !important;
}

[data-copilotkit] .prose p {
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
}

[data-copilotkit] .prose ul,
[data-copilotkit] .prose ol {
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
}

[data-copilotkit] .prose li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.4 !important;
}

[data-copilotkit] .prose h1,
[data-copilotkit] .prose h2,
[data-copilotkit] .prose h3,
[data-copilotkit] .prose h4 {
  margin-top: 0.4em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.3 !important;
}

/* ── Streamdown (CopilotKit markdown renderer) — tighter spacing ── */
[data-copilotkit] [data-streamdown="unordered-list"],
[data-copilotkit] [data-streamdown="ordered-list"] {
  margin-top: 0.15em !important;
  margin-bottom: 0.15em !important;
}

[data-copilotkit] [data-streamdown="list-item"] {
  padding-top: 0.05em !important;
  padding-bottom: 0.05em !important;
  line-height: 1.4 !important;
}

[data-copilotkit] [data-streamdown="paragraph"] {
  margin-top: 0.15em !important;
  margin-bottom: 0.15em !important;
  line-height: 1.4 !important;
}

[data-copilotkit] [data-streamdown="heading-1"],
[data-copilotkit] [data-streamdown="heading-2"],
[data-copilotkit] [data-streamdown="heading-3"],
[data-copilotkit] [data-streamdown="heading-4"] {
  margin-top: 0.35em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.25 !important;
}

/* ── Tool card content — tighter spacing ── */
[data-copilotkit] [class*="tool-card"] p,
[data-copilotkit] [class*="tool-card"] li,
[data-copilotkit] [class*="ToolCard"] p,
[data-copilotkit] [class*="ToolCard"] li,
[data-copilotkit] [class*="rich-tool"] p,
[data-copilotkit] [class*="rich-tool"] li {
  line-height: 1.35 !important;
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
}

[data-copilotkit] [class*="tool-card"] h1,
[data-copilotkit] [class*="tool-card"] h2,
[data-copilotkit] [class*="tool-card"] h3,
[data-copilotkit] [class*="tool-card"] h4,
[data-copilotkit] [class*="ToolCard"] h1,
[data-copilotkit] [class*="ToolCard"] h2,
[data-copilotkit] [class*="ToolCard"] h3,
[data-copilotkit] [class*="ToolCard"] h4,
[data-copilotkit] [class*="rich-tool"] h1,
[data-copilotkit] [class*="rich-tool"] h2,
[data-copilotkit] [class*="rich-tool"] h3,
[data-copilotkit] [class*="rich-tool"] h4 {
  line-height: 1.25 !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.1em !important;
}

.tool-card-enter {
  animation: toolCardSlideIn 0.3s ease-out;
}

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