client/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 6%;
    --foreground: 0 0% 100%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 100%;
    --primary: 187.9412 85.7143% 53.3333%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 14%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 65%;
    --accent: 0 0% 12%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 18%;
    --input: 0 0% 16%;
    --ring: 187.9412 85.7143% 53.3333%;
    --input-surface: #1A1A1A;
    --input-surface-focus: #1E1E1E;
    --input-border: #2A2A2A;
    --input-border-focus: #3A3A3A;
    --placeholder-color: #6B6B6B;
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.18);
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .light {
    /* ChatGPT-Style Light Mode with Cyan Primary */
    --background: 0 0% 100%;
    --foreground: 220 14% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 14% 10%;
    --popover: 210 20% 97%;
    --popover-foreground: 220 14% 10%;
    /* Cyan primary - same hue as dark mode */
    --primary: 187.9412 85.7143% 43%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 220 14% 10%;
    --muted: 210 20% 96%;
    --muted-foreground: 220 9% 40%;
    --accent: 210 20% 93%;
    --accent-foreground: 220 14% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 88%;
    --input: 210 20% 97%;
    --ring: 187.9412 85.7143% 43%;
    --input-surface: #FFFFFF;
    --input-surface-focus: #F8FAFC;
    --input-border: #E5E7EB;
    --input-border-focus: #22D3EE;
    --placeholder-color: #9CA3AF;
    --scrollbar-thumb: rgba(0, 0, 0, 0.12);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);

    /* Light mode specific colors for components */
    --sidebar-bg: 210 20% 97%;
    --sidebar-border: 220 13% 90%;
    --chat-user-bubble: 187.9412 85.7143% 43%;
    --chat-user-text: 0 0% 100%;
    --message-text: 220 14% 15%;
    --heading-text: 220 14% 10%;
    --link-color: 187.9412 85.7143% 35%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html,
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @apply bg-background text-foreground antialiased;
  }
}

@layer utilities {
  .glass {
    @apply bg-background/75 backdrop-blur-xl border border-border;
  }

  .glass-light {
    @apply bg-background/75 backdrop-blur-xl border border-border;
  }
}

/* ── Professional Micro-Interactions ── */

/* Subtle button press-down on click */
button:not(:disabled),
[role="button"]:not(:disabled) {
  transition: transform 100ms ease, opacity 100ms ease,
    background-color 150ms ease, color 150ms ease,
    border-color 150ms ease, box-shadow 150ms ease;
}

button:active:not(:disabled),
[role="button"]:active:not(:disabled) {
  transform: scale(0.97);
}

/* Smooth streaming caret (replaces harsh animate-pulse) */
@keyframes streamCaret {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

.stream-caret {
  animation: streamCaret 0.8s ease-in-out infinite;
}

/* Performance: content-visibility for off-screen messages */
.message-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* GPU-accelerated sidebar transition */
aside {
  will-change: transform;
}

/* Stagger animation utility */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-item {
  animation: slideUp 0.3s ease-out both;
}

/* Refined Input Container - Floating, Calm, Precise */
.refined-input-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
}

