style.css

/* Global variables fallback */
:root {
  --primary-dark: #0a0e17;
  --primary-blue: #0d1b2a;
  --secondary-blue: #1b263b;
  --accent-teal: #06b6d4;
  --accent-purple: #9333ea;
  --accent-pink: #ec4899;
  --text-light: #e2e2e2;
  --text-muted: #8d99ae;
}

/* Ensure full height */
html, body {
  height: 100%;
}

/* Sidebar menu items */
.menu-item {
  @apply flex items-center gap-4 px-3 py-3 rounded-xl text-slate-400 hover:text-slate-100 hover:bg-surface-700 transition-all duration-200 cursor-pointer;
}
.menu-item.active {
  @apply bg-surface-700 text-slate-100 translate-x-1;
}
.menu-item i {
  @apply text-lg;
}
.menu-item span {
  @apply text-sm;
}

/* Section title */
.section-title {
  @apply flex items-center gap-3 text-slate-100 text-lg mb-5 pb-2 border-b border-slate-700/60;
}
.section-title i {
  @apply text-primary-400;
}

/* Task list */
.task-list .task-item {
  @apply bg-surface-700 p-4 rounded-xl border-l-4 border-primary-500 flex items-center justify-between transition-all duration-300 hover:-translate-y-1 hover:shadow-glow hover:border-l-secondary-500;
}
.task-item .task-info h3 {
  @apply text-slate-100 text-base mb-1;
}
.task-item .task-info p {
  @apply text-slate-400 text-sm leading-5;
}
.task-actions {
  @apply flex gap-3;
}
.task-btn {
  @apply w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-primary-500/10 hover:text-primary-400 transition-all;
}

/* Snippets */
.snippet-card {
  @apply bg-surface-700 p-4 rounded-xl border border-primary-500/10 cursor-pointer transition-all duration-300 hover:-translate-y-1 hover:border-secondary-500/60 hover:bg-secondary-500/10;
}
.snippet-card h4 {
  @apply text-slate-100 text-base flex items-center gap-2 mb-3;
}
.snippet-card pre {
  @apply bg-black/30 p-3 rounded-lg text-slate-400 text-sm overflow-hidden whitespace-pre-wrap border-l-2 border-primary-400 font-mono;
}

/* IA Messages */
.message {
  @apply max-w-[85%] p-4 rounded-2xl leading-6 relative animate-appear;
}
.message.user {
  @apply self-end bg-gradient-to-br from-secondary-600 to-secondary-700 text-white rounded-br-sm shadow-glow;
}
.message.ia {
  @apply self-start bg-surface-700 text-slate-100 rounded-bl-sm border border-primary-500/20;
}
.message-header {
  @apply flex items-center gap-2 mb-2 text-sm;
}
.message-header i {
  @apply text-base;
}
.message.user .message-header i {
  @apply text-pink-200;
}
.message.ia .message-header i {
  @apply text-primary-400;
}
.message-content {
  @apply text-sm;
}
.message-content code {
  @apply bg-black/30 px-2 py-1 rounded text-primary-300 font-mono border-l-2 border-primary-400 inline-block my-1;
}
.message-content pre {
  @apply bg-black/40 p-4 rounded-lg overflow-x-auto my-2 border border-primary-500/20 text-slate-100 text-sm font-mono border-l-4 border-primary-400;
}

/* Input area */
.input-tab {
  @apply px-4 py-2 bg-surface-700 text-slate-400 rounded-full border-none cursor-pointer text-sm transition-all hover:bg-primary-500/10 hover:text-slate-100;
}
.input-tab.active {
  @apply bg-secondary-600 text-white;
}

.primary-btn {
  @apply flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-secondary-600 to-secondary-700 text-white rounded-full font-medium transition-all hover:-translate-y-0.5 hover:shadow-glow;
}
.secondary-btn {
  @apply flex items-center gap-2 px-5 py-3 bg-surface-700 text-slate-100 rounded-full font-medium transition-all hover:bg-primary-500/10;
}
.control-btn {
  @apply w-11 h-11 rounded-full bg-surface-700 text-slate-400 flex items-center justify-center transition-all hover:bg-secondary-600 hover:text-white hover:scale-110 hover:shadow-glow;
}

/* Generation status */
.generation-status {
  @apply text-sm text-slate-400 flex items-center gap-2;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #06b6d4;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9333ea;
}

/* Responsive tweaks */
@media (max-width: 1200px) {
  main {
    width: 40%;
  }
}

@media (max-width: 992px) {
  .flex.h-screen {
    flex-direction: column;
  }
  aside#sidebar {
    width: 100%;
    height: 70px;
    flex-direction: row;
    padding: 0 1rem;
    justify-content: space-between;
  }
  aside#sidebar:hover {
    height: auto;
    flex-direction: column;
    padding: 1.25rem;
    align-items: flex-start;
  }
  .menu {
    flex-direction: row !important;
    gap: .5rem !important;
  }
  aside#sidebar:hover .menu {
    flex-direction: column !important;
    gap: .75rem !important;
  }
  main, section.flex-1 {
    width: 100%;
    height: 50vh;
  }
}

/* Light mode overrides */
.light {
  color-scheme: light;
}
.light body {
  @apply bg-slate-50 text-slate-900;
}
.light aside#sidebar {
  @apply bg-white border-slate-200;
}
.light .menu-item.active {
  @apply bg-slate-200 text-slate-900;
}
.light .menu-item {
  @apply text-slate-600 hover:text-slate-900 hover:bg-slate-100;
}
.light main {
  @apply bg-white border-slate-200;
}
.light .task-item {
  @apply bg-slate-100 hover:bg-slate-200;
}
.light .snippet-card {
  @apply bg-slate-100 border-slate-200 hover:bg-slate-200;
}
.light .message.ia {
  @apply bg-slate-100 border-slate-200;
}
.light .input-area {
  @apply bg-white border-slate-200;
}
.light .input-tab {
  @apply bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-900;
}
.light .primary-btn {
  @apply text-white;
}
.light .secondary-btn {
  @apply bg-slate-200 text-slate-900;
}
.light .control-btn {
  @apply bg-slate-100 text-slate-700 hover:bg-slate-200;
}