/* ═══════════════════════════════════════════════════════════════════════════
   AIIMS Chat — Modern LLM Interface Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS-only cover — renders before ANY JS runs, prevents home page flash ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: hsl(222 47% 7%);
  pointer-events: all;
  transition: opacity 0.3s ease;
}

body.cl-loaded::after {
  opacity: 0;
  pointer-events: none;
}

/* ── Hide Chainlit's built-in welcome screen (logo + readme) ─────────────── */
#welcome-screen {
  display: none !important;
}

/* ── AIIMS header logo ───────────────────────────────────────────────────── */
.aiims-header-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 12px;
  transition: opacity 0.2s ease;
}

/* ── Community header link ─────────────────────────────────────────────────── */
.aiims-community-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: hsl(215 15% 55%);
  border: 1px solid hsl(217 25% 22%);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  margin-left: 4px;
}
.aiims-community-link:hover {
  background: hsl(234 89% 74% / 0.12);
  border-color: hsl(234 89% 74% / 0.4);
  color: hsl(234 89% 74%);
}
.aiims-community-link svg {
  flex-shrink: 0;
}
:root:not(.dark) .aiims-community-link {
  color: hsl(215 14% 50%);
  border-color: hsl(214 18% 82%);
}
:root:not(.dark) .aiims-community-link:hover {
  background: hsl(234 89% 60% / 0.08);
  border-color: hsl(234 89% 60% / 0.3);
  color: hsl(234 89% 60%);
}

/* ── Loading overlay — covers the page until session is ready ─────────────── */
#cl-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: hsl(222 47% 7%);
  color: hsl(210 20% 85%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: opacity 0.4s ease;
  gap: 28px;
}

#cl-loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Skeleton bars for the loading screen */
.cl-loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
}

.cl-loading-skeleton .bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    hsl(217 30% 16%) 0%,
    hsl(217 30% 24%) 40%,
    hsl(217 30% 16%) 80%
  );
  background-size: 300% 100%;
  animation: skeleton-flow 1.8s ease-in-out infinite;
}

.cl-loading-skeleton .bar:nth-child(1) { width: 90%; animation-delay: 0s; }
.cl-loading-skeleton .bar:nth-child(2) { width: 100%; animation-delay: 0.1s; }
.cl-loading-skeleton .bar:nth-child(3) { width: 65%; animation-delay: 0.2s; }

@keyframes skeleton-flow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#cl-loading-text {
  font-size: 14px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