.refined-input-container>div {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.refined-input-container>div:focus-within {
  background: rgba(30, 30, 30, 0.7);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Light mode refinements */
.light .refined-input-container>div {
  background: rgba(245, 245, 245, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.light .refined-input-container>div:focus-within {
  background: rgba(240, 240, 240, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Floating Input Bar - Gemini Style */
.floating-input-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #2F2F2F;
  border-radius: 28px;
  padding: 4px 8px 4px 4px;
  min-height: 48px;
  max-width: 100%;
  transition: all 150ms ease;
}

.floating-input-bar:focus-within {
  background: #363636;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.light .floating-input-bar {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.light .floating-input-bar:focus-within {
  background: #FFFFFF;
  border-color: #22D3EE;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
}


/* Custom Scrollbar */
::selection {
  background: rgba(34, 211, 238, 0.18);
  color: hsl(var(--foreground));
}

::-moz-selection {
  background: rgba(34, 211, 238, 0.18);
  color: hsl(var(--foreground));
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 9999px;
  transition: background-color 150ms ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.custom-scrollbar.scrolling::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.custom-scrollbar.scrolling::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Markdown Content Styling */
.markdown-content {
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.markdown-content>*:first-child {
  margin-top: 0;
}

.markdown-content>*:last-child {
  margin-bottom: 0;
}

.markdown-content p {
  margin: 0.6em 0;
}

/* Ordered list counter styling */
.markdown-content ol {
  counter-reset: list-item;
}

.markdown-content ol>li {
  counter-increment: list-item;
}

.markdown-content ol>li>span:first-child {
  content: counter(list-item) ".";
}

/* Code block syntax highlighting enhancement */
.markdown-content pre {
  max-width: 100%;
  overflow-x: auto;
}

.markdown-content pre code {
  display: block;
  padding: 0;
  background: transparent;
  color: #E2E8F0;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* Table row striping */
.markdown-content table {
  font-size: 14px;
}

.markdown-content table tbody tr:nth-child(even) {
  background-color: hsla(var(--foreground) / 0.02);
}

/* Smooth transitions for interactive elements */
.markdown-content a,
.markdown-content button,
.markdown-content tr {
  transition: all 0.15s ease;
}

/* Image styling in markdown */
.markdown-content img {
  @apply rounded-lg my-4 max-w-full h-auto border border-border;
}

/* Definition list styling */
.markdown-content dl {
  @apply my-4;
}

.markdown-content dt {
  @apply font-semibold text-foreground mt-2;
}

.markdown-content dd {
  @apply ml-4 text-foreground/80;
}

/* Text Fade-in Animation */
@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-text>* {
  animation: fadeInText 0.3s ease-out forwards;
}

.fade-in-text p,
.fade-in-text li,
.fade-in-text table {
  animation: fadeInText 0.3s ease-out forwards;
}

@keyframes thinkingDotPulse {

  0%,
  80%,
  100% {
    opacity: 0.25;
  }

  40% {
    opacity: 1;
  }
}

.thinking-dot {
  animation: thinkingDotPulse 1.4s infinite;
}

/* ── Activity Panel (Gemini/Perplexity-style) ── */
.activity-panel {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--foreground) / 0.03);
  overflow: hidden;
}

.activity-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 150ms ease;
  border: none;
  background: none;
  text-align: left;
}

.activity-panel-header:hover {
  background: hsl(var(--foreground) / 0.04);
}

.activity-panel-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px 10px;
}

.activity-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}

.activity-step-icon {
  flex-shrink: 0;
  font-size: 12px;
  width: 18px;
  text-align: center;
}

.activity-step-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 4px 26px;
}

.activity-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  max-width: 220px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--foreground) / 0.05);
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}

.activity-source-chip:hover {
  background: hsl(var(--foreground) / 0.08);
  border-color: hsl(var(--foreground) / 0.15);
  color: hsl(var(--foreground) / 0.9);
}

/* ── Selection Toolbar (Labs AI Edit) ── */
.selection-toolbar-sheet {
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
}

.selection-toolbar-popover {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px hsl(var(--border));
  min-width: 320px;
  max-width: 420px;
}

.selection-toolbar-inner {
  padding: 12px 16px 14px;
}

.chat-input {
  font-family: inherit;
}

.chat-input::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
  transition: opacity 180ms ease-out;
}

.chat-input:focus::placeholder {
  opacity: 0.4;
}

