/* Vega panel styles (override any conflicting sidebar styles) */
.vega-panel,
.app-sidebar.vega-panel,
.vega-panel.app-sidebar {
  position: fixed !important;
  top: 64px !important;
  bottom: 0 !important;
  /* Keep the panel positioned just outside the viewport by default.
     The app's theme-panel handler toggles the 'active' class on the panel
     (data-toggle="theme-panel-expand"), so the open/close animation is
     driven by switching the right offset. */
  /* leave a small tab visible when collapsed so user can pull it out */
  right: -380px !important;
  left: auto !important;
  width: 420px !important;
  max-width: 100% !important;
  z-index: 1030 !important;
  background: linear-gradient(180deg,#0b0f12,#05060a) !important;
  color: #fff !important;
  transition: right 220ms ease !important;
  will-change: right;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible; /* allow the pull-tab to render outside the panel */
}

/* Open states: when the panel receives the active class (app toggles it),
   or legacy body class is present, position it inside the viewport. */
.theme-panel.vega-panel.active,
.vega-panel.theme-panel-active,
body.vega-open .vega-panel,
.app-sidebar-end-toggled .vega-panel,
.vega-panel[aria-hidden="false"] {
  right: 10px !important;
  transform: none !important;
}

/* Hidden state: ensure the panel is positioned fully off-screen to the right.
   Avoid using translate transforms which can interact with other rules;
   rely on a negative right offset so the panel is completely out of view. */
.vega-panel[aria-hidden="true"],
.vega-panel:not(.active) {
  /* keep a small pull-tab visible when collapsed */
  right: -380px !important;
  transform: none !important;
  left: auto !important;
}

/* Ensure the overlay/backdrop doesn't reposition the panel */
.app-sidebar-bg.app-sidebar-end { display: none !important; }
.app-sidebar-mobile-backdrop.app-sidebar-end { display: none !important; }

/* Panel header and content */
.vega-header { background: linear-gradient(90deg,#0f1724,#071129); padding: 20px; }
.vega-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display:flex; align-items:center; justify-content:center; background:#0b1220; color:#9ca3af; }
.vega-avatar img { width:100%; height:100%; object-fit:cover; }
.vega-avatar-fallback { font-size:20px; }
.vega-body { flex: 1 1 auto; overflow-y: auto; padding: 15px; }
.vega-messages { display:flex; flex-direction:column; gap: 10px; }
.vega-msg { padding: 8px; border-radius: 8px; max-width: 90%; }
.vega-msg-user { align-self: flex-end; background: rgba(255,255,255,0.06); color: #fff; }
.vega-msg-vega { align-self: flex-start; background: rgba(255,255,255,0.03); color: #fff; }
.vega-msg-body { white-space: pre-wrap; word-break: break-word; }
.vega-actions { margin-top: 6px; }
.vega-footer { flex: 0 0 auto; padding: 15px; background: rgba(0,0,0,0.6); position: relative; }
.vega-controls { display:flex; gap:8px; align-items:center; }
#vega-model-select { width:100%; }
.vega-close-btn { color: #ddd; }
.vega-settings { margin-top:8px; }

/* Responsive adjustments */
@media (max-width: 576px) {
  .vega-panel { width: 100% !important; left: 0 !important; right: 0 !important; }
}

/* Ensure the panel content uses dark backgrounds and form controls are readable */
/* Use flex layout so the messages area can grow and scroll while the footer stays below it */
.vega-panel .theme-panel-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.vega-panel .vega-header,
.vega-panel .vega-body,
.vega-panel .vega-footer {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Darken form controls inside the panel */
.vega-panel .form-control,
.vega-panel .form-select,
.vega-panel .form-control:focus,
.vega-panel .form-select:focus {
  background: #07101a !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

/* Small pull-tab visibility: ensure the collapse button (tab) is visible when collapsed */
.vega-panel .theme-collapse-btn {
  position: absolute;
  left: -30px;
  top: 30%; /* slightly lower than the theme gear because it's top does not cover the header but the theme panel does*/
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07101a;
  color: #fff;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2100; /* ensure visibility above other page elements */
  pointer-events: auto;
}

/* Make sure the panel does not cover the header */
.vega-panel {
  box-shadow: none !important;
}

/* keep panel collapsed offscreen but leaving the pull-tab visible */
/* Stronger rules to override app CSS and ensure a consistent pull-tab width (60px).
   When any non-Vega theme panel is active we fully hide Vega to avoid overlap. */
body.app-sidebar-end-collapsed .vega-panel,
body:not(.app-sidebar-end-toggled) .vega-panel,
body:not(.vega-open) .vega-panel,
.vega-panel[aria-hidden="true"] {
  right: calc(-420px) !important; /* fully hidden; pull-tab positioned via negative left on the tab */
  left: auto !important;
  transform: none !important;
  /* ensure pull-tab is above other UI elements */
  z-index: 2000 !important;
  overflow: visible !important;
}

/* Hide the panel's content when collapsed (only show the pull-tab).
   This prevents any "peeking" of the panel internals while keeping the tab visible. */
.vega-panel[aria-hidden="true"] .theme-panel-content,
.vega-panel:not(.active) .theme-panel-content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(10px) !important;
}

/* When open, restore visibility of content */
.vega-panel.active .theme-panel-content,
.vega-panel[aria-hidden="false"] .theme-panel-content {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: opacity .22s linear, transform .22s linear;
}

/* If the main theme panel (settings gear) is open, fully hide Vega (no peek). 
   Using sibling selector since ThemePanel is rendered before Vega in layout. */
.theme-panel.active + .vega-panel,
.theme-panel.active ~ .vega-panel,
body .theme-panel.active ~ .vega-panel {
  right: -420px !important; /* fully off-screen */
  left: auto !important;
  transform: none !important;
  /* ensure content hidden */
  overflow: hidden !important;
}

/* Make sure the pull-tab sits above the theme gear and is visible */
.vega-panel .theme-collapse-btn {
  z-index: 2100 !important;
  display: flex !important;
}

/* Vega-specific high-contrast code and select fixes
   - Force readable colors for <pre><code> blocks rendered inside the panel
   - Ensure inline <code> tokens are visible on dark backgrounds
   - Make model select dropdown options use a brighter foreground color
   These rules use !important to reliably override other theme CSS that can
   come from global stylesheets or third-party libs. */
.vega-msg-body pre,
.vega-msg-body pre code {
  background: #07101a !important; /* match panel dark background */
  color: #e6eef8 !important;      /* bright, but not pure white */
  border: 1px solid rgba(255,255,255,0.04) !important;
  padding: 12px !important;
  border-radius: 6px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace !important;
  white-space: pre-wrap !important;
  overflow-x: auto !important;
  line-height: 1.45 !important;
}

/* Inline code tokens */
.vega-msg-body code {
  background: rgba(255,255,255,0.03) !important;
  color: #e6eef8 !important;
  padding: 0.12rem 0.25rem !important;
  border-radius: 4px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace !important;
  font-size: 0.95em !important;
}

/* Model select dropdown and its options: increase contrast */
#vega-model-select,
#vega-model-select option,
.vega-panel .form-select#vega-model-select option {
  color: #e6eef8 !important;
  background-color: #07101a !important;
}

/* Hover / selected states for options when the browser allows styling */
#vega-model-select option:hover,
#vega-model-select option:checked,
.vega-panel .form-select#vega-model-select option:hover {
  color: #07101a !important;
  background-color: #9fc5ff !important;
}