:root {
  --wy-theme-color: #627fe6;
  
  /* Bootstrap Primary Color Override */
  --bs-primary: var(--wy-theme-color);
  --bs-primary-rgb: 98, 127, 230;
  --bs-primary-bg-subtle: rgba(98, 127, 230, 0.125);
  --bs-primary-border-subtle: rgba(98, 127, 230, 0.25);
  --bs-primary-text-emphasis: #3d4f8c;
  
  /* Dark theme specific overrides */
  --bs-primary-text-emphasis-dark: #9bb0f7;

  --wy-border-radius: 8px;
}

/* Dark theme primary color overrides */
[data-bs-theme="dark"] {
  --bs-primary:var(--wy-theme-color);
  --bs-primary-rgb: 98, 127, 230;
  --bs-primary-bg-subtle: rgba(98, 127, 230, 0.125);
  --bs-primary-border-subtle: rgba(98, 127, 230, 0.25);
  --bs-primary-text-emphasis: #9bb0f7;
}

/* Split prompt indicators */
.split-prompt-badge {
  background: var(--wy-theme-color);
  color: white;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: 500;
}

.prompt-item.split-prompt {
  border-left: 3px solid var(--wy-theme-color);
}

[data-bs-theme="dark"] .split-prompt-badge {
  background: var(--wy-theme-color);
  color: white;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: var(--wy-theme-color);
}

.w-100 { width:100%;min-width: 0; max-width: 100%; } 
.h-100 { height:100%; min-height: 0; max-height: 100%; }

.bg-grainy:before {
  content: "";
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  opacity: 0.2;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hero-bg {
    background-color:hsla(206,50%,31%,1);
}

.hero-l1 {
    background-image:
    radial-gradient(circle at 0% 100%, hsla(39,100%,69%,1) 0px, transparent 50%);
    animation:gradient2 15s ease-in-out reverse infinite;
    background-size:120%;
}

.hero-l3 {
    background-image:
    radial-gradient(circle at 100% 0%, hsla(94,100%,61%,0.66) 0px, transparent 50%);
    animation:gradient 25s ease-in-out reverse infinite;
    background-size:130%;
}

.hero-l2 {
    background-image:
    radial-gradient(circle at 50% 0%, hsla(207,100%,65%,1) 0px, transparent 50%);
    animation:gradient 20s ease-in-out reverse infinite;
    background-size:150%;
}

.hero-l4 {
    background-image:
    radial-gradient(circle at 0% 50%, hsl(227, 72.50%, 64.30%) 0px, transparent 50%);
    animation:gradient2 10s ease-in-out reverse infinite;
    background-size:140%;
}

.hero-bg.bg-grainy:before {
  opacity:0.4!important;
}

@keyframes gradient {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

@keyframes gradient2 {
  0% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}

/* Sidebar Styling */
#sidebar {
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

/* Sidebar collapse animations */
.sidebar-collapsible {
    transition: opacity 0.1s ease, visibility 0.1s ease;
}



.sidebar-collapsed .sidebar-collapsible {
    opacity: 0;
    visibility: hidden;
}

/* Hide weavy logo when collapsed */
.sidebar-collapsed #weavy-logo {
    opacity: 0;
    visibility: hidden;
}

/* Icon counter-transform animations */
#weavy-icon,
#weavy-logo,
.sidebar-footer .bg-primary,
.sidebar-header .btn-link {
    transition: transform 0.3s ease, opacity 0.1s ease, visibility 0.1s ease;
    transform: translateX(0); /* Default position */
}

/* Keep weavy icon and user avatar visible when collapsed */
.sidebar-collapsed #weavy-icon,
.sidebar-collapsed .sidebar-footer .bg-primary {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(236px); /* Counter-transform to stay in place */
}

/* Keep expand button visible when collapsed */
.sidebar-collapsed .btn-link {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(236px); /* Counter-transform to stay in place */
}

/* Special handling for user profile to keep avatar visible */
.sidebar-collapsed .sidebar-footer {
    opacity: 1 !important;
    visibility: visible !important;
    border-top: none !important;
}

.sidebar-footer .flex-grow-1 {
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

.sidebar-collapsed .sidebar-footer .flex-grow-1 {
    opacity: 0;
    visibility: hidden;
}

.sidebar-menu-item {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sidebar-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

.chat-item {
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.chat-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.chat-item.selected {
    background-color: rgba(13, 110, 253, 0.3);
    border-color: #0d6efd;
}

.chat-item:hover .fas.fa-trash {
    opacity: 1;
}

.chat-item .fas.fa-trash {
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.chat-item .fas.fa-trash:hover {
    color: #dc3545 !important;
}

.sidebar-header input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.sidebar-header input::placeholder {
    color: #6c757d;
}

/* Custom scrollbar for sidebar content */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

#weavy-icon svg {
    height: 32px;
}

#weavy-logo svg {
    height: 20px;
}

#weavy-icon .st0, #weavy-logo .st0 {
    fill: url(#linear-gradient4);
  }

  #weavy-icon .st0, #weavy-logo .st0, #weavy-icon .st1, #weavy-logo .st1, #weavy-icon .st2, #weavy-logo .st2, #weavy-icon .st3, #weavy-logo .st3, #weavy-icon .st4, #weavy-logo .st4, #weavy-icon .st5, #weavy-logo .st5 {
    isolation: isolate;
  }

  #weavy-icon .st0, #weavy-logo .st0, #weavy-icon .st1, #weavy-logo .st1, #weavy-icon .st5, #weavy-logo .st5 {
    opacity: .6;
  }

  #weavy-icon .st1, #weavy-logo .st1 {
    fill: url(#linear-gradient5);
  }

  #weavy-icon .st6, #weavy-logo .st6 {
    fill: #fff;
  }

  #weavy-icon .st2, #weavy-logo .st2 {
    fill: url(#linear-gradient2);
  }

  #weavy-icon .st2, #weavy-logo .st2, #weavy-icon .st4, #weavy-logo .st4 {
    opacity: .4;
  }

  #weavy-icon .st3, #weavy-logo .st3 {
    fill: url(#linear-gradient1);
    opacity: .7;
  }

  #weavy-icon .st4, #weavy-logo .st4 {
    fill: url(#linear-gradient);
  }

  #weavy-icon .st5, #weavy-logo .st5 {
    fill: url(#linear-gradient3);
  }

  h1, .btn, h2, h3, h4, h5, h6  {
    font-family: "Geist", serif;
}