/* Dots animation for loading text */
.cl-loading-dots::after {
  content: '';
  animation: dots 1.4s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* ── Tool platform badges ────────────────────────────────────────────────── */
.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

.tool-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Google Ads — blue */
.tool-badge.gads { background: rgba(66, 133, 244, 0.13); color: #5e9eff; }
.tool-badge.gads::before { background: #4285f4; }

/* Search Console — green */
.tool-badge.gsc { background: rgba(52, 168, 83, 0.13); color: #5ec97a; }
.tool-badge.gsc::before { background: #34a853; }

/* Analytics (GA4) — amber/orange */
.tool-badge.ga4 { background: rgba(251, 188, 4, 0.13); color: #f5c542; }
.tool-badge.ga4::before { background: #fbbc04; }

/* Meta Ads — blue */
.tool-badge.meta { background: rgba(0, 129, 251, 0.13); color: #4da6ff; }
.tool-badge.meta::before { background: #0081fb; }

/* Zoho CRM — red */
.tool-badge.zoho-crm { background: rgba(220, 38, 38, 0.13); color: #f06060; }
.tool-badge.zoho-crm::before { background: #dc2626; }

/* Zoho Projects — coral/orange */
.tool-badge.zoho-projects { background: rgba(233, 116, 81, 0.13); color: #f09070; }
.tool-badge.zoho-projects::before { background: #e97451; }

/* Zoho Creator — purple */
.tool-badge.zoho-creator { background: rgba(168, 85, 247, 0.13); color: #c084fc; }
.tool-badge.zoho-creator::before { background: #a855f7; }

/* Products / Briefs — teal */
.tool-badge.products { background: rgba(20, 184, 166, 0.13); color: #5eead4; }
.tool-badge.products::before { background: #14b8a6; }

/* AIIMS Data / Database — slate */
.tool-badge.database { background: rgba(148, 163, 184, 0.13); color: #94a3b8; }
.tool-badge.database::before { background: #64748b; }

/* Web (search & fetch) — indigo */
.tool-badge.web { background: rgba(99, 102, 241, 0.13); color: #818cf8; }
.tool-badge.web::before { background: #6366f1; }

/* Semrush — orange */
.tool-badge.semrush { background: rgba(255, 100, 26, 0.13); color: #ff8a56; }
.tool-badge.semrush::before { background: #ff641a; }

/* SimilarWeb — navy/teal */
.tool-badge.similarweb { background: rgba(0, 95, 153, 0.13); color: #3fa8d4; }
.tool-badge.similarweb::before { background: #005f99; }

/* Generic fallback */
.tool-badge.generic { background: rgba(148, 163, 184, 0.10); color: #94a3b8; }
.tool-badge.generic::before { background: #64748b; }

/* ── Light theme overrides for badges ────────────────────────────────────── */
:root:not(.dark) .tool-badge.gads,
[data-theme="light"] .tool-badge.gads { color: #1a73e8; }

:root:not(.dark) .tool-badge.gsc,
[data-theme="light"] .tool-badge.gsc { color: #137333; }

:root:not(.dark) .tool-badge.ga4,
[data-theme="light"] .tool-badge.ga4 { color: #e37400; }

:root:not(.dark) .tool-badge.meta,
[data-theme="light"] .tool-badge.meta { color: #0064c8; }

:root:not(.dark) .tool-badge.zoho-crm,
[data-theme="light"] .tool-badge.zoho-crm { color: #b91c1c; }

:root:not(.dark) .tool-badge.zoho-projects,
[data-theme="light"] .tool-badge.zoho-projects { color: #c05e3c; }

:root:not(.dark) .tool-badge.zoho-creator,
[data-theme="light"] .tool-badge.zoho-creator { color: #7c3aed; }

:root:not(.dark) .tool-badge.products,
[data-theme="light"] .tool-badge.products { color: #0d9488; }

:root:not(.dark) .tool-badge.database,
[data-theme="light"] .tool-badge.database { color: #475569; }

:root:not(.dark) .tool-badge.web,
[data-theme="light"] .tool-badge.web { color: #4f46e5; }

:root:not(.dark) .tool-badge.semrush,
[data-theme="light"] .tool-badge.semrush { color: #d4430a; }

:root:not(.dark) .tool-badge.similarweb,
[data-theme="light"] .tool-badge.similarweb { color: #004d7a; }

:root:not(.dark) .tool-badge.generic,
[data-theme="light"] .tool-badge.generic { color: #475569; }

/* ── Inline tool shimmer while waiting for result ────────────────────────── */
.tool-shimmer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin: 10px 0;
  border-radius: 10px;
  font-size: 0.84em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: hsl(var(--shimmer-text));
  border: 1px solid hsl(var(--shimmer-border));
  background: linear-gradient(
    90deg,
    hsl(var(--shimmer-from)) 0%,
    hsl(var(--shimmer-mid)) 50%,
    hsl(var(--shimmer-from)) 100%
  );
  background-size: 200% 100%;
  animation: tool-flow 1.8s ease-in-out infinite;
}

.tool-shimmer::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid hsl(var(--shimmer-spinner-track));
  border-top-color: hsl(var(--shimmer-spinner-accent));
  border-radius: 50%;
  animation: cl-spin 0.7s linear infinite;
}

@keyframes cl-spin {
  to { transform: rotate(360deg); }
}

@keyframes artifact-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes tool-flow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Tool result (lazy-loaded details) ───────────────────────────────────── */
details.tool-result {
  margin: 10px 0;
  border-radius: 8px;
  border: none;
}
details.tool-result > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.84em;
  font-weight: 500;
  border: none;
  background: hsl(var(--shimmer-from));
}
details.tool-result > summary::-webkit-details-marker { display: none; }
details.tool-result > summary::after {
  content: "\25B6";
  font-size: 0.6em;
  margin-left: 4px;
  transition: transform 0.15s ease;
}
details.tool-result[open] > summary::after {
  transform: rotate(90deg);
}

/* ── Thinking step skeleton ──────────────────────────────────────────────── */
.thinking-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  margin: 8px 0;
  border-left: 3px solid hsl(var(--shimmer-spinner-accent));
  border-radius: 0 8px 8px 0;
  background: hsl(var(--shimmer-from));
}

.thinking-skeleton .line {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    hsl(var(--shimmer-from)) 0%,
    hsl(var(--shimmer-mid)) 50%,
    hsl(var(--shimmer-from)) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-flow 2s ease-in-out infinite;
}

.thinking-skeleton .line:nth-child(1) { width: 85%; }
.thinking-skeleton .line:nth-child(2) { width: 95%; animation-delay: 0.15s; }
.thinking-skeleton .line:nth-child(3) { width: 60%; animation-delay: 0.3s; }

/* ── Code block copy button ──────────────────────────────────────────────── */
.code-block-wrapper {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  z-index: 10;
  background: hsl(217 30% 20%);
  color: hsl(210 16% 82%);
}

.code-block-wrapper:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  background: hsl(217 30% 28%);
}

.code-copy-btn.copied {
  background: hsl(142 60% 30%);
  color: hsl(142 60% 85%);
  opacity: 1;
}

/* SVG sizes handled by combined rule below with !important */

/* Light theme overrides */
:root:not(.dark) .code-copy-btn,
[data-theme="light"] .code-copy-btn {
  background: hsl(214 18% 90%);
  color: hsl(215 25% 35%);
}

:root:not(.dark) .code-copy-btn:hover,
[data-theme="light"] .code-copy-btn:hover {
  background: hsl(214 18% 83%);
}

/* ── Message copy button (on hover) ──────────────────────────────────────── */
.msg-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  background: hsl(217 30% 16%);
  color: hsl(210 16% 65%);
  margin-top: 6px;
  line-height: 1;
  max-height: 24px;
  overflow: hidden;
}

.msg-copy-btn svg,
.code-copy-btn svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0;
  display: inline-block;
}

.msg-copy-btn:hover {
  background: hsl(217 30% 22%);
  color: hsl(210 16% 85%);
}

.msg-copy-btn.copied {
  background: hsl(142 60% 30%);
  color: hsl(142 60% 85%);
  opacity: 1 !important;
}

:root:not(.dark) .msg-copy-btn,
[data-theme="light"] .msg-copy-btn {
  background: hsl(214 18% 92%);
  color: hsl(215 14% 55%);
}

:root:not(.dark) .msg-copy-btn:hover,
[data-theme="light"] .msg-copy-btn:hover {
  background: hsl(214 18% 85%);
  color: hsl(215 25% 35%);
}

/* Show copy button on step/message hover */
[class*="message"]:hover .msg-copy-btn,
.step:hover .msg-copy-btn {
  opacity: 1;
}

/* ── Data tables — polished styling ──────────────────────────────────────── */
[class*="message"] table,
.step table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 12px 0;
  font-size: 0.85em;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid hsl(var(--border, 217 25% 18%));
}

[class*="message"] table th,
.step table th {
  background: hsl(var(--shimmer-from));
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--shimmer-text));
  border-bottom: 1px solid hsl(var(--border, 217 25% 18%));
}

[class*="message"] table td,
.step table td {
  padding: 8px 14px;
  border-bottom: 1px solid hsl(var(--border, 217 25% 18%) / 0.5);
}

[class*="message"] table tr:last-child td,
.step table tr:last-child td {
  border-bottom: none;
}

[class*="message"] table tr:hover td,
.step table tr:hover td {
  background: hsl(var(--shimmer-from));
}

/* ── Details/summary (tool results) — polished ───────────────────────────── */
[class*="message"] details:not(.tool-result),
.step details:not(.tool-result) {
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid hsl(var(--shimmer-border));
  overflow: hidden;
}

[class*="message"] details:not(.tool-result) summary,
.step details:not(.tool-result) summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.84em;
  font-weight: 500;
  background: hsl(var(--shimmer-from));
  user-select: none;
  transition: background 0.15s ease;
}

[class*="message"] details:not(.tool-result) summary:hover,
.step details:not(.tool-result) summary:hover {
  background: hsl(var(--shimmer-mid));
}

[class*="message"] details:not(.tool-result)[open] summary,
.step details:not(.tool-result)[open] summary {
  border-bottom: 1px solid hsl(var(--shimmer-border));
}

details pre {
  max-height: 300px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 0 0 8px 8px !important;
  font-size: 0.82em !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* ── Smooth message entrance ─────────────────────────────────────────────── */
@keyframes msg-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[class*="message"] {
  animation: msg-enter 0.25s ease-out;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--shimmer-spinner-accent));
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Artifact sidebar panel ────────────────────────────────────────────── */

/* Position the native close button inside the artifact title bar */
#side-view-title {
  position: absolute !important;
  top: 0;
  left: 4px;
  z-index: 20 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0.5rem !important;
  height: 40px;
  display: flex !important;
  align-items: center !important;
}

/* Override the Chainlit close button to match artifact action buttons */
#side-view-title > button {
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  border: none !important;
  border-radius: 0.375rem !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}

#side-view-title > button:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

#side-view-title > button:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

#side-view-title > button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Side-view content: fill height so artifact iframe can flex-grow */
#side-view-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  background: hsl(var(--card));
}

/* ── Document streaming styles (direct div render, no iframe) ────────── */
.artifact-doc-stream {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: hsl(var(--foreground));
  line-height: 1.6;
}
.artifact-doc-stream h1, .artifact-doc-stream h2, .artifact-doc-stream h3 { margin-top: 1.2em; }
.artifact-doc-stream table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.artifact-doc-stream th, .artifact-doc-stream td { border: 1px solid hsl(var(--border)); padding: 8px 12px; text-align: left; }
.artifact-doc-stream th { background: hsl(var(--muted)); font-weight: 600; }
.artifact-doc-stream pre { background: hsl(var(--muted)); padding: 12px; border-radius: 6px; overflow-x: auto; }
.artifact-doc-stream code { font-size: 0.9em; }
.artifact-doc-stream img { max-width: 100%; }
.artifact-doc-stream a { color: hsl(var(--primary)); }

/* Custom elements in sidebar should fill available space.
   Border + bg live on this PERSISTENT container so they never flash
   when the child CustomElement remounts on each streaming update. */
#side-view-content .side-custom {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  overflow: hidden;
  background: hsl(var(--card));
}

/* Make the resize handle more visible and easier to grab */
[data-panel-group-direction="horizontal"] > [data-resize-handle] {
  width: 6px !important;
  background: hsl(var(--border));
  transition: background 0.15s ease;
}

[data-panel-group-direction="horizontal"] > [data-resize-handle]:hover,
[data-panel-group-direction="horizontal"] > [data-resize-handle][data-resize-handle-active] {
  background: hsl(var(--primary) / 0.5);
}

/* ── Hide Chainlit's ChatSettings gear button ──────────────────────────── */
#chat-settings-open-modal {
  display: none !important;
}

/* ── Content type dropdown (Gemini-style) ──────────────────────────────── */

/* ── Contextual tooltip hint above mode bar ────────────────────────────── */
.ct-tooltip-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 2px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: hsl(210 20% 70%);
  background: hsl(222 30% 14%);
  border: 1px solid hsl(222 20% 22%);
  animation: ct-tooltip-in 0.4s ease both;
}

.ct-tooltip-hint b {
  color: hsl(210 60% 75%);
}

.ct-tooltip-hint .ct-tooltip-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: hsl(210 15% 50%);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}

.ct-tooltip-hint .ct-tooltip-dismiss:hover {
  color: hsl(210 20% 80%);
}

/* Light mode */
:root:not(.dark) .ct-tooltip-hint {
  color: hsl(220 15% 40%);
  background: hsl(220 30% 96%);
  border-color: hsl(220 20% 88%);
}

:root:not(.dark) .ct-tooltip-hint b {
  color: hsl(220 60% 45%);
}

:root:not(.dark) .ct-tooltip-hint .ct-tooltip-dismiss {
  color: hsl(220 10% 60%);
}

:root:not(.dark) .ct-tooltip-hint .ct-tooltip-dismiss:hover {
  color: hsl(220 10% 30%);
}

@keyframes ct-tooltip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ct-tooltip-hiding {
  animation: ct-tooltip-out 0.3s ease both;
}

@keyframes ct-tooltip-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

.ct-bar {
  display: flex;
  gap: 6px;
  padding: 6px 12px 2px;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
}

/* Trigger button */
.ct-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid hsl(var(--border, 217 25% 22%));
  background: transparent;
  color: hsl(var(--muted-foreground, 215 15% 55%));
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
  line-height: 1.3;
}

.ct-trigger:hover {
  background: hsl(var(--accent, 217 30% 16%) / 0.5);
  color: hsl(var(--foreground, 210 15% 90%));
  border-color: hsl(var(--border, 217 25% 28%));
}

:root:not(.dark) .ct-trigger {
  border-color: hsl(214 18% 82%);
  color: hsl(215 14% 50%);
}
:root:not(.dark) .ct-trigger:hover {
  background: hsl(214 18% 93%);
  color: hsl(215 20% 30%);
}

/* Active selection pills */
.ct-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: hsl(var(--primary, 234 89% 74%) / 0.15);
  border: 1px solid hsl(var(--primary, 234 89% 74%) / 0.4);
  color: hsl(var(--primary, 234 89% 74%));
  white-space: nowrap;
  user-select: none;
  line-height: 1.3;
  animation: pill-in 0.15s ease-out;
}

.ct-artifacts-pill {
  background: hsl(168 60% 50% / 0.13);
  border-color: hsl(168 60% 50% / 0.35);
  color: hsl(168 60% 55%);
}

:root:not(.dark) .ct-active-pill {
  background: hsl(var(--primary, 234 89% 60%) / 0.10);
  border-color: hsl(var(--primary, 234 89% 60%) / 0.30);
  color: hsl(var(--primary, 234 89% 60%));
}

:root:not(.dark) .ct-artifacts-pill {
  background: hsl(168 60% 40% / 0.10);
  border-color: hsl(168 60% 40% / 0.25);
  color: hsl(168 55% 35%);
}

@keyframes pill-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.ct-pill-dismiss {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  line-height: 1;
}
.ct-pill-dismiss:hover { opacity: 1; }

/* ── Dropdown menu ─────────────────────────────────────────────────────── */

.ct-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  min-width: 280px;
  max-width: 340px;
  background: hsl(var(--card, 222 47% 10%));
  border: 1px solid hsl(var(--border, 217 25% 18%));
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  padding: 6px 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.ct-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

:root:not(.dark) .ct-dropdown {
  background: hsl(0 0% 100%);
  border-color: hsl(214 18% 86%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.ct-dropdown-header {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground, 215 15% 45%));
}

.ct-dropdown-divider {
  height: 1px;
  background: hsl(var(--border, 217 25% 18%));
  margin: 4px 12px;
}

:root:not(.dark) .ct-dropdown-divider {
  background: hsl(214 18% 90%);
}

/* Dropdown items */
.ct-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease;
  color: hsl(var(--foreground, 210 15% 90%));
}

.ct-dropdown-item:hover {
  background: hsl(var(--accent, 217 30% 14%) / 0.6);
}

:root:not(.dark) .ct-dropdown-item {
  color: hsl(215 20% 25%);
}
:root:not(.dark) .ct-dropdown-item:hover {
  background: hsl(214 18% 95%);
}

/* Radio indicator */
.ct-item-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid hsl(var(--muted-foreground, 215 15% 40%));
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease;
}

.ct-dropdown-item.active .ct-item-radio {
  border-color: hsl(var(--primary, 234 89% 74%));
}

.ct-dropdown-item.active .ct-item-radio::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--primary, 234 89% 74%));
}

/* Item text */
.ct-item-info {
  flex: 1;
  min-width: 0;
}

.ct-item-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.ct-item-desc {
  font-size: 11px;
  color: hsl(var(--muted-foreground, 215 15% 45%));
  line-height: 1.3;
  margin-top: 1px;
}

.ct-dropdown-item.active .ct-item-label {
  color: hsl(var(--primary, 234 89% 74%));
}

:root:not(.dark) .ct-dropdown-item.active .ct-item-label {
  color: hsl(var(--primary, 234 89% 60%));
}

/* Artifacts row layout */
.ct-artifacts-row {
  cursor: default;
  padding: 10px 16px;
}

.ct-artifacts-row .ct-item-info {
  flex: 1;
}

/* Toggle switch (inside dropdown) */
.ct-toggle-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: hsl(var(--border, 217 25% 22%));
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.ct-toggle-switch[aria-checked="true"] {
  background: hsl(168 60% 45%);
}

.ct-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.ct-toggle-switch[aria-checked="true"] .ct-toggle-thumb {
  transform: translateX(16px);
}

:root:not(.dark) .ct-toggle-switch {
  background: hsl(214 18% 82%);
}

/* ── Task Creation Modal (pops above the composer) ────────────────────── */

.task-modal-wrapper {
  max-width: 520px;
  width: max-content;
  z-index: 900;
  animation: task-modal-in 0.2s ease-out;
}

@keyframes task-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes task-modal-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

.task-modal-wrapper.closing {
  animation: task-modal-out 0.15s ease-in forwards;
}

.task-modal {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px hsl(var(--border) / 0.5);
}

:root:not(.dark) .task-modal {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px hsl(var(--border) / 0.5);
}

/* Header */
.task-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
}

.task-modal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-modal-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  flex-shrink: 0;
}

.task-modal-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: hsl(var(--foreground));
}

.task-modal-header .task-modal-subtitle {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.task-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.task-modal-close:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Body / form */
.task-modal-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-modal-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}

.task-modal-input,
.task-modal-textarea {
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.task-modal-input:focus,
.task-modal-textarea:focus {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.task-modal-input::placeholder,
.task-modal-textarea::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
}

.task-modal-textarea {
  min-height: 64px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.task-modal-textarea:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
  pointer-events: none;
}

select.task-modal-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

/* Row layout for date + project side by side */
.task-modal-row {
  display: flex;
  gap: 10px;
}

.task-modal-row > .task-modal-field {
  flex: 1;
  min-width: 0;
}

/* Footer */
.task-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
}

.task-modal-footer-hint {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-modal-footer-hint svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.task-modal-actions {
  display: flex;
  gap: 6px;
}

.task-modal-btn-cancel {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.task-modal-btn-cancel:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.task-modal-btn-create {
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.task-modal-btn-create:hover {
  background: hsl(var(--primary) / 0.85);
}

.task-modal-btn-create:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Gemini-like input area restyling ──────────────────────────────────── */

/* Rounder composer box */
[class*="composer"],
form:has(textarea) {
  border-radius: 24px !important;
  overflow: hidden;
}

/* Larger, cleaner textarea */
textarea {
  min-height: 52px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  resize: none;
}

textarea::placeholder {
  color: hsl(var(--muted-foreground, 215 15% 45%));
  opacity: 0.65;
}

/* Subtle focus glow on the composer */
form:has(textarea):focus-within,
[class*="composer"]:focus-within {
  box-shadow: 0 0 0 2px hsl(var(--primary, 234 89% 74%) / 0.2);
  transition: box-shadow 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING TAB — Tab bar, account search, workspace, fields sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab bar (top of left sidebar) ──────────────────────────────────────── */
.ob-tab-bar {
  display: flex;
  gap: 4px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid hsl(var(--border, 217 25% 18%));
  flex-shrink: 0;
}

.ob-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--muted-foreground, 215 15% 55%));
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.ob-tab:hover {
  background: hsl(var(--accent, 217 30% 14%) / 0.5);
  color: hsl(var(--foreground, 210 15% 90%));
}

.ob-tab.active {
  background: hsl(var(--primary, 234 89% 74%) / 0.15);
  border-color: hsl(var(--primary, 234 89% 74%) / 0.4);
  color: hsl(var(--primary, 234 89% 74%));
}

:root:not(.dark) .ob-tab {
  color: hsl(215 14% 50%);
}
:root:not(.dark) .ob-tab:hover {
  background: hsl(214 18% 93%);
  color: hsl(215 20% 30%);
}
:root:not(.dark) .ob-tab.active {
  background: hsl(var(--primary, 234 89% 60%) / 0.10);
  border-color: hsl(var(--primary, 234 89% 60%) / 0.30);
  color: hsl(var(--primary, 234 89% 60%));
}

/* ── Onboarding container (inside left sidebar, replaces thread list) ─── */
.ob-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Account search ─────────────────────────────────────────────────────── */
.ob-search-wrap {
  position: relative;
}

.ob-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border, 217 25% 22%));
  background: hsl(var(--background, 222 47% 7%));
  color: hsl(var(--foreground, 210 15% 90%));
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.ob-search-input:focus {
  border-color: hsl(var(--primary, 234 89% 74%) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--primary, 234 89% 74%) / 0.12);
}

.ob-search-input::placeholder {
  color: hsl(var(--muted-foreground, 215 15% 45%));
  opacity: 0.6;
}

.ob-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground, 215 15% 45%));
  pointer-events: none;
}

/* ── Account cards ──────────────────────────────────────────────────────── */
.ob-account-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-account-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border, 217 25% 18%));
  background: hsl(var(--card, 222 47% 10%));
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  min-width: 0;
}

.ob-account-card:hover {
  border-color: hsl(var(--primary, 234 89% 74%) / 0.4);
  background: hsl(var(--primary, 234 89% 74%) / 0.06);
}

.ob-account-card.selected {
  border-color: hsl(var(--primary, 234 89% 74%) / 0.6);
  background: hsl(var(--primary, 234 89% 74%) / 0.10);
}

.ob-account-name {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-account-meta {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow: hidden;
}

.ob-account-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

:root:not(.dark) .ob-account-card {
  background: hsl(0 0% 100%);
  border-color: hsl(214 18% 86%);
}
:root:not(.dark) .ob-account-card:hover {
  background: hsl(var(--primary, 234 89% 60%) / 0.04);
  border-color: hsl(var(--primary, 234 89% 60%) / 0.3);
}

/* ── Deal selection ─────────────────────────────────────────────────────── */
.ob-deals-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 2px;
}

.ob-deal-card {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: all 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ob-deal-card:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.05);
}

.ob-deal-name {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.ob-deal-stage {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  padding: 2px 8px;
  border-radius: 10px;
  background: hsl(var(--muted) / 0.5);
}

/* ── Onboarding record cards ────────────────────────────────────────────── */
.ob-record-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid hsl(168 60% 45% / 0.3);
  background: hsl(168 60% 45% / 0.06);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ob-record-card:hover {
  border-color: hsl(168 60% 45% / 0.5);
  background: hsl(168 60% 45% / 0.10);
}

.ob-record-name {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ob-record-status {
  font-size: 11px;
  color: hsl(168 60% 55%);
  margin-top: 2px;
}

/* ── Back button ────────────────────────────────────────────────────────── */
.ob-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ob-back-btn:hover {
  background: hsl(var(--accent) / 0.5);
  color: hsl(var(--foreground));
}

/* ── Create onboarding button ───────────────────────────────────────────── */
.ob-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px dashed hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary));
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.ob-create-btn:hover {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.6);
}

/* ── Start onboarding button ────────────────────────────────────────────── */
.ob-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: hsl(var(--primary, 234 89% 74%));
  color: hsl(var(--primary-foreground, 0 0% 100%));
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.ob-start-btn:hover {
  background: hsl(var(--primary, 234 89% 74%) / 0.85);
}

.ob-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Active onboarding info banner ──────────────────────────────────────── */
.ob-active-banner {
  padding: 10px 12px;
  border-radius: 10px;
  background: hsl(var(--primary) / 0.08);
  border: 1px solid hsl(var(--primary) / 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ob-active-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ob-active-banner-sub {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

/* ── Fields sidebar (right panel) ───────────────────────────────────────── */
#ob-fields-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  background: hsl(var(--card, 222 47% 10%));
  border-left: 1px solid hsl(var(--border, 217 25% 18%));
  z-index: 800;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.25s ease;
  overflow: hidden;
}

#ob-fields-sidebar.hidden {
  transform: translateX(100%);
}

#ob-fields-sidebar.expanded {
  width: 100%;
}

:root:not(.dark) #ob-fields-sidebar {
  background: hsl(0 0% 99%);
  border-color: hsl(214 18% 86%);
}

.ob-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

.ob-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ob-sidebar-close,
.ob-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ob-sidebar-close:hover,
.ob-sidebar-toggle:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

/* ── Sidebar progress bar ───────────────────────────────────────────────── */
.ob-progress-wrap {
  padding: 10px 16px;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

.ob-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: hsl(var(--muted, 217 25% 18%));
  overflow: hidden;
  margin-bottom: 4px;
}

.ob-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: hsl(168 60% 45%);
  transition: width 0.4s ease;
}

.ob-progress-text {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  display: flex;
  justify-content: space-between;
}

/* ── Sidebar field groups ───────────────────────────────────────────────── */
.ob-fields-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.ob-field-group {
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.ob-field-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}

.ob-field-group-header:hover {
  background: hsl(var(--accent) / 0.3);
}

.ob-field-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}

