/* 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;
}

/* ========== User avatar button — move to bottom-left ========== */
#user-nav-button {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 10001 !important;
}

/* Dialogs — center on full viewport.
   JS marks these portals with [data-buildos-modal] and expands them to 100vw.
   User menu portals get [data-buildos-user-menu] instead — positioned above button.
   Note: [role="menu"] is NOT centered — menus must appear near their trigger. */
[data-buildos-modal] [role="dialog"],
[data-buildos-modal] [role="alertdialog"] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  bottom: auto !important;
  right: auto !important;
}

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

/* ========== Hide Readme/Anleitung button in header ========== */
[data-testid="readme-button"],
button[id*="readme"],
a[id*="readme"] {
  display: none !important;
}

/* ========== Theme switcher — hidden (now in user menu) ========== */
#bos-theme-switcher {
  display: none !important;
}

/* ========== User menu — popover above user button ========== */
[data-buildos-user-menu] [role="menu"] {
  position: fixed !important;
  bottom: 64px !important;
  left: 16px !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  min-width: 200px !important;
}

.bos-menu-themes {
  padding: 4px 0;
}

.bos-menu-theme-label {
  padding: 6px 8px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-sans);
  font-weight: 600;
}

.bos-menu-theme-item {
  padding: 6px 8px;
  font-size: 14px;
  cursor: pointer;
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  margin: 0 4px;
  transition: background 0.15s;
}

.bos-menu-theme-item:hover {
  background: hsl(var(--accent));
}

.bos-menu-theme-item .bos-theme-check {
  width: 16px;
  text-align: center;
  color: hsl(var(--primary));
  font-size: 13px;
  flex-shrink: 0;
}

.bos-menu-separator {
  height: 1px;
  margin: 4px 0;
  background: hsl(var(--border));
}

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

/* ── Fullscreen button (chat panel) ── */
#buildos-chat-fullscreen {
  position: fixed;
  top: 10px;
  z-index: 1100;
  width: 32px;
  height: 32px;
  background: hsl(var(--card) / 0.9);
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

#buildos-chat-fullscreen:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--primary));
}

#buildos-chat-fullscreen svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Debug button (floating, opens standalone popup window) */
#buildos-debug-btn {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: hsl(0 84% 60% / 0.15);
  border: 1px solid hsl(0 84% 60% / 0.5);
  border-radius: 6px;
  color: #f85149;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  letter-spacing: 0.5px;
}

#buildos-debug-btn:hover {
  background: hsl(0 84% 60% / 0.25);
  border-color: #f85149;
  transform: scale(1.03);
}

#buildos-debug-btn svg {
  flex-shrink: 0;
}

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

/* Split layout only when viewer panel is present (not on login page).
   Actual width is set dynamically by applySplit() in JS via CSS variable. */
body:has(#buildos-viewer-panel) #root {
  width: var(--chat-width, 50vw) !important;
  max-width: var(--chat-width, 50vw) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar rail (collapsed icons: toggle, search, new-chat) — pin to top */
[data-sidebar="rail"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
}

/* Auto-collapse sidebar when chat panel is narrow */
#root[data-chat-compact] [data-sidebar] {
  --sidebar-width: 0px !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#root[data-chat-compact] [data-sidebar] > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Vertical divider between chat and viewer panel */
#buildos-vertical-divider {
  position: fixed;
  top: 0;
  width: 5px;
  height: 100vh;
  z-index: 1000;
  background: hsl(var(--border));
  cursor: col-resize;
  transition: background 0.2s;
}

#buildos-vertical-divider:hover,
#buildos-vertical-divider:active {
  background: hsl(var(--primary));
}

#buildos-viewer-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: 900;
  background: hsl(var(--background));
  display: flex;
  flex-direction: column;
}

/* Top panel — tabbed area (3D Viewer / Dashboard) */
#buildos-top-panel {
  height: 40%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#buildos-top-panel iframe {
  width: 100%;
  border: none;
  flex: 1;
  min-height: 0;
}

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