h1  {
    letter-spacing: -1px;
}


.btn-offset {
    outline-offset: 3px;
    outline:1px solid rgba(255, 255, 255, 0.25);
    transition:0.25s;
}

.btn-offset:hover {
    outline:1px solid rgba(255, 255, 255, 0.6);
}

.btn-light {
    color: #333 ;
}

.btn-light:hover {
    color: #333 ;
    background:#fff;
    border-color:#fff;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #5269b8;
    --bs-btn-hover-border-color: #4f64ad;
}

#prompt-list div, #agent-list div, #weavy-config div {
    opacity: 0.75;
    cursor: pointer;
    transition: all 0.2s ease;
}

#prompt-list div:hover, #agent-list div:hover, #weavy-config div:hover {
    opacity: 1;
}

#prompt-list div.active, #agent-list div.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    opacity: 1 !important;
}

#prompt-list div.active:hover, #agent-list div.active:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.pointer {
    cursor: pointer;
}

.header-layout {
  min-height:56px;
  height:56px;
}

/* Environment Modal Styles */
.environment-option {
    padding: 1rem;
    border: 1px solid #495057;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #212529;
}

.environment-option:hover {
    background-color: #343a40;
    border-color: #6c757d;
    transform: translateY(-1px);
}

.environment-option:last-child {
    margin-bottom: 0;
}

/* Custom Responsive Viewport Height Utilities */
/* Since Bootstrap doesn't include responsive variants for vh-100, we'll add them */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .vh-sm-100 { height: 100vh !important; }
  .min-vh-sm-100 { min-height: 100vh !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .vh-md-100 { height: 100vh !important; }
  .min-vh-md-100 { min-height: 100vh !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .vh-lg-100 { height: 100vh !important; }
  .min-vh-lg-100 { min-height: 100vh !important; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .vh-xl-100 { height: 100vh !important; }
  .min-vh-xl-100 { min-height: 100vh !important; }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .vh-xxl-100 { height: 100vh !important; }
  .min-vh-xxl-100 { min-height: 100vh !important; }
}


.body-padding {
  padding-left:0px !important
}

@media (min-width: 992px) {
  .body-padding {
    padding-left:90px !important
  }
}


/* @media (max-width: 768px) {
  #resources-container {
    position:absolute;
    transition:all 0.2s ease;
    z-index:10;
    height:58px !important;
    overflow:hidden;
    
  }

  #resources-container .header-layout {
    border:0px !important;
  }

  #resources-container.expanded {
    z-index:1000;
    background-color: #000;
    height:calc(100% - 8px) !important;
  }

  #resources-toggle {
    transition:all 0.2s ease;
  }

  #resources-container.expanded #resources-toggle {
    transform:rotate(180deg);
  }

  #content-container {
    padding-top:58px;
    position:relative;
  }
} */

/* Chat History Offcanvas Styling */
#chatHistoryOffcanvas {
    width: 300px;
}

#chatHistoryOffcanvas .offcanvas-body {
    padding: 0;
}

#chatHistoryOffcanvas .conversation-item {
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

#chatHistoryOffcanvas .conversation-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#chatHistoryOffcanvas .sidebar-content {
    background-color: transparent;
    border-radius: 0;
}

.mobile-nav .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3);
}