/* ==================== Style 1: Slate Canvas ==================== */
/* Pure Tailwind - No DaisyUI */

/* Genoir Font Family */
@font-face {
  font-family: 'Genoir';
  src: url('/static/fonts/genoir/Genoir-BlackExpandedOblique.woff2') format('woff2'),
       url('/static/fonts/genoir/Genoir-BlackExpandedOblique.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/* Body background - header color fading to page color */
body {
  background: linear-gradient(to bottom, #292524 0%, #292524 56px, #1c1917 350px, #1c1917 100%) !important;
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
}

/* Hide scrollbar but keep scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Gradient overlay - on top of texture, solid at top fading to transparent */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #292524 0%, #292524 25%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Texture Overlay - on body, applies everywhere */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/static/images/bg-texture.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
  z-index: -2;
  transition: opacity 400ms ease-in-out;
}

/* Increase texture visibility when no content is showing */
/* Auth page, onboarding/new path, or chat expanded state */
body:has([data-layout="auth"])::after,
body:has([data-layout="onboarding"])::after,
body:has(.chat-expanded)::after {
  opacity: 0.6;
}

/* ==================== Component Styles ==================== */

/* Buttons - Primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-weight: 500;
  background-color: #84cc16; /* lime-500 */
  color: #1c1917; /* stone-900 - dark text for contrast */
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  background-color: #65a30d; /* lime-600 */
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Buttons - Ghost */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  color: #a8a29e; /* stone-400 */
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
}
.btn-ghost:hover {
  background-color: #44403c; /* stone-700 */
  color: #e7e5e4; /* stone-200 */
}

/* Input Fields */
.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #1c1917; /* stone-900 */
  border: 1px solid #44403c; /* stone-700 */
  border-radius: 0.5rem;
  color: #f5f5f4; /* stone-100 */
  font-size: 1rem;
}
.input-field::placeholder {
  color: #78716c; /* stone-500 */
}
.input-field:focus {
  outline: none;
  border-color: #78716c; /* stone-500 */
}
.input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cards */
.card {
  background-color: #292524; /* stone-800 */
  border: 1px solid #44403c; /* stone-700 */
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* Tabs */
.tabs-container {
  display: flex;
  gap: 0.25rem;
  background-color: #1c1917; /* stone-900 */
  padding: 0.25rem;
  border-radius: 0.5rem;
}
.tab-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #a8a29e; /* stone-400 */
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}
.tab-btn:hover {
  color: #e7e5e4; /* stone-200 */
}
.tab-btn.active {
  background-color: #292524; /* stone-800 */
  color: #ffffff;
}

/* Alerts */
.alert-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
  color: #fca5a5; /* red-300 */
}

/* Loading Spinner */
.loading-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(168, 162, 158, 0.3);
  border-top-color: #a8a29e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-spinner-sm {
  width: 1rem;
  height: 1rem;
}
.loading-spinner-lg {
  width: 2rem;
  height: 2rem;
}