.ob-field-group-count {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  padding: 1px 6px;
  border-radius: 8px;
  background: hsl(var(--muted) / 0.5);
}

.ob-field-group-chevron {
  transition: transform 0.2s ease;
  color: hsl(var(--muted-foreground));
}

.ob-field-group.collapsed .ob-field-group-chevron {
  transform: rotate(-90deg);
}

.ob-field-group.collapsed .ob-field-group-body {
  display: none;
}

.ob-field-group-body {
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Individual fields ──────────────────────────────────────────────────── */
.ob-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ob-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ob-field-label {
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  flex: 1;
}

.ob-field-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ob-field-status.filled {
  background: hsl(168 60% 45%);
}

.ob-field-status.empty {
  background: hsl(var(--muted-foreground) / 0.3);
}

.ob-field-status.pending {
  background: hsl(38 92% 50%);
  animation: ob-pulse 1.5s ease-in-out infinite;
}

@keyframes ob-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ob-field-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border, 217 25% 18%));
  background: hsl(var(--background, 222 47% 7%));
  color: hsl(var(--foreground));
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
  box-sizing: border-box;
}

.ob-field-input:focus {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
}

.ob-field-textarea {
  min-height: 48px;
  resize: vertical;
  max-height: 120px;
}

.ob-field-select {
  appearance: auto;
  cursor: pointer;
}