#buildos-top-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-top-tabs .tab:hover {
  color: hsl(var(--foreground) / 0.7);
}

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

/* Resize divider between viewer and bottom panel */
#buildos-panel-divider {
  height: 5px;
  background: hsl(var(--border));
  cursor: row-resize;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s;
}

#buildos-panel-divider:hover,
#buildos-panel-divider:active {
  background: hsl(var(--primary));
}

/* Bottom panel — tabbed area */
#buildos-bottom-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#buildos-bottom-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));
}

/* ── LP Tracker (above tabs, always visible) ── */
#buildos-lp-tracker {
  padding: 8px 12px 10px;
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

#buildos-lp-tracker .lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#buildos-lp-tracker .lp-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  margin-left: 10px;
  font-family: var(--font-sans);
}

#buildos-lp-tracker .lp-current {
  font-size: 9px;
  color: hsl(var(--primary));
  font-weight: 600;
  font-family: var(--font-sans);
}

#buildos-lp-tracker .lp-phases {
  display: flex;
  align-items: flex-start;
}

#buildos-lp-tracker .lp-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

#buildos-lp-tracker .lp-node-row {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  height: 24px;
}

#buildos-lp-tracker .lp-phase:not(:first-child) .lp-node-row::before {
  content: '';
  position: absolute;
  right: 50%;
  left: -50%;
  top: 50%;
  height: 2px;
  background: hsl(var(--border));
  transform: translateY(-50%);
  z-index: 0;
}

#buildos-lp-tracker .lp-phase.done:not(:first-child) .lp-node-row::before {
  background: hsl(var(--primary));
}

#buildos-lp-tracker .lp-phase.active:not(:first-child) .lp-node-row::before {
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.3));
}

#buildos-lp-tracker .lp-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a1d1d;
  border: 2px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  font-family: var(--font-sans);
}

#buildos-lp-tracker .lp-phase.done .lp-node {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 0 6px hsl(var(--primary) / 0.3);
  font-size: 12px;
}

#buildos-lp-tracker .lp-phase.active .lp-node {
  background: #0d0e0e;
  border-color: hsl(var(--primary));
  border-width: 2.5px;
  color: hsl(var(--primary));
  font-size: 12px;
  box-shadow: 0 0 10px hsl(var(--primary) / 0.3);
  animation: lpPulseMain 2s ease-in-out infinite;
}

@keyframes lpPulseMain {
  0%, 100% { box-shadow: 0 0 6px hsl(var(--primary) / 0.2); }
  50% { box-shadow: 0 0 14px hsl(var(--primary) / 0.5); }
}

#buildos-lp-tracker .lp-label {
  font-size: 8px;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-top: 4px;
  line-height: 1.2;
  max-width: 70px;
  font-family: var(--font-sans);
}

#buildos-lp-tracker .lp-phase.done .lp-label { color: hsl(var(--foreground) / 0.5); }
#buildos-lp-tracker .lp-phase.active .lp-label { color: hsl(var(--primary)); font-weight: 600; }

#buildos-lp-tracker .lp-num {
  font-size: 8px;
  color: hsl(var(--muted-foreground) / 0.7);
  text-align: center;
  margin-top: 1px;
  font-family: var(--font-sans);
  font-weight: 500;
}

#buildos-lp-tracker .lp-phase.done .lp-num { color: hsl(var(--foreground) / 0.4); }
#buildos-lp-tracker .lp-phase.active .lp-num { color: hsl(var(--primary) / 0.7); font-weight: 600; }

/* ========== Project badge (2-line header below navbar in chat panel) ========== */
#buildos-project-badge {
  display: none; /* hidden until a building arrives */
  flex-direction: column;
  gap: 2px;
  padding: 10px 20px;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border) / 0.4);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 10;
  transition: padding-left 0.15s ease;
}

/* Each line: ID + label */
.buildos-badge-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 1.2em;
}