/* Loading Dots */
.loading-dots {
  display: inline-flex;
  gap: 0.25rem;
}
.loading-dots span {
  width: 0.375rem;
  height: 0.375rem;
  background-color: #78716c;
  border-radius: 50%;
  animation: loading-dots 1.4s ease-in-out infinite both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes loading-dots {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ==================== Chat Styles ==================== */

/* Chat Message Animation */
@keyframes chat-message-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chat Container */
.chat-message {
  display: flex;
  margin-bottom: 1rem;
}
.chat-message.chat-message-animate {
  animation: chat-message-enter 0.15s ease-out forwards;
}
.chat-message.user {
  justify-content: flex-end;
}
.chat-message.assistant {
  justify-content: flex-start;
}

/* Chat Bubbles */
.chat-bubble {
  max-width: 80%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.chat-bubble.user {
  background-color: #44403c; /* stone-700 */
  color: #d6d3d1; /* stone-300 */
  border-radius: 1rem 1rem 0 1rem;
}
.chat-bubble.assistant {
  background-color: #1c1917; /* stone-900 */
  color: #d6d3d1; /* stone-300 */
  border-radius: 1rem 1rem 1rem 0;
}

/* Chat Bubble Markdown */
.chat-bubble ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.chat-bubble ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.chat-bubble p {
  margin-bottom: 0.5rem;
}
.chat-bubble p:last-child {
  margin-bottom: 0;
}
.chat-bubble strong {
  font-weight: 600;
}
.chat-bubble code {
  background: rgba(0,0,0,0.1);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.chat-bubble pre {
  background: rgba(0,0,0,0.1);
  padding: 0.5rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}
.chat-bubble pre code {
  background: none;
  padding: 0;
}

/* Typing Indicator */
.typing-indicator span {
  background: #ffffff;
}

/* ==================== Progress & Badges ==================== */

/* Progress Bar */
.progress-bar {
  height: 0.5rem;
  background-color: #44403c; /* stone-700 */
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background-color: #84cc16; /* lime-500 */
  border-radius: 9999px;
  transition: width 400ms ease-in-out;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}
.badge-info {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
.badge-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}
.badge-success {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.badge-neutral {
  background-color: rgba(100, 116, 139, 0.2);
  color: #cbd5e1;
}

/* Checkbox */
.checkbox {
  width: 1rem;
  height: 1rem;
  border: 2px solid #57534e; /* stone-600 */
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
.checkbox:checked {
  background-color: #84cc16; /* lime-500 */
  border-color: #84cc16;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231c1917' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* ==================== Dropdown ==================== */

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  min-width: 12rem;
  background-color: #292524; /* stone-800 */
  border: 1px solid #44403c; /* stone-700 */
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  z-index: 50;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #e7e5e4; /* stone-200 */
  border-radius: 0.375rem;
  cursor: pointer;
}
.dropdown-item:hover {
  background-color: #44403c; /* stone-700 */
}
.dropdown-divider {
  height: 1px;
  background-color: #44403c; /* stone-700 */
  margin: 0.5rem 0;
}

/* ==================== Tool Use Card ==================== */

.tool-use-card {
  background-color: #292524;
  border: 1px solid #44403c;
  border-radius: 1rem;
  padding: 1rem;
}

.tool-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(120, 113, 108, 0.3);
  border-top-color: #78716c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.tool-progress-bar {
  width: 0%;
  transition: width 60s ease-out;
}
.tool-use-card .tool-progress-bar {
  animation: tool-progress 60s ease-out forwards;
}

/* ==================== Animations ==================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes tool-progress {
  from { width: 0%; }
  to { width: 95%; }
}

@keyframes sidebar-slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes layout-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes welcome-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== Layout Animations ==================== */

[data-layout="explorer"] [data-slot="sidebar"] {
  animation: sidebar-slide-in 0.4s ease-out forwards;
}

[data-layout="explorer"]:not(.chat-expanded) [data-slot="content"] {
  animation: content-fade-in 0.3s ease-out 0.1s forwards;
  opacity: 0;
}

[data-layout="explorer"]:not(.chat-expanded) [data-slot="chat"] {
  animation: content-fade-in 0.3s ease-out 0.15s forwards;
  opacity: 0;
}

[data-layout="explorer"].chat-expanded [data-slot="content"] {
  opacity: 0;
  flex: 0 !important;
  overflow: hidden;
}

[data-layout="explorer"].chat-expanded [data-slot="chat"] {
  flex: 5 !important;
  animation: content-fade-in 0.3s ease-out forwards;
  opacity: 0;
}

.layout-transition {
  animation: layout-fade-in 0.3s ease-out forwards;
}

/* ==================== Onboarding Layout ==================== */

[data-layout="onboarding"] .flex-1.flex.items-center.justify-center {
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 0;
}

[data-layout="onboarding"] [data-welcome-content] {
  margin-top: 0;
}



/* ==================== Light Mode ==================== */
/* Triggered by data-theme="light" attribute on <html> */

/* Body & Background */
[data-theme="light"] body {
  background: linear-gradient(to bottom, #f5f5f4 0%, #f5f5f4 56px, #fafaf9 350px, #fafaf9 100%) !important;
  color: #292524; /* stone-800 */
}

/* Light mode gradient overlay */
[data-theme="light"] body::before {
  background: linear-gradient(to bottom, #f5f5f4 0%, #f5f5f4 25%, transparent 100%);
}

/* Light mode texture - remove grayscale and use multiply for visibility */
html[data-theme="light"] body::after {
  filter: none;
  mix-blend-mode: multiply;
  opacity: 0.05;
}

html[data-theme="light"] body:has([data-layout="auth"])::after,
html[data-theme="light"] body:has([data-layout="onboarding"])::after,
html[data-theme="light"] body:has(.chat-expanded)::after {
  opacity: 0.2;
}

/* ---- Buttons ---- */
[data-theme="light"] .btn-primary {
  background-color: #84cc16; /* lime-500 */
  color: #1c1917; /* stone-900 */
}
[data-theme="light"] .btn-primary:hover {
  background-color: #65a30d; /* lime-600 */
}

[data-theme="light"] .btn-ghost {
  color: #57534e; /* stone-600 */
}
[data-theme="light"] .btn-ghost:hover {
  background-color: #e7e5e4; /* stone-200 */
  color: #292524; /* stone-800 */
}

/* ---- Input Fields ---- */
[data-theme="light"] .input-field {
  background-color: #ffffff;
  border-color: #d6d3d1; /* stone-300 */
  color: #292524; /* stone-800 */
}
[data-theme="light"] .input-field::placeholder {
  color: #a8a29e; /* stone-400 */
}
[data-theme="light"] .input-field:focus {
  border-color: #a8a29e; /* stone-400 */
}

/* ---- Cards ---- */
[data-theme="light"] .card {
  background-color: #ffffff;
  border-color: #e7e5e4; /* stone-200 */
}

/* ---- Tabs ---- */
[data-theme="light"] .tabs-container {
  background-color: #e7e5e4; /* stone-200 */
}
[data-theme="light"] .tab-btn {
  color: #78716c; /* stone-500 */
}
[data-theme="light"] .tab-btn:hover {
  color: #44403c; /* stone-700 */
}
[data-theme="light"] .tab-btn.active {
  background-color: #ffffff;
  color: #292524; /* stone-800 */
}

/* ---- Alerts ---- */
[data-theme="light"] .alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626; /* red-600 */
}

/* ---- Loading States ---- */
[data-theme="light"] .loading-spinner {
  border-color: rgba(120, 113, 108, 0.2);
  border-top-color: #78716c; /* stone-500 */
}

[data-theme="light"] .loading-dots span {
  background-color: #a8a29e; /* stone-400 */
}

/* ---- Chat ---- */
[data-theme="light"] .chat-bubble.user {
  background-color: #d6d3d1; /* stone-300 */
  color: #1c1917; /* stone-900 */
}
[data-theme="light"] .chat-bubble.assistant {
  background-color: #e7e5e4; /* stone-200 */
  color: #292524; /* stone-800 */
}

[data-theme="light"] .chat-bubble code {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .chat-bubble pre {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .typing-indicator span {
  background: #78716c; /* stone-500 */
}

/* ---- Progress & Badges ---- */
[data-theme="light"] .progress-bar {
  background-color: #e7e5e4; /* stone-200 */
}

[data-theme="light"] .badge-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #2563eb; /* blue-600 */
}
[data-theme="light"] .badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #d97706; /* amber-600 */
}
[data-theme="light"] .badge-success {
  background-color: rgba(34, 197, 94, 0.15);
  color: #16a34a; /* green-600 */
}
[data-theme="light"] .badge-neutral {
  background-color: rgba(100, 116, 139, 0.15);
  color: #475569; /* slate-600 */
}

/* ---- Checkbox ---- */
[data-theme="light"] .checkbox {
  border-color: #a8a29e; /* stone-400 */
}

/* ---- Dropdown ---- */
[data-theme="light"] .dropdown-menu {
  background-color: #ffffff;
  border-color: #e7e5e4; /* stone-200 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .dropdown-item {
  color: #292524; /* stone-800 */
}
[data-theme="light"] .dropdown-item:hover {
  background-color: #f5f5f4; /* stone-100 */
}
[data-theme="light"] .dropdown-divider {
  background-color: #e7e5e4; /* stone-200 */
}

/* ---- Tool Use Card ---- */
[data-theme="light"] .tool-use-card {
  background-color: #ffffff;
  border-color: #e7e5e4; /* stone-200 */
}

[data-theme="light"] .tool-spinner {
  border-color: rgba(120, 113, 108, 0.2);
  border-top-color: #78716c; /* stone-500 */
}

/* ==================== Light Mode: Tailwind Utility Overrides ==================== */
/* These override Tailwind classes used directly in JS component templates */

/* ---- Text Colors ---- */
[data-theme="light"] .text-white {
  color: #1c1917; /* stone-900 */
}

[data-theme="light"] .text-stone-100 {
  color: #44403c; /* stone-700 */
}

[data-theme="light"] .text-stone-200 {
  color: #57534e; /* stone-600 */
}

[data-theme="light"] .text-stone-300 {
  color: #57534e; /* stone-600 */
}

[data-theme="light"] .text-stone-400 {
  color: #78716c; /* stone-500 */
}

[data-theme="light"] .text-stone-500 {
  color: #78716c; /* stone-500 - same in light */
}

[data-theme="light"] .text-stone-600 {
  color: #a8a29e; /* stone-400 */
}

/* ---- Background Colors ---- */
[data-theme="light"] .bg-stone-700 {
  background-color: #d6d3d1; /* stone-300 */
}

[data-theme="light"] .bg-stone-800 {
  background-color: #f5f5f4; /* stone-100 */
}

[data-theme="light"] .bg-stone-900 {
  background-color: #ffffff;
}

/* Backgrounds with opacity */
[data-theme="light"] .bg-stone-700\/50 {
  background-color: rgba(214, 211, 209, 0.5); /* stone-300/50 */
}

[data-theme="light"] .bg-stone-800\/50 {
  background-color: rgba(245, 245, 244, 0.5); /* stone-100/50 */
}

/* ---- Border Colors ---- */
[data-theme="light"] .border-stone-700 {
  border-color: #e7e5e4; /* stone-200 */
}

[data-theme="light"] .border-stone-800 {
  border-color: #d6d3d1; /* stone-300 */
}

/* ---- Hover States ---- */
[data-theme="light"] .hover\:bg-stone-700:hover {
  background-color: #e7e5e4; /* stone-200 */
}

[data-theme="light"] .hover\:bg-stone-700\/50:hover {
  background-color: rgba(231, 229, 228, 0.5); /* stone-200/50 */
}

[data-theme="light"] .hover\:text-stone-200:hover {
  color: #292524; /* stone-800 */
}

[data-theme="light"] .hover\:text-stone-100:hover {
  color: #1c1917; /* stone-900 */
}

[data-theme="light"] .hover\:bg-stone-800:hover {
  background-color: #e7e5e4; /* stone-200 */
}

/* ---- Border Colors (additional) ---- */
[data-theme="light"] .border-stone-600 {
  border-color: #d6d3d1; /* stone-300 */
}

/* ---- Lime Colors ---- */
[data-theme="light"] .text-lime-400 {
  color: #4d7c0f; /* lime-700 */
}

[data-theme="light"] .text-lime-500 {
  color: #4d7c0f; /* lime-700 */
}