.ob-field-number {
  font-variant-numeric: tabular-nums;
}

.ob-field-email,
.ob-field-phone,
.ob-field-url {
  font-size: 11px;
}

.ob-field-date {
  font-size: 11px;
  color-scheme: dark;
}

.ob-field-lookup {
  opacity: 0.7;
  cursor: default;
  background: hsl(var(--muted) / 0.3);
}

/* ── Multi-select picklist (checkbox group) ──────────────────────────── */
.ob-field-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ob-multiselect-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ob-multiselect-item:hover {
  border-color: hsl(168 60% 45% / 0.4);
  background: hsl(168 60% 45% / 0.05);
}

.ob-multiselect-item.checked {
  border-color: hsl(168 60% 45% / 0.5);
  background: hsl(168 60% 45% / 0.1);
  color: hsl(168 60% 45%);
}

.ob-multiselect-item input[type="checkbox"] {
  display: none;
}

.ob-multiselect-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ob-multiselect-check svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.15s ease;
}

.ob-multiselect-item.checked .ob-multiselect-check {
  border-color: hsl(168 60% 45%);
  background: hsl(168 60% 45%);
}

.ob-multiselect-item.checked .ob-multiselect-check svg {
  opacity: 1;
  transform: scale(1);
  stroke: white;
}

