/* BuildingOS Dev — Combined Theme + Split Layout CSS */

/* ========== Font override ========== */
:root {
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* ========== SPARC Dark ========== */
.dark {
  --background: 180 4% 5% !important;
  --foreground: 0 0% 93% !important;
  --card: 180 3% 12% !important;
  --card-foreground: 0 0% 93% !important;
  --popover: 180 3% 12% !important;
  --popover-foreground: 0 0% 93% !important;
  --primary: 202 95% 46% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 180 3% 14% !important;
  --secondary-foreground: 0 0% 93% !important;
  --muted: 180 3% 18% !important;
  --muted-foreground: 0 0% 53% !important;
  --accent: 180 3% 18% !important;
  --accent-foreground: 0 0% 93% !important;
  --destructive: 0 84% 60% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 229 16% 20% !important;
  --input: 180 4% 11% !important;
  --ring: 202 95% 46% !important;
  --sidebar-background: 180 6% 7% !important;
  --sidebar-foreground: 0 0% 93% !important;
  --sidebar-primary: 202 95% 46% !important;
  --sidebar-primary-foreground: 0 0% 100% !important;
  --sidebar-accent: 180 4% 13% !important;
  --sidebar-accent-foreground: 0 0% 93% !important;
  --sidebar-border: 229 16% 20% !important;
  --sidebar-ring: 202 95% 46% !important;
}

/* ========== SPARC Light ========== */
:root:not(.dark) {
  --background: 0 0% 100% !important;
  --foreground: 0 0% 10% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 0 0% 10% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 0 0% 10% !important;
  --primary: 202 95% 46% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 210 20% 96% !important;
  --secondary-foreground: 0 0% 10% !important;
  --muted: 0 0% 93% !important;
  --muted-foreground: 0 0% 40% !important;
  --accent: 0 0% 95% !important;
  --accent-foreground: 0 0% 10% !important;
  --destructive: 0 84% 60% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 0 0% 88% !important;
  --input: 0 0% 92% !important;
  --ring: 202 95% 46% !important;
  --sidebar-background: 0 0% 98% !important;
  --sidebar-foreground: 0 0% 20% !important;
  --sidebar-primary: 202 95% 46% !important;
  --sidebar-primary-foreground: 0 0% 100% !important;
  --sidebar-accent: 0 0% 95% !important;
  --sidebar-accent-foreground: 0 0% 20% !important;
  --sidebar-border: 0 0% 90% !important;
  --sidebar-ring: 202 95% 46% !important;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--card));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* ========== Logo sizing ========== */
img.logo {
  max-height: 32px !important;
  width: auto !important;
  object-fit: contain;
}

/* ========== Hide Chainlit's built-in dark/light toggle ========== */
#header-theme-toggle,
button[id*="theme"],
[data-testid="theme-toggle"] {
  display: none !important;
}

/* ========== Theme switcher — bottom-left, clear of viewer panel ========== */
#bos-theme-switcher {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
}

#bos-theme-switcher label {
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#bos-theme-select {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

#bos-theme-select:hover,
#bos-theme-select:focus {
  border-color: hsl(var(--primary));
}

/* ========== PDF export button ========== */
#buildos-pdf-export {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 6px !important;
}

/* =============================================
   DEV LAYOUT — Split panel (chat left, viewer right)
   ============================================= */

#root {
  display: flex !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden;
}

#root > div:first-child {
  width: 50% !important;
  max-width: 50% !important;
  flex-shrink: 0;
  overflow-y: auto;
}

#buildos-viewer-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
  height: 100vh;
  z-index: 900;
  background: hsl(var(--background));
  border-left: 2px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
}

#buildos-viewer-panel iframe {
  width: 100%;
  border: none;
  flex: 1;
}

#buildos-panel-tabs {
  display: flex;
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

#buildos-panel-tabs .tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
}

#buildos-panel-tabs .tab:hover {
  color: hsl(var(--foreground) / 0.7);
}

#buildos-panel-tabs .tab.active {
  color: hsl(var(--foreground));
  border-bottom-color: hsl(var(--primary));
}

/* Hide bridge messages */
.cl-message[data-author="buildingviz"],
.step[data-author="buildingviz"],
.cl-message[data-author="graphupdate"],
.step[data-author="graphupdate"] {
  display: none !important;
}