/* ===========================
   BAMPAa AI CHAT AREA
   =========================== */

/* Whole AI tab wrapper (if not already set) */
.ai-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible !important;
  padding: 16px 20px 20px;   /* top, left/right, bottom */

}

/* Chat container: fixed height + internal scroll */
.ai-chat-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;          /* <- adjust taller/shorter if you like */
  overflow-y: auto;           /* <- THIS gives you scroll */
  padding: 10px 12px;
  border-radius: 14px;
  background: radial-gradient(circle at top left,
              rgba(15, 23, 42, 0.92),
              rgba(15, 23, 42, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.18);
}

/* Optional: mint scrollbar just for the chat box */
.ai-chat-container::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-container::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-container::-webkit-scrollbar-thumb {
  background: linear-gradient(#1f2933, #6aa59c);
  border-radius: 999px;
}
.ai-chat-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#111827, #8ff5d1);
}



/* Bubbles (unchanged) */
.chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 85%;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.chat-bubble-user {
    align-self: flex-end;
    background: #6aa59c;
    color: white;
    border-radius: 14px 14px 2px 14px;
}

.chat-bubble-ai {
    align-self: flex-start;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e5e7eb;
    border-radius: 14px 14px 14px 2px;
}

.chat-bubble-error {
    align-self: center;
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #fecaca;
}

/* Textarea styling */
.ai-textarea {
    background: rgba(15, 23, 42, 0.85);
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}

.ai-textarea::placeholder {
    color: rgba(148, 163, 184, 0.8);
}

.ai-textarea:focus {
    border-color: #6aa59c;
    box-shadow: 0 0 0 1px #6aa59c55;
    outline: none;
}
/* Question card layout */
.question-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
}

/* Small chip row above the title */
.question-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.question-chip {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(106, 165, 156, 0.15);
  border: 1px solid rgba(106, 165, 156, 0.6);
  color: #e5fdf4;
}

.question-meta {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.9);
}

/* Title + body */
.question-title {
  margin: 2px 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.question-body {
  margin: 0 0 6px;
  font-size: 14px;
  color: #e5e7eb;
}

/* Syntax glass card */
.syntax-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: radial-gradient(circle at top left,
              rgba(15, 23, 42, 0.95),
              rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(106, 165, 156, 0.4);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 16px 32px rgba(0, 0, 0, 0.6);
}

.syntax-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 4px;
}

.syntax-block {
  margin: 0;
  border-left: 3px solid #6aa59c;
  padding-left: 8px;
}

/* Container: pushes button to the right and adds spacing */
.cr-learn-more-wrap {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;  /* change to flex-start if you prefer left */
}

/* Futuristic pill button */
.cr-learn-more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;

  /* Gradient border with dark interior */
  background-image:
    linear-gradient(#020617, #020617),
    linear-gradient(120deg, #6AA59C, #4DE1C1, #8BFFDA);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;

  color: #E5F9F5;
  box-shadow:
    0 0 0 1px rgba(106, 165, 156, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.75);

  transition: all 0.25s ease, background-position 0.5s ease;
}

/* Hover: glow + tiny lift */
.cr-learn-more-btn:hover {
  background-position: 100% 0;
  box-shadow:
    0 0 0 1px rgba(139, 255, 218, 0.7),
    0 0 18px rgba(106, 165, 156, 0.8);
  transform: translateY(-1px);
}

/* Animated arrow */
.cr-learn-more-btn::after {
  content: "↗";
  font-size: 11px;
  transform: translateY(0.5px);
  transition: transform 0.25s ease;
}

.cr-learn-more-btn:hover::after {
  transform: translate(3px, 0.5px);
}