.ob-multiselect-label {
  line-height: 1.3;
}

/* ── Boolean toggle buttons ──────────────────────────────────────────── */
.ob-field-toggle-wrap {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
}

.ob-toggle-btn {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ob-toggle-btn:first-child {
  border-right: 1px solid hsl(var(--border));
}

.ob-toggle-btn:hover {
  background: hsl(var(--muted) / 0.5);
}

.ob-toggle-btn.active[data-val="true"] {
  background: hsl(145 60% 42% / 0.15);
  color: hsl(145 60% 42%);
  font-weight: 600;
}

.ob-toggle-btn.active[data-val="false"] {
  background: hsl(0 60% 50% / 0.1);
  color: hsl(0 60% 50%);
  font-weight: 600;
}

/* ── JSON Array fields (Custom Metrics etc.) ─────────────────────────── */
.ob-field-json-array {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-json-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.15);
}

.ob-json-row-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ob-json-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ob-json-label {
  font-size: 9px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ob-json-input {
  padding: 4px 8px !important;
  font-size: 11px !important;
  height: auto !important;
}

.ob-json-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid hsl(0 60% 55% / 0.2);
  background: hsl(0 60% 55% / 0.06);
  color: hsl(0 60% 55%);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-top: 16px;
  font-family: inherit;
}