/* Mobile optimizations */
@media (max-width: 768px) {

  /* Fix mobile viewport height issues - account for browser UI */
  html,
  body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  #root {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Use JS-set custom property as ultimate fallback */
  html.has-app-height,
  html.has-app-height body {
    height: var(--app-height, 100dvh);
  }

  html.has-app-height #root {
    height: var(--app-height, 100dvh);
  }

  /* Safe area padding for devices with notches/navigation bars */
  .floating-input-bar {
    position: relative;
    z-index: 10;
  }

  /* Ensure main content doesn't overflow */
  main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .markdown-content pre {
    font-size: 12px;
    padding: 12px;
    max-width: 100%;
    overflow-x: auto;
  }

  .markdown-content h1 {
    font-size: 1.25rem;
  }

  .markdown-content h2 {
    font-size: 1.125rem;
  }

  .markdown-content h3 {
    font-size: 1rem;
  }

  .markdown-content table {
    font-size: 12px;
    max-width: 100%;
    table-layout: auto;
    width: 100%;
  }

  .markdown-content table th,
  .markdown-content table td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  .refined-input-container {
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }

  /* Fix text overflow/cutting issues */
  .chat-input,
  textarea,
  input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Prevent horizontal scroll */
  .markdown-content {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .markdown-content p,
  .markdown-content li {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ========================================
   LIGHT MODE COMPREHENSIVE OVERRIDES
   ChatGPT-Style Light Theme with Cyan Accents
   ======================================== */

/* Sidebar styling for light mode */
.light aside,
.light [class*="bg-popover"] {
  background-color: hsl(210, 20%, 97%) !important;
  border-color: hsl(220, 13%, 90%) !important;
}

/* Light mode sidebar border */
.light .border-\[rgba\(255\,255\,255\,0\.04\)\] {
  border-color: hsl(220, 13%, 90%) !important;
}

/* Chat area and cards in light mode */
.light .bg-card,
.light [class*="bg-card"] {
  background-color: #FFFFFF !important;
}

/* User message bubble - cyan themed */
.light .bg-\[\#2F2F2F\] {
  background-color: #0891B2 !important;
  color: #FFFFFF !important;
}

/* History item selected state */
.light .bg-\[\#202338\] {
  background-color: rgba(8, 145, 178, 0.12) !important;
}

/* History item hover state */
.light .hover\:bg-\[\#1A1D29\]:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Cyan accent indicator line */
.light .bg-\[\#22D3EE\] {
  background-color: #0891B2 !important;
}

/* Text colors - ensure proper contrast */
.light .text-white {
  color: hsl(220, 14%, 10%) !important;
}

.light .text-white\/90,
.light .text-white\/95,
.light .text-white\/80 {
  color: hsl(220, 14%, 15%) !important;
}

/* Specific overrides for inputs where white text is needed on colored backgrounds */
.light .bg-\[\#2F2F2F\] .text-white,
.light .bg-\[\#0891B2\] .text-white,
.light .bg-primary .text-white,
.light [class*="bg-primary"] .text-white,
.light .floating-input-bar .text-white {
  color: #FFFFFF !important;
}

/* Keep text input dark on light background - with high specificity */
.light .floating-input-bar textarea,
.light .floating-input-bar input,
.light .floating-input-bar textarea.text-white,
.light .floating-input-bar input.text-white {
  color: hsl(220, 14%, 10%) !important;
  caret-color: hsl(220, 14%, 10%) !important;
}

/* Ensure placeholder is visible but lighter */
.light .floating-input-bar textarea::placeholder,
.light .floating-input-bar input::placeholder {
  color: hsl(220, 9%, 50%) !important;
  opacity: 1 !important;
}

/* All input fields and textareas in light mode */
.light input[type="text"],
.light input[type="text"].text-white,
.light textarea,
.light textarea.text-white {
  color: hsl(220, 14%, 10%) !important;
  caret-color: hsl(220, 14%, 10%) !important;
}

/* Labs editor textarea specifically */
.light textarea.font-mono,
.light textarea.font-mono.text-white {
  color: hsl(220, 14%, 10%) !important;
  caret-color: hsl(220, 14%, 10%) !important;
}

/* All input placeholders in light mode */
.light input::placeholder,
.light textarea::placeholder {
  color: hsl(220, 9%, 50%) !important;
  opacity: 1 !important;
}

/* Muted foreground for labels and hints */
.light .text-muted-foreground {
  color: hsl(220, 9%, 40%) !important;
}

/* Links in markdown content */
.light .markdown-content a {
  color: #0891B2 !important;
  text-decoration-color: rgba(8, 145, 178, 0.4) !important;
}

.light .markdown-content a:hover {
  color: #0E7490 !important;
  text-decoration-color: rgba(8, 145, 178, 0.6) !important;
}

/* Code blocks in light mode */
.light .markdown-content pre {
  background-color: hsl(210, 20%, 96%) !important;
  border-color: hsl(220, 13%, 88%) !important;
}

.light .markdown-content pre code,
.light .markdown-content code {
  color: hsl(220, 14%, 15%) !important;
}

/* Inline code styling */
.light .bg-foreground\/10 {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Table styling */
.light .markdown-content table {
  border-color: hsl(220, 13%, 88%) !important;
}

.light .markdown-content thead {
  background-color: hsl(210, 20%, 96%) !important;
}

.light .markdown-content th,
.light .markdown-content td {
  color: hsl(220, 14%, 15%) !important;
  border-color: hsl(220, 13%, 88%) !important;
}

/* Blockquotes */
.light .markdown-content blockquote {
  background-color: hsl(210, 20%, 97%) !important;
  border-left-color: #0891B2 !important;
  color: hsl(220, 14%, 20%) !important;
}

/* Headings */
.light .markdown-content h1,
.light .markdown-content h2,
.light .markdown-content h3 {
  color: hsl(220, 14%, 10%) !important;
  border-color: hsl(220, 13%, 88%) !important;
}

/* Buttons in light mode */
.light .bg-\[\#4A4A4A\] {
  background-color: #0891B2 !important;
  color: #FFFFFF !important;
}

.light .hover\:bg-\[\#5A5A5A\]:hover {
  background-color: #0E7490 !important;
}

.light .bg-\[\#3A3A3A\] {
  background-color: hsl(210, 20%, 92%) !important;
  color: hsl(220, 9%, 50%) !important;
}

/* File attachment chips */
.light .bg-\[\#3A3A3A\].rounded-full {
  background-color: hsl(210, 20%, 90%) !important;
  color: hsl(220, 14%, 20%) !important;
}

/* Source link chips */
.light .bg-\[\#2A2A2A\] {
  background-color: hsl(210, 20%, 96%) !important;
  border-color: hsl(220, 13%, 85%) !important;
}

/* Dropdown menus */
.light .bg-\[\#1E1E1E\] {
  background-color: #FFFFFF !important;
  border-color: hsl(220, 13%, 88%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Processing/loading states */
.light .border-muted-foreground\/20 {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.light .border-t-muted-foreground\/60 {
  border-top-color: rgba(0, 0, 0, 0.3) !important;
}

/* Pro tips / suggestion buttons */
.light .border-border {
  border-color: hsl(220, 13%, 88%) !important;
}

/* Hero section styling */
.light .font-display {
  color: hsl(220, 14%, 10%) !important;
}

/* Action buttons hover */
.light .hover\:bg-white\/5:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.light .hover\:text-white:hover {
  color: hsl(220, 14%, 10%) !important;
}

/* Selection styling for light mode */
.light ::selection {
  background: rgba(8, 145, 178, 0.2);
  color: hsl(220, 14%, 10%);
}

.light ::-moz-selection {
  background: rgba(8, 145, 178, 0.2);
  color: hsl(220, 14%, 10%);
}

/* Mobile header in light mode */
.light .border-border\/30 {
  border-color: hsl(220, 13%, 90%) !important;
}

/* Export menu items */
.light .hover\:bg-foreground\/10:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Labs editor area */
.light .bg-background {
  background-color: #FFFFFF !important;
}

/* Status badges */
.light .bg-green-400\/10 {
  background-color: rgba(74, 222, 128, 0.15) !important;
}

.light .text-green-400\/70,
.light .text-green-400 {
  color: #16A34A !important;
}

.light .bg-yellow-400\/10 {
  background-color: rgba(250, 204, 21, 0.15) !important;
}

.light .text-yellow-400\/70 {
  color: #CA8A04 !important;
}

/* Cursor states and animations */
.light .bg-white\/70 {
  background-color: hsl(220, 14%, 20%) !important;
}

/* Labs project sidebar */
.light .bg-foreground\/5 {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

.light .hover\:bg-foreground\/8:hover,
.light .hover\:bg-foreground\/5:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Thinking dots remain visible in light mode */
.light .thinking-dot {
  background-color: hsl(220, 9%, 40%) !important;
}

/* Activity panel in light mode */
.light .activity-panel {
  border-color: hsl(220, 13%, 88%) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

.light .activity-panel-header {
  color: hsl(220, 9%, 40%) !important;
}

.light .activity-panel-header:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.light .activity-step-row {
  color: hsl(220, 9%, 40%) !important;
}

.light .activity-source-chip {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: hsl(220, 13%, 88%) !important;
  color: hsl(220, 9%, 40%) !important;
}

.light .activity-source-chip:hover {
  background: rgba(0, 0, 0, 0.07) !important;
}

/* Selection toolbar light mode — shadows only (colors via CSS vars) */
.light .selection-toolbar-sheet {
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.1) !important;
}

.light .selection-toolbar-popover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px hsl(var(--border)) !important;
}

/* Streaming status badges */
.light .bg-foreground\/5.border-border {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Ensure primary color elements use cyan */
.light .text-primary {
  color: #0891B2 !important;
}

.light .bg-primary {
  background-color: #0891B2 !important;
}

.light .bg-primary\/10 {
  background-color: rgba(8, 145, 178, 0.1) !important;
}

.light .bg-primary\/20 {
  background-color: rgba(8, 145, 178, 0.2) !important;
}

.light .hover\:bg-primary\/90:hover {
  background-color: #0E7490 !important;
}

/* Icon colors in sidebar */
.light .text-\[\#22D3EE\] {
  color: #0891B2 !important;
}