/* Monospace ID labels */
.buildos-badge-id {
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  font-size: 10px;
  color: hsl(var(--muted-foreground) / 0.6);
  letter-spacing: -0.3px;
  flex-shrink: 0;
  user-select: all;
}

/* Line 1: Project name — large, editable heading */
.buildos-badge-name {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: text;
  border-radius: 4px;
  padding: 0 4px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s;
  line-height: 1.3;
}

.buildos-badge-name:hover {
  background: hsl(var(--muted) / 0.4);
}

.buildos-badge-name:focus {
  background: hsl(var(--muted) / 0.6);
  outline: 1px solid hsl(var(--primary) / 0.3);
}

/* Line 2: Building type — secondary, smaller */
.buildos-badge-line-secondary {
  gap: 10px;
}

#buildos-badge-bldg-type {
  font-family: var(--font-sans);
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

/* Fallback: fixed position overlay when no navbar is found */
#buildos-project-badge.buildos-badge-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  width: var(--chat-width, 50vw);
}

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

/* ========== Dopamine Loop Micro-Animations ========== */

/* Room/Floor added → scale-in animation */
@keyframes bos-scale-in {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Slide in from left (floor bars, list items) */
@keyframes bos-slide-in-left {
  0% { transform: translateX(-20px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Success pulse (compliance pass, milestone complete) */
@keyframes bos-success-pulse {
  0% { box-shadow: 0 0 0 0 hsl(142 71% 45% / 0.4); }
  50% { box-shadow: 0 0 12px 4px hsl(142 71% 45% / 0.2); }
  100% { box-shadow: 0 0 0 0 hsl(142 71% 45% / 0); }
}

/* Agent switch bounce */
@keyframes bos-bounce-in {
  0% { transform: translateY(-10px) scale(0.95); opacity: 0; }
  50% { transform: translateY(3px) scale(1.02); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Progress fill animation */
@keyframes bos-fill-right {
  0% { width: 0; }
  100% { width: var(--fill-target, 100%); }
}

/* Milestone node completion (LP stepper) */
@keyframes bos-milestone-complete {
  0% { transform: scale(1); background: hsl(var(--primary)); }
  30% { transform: scale(1.3); background: hsl(142 71% 45%); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); background: hsl(142 71% 45%); }
}

/* Notification badge pop */
@keyframes bos-badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Subtle shimmer for "next step" hints */
@keyframes bos-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Utility classes */
.bos-anim-scale-in {
  animation: bos-scale-in 300ms ease-out forwards;
}

.bos-anim-slide-left {
  animation: bos-slide-in-left 200ms ease-out forwards;
}

.bos-anim-success {
  animation: bos-success-pulse 600ms ease-out;
}

.bos-anim-bounce {
  animation: bos-bounce-in 400ms ease-out forwards;
}

.bos-anim-milestone {
  animation: bos-milestone-complete 500ms ease-out forwards;
}

.bos-anim-badge-pop {
  animation: bos-badge-pop 300ms ease-out forwards;
}

/* Next-step hint shimmer */
.bos-hint-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsl(var(--primary) / 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: bos-shimmer 2s ease-in-out infinite;
  border-radius: 6px;
  padding: 8px 12px;
}

/* Progress completeness ring (for inline use) */
.bos-progress-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bos-progress-ring svg circle {
  transition: stroke-dashoffset 600ms ease-out;
}

.bos-progress-ring .bos-progress-text {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* ========== Quick-Reply Action Buttons (pill style, vertical list) ========== */
/* Chainlit renders cl.Action buttons as ghost buttons inside a flex container.
   We restyle them as rounded pill buttons in a vertical stack, left-aligned. */

/* Force the action button container to be a vertical flex column */
.step div:has(> button[id]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.step button[id]:not([class*="clipboard"]):not([class*="thumbs"]):not([class*="copy"]) {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
.step button[id]:not([class*="clipboard"]):not([class*="thumbs"]):not([class*="copy"]):hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--accent-foreground)) !important;
}