.ob-json-remove:hover {
  background: hsl(0 60% 55% / 0.15);
  border-color: hsl(0 60% 55% / 0.4);
}

.ob-json-add {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px dashed hsl(168 60% 45% / 0.4);
  background: transparent;
  color: hsl(168 60% 45%);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ob-json-add:hover {
  background: hsl(168 60% 45% / 0.08);
  border-color: hsl(168 60% 45% / 0.6);
}

/* ── Radio card group ─────────────────────────────────────────────────── */
.ob-field-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ob-radio-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ob-radio-card:hover {
  border-color: hsl(168 60% 45% / 0.4);
  background: hsl(168 60% 45% / 0.04);
}

.ob-radio-card.active {
  border-color: hsl(168 60% 45% / 0.6);
  background: hsl(168 60% 45% / 0.08);
}

.ob-radio-card input[type="radio"] {
  display: none;
}

.ob-radio-circle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid hsl(var(--border));
  position: relative;
  transition: all 0.15s ease;
}

.ob-radio-card.active .ob-radio-circle {
  border-color: hsl(168 60% 45%);
}

.ob-radio-card.active .ob-radio-circle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(168 60% 45%);
}

.ob-radio-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ob-radio-title {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ob-radio-desc {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  line-height: 1.3;
}

/* ── Enhanced multiselect cards (with descriptions) ──────────────────── */
.ob-multiselect-card {
  flex-direction: row;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 8px;
  width: 100%;
  gap: 6px;
}

.ob-multiselect-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ob-multiselect-desc {
  font-size: 9px;
  color: hsl(var(--muted-foreground));
  line-height: 1.3;
}

.ob-multiselect-card.checked .ob-multiselect-desc {
  color: hsl(168 50% 50%);
}

/* Field just updated by AI — prominent green pulse */
@keyframes ob-field-flash {
  0%   { background: hsl(168 70% 42% / 0.22); border-color: hsl(168 60% 45% / 0.6); box-shadow: 0 0 0 2px hsl(168 60% 45% / 0.2); }
  40%  { background: hsl(168 70% 42% / 0.12); border-color: hsl(168 60% 45% / 0.4); box-shadow: 0 0 0 1px hsl(168 60% 45% / 0.1); }
  100% { background: hsl(var(--background)); border-color: hsl(var(--border)); box-shadow: none; }
}

@keyframes ob-field-row-flash {
  0%   { background: hsl(168 60% 45% / 0.10); }
  40%  { background: hsl(168 60% 45% / 0.05); }
  100% { background: transparent; }
}

.ob-field-input.just-updated,
.ob-field-multiselect.just-updated,
.ob-field-toggle-wrap.just-updated,
.ob-field-json-array.just-updated,
.ob-field-radio-group.just-updated {
  animation: ob-field-flash 3s ease-out;
  border-radius: 8px;
}

.ob-field.just-updated-row {
  animation: ob-field-row-flash 3s ease-out;
  border-radius: 6px;
}

/* Save indicator */
.ob-field-saved {
  font-size: 10px;
  color: hsl(168 60% 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ob-field-saved.visible {
  opacity: 1;
}

/* ── Sidebar save all button ────────────────────────────────────────────── */
.ob-sidebar-footer {
  padding: 10px 16px;
  border-top: 1px solid hsl(var(--border));
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}

.ob-save-all-btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: hsl(168 60% 45%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ob-save-all-btn:hover {
  background: hsl(168 60% 40%);
}

.ob-save-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Save Modal ────────────────────────────────────────────────────────── */
.ob-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.2s ease, backdrop-filter 0.2s ease;
}

.ob-modal-overlay.ob-modal-visible {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.ob-modal {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  width: 380px;
  max-width: 90vw;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ob-modal-visible .ob-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.ob-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.ob-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: hsl(168 60% 45% / 0.12);
  color: hsl(168 60% 45%);
  margin-bottom: 12px;
}

.ob-modal-icon svg {
  width: 20px;
  height: 20px;
}

.ob-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.ob-modal-subtitle {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}

.ob-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ob-modal-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
}

.ob-modal-option:hover {
  border-color: hsl(168 60% 45% / 0.5);
  background: hsl(168 60% 45% / 0.06);
}

.ob-modal-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ob-modal-option:disabled:hover {
  border-color: hsl(var(--border));
  background: hsl(var(--background));
}

.ob-modal-option-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ob-modal-option-save .ob-modal-option-icon {
  background: hsl(210 70% 50% / 0.12);
  color: hsl(210 70% 50%);
}

.ob-modal-option-save:hover .ob-modal-option-icon {
  background: hsl(210 70% 50% / 0.2);
}

.ob-modal-option-complete .ob-modal-option-icon {
  background: hsl(168 60% 45% / 0.12);
  color: hsl(168 60% 45%);
}

.ob-modal-option-complete:hover .ob-modal-option-icon {
  background: hsl(168 60% 45% / 0.2);
}

.ob-modal-option-text {
  flex: 1;
  min-width: 0;
}

.ob-modal-option-title {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ob-modal-option-desc {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
  line-height: 1.4;
}

.ob-modal-option-active {
  border-color: hsl(168 60% 45% / 0.5);
  background: hsl(168 60% 45% / 0.06);
}

.ob-modal-option-success {
  border-color: hsl(145 60% 45% / 0.5);
  background: hsl(145 60% 45% / 0.08);
}

.ob-modal-option-success .ob-modal-option-icon {
  background: hsl(145 60% 45% / 0.15);
  color: hsl(145 60% 45%);
}

.ob-modal-option-success .ob-modal-option-title {
  color: hsl(145 60% 45%);
}

.ob-modal-option-error {
  border-color: hsl(0 70% 55% / 0.5);
  background: hsl(0 70% 55% / 0.08);
}

.ob-modal-option-error .ob-modal-option-icon {
  background: hsl(0 70% 55% / 0.15);
  color: hsl(0 70% 55%);
}

.ob-modal-option-error .ob-modal-option-title {
  color: hsl(0 70% 55%);
}

.ob-modal-cancel {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ob-modal-cancel:hover {
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}

.ob-modal-cancel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Loading / empty states ─────────────────────────────────────────────── */
.ob-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  gap: 8px;
}

.ob-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: cl-spin 0.7s linear infinite;
}

.ob-empty {
  text-align: center;
  padding: 24px 12px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.ob-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.3;
}

/* ── Body class when onboarding mode is active ──────────────────────────── */
body.ob-mode-active main,
body.ob-mode-active [class*="chat-body"] {
  margin-right: 380px;
  transition: margin-right 0.25s ease;
}

/* ── Sidebar inner tabs (Fields / Assets) ───────────────────────────────── */
.ob-sidebar-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid hsl(var(--border, 217 25% 18%));
  flex-shrink: 0;
}

.ob-sidebar-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: hsl(var(--muted-foreground, 215 15% 55%));
  transition: all 0.15s ease;
}

.ob-sidebar-tab:hover {
  background: hsl(var(--accent, 217 30% 14%) / 0.3);
  color: hsl(var(--foreground));
}

.ob-sidebar-tab.active {
  color: hsl(var(--primary, 234 89% 74%));
  border-bottom-color: hsl(var(--primary, 234 89% 74%));
}

:root:not(.dark) .ob-sidebar-tab.active {
  color: hsl(var(--primary, 234 89% 60%));
  border-bottom-color: hsl(var(--primary, 234 89% 60%));
}

/* ── Sidebar panels ─────────────────────────────────────────────────────── */
.ob-sidebar-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Asset groups ───────────────────────────────────────────────────────── */
.ob-asset-group {
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.ob-asset-group.collapsed .ob-field-group-chevron {
  transform: rotate(-90deg);
}

.ob-asset-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
  transition: background 0.12s ease;
}

.ob-asset-header:hover {
  background: hsl(var(--accent) / 0.3);
}

.ob-asset-label {
  flex: 1;
}

.ob-asset-iframe-wrap {
  padding: 0 8px 8px;
}

/* ── Asset folder tabs — pill grid ───────────────────────────────────── */
.ob-asset-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px;
  flex-shrink: 0;
}

