/* static/styles/terminal.css */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap');

/* 1. Global AI Sidebar Settings */
#ai-sidebar {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
}

#prompt {
  font-size: 12px;
  line-height: 1.4;
}

/* 2. Message Bubbles */
.message {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  margin-bottom: 0.75rem;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* User Message: Blue & Right-aligned */
.message.user {
  align-self: flex-end;
  margin-left: auto;
}

.message.user .text-content {
  background: #3b82f6;
  color: white;
  padding: 0.6rem 0.8rem;
  border-radius: 12px 12px 0 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Bot Message: Dark & Left-aligned */
.message.bot {
  align-self: flex-start;
}

.message.bot .text-content {
  background: #1e2230;
  border: 1px solid #2d3343;
  color: #cbd5e1;
  padding: 0.6rem 0.8rem;
  border-radius: 0 12px 12px 12px;
}

/* 3. AI Markdown Content Scaling */
.ai-message-content {
  line-height: 1.5;
  word-break: break-word;
}

.ai-message-content p { margin-bottom: 0.75rem; }
.ai-message-content strong { color: #f8fafc; font-weight: 600; }

.ai-message-content code {
  background-color: #0f172a; /* Slightly darker for contrast */
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-family: 'Fira Code', monospace;
  color: #38bdf8; /* Cyan-ish code text */
}

.ai-message-content pre {
  margin: 0.75rem 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.05);
  background: #0d1117;
}

/* 1. Target the specific containers using the minimal-scroll class */
.minimal-scroll {
  scrollbar-width: thin;          /* Firefox: thin scrollbar */
  scrollbar-color: transparent transparent; /* Firefox: hidden by default */
  transition: scrollbar-color 0.3s;
}

.minimal-scroll:hover {
  scrollbar-color: #334155 transparent; /* Firefox: show on hover */
}

/* 2. Chrome, Edge, and Safari (WebKit) */
.minimal-scroll::-webkit-scrollbar {
  width: 6px;                /* Slim width */
  height: 6px;               /* Slim height for horizontal scroll */
}

.minimal-scroll::-webkit-scrollbar-track {
  background: transparent;    /* 🚨 This kills the white background! */
}

.minimal-scroll::-webkit-scrollbar-thumb {
  background: transparent;    /* Invisible by default */
  border-radius: 10px;
}

/* 3. Reveal the "thumb" only when the user hovers over the chat or code */
.minimal-scroll:hover::-webkit-scrollbar-thumb {
  background: #334155;        /* Subdued slate color */
}

.minimal-scroll::-webkit-scrollbar-thumb:hover {
  background: #475569;        /* Slightly brighter when grabbing the bar */
}