/* Add this at line 1 of style.css */
* {
    box-sizing: border-box;
}

:root{
  /* Soft 4love AI palette */
  --pink: #ff6fb1;
  --pink-soft: #ffd1e6;
  --blue: #47b2ff;
  --blue-soft: #cfefff;
  --lavender-soft: #e7ddff;

  /* Primary (buttons, accents) */
  --primary-color: #47b2ff; /* keep for fallback */

  /* Background */
  --bg-gradient: linear-gradient(135deg,
  #cfefff 0%,
  #e7ddff 45%,
  #ffd1e6 100%
  );

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.72);

  /* Bubbles */
  --bot-bubble: rgba(255, 255, 255, 0.92);
  --user-bubble: linear-gradient(135deg, #47b2ff 0%, #ff6fb1 100%);

  /* Borders/shadows */
  --border-soft: rgba(20, 20, 20, 0.06);
}

body, html {
  margin: 0; padding: 0;
  height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-gradient);
  overflow: hidden;
}

#chat-container {
  display: flex; flex-direction: column;
  height: 100dvh;
  max-width: 600px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

header{
  padding: 8px; text-align: center;
  background: var(--glass-bg);
  font-weight: 700; font-size: 1.1rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;

  /* Gradient text like the logo */
  background-image: linear-gradient(90deg, #47b2ff 0%, #ff6fb1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Soft bottom shadow */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}

.status-dot {
  width: 8px; height: 8px; background: #4caf50; border-radius: 50%;
  box-shadow: 0 0 5px #4caf50;
}

#messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.message {
  max-width: 85%; padding: 12px 16px; border-radius: 18px;
  font-size: 15px; line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.bot { align-self: flex-start; background: var(--bot-bubble); color: #333; border-bottom-left-radius: 4px; border: 1px solid rgba(0,0,0,0.03); }
.user{
  align-self: flex-end;
  background: var(--user-bubble);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 10px 22px rgba(255, 111, 177, 0.14);
}

/* Typing Dots */
.typing {
  display: none; align-self: flex-start;
  background: var(--bot-bubble); padding: 12px 16px;
  border-radius: 18px; border-bottom-left-radius: 4px;
}
.dot {
  display: inline-block; width: 5px; height: 5px; background: #999;
  border-radius: 50%; margin-right: 3px; animation: bounce 1.3s infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* 1. The Container (Invisible) */
footer {
    flex-shrink: 0;           /* Don't squash */
    position: relative;       /* Sit naturally at bottom */
    width: 100%;
    
    /* FORCE TRANSPARENCY */
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    
    z-index: 100;
    
    /* Spacing */
    padding: 10px 15px;
    padding-bottom: max(15px, env(safe-area-inset-bottom)); /* iOS Home Bar space */
}

/* 2. The Input Capsule (Glass Effect) */
.input-wrapper {
    display: flex;
    align-items: flex-end; /* Keeps button at bottom */
    
    /* WIDTH FIX (from previous step) */
    box-sizing: border-box; 
    width: 100%;
    
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    
    /* UPDATED PADDING: gives equal space top/bottom */
    padding: 12px 16px; 
    
    max-width: 800px;
    margin: 0 auto;
}

/* 3. Glow when typing */
.input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.85); /* Whiter when typing for focus */
    box-shadow: 0 8px 25px rgba(71, 178, 255, 0.2);
    border-color: #fff;
}

/* 4. Text Area */
#userInput {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    
    background: transparent;
    border: none;
    outline: none;
    
    font-size: 16px;
    color: #000;
    resize: none;
    max-height: 140px;
    overflow-y: auto;
    
    /* REMOVED fixed height: 24px */
    height: auto; 
    
    /* ALIGNMENT FIXES */
    padding: 0;
    line-height: 1.5; /* Good spacing */
    
    /* This pushes the text up to align with the button center */
    margin-bottom: 5px; 
}

/* 5. Send Button */
#sendBtn {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #47b2ff 0%, #ff6fb1 100%);
    border: none; border-radius: 50%;
    margin-left: 10px;
    
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(71, 178, 255, 0.3);
}

button{
  background: linear-gradient(135deg, #47b2ff 0%, #ff6fb1 100%);
  color: white; border: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.2s;
  box-shadow: 0 10px 20px rgba(71, 178, 255, 0.18);
}
button:active{ transform: scale(0.92); }

/* --- ChatGPT Style Message Formatting --- */

.message.bot {
  background-color: #f7f7f8; /* Light gray background so white bubbles stand out */
  color: #374151;            /* Dark text for main content */
  line-height: 1.6;          /* Good spacing for reading */
  font-size: 15px;
  padding: 15px;             /* Add padding inside the bubble */
  border-radius: 10px;       /* Rounded corners */
}

/* Fix Paragraph Spacing */
.message.bot p {
  margin-bottom: 10px;
  margin-top: 0;
}
.message.bot p:last-child {
  margin-bottom: 0;
}

/* Fix Lists (Bullets) */
.message.bot ul, .message.bot ol {
  margin-top: 5px;
  margin-bottom: 10px;
  padding-left: 20px;
}
.message.bot li {
  margin-bottom: 5px;
}

/* THE CRITICAL FIX: Make Bold Text Dark */
.message.bot strong, .message.bot b {
  font-weight: 700;
  color: #000000;   /* Black text so it is clearly visible */
}

.orb{
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.orb-1{
  left: -140px; top: -140px;
  background: radial-gradient(circle at 30% 30%, #47b2ff, transparent 60%);
}

.orb-2{
  right: -160px; bottom: -160px;
  background: radial-gradient(circle at 70% 70%, #ff6fb1, transparent 60%);
}

/* keep chat above orbs */
#chat-container{ position: relative; z-index: 1; }

/* --- Smooth bubble entrance --- */
.message{
  opacity: 0;
  transform: translateY(6px);
  animation: msgIn 220ms ease-out forwards;
}

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

/* --- Streaming cursor like ChatGPT --- */
.message.bot.streaming::after{
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: rgba(55,65,81,0.65);
  animation: caretBlink 1s step-end infinite;
}

@keyframes caretBlink{
  50%{ opacity: 0; }
}

/* ===== Image Logo (larger, balanced) ===== */
.logo-img{
  height: 46px;              /* MAIN SIZE — increase */
  width: auto;
  display: block;
  user-select: none;
  filter: drop-shadow(0 6px 14px rgba(255,111,177,0.25));
}

/* Mobile */
@media (max-width: 480px){
  .logo-img{
  height: 38px;
  }
}

/* --- FIXED TYPING INDICATOR --- */
.typing-indicator {
    /* Ensure it acts like a message bubble */
    display: table; /* Keeps it tight to content, better than inline-block for flex */
    align-self: flex-start; /* FORCE it to the left side */
    
    /* Style matches bot messages */
    background-color: #f7f7f8; 
    padding: 12px 18px;
    border-radius: 18px;
    border-bottom-left-radius: 4px; /* Little tail like bot msg */
    margin: 8px 0;
    width: fit-content;
    
    /* Ensure it is visible */
    opacity: 1;
    visibility: visible;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #666; /* Darker gray so it is VISIBLE */
    border-radius: 50%;
    margin: 0 3px;
    
    /* The Animation */
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

/* Stagger the dots */
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

/* Renamed animation to avoid conflicts */
@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}