.ob-asset-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid hsl(var(--border, 217 25% 18%));
  border-radius: 10px;
  background: hsl(var(--card, 222 47% 10%));
  color: hsl(var(--muted-foreground));
  transition: all 0.18s ease;
  white-space: nowrap;
  text-align: left;
}

.ob-asset-tab .ob-asset-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.ob-asset-tab:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.05);
  color: hsl(var(--foreground));
}

.ob-asset-tab.active {
  border-color: hsl(var(--primary, 234 89% 74%) / 0.5);
  background: hsl(var(--primary, 234 89% 74%) / 0.10);
  color: hsl(var(--primary, 234 89% 74%));
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.15);
}

.ob-asset-tab.active .ob-asset-tab-icon {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

.ob-asset-tab.disabled {
  opacity: 0.30;
  cursor: not-allowed;
  border-style: dashed;
}

:root:not(.dark) .ob-asset-tab {
  background: hsl(0 0% 100%);
  border-color: hsl(214 18% 86%);
}
:root:not(.dark) .ob-asset-tab:hover {
  background: hsl(var(--primary, 234 89% 60%) / 0.04);
}
:root:not(.dark) .ob-asset-tab.active {
  background: hsl(var(--primary, 234 89% 60%) / 0.08);
  border-color: hsl(var(--primary, 234 89% 60%) / 0.4);
  color: hsl(var(--primary, 234 89% 60%));
}

/* ── Asset content area ─────────────────────────────────────────────── */
.ob-asset-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Asset toolbar (link + upload) ──────────────────────────────────── */
.ob-asset-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.ob-asset-open-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.15s ease;
}

.ob-asset-open-link:hover {
  color: hsl(var(--primary));
}

.ob-asset-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ob-asset-upload-btn:hover {
  background: hsl(var(--primary) / 0.15);
  border-color: hsl(var(--primary) / 0.6);
}

/* ── Upload status ──────────────────────────────────────────────────── */
.ob-asset-status-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
  border-bottom: 1px solid hsl(var(--primary) / 0.15);
}

.ob-asset-status-ok {
  padding: 6px 12px;
  font-size: 11px;
  color: hsl(168 60% 50%);
  background: hsl(168 60% 50% / 0.06);
  border-bottom: 1px solid hsl(168 60% 50% / 0.15);
}

.ob-asset-status-err {
  padding: 6px 12px;
  font-size: 11px;
  color: hsl(0 70% 60%);
  background: hsl(0 70% 60% / 0.06);
  border-bottom: 1px solid hsl(0 70% 60% / 0.15);
}

/* ── File list ──────────────────────────────────────────────────────── */
.ob-asset-file-list {
  display: flex;
  flex-direction: column;
}

.ob-asset-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid hsl(var(--border) / 0.3);
  transition: background 0.1s ease;
}

.ob-asset-file-row:hover {
  background: hsl(var(--accent) / 0.2);
}

.ob-asset-file-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ob-asset-file-info {
  flex: 1;
  min-width: 0;
}

.ob-asset-file-name {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-asset-file-meta {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  margin-top: 